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

package/dist/EcommerceStoreConfiguration.svelte

@@ -1,263 +1,248 @@
-<script lang="ts">
-	import type { i18n } from 'i18next'
-
-	import { getContext } from 'svelte'
-	import Table from '@isoftdata/svelte-table'
-	import klona from 'klona'
-	import Modal from '@isoftdata/svelte-modal'
-	import Checkbox from '@isoftdata/svelte-checkbox'
-	import Button from '@isoftdata/svelte-button'
-	import Select from '@isoftdata/svelte-select'
-	import type {
-		EbayLocation,
-		EbayPolicy,
-		EcommerceCondition,
-		EcommercePartnerConfiguration,
-		EcommerceStoreConfig,
-		Store,
-		EcommerceSharedDefaults,
-	} from './utils.js'
-	import EcommerceDefaults from './EcommerceDefaults.svelte'
-
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	interface Props {
-		ebayLocationList?: EbayLocation[]
-		ebayPolicyList?: EbayPolicy[]
-		ecommerceConditionList: EcommerceCondition[]
-		partnerConfigurationList?: EcommercePartnerConfiguration[]
-		selectedEcommercePartnerId: number
-		storeList: Store[]
-		partnerConfigurationChanged: (partnerConfig: EcommercePartnerConfiguration) => Promise<void>
-	}
-
-	let {
-		ebayLocationList = [],
-		ebayPolicyList = [],
-		ecommerceConditionList = [],
-		partnerConfigurationList = [],
-		selectedEcommercePartnerId,
-		storeList = [],
-		partnerConfigurationChanged = async (_: EcommercePartnerConfiguration) => {},
-	}: Props = $props()
-
-	let newStoreConfig: EcommerceStoreConfig = Object.freeze({
-		active: true,
-		defaults: {
-			brandMapping: undefined,
-			conditionDescription: undefined,
-			conditionId: undefined,
-			fulfillmentPolicies: undefined,
-			fulfillmentTimeUnit: undefined,
-			fulfillmentTimeValue: undefined,
-			listingDescriptionTemplate: undefined,
-			listingDuration: undefined,
-			listingFormat: undefined,
-			listingTitleTemplate: undefined,
-			manufacturerPartNumberMapping: undefined,
-			oemNumberMapping: undefined,
-			packageType: undefined,
-			paymentPolicies: undefined,
-			pricingModifier: undefined,
-			returnPolicies: undefined,
-			shippingLengthUnit: undefined,
-			shippingWeightUnit: undefined,
-			storePickupAllowed: undefined,
-		},
-		merchantLocationKey: undefined,
-		name: '',
-		storeId: 0,
-	})
-
-	let show = $state(false)
-	let showAllOption = $state(true)
-	let selectedStoreConfigRow = $state<EcommerceStoreConfig | null>(null)
-
-	// If we had more than one ecommercepartner, this would change depending on selected partner id
-	let selectedPartnerConfig = $derived(
-		partnerConfigurationList.find(row => row.ecommercePartnerId === selectedEcommercePartnerId),
-	)
-	// Get the store rows from the partnerconfig row
-	let selectedPartnerConfigStoreRows = $derived(selectedPartnerConfig?.defaults?.store || [])
-
-	// Filter available ebay locations depending on whether we're adding or editing
-	let availableLocations = $derived.by(() => {
-		const configuredEbayLocations = selectedPartnerConfigStoreRows.map(row => row.merchantLocationKey)
-		const isEditingExisting =
-			selectedStoreConfigRow?.name !== null &&
-			configuredEbayLocations.includes(selectedStoreConfigRow?.merchantLocationKey)
-
-		if (isEditingExisting) {
-			return ebayLocationList
-		}
-		return ebayLocationList.filter(location => !configuredEbayLocations.includes(location.ebayName))
-	})
-	// Filter available stores based on whether we're adding or editing existing
-	let availableStores = $derived.by(() => {
-		if (!selectedStoreConfigRow) return storeList
-
-		// Get the IDs of already configured stores
-		const configuredStoreIds = selectedPartnerConfigStoreRows.map(row => row.storeId)
-		const isEditingExisting =
-			selectedStoreConfigRow.storeId !== null && configuredStoreIds.includes(selectedStoreConfigRow.storeId)
-
-		if (isEditingExisting) {
-			return storeList
-		}
-		// If adding new, filter out already configured stores
-		return storeList.filter(store => !configuredStoreIds.includes(store.storeId))
-	})
-
-	async function confirm() {
-		if (!selectedStoreConfigRow || !selectedStoreConfigRow.storeId) return
-
-		// TODO: Here I am regretting my decision to have JSON sub object business for this
-		// Copy the store config data for uh state wackiness reasons?
-		const storeConfigRowCopy = klona(selectedStoreConfigRow)
-		// Copy the partner config row
-		const partnerConfigCopy = klona(selectedPartnerConfig)
-
-		// Copy the selectedParnterConfigStoreRows
-		let updatedStoreRows = klona(selectedPartnerConfigStoreRows || [])
-
-		// If empty, add storeConfigCopy
-		if (updatedStoreRows.length === 0) {
-			updatedStoreRows.push(storeConfigRowCopy)
-		} else {
-			const existingIndex = updatedStoreRows.findIndex(row => row.storeId === storeConfigRowCopy.storeId)
-			if (existingIndex === -1) {
-				updatedStoreRows.push(storeConfigRowCopy)
-			} else {
-				updatedStoreRows[existingIndex] = storeConfigRowCopy
-			}
-		}
-		// Still possible to be missing defaults?
-		if (partnerConfigCopy && partnerConfigCopy.defaults) {
-			partnerConfigCopy.defaults.store = updatedStoreRows
-			await partnerConfigurationChanged(partnerConfigCopy)
-		}
-		close()
-	}
-
-	function close() {
-		selectedStoreConfigRow = newStoreConfig
-		show = false
-	}
-
-	function editStoreConfigRow(row?: EcommerceStoreConfig) {
-		// Set selected row
-		selectedStoreConfigRow = klona(row || newStoreConfig)
-
-		show = true
-	}
-
-	async function handleStoreDefaultsChange(newDefaults: EcommerceSharedDefaults) {
-		// This function is called when the EcommerceDefaults component changes
-		// The binding will automatically update selectedStoreConfigRow.defaults
-		// Don't need to do anything here since we're not auto-saving, feels dumb having an empty method
-	}
-</script>
-
-<div class="card-header">
-	<h4 class="mb-0">{translate('ecommerce.configuration.storeConfiguration', 'Store Configuration')}</h4>
-	<p class="text-muted mb-0">
-		{translate('ecommerce.configuration.configureStoreLevelEbaySettings', 'Configure store level eBay settings')}
-	</p>
-</div>
-<div class="card-body">
-	<div class="mb-3">
-		<Button
-			outline
-			color="success"
-			size="sm"
-			iconClass="plus"
-			onclick={() => editStoreConfigRow()}
-			disabled={false}
-		>
-			{translate('ecommerce.configuration.add', 'Add')}
-		</Button>
-	</div>
-	{#if selectedPartnerConfigStoreRows.length}
-		<Table
-			rows={selectedPartnerConfigStoreRows}
-			responsive
-			stickyHeader
-			parentClass="overflow-y-auto mh-400"
-			columns={[
-				{ property: 'storeId', name: translate('ecommerce.configuration.storeId', 'Store ID') },
-				{ property: 'name', name: translate('ecommerce.configuration.storeName', 'Store Name') },
-				{ property: 'merchantLocationKey', name: translate('ecommerce.configuration.ebayLocation', 'Ebay Location') },
-				{ property: 'active', name: translate('ecommerce.configuration.active', 'Active') },
-			]}
-		>
-			{#snippet children({ row })}
-				<tr
-					onclick={() => editStoreConfigRow(row as EcommerceStoreConfig)}
-					class="cursor-pointer"
-				>
-					<td property="storeId">{row.storeId}</td>
-					<td property="name">{row.name}</td>
-					<td property="merchantLocationKey">{row.merchantLocationKey}</td>
-					<td property="active">{row.active}</td>
-				</tr>
-			{/snippet}
-		</Table>
-	{/if}
-</div>
-
-<Modal
-	bind:show
-	title={translate('ecommerce.configuration.addEditStoreDefaults', 'Add/Edit Store Defaults')}
-	modalSize="lg"
-	confirmButtonText={translate('ecommerce.configuration.save', 'Save')}
-	cancelShown={true}
-	{confirm}
-	{close}
->
-	{#if selectedStoreConfigRow}
-		<div class="card-body">
-			<Checkbox
-				label={translate('ecommerce.configuration.activeOnEbay', 'Active on eBay')}
-				bind:checked={selectedStoreConfigRow.active}
-			/>
-
-			<Select
-				label={translate('ecommerce.configuration.store', 'Store')}
-				showEmptyOption={showAllOption}
-				emptyValue={null}
-				emptyText={translate('ecommerce.configuration.selectStore', 'Select Store')}
-				disabled={false}
-				bind:value={selectedStoreConfigRow.storeId}
-			>
-				{#each availableStores as store}
-					<option value={store.storeId}>{store.name}</option>
-				{/each}
-			</Select>
-			{#if selectedStoreConfigRow.storeId}
-				<Select
-					label={translate('ecommerce.configuration.ebayLocation', 'Ebay Location')}
-					showEmptyOption={showAllOption}
-					emptyValue={null}
-					emptyText={translate('ecommerce.configuration.selectLocation', 'Select Location')}
-					disabled={false}
-					bind:value={selectedStoreConfigRow.merchantLocationKey}
-				>
-					{#each availableLocations as location}
-						<option value={location.ebayName}>{location.ebayName}</option>
-					{/each}
-				</Select>
-			{/if}
-			{#if selectedStoreConfigRow.merchantLocationKey}
-				<EcommerceDefaults
-					bind:defaults={selectedStoreConfigRow.defaults}
-					{ebayPolicyList}
-					{ecommerceConditionList}
-					{partnerConfigurationList}
-					defaultsChanged={handleStoreDefaultsChange}
-					{selectedEcommercePartnerId}
-				/>
-			{/if}
-		</div>
-	{/if}
-</Modal>
+<script lang="ts">
+	import type { i18n } from 'i18next'
+
+	import { getContext } from 'svelte'
+	import Table from '@isoftdata/svelte-table'
+	import { klona } from 'klona'
+	import Modal from '@isoftdata/svelte-modal'
+	import Checkbox from '@isoftdata/svelte-checkbox'
+	import Button from '@isoftdata/svelte-button'
+	import Select from '@isoftdata/svelte-select'
+	import type {
+		EbayLocation,
+		EbayPolicy,
+		EcommerceCondition,
+		EcommercePartnerConfiguration,
+		EcommerceStoreConfig,
+		Store,
+	} from './utils.js'
+	import EcommerceDefaults from './EcommerceDefaults.svelte'
+
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	interface Props {
+		ebayLocationList?: Array<EbayLocation>
+		ebayPolicyList?: Array<EbayPolicy>
+		ecommerceConditionList: Array<EcommerceCondition>
+		partnerConfigurationList?: Array<EcommercePartnerConfiguration>
+		selectedEcommercePartnerId: number
+		storeList: Array<Store>
+		partnerConfigurationChanged: (partnerConfig: EcommercePartnerConfiguration) => Promise<void>
+	}
+
+	let {
+		ebayLocationList = [],
+		ebayPolicyList = [],
+		ecommerceConditionList = [],
+		partnerConfigurationList = [],
+		selectedEcommercePartnerId,
+		storeList = [],
+		partnerConfigurationChanged,
+	}: Props = $props()
+
+	let newStoreConfig: EcommerceStoreConfig = Object.freeze({
+		active: true,
+		defaults: {
+			brandMapping: undefined,
+			conditionDescription: undefined,
+			conditionId: undefined,
+			fulfillmentPolicies: undefined,
+			fulfillmentTimeUnit: undefined,
+			fulfillmentTimeValue: undefined,
+			listingDescriptionTemplate: undefined,
+			listingDuration: undefined,
+			listingFormat: undefined,
+			listingTitleTemplate: undefined,
+			manufacturerPartNumberMapping: undefined,
+			oemNumberMapping: undefined,
+			packageType: undefined,
+			paymentPolicies: undefined,
+			pricingModifier: undefined,
+			returnPolicies: undefined,
+			shippingLengthUnit: undefined,
+			shippingWeightUnit: undefined,
+			storePickupAllowed: undefined,
+		},
+		merchantLocationKey: undefined,
+		name: '',
+		storeId: 0,
+	})
+
+	let show = $state(false)
+	let selectedStoreConfigRow = $state<EcommerceStoreConfig | null>(null)
+
+	// If we had more than one ecommercepartner, this would change depending on selected partner id
+	let selectedPartnerConfig = $derived(
+		partnerConfigurationList.find(row => row.ecommercePartnerId === selectedEcommercePartnerId),
+	)
+	// Get the store rows from the partnerconfig row
+	let selectedPartnerConfigStoreRows = $derived(selectedPartnerConfig?.defaults?.store || [])
+
+	// Filter available ebay locations depending on whether we're adding or editing
+	let availableLocations = $derived.by(() => {
+		const configuredEbayLocations = selectedPartnerConfigStoreRows.map(row => row.merchantLocationKey)
+		const isEditingExisting =
+			selectedStoreConfigRow?.name !== null &&
+			configuredEbayLocations.includes(selectedStoreConfigRow?.merchantLocationKey)
+
+		if (isEditingExisting) {
+			return ebayLocationList
+		}
+		return ebayLocationList.filter(location => !configuredEbayLocations.includes(location.ebayName))
+	})
+	// Filter available stores based on whether we're adding or editing existing
+	let availableStores = $derived.by(() => {
+		if (!selectedStoreConfigRow) return storeList
+
+		// Get the IDs of already configured stores
+		const configuredStoreIds = selectedPartnerConfigStoreRows.map(row => row.storeId)
+		const isEditingExisting =
+			selectedStoreConfigRow.storeId !== null && configuredStoreIds.includes(selectedStoreConfigRow.storeId)
+
+		if (isEditingExisting) {
+			return storeList
+		}
+		// If adding new, filter out already configured stores
+		return storeList.filter(store => !configuredStoreIds.includes(store.storeId))
+	})
+
+	async function confirm() {
+		if (!selectedStoreConfigRow || !selectedStoreConfigRow.storeId) return
+
+		// TODO: Here I am regretting my decision to have JSON sub object business for this
+		// Copy the store config data for uh state wackiness reasons?
+		const storeConfigRowCopy = klona(selectedStoreConfigRow)
+		// Copy the partner config row
+		const partnerConfigCopy = klona(selectedPartnerConfig)
+
+		// Copy the selectedParnterConfigStoreRows
+		let updatedStoreRows = klona(selectedPartnerConfigStoreRows)
+
+		// If empty, add storeConfigCopy
+		if (updatedStoreRows.length === 0) {
+			updatedStoreRows.push(storeConfigRowCopy)
+		} else {
+			const existingIndex = updatedStoreRows.findIndex(row => row.storeId === storeConfigRowCopy.storeId)
+			if (existingIndex === -1) {
+				updatedStoreRows.push(storeConfigRowCopy)
+			} else {
+				updatedStoreRows[existingIndex] = storeConfigRowCopy
+			}
+		}
+		// Still possible to be missing defaults?
+		if (partnerConfigCopy && partnerConfigCopy.defaults) {
+			partnerConfigCopy.defaults.store = updatedStoreRows
+			await partnerConfigurationChanged(partnerConfigCopy)
+		}
+		close()
+	}
+
+	function close() {
+		selectedStoreConfigRow = newStoreConfig
+		show = false
+	}
+
+	function editStoreConfigRow(row?: EcommerceStoreConfig) {
+		// Set selected row
+		selectedStoreConfigRow = klona(row || newStoreConfig)
+
+		show = true
+	}
+</script>
+
+<div class="card">
+	<div class="card-header">
+		<h4 class="mb-0">{translate('ecommerce.configuration.storeConfiguration', 'Store Configuration')}</h4>
+		<p class="text-muted mb-0">
+			{translate('ecommerce.configuration.configureStoreLevelEbaySettings', 'Configure store level eBay settings')}
+		</p>
+	</div>
+	<div class="card-body">
+		{#if selectedPartnerConfigStoreRows.length}
+			<Table
+				rows={selectedPartnerConfigStoreRows}
+				responsive
+				stickyHeader
+				parentClass="overflow-y-auto mh-400"
+				columns={[
+					{ property: 'storeId', name: translate('ecommerce.configuration.storeId', 'Store ID') },
+					{ property: 'name', name: translate('ecommerce.configuration.storeName', 'Store Name') },
+					{ property: 'merchantLocationKey', name: translate('ecommerce.configuration.ebayLocation', 'Ebay Location') },
+					{ property: 'active', name: translate('ecommerce.configuration.active', 'Active') },
+				]}
+			>
+				{#snippet children({ row })}
+					<tr
+						onclick={() => editStoreConfigRow(row)}
+						style="cursor: pointer;"
+					>
+						<td property="storeId">{row.storeId}</td>
+						<td property="name">{row.name}</td>
+						<td property="merchantLocationKey">{row.merchantLocationKey}</td>
+						<td property="active">{row.active}</td>
+					</tr>
+				{/snippet}
+			</Table>
+		{/if}
+	</div>
+	<div class="card-footer">
+		<Button
+			outline
+			color="success"
+			size="sm"
+			icon="plus"
+			onclick={() => editStoreConfigRow()}
+		>
+			{translate('common:add', 'Add')}...
+		</Button>
+	</div>
+</div>
+<Modal
+	bind:show
+	title={translate('ecommerce.configuration.addEditStoreDefaults', 'Add/Edit Store Defaults')}
+	modalSize="lg"
+	confirmButtonText={translate('ecommerce.configuration.save', 'Save')}
+	cancelShown
+	{confirm}
+	{close}
+>
+	{#if selectedStoreConfigRow}
+		<div class="card-body">
+			<Checkbox
+				label={translate('ecommerce.configuration.activeOnEbay', 'Active on eBay')}
+				bind:checked={selectedStoreConfigRow.active}
+			/>
+
+			<Select
+				label={translate('ecommerce.configuration.store', 'Store')}
+				emptyText="-- {translate('ecommerce.configuration.selectStore', 'Select Store')} --"
+				bind:value={selectedStoreConfigRow.storeId}
+			>
+				{#each availableStores as store}
+					<option value={store.storeId}>{store.name}</option>
+				{/each}
+			</Select>
+			{#if selectedStoreConfigRow.storeId}
+				<Select
+					label={translate('ecommerce.configuration.ebayLocation', 'Ebay Location')}
+					emptyText="-- {translate('ecommerce.configuration.selectLocation', 'Select Location')} --"
+					bind:value={selectedStoreConfigRow.merchantLocationKey}
+				>
+					{#each availableLocations as location}
+						<option value={location.ebayName}>{location.ebayName}</option>
+					{/each}
+				</Select>
+			{/if}
+			{#if selectedStoreConfigRow.merchantLocationKey}
+				<EcommerceDefaults
+					bind:defaults={selectedStoreConfigRow.defaults}
+					{ebayPolicyList}
+					{ecommerceConditionList}
+					{partnerConfigurationList}
+					{selectedEcommercePartnerId}
+				/>
+			{/if}
+		</div>
+	{/if}
+</Modal>

package/dist/EcommerceStoreConfiguration.svelte.d.ts

@@ -1,11 +1,11 @@
 import type { EbayLocation, EbayPolicy, EcommerceCondition, EcommercePartnerConfiguration, Store } from './utils.js';
 interface Props {
-    ebayLocationList?: EbayLocation[];
-    ebayPolicyList?: EbayPolicy[];
-    ecommerceConditionList: EcommerceCondition[];
-    partnerConfigurationList?: EcommercePartnerConfiguration[];
+    ebayLocationList?: Array<EbayLocation>;
+    ebayPolicyList?: Array<EbayPolicy>;
+    ecommerceConditionList: Array<EcommerceCondition>;
+    partnerConfigurationList?: Array<EcommercePartnerConfiguration>;
     selectedEcommercePartnerId: number;
-    storeList: Store[];
+    storeList: Array<Store>;
     partnerConfigurationChanged: (partnerConfig: EcommercePartnerConfiguration) => Promise<void>;
 }
 declare const EcommerceStoreConfiguration: import("svelte").Component<Props, {}, "">;