feat: extract provider mapping workflow step

2026-09-10 03:11:19 -04:00
parent 3e29ca0529
commit 7ad5635900
5 changed files with 104 additions and 54 deletions
@@ -6,6 +6,7 @@ import { useAuth } from "@/composables/useAuth.js";
 import AdminListingStatus from "@/components/molecules/AdminListingStatus.vue";
 import InventoryWorkflowStepper from "@/components/molecules/InventoryWorkflowStepper.vue";
 import ProductIdentityStep from "@/components/molecules/ProductIdentityStep.vue";
+import ProviderMappingStep from "@/components/molecules/ProviderMappingStep.vue";
 import {
  createAdminInventory,
  createAdminProduct,
@@ -685,60 +686,22 @@ onMounted(load);
        @update:category-id="categoryId = $event"
        @submit="createProduct"
      />
-      <form id="workflow-mapping" class="showcase-panel" @submit.prevent="createProviderMapping">
-        <h2>Link provider mapping</h2>
-        <label class="fixture-label" for="mapping-product">Product</label>
-        <select
-          id="mapping-product"
-          v-model="mappingProductId"
-          class="fixture-input"
-          required
-          @change="loadProviderMappings()"
-        >
-          <option value="" disabled>Select a product</option>
-          <option
-            v-for="product in products"
-            :key="product.id"
-            :value="product.id"
-          >
-            {{ product.name }}
-          </option>
-        </select>
-        <label class="fixture-label" for="mapping-provider">Provider ID</label>
-        <input
-          id="mapping-provider"
-          v-model="mappingProviderId"
-          class="fixture-input"
-          required
-          placeholder="ebay"
-        />
-        <label class="fixture-label" for="mapping-type">Mapping type</label>
-        <select id="mapping-type" v-model="mappingType" class="fixture-input">
-          <option value="PRODUCT">Product</option>
-          <option value="SEARCH">Search</option>
-        </select>
-        <label class="fixture-label" for="mapping-external"
-          >External identifier</label
-        >
-        <input
-          id="mapping-external"
-          v-model="mappingExternalIdentifier"
-          class="fixture-input"
-        />
-        <label class="fixture-label" for="mapping-query">Search query</label>
-        <input
-          id="mapping-query"
-          v-model="mappingSearchQuery"
-          class="fixture-input"
-        />
-        <button
-          class="button button--primary"
-          type="submit"
-          :disabled="isSaving"
-        >
-          Save provider mapping
-        </button>
-      </form>
+      <ProviderMappingStep
+        :product-id="mappingProductId"
+        :provider-id="mappingProviderId"
+        :mapping-type="mappingType"
+        :external-identifier="mappingExternalIdentifier"
+        :search-query="mappingSearchQuery"
+        :products="products"
+        :is-saving="isSaving"
+        @update:product-id="mappingProductId = $event"
+        @update:provider-id="mappingProviderId = $event"
+        @update:mapping-type="mappingType = $event"
+        @update:external-identifier="mappingExternalIdentifier = $event"
+        @update:search-query="mappingSearchQuery = $event"
+        @product-change="loadProviderMappings($event)"
+        @submit="createProviderMapping"
+      />
      <form id="workflow-inventory" class="showcase-panel" @submit.prevent="createInventory">
        <h2>Add inventory copy</h2>
        <label class="fixture-label" for="inventory-product">Product</label>