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

package/dist/EcommerceDefaults.svelte

@@ -1,357 +1,333 @@
-<script lang="ts">
-	import type { i18n } from 'i18next'
-
-	import { getContext } from 'svelte'
-	import Input from '@isoftdata/svelte-input'
-	import Select from '@isoftdata/svelte-select'
-	import Button from '@isoftdata/svelte-button'
-	import Textarea from '@isoftdata/svelte-textarea'
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	import { ecommercePartnerStaticData } from './data/index.js'
-	import PolicyList from './PolicyList.svelte'
-
-	import type {
-		EbayPolicy,
-		EcommerceCondition,
-		EcommercePartnerConfiguration,
-		EcommerceSharedDefaults,
-		PolicyRowWithChecked,
-	} from './utils.js'
-	import type { PackageType } from './data/types.js'
-
-	interface Props {
-		defaults?: EcommerceSharedDefaults
-		ebayPolicyList?: EbayPolicy[]
-		ecommerceConditionList: EcommerceCondition[]
-		partnerConfigurationList: EcommercePartnerConfiguration[]
-		defaultsChanged: (newDefaults: EcommerceSharedDefaults) => Promise<void>
-		selectedEcommercePartnerId: number
-	}
-
-	let {
-		defaults = $bindable(),
-		ebayPolicyList,
-		ecommerceConditionList,
-		partnerConfigurationList,
-		defaultsChanged = async (_: EcommerceSharedDefaults) => {},
-		selectedEcommercePartnerId,
-	}: Props = $props()
-
-	// State variables for all form inputs - initialize from defaults prop if provided
-	let brandMapping = $state<string>(defaults?.brandMapping ?? '')
-	let conditionDescription = $state<string>(defaults?.conditionDescription ?? '')
-	let conditionId = $state<number | null>(defaults?.conditionId ?? null)
-	let fulfillmentPolicies = $state<string[]>(defaults?.fulfillmentPolicies ?? [])
-	let listingDescriptionTemplate = $state<string>(defaults?.listingDescriptionTemplate ?? '')
-	let listingDuration = $state<string>(defaults?.listingDuration ?? '')
-	let listingTitleTemplate = $state<string>(defaults?.listingTitleTemplate ?? '')
-	let fulfillmentTimeValue = $state<number | null>(defaults?.fulfillmentTimeValue ?? null)
-	let fulfillmentTimeUnit = $state<string | null>(defaults?.fulfillmentTimeUnit ?? null)
-	let manufacturerPartNumberMapping = $state<string>(defaults?.manufacturerPartNumberMapping ?? '')
-	let packageType = $state<string | null>(defaults?.packageType ?? null)
-	let paymentPolicies = $state<string[]>(defaults?.paymentPolicies ?? [])
-	let returnPolicies = $state<string[]>(defaults?.returnPolicies ?? [])
-	let shippingLengthUnit = $state<string | null>(defaults?.shippingLengthUnit ?? null)
-	let shippingWeightUnit = $state<string | null>(defaults?.shippingWeightUnit ?? null)
-
-	// Computed properties for UI state
-	let ecommerceConditions = $derived(ecommerceConditionList) // TODO: why'd I do this?
-	let editEcommerceConditionDisabled = $state<boolean>(false)
-	let fulfillmentPolicyList = $derived.by(getFulfillmentPolicyList)
-	let lengthUnits = $derived.by(getPartnerLengthUnits)
-	let packageTypes = $derived.by(getPartnerPackageTypes)
-	let paymentPolicyList = $derived.by(getPaymentPolicyList)
-	let returnPolicyList = $derived.by(getReturnPolicyList)
-	let selectedPartnerConfig = $derived.by(getSelectedPartnerConfig)
-	let showAllOption = $state<boolean>(true)
-	let weightUnits = $derived.by(getPartnerWeightUnits)
-
-	function getFulfillmentPolicyList(): PolicyRowWithChecked[] {
-		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'fulfillment') || []
-		return policies.map(policy => ({
-			...policy,
-			checked: fulfillmentPolicies.includes(policy.policyId),
-		}))
-	}
-	function getPaymentPolicyList(): PolicyRowWithChecked[] {
-		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'payment') || []
-		return policies.map(policy => ({
-			...policy,
-			checked: paymentPolicies.includes(policy.policyId),
-		}))
-	}
-	function getReturnPolicyList(): PolicyRowWithChecked[] {
-		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'return') || []
-		return policies.map(policy => ({
-			...policy,
-			checked: returnPolicies.includes(policy.policyId),
-		}))
-	}
-	function getPartnerLengthUnits(): string[] {
-		const partnerName = selectedPartnerConfig.name
-		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
-			return []
-		}
-		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].lengthUnits
-	}
-
-	function getPartnerPackageTypes(): PackageType[] {
-		const partnerName = selectedPartnerConfig.name
-		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
-			return []
-		}
-		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].packageTypes
-	}
-
-	function getPartnerWeightUnits(): string[] {
-		const partnerName = selectedPartnerConfig.name
-		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
-			return []
-		}
-		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].weightUnits
-	}
-
-	function getSelectedPartnerConfig(): EcommercePartnerConfiguration {
-		const matchingPartnerConfig = partnerConfigurationList.find(
-			row => row.ecommercePartnerId === selectedEcommercePartnerId,
-		)
-		if (!matchingPartnerConfig) {
-			throw new Error('No matching partner config found')
-		}
-
-		return matchingPartnerConfig
-	}
-
-	async function handleInputChange() {
-		// Build the defaults object using current input values
-		const newDefaults = {
-			brandMapping: brandMapping || undefined,
-			conditionDescription: conditionDescription || undefined,
-			conditionId: conditionId || undefined,
-			fulfillmentPolicies: fulfillmentPolicies || [],
-			fulfillmentTimeUnit: fulfillmentTimeUnit || undefined,
-			fulfillmentTimeValue: fulfillmentTimeValue || undefined,
-			listingDescriptionTemplate: listingDescriptionTemplate || undefined,
-			listingDuration: listingDuration || undefined,
-			listingTitleTemplate: listingTitleTemplate || undefined,
-			manufacturerPartNumberMapping: manufacturerPartNumberMapping || undefined,
-			packageType: packageType || undefined,
-			paymentPolicies: paymentPolicies || [],
-			returnPolicies: returnPolicies || [],
-			shippingLengthUnit: shippingLengthUnit || undefined,
-			shippingWeightUnit: shippingWeightUnit || undefined,
-		}
-
-		defaults = newDefaults
-		await defaultsChanged(newDefaults)
-	}
-
-	function handleFulfillmentPoliciesChange(selectedIds: string[]) {
-		fulfillmentPolicies = selectedIds
-		handleInputChange()
-	}
-
-	function handlePaymentPoliciesChange(selectedIds: string[]) {
-		paymentPolicies = selectedIds
-		handleInputChange()
-	}
-
-	function handleReturnPoliciesChange(selectedIds: string[]) {
-		returnPolicies = selectedIds
-		handleInputChange()
-	}
-</script>
-
-<div class="row">
-	<div class="col">
-		<PolicyList
-			title={translate('configuration.ecommerce.fulfillmentPoliciesTitle', 'Fulfillment Policies')}
-			policies={fulfillmentPolicyList}
-			selectedPolicyIds={fulfillmentPolicies}
-			onSelectionChange={handleFulfillmentPoliciesChange}
-		/>
-		<PolicyList
-			title={translate('configuration.ecommerce.paymentPoliciesTitle', 'Payment Policies')}
-			policies={paymentPolicyList}
-			selectedPolicyIds={paymentPolicies}
-			onSelectionChange={handlePaymentPoliciesChange}
-		/>
-		<PolicyList
-			title={translate('configuration.ecommerce.returnPoliciesTitle', 'Return Policies')}
-			policies={returnPolicyList}
-			selectedPolicyIds={returnPolicies}
-			onSelectionChange={handleReturnPoliciesChange}
-		/>
-	</div>
-</div>
-<div class="row">
-	<div class="col">
-		<Input
-			label={translate('configuration.ecommerce.fulfillmentTime', 'Fulfillment Time')}
-			maxlength={3}
-			type="number"
-			bind:value={fulfillmentTimeValue}
-			placeholder=""
-			onchange={handleInputChange}
-		/>
-
-		<Select
-			id="fulfillment-time-unit"
-			label={translate('configuration.ecommerce.fulfillmentUnit', 'Fulfillment Unit')}
-			showEmptyOption={true}
-			emptyValue={null}
-			emptyText={translate('configuration.ecommerce.selectUnit', 'Select Unit')}
-			disabled={false}
-			required={false}
-			onchange={handleInputChange}
-			bind:value={fulfillmentTimeUnit}
-		>
-			{#each ecommercePartnerStaticData.ebay.timeUnits as unit}
-				<option value={unit}>{unit}</option>
-			{/each}
-		</Select>
-	</div>
-</div>
-<div class="row">
-	<div class="col">
-		<Select
-			id="shipping-length-unit"
-			label={translate('configuration.ecommerce.lengthUnit', 'Shipping Length Unit')}
-			showEmptyOption={true}
-			emptyValue={null}
-			emptyText={translate('configuration.ecommerce.selectUnit', 'Select Unit')}
-			disabled={false}
-			required={false}
-			onchange={handleInputChange}
-			bind:value={shippingLengthUnit}
-		>
-			{#each lengthUnits as unit}
-				<option value={unit}>{unit}</option>
-			{/each}
-		</Select>
-	</div>
-	<div class="col">
-		<Select
-			id="shipping-weight-unit"
-			label={translate('configuration.ecommerce.shippingWeightUnit', 'Shipping Weight Unit')}
-			showEmptyOption={true}
-			emptyValue={null}
-			emptyText={translate('configuration.ecommerce.selectUnit', 'Select Unit')}
-			disabled={false}
-			required={false}
-			onchange={handleInputChange}
-			bind:value={shippingWeightUnit}
-		>
-			{#each weightUnits as unit}
-				<option value={unit}>{unit}</option>
-			{/each}
-		</Select>
-	</div>
-</div>
-<div class="row">
-	<div class="col">
-		<Select
-			label={translate('configuration.ecommerce.condition', 'Condition')}
-			showEmptyOption={showAllOption}
-			emptyValue={null}
-			emptyText={translate('configuration.ecommerce.selectCondition', 'Select Condition')}
-			disabled={editEcommerceConditionDisabled}
-			bind:value={conditionId}
-			onchange={handleInputChange}
-		>
-			{#each ecommerceConditions as condition}
-				<option value={condition.ecommerceConditionId}>{condition.name}</option>
-			{/each}
-		</Select>
-	</div>
-	<div class="col">
-		<Input
-			label={translate('configuration.ecommerce.conditionDescription', 'Condition Description')}
-			maxlength={1000}
-			bind:value={conditionDescription}
-			placeholder=""
-			onchange={handleInputChange}
-		/>
-	</div>
-</div>
-<div class="row">
-	<div class="col">
-		<Input
-			label={translate('configuration.ecommerce.brand', 'Brand')}
-			maxlength={100}
-			bind:value={brandMapping}
-			onchange={handleInputChange}
-			placeholder={'{?PartManufacturer}'}
-		/>
-	</div>
-	<div class="col">
-		<Input
-			label={translate('configuration.ecommerce.manufacturerPartNumber', 'Manufacturer Part Number')}
-			maxlength={100}
-			bind:value={manufacturerPartNumberMapping}
-			onchange={handleInputChange}
-			placeholder={'{?PartModel}'}
-		/>
-	</div>
-</div>
-<div class="row">
-	<div class="col">
-		<Select
-			label={translate('configuration.ecommerce.packageType', 'Package Type')}
-			showEmptyOption={showAllOption}
-			emptyValue={null}
-			emptyText={translate('configuration.ecommerce.selectDefaultPackage', 'Select Default Package')}
-			onchange={handleInputChange}
-			bind:value={packageType}
-		>
-			{#each packageTypes as pkg}
-				<option value={pkg.partnerValue}>{pkg.name}</option>
-			{/each}
-		</Select>
-	</div>
-	<div class="col">
-		<Input
-			label={translate('configuration.ecommerce.listingDuration', 'Listing Duration')}
-			disabled={true}
-			bind:value={listingDuration}
-			onchange={handleInputChange}
-		/>
-	</div>
-</div>
-<div class="row">
-	<div class="col mt-3">
-		<Button
-			outline
-			size="sm"
-			href="https://wikido.isoftdata.com//index.php?title=Ebay_templates"
-			target="htp_chromium_popout"
-			icon={{
-				prefix: 'fak',
-				class: 'fa-isoft-bolt',
-			}}>{translate('configuration.ecommerce.templateHelp', 'Template Help')}</Button
-		>
-	</div>
-</div>
-<div class="row">
-	<div class="col">
-		<Textarea
-			label={translate('configuration.ecommerce.titleTemplate', 'Title Template')}
-			onchange={handleInputChange}
-			rows={10}
-			bind:value={listingTitleTemplate}
-			disabled={false}
-		/>
-	</div>
-	<div class="col">
-		<Textarea
-			label={translate('configuration.ecommerce.descriptionTemplate', 'Description Template')}
-			onchange={handleInputChange}
-			rows={10}
-			bind:value={listingDescriptionTemplate}
-			disabled={false}
-		/>
-	</div>
-</div>
+<script lang="ts">
+	import type { i18n } from 'i18next'
+
+	import { getContext } from 'svelte'
+	import Input from '@isoftdata/svelte-input'
+	import Select from '@isoftdata/svelte-select'
+	import Button from '@isoftdata/svelte-button'
+	import Textarea from '@isoftdata/svelte-textarea'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	import { ecommercePartnerStaticData } from './data/index.js'
+	import PolicyList from './PolicyList.svelte'
+
+	import type {
+		EbayPolicy,
+		EcommerceCondition,
+		EcommercePartnerConfiguration,
+		EcommerceSharedDefaults,
+		PolicyRowWithChecked,
+	} from './utils.js'
+	import type { PackageType } from './data/types.js'
+
+	interface Props {
+		defaults?: EcommerceSharedDefaults
+		ebayPolicyList?: Array<EbayPolicy>
+		ecommerceConditionList: Array<EcommerceCondition>
+		partnerConfigurationList: Array<EcommercePartnerConfiguration>
+		defaultsChanged?: (() => Promise<void>) | undefined
+		selectedEcommercePartnerId: number
+	}
+
+	let {
+		defaults = $bindable(),
+		ebayPolicyList,
+		ecommerceConditionList,
+		partnerConfigurationList,
+		defaultsChanged,
+		selectedEcommercePartnerId,
+	}: Props = $props()
+
+	// State variables for all form inputs - initialize from defaults prop if provided
+	let brandMapping = $state<string>(defaults?.brandMapping ?? '')
+	let conditionDescription = $state<string>(defaults?.conditionDescription ?? '')
+	let conditionId = $state<number | null>(defaults?.conditionId ?? null)
+	let fulfillmentPolicies = $state<Array<string>>(defaults?.fulfillmentPolicies ?? [])
+	let listingDescriptionTemplate = $state<string>(defaults?.listingDescriptionTemplate ?? '')
+	let listingDuration = $state<string>(defaults?.listingDuration ?? '')
+	let listingTitleTemplate = $state<string>(defaults?.listingTitleTemplate ?? '')
+	let fulfillmentTimeValue = $state<number | null>(defaults?.fulfillmentTimeValue ?? null)
+	let fulfillmentTimeUnit = $state<string | null>(defaults?.fulfillmentTimeUnit ?? null)
+	let manufacturerPartNumberMapping = $state<string>(defaults?.manufacturerPartNumberMapping ?? '')
+	let packageType = $state<string | null>(defaults?.packageType ?? null)
+	let paymentPolicies = $state<Array<string>>(defaults?.paymentPolicies ?? [])
+	let returnPolicies = $state<Array<string>>(defaults?.returnPolicies ?? [])
+	let shippingLengthUnit = $state<string | null>(defaults?.shippingLengthUnit ?? null)
+	let shippingWeightUnit = $state<string | null>(defaults?.shippingWeightUnit ?? null)
+
+	// Computed properties for UI state
+	let ecommerceConditions = $derived(ecommerceConditionList) // TODO: why'd I do this?
+	let fulfillmentPolicyList = $derived.by(getFulfillmentPolicyList)
+	let lengthUnits = $derived.by(getPartnerLengthUnits)
+	let packageTypes = $derived.by(getPartnerPackageTypes)
+	let paymentPolicyList = $derived.by(getPaymentPolicyList)
+	let returnPolicyList = $derived.by(getReturnPolicyList)
+	let selectedPartnerConfig = $derived.by(getSelectedPartnerConfig)
+	let weightUnits = $derived.by(getPartnerWeightUnits)
+
+	function getFulfillmentPolicyList(): Array<PolicyRowWithChecked> {
+		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'fulfillment') || []
+		const fulfillmentPolicySet = new Set(fulfillmentPolicies)
+		return policies.map(policy => ({
+			...policy,
+			checked: fulfillmentPolicySet.has(policy.policyId),
+		}))
+	}
+	function getPaymentPolicyList(): Array<PolicyRowWithChecked> {
+		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'payment') || []
+		const paymentPolicySet = new Set(paymentPolicies)
+		return policies.map(policy => ({
+			...policy,
+			checked: paymentPolicySet.has(policy.policyId),
+		}))
+	}
+	function getReturnPolicyList(): Array<PolicyRowWithChecked> {
+		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'return') || []
+		const returnPolicySet = new Set(returnPolicies)
+		return policies.map(policy => ({
+			...policy,
+			checked: returnPolicySet.has(policy.policyId),
+		}))
+	}
+	function getPartnerLengthUnits(): Array<string> {
+		const config = getSelectedPartnerConfig()
+		const partnerName = config.name
+		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
+			return []
+		}
+		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].lengthUnits
+	}
+
+	function getPartnerPackageTypes(): Array<PackageType> {
+		const config = getSelectedPartnerConfig()
+		const partnerName = config.name
+		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
+			return []
+		}
+		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].packageTypes
+	}
+
+	function getPartnerWeightUnits(): Array<string> {
+		const config = getSelectedPartnerConfig()
+		const partnerName = config.name
+		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
+			return []
+		}
+		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].weightUnits
+	}
+
+	function getSelectedPartnerConfig(): EcommercePartnerConfiguration {
+		const matchingPartnerConfig = partnerConfigurationList.find(
+			row => row.ecommercePartnerId === selectedEcommercePartnerId,
+		)
+		if (!matchingPartnerConfig) {
+			throw new Error('No matching partner config found')
+		}
+
+		return matchingPartnerConfig
+	}
+
+	async function handleInputChange() {
+		// Build the defaults object using current input values
+		const newDefaults = {
+			brandMapping: brandMapping || undefined,
+			conditionDescription: conditionDescription || undefined,
+			conditionId: conditionId || undefined,
+			fulfillmentPolicies: fulfillmentPolicies || [],
+			fulfillmentTimeUnit: fulfillmentTimeUnit || undefined,
+			fulfillmentTimeValue: fulfillmentTimeValue || undefined,
+			listingDescriptionTemplate: listingDescriptionTemplate || undefined,
+			listingDuration: listingDuration || undefined,
+			listingTitleTemplate: listingTitleTemplate || undefined,
+			manufacturerPartNumberMapping: manufacturerPartNumberMapping || undefined,
+			packageType: packageType || undefined,
+			paymentPolicies: paymentPolicies || [],
+			returnPolicies: returnPolicies || [],
+			shippingLengthUnit: shippingLengthUnit || undefined,
+			shippingWeightUnit: shippingWeightUnit || undefined,
+		}
+
+		defaults = newDefaults
+		await defaultsChanged?.()
+	}
+
+	function handleFulfillmentPoliciesChange(selectedIds: Array<string>) {
+		fulfillmentPolicies = selectedIds
+		handleInputChange()
+	}
+
+	function handlePaymentPoliciesChange(selectedIds: Array<string>) {
+		paymentPolicies = selectedIds
+		handleInputChange()
+	}
+
+	function handleReturnPoliciesChange(selectedIds: Array<string>) {
+		returnPolicies = selectedIds
+		handleInputChange()
+	}
+</script>
+
+<div class="row">
+	<div class="col">
+		<PolicyList
+			title={translate('configuration.ecommerce.fulfillmentPoliciesTitle', 'Fulfillment Policies')}
+			policies={fulfillmentPolicyList}
+			selectedPolicyIds={fulfillmentPolicies}
+			onSelectionChange={handleFulfillmentPoliciesChange}
+		/>
+		<PolicyList
+			title={translate('configuration.ecommerce.paymentPoliciesTitle', 'Payment Policies')}
+			policies={paymentPolicyList}
+			selectedPolicyIds={paymentPolicies}
+			onSelectionChange={handlePaymentPoliciesChange}
+		/>
+		<PolicyList
+			title={translate('configuration.ecommerce.returnPoliciesTitle', 'Return Policies')}
+			policies={returnPolicyList}
+			selectedPolicyIds={returnPolicies}
+			onSelectionChange={handleReturnPoliciesChange}
+		/>
+	</div>
+</div>
+<div class="row">
+	<div class="col">
+		<Input
+			label={translate('configuration.ecommerce.fulfillmentTime', 'Fulfillment Time')}
+			maxlength={3}
+			type="number"
+			bind:value={fulfillmentTimeValue}
+			onchange={handleInputChange}
+		/>
+
+		<Select
+			label={translate('configuration.ecommerce.fulfillmentUnit', 'Fulfillment Unit')}
+			emptyText="-- {translate('configuration.ecommerce.selectUnit', 'Select Unit')} --"
+			onchange={handleInputChange}
+			bind:value={fulfillmentTimeUnit}
+		>
+			{#each ecommercePartnerStaticData.ebay.timeUnits as unit}
+				<option value={unit}>{unit}</option>
+			{/each}
+		</Select>
+	</div>
+</div>
+<div class="row">
+	<div class="col">
+		<Select
+			label={translate('configuration.ecommerce.lengthUnit', 'Shipping Length Unit')}
+			emptyText="-- {translate('configuration.ecommerce.selectUnit', 'Select Unit')} --"
+			onchange={handleInputChange}
+			bind:value={shippingLengthUnit}
+		>
+			{#each lengthUnits as unit}
+				<option value={unit}>{unit}</option>
+			{/each}
+		</Select>
+	</div>
+	<div class="col">
+		<Select
+			label={translate('configuration.ecommerce.shippingWeightUnit', 'Shipping Weight Unit')}
+			emptyText="-- {translate('configuration.ecommerce.selectUnit', 'Select Unit')} --"
+			onchange={handleInputChange}
+			bind:value={shippingWeightUnit}
+		>
+			{#each weightUnits as unit}
+				<option value={unit}>{unit}</option>
+			{/each}
+		</Select>
+	</div>
+</div>
+<div class="row">
+	<div class="col">
+		<Select
+			label={translate('configuration.ecommerce.condition', 'Condition')}
+			emptyText="-- {translate('configuration.ecommerce.selectCondition', 'Select Condition')} --"
+			bind:value={conditionId}
+			onchange={handleInputChange}
+		>
+			{#each ecommerceConditions as condition}
+				<option value={condition.ecommerceConditionId}>{condition.name}</option>
+			{/each}
+		</Select>
+	</div>
+	<div class="col">
+		<Input
+			label={translate('configuration.ecommerce.conditionDescription', 'Condition Description')}
+			maxlength={1000}
+			bind:value={conditionDescription}
+			onchange={handleInputChange}
+		/>
+	</div>
+</div>
+<div class="row">
+	<div class="col">
+		<Input
+			label={translate('configuration.ecommerce.brand', 'Brand')}
+			maxlength={100}
+			bind:value={brandMapping}
+			onchange={handleInputChange}
+			placeholder={'{?PartManufacturer}'}
+		/>
+	</div>
+	<div class="col">
+		<Input
+			label={translate('configuration.ecommerce.manufacturerPartNumber', 'Manufacturer Part Number')}
+			maxlength={100}
+			bind:value={manufacturerPartNumberMapping}
+			onchange={handleInputChange}
+			placeholder={'{?PartModel}'}
+		/>
+	</div>
+</div>
+<div class="row">
+	<div class="col">
+		<Select
+			label={translate('configuration.ecommerce.packageType', 'Package Type')}
+			emptyText="-- {translate('configuration.ecommerce.selectDefaultPackage', 'Select Default Package')} --"
+			onchange={handleInputChange}
+			bind:value={packageType}
+		>
+			{#each packageTypes as pkg}
+				<option value={pkg.partnerValue}>{pkg.name}</option>
+			{/each}
+		</Select>
+	</div>
+	<div class="col">
+		<Input
+			label={translate('configuration.ecommerce.listingDuration', 'Listing Duration')}
+			bind:value={listingDuration}
+			onchange={handleInputChange}
+		/>
+	</div>
+</div>
+<div class="row">
+	<div class="col mt-3">
+		<Button
+			outline
+			size="sm"
+			href="https://wikido.isoftdata.com//index.php?title=Ebay_templates"
+			target="htp_chromium_popout"
+			icon="question-circle">{translate('configuration.ecommerce.templateHelp', 'Template Help')}</Button
+		>
+	</div>
+</div>
+<div class="row">
+	<div class="col">
+		<Textarea
+			label={translate('configuration.ecommerce.titleTemplate', 'Title Template')}
+			onchange={handleInputChange}
+			rows={10}
+			bind:value={listingTitleTemplate}
+		/>
+	</div>
+	<div class="col">
+		<Textarea
+			label={translate('configuration.ecommerce.descriptionTemplate', 'Description Template')}
+			onchange={handleInputChange}
+			rows={10}
+			bind:value={listingDescriptionTemplate}
+		/>
+	</div>
+</div>