@isoftdata/svelte-ecommerce 1.0.0-beta.0 → 1.0.0-beta.2

package/README.md

@@ -1,58 +1,56 @@
-# create-svelte
-
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+# @isoftdata/svelte-ecommerce
+
+A Svelte 5 component library for e-commerce configuration and management.
+
+## Installation
+
+```bash
+npm install @isoftdata/svelte-ecommerce
+```
+
+## Usage
+
+```svelte
+<script>
+	import { EcommerceConfiguration } from '@isoftdata/svelte-ecommerce'
+</script>
+
+<EcommerceConfiguration />
+```
+
+## Available Components
+
+- `EcommerceConfiguration` - Main configuration component
+- `EcommerceCategoryMapConfiguration` - Category mapping configuration
+- `EcommerceConditionMapConfiguration` - Condition mapping configuration
+- `EcommerceDefaults` - Default settings configuration
+- `EcommerceListingDetails` - Listing details management
+- `EcommercePartTypeConfig` - Part type configuration
+- `EcommerceStoreConfiguration` - Store configuration
+- `PolicyList` - Policy list management
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm dev
+
+# Preview
+pnpm preview
+
+# Build library
+pnpm build
+
+# Run linter
+pnpm lint
+
+# Format code
+pnpm format
+```
+
+## License
+
+MIT

package/dist/EcommerceCategoryMapConfiguration.svelte

@@ -1,266 +1,251 @@
-<script lang="ts">
-	import type { i18n } from 'i18next'
-
-	import { getContext } from 'svelte'
-	import Select from '@isoftdata/svelte-select'
-	import Table from '@isoftdata/svelte-table'
-	import Button from '@isoftdata/svelte-button'
-	import Modal from '@isoftdata/svelte-modal'
-	import type {
-		EbayCategory,
-		EbayCategoryMap,
-		ExtendedEbayCategoryMap,
-		InventoryType,
-		SelectedEbayCategoryMapRow,
-	} from './utils.js'
-	import klona from 'klona'
-
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	// Just ebay category map table columns
-	interface Props {
-		// Props
-		ebayCategoryList: EbayCategory[] // ebay categories for mapping
-		ebayCategoryMapList: ExtendedEbayCategoryMap[] // ebay category mappings for itrack categories
-		inventoryTypeList?: InventoryType[] // inventory types for mapping
-		selectedPartType?: number | null
-		categoryMapChanged: (data: EbayCategoryMap) => Promise<void>
-		selectedEcommerceCategoryMappingRow?: ExtendedEbayCategoryMap | SelectedEbayCategoryMapRow | null
-		selectedEcommerceCategoryId?: number | null
-		selectedEbayCategoryType?: string | null
-	}
-
-	let {
-		ebayCategoryList = [],
-		ebayCategoryMapList = $bindable([]),
-		inventoryTypeList = [],
-		categoryMapChanged = async (_: EbayCategoryMap) => {},
-	}: Props = $props()
-
-	// Local state
-	let editItrackCategoryDisabled = $state(false) // for category mapping, if needed in futur
-	let editEcommerceCategoryDisabled = false
-	let isEditingCategoryMap = false
-	let show = $state(false)
-	let showAllOption = true
-	let selectedEbayCategoryType: string | null = $state(null)
-	let selectedEcommerceCategoryId: number | null = $state(null)
-	let selectedEcommerceCategoryMappingRow: ExtendedEbayCategoryMap | SelectedEbayCategoryMapRow | null = $state(null)
-	let selectedPartType: number | null = $state(null) // used in category map config component
-
-	// New empty items
-	let newCategoryMapping = {
-		ebayCategoryId: null,
-		ebayCategoryName: '',
-		inventoryTypeName: null,
-	}
-
-	// TODO: saved inventory type doesn't get removed from dropdown after upsert/save
-	async function confirm() {
-		if (!selectedEcommerceCategoryMappingRow) return
-
-		const mappingToSave = convertCategoryToSavableFormat(selectedEcommerceCategoryMappingRow)
-		await categoryMapChanged(mappingToSave)
-		close()
-	}
-
-	function close() {
-		selectedEbayCategoryType = null
-		selectedEcommerceCategoryId = null
-		selectedEcommerceCategoryMappingRow = null
-		selectedPartType = null
-		show = false
-	}
-	function convertCategoryToSavableFormat(row: EbayCategoryMap | SelectedEbayCategoryMapRow): EbayCategoryMap {
-		const mapping = {
-			ebayCategoryId: selectedEcommerceCategoryId || row.ebayCategoryId,
-			vehicleType: 'Car', // Set a default so I stop getting TS warnings
-			typeNum: selectedPartType || row.typeNum,
-		}
-
-		const matchingEbayCategoryName = ebayCategoryList.find(row => row.ebayCategoryId === mapping.ebayCategoryId)?.name
-		if (matchingEbayCategoryName) {
-			if (matchingEbayCategoryName.includes('Car')) {
-				mapping.vehicleType = 'Car'
-			} else if (matchingEbayCategoryName.includes('HeavyTruck')) {
-				mapping.vehicleType = 'HeavyTruck'
-			} else if (matchingEbayCategoryName.includes('MotorCycle')) {
-				mapping.vehicleType = 'MotorCycle'
-			}
-		}
-
-		return mapping
-	}
-
-	// Called on add/edit button click
-	function editCategoryMapRow(row?: any) {
-		// Set selected row
-		selectedEcommerceCategoryMappingRow = klona(row || newCategoryMapping)
-
-		// Update the selected values based on the row being edited
-		if (row) {
-			// Set the selectedItrackPartType to match the row's value
-			selectedPartType = row.typeNum || ''
-			selectedEcommerceCategoryId = row.ebayCategoryid
-			// When editing an existing condition, you might want to disable editing the condition
-			editItrackCategoryDisabled = true
-		} else {
-			// For new mappings, reset the selected values
-			selectedPartType = null
-			selectedEcommerceCategoryId = null
-			editItrackCategoryDisabled = false
-		}
-		show = true // Show the category mapping edit form
-	}
-	// Function to extract unique middle segments from eBay category names
-	function extractUniqueCategoryTypes(categories: Array<EbayCategory>): Array<string> {
-		// Set to store unique segments
-		const uniqueSegments = new Set<string>()
-
-		// Process each category
-		categories.forEach(category => {
-			if (!category.name) return
-			const parts = category.name.split('>')
-			// Check if there are at least 3 parts (to have a middle segment)
-			if (parts.length >= 3) {
-				// Extract the middle segment (index 1) and trim whitespace
-				const middleSegment = parts[1].trim()
-				uniqueSegments.add(middleSegment)
-			}
-		})
-
-		// Convert Set to Array and sort alphabetically
-		return Array.from(uniqueSegments).sort()
-	}
-	// Inputs
-
-	let filteredEbayCategoriesByType = $derived(
-		ebayCategoryList.filter(
-			category => category.name && (selectedEbayCategoryType ? category.name.includes(selectedEbayCategoryType) : true),
-		),
-	)
-	let uniqueCategoryTypes = $derived(extractUniqueCategoryTypes(ebayCategoryList))
-	let unmappedPartTypes = $derived(
-		inventoryTypeList.filter(
-			partType =>
-				// Include the part type if it's the one being edited or if it's not already mapped
-				selectedEcommerceCategoryMappingRow?.inventoryTypeName === partType.name ||
-				!ebayCategoryMapList.some(mapping => mapping.inventoryTypeName === partType.name),
-		),
-	)
-</script>
-
-<div class="card-header">
-	<h4 class="mb-0">{translate('configuration.ecommerce.categoryMappings', 'Category Mappings')}</h4>
-	<p class="text-muted mb-0">
-		{translate('configuration.ecommerce.categoryMappingsHint', 'Map part types to eBay Categories')}
-	</p>
-</div>
-<div class="card-body">
-	<div class="mb-3">
-		<Button
-			outline
-			color="success"
-			size="sm"
-			iconClass="plus"
-			onclick={() => editCategoryMapRow()}
-			disabled={isEditingCategoryMap}
-		>
-			{translate('configuration.ecommerce.add', 'Add')}
-		</Button>
-	</div>
-	<Table
-		responsive
-		stickyHeader
-		rows={ebayCategoryMapList}
-		parentClass="overflow-y-auto mh-500"
-		columns={[
-			{
-				property: 'inventoryTypeName',
-				name: translate('configuration.ecommerce.itrackInventoryType', 'Itrack InventoryType'),
-				defaultSortColumn: true,
-			},
-			{ property: 'ebayCategoryName', name: translate('configuration.ecommerce.ebayCategory', 'Ebay Category') },
-		]}
-	>
-		{#snippet children({ row })}
-			<tr
-				onclick={() => editCategoryMapRow(row)}
-				class="cursor-pointer"
-			>
-				<td>{row.inventoryTypeName}</td>
-				<td>{row.ebayCategoryName}</td>
-			</tr>
-		{/snippet}
-	</Table>
-</div>
-
-<Modal
-	bind:show
-	title={translate('configuration.ecommerce.addEditCategoryMapping', 'Add/Edit New Category Mapping')}
-	modalSize="lg"
-	confirmButtonText={translate('configuration.ecommerce.save', 'save')}
-	cancelShown={true}
-	{confirm}
-	{close}
->
-	<div class="card-header">
-		<h4 class="mb-0">{translate('configuration.ecommerce.categoryMapping', 'Category Mapping')}</h4>
-	</div>
-	<div class="card-body">
-		<Select
-			label={translate('configuration.ecommerce.partType', 'Part Type')}
-			showEmptyOption={showAllOption}
-			emptyValue={null}
-			emptyText={translate('configuration.ecommerce.selectType', 'Select Type')}
-			disabled={editItrackCategoryDisabled}
-			bind:value={selectedPartType}
-		>
-			{#each unmappedPartTypes as type}
-				<option value={type.inventoryTypeId}>{type.inventoryTypeId} - {type.name}</option>
-			{/each}
-			{#if selectedEcommerceCategoryMappingRow && selectedEcommerceCategoryMappingRow.typeNum && !unmappedPartTypes.find(t => t.inventoryTypeId === selectedEcommerceCategoryMappingRow?.typeNum)}
-				<option
-					value={selectedEcommerceCategoryMappingRow.typeNum}
-					selected
-				>
-					{selectedEcommerceCategoryMappingRow.typeNum} - {selectedEcommerceCategoryMappingRow.inventoryTypeName}
-				</option>
-			{/if}
-		</Select>
-		<!-- Dropdown for unique category segments -->
-		<Select
-			label={translate('ecommerce.configuration.categoryTypeFilter', 'Category Type Filter')}
-			showEmptyOption={showAllOption}
-			emptyValue={null}
-			emptyText={translate('configuration.ecommerce.selectType', 'Select Type')}
-			bind:value={selectedEbayCategoryType}
-		>
-			{#each uniqueCategoryTypes as type}
-				<option value={type}>{type}</option>
-			{/each}
-		</Select>
-		<Select
-			label={translate('ecommerce.configuration.ebayCategory', 'Ebay Category')}
-			showEmptyOption={showAllOption}
-			emptyValue={null}
-			emptyText={translate('configuration.ecommerce.selectCategory', 'Select Category')}
-			disabled={editEcommerceCategoryDisabled}
-			bind:value={selectedEcommerceCategoryId}
-		>
-			{#each filteredEbayCategoriesByType as category}
-				<option value={category.ebayCategoryId}>{category.name}</option>
-			{/each}
-			{#if selectedEcommerceCategoryMappingRow && selectedEcommerceCategoryMappingRow.ebayCategoryId && !ebayCategoryList.find(t => t.ebayCategoryId === selectedEcommerceCategoryMappingRow?.ebayCategoryId)}
-				<option
-					value={selectedEcommerceCategoryMappingRow.ebayCategoryId}
-					selected
-				>
-					{selectedEcommerceCategoryMappingRow.ebayCategoryName}
-				</option>
-			{/if}
-		</Select>
-	</div>
-</Modal>
+<script lang="ts">
+	import type { i18n } from 'i18next'
+
+	import { getContext } from 'svelte'
+	import Select from '@isoftdata/svelte-select'
+	import Table from '@isoftdata/svelte-table'
+	import Button from '@isoftdata/svelte-button'
+	import Modal from '@isoftdata/svelte-modal'
+	import type { EbayCategory, EbayCategoryMap, ExtendedEbayCategoryMap, InventoryType } from './utils.js'
+	import type { IndexedRowProps } from '@isoftdata/svelte-table'
+	import { klona } from 'klona'
+
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	type SelectedEbayCategoryMapRow = ExtendedEbayCategoryMap & IndexedRowProps
+
+	// Just ebay category map table columns
+	interface Props {
+		// Props
+		ebayCategoryList: Array<EbayCategory> // ebay categories for mapping
+		ebayCategoryMapList: Array<ExtendedEbayCategoryMap> // ebay category mappings for itrack categories
+		inventoryTypeList?: Array<InventoryType> // inventory types for mapping
+		selectedPartType?: number | null
+		categoryMapChanged: (data: EbayCategoryMap) => Promise<void>
+		selectedEcommerceCategoryMappingRow?: ExtendedEbayCategoryMap | SelectedEbayCategoryMapRow | null
+		selectedEcommerceCategoryId?: number | null
+		selectedEbayCategoryType?: string | null
+	}
+
+	let {
+		ebayCategoryList = [],
+		ebayCategoryMapList = $bindable([]),
+		inventoryTypeList = [],
+		categoryMapChanged = async (_: EbayCategoryMap) => {},
+	}: Props = $props()
+
+	// Local state
+	let editITrackCategoryDisabled = $state(false) // for category mapping, if needed in future
+	let show = $state(false)
+	let selectedEbayCategoryType: string | null = $state(null)
+	let selectedEcommerceCategoryId: number | null = $state(null)
+	let selectedEcommerceCategoryMappingRow: ExtendedEbayCategoryMap | SelectedEbayCategoryMapRow | null = $state(null)
+	let selectedPartType: number | null = $state(null) // used in category map config component
+
+	// New empty items
+	let newCategoryMapping = {
+		ebayCategoryId: null,
+		ebayCategoryName: '',
+		inventoryTypeName: null,
+	}
+
+	// TODO: saved inventory type doesn't get removed from dropdown after upsert/save
+	async function confirm() {
+		if (!selectedEcommerceCategoryMappingRow) return
+
+		const mappingToSave = convertCategoryToSavableFormat(selectedEcommerceCategoryMappingRow)
+		await categoryMapChanged(mappingToSave)
+		close()
+	}
+
+	function close() {
+		selectedEbayCategoryType = null
+		selectedEcommerceCategoryId = null
+		selectedEcommerceCategoryMappingRow = null
+		selectedPartType = null
+		show = false
+	}
+	function convertCategoryToSavableFormat(row: EbayCategoryMap | SelectedEbayCategoryMapRow): EbayCategoryMap {
+		const mapping = {
+			ebayCategoryId: selectedEcommerceCategoryId || row.ebayCategoryId,
+			vehicleType: 'Car', // Set a default so I stop getting TS warnings
+			typeNum: selectedPartType || row.typeNum,
+		}
+
+		const matchingEbayCategoryName = ebayCategoryList.find(row => row.ebayCategoryId === mapping.ebayCategoryId)?.name
+		if (matchingEbayCategoryName) {
+			if (matchingEbayCategoryName.includes('Car')) {
+				mapping.vehicleType = 'Car'
+			} else if (matchingEbayCategoryName.includes('HeavyTruck')) {
+				mapping.vehicleType = 'HeavyTruck'
+			} else if (matchingEbayCategoryName.includes('MotorCycle')) {
+				mapping.vehicleType = 'MotorCycle'
+			}
+		}
+
+		return mapping
+	}
+
+	// Called on add/edit button click
+	function editCategoryMapRow(row?: any) {
+		// Set selected row
+		selectedEcommerceCategoryMappingRow = klona(row || newCategoryMapping)
+
+		// Update the selected values based on the row being edited
+		if (row) {
+			// Set the selectedITrackPartType to match the row's value
+			selectedPartType = row.typeNum || ''
+			selectedEcommerceCategoryId = row.ebayCategoryid
+			// When editing an existing condition, you might want to disable editing the condition
+			editITrackCategoryDisabled = true
+		} else {
+			// For new mappings, reset the selected values
+			selectedPartType = null
+			selectedEcommerceCategoryId = null
+			editITrackCategoryDisabled = false
+		}
+		show = true // Show the category mapping edit form
+	}
+	// Function to extract unique middle segments from eBay category names
+	function extractUniqueCategoryTypes(categories: Array<EbayCategory>): Array<string> {
+		// Set to store unique segments
+		const uniqueSegments = new Set<string>()
+
+		// Process each category
+		categories.forEach(category => {
+			if (!category.name) return
+			const parts = category.name.split('>')
+			// Check if there are at least 3 parts (to have a middle segment)
+			if (parts.length >= 3) {
+				// Extract the middle segment (index 1) and trim whitespace
+				const middleSegment = parts[1].trim()
+				uniqueSegments.add(middleSegment)
+			}
+		})
+
+		// Convert Set to Array and sort alphabetically
+		return Array.from(uniqueSegments).sort()
+	}
+	// Inputs
+
+	let filteredEbayCategoriesByType = $derived(
+		ebayCategoryList.filter(
+			category => category.name && (selectedEbayCategoryType ? category.name.includes(selectedEbayCategoryType) : true),
+		),
+	)
+	let uniqueCategoryTypes = $derived(extractUniqueCategoryTypes(ebayCategoryList))
+	let unmappedPartTypes = $derived(
+		inventoryTypeList.filter(
+			partType =>
+				// Include the part type if it's the one being edited or if it's not already mapped
+				selectedEcommerceCategoryMappingRow?.inventoryTypeName === partType.name ||
+				!ebayCategoryMapList.some(mapping => mapping.inventoryTypeName === partType.name),
+		),
+	)
+</script>
+
+<div class="card">
+	<div class="card-header">
+		<h4 class="mb-0">{translate('configuration.ecommerce.categoryMappings', 'Category Mappings')}</h4>
+		<p class="text-muted mb-0">
+			{translate('configuration.ecommerce.categoryMappingsHint', 'Map part types to eBay Categories')}
+		</p>
+	</div>
+	<div class="card-body">
+		<Table
+			responsive
+			stickyHeader
+			rows={ebayCategoryMapList}
+			parentClass="overflow-y-auto mh-500"
+			columns={[
+				{
+					property: 'inventoryTypeName',
+					name: translate('configuration.ecommerce.itrackInventoryType', '{{product}} Inventory Type', {
+						product: 'ITrack',
+					}),
+					defaultSortColumn: true,
+				},
+				{ property: 'ebayCategoryName', name: translate('configuration.ecommerce.ebayCategory', 'Ebay Category') },
+			]}
+		>
+			{#snippet children({ row })}
+				<tr
+					onclick={() => editCategoryMapRow(row)}
+					style="cursor: pointer;"
+				>
+					<td>{row.inventoryTypeName}</td>
+					<td>{row.ebayCategoryName}</td>
+				</tr>
+			{/snippet}
+		</Table>
+	</div>
+	<div class="card-footer">
+		<Button
+			outline
+			color="success"
+			size="sm"
+			iconClass="plus"
+			onclick={() => editCategoryMapRow()}
+		>
+			{translate('configuration.ecommerce.add', 'Add')}...
+		</Button>
+	</div>
+</div>
+
+<Modal
+	bind:show
+	title={translate('configuration.ecommerce.addEditCategoryMapping', 'Add/Edit New Category Mapping')}
+	modalSize="lg"
+	confirmButtonText={translate('configuration.ecommerce.save', 'save')}
+	cancelShown
+	{confirm}
+	{close}
+>
+	<Select
+		label={translate('configuration.ecommerce.partType', 'Part Type')}
+		emptyText="-- {translate('configuration.ecommerce.selectType', 'Select Type')} --"
+		disabled={editITrackCategoryDisabled}
+		bind:value={selectedPartType}
+	>
+		{#each unmappedPartTypes as type}
+			<option value={type.inventoryTypeId}>{type.inventoryTypeId} - {type.name}</option>
+		{/each}
+		{#if selectedEcommerceCategoryMappingRow && selectedEcommerceCategoryMappingRow.typeNum && !unmappedPartTypes.find(t => t.inventoryTypeId === selectedEcommerceCategoryMappingRow?.typeNum)}
+			<option
+				value={selectedEcommerceCategoryMappingRow.typeNum}
+				selected
+			>
+				{selectedEcommerceCategoryMappingRow.typeNum} - {selectedEcommerceCategoryMappingRow.inventoryTypeName}
+			</option>
+		{/if}
+	</Select>
+	<!-- Dropdown for unique category segments -->
+	<Select
+		label={translate('ecommerce.configuration.categoryTypeFilter', 'Category Type Filter')}
+		emptyText="-- {translate('configuration.ecommerce.selectType', 'Select Type')} --"
+		bind:value={selectedEbayCategoryType}
+	>
+		{#each uniqueCategoryTypes as type}
+			<option value={type}>{type}</option>
+		{/each}
+	</Select>
+	<Select
+		label={translate('ecommerce.configuration.ebayCategory', 'Ebay Category')}
+		emptyText="-- {translate('configuration.ecommerce.selectCategory', 'Select Category')} --"
+		bind:value={selectedEcommerceCategoryId}
+	>
+		{#each filteredEbayCategoriesByType as category}
+			<option value={category.ebayCategoryId}>{category.name}</option>
+		{/each}
+		{#if selectedEcommerceCategoryMappingRow && selectedEcommerceCategoryMappingRow.ebayCategoryId && !ebayCategoryList.find(t => t.ebayCategoryId === selectedEcommerceCategoryMappingRow?.ebayCategoryId)}
+			<option
+				value={selectedEcommerceCategoryMappingRow.ebayCategoryId}
+				selected
+			>
+				{selectedEcommerceCategoryMappingRow.ebayCategoryName}
+			</option>
+		{/if}
+	</Select>
+</Modal>