@isoftdata/svelte-ecommerce 1.0.0-beta.0

package/README.md

@@ -0,0 +1,58 @@
+# 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
+```

package/dist/EcommerceCategoryMapConfiguration.svelte

@@ -0,0 +1,266 @@
+<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>

package/dist/EcommerceCategoryMapConfiguration.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { EbayCategory, EbayCategoryMap, ExtendedEbayCategoryMap, InventoryType, SelectedEbayCategoryMapRow } from './utils.js';
+interface Props {
+    ebayCategoryList: EbayCategory[];
+    ebayCategoryMapList: ExtendedEbayCategoryMap[];
+    inventoryTypeList?: InventoryType[];
+    selectedPartType?: number | null;
+    categoryMapChanged: (data: EbayCategoryMap) => Promise<void>;
+    selectedEcommerceCategoryMappingRow?: ExtendedEbayCategoryMap | SelectedEbayCategoryMapRow | null;
+    selectedEcommerceCategoryId?: number | null;
+    selectedEbayCategoryType?: string | null;
+}
+declare const EcommerceCategoryMapConfiguration: import("svelte").Component<Props, {}, "ebayCategoryMapList">;
+type EcommerceCategoryMapConfiguration = ReturnType<typeof EcommerceCategoryMapConfiguration>;
+export default EcommerceCategoryMapConfiguration;

package/dist/EcommerceConditionMapConfiguration.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import type { i18n } from 'i18next'
+	import { getContext } from 'svelte'
+
+	import Table from '@isoftdata/svelte-table'
+	import Button from '@isoftdata/svelte-button'
+	import Input from '@isoftdata/svelte-input'
+	import Select from '@isoftdata/svelte-select'
+	import Modal from '@isoftdata/svelte-modal'
+	import klona from 'klona'
+	import type {
+		EcommerceCondition,
+		EcommerceConditionMap,
+		ExtendedEcommerceConditionMap,
+		NewEcommerceConditionMap,
+		NewConditionMappingState,
+	} from './utils.js'
+
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	interface SelectedEcommerceConditionMapRow extends EcommerceConditionMap {
+		originalIndex: number
+		uuid: string
+	}
+
+	// Add index signature to make it compatible with Table component
+	interface TableRow extends ExtendedEcommerceConditionMap {
+		[key: string]: any
+	}
+
+	interface Props {
+		ecommerceConditionMappingList: ExtendedEcommerceConditionMap[] // mapping between itrack and ebay conditions
+		ecommerceConditionList: EcommerceCondition[]
+		inventoryConditionList: string[] // unique conditions from inventory table
+		conditionMapChanged: (data: EcommerceConditionMap) => Promise<void>
+	}
+
+	let {
+		ecommerceConditionMappingList = $bindable([]),
+		ecommerceConditionList = [],
+		inventoryConditionList = [],
+		conditionMapChanged = async (_: EcommerceConditionMap) => {},
+	}: Props = $props()
+
+	// New empty items
+	let newConditionMapping: NewConditionMappingState = Object.freeze({
+		itrackCondition: null,
+		ecommerceConditionId: null,
+		description: null,
+	})
+	// Local state
+	let selectedEcommerceConditionMappingRow: SelectedEcommerceConditionMapRow | NewConditionMappingState =
+		$state(newConditionMapping)
+
+	let editEcommerceConditionDisabled = $state(false)
+	let editItrackConditionDisabled = $state(false)
+	let isEditingConditionMap = $state(false)
+	let showAllOption = $state(true)
+	let show = $state(false)
+
+	let unmappedConditions = $derived(
+		inventoryConditionList.filter(
+			condition =>
+				selectedEcommerceConditionMappingRow?.itrackCondition === condition ||
+				!ecommerceConditionMappingList.some(mapping => mapping.itrackCondition === condition),
+		),
+	)
+
+	function editConditionMapRow(row?: ExtendedEcommerceConditionMap) {
+		// Set selected row
+		selectedEcommerceConditionMappingRow = klona(row || newConditionMapping)
+
+		show = true
+	}
+
+	// Add function to convert condtion row to savable format
+	function convertConditionToSavableFormat(
+		row: SelectedEcommerceConditionMapRow | NewConditionMappingState,
+	): EcommerceConditionMap {
+		// Handle the case where we have a NewConditionMappingState with null values
+		if ('ecommerceConditionMapId' in row && row.ecommerceConditionMapId !== undefined) {
+			// This is an existing record (EcommerceConditionMap or SelectedEcommerceConditionMapRow)
+			return {
+				ecommerceConditionMapId: row.ecommerceConditionMapId,
+				ecommercePartnerId: row.ecommercePartnerId!,
+				itrackCondition: row.itrackCondition!,
+				ecommerceConditionId: row.ecommerceConditionId!,
+				description: row.description || row.itrackCondition!,
+			}
+		} else {
+			// This is a new record - we need to create it without the ID
+			// The API will assign the ID when creating
+			// TODO: is there a way to avoid 'any' here?
+			const newMapping: any = {
+				ecommercePartnerId: row.ecommercePartnerId || 0, // Default value, should be set by parent
+				itrackCondition: row.itrackCondition!,
+				ecommerceConditionId: row.ecommerceConditionId!,
+				description: row.description || row.itrackCondition!,
+			}
+			return newMapping as EcommerceConditionMap
+		}
+	}
+
+	async function confirm() {
+		if (!selectedEcommerceConditionMappingRow) return
+
+		const mappingToSave = convertConditionToSavableFormat(selectedEcommerceConditionMappingRow)
+
+		await conditionMapChanged(mappingToSave)
+		close()
+	}
+	function close() {
+		// Reset related data and flags
+		selectedEcommerceConditionMappingRow = newConditionMapping
+		show = false
+	}
+</script>
+
+<div class="card-header">
+	<h4 class="mb-0">{translate('ecommerce.configuration.conditionMappings', 'Condition Mappings')}</h4>
+	<p class="text-muted mb-0">
+		{translate('ecommerce.configuration.mapConditionValues', 'Map condition values to eBay condition values')}
+	</p>
+</div>
+<div class="card-body">
+	<div class="mb-3">
+		<Button
+			outline
+			color="success"
+			size="sm"
+			iconClass="plus"
+			onclick={() => editConditionMapRow()}
+			disabled={isEditingConditionMap}
+		>
+			{translate('ecommerce.configuration.add', 'Add')}
+		</Button>
+	</div>
+	<Table
+		parentClass="overflow-y-auto mh-500"
+		rows={ecommerceConditionMappingList as TableRow[]}
+		columns={[
+			{
+				property: 'itrackCondition',
+				name: translate('ecommerce.configuration.itrackCondition', 'Itrack Condition'),
+				defaultSortColumn: true,
+			},
+			{ property: 'name', name: translate('ecommerce.configuration.ebayCondition', 'Ebay Condition') },
+			{
+				property: 'description',
+				name: translate('ecommerce.configuration.conditionDescription', 'Condition Description'),
+			},
+		]}
+		stickyHeader
+		responsive
+	>
+		{#snippet children({ row })}
+			<tr
+				onclick={() => editConditionMapRow(row as ExtendedEcommerceConditionMap)}
+				class="cursor-pointer"
+			>
+				<td>{row.itrackCondition}</td>
+				<td>{row.name}</td>
+				<td>{row.description}</td>
+			</tr>
+		{/snippet}
+	</Table>
+</div>
+
+<Modal
+	bind:show
+	title={translate('ecommerce.configuration.addEditConditionMapping', 'Add/Edit New Condition Mapping')}
+	modalSize="lg"
+	confirmButtonText={translate('ecommerce.configuration.save', 'Save')}
+	cancelShown={true}
+	{confirm}
+	{close}
+>
+	<div class="card-header">
+		<h4 class="mb-0">{translate('ecommerce.configuration.conditionMapping', 'Condition Mapping')}</h4>
+	</div>
+	<div class="card-body">
+		<Select
+			label={translate('ecommerce.configuration.itrackCondition', 'Itrack Condition')}
+			showEmptyOption={showAllOption}
+			emptyValue={null}
+			emptyText={translate('ecommerce.configuration.selectCondition', 'Select Condition')}
+			disabled={editItrackConditionDisabled}
+			bind:value={selectedEcommerceConditionMappingRow.itrackCondition}
+		>
+			{#each unmappedConditions as itrackCondition}
+				<option value={itrackCondition}>{itrackCondition}</option>
+			{/each}
+		</Select>
+		<Select
+			label={translate('ecommerce.configuration.ecommerceCondition', 'Ecommerce Condition')}
+			showEmptyOption={showAllOption}
+			emptyValue={null}
+			emptyText={translate('ecommerce.configuration.selectCondition', 'Select Condition')}
+			disabled={editEcommerceConditionDisabled}
+			bind:value={selectedEcommerceConditionMappingRow.ecommerceConditionId}
+		>
+			{#each ecommerceConditionList as ecommerceCondition}
+				<option value={ecommerceCondition.ecommerceConditionId ?? null}>{ecommerceCondition.name}</option>
+			{/each}
+		</Select>
+		<Input
+			label={translate('ecommerce.configuration.conditionDescription', 'Condition Description')}
+			maxlength={1000}
+			bind:value={selectedEcommerceConditionMappingRow.description}
+			placeholder=""
+		/>
+	</div>
+</Modal>

package/dist/EcommerceConditionMapConfiguration.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { EcommerceCondition, EcommerceConditionMap, ExtendedEcommerceConditionMap } from './utils.js';
+interface Props {
+    ecommerceConditionMappingList: ExtendedEcommerceConditionMap[];
+    ecommerceConditionList: EcommerceCondition[];
+    inventoryConditionList: string[];
+    conditionMapChanged: (data: EcommerceConditionMap) => Promise<void>;
+}
+declare const EcommerceConditionMapConfiguration: import("svelte").Component<Props, {}, "ecommerceConditionMappingList">;
+type EcommerceConditionMapConfiguration = ReturnType<typeof EcommerceConditionMapConfiguration>;
+export default EcommerceConditionMapConfiguration;