diff --git a/apps/web/src/components/molecules/ProviderMappingStep.scss b/apps/web/src/components/molecules/ProviderMappingStep.scss new file mode 100644 index 0000000..5367713 --- /dev/null +++ b/apps/web/src/components/molecules/ProviderMappingStep.scss @@ -0,0 +1,9 @@ +.provider-mapping-step { + align-content: start; +} + +.provider-mapping-step__intro { + margin: var(--space-2) 0 0; + color: var(--color-text-muted); + font-size: var(--text-sm); +} diff --git a/apps/web/src/components/molecules/ProviderMappingStep.stories.js b/apps/web/src/components/molecules/ProviderMappingStep.stories.js new file mode 100644 index 0000000..68ec5a5 --- /dev/null +++ b/apps/web/src/components/molecules/ProviderMappingStep.stories.js @@ -0,0 +1,17 @@ +import ProviderMappingStep from './ProviderMappingStep.vue'; + +export default { title: 'Molecules/ProviderMappingStep', component: ProviderMappingStep }; + +export const Empty = { + args: { + productId: '', providerId: '', mappingType: 'PRODUCT', externalIdentifier: '', searchQuery: '', + products: [{ id: 'product-1', name: 'Charizard ex #199/165' }], + }, +}; + +export const SearchMapping = { + args: { + productId: 'product-1', providerId: 'ebay', mappingType: 'SEARCH', externalIdentifier: '', searchQuery: 'Charizard ex 199/165 near mint', + products: [{ id: 'product-1', name: 'Charizard ex #199/165' }], + }, +}; diff --git a/apps/web/src/components/molecules/ProviderMappingStep.vue b/apps/web/src/components/molecules/ProviderMappingStep.vue new file mode 100644 index 0000000..3241c4f --- /dev/null +++ b/apps/web/src/components/molecules/ProviderMappingStep.vue @@ -0,0 +1,60 @@ + + + + + + + diff --git a/apps/web/src/pages/AdminHomePage.vue b/apps/web/src/pages/AdminHomePage.vue index 70ee587..1b1e4d4 100644 --- a/apps/web/src/pages/AdminHomePage.vue +++ b/apps/web/src/pages/AdminHomePage.vue @@ -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" /> -
+