@isoftdata/svelte-ecommerce 1.0.0-beta.4 → 1.0.0-beta.6

package/README.md

@@ -1,56 +1,56 @@
-# @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
+# @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,251 +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 } 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>
+<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>