@isoftdata/svelte-ecommerce 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/EcommerceDefaults.svelte

@@ -1,333 +1,384 @@
-<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>
+<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'
+	import toTitleCase from 'to-title-case'
+	import camelCase from 'camelcase'
+	import Fieldset from '@isoftdata/svelte-fieldset'
+
+	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()
+
+	const priceLevels = ['Retail', 'Wholesale', 'Cost', 'List']
+	// 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 ?? 'GTC')
+	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 defaultPriceType = $state<string | null>(defaults?.defaultPriceType ?? null)
+	let pricingModifier = $state<number>(defaults?.pricingModifier ?? 100)
+	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 || [],
+			defaultPriceType: defaultPriceType || 'Retail',
+			pricingModifier: pricingModifier,
+			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>
+<Fieldset label={translate('configuration.ecommerce.fulfillmentTimeFieldset', 'Fulfillment Time')}>
+	<div class="row">
+		<div class="col-3">
+			<Input
+				label={translate('common:time', 'Time')}
+				maxlength={3}
+				type="number"
+				bind:value={fulfillmentTimeValue}
+				onchange={handleInputChange}
+			/>
+		</div>
+		<div class="col-9">
+			<Select
+				label={translate('common:unit', 'Unit')}
+				emptyText="-- {translate('configuration.ecommerce.selectUnit', 'Select Unit')} --"
+				onchange={handleInputChange}
+				bind:value={fulfillmentTimeUnit}
+			>
+				{#each ecommercePartnerStaticData.ebay.timeUnits as unit}
+					<option value={unit}
+						>{translate(`configuration.ecommerce.timeUnits.${camelCase(unit)}`, toTitleCase(unit))}</option
+					>
+				{/each}
+			</Select>
+		</div>
+	</div>
+</Fieldset>
+
+<Fieldset
+	label={translate('configuration.ecommerce.shippingUnits', 'Shipping Units')}
+	class="mt-3 mb-3"
+>
+	<div class="row">
+		<div class="col">
+			<Select
+				label={translate('common:length', 'Length')}
+				emptyText="-- {translate('configuration.ecommerce.selectUnit', 'Select Unit')} --"
+				onchange={handleInputChange}
+				bind:value={shippingLengthUnit}
+			>
+				{#each lengthUnits as unit}
+					<option value={unit}
+						>{translate(`configuration.ecommerce.lengthUnits.${camelCase(unit)}`, toTitleCase(unit))}</option
+					>
+				{/each}
+			</Select>
+		</div>
+		<div class="col">
+			<Select
+				label={translate('common:weight', 'Weight')}
+				emptyText="-- {translate('configuration.ecommerce.selectUnit', 'Select Unit')} --"
+				onchange={handleInputChange}
+				bind:value={shippingWeightUnit}
+			>
+				{#each weightUnits as unit}
+					<option value={unit}
+						>{translate(`configuration.ecommerce.weightUnits.${camelCase(unit)}`, toTitleCase(unit))}</option
+					>
+				{/each}
+			</Select>
+		</div>
+	</div>
+</Fieldset>
+
+<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}
+			disabled={true}
+		/>
+	</div>
+</div>
+<div class="row">
+	<div class="col mt-3">
+		<Select
+			label={translate('configuration.ecommerce.defaultPrice', 'Default Price')}
+			showEmptyOption={false}
+			onchange={handleInputChange}
+			bind:value={defaultPriceType}
+		>
+			{#each priceLevels as priceLevel}
+				<option value={priceLevel}>{priceLevel}</option>
+			{/each}
+		</Select>
+	</div>
+	<div class="col mt-3">
+		<Input
+			label={translate('configuration.ecommerce.percentOfPrice', 'Percent of Price')}
+			type="number"
+			inputmode="numeric"
+			step="any"
+			placeholder="%"
+			min="0"
+			onchange={handleInputChange}
+			bind:value={pricingModifier}
+		/>
+	</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>