@spree/dashboard-core 1.0.0-rc.4 → 1.0.0-rc.5

package/src/lib/store-config.test.ts

@@ -0,0 +1,93 @@
+import type { Market } from '@spree/admin-sdk'
+import { describe, expect, it, vi } from 'vitest'
+import { adminClient } from '../client'
+import { listAllMarkets, marketLocalization } from './store-config'
+
+vi.mock('../client', () => ({ adminClient: { markets: { list: vi.fn() } } }))
+
+function market(attributes: Partial<Market>): Market {
+  return {
+    id: 'mkt_1',
+    name: 'Market',
+    currency: 'USD',
+    default_locale: 'en',
+    tax_inclusive: false,
+    default: false,
+    country_codes: [],
+    supported_locales: [],
+    created_at: '',
+    updated_at: '',
+    tax_provider: null,
+    ...attributes,
+  } as Market
+}
+
+describe('marketLocalization', () => {
+  const markets = [
+    market({
+      id: 'mkt_eu',
+      currency: 'EUR',
+      default_locale: 'de',
+      supported_locales: ['de', 'fr'],
+    }),
+    market({ id: 'mkt_us', currency: 'USD', default_locale: 'en', default: true }),
+    market({ id: 'mkt_ie', currency: 'EUR', default_locale: 'en' }),
+  ]
+
+  it('takes the defaults from the default market', () => {
+    const { defaultCurrency, defaultLocale } = marketLocalization(markets)
+
+    expect(defaultCurrency).toBe('USD')
+    expect(defaultLocale).toBe('en')
+  })
+
+  it('lists each market currency once, the default market first', () => {
+    expect(marketLocalization(markets).currencies).toEqual(['USD', 'EUR'])
+  })
+
+  it('lists every language any market offers', () => {
+    expect(marketLocalization(markets).locales).toEqual(['de', 'en', 'fr'])
+  })
+
+  it('falls back to the first market when none is flagged default', () => {
+    const { defaultCurrency } = marketLocalization([market({ currency: 'GBP' })])
+
+    expect(defaultCurrency).toBe('GBP')
+  })
+
+  it('returns empty lists before markets load', () => {
+    expect(marketLocalization([])).toEqual({
+      currencies: [],
+      locales: [],
+      defaultCurrency: undefined,
+      defaultLocale: undefined,
+    })
+  })
+})
+
+describe('listAllMarkets', () => {
+  it('joins every page so markets past the first page are not lost', async () => {
+    const page = (number: number, pages: number) => ({
+      data: [market({ id: `mkt_${number}` })],
+      meta: {
+        page: number,
+        pages,
+        limit: 100,
+        count: pages,
+        from: 1,
+        to: 1,
+        in: 1,
+        previous: null,
+        next: null,
+      },
+    })
+    vi.mocked(adminClient.markets.list).mockImplementation(async (params) =>
+      page(params?.page ?? 1, 3),
+    )
+
+    const result = await listAllMarkets()
+
+    expect(result.data.map((record) => record.id)).toEqual(['mkt_1', 'mkt_2', 'mkt_3'])
+    expect(adminClient.markets.list).toHaveBeenCalledTimes(3)
+  })
+})

package/src/lib/store-config.ts

@@ -0,0 +1,76 @@
+import type { Market, PaginatedResponse } from '@spree/admin-sdk'
+import type { CurrencyCode, LocaleCode } from '@spree/core'
+import { adminClient } from '../client'
+
+/**
+ * Markets and channels are store configuration that rarely changes, so the
+ * dashboard fetches each list once and keeps it for an hour. Their create,
+ * update and delete mutations invalidate `[resource, storeId]`, which refreshes
+ * the cached list immediately.
+ */
+export const STORE_CONFIG_STALE_TIME = 60 * 60_000
+
+const PAGE_SIZE = 100
+
+/**
+ * Fetches every page of a list and joins them, so a store with more records
+ * than one page holds still gets all of them.
+ */
+async function listEveryPage<T>(
+  fetchPage: (page: number) => Promise<PaginatedResponse<T>>,
+): Promise<PaginatedResponse<T>> {
+  const first = await fetchPage(1)
+  if (first.meta.pages <= 1) return first
+
+  const rest = await Promise.all(
+    Array.from({ length: first.meta.pages - 1 }, (_, index) => fetchPage(index + 2)),
+  )
+  return { ...first, data: [first, ...rest].flatMap((response) => response.data) }
+}
+
+/** Every market of the current store, under `['markets', storeId, 'all']`. */
+export function listAllMarkets() {
+  return listEveryPage((page) =>
+    adminClient.markets.list({ page, limit: PAGE_SIZE, sort: 'position' }),
+  )
+}
+
+/** Every channel of the current store, under `['channels', storeId, 'all']`. */
+export function listAllChannels() {
+  return listEveryPage((page) => adminClient.channels.list({ page, limit: PAGE_SIZE }))
+}
+
+export interface MarketLocalization {
+  /** The default market's currency first, then every other market's. */
+  currencies: CurrencyCode[]
+  /** Every language any market offers, sorted. */
+  locales: LocaleCode[]
+  defaultCurrency: CurrencyCode | undefined
+  defaultLocale: LocaleCode | undefined
+}
+
+/**
+ * The currencies and languages a store sells in, read from its markets. The
+ * default market's currency and language are the store's defaults.
+ */
+export function marketLocalization(markets: readonly Market[]): MarketLocalization {
+  const defaultMarket = markets.find((market) => market.default) ?? markets[0]
+  const currencies = [
+    ...new Set([
+      ...(defaultMarket ? [defaultMarket.currency] : []),
+      ...markets.map((market) => market.currency),
+    ]),
+  ]
+  const locales = [
+    ...new Set(
+      markets.flatMap((market) => [market.default_locale, ...(market.supported_locales ?? [])]),
+    ),
+  ].sort()
+
+  return {
+    currencies,
+    locales,
+    defaultCurrency: defaultMarket?.currency,
+    defaultLocale: defaultMarket?.default_locale,
+  }
+}

package/src/lib/table-registry.ts

@@ -67,6 +67,11 @@ interface ColumnDefBase<T = any> {
  * can show human-readable names instead of raw prefixed IDs.
  */
 export interface ResourceFilterConfig<R extends { id: string } = { id: string }> {
+  /**
+   * Leads every cache entry the filter creates, ahead of the tenant. Naming
+   * it after the resource (`'markets'`) lets that resource's writes, which
+   * invalidate `[resource, tenant]`, refresh the filter's lists too.
+   */
   queryKey: string
   search: (query: string) => Promise<{ data: R[] }>
   hydrate: (ids: string[]) => Promise<{ data: R[] }>
@@ -75,12 +80,18 @@ export interface ResourceFilterConfig<R extends { id: string } = { id: string }>
   emptyText?: string
   /**
    * Fetches the whole list, for a resource small enough to show in full —
-   * a store's warehouses, its channels. The control then opens as a plain
-   * list of options instead of an empty box waiting to be typed into, and
-   * still searches once the operator types. Leave it off for anything that
-   * could run to hundreds of rows.
+   * a store's warehouses, its channels. It is fetched once and cached under
+   * `[queryKey, tenant, 'all']`; the filter narrows it as the operator types
+   * and labels its chips from it, without further requests. Use the same
+   * request as the resource's own full-list hook, which shares that key.
+   * Leave it off for anything that could run to hundreds of rows.
    */
   listAll?: () => Promise<{ data: R[] }>
+  /**
+   * How long fetched options stay fresh, in milliseconds. Raise it for
+   * rarely-changing resources whose writes invalidate `queryKey`.
+   */
+  staleTime?: number
 }
 
 /**
@@ -100,7 +111,7 @@ export type TaggableType = 'product' | 'customer' | 'order' | (string & {})
  */
 export type ColumnDef<T = any> =
   | (ColumnDefBase<T> & {
-      filterType?: 'string' | 'boolean' | 'number' | 'date' | 'currency'
+      filterType?: 'string' | 'boolean' | 'number' | 'date' | 'currency' | 'locale'
       filterOptions?: never
       filterResource?: never
       taggableType?: never

package/src/locales/ar.json

@@ -1,5 +1,8 @@
 {
   "admin": {
+    "address_select": {
+      "none": "لم يتم اختيار عنوان"
+    },
     "app_name": "Spree Admin",
     "a11y": {
       "breadcrumb": "مسار التنقل",
@@ -97,6 +100,7 @@
     "address_book": {
       "default_billing": "الفوترة الافتراضية",
       "default_shipping": "الشحن الافتراضي",
+      "inherited_from": "موروث من {{name}}",
       "set_default_billing": "تعيين كعنوان فوترة افتراضي",
       "set_default_shipping": "تعيين كعنوان شحن افتراضي"
     },

package/src/locales/de.json

@@ -1,5 +1,8 @@
 {
   "admin": {
+    "address_select": {
+      "none": "Keine Adresse ausgewählt"
+    },
     "app_name": "Spree Admin",
     "a11y": {
       "breadcrumb": "Breadcrumb",
@@ -97,6 +100,7 @@
     "address_book": {
       "default_billing": "Standard-Rechnung",
       "default_shipping": "Standard-Versand",
+      "inherited_from": "Geerbt von {{name}}",
       "set_default_billing": "Als Standard-Rechnungsadresse festlegen",
       "set_default_shipping": "Als Standard-Versandadresse festlegen"
     },

package/src/locales/en.json

@@ -1,5 +1,8 @@
 {
   "admin": {
+    "address_select": {
+      "none": "No address selected"
+    },
     "app_name": "Spree Admin",
     "a11y": {
       "breadcrumb": "Breadcrumb",
@@ -97,6 +100,7 @@
     "address_book": {
       "default_billing": "Default billing",
       "default_shipping": "Default shipping",
+      "inherited_from": "Inherited from {{name}}",
       "set_default_billing": "Set as default billing",
       "set_default_shipping": "Set as default shipping"
     },

package/src/locales/es.json

@@ -1,5 +1,8 @@
 {
   "admin": {
+    "address_select": {
+      "none": "Ninguna dirección seleccionada"
+    },
     "components": {
       "address_block": {
         "not_provided": "No proporcionado"
@@ -2003,6 +2006,7 @@
     "address_book": {
       "default_billing": "Facturación predeterminada",
       "default_shipping": "Envío predeterminado",
+      "inherited_from": "Heredada de {{name}}",
       "set_default_billing": "Establecer como facturación predeterminada",
       "set_default_shipping": "Establecer como envío predeterminado"
     },

package/src/locales/fr.json

@@ -1,5 +1,8 @@
 {
   "admin": {
+    "address_select": {
+      "none": "Aucune adresse sélectionnée"
+    },
     "app_name": "Spree Admin",
     "a11y": {
       "breadcrumb": "Fil d'Ariane",
@@ -97,6 +100,7 @@
     "address_book": {
       "default_billing": "Facturation par défaut",
       "default_shipping": "Livraison par défaut",
+      "inherited_from": "Héritée de {{name}}",
       "set_default_billing": "Définir comme adresse de facturation par défaut",
       "set_default_shipping": "Définir comme adresse de livraison par défaut"
     },

package/src/locales/pl.json

@@ -1,5 +1,8 @@
 {
   "admin": {
+    "address_select": {
+      "none": "Nie wybrano adresu"
+    },
     "app_name": "Spree Admin",
     "a11y": {
       "breadcrumb": "Ścieżka nawigacji",
@@ -97,6 +100,7 @@
     "address_book": {
       "default_billing": "Domyślny rozliczeniowy",
       "default_shipping": "Domyślny wysyłkowy",
+      "inherited_from": "Dziedziczony z: {{name}}",
       "set_default_billing": "Ustaw jako domyślny adres rozliczeniowy",
       "set_default_shipping": "Ustaw jako domyślny adres wysyłkowy"
     },

package/src/locales/zh-CN.json

@@ -1,5 +1,8 @@
 {
   "admin": {
+    "address_select": {
+      "none": "未选择地址"
+    },
     "app_name": "Spree Admin",
     "a11y": {
       "breadcrumb": "面包屑导航",
@@ -97,6 +100,7 @@
     "address_book": {
       "default_billing": "默认账单",
       "default_shipping": "默认收货",
+      "inherited_from": "继承自 {{name}}",
       "set_default_billing": "设为默认账单地址",
       "set_default_shipping": "设为默认收货地址"
     },

package/src/pages/package-types.tsx

@@ -1,4 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod'
+import { DimensionUnit, WeightUnit } from '@spree/core'
 import {
   Button,
   Field,
@@ -32,6 +33,7 @@ import { z } from 'zod/v4'
 import type { PanelPackageType } from '../api-client'
 import { Can } from '../components/can'
 import { ResourceTable, resourceSearchSchema } from '../components/resource-table'
+import { HostFormSlot } from '../components/slot'
 import {
   canDeletePackageTypes,
   canWritePackageTypes,
@@ -42,13 +44,12 @@ import {
   useUpdatePackageType,
 } from '../hooks/use-package-types'
 import { mapSpreeErrorsToForm } from '../lib/form-errors'
+import { extensionFormValues, extensionSubmitValues } from '../lib/form-fields-registry'
 import { Subject } from '../lib/permissions'
 import { usePermissions } from '../providers/permission-provider'
 import {
-  PACKAGE_DIMENSION_UNITS,
   PACKAGE_TYPE_DEFAULTS,
   PACKAGE_TYPE_KINDS,
-  PACKAGE_WEIGHT_UNITS,
   type PackageTypeFormValues,
   packageTypeFormSchema,
   packageTypeFormValuesToParams,
@@ -89,7 +90,14 @@ export type PackageTypesSearch = z.infer<typeof packageTypesSearchSchema>
  */
 function noop() {}
 
-export function PackageTypesPage({ search }: { search: PackageTypesSearch }) {
+export function PackageTypesPage({
+  search,
+  formKey = 'package_type',
+}: {
+  search: PackageTypesSearch
+  /** Names the sheets' slot and extension fields — `seller.package_type` in the seller panel. */
+  formKey?: string
+}) {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const confirm = useConfirm()
@@ -194,16 +202,27 @@ export function PackageTypesPage({ search }: { search: PackageTypesSearch }) {
         }
       />
 
-      {isCreating && <CreatePackageTypeSheet open onOpenChange={(o) => !o && closeSheet()} />}
-      {editId && <EditPackageTypeSheet id={editId} open onOpenChange={(o) => !o && closeSheet()} />}
+      {isCreating && (
+        <CreatePackageTypeSheet formKey={formKey} open onOpenChange={(o) => !o && closeSheet()} />
+      )}
+      {editId && (
+        <EditPackageTypeSheet
+          id={editId}
+          formKey={formKey}
+          open
+          onOpenChange={(o) => !o && closeSheet()}
+        />
+      )}
     </>
   )
 }
 
 function CreatePackageTypeSheet({
+  formKey,
   open,
   onOpenChange,
 }: {
+  formKey: string
   open: boolean
   onOpenChange: (open: boolean) => void
 }) {
@@ -211,12 +230,15 @@ function CreatePackageTypeSheet({
   const createMutation = useCreatePackageType()
   const form = useForm<PackageTypeFormValues>({
     resolver: zodResolver(packageTypeFormSchema),
-    defaultValues: PACKAGE_TYPE_DEFAULTS,
+    defaultValues: { ...PACKAGE_TYPE_DEFAULTS, ...extensionFormValues(formKey, null) },
   })
 
   async function onSubmit(values: PackageTypeFormValues) {
     try {
-      await createMutation.mutateAsync(packageTypeFormValuesToParams(values))
+      await createMutation.mutateAsync({
+        ...packageTypeFormValuesToParams(values),
+        ...extensionSubmitValues(formKey, form),
+      })
       form.reset(PACKAGE_TYPE_DEFAULTS)
       onOpenChange(false)
     } catch (err) {
@@ -240,6 +262,11 @@ function CreatePackageTypeSheet({
         <form onSubmit={form.handleSubmit(onSubmit)} className="flex min-h-0 flex-1 flex-col">
           <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
             <PackageTypeFormFields form={form} />
+            <HostFormSlot
+              form={form}
+              name={`${formKey}.form_fields`}
+              context={{ packageType: undefined, mode: 'new' }}
+            />
           </div>
           <SheetFooter>
             <Button type="submit" disabled={createMutation.isPending}>
@@ -254,10 +281,12 @@ function CreatePackageTypeSheet({
 
 function EditPackageTypeSheet({
   id,
+  formKey,
   open,
   onOpenChange,
 }: {
   id: string
+  formKey: string
   open: boolean
   onOpenChange: (open: boolean) => void
 }) {
@@ -271,12 +300,17 @@ function EditPackageTypeSheet({
   const form = useForm<PackageTypeFormValues>({
     resolver: zodResolver(packageTypeFormSchema),
     defaultValues: PACKAGE_TYPE_DEFAULTS,
-    values: packageType ? packageTypeToFormValues(packageType) : undefined,
+    values: packageType
+      ? { ...packageTypeToFormValues(packageType), ...extensionFormValues(formKey, packageType) }
+      : undefined,
   })
 
   async function onSubmit(values: PackageTypeFormValues) {
     try {
-      await updateMutation.mutateAsync(packageTypeFormValuesToParams(values))
+      await updateMutation.mutateAsync({
+        ...packageTypeFormValuesToParams(values),
+        ...extensionSubmitValues(formKey, form),
+      })
       onOpenChange(false)
     } catch (err) {
       if (!mapSpreeErrorsToForm(err, form.setError)) throw err
@@ -299,6 +333,11 @@ function EditPackageTypeSheet({
         <form onSubmit={form.handleSubmit(onSubmit)} className="flex min-h-0 flex-1 flex-col">
           <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
             <PackageTypeFormFields form={form} />
+            <HostFormSlot
+              form={form}
+              name={`${formKey}.form_fields`}
+              context={{ packageType, mode: 'edit' }}
+            />
           </div>
           <SheetFooter>
             <Button type="submit" disabled={updateMutation.isPending}>
@@ -376,7 +415,7 @@ function PackageTypeFormFields({ form }: { form: UseFormReturn<PackageTypeFormVa
         <UnitField
           form={form}
           name="dimensions_unit"
-          units={PACKAGE_DIMENSION_UNITS}
+          units={Object.values(DimensionUnit)}
           label={t('admin.fields.package_type.dimensions_unit.label')}
         />
       </div>
@@ -416,7 +455,7 @@ function PackageTypeFormFields({ form }: { form: UseFormReturn<PackageTypeFormVa
         <UnitField
           form={form}
           name="weight_unit"
-          units={PACKAGE_WEIGHT_UNITS}
+          units={Object.values(WeightUnit)}
           label={t('admin.fields.package_type.weight_unit.label')}
         />
       </div>

package/src/pages/settings-index.tsx

@@ -103,7 +103,10 @@ function SettingsCard({ entry, tenantId }: { entry: SettingsNavEntry; tenantId:
       >
         <Icon className="mt-0.5 size-6 shrink-0 text-muted-foreground opacity-80 hover:opacity-100" />
         <span className="flex min-w-0 flex-col gap-1">
-          <span className="text-sm font-medium leading-none">{label}</span>
+          <span className="flex items-center gap-1.5 text-sm font-medium leading-none">
+            {label}
+            {entry.badge && <entry.badge />}
+          </span>
           {description && <span className="text-sm text-muted-foreground">{description}</span>}
         </span>
       </Link>

package/src/pages/stock-locations.tsx

@@ -34,6 +34,7 @@ import { Can } from '../components/can'
 import { CountryCombobox } from '../components/country-combobox'
 import { StateCombobox, useCountryStates } from '../components/country-state-fields'
 import { ResourceTable, resourceSearchSchema } from '../components/resource-table'
+import { HostFormSlot } from '../components/slot'
 import {
   canDeleteStockLocations,
   listStockLocations,
@@ -43,6 +44,7 @@ import {
   useUpdateStockLocation,
 } from '../hooks/use-stock-locations'
 import { mapSpreeErrorsToForm } from '../lib/form-errors'
+import { extensionFormValues, extensionSubmitValues } from '../lib/form-fields-registry'
 import { Subject } from '../lib/permissions'
 import { usePermissions } from '../providers/permission-provider'
 import {
@@ -90,8 +92,11 @@ export function StockLocationsPage({
   search,
   stockLevelsPanel: StockLevelsPanel,
   activityPanel: ActivityPanel,
+  formKey = 'stock_location',
 }: {
   search: StockLocationsSearch
+  /** Names the sheets' slot and extension fields — `seller.stock_location` in the seller panel. */
+  formKey?: string
   /** Rendered inside the edit sheet, below the form. Optional — see above. */
   stockLevelsPanel?: ComponentType<{ stockLocationId: string }>
   /** What changed in this warehouse, for reconciliation. Optional. */
@@ -170,10 +175,13 @@ export function StockLocationsPage({
         }
       />
 
-      {isCreating && <CreateStockLocationSheet open onOpenChange={(o) => !o && closeSheet()} />}
+      {isCreating && (
+        <CreateStockLocationSheet formKey={formKey} open onOpenChange={(o) => !o && closeSheet()} />
+      )}
       {editId && (
         <EditStockLocationSheet
           id={editId}
+          formKey={formKey}
           open
           onOpenChange={(o) => !o && closeSheet()}
           stockLevelsPanel={StockLevelsPanel}
@@ -189,9 +197,11 @@ export function StockLocationsPage({
 // ============================================================================
 
 function CreateStockLocationSheet({
+  formKey,
   open,
   onOpenChange,
 }: {
+  formKey: string
   open: boolean
   onOpenChange: (open: boolean) => void
 }) {
@@ -201,13 +211,13 @@ function CreateStockLocationSheet({
   const form = useForm<StockLocationFormValues>({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     resolver: zodResolver(stockLocationFormSchema) as any,
-    defaultValues: STOCK_LOCATION_DEFAULTS,
+    defaultValues: { ...STOCK_LOCATION_DEFAULTS, ...extensionFormValues(formKey, null) },
   })
 
   async function onSubmit(values: StockLocationFormValues) {
     try {
       const params = formValuesToParams(values)
-      await createMutation.mutateAsync(params)
+      await createMutation.mutateAsync({ ...params, ...extensionSubmitValues(formKey, form) })
       form.reset(STOCK_LOCATION_DEFAULTS)
       onOpenChange(false)
     } catch (err) {
@@ -231,6 +241,11 @@ function CreateStockLocationSheet({
         <form onSubmit={form.handleSubmit(onSubmit)} className="flex min-h-0 flex-1 flex-col">
           <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
             <StockLocationFormFields form={form} />
+            <HostFormSlot
+              form={form}
+              name={`${formKey}.form_fields`}
+              context={{ stockLocation: undefined, mode: 'new' }}
+            />
           </div>
           <SheetFooter>
             <Button
@@ -259,12 +274,14 @@ function CreateStockLocationSheet({
 
 function EditStockLocationSheet({
   id,
+  formKey,
   open,
   onOpenChange,
   stockLevelsPanel: StockLevelsPanel,
   activityPanel: ActivityPanel,
 }: {
   id: string
+  formKey: string
   open: boolean
   onOpenChange: (open: boolean) => void
   stockLevelsPanel?: ComponentType<{ stockLocationId: string }>
@@ -284,14 +301,17 @@ function EditStockLocationSheet({
   // with whatever the server last persisted (including external edits).
   useEffect(() => {
     if (stockLocation) {
-      form.reset(stockLocationToFormValues(stockLocation))
+      form.reset({
+        ...stockLocationToFormValues(stockLocation),
+        ...extensionFormValues(formKey, stockLocation),
+      })
     }
-  }, [stockLocation, form])
+  }, [stockLocation, form, formKey])
 
   async function onSubmit(values: StockLocationFormValues) {
     try {
       const params = formValuesToParams(values)
-      await updateMutation.mutateAsync(params)
+      await updateMutation.mutateAsync({ ...params, ...extensionSubmitValues(formKey, form) })
       form.reset(values)
       onOpenChange(false)
     } catch (err) {
@@ -314,6 +334,11 @@ function EditStockLocationSheet({
           <form onSubmit={form.handleSubmit(onSubmit)} className="flex min-h-0 flex-1 flex-col">
             <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-4">
               <StockLocationFormFields form={form} />
+              <HostFormSlot
+                form={form}
+                name={`${formKey}.form_fields`}
+                context={{ stockLocation, mode: 'edit' }}
+              />
               {StockLevelsPanel && <StockLevelsPanel stockLocationId={id} />}
               {ActivityPanel && <ActivityPanel stockLocationId={id} />}
             </div>