@isoftdata/svelte-ecommerce 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/EcommerceStoreConfiguration.svelte

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

package/dist/PolicyList.svelte

@@ -1,54 +1,53 @@
-<script lang="ts">
-	import type { i18n } from 'i18next'
-
-	import { getContext } from 'svelte'
-
-	import Table, { Td } from '@isoftdata/svelte-table'
-	import Checkbox from '@isoftdata/svelte-checkbox'
-	import { translate as defaultTranslate } from '@isoftdata/utility-string'
-
-	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
-
-	import type { PolicyRowWithChecked } from './utils.js'
-
-	interface Props {
-		title: string
-		policies: Array<PolicyRowWithChecked>
-		selectedPolicyIds: Array<string>
-		onSelectionChange: (selectedIds: Array<string>) => void
-	}
-
-	let { title, policies, selectedPolicyIds, onSelectionChange }: Props = $props()
-
-	function handleCheckboxChange(policy: PolicyRowWithChecked, checked: boolean) {
-		const updatedIds = new Set<string>(selectedPolicyIds)
-		checked ? updatedIds.add(policy.policyId) : updatedIds.delete(policy.policyId)
-		onSelectionChange(Array.from(updatedIds))
-	}
-</script>
-
-<div class="mb-4">
-	<Table
-		responsive
-		{title}
-		stickyHeader
-		rows={policies}
-		parentClass="overflow-y-auto mh-500"
-		columns={[
-			{ property: 'checked', name: translate('configuration.ecommerce.selected', 'Selected'), width: '100px' },
-			{ property: 'name', name: translate('configuration.ecommerce.policy', 'Policy'), defaultSortColumn: true },
-		]}
-	>
-		{#snippet children({ row })}
-			<tr>
-				<Td property="checked">
-					<Checkbox
-						checked={row.checked}
-						onchange={e => handleCheckboxChange(row, e.currentTarget.checked)}
-					/>
-				</Td>
-				<td>{row.name}</td>
-			</tr>
-		{/snippet}
-	</Table>
-</div>
+<script lang="ts">
+	import type { i18n } from 'i18next'
+
+	import { getContext } from 'svelte'
+
+	import Table, { Td } from '@isoftdata/svelte-table'
+	import Checkbox from '@isoftdata/svelte-checkbox'
+	import { translate as defaultTranslate } from '@isoftdata/utility-string'
+
+	const { t: translate } = getContext<i18n>('i18next') || { t: defaultTranslate }
+
+	import type { PolicyRowWithChecked } from './utils.js'
+
+	interface Props {
+		title: string
+		policies: Array<PolicyRowWithChecked>
+		selectedPolicyIds: Array<string>
+		onSelectionChange: (selectedIds: Array<string>) => void
+	}
+
+	let { title, policies, selectedPolicyIds, onSelectionChange }: Props = $props()
+
+	function handleCheckboxChange(policy: PolicyRowWithChecked, checked: boolean) {
+		const updatedIds = new Set<string>(selectedPolicyIds)
+		checked ? updatedIds.add(policy.policyId) : updatedIds.delete(policy.policyId)
+		onSelectionChange(Array.from(updatedIds))
+	}
+</script>
+
+<div class="mb-4">
+	<Table
+		responsive
+		stickyHeader
+		rows={policies}
+		parentClass="overflow-y-auto mh-500"
+		columns={[
+			{ property: 'checked', name: translate('configuration.ecommerce.selected', 'Selected'), width: '100px' },
+			{ property: 'name', name: title, defaultSortColumn: true }, // translated before passing to component
+		]}
+	>
+		{#snippet children({ row })}
+			<tr>
+				<Td property="checked">
+					<Checkbox
+						checked={row.checked}
+						onchange={e => handleCheckboxChange(row, e.currentTarget.checked)}
+					/>
+				</Td>
+				<td>{row.name}</td>
+			</tr>
+		{/snippet}
+	</Table>
+</div>

package/dist/helpers/listing.d.ts

@@ -1,9 +1,27 @@
-import type { BuildEbayListingInput, FileItem, ImageUrl, InventoryListingDetail, NewInventoryListingDetail } from '../utils.js';
+import type { BuildEbayListingInput, EcommerceSharedDefaults, FileItem, ImageUrl, InventoryListingDetail, InventoryRow, NewInventoryListingDetail } from '../utils.js';
 /**
  * Shared method for creating an inventorylistingdetail row
  * Includes minimum validation and may return undefined if certain configuration settings determine the inventory item doesn't get a listing created
  */
 export declare const buildEbayListing: (buildEbayListingInput: BuildEbayListingInput) => InventoryListingDetail | NewInventoryListingDetail | undefined;
+/**
+ * Computes the adjusted price for a listing based on the following priority:
+ * 1. If existingListingPrice is set (not null/undefined/0), return it as-is (user has manually adjusted)
+ * 2. Otherwise, determine base price from defaultPriceType in priority order:
+ *    - partTypeDefaults.defaultPriceType
+ *    - storeDefaults.defaultPriceType
+ *    - globalDefaults.defaultPriceType
+ *    - Ultimate fallback: inventoryRow.retailPrice
+ * 3. Apply pricingModifier (with same priority fallback, default 100 = no change)
+ * 4. Formula: basePrice * (pricingModifier / 100)
+ */
+export declare const computeAdjustedPrice: ({ existingListingPrice, partTypeDefaults, storeDefaults, globalDefaults, inventoryRow, }: {
+    existingListingPrice: number | null | undefined;
+    partTypeDefaults: EcommerceSharedDefaults | null | undefined;
+    storeDefaults: EcommerceSharedDefaults | null | undefined;
+    globalDefaults: EcommerceSharedDefaults | null | undefined;
+    inventoryRow: InventoryRow;
+}) => number | null;
 /**
  * Accepts:
  * the raw string of imageUrls from the listing, should be stringified json