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

package/dist/EcommerceListingDetails.svelte

@@ -1,986 +1,852 @@
-<script lang="ts">
-	import type { i18n } from 'i18next'
-	import { getContext } from 'svelte'
-
-	import Button from '@isoftdata/svelte-button'
-	import CurrencyInput from '@isoftdata/svelte-currency-input'
-	import Input from '@isoftdata/svelte-input'
-	import Modal from '@isoftdata/svelte-modal'
-	import Select from '@isoftdata/svelte-select'
-	import Textarea from '@isoftdata/svelte-textarea'
-	import PolicyList from './PolicyList.svelte'
-	import { ThumbnailGrid } from '@isoftdata/svelte-attachments'
-	import UserPrompt from '@isoftdata/svelte-user-prompt'
-	import { v4 as uuid } from '@lukeed/uuid'
-	import { ecommercePartnerStaticData } from './data/index.js'
-	import type { PackageType } from './index.js'
-	import { buildEbayListing } from './helpers/index.js'
-
-	import type {
-		EbayCategory,
-		EbayPolicy,
-		EcommerceCondition,
-		ExtendedEcommerceConditionMap,
-		EcommercePartnerConfiguration,
-		ExtendedEbayCategoryMap,
-		FileItem,
-		InventoryListingDetail,
-		InventoryRow,
-		InventoryType,
-		InventoryTypeListingDefaults,
-		NewInventoryListingDetail,
-		PolicyRowWithChecked,
-	} from './utils.js'
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	//
-	interface Props {
-		ebayCategoryList: EbayCategory[]
-		ebayCategoryMapList: ExtendedEbayCategoryMap[]
-		ebayPolicyList: EbayPolicy[]
-		ecommerceConditionMapList: ExtendedEcommerceConditionMap[]
-		ecommerceConditionList: EcommerceCondition[]
-		ecommercePartnerConfigurationList: EcommercePartnerConfiguration[]
-		listingList: InventoryListingDetail[]
-		partFileList: FileItem[]
-		part: InventoryRow
-		inventoryTypeWithDefaultConfigList: InventoryTypeListingDefaults[]
-		inventoryTypeList: InventoryType[]
-		save: (data: InventoryListingDetail | NewInventoryListingDetail) => Promise<void>
-	}
-
-	let {
-		ebayCategoryList,
-		ebayCategoryMapList,
-		ebayPolicyList,
-		ecommerceConditionMapList,
-		ecommerceConditionList,
-		ecommercePartnerConfigurationList,
-		listingList,
-		partFileList,
-		part,
-		inventoryTypeWithDefaultConfigList,
-		inventoryTypeList,
-		save = async (_: InventoryListingDetail | NewInventoryListingDetail) => {},
-	}: Props = $props()
-
-	let disableFields = $derived(!part.isWorldViewable)
-	let fulfillmentPolicyList = $derived.by(getFulfillmentPolicyList)
-	let lengthUnits = $derived.by(getPartnerLengthUnits)
-	let packageTypes = $derived.by(getPartnerPackageTypes)
-	let selectedEcommercePartnerId = $state(1)
-	let selectedPartnerConfig = $derived.by(getSelectedPartnerConfig)
-	let shippingFieldRequired = true // TODO: in the eBay world, this will need to be set if using calculated shipping but we don't know how we'll check that
-	let show = $state(false)
-	let showElement = $derived(selectedPartnerConfig?.name === 'ebay')
-	let uploadedListingImages = $derived.by(getListedImages)
-	let userPrompt: UserPrompt | undefined = $state(undefined)
-	let weightUnits = $derived.by(getPartnerWeightUnits)
-
-	// For images - moved before getOrCreateEcommerceListingObject to avoid initialization error
-	let newEcommerceListing: NewInventoryListingDetail = Object.freeze({
-		// Listing details
-		active: false,
-		//inventoryListingDetailId: null,
-		convertedListingDetails: null,
-		duration: 'GTC',
-		ecommercePartnerId: 0,
-		ecommerceCategoryId: null,
-		ecommerceConditionId: null,
-		ecommerceConditionDescription: null,
-		fulfillmentTime: null,
-		fulfillmentTimeUnit: null,
-		listingDescription: null,
-		listingStatus: 'pending',
-		listingTitle: null,
-		// Inventory specifics
-		imageUrls: [],
-		inventoryDescription: null,
-		inventoryId: 0,
-		lastUpdate: '',
-		manufacturerPartNumber: null,
-		message: [],
-		price: null,
-		quantity: null,
-		sku: null,
-		storeId: 0,
-		upc: '',
-		weight: null,
-		weightUnit: null,
-		shippingLength: null,
-		shippingWidth: null,
-		shippingHeight: null,
-		shippingLengthUnit: null,
-		shippingPackage: null,
-		// Partner specifics that don't fit into the other categories
-		partnerSpecificDetails: {
-			brand: null,
-			duration: 'GTC',
-			listingFormat: 'FIXED_PRICE',
-			fulfillmentPolicy: null,
-			marketplaceId: 'EBAY_MOTORS',
-			merchantLocationKey: null,
-			oemNumber: null,
-			paymentPolicy: null,
-			returnPolicy: null,
-		},
-	})
-
-	let listing: InventoryListingDetail | NewInventoryListingDetail = $state(buildListingFromCurrentState()) // Had to explicitly set the type here
-	$inspect(listing)
-	// New function to build listing using buildEbayListing helper
-	function buildListingFromCurrentState(): InventoryListingDetail | NewInventoryListingDetail {
-		// Find existing listing for the selected partner
-		const existingListing =
-			listingList.find(listing => listing.ecommercePartnerId === selectedEcommercePartnerId) || newEcommerceListing
-
-		// Find matching category mapping
-		const categoryMapping = ebayCategoryMapList.find(mapping => mapping.typeNum === part.inventoryTypeId)
-
-		// Find matching condition mapping
-		const conditionMapping = ecommerceConditionMapList.find(mapping => mapping.itrackCondition === part.condition)
-
-		// Find matching inventory type
-		const inventoryType = inventoryTypeList.find(type => type.inventoryTypeId === part.inventoryTypeId)
-
-		// Convert InventoryTypeListingDefaults to ExtendedInventoryTypeListingDefaults format
-		const extendedInventoryTypeListingDefaults = inventoryTypeWithDefaultConfigList.map(config => ({
-			...config,
-			categoryName: '', // This will need to be populated from actual category data
-			inventoryType: config.inventoryTypeId,
-			inventoryTypeName: inventoryType?.name || '',
-		}))
-
-		// Build the input for buildEbayListing
-		const buildInput = {
-			categoryMapping,
-			conditionMapping,
-			ecommercePartnerConfiguration: selectedPartnerConfig,
-			existingListing,
-			inventoryRow: part,
-			inventoryTypeListingDefaults: extendedInventoryTypeListingDefaults,
-			inventoryType,
-			partFileList,
-		}
-
-		// Call buildEbayListing and return the result, or fallback to newEcommerceListing
-		const result = buildEbayListing(buildInput)
-		return result || newEcommerceListing
-	}
-
-	// This was originally a derived.by but then I got errors on the input binds
-	function getFulfillmentPolicyList(): PolicyRowWithChecked[] {
-		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'fulfillment') || []
-		const selectedPolicies = listing.partnerSpecificDetails.fulfillmentPolicy || []
-		return policies.map(policy => ({
-			...policy,
-			checked: Array.isArray(selectedPolicies)
-				? selectedPolicies.includes(policy.policyId)
-				: selectedPolicies === policy.policyId,
-		}))
-	}
-
-	function getPaymentPolicyListWithChecked(): PolicyRowWithChecked[] {
-		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'payment') || []
-		const selectedPolicies = listing.partnerSpecificDetails.paymentPolicy || []
-		return policies.map(policy => ({
-			...policy,
-			checked: Array.isArray(selectedPolicies)
-				? selectedPolicies.includes(policy.policyId)
-				: selectedPolicies === policy.policyId,
-		}))
-	}
-
-	function getReturnPolicyListWithChecked(): PolicyRowWithChecked[] {
-		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'return') || []
-		const selectedPolicies = listing.partnerSpecificDetails.returnPolicy || []
-		return policies.map(policy => ({
-			...policy,
-			checked: Array.isArray(selectedPolicies)
-				? selectedPolicies.includes(policy.policyId)
-				: selectedPolicies === policy.policyId,
-		}))
-	}
-
-	function handleFulfillmentPoliciesChange(selectedIds: string[]) {
-		listing.partnerSpecificDetails.fulfillmentPolicy = selectedIds
-		handleSave()
-	}
-
-	function handlePaymentPoliciesChange(selectedIds: string[]) {
-		listing.partnerSpecificDetails.paymentPolicy = selectedIds
-		handleSave()
-	}
-
-	function handleReturnPoliciesChange(selectedIds: string[]) {
-		listing.partnerSpecificDetails.returnPolicy = selectedIds
-		handleSave()
-	}
-	// Helper that returns any images that have successfully uploaded to eBay to show on Ecommerce page
-	function getListedImages() {
-		// Early return if we don't have the necessary data
-		if (!partFileList.length || !listingList.length) {
-			return []
-		}
-		// See if there's an existing listing row (should be outside of a race condition where part's still saving when they switched tabs)
-		const existingInventoryListingDetailRow = listingList.find(
-			listing => listing.ecommercePartnerId === selectedEcommercePartnerId,
-		)
-		const uploadedImages = existingInventoryListingDetailRow?.convertedListingDetails?.imageUrls
-		if (uploadedImages?.length) {
-			const matchingFilesWithUrl = partFileList.filter(partFile => {
-				const matchingUploadedUrl = uploadedImages.find(image => image.fileId === partFile.fileId)
-				return matchingUploadedUrl !== undefined
-			})
-			return matchingFilesWithUrl.map(file => ({
-				...file,
-				uuid: uuid(),
-			}))
-		}
-		return []
-	}
-
-	function getPartnerPackageTypes(): PackageType[] | [] {
-		const partnerName = selectedPartnerConfig?.name?.toLowerCase()
-		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
-			return []
-		}
-		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].packageTypes
-	}
-
-	function getPartnerWeightUnits(): string[] {
-		const partnerName = selectedPartnerConfig?.name?.toLowerCase()
-		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
-			return []
-		}
-		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].weightUnits
-	}
-	function getPartnerLengthUnits(): string[] {
-		const partnerName = selectedPartnerConfig?.name?.toLowerCase()
-		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
-			return []
-		}
-		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].lengthUnits
-	}
-
-	function getPaymentPolicyList() {
-		return ebayPolicyList?.filter(policy => policy.policyType === 'payment') || []
-	}
-
-	function getReturnPolicyList() {
-		return ebayPolicyList?.filter(policy => policy.policyType === 'return') || []
-	}
-	// TODO: This is a temporary function to get the selected partner config, probably not needed in derived
-	function getSelectedPartnerConfig(): EcommercePartnerConfiguration {
-		const matchingPartnerConfig = ecommercePartnerConfigurationList.find(
-			row => row.ecommercePartnerId === selectedEcommercePartnerId,
-		)
-		if (!matchingPartnerConfig) {
-			throw new Error('No matching partner config found')
-		}
-		// Ensure defaults property exists
-		if (!matchingPartnerConfig.defaults) {
-			matchingPartnerConfig.defaults = {
-				global: {
-					listingDescriptionTemplate: '',
-					listingDuration: 'GTC',
-					listingFormat: 'FIXED_PRICE',
-					listingTitleTemplate: '',
-				},
-				store: [],
-			}
-		}
-		return matchingPartnerConfig
-	}
-	// Function to find matching ecommerce condition from part.condition
-	function findMatchingEcommerceConditionId(): number | null {
-		if (!part || !ecommerceConditionList) return null
-		// TODO: First, check if existing listing and if it has a condition
-
-		// If no part condition, use default if exists
-		// if (!part.condition) {
-		// 	return selectedPartnerConfig?.defaults?.defaultConditionId ?? null
-		// }
-
-		const matchingMapping = ecommerceConditionMapList.find(mapping => mapping.itrackCondition === part.condition)
-
-		return matchingMapping?.ecommerceConditionId ?? null
-	}
-	function findMatchingPartTypeListingConfig(): InventoryTypeListingDefaults | null {
-		if (!part || !inventoryTypeWithDefaultConfigList) return null
-		const matchingConfig = inventoryTypeWithDefaultConfigList.find(
-			config =>
-				config.ecommercePartnerId === selectedEcommercePartnerId && config.inventoryTypeId === part.inventoryTypeId,
-		)
-		return matchingConfig ?? null
-	}
-
-	function findMatchingPartTypeName(): string | null {
-		return inventoryTypeList.find(type => type.inventoryTypeId === part.inventoryTypeId)?.name ?? null
-	}
-
-	function findMatchingLocationKey(): string | null {
-		if (!selectedPartnerConfig || !part.storeId) {
-			return null
-		}
-		const matchingStoreConfig = selectedPartnerConfig.defaults?.store?.find(
-			(store: any) => store.storeId === part.storeId,
-		)
-		if (matchingStoreConfig) {
-			return matchingStoreConfig.merchantLocationKey ?? null
-		}
-		return null
-	}
-
-	function findMatchingEcommerceConditionDescription(): string | null {
-		if (!part || !ecommerceConditionList) return null
-		// TODO: First, check if existing listing and if it has a condition description set
-
-		// If no part condition, use default if exists
-		// if (!part.condition) {
-		// 	return selectedPartnerConfig?.defaults?.defaultConditionDescription ?? null
-		// }
-
-		const matchingMapping = ecommerceConditionMapList.find(mapping => mapping.itrackCondition === part.condition)
-
-		return matchingMapping?.description ?? null
-	}
-
-	function findMatchingEbayCategoryId(): number | null {
-		if (!part || !ebayCategoryMapList) return null
-		const matchingMapping = ebayCategoryMapList.find(mapping => mapping.typeNum === part.inventoryTypeId)
-		return matchingMapping?.ebayCategoryId ?? null
-	}
-
-	function getMessageType(messageObject: any): string {
-		if (!messageObject) {
-			return ''
-		}
-		// Try to parse if it's a JSON string
-		let parsedObject = messageObject
-		if (typeof messageObject === 'string') {
-			try {
-				parsedObject = JSON.parse(messageObject)
-			} catch {
-				// If parsing fails but there's data, return 'text'
-				return messageObject.trim() ? 'text' : 'empty'
-			}
-		}
-
-		// If it's an array, get the first object and its first property value
-		if (Array.isArray(parsedObject)) {
-			if (parsedObject.length > 0) {
-				const firstItem = parsedObject[0]
-				if (typeof firstItem === 'object' && firstItem !== null) {
-					const keys = Object.keys(firstItem)
-					if (keys.length > 0) {
-						const firstKey = keys[0]
-						return firstItem[firstKey]
-					}
-				}
-				// If first item isn't an object, return 'array'
-				return parsedObject[0]
-			}
-			return ''
-		}
-
-		// If it's an object, get the first property value
-		if (typeof parsedObject === 'object' && parsedObject !== null) {
-			const keys = Object.keys(parsedObject)
-			if (keys.length > 0) {
-				const firstKey = keys[0]
-				return parsedObject[firstKey]
-			}
-		}
-
-		// Fallback for any other case with data
-		return 'unknown'
-	}
-
-	function formatMessageForDisplay(messageObject: any): string[] {
-		if (!messageObject) {
-			return ['No message available']
-		}
-
-		// If it's an array, extract messages from each item
-		if (Array.isArray(messageObject)) {
-			if (messageObject.length === 0) {
-				return ['No messages']
-			}
-
-			const allMessages: string[] = []
-
-			messageObject.forEach(item => {
-				if (typeof item === 'object' && item !== null) {
-					// Check if it has a 'messages' property (array of actual messages)
-					if (item.messages && Array.isArray(item.messages)) {
-						allMessages.push(...item.messages)
-					} else if (item.message) {
-						// Single message property
-						allMessages.push(item.message)
-					} else {
-						// Fallback to string representation
-						allMessages.push(JSON.stringify(item))
-					}
-				} else {
-					allMessages.push(String(item))
-				}
-			})
-			//return allMessages
-			//return allMessages.join('\n---\n')
-			return allMessages
-		}
-
-		// If it's an object, check for message properties
-		if (typeof messageObject === 'object' && messageObject !== null) {
-			if (messageObject.messages && Array.isArray(messageObject.messages)) {
-				return messageObject.messages.join('\n')
-			} else {
-				return [JSON.stringify(messageObject, null, 2)]
-			}
-		}
-
-		// Fallback for any other type
-		return [String(messageObject)]
-	}
-
-	// Handle clicking on listing ID to open external link
-	// TODO: this isn't very friendly to other partners
-	function handleListingIdClick(listing: InventoryListingDetail | NewInventoryListingDetail) {
-		// TODO: Implement logic to construct the appropriate URL based on partner
-		// For eBay, this might be something like: https://www.ebay.com/itm/{listingId}
-		const listingId = listing.convertedListingDetails?.listingId
-		if (selectedPartnerConfig?.name?.toLowerCase() === 'ebay' && listingId) {
-			// For eBay, open the listing page (this is a placeholder URL structure)
-			const production = false // TODO: figure out how/where we decide to set this and how to make certain components aware of it
-			// The api call for get item returns the following format for sandbox https://sandbox.ebay.com/itm/${sku}-/${listingId}
-			const ebayUrl = production ? `https://ebay.com/itm/${listingId}` : `https://sandbox.ebay.com/itm/${listingId}`
-			window.open(ebayUrl, '_blank')
-		}
-	}
-
-	async function handleSave() {
-		// If required fields are filled out, set a flag so Agg can pick it up and process it
-		if (!listing) return
-		await save(listing)
-	}
-
-	// Taken from Basic.svelte
-	function zeroIfNull(value: number | null) {
-		return value ?? 0
-	}
-</script>
-
-<div class="form-row">
-	<div class="col-lg d-flex flex-wrap">
-		<div class="card hightlight-card mt-4 w-100">
-			<div class="card-header">{translate('ecommerce.configuration.listingStatus', 'Listing Status')}</div>
-			{#if listing}
-				<div class="card-body">
-					<div class="d-flex flex-wrap align-items-center mb-2">
-						<div
-							class="d-flex align-items-center"
-							style="margin-right: 2rem;"
-						>
-							<strong style="margin-right: 0.5rem;">{translate('ecommerce.configuration.status', 'Status')}:</strong>
-							<span
-								class="badge"
-								class:badge-danger={listing.listingStatus === 'error'}
-								class:badge-warn={listing.listingStatus === 'cancelled'}
-								class:badge-primary={listing.listingStatus === 'pending'}
-								class:badge-success={listing.listingStatus === 'listed'}
-							>
-								{listing.listingStatus}
-							</span>
-						</div>
-
-						<div
-							class="d-flex align-items-center"
-							style="margin-right: 2rem;"
-						>
-							<strong style="margin-right: 0.5rem;"
-								>{translate('ecommerce.configuration.lastUpdate', 'Last Update')}:</strong
-							>
-							<span>{listing.lastUpdate ? new Date(listing.lastUpdate).toLocaleString() : 'N/A'}</span>
-						</div>
-
-						{#if listing?.convertedListingDetails?.listingId}
-							<div class="d-flex align-items-center">
-								<Button
-									outline
-									size="sm"
-									onclick={() => handleListingIdClick(listing)}
-									>{translate('ecommerce.configuration.viewOnEbay', 'View On eBay')}</Button
-								>
-							</div>
-						{/if}
-						{#if listing.message}
-							<div class="d-flex align-items-center">
-								<strong style="margin-right: 0.5rem;">{translate('ecommerce.configuration.message', 'Message')}:</strong
-								>
-
-								<span>{getMessageType(listing.message)}</span>
-							</div>
-						{/if}
-						{#if listing.listingStatus === 'error'}
-							<div
-								class="d-flex align-items-center"
-								style="margin-left: 2rem;"
-							>
-								<Button
-									outline
-									style="margin-right: 0.5rem;"
-									color="success"
-									size="sm"
-									iconClass="search"
-									disabled={false}
-									onclick={() => {
-										show = true
-									}}
-								>
-									{translate('ecommerce.configuration.viewErrors', 'View Errors')}
-								</Button>
-							</div>
-						{/if}
-					</div>
-				</div>
-			{/if}
-		</div>
-	</div>
-</div>
-<div class="form-row">
-	<div class="col-lg d-flex flex-wrap">
-		<div class="card hightlight-card mt-4 w-100">
-			<div class="card-header">
-				{translate('ecommerce.configuration.uploadedListingImages', 'Uploaded Listing Images')}
-			</div>
-			<div class="card-body">
-				<div class="form-row">
-					<div class="col-md">
-						{#if !listing?.imageUrls?.length && !uploadedListingImages.length}
-							<p>No attachments found for this part</p>
-						{:else if listing?.imageUrls?.length && !uploadedListingImages.length && listing.listingStatus === 'pending'}
-							<p>Images waiting for eBay sync</p>
-						{:else}
-							<ThumbnailGrid
-								fileList={uploadedListingImages}
-								modificationDisabled={true}
-								hidePublicFeatures={true}
-								hideRankFeatures={true}
-							/>
-						{/if}
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-<div class="form-row">
-	<div class="col-lg d-flex flex-wrap">
-		<div class="card hightlight-card mt-4 w-100">
-			<div class="card-header">{translate('ecommerce.configuration.partDetails', 'Part Details')}</div>
-			<div class="card-body">
-				<div class="form-row">
-					<div class="col-md">
-						<div class="form-row">
-							<div class="col">
-								<Input
-									id="sku"
-									type="text"
-									label={translate('ecommerce.configuration.ebaySku', 'Ebay SKU')}
-									autocomplete="off"
-									placeholder=""
-									disabled={true}
-									required={true}
-									value={listing.sku}
-								/>
-							</div>
-							<div class="col">
-								<Input
-									id="store"
-									type="text"
-									label={translate('ecommerce.configuration.store', 'Store')}
-									autocomplete="off"
-									placeholder=""
-									disabled={true}
-									required={true}
-									value={listing.storeId}
-								/>
-							</div>
-							<div class="col">
-								<Input
-									id="quantity"
-									inputmode="decimal"
-									type="number"
-									class={zeroIfNull(part.quantity) > zeroIfNull(part.maximumQuantity) ||
-									zeroIfNull(part.quantity) < zeroIfNull(part.minimumQuantity)
-										? 'border-danger'
-										: ''}
-									label={translate('ecommerce.configuration.quantity', 'Quantity')}
-									hint={translate('ecommerce.configuration.onHand', 'On Hand')}
-									disabled={true}
-									required={true}
-									value={listing.quantity}
-								></Input>
-							</div>
-							<div class="col">
-								<CurrencyInput
-									id="retail-price"
-									label={translate('ecommerce.configuration.price', 'Price')}
-									name="retailprice"
-									disabled={true}
-									required={true}
-									class={(listing.price ?? 0) === 0 ? 'is-invalid' : ''}
-									value={(listing.price ?? 0).toString()}
-								/>
-							</div>
-						</div>
-						<div class="form-row">
-							<div class="col">
-								<Input
-									id="brand"
-									type="text"
-									label={translate('ecommerce.configuration.brand', 'Brand')}
-									autocomplete="off"
-									placeholder=""
-									disabled={disableFields}
-									bind:value={listing.partnerSpecificDetails.brand}
-								/>
-							</div>
-							<div class="col">
-								<Input
-									id="mpn"
-									type="text"
-									label={translate('ecommerce.configuration.manufPartNumber', 'Manuf. Part Number')}
-									autocomplete="off"
-									placeholder=""
-									disabled={disableFields}
-									bind:value={listing.manufacturerPartNumber}
-								/>
-							</div>
-							<div class="col">
-								<Input
-									id="brand"
-									type="text"
-									label={translate('ecommerce.configuration.upc', 'UPC')}
-									autocomplete="off"
-									placeholder=""
-									disabled={disableFields}
-									bind:value={listing.upc}
-								/>
-							</div>
-						</div>
-						<div class="form-row">
-							<div class="col">
-								<Select
-									label={translate('ecommerce.configuration.condition', 'Condition')}
-									showEmptyOption={true}
-									emptyValue={null}
-									emptyText={translate('ecommerce.configuration.selectCondition', 'Select Condition')}
-									disabled={false}
-									required={true}
-									bind:value={listing.ecommerceConditionId}
-								>
-									{#each ecommerceConditionList as ecommerceCondition}
-										<option value={ecommerceCondition.ecommerceConditionId}>{ecommerceCondition.name}</option>
-									{/each}
-								</Select>
-							</div>
-							<div class="col">
-								<Input
-									id="conditionDescription"
-									type="text"
-									label={translate('ecommerce.configuration.conditionDescription', 'Condition Description')}
-									autocomplete="off"
-									placeholder=""
-									required={true}
-									disabled={false}
-									bind:value={listing.ecommerceConditionDescription}
-								/>
-							</div>
-						</div>
-						<div class="form-row">
-							<div class="col">
-								<Textarea
-									label={translate('ecommerce.configuration.partDescription', 'Part Description')}
-									rows={4}
-									disabled={false}
-									required={true}
-									class={!listing.inventoryDescription || listing.inventoryDescription.trim() === ''
-										? 'is-invalid'
-										: ''}
-									bind:value={listing.inventoryDescription}
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="card hightlight-card mt-4 w-100">
-			<div class="card-header">{translate('ecommerce.configuration.shippingInfo', 'Shipping Info')}</div>
-			<div class="card-body">
-				<div class="form-row">
-					<div class="col-md">
-						<Input
-							id="shipping-weight"
-							inputmode="decimal"
-							type="number"
-							label={translate('ecommerce.configuration.weight', 'Weight')}
-							disabled={false}
-							required={shippingFieldRequired}
-							bind:value={listing.weight}
-						></Input>
-					</div>
-					<div class="col-md">
-						<Select
-							id="shipping-weight-unit"
-							label={translate('ecommerce.configuration.weightUnit', 'Weight Unit')}
-							showEmptyOption={true}
-							emptyValue={null}
-							emptyText={translate('ecommerce.configuration.selectUnit', 'Select Unit')}
-							disabled={false}
-							required={shippingFieldRequired}
-							bind:value={listing.weightUnit}
-						>
-							{#each weightUnits as unit}
-								<option value={unit}>{unit}</option>
-							{/each}
-						</Select>
-					</div>
-				</div>
-				<div class="form-row">
-					<div class="col-md">
-						<Input
-							id="shipping-length"
-							inputmode="decimal"
-							type="number"
-							label={translate('ecommerce.configuration.length', 'Length')}
-							disabled={false}
-							required={shippingFieldRequired}
-							bind:value={listing.shippingLength}
-						></Input>
-					</div>
-					<div class="col-md">
-						<Input
-							id="shipping-width"
-							inputmode="decimal"
-							type="number"
-							label={translate('ecommerce.configuration.width', 'Width')}
-							disabled={false}
-							required={shippingFieldRequired}
-							bind:value={listing.shippingWidth}
-						></Input>
-					</div>
-				</div>
-				<div class="form-row">
-					<div class="col-md">
-						<Input
-							id="shipping-height"
-							inputmode="decimal"
-							type="number"
-							label={translate('ecommerce.configuration.height', 'Height')}
-							disabled={false}
-							required={shippingFieldRequired}
-							bind:value={listing.shippingHeight}
-						></Input>
-					</div>
-					<div class="col-md">
-						<Select
-							id="shipping-length-unit"
-							label={translate('ecommerce.configuration.lengthUnit', 'Length Unit')}
-							showEmptyOption={true}
-							emptyValue={null}
-							emptyText={translate('ecommerce.configuration.selectUnit', 'Select Unit')}
-							disabled={false}
-							required={shippingFieldRequired}
-							bind:value={listing.shippingLengthUnit}
-						>
-							{#each lengthUnits as unit}
-								<option value={unit}>{unit}</option>
-							{/each}
-						</Select>
-					</div>
-				</div>
-				<div class="form-row">
-					<div class="col-md-6">
-						<Select
-							label={translate('ecommerce.configuration.packageType', 'Package Type')}
-							showEmptyOption={true}
-							emptyValue={null}
-							emptyText={translate('ecommerce.configuration.selectPackage', 'Select Package')}
-							required={shippingFieldRequired}
-							bind:value={listing.shippingPackage}
-						>
-							{#each packageTypes as pkg}
-								<option value={pkg.partnerValue}>{pkg.name}</option>
-							{/each}
-						</Select>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div
-		class="col-lg flex-wrap"
-		class:d-flex={showElement}
-		class:d-none={!showElement}
-	>
-		<div class="card hightlight-card mt-4 w-100">
-			<div class="card-header">{translate('ecommerce.configuration.listingDetails', 'Listing Details')}</div>
-			<div class="card-body">
-				<div class="form-row">
-					<div class="col">
-						<Input
-							id="listingTitle"
-							type="text"
-							label={translate('ecommerce.configuration.title', 'Title')}
-							autocomplete="off"
-							placeholder=""
-							disabled={false}
-							required={true}
-							bind:value={listing.listingTitle}
-						/>
-					</div>
-				</div>
-				<div class="form-row">
-					<div class="col">
-						<Textarea
-							label={translate('ecommerce.configuration.description', 'Description')}
-							rows={6}
-							disabled={false}
-							required={true}
-							class={!listing.listingDescription || listing.listingDescription.trim() === '' ? 'is-invalid' : ''}
-							bind:value={listing.listingDescription}
-						/>
-					</div>
-				</div>
-				<div class="form-row">
-					<div class="col">
-						<Select
-							label={translate('ecommerce.configuration.ebayCategory', 'Ebay Category')}
-							showEmptyOption={true}
-							emptyValue={null}
-							emptyText={translate('ecommerce.configuration.selectCategory', 'Select Category')}
-							disabled={false}
-							required={true}
-							validation={{
-								validator: value => {
-									if (!value) {
-										false
-									}
-									return true
-								},
-							}}
-							bind:value={listing.ecommerceCategoryId}
-						>
-							{#each ebayCategoryList as category}
-								<option value={category.ebayCategoryId}>{category.name}</option>
-							{/each}
-						</Select>
-					</div>
-				</div>
-				<div class="form-row">
-					<div class="col">
-						<Input
-							id="fulfillmentTIme"
-							type="number"
-							label={translate('ecommerce.configuration.fulfillmentTime', 'Fulfillment Time')}
-							autocomplete="off"
-							placeholder=""
-							disabled={false}
-							onchange={handleSave}
-							required={true}
-							bind:value={listing.fulfillmentTime}
-						/>
-					</div>
-					<div class="col">
-						<Select
-							label={translate('ecommerce.configuration.fulfillmentTimeUnit', 'Fulfillment Time Unit')}
-							showEmptyOption={true}
-							emptyValue={null}
-							emptyText={translate('ecommerce.configuration.selectUnit', 'Select Unit')}
-							disabled={false}
-							required={true}
-							bind:value={listing.fulfillmentTimeUnit}
-						>
-							{#each ecommercePartnerStaticData.ebay.timeUnits as unit}
-								<option value={unit}>{unit}</option>
-							{/each}
-						</Select>
-					</div>
-				</div>
-				<PolicyList
-					title={translate('ecommerce.configuration.fulfillmentPolicies', 'Fulfillment Policies')}
-					policies={fulfillmentPolicyList}
-					selectedPolicyIds={Array.isArray(listing.partnerSpecificDetails.fulfillmentPolicy)
-						? listing.partnerSpecificDetails.fulfillmentPolicy
-						: listing.partnerSpecificDetails.fulfillmentPolicy
-							? [listing.partnerSpecificDetails.fulfillmentPolicy]
-							: []}
-					onSelectionChange={handleFulfillmentPoliciesChange}
-				/>
-
-				<PolicyList
-					title={translate('ecommerce.configuration.paymentPolicies', 'Payment Policies')}
-					policies={getPaymentPolicyListWithChecked()}
-					selectedPolicyIds={Array.isArray(listing.partnerSpecificDetails.paymentPolicy)
-						? listing.partnerSpecificDetails.paymentPolicy
-						: listing.partnerSpecificDetails.paymentPolicy
-							? [listing.partnerSpecificDetails.paymentPolicy]
-							: []}
-					onSelectionChange={handlePaymentPoliciesChange}
-				/>
-
-				<PolicyList
-					title={translate('ecommerce.configuration.returnPolicies', 'Return Policies')}
-					policies={getReturnPolicyListWithChecked()}
-					selectedPolicyIds={Array.isArray(listing.partnerSpecificDetails.returnPolicy)
-						? listing.partnerSpecificDetails.returnPolicy
-						: listing.partnerSpecificDetails.returnPolicy
-							? [listing.partnerSpecificDetails.returnPolicy]
-							: []}
-					onSelectionChange={handleReturnPoliciesChange}
-				/>
-			</div>
-		</div>
-	</div>
-</div>
-<div class="form-row">
-	<div class="col-lg d-flex flex-wrap mt-4">
-		<Button
-			outline
-			color="success"
-			size="sm"
-			iconClass="plus"
-			onclick={async () => {
-				if (
-					await userPrompt?.confirm(
-						'Listing defaults will be overwritten and part or configuration changes will not update the listing',
-					)
-				) {
-					handleSave()
-				}
-			}}
-			disabled={false}
-		>
-			{translate('ecommerce.configuration.manualSave', 'Manual Save')}
-		</Button>
-	</div>
-</div>
-
-<UserPrompt bind:this={userPrompt} />
-<Modal
-	bind:show
-	title={translate('ecommerce.configuration.messageList', 'Message List')}
-	modalSize="lg"
-	confirmButtonText={translate('ecommerce.configuration.close', 'Close')}
-	cancelShown={false}
-	confirm={() => (show = false)}
-	close={() => (show = false)}
->
-	{#each formatMessageForDisplay(listing.message) as msg}
-		<div>{msg}</div>
-	{/each}
-</Modal>
+<script lang="ts">
+	import type { i18n } from 'i18next'
+	import { getContext } from 'svelte'
+
+	import Button from '@isoftdata/svelte-button'
+	import CurrencyInput from '@isoftdata/svelte-currency-input'
+	import Input from '@isoftdata/svelte-input'
+	import Modal from '@isoftdata/svelte-modal'
+	import Select from '@isoftdata/svelte-select'
+	import Textarea from '@isoftdata/svelte-textarea'
+	import PolicyList from './PolicyList.svelte'
+	import { ThumbnailGrid } from '@isoftdata/svelte-attachments'
+	import UserPrompt from '@isoftdata/svelte-user-prompt'
+	import { v4 as uuid } from '@lukeed/uuid'
+	import { ecommercePartnerStaticData } from './data/index.js'
+	import type { PackageType } from './index.js'
+	import { buildEbayListing } from './helpers/index.js'
+
+	import type {
+		EbayCategory,
+		EbayPolicy,
+		EcommerceCondition,
+		ExtendedEcommerceConditionMap,
+		EcommercePartnerConfiguration,
+		ExtendedEbayCategoryMap,
+		FileItem,
+		InventoryListingDetail,
+		InventoryRow,
+		InventoryType,
+		InventoryTypeListingDefaults,
+		NewInventoryListingDetail,
+		PolicyRowWithChecked,
+	} from './utils.js'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	//
+	interface Props {
+		ebayCategoryList: Array<EbayCategory>
+		ebayCategoryMapList: Array<ExtendedEbayCategoryMap>
+		ebayPolicyList: Array<EbayPolicy>
+		ecommerceConditionMapList: Array<ExtendedEcommerceConditionMap>
+		ecommerceConditionList: Array<EcommerceCondition>
+		ecommercePartnerConfigurationList: Array<EcommercePartnerConfiguration>
+		listingList: Array<InventoryListingDetail>
+		partFileList: Array<FileItem>
+		part: InventoryRow
+		inventoryTypeWithDefaultConfigList: Array<InventoryTypeListingDefaults>
+		inventoryTypeList: Array<InventoryType>
+		save: (data: InventoryListingDetail | NewInventoryListingDetail) => Promise<void>
+	}
+
+	let {
+		ebayCategoryList,
+		ebayCategoryMapList,
+		ebayPolicyList,
+		ecommerceConditionMapList,
+		ecommerceConditionList,
+		ecommercePartnerConfigurationList,
+		listingList,
+		partFileList,
+		part,
+		inventoryTypeWithDefaultConfigList,
+		inventoryTypeList,
+		save = async (_: InventoryListingDetail | NewInventoryListingDetail) => {},
+	}: Props = $props()
+
+	let disableFields = $derived(!part.isWorldViewable)
+	let fulfillmentPolicyList = $derived.by(getFulfillmentPolicyList)
+	let lengthUnits = $derived.by(getPartnerLengthUnits)
+	let packageTypes = $derived.by(getPartnerPackageTypes)
+	let selectedEcommercePartnerId = $state(1)
+	let selectedPartnerConfig = $derived.by(getSelectedPartnerConfig)
+	let shippingFieldRequired = true // TODO: in the eBay world, this will need to be set if using calculated shipping but we don't know how we'll check that
+	let show = $state(false)
+	let showElement = $derived(selectedPartnerConfig?.name === 'ebay')
+	let uploadedListingImages = $derived.by(getListedImages)
+	let userPrompt: UserPrompt | undefined = $state(undefined)
+	let weightUnits = $derived.by(getPartnerWeightUnits)
+
+	// For images - moved before getOrCreateEcommerceListingObject to avoid initialization error
+	let newEcommerceListing = Object.freeze({
+		// Listing details
+		active: false,
+		//inventoryListingDetailId: null,
+		convertedListingDetails: null,
+		duration: 'GTC',
+		ecommercePartnerId: 0,
+		ecommerceCategoryId: null,
+		ecommerceConditionId: null,
+		ecommerceConditionDescription: null,
+		fulfillmentTime: null,
+		fulfillmentTimeUnit: null,
+		listingDescription: null,
+		listingStatus: 'pending',
+		listingTitle: null,
+		// Inventory specifics
+		imageUrls: [],
+		inventoryDescription: null,
+		inventoryId: 0,
+		lastUpdate: '',
+		manufacturerPartNumber: null,
+		message: [],
+		price: null,
+		quantity: null,
+		sku: null,
+		storeId: 0,
+		upc: '',
+		weight: null,
+		weightUnit: null,
+		shippingLength: null,
+		shippingWidth: null,
+		shippingHeight: null,
+		shippingLengthUnit: null,
+		shippingPackage: null,
+		// Partner specifics that don't fit into the other categories
+		partnerSpecificDetails: {
+			brand: null,
+			duration: 'GTC',
+			listingFormat: 'FIXED_PRICE',
+			fulfillmentPolicy: null,
+			marketplaceId: 'EBAY_MOTORS',
+			merchantLocationKey: null,
+			oemNumber: null,
+			paymentPolicy: null,
+			returnPolicy: null,
+		},
+	} as NewInventoryListingDetail)
+
+	let listing: InventoryListingDetail | NewInventoryListingDetail = $state(buildListingFromCurrentState()) // Had to explicitly set the type here
+	// New function to build listing using buildEbayListing helper
+	function buildListingFromCurrentState(): InventoryListingDetail | NewInventoryListingDetail {
+		// Find existing listing for the selected partner
+		const existingListing =
+			listingList.find(listing => listing.ecommercePartnerId === selectedEcommercePartnerId) || newEcommerceListing
+
+		// Find matching category mapping
+		const categoryMapping = ebayCategoryMapList.find(mapping => mapping.typeNum === part.inventoryTypeId)
+
+		// Find matching condition mapping
+		const conditionMapping = ecommerceConditionMapList.find(mapping => mapping.itrackCondition === part.condition)
+
+		// Find matching inventory type
+		const inventoryType = inventoryTypeList.find(type => type.inventoryTypeId === part.inventoryTypeId)
+
+		// Convert InventoryTypeListingDefaults to ExtendedInventoryTypeListingDefaults format
+		const extendedInventoryTypeListingDefaults = inventoryTypeWithDefaultConfigList.map(config => ({
+			...config,
+			categoryName: '', // This will need to be populated from actual category data
+			inventoryType: config.inventoryTypeId,
+			inventoryTypeName: inventoryType?.name || '',
+		}))
+
+		// Build the input for buildEbayListing
+		const buildInput = {
+			categoryMapping,
+			conditionMapping,
+			ecommercePartnerConfiguration: selectedPartnerConfig,
+			existingListing,
+			inventoryRow: part,
+			inventoryTypeListingDefaults: extendedInventoryTypeListingDefaults,
+			inventoryType,
+			partFileList,
+		}
+
+		// Call buildEbayListing and return the result, or fallback to newEcommerceListing
+		const result = buildEbayListing(buildInput)
+		return result || newEcommerceListing
+	}
+
+	// This was originally a derived.by but then I got errors on the input binds
+	function getFulfillmentPolicyList(): Array<PolicyRowWithChecked> {
+		const policies = ebayPolicyList.filter(policy => policy.policyType === 'fulfillment')
+		const selectedPolicies = listing.partnerSpecificDetails.fulfillmentPolicy || []
+		return policies.map(policy => ({
+			...policy,
+			checked: selectedPolicies.includes(policy.policyId),
+		}))
+	}
+
+	function getPaymentPolicyListWithChecked(): Array<PolicyRowWithChecked> {
+		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'payment') || []
+		const selectedPolicies = listing.partnerSpecificDetails.paymentPolicy || []
+		return policies.map(policy => ({
+			...policy,
+			checked: selectedPolicies.includes(policy.policyId),
+		}))
+	}
+
+	function getReturnPolicyListWithChecked(): Array<PolicyRowWithChecked> {
+		const policies = ebayPolicyList?.filter(policy => policy.policyType === 'return') || []
+		const selectedPolicies = listing.partnerSpecificDetails.returnPolicy || []
+		return policies.map(policy => ({
+			...policy,
+			checked: selectedPolicies.includes(policy.policyId),
+		}))
+	}
+
+	function handleFulfillmentPoliciesChange(selectedIds: Array<string>) {
+		listing.partnerSpecificDetails.fulfillmentPolicy = selectedIds
+		handleSave()
+	}
+
+	function handlePaymentPoliciesChange(selectedIds: Array<string>) {
+		listing.partnerSpecificDetails.paymentPolicy = selectedIds
+		handleSave()
+	}
+
+	function handleReturnPoliciesChange(selectedIds: Array<string>) {
+		listing.partnerSpecificDetails.returnPolicy = selectedIds
+		handleSave()
+	}
+	// Helper that returns any images that have successfully uploaded to eBay to show on Ecommerce page
+	function getListedImages() {
+		// Early return if we don't have the necessary data
+		if (!partFileList.length || !listingList.length) {
+			return []
+		}
+		// See if there's an existing listing row (should be outside of a race condition where part's still saving when they switched tabs)
+		const existingInventoryListingDetailRow = listingList.find(
+			listing => listing.ecommercePartnerId === selectedEcommercePartnerId,
+		)
+		const uploadedImages = existingInventoryListingDetailRow?.convertedListingDetails?.imageUrls
+		if (uploadedImages?.length) {
+			const matchingFilesWithUrl = partFileList.filter(partFile => {
+				const matchingUploadedUrl = uploadedImages.find(image => image.fileId === partFile.fileId)
+				return matchingUploadedUrl !== undefined
+			})
+			return matchingFilesWithUrl.map(file => ({
+				...file,
+				uuid: uuid(),
+			}))
+		}
+		return []
+	}
+
+	function getPartnerPackageTypes(): Array<PackageType> | [] {
+		const partnerName = selectedPartnerConfig?.name?.toLowerCase()
+		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
+			return []
+		}
+		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].packageTypes
+	}
+
+	function getPartnerWeightUnits(): Array<string> {
+		const partnerName = selectedPartnerConfig?.name?.toLowerCase()
+		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
+			return []
+		}
+		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].weightUnits
+	}
+	function getPartnerLengthUnits(): Array<string> {
+		const partnerName = selectedPartnerConfig?.name?.toLowerCase()
+		if (!partnerName || !(partnerName in ecommercePartnerStaticData)) {
+			return []
+		}
+		return ecommercePartnerStaticData[partnerName as keyof typeof ecommercePartnerStaticData].lengthUnits
+	}
+
+	// TODO: This is a temporary function to get the selected partner config, probably not needed in derived
+	function getSelectedPartnerConfig(): EcommercePartnerConfiguration {
+		const matchingPartnerConfig = ecommercePartnerConfigurationList.find(
+			row => row.ecommercePartnerId === selectedEcommercePartnerId,
+		)
+		if (!matchingPartnerConfig) {
+			throw new Error('No matching partner config found')
+		}
+		// Ensure defaults property exists
+		if (!matchingPartnerConfig.defaults) {
+			matchingPartnerConfig.defaults = {
+				global: {
+					listingDescriptionTemplate: '',
+					listingDuration: 'GTC',
+					listingFormat: 'FIXED_PRICE',
+					listingTitleTemplate: '',
+				},
+				store: [],
+			}
+		}
+		return matchingPartnerConfig
+	}
+
+	function getMessageType(messageObject: any): string {
+		if (!messageObject) {
+			return ''
+		}
+		// Try to parse if it's a JSON string
+		let parsedObject = messageObject
+		if (typeof messageObject === 'string') {
+			try {
+				parsedObject = JSON.parse(messageObject)
+			} catch {
+				// If parsing fails but there's data, return 'text'
+				return messageObject.trim() ? 'text' : 'empty'
+			}
+		}
+
+		// If it's an array, get the first object and its first property value
+		if (Array.isArray(parsedObject)) {
+			if (parsedObject.length > 0) {
+				const firstItem = parsedObject[0]
+				if (typeof firstItem === 'object' && firstItem !== null) {
+					const keys = Object.keys(firstItem)
+					if (keys.length > 0) {
+						const firstKey = keys[0]
+						return firstItem[firstKey]
+					}
+				}
+				// If first item isn't an object, return 'array'
+				return parsedObject[0]
+			}
+			return ''
+		}
+
+		// If it's an object, get the first property value
+		if (typeof parsedObject === 'object' && parsedObject !== null) {
+			const keys = Object.keys(parsedObject)
+			if (keys.length > 0) {
+				const firstKey = keys[0]
+				return parsedObject[firstKey]
+			}
+		}
+
+		// Fallback for any other case with data
+		return 'unknown'
+	}
+
+	function formatMessageForDisplay(messageObject: any): Array<string> {
+		if (!messageObject) {
+			return ['No message available']
+		}
+
+		// If it's an array, extract messages from each item
+		if (Array.isArray(messageObject)) {
+			if (messageObject.length === 0) {
+				return ['No messages']
+			}
+
+			const allMessages: Array<string> = []
+
+			messageObject.forEach(item => {
+				if (typeof item === 'object' && item !== null) {
+					// Check if it has a 'messages' property (array of actual messages)
+					if (item.messages && Array.isArray(item.messages)) {
+						allMessages.push(...item.messages)
+					} else if (item.message) {
+						// Single message property
+						allMessages.push(item.message)
+					} else {
+						// Fallback to string representation
+						allMessages.push(JSON.stringify(item))
+					}
+				} else {
+					allMessages.push(String(item))
+				}
+			})
+			//return allMessages
+			//return allMessages.join('\n---\n')
+			return allMessages
+		}
+
+		// If it's an object, check for message properties
+		if (typeof messageObject === 'object' && messageObject !== null) {
+			if (messageObject.messages && Array.isArray(messageObject.messages)) {
+				return messageObject.messages.join('\n')
+			} else {
+				return [JSON.stringify(messageObject, null, 2)]
+			}
+		}
+
+		// Fallback for any other type
+		return [String(messageObject)]
+	}
+
+	// Handle clicking on listing ID to open external link
+	// TODO: this isn't very friendly to other partners
+	function handleListingIdClick(listing: InventoryListingDetail | NewInventoryListingDetail) {
+		// TODO: Implement logic to construct the appropriate URL based on partner
+		// For eBay, this might be something like: https://www.ebay.com/itm/{listingId}
+		const listingId = listing.convertedListingDetails?.listingId
+		if (selectedPartnerConfig?.name?.toLowerCase() === 'ebay' && listingId) {
+			// For eBay, open the listing page (this is a placeholder URL structure)
+			const production = false // TODO: figure out how/where we decide to set this and how to make certain components aware of it
+			// The api call for get item returns the following format for sandbox https://sandbox.ebay.com/itm/${sku}-/${listingId}
+			const ebayUrl = production ? `https://ebay.com/itm/${listingId}` : `https://sandbox.ebay.com/itm/${listingId}`
+			window.open(ebayUrl, '_blank')
+		}
+	}
+
+	async function handleSave() {
+		// If required fields are filled out, set a flag so Agg can pick it up and process it
+		if (!listing) return
+		await save(listing)
+	}
+
+	// Taken from Basic.svelte
+	function zeroIfNull(value: number | null) {
+		return value ?? 0
+	}
+</script>
+
+<div class="form-row">
+	<div class="col-lg d-flex flex-wrap">
+		<div class="card hightlight-card mt-4 w-100">
+			<div class="card-header">{translate('ecommerce.configuration.listingStatus', 'Listing Status')}</div>
+			{#if listing}
+				<div class="card-body">
+					<div class="d-flex flex-wrap align-items-center mb-2">
+						<div
+							class="d-flex align-items-center"
+							style="margin-right: 2rem;"
+						>
+							<strong style="margin-right: 0.5rem;">{translate('ecommerce.configuration.status', 'Status')}:</strong>
+							<span
+								class="badge"
+								class:badge-danger={listing.listingStatus === 'error'}
+								class:badge-warn={listing.listingStatus === 'cancelled'}
+								class:badge-primary={listing.listingStatus === 'pending'}
+								class:badge-success={listing.listingStatus === 'listed'}
+							>
+								{listing.listingStatus}
+							</span>
+						</div>
+
+						<div
+							class="d-flex align-items-center"
+							style="margin-right: 2rem;"
+						>
+							<strong style="margin-right: 0.5rem;"
+								>{translate('ecommerce.configuration.lastUpdate', 'Last Update')}:</strong
+							>
+							<span>{listing.lastUpdate ? new Date(listing.lastUpdate).toLocaleString() : 'N/A'}</span>
+						</div>
+
+						{#if listing?.convertedListingDetails?.listingId}
+							<div class="d-flex align-items-center">
+								<Button
+									outline
+									size="sm"
+									onclick={() => handleListingIdClick(listing)}
+									>{translate('ecommerce.configuration.viewOnEbay', 'View On eBay')}</Button
+								>
+							</div>
+						{/if}
+						{#if listing.message}
+							<div class="d-flex align-items-center">
+								<strong style="margin-right: 0.5rem;">{translate('ecommerce.configuration.message', 'Message')}:</strong
+								>
+
+								<span>{getMessageType(listing.message)}</span>
+							</div>
+						{/if}
+						{#if listing.listingStatus === 'error'}
+							<div
+								class="d-flex align-items-center"
+								style="margin-left: 2rem;"
+							>
+								<Button
+									outline
+									style="margin-right: 0.5rem;"
+									color="success"
+									size="sm"
+									iconClass="search"
+									onclick={() => {
+										show = true
+									}}
+								>
+									{translate('ecommerce.configuration.viewErrors', 'View Errors')}...
+								</Button>
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+<div class="form-row">
+	<div class="col-lg d-flex flex-wrap">
+		<div class="card hightlight-card mt-4 w-100">
+			<div class="card-header">
+				{translate('ecommerce.configuration.uploadedListingImages', 'Uploaded Listing Images')}
+			</div>
+			<div class="card-body">
+				<div class="form-row">
+					<div class="col-md">
+						{#if !listing?.imageUrls?.length && !uploadedListingImages.length}
+							<p>{translate('ecommerce.configuration.noAttachmentsFound', 'No attachments found for this part')}</p>
+						{:else if listing?.imageUrls?.length && !uploadedListingImages.length && listing.listingStatus === 'pending'}
+							<p>{translate('ecommerce.configuration.waitingEbaySync', 'Images waiting for eBay sync')}</p>
+						{:else}
+							<ThumbnailGrid
+								fileList={uploadedListingImages}
+								modificationDisabled
+								hidePublicFeatures
+								hideRankFeatures
+							/>
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="form-row">
+	<div class="col-lg d-flex flex-wrap">
+		<div class="card hightlight-card mt-4 w-100">
+			<div class="card-header">{translate('ecommerce.configuration.partDetails', 'Part Details')}</div>
+			<div class="card-body">
+				<div class="form-row">
+					<div class="col-md">
+						<div class="form-row">
+							<div class="col">
+								<Input
+									type="text"
+									label={translate('ecommerce.configuration.ebaySku', 'Ebay SKU')}
+									disabled={true}
+									required={true}
+									value={listing.sku}
+								/>
+							</div>
+							<div class="col">
+								<Input
+									type="text"
+									label={translate('ecommerce.configuration.store', 'Store')}
+									disabled={true}
+									required={true}
+									value={listing.storeId}
+								/>
+							</div>
+							<div class="col">
+								<Input
+									inputmode="decimal"
+									type="number"
+									class={zeroIfNull(part.quantity) > zeroIfNull(part.maximumQuantity) ||
+									zeroIfNull(part.quantity) < zeroIfNull(part.minimumQuantity)
+										? 'border-danger'
+										: ''}
+									label={translate('ecommerce.configuration.quantity', 'Quantity')}
+									hint={translate('ecommerce.configuration.onHand', 'On Hand')}
+									disabled={true}
+									required={true}
+									value={listing.quantity}
+								></Input>
+							</div>
+							<div class="col">
+								<CurrencyInput
+									label={translate('ecommerce.configuration.price', 'Price')}
+									name="retailprice"
+									disabled={true}
+									required={true}
+									class={(listing.price ?? 0) === 0 ? 'is-invalid' : ''}
+									value={(listing.price ?? 0).toString()}
+								/>
+							</div>
+						</div>
+						<div class="form-row">
+							<div class="col">
+								<Input
+									type="text"
+									label={translate('ecommerce.configuration.brand', 'Brand')}
+									disabled={disableFields}
+									bind:value={listing.partnerSpecificDetails.brand}
+								/>
+							</div>
+							<div class="col">
+								<Input
+									type="text"
+									label={translate('ecommerce.configuration.manufPartNumber', 'Manuf. Part Number')}
+									disabled={disableFields}
+									bind:value={listing.manufacturerPartNumber}
+								/>
+							</div>
+							<div class="col">
+								<Input
+									type="text"
+									label={translate('ecommerce.configuration.upc', 'UPC')}
+									disabled={disableFields}
+									bind:value={listing.upc}
+								/>
+							</div>
+						</div>
+						<div class="form-row">
+							<div class="col">
+								<Select
+									label={translate('ecommerce.configuration.condition', 'Condition')}
+									emptyText="-- {translate('ecommerce.configuration.selectCondition', 'Select Condition')} --"
+									required={true}
+									bind:value={listing.ecommerceConditionId}
+								>
+									{#each ecommerceConditionList as ecommerceCondition}
+										<option value={ecommerceCondition.ecommerceConditionId}>{ecommerceCondition.name}</option>
+									{/each}
+								</Select>
+							</div>
+							<div class="col">
+								<Input
+									type="text"
+									label={translate('ecommerce.configuration.conditionDescription', 'Condition Description')}
+									required={true}
+									bind:value={listing.ecommerceConditionDescription}
+								/>
+							</div>
+						</div>
+						<div class="form-row">
+							<div class="col">
+								<Textarea
+									label={translate('ecommerce.configuration.partDescription', 'Part Description')}
+									rows={4}
+									required={true}
+									class={{ 'is-invalid': !listing.inventoryDescription?.trim() }}
+									bind:value={listing.inventoryDescription}
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="card hightlight-card mt-4 w-100">
+			<div class="card-header">{translate('ecommerce.configuration.shippingInfo', 'Shipping Info')}</div>
+			<div class="card-body">
+				<div class="form-row">
+					<div class="col-md">
+						<Input
+							inputmode="decimal"
+							type="number"
+							label={translate('ecommerce.configuration.weight', 'Weight')}
+							required={shippingFieldRequired}
+							bind:value={listing.weight}
+						></Input>
+					</div>
+					<div class="col-md">
+						<Select
+							label={translate('ecommerce.configuration.weightUnit', 'Weight Unit')}
+							emptyText="-- {translate('ecommerce.configuration.selectUnit', 'Select Unit')} --"
+							required={shippingFieldRequired}
+							bind:value={listing.weightUnit}
+						>
+							{#each weightUnits as unit}
+								<option value={unit}>{unit}</option>
+							{/each}
+						</Select>
+					</div>
+				</div>
+				<div class="form-row">
+					<div class="col-md">
+						<Input
+							inputmode="decimal"
+							type="number"
+							label={translate('ecommerce.configuration.length', 'Length')}
+							required={shippingFieldRequired}
+							bind:value={listing.shippingLength}
+						></Input>
+					</div>
+					<div class="col-md">
+						<Input
+							inputmode="decimal"
+							type="number"
+							label={translate('ecommerce.configuration.width', 'Width')}
+							required={shippingFieldRequired}
+							bind:value={listing.shippingWidth}
+						></Input>
+					</div>
+				</div>
+				<div class="form-row">
+					<div class="col-md">
+						<Input
+							inputmode="decimal"
+							type="number"
+							label={translate('ecommerce.configuration.height', 'Height')}
+							required={shippingFieldRequired}
+							bind:value={listing.shippingHeight}
+						></Input>
+					</div>
+					<div class="col-md">
+						<Select
+							label={translate('ecommerce.configuration.lengthUnit', 'Length Unit')}
+							emptyText="-- {translate('ecommerce.configuration.selectUnit', 'Select Unit')} --"
+							required={shippingFieldRequired}
+							bind:value={listing.shippingLengthUnit}
+						>
+							{#each lengthUnits as unit}
+								<option value={unit}>{unit}</option>
+							{/each}
+						</Select>
+					</div>
+				</div>
+				<div class="form-row">
+					<div class="col-md-6">
+						<Select
+							label={translate('ecommerce.configuration.packageType', 'Package Type')}
+							emptyText="-- {translate('ecommerce.configuration.selectPackage', 'Select Package')} --"
+							required={shippingFieldRequired}
+							bind:value={listing.shippingPackage}
+						>
+							{#each packageTypes as pkg}
+								<option value={pkg.partnerValue}>{pkg.name}</option>
+							{/each}
+						</Select>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div
+		class="col-lg flex-wrap"
+		class:d-flex={showElement}
+		class:d-none={!showElement}
+	>
+		<div class="card hightlight-card mt-4 w-100">
+			<div class="card-header">{translate('ecommerce.configuration.listingDetails', 'Listing Details')}</div>
+			<div class="card-body">
+				<div class="form-row">
+					<div class="col">
+						<Input
+							type="text"
+							label={translate('ecommerce.configuration.title', 'Title')}
+							required={true}
+							bind:value={listing.listingTitle}
+						/>
+					</div>
+				</div>
+				<div class="form-row">
+					<div class="col">
+						<Textarea
+							label={translate('ecommerce.configuration.description', 'Description')}
+							rows={6}
+							required={true}
+							class={!listing.listingDescription || listing.listingDescription.trim() === '' ? 'is-invalid' : ''}
+							bind:value={listing.listingDescription}
+						/>
+					</div>
+				</div>
+				<div class="form-row">
+					<div class="col">
+						<Select
+							label={translate('ecommerce.configuration.ebayCategory', 'Ebay Category')}
+							emptyText="-- {translate('ecommerce.configuration.selectCategory', 'Select Category')} --"
+							required={true}
+							validation={{
+								validator: value => {
+									if (!value) {
+										false
+									}
+									return true
+								},
+							}}
+							bind:value={listing.ecommerceCategoryId}
+						>
+							{#each ebayCategoryList as category}
+								<option value={category.ebayCategoryId}>{category.name}</option>
+							{/each}
+						</Select>
+					</div>
+				</div>
+				<div class="form-row">
+					<div class="col">
+						<Input
+							type="number"
+							label={translate('ecommerce.configuration.fulfillmentTime', 'Fulfillment Time')}
+							onchange={handleSave}
+							required={true}
+							bind:value={listing.fulfillmentTime}
+						/>
+					</div>
+					<div class="col">
+						<Select
+							label={translate('ecommerce.configuration.fulfillmentTimeUnit', 'Fulfillment Time Unit')}
+							emptyText="-- {translate('ecommerce.configuration.selectUnit', 'Select Unit')} --"
+							required={true}
+							bind:value={listing.fulfillmentTimeUnit}
+						>
+							{#each ecommercePartnerStaticData.ebay.timeUnits as unit}
+								<option value={unit}>{unit}</option>
+							{/each}
+						</Select>
+					</div>
+				</div>
+				<PolicyList
+					title={translate('ecommerce.configuration.fulfillmentPolicies', 'Fulfillment Policies')}
+					policies={fulfillmentPolicyList}
+					selectedPolicyIds={Array.isArray(listing.partnerSpecificDetails.fulfillmentPolicy)
+						? listing.partnerSpecificDetails.fulfillmentPolicy
+						: listing.partnerSpecificDetails.fulfillmentPolicy
+							? [listing.partnerSpecificDetails.fulfillmentPolicy]
+							: []}
+					onSelectionChange={handleFulfillmentPoliciesChange}
+				/>
+
+				<PolicyList
+					title={translate('ecommerce.configuration.paymentPolicies', 'Payment Policies')}
+					policies={getPaymentPolicyListWithChecked()}
+					selectedPolicyIds={Array.isArray(listing.partnerSpecificDetails.paymentPolicy)
+						? listing.partnerSpecificDetails.paymentPolicy
+						: listing.partnerSpecificDetails.paymentPolicy
+							? [listing.partnerSpecificDetails.paymentPolicy]
+							: []}
+					onSelectionChange={handlePaymentPoliciesChange}
+				/>
+
+				<PolicyList
+					title={translate('ecommerce.configuration.returnPolicies', 'Return Policies')}
+					policies={getReturnPolicyListWithChecked()}
+					selectedPolicyIds={Array.isArray(listing.partnerSpecificDetails.returnPolicy)
+						? listing.partnerSpecificDetails.returnPolicy
+						: listing.partnerSpecificDetails.returnPolicy
+							? [listing.partnerSpecificDetails.returnPolicy]
+							: []}
+					onSelectionChange={handleReturnPoliciesChange}
+				/>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="form-row">
+	<div class="col-lg d-flex flex-wrap mt-4">
+		<Button
+			outline
+			color="success"
+			size="sm"
+			iconClass="plus"
+			onclick={async () => {
+				if (
+					await userPrompt?.confirm(
+						translate(
+							'ecommerce.configuration.saveConfirm',
+							'Listing defaults will be overwritten and part or configuration changes will not update the listing',
+						),
+					)
+				) {
+					handleSave()
+				}
+			}}
+		>
+			{translate('ecommerce.configuration.manualSave', 'Manual Save')}
+		</Button>
+	</div>
+</div>
+
+<UserPrompt bind:this={userPrompt} />
+<Modal
+	bind:show
+	title={translate('ecommerce.configuration.messageList', 'Message List')}
+	modalSize="lg"
+	confirmShown={false}
+	close={() => (show = false)}
+>
+	{#each formatMessageForDisplay(listing.message) as msg}
+		<div>{msg}</div>
+	{/each}
+</Modal>