@open-mercato/core 0.4.9-develop-ce96cffe00 → 0.4.9-develop-5d884303ad

package/src/modules/shipping_carriers/lib/shipment-wizard/components/ConfirmStep.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { Card, CardContent, CardHeader, CardTitle } from '@open-mercato/ui/primitives/card'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Package, CheckCircle2 } from 'lucide-react'
+import type { Address, PackageDimension, ShippingRate, LabelFormat, ContactInfo } from '../types'
+
+export type ConfirmStepProps = {
+  rates: ShippingRate[]
+  ratesError: string | null
+  selectedRate: ShippingRate | null
+  selectedProvider: string
+  origin: Address
+  destination: Address
+  packages: PackageDimension[]
+  labelFormat: LabelFormat
+  senderContact: ContactInfo
+  receiverContact: ContactInfo
+  targetPoint: string
+  c2cSendingMethod: string
+  isSubmitting: boolean
+  onRateSelect: (rate: ShippingRate) => void
+  onBack: () => void
+  onSubmit: () => void
+}
+
+const formatAddress = (addr: Address) =>
+  [addr.line1, addr.city, addr.postalCode, addr.countryCode].filter(Boolean).join(', ')
+
+export const ConfirmStep = (props: ConfirmStepProps) => {
+  const {
+    rates, ratesError, selectedRate, selectedProvider,
+    origin, destination, packages, labelFormat,
+    senderContact, receiverContact, targetPoint, c2cSendingMethod,
+    isSubmitting, onRateSelect, onBack, onSubmit,
+  } = props
+  const t = useT()
+
+  return (
+    <section className="space-y-6">
+      {ratesError ? (
+        <div className="space-y-3">
+          <ErrorMessage label={ratesError} />
+          <Button type="button" variant="outline" size="sm" onClick={onBack}>
+            {t('shipping_carriers.create.action.editConfiguration', 'Edit configuration')}
+          </Button>
+        </div>
+      ) : null}
+
+      {rates.length === 0 && !ratesError ? (
+        <Card>
+          <CardContent className="py-8 text-center text-sm text-muted-foreground">
+            {t('shipping_carriers.create.noRates', 'No rates available for this route and package configuration.')}
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              {t('shipping_carriers.create.section.selectRate', 'Select service')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {rates.map((rate) => {
+                const isSelected = selectedRate?.serviceCode === rate.serviceCode
+                return (
+                  <button
+                    key={rate.serviceCode}
+                    type="button"
+                    className={`flex w-full cursor-pointer items-center justify-between rounded-lg border p-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
+                      isSelected ? 'border-primary bg-primary/5' : 'hover:bg-muted/50'
+                    }`}
+                    onClick={() => onRateSelect(rate)}
+                  >
+                    <div className="flex items-center gap-3">
+                      <Package className="h-4 w-4 shrink-0 text-muted-foreground" />
+                      <div>
+                        <p className="font-medium">{rate.serviceName}</p>
+                        <p className="text-xs text-muted-foreground">{rate.serviceCode}</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      {rate.estimatedDays !== undefined ? (
+                        <span className="text-xs text-muted-foreground">
+                          {t('shipping_carriers.create.estimatedDays', '{days} day(s)', { days: rate.estimatedDays })}
+                        </span>
+                      ) : null}
+                      <Badge variant="secondary">
+                        {rate.amount.toFixed(2)} {rate.currencyCode}
+                      </Badge>
+                      {isSelected ? <CheckCircle2 className="h-4 w-4 text-primary" /> : null}
+                    </div>
+                  </button>
+                )
+              })}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t('shipping_carriers.create.section.summary', 'Summary')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <dl className="grid gap-2 text-sm sm:grid-cols-2">
+            <div>
+              <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                {t('shipping_carriers.create.summary.carrier', 'Carrier')}
+              </dt>
+              <dd className="mt-0.5 capitalize">{selectedProvider.replace(/_/g, ' ')}</dd>
+            </div>
+            {selectedRate ? (
+              <div>
+                <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {t('shipping_carriers.create.summary.service', 'Service')}
+                </dt>
+                <dd className="mt-0.5">{selectedRate.serviceName}</dd>
+              </div>
+            ) : null}
+            <div>
+              <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                {t('shipping_carriers.create.summary.from', 'From')}
+              </dt>
+              <dd className="mt-0.5">{formatAddress(origin)}</dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                {t('shipping_carriers.create.summary.to', 'To')}
+              </dt>
+              <dd className="mt-0.5">{formatAddress(destination)}</dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                {t('shipping_carriers.create.summary.packages', 'Packages')}
+              </dt>
+              <dd className="mt-0.5">{packages.length}</dd>
+            </div>
+            <div>
+              <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                {t('shipping_carriers.create.summary.labelFormat', 'Label format')}
+              </dt>
+              <dd className="mt-0.5 uppercase">{labelFormat}</dd>
+            </div>
+            {(senderContact.phone || senderContact.email) ? (
+              <div>
+                <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {t('shipping_carriers.create.summary.senderContact', 'Sender contact')}
+                </dt>
+                <dd className="mt-0.5">
+                  {[senderContact.phone, senderContact.email].filter(Boolean).join(' / ')}
+                </dd>
+              </div>
+            ) : null}
+            {(receiverContact.phone || receiverContact.email) ? (
+              <div>
+                <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {t('shipping_carriers.create.summary.receiverContact', 'Receiver contact')}
+                </dt>
+                <dd className="mt-0.5">
+                  {[receiverContact.phone, receiverContact.email].filter(Boolean).join(' / ')}
+                </dd>
+              </div>
+            ) : null}
+            {targetPoint ? (
+              <div>
+                <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {t('shipping_carriers.create.summary.targetPoint', 'Locker point')}
+                </dt>
+                <dd className="mt-0.5">{targetPoint}</dd>
+              </div>
+            ) : null}
+            {c2cSendingMethod ? (
+              <div>
+                <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {t('shipping_carriers.create.summary.c2cSendingMethod', 'C2C sending method')}
+                </dt>
+                <dd className="mt-0.5">{c2cSendingMethod}</dd>
+              </div>
+            ) : null}
+          </dl>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-between gap-3">
+        <Button type="button" variant="outline" onClick={onBack} disabled={isSubmitting}>
+          {t('shipping_carriers.create.back', 'Back')}
+        </Button>
+        <Button
+          type="button"
+          onClick={onSubmit}
+          disabled={!selectedRate || isSubmitting}
+        >
+          {isSubmitting ? (
+            <>
+              <Spinner className="mr-2 h-4 w-4" />
+              {t('shipping_carriers.create.submitting', 'Creating shipment...')}
+            </>
+          ) : (
+            t('shipping_carriers.create.submit', 'Create shipment')
+          )}
+        </Button>
+      </div>
+    </section>
+  )
+}

package/src/modules/shipping_carriers/lib/shipment-wizard/components/PackageEditor.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { PackageDimension, PackageEditorProps } from '../types'
+
+const PACKAGE_FIELDS = ['weightKg', 'lengthCm', 'widthCm', 'heightCm'] as const
+
+const DEFAULT_PACKAGE: PackageDimension = { weightKg: 1, lengthCm: 20, widthCm: 15, heightCm: 10 }
+
+export const PackageEditor = (props: PackageEditorProps) => {
+  const { packages, onChange, disabled } = props
+  const t = useT()
+
+  const fieldLabel = (field: keyof PackageDimension) => {
+    const labels: Record<keyof PackageDimension, string> = {
+      weightKg: t('shipping_carriers.create.package.weightKg', 'Weight (kg)'),
+      lengthCm: t('shipping_carriers.create.package.lengthCm', 'Length (cm)'),
+      widthCm: t('shipping_carriers.create.package.widthCm', 'Width (cm)'),
+      heightCm: t('shipping_carriers.create.package.heightCm', 'Height (cm)'),
+    }
+    return labels[field]
+  }
+
+  const updatePackage = (index: number, field: keyof PackageDimension, raw: string) => {
+    const value = parseFloat(raw)
+    onChange(packages.map((pkg, idx) =>
+      idx === index ? { ...pkg, [field]: Number.isNaN(value) ? 0 : value } : pkg,
+    ))
+  }
+
+  const addPackage = () => onChange([...packages, DEFAULT_PACKAGE])
+
+  const removePackage = (index: number) => onChange(packages.filter((_, idx) => idx !== index))
+
+  return (
+    <div className="space-y-3">
+      {packages.map((pkg, index) => (
+        <div key={index} className="rounded-lg border bg-muted/20 p-3">
+          <div className="mb-2 flex items-center justify-between">
+            <span className="text-xs font-medium text-muted-foreground">
+              {t('shipping_carriers.create.package.label', 'Package')} {index + 1}
+            </span>
+            {packages.length > 1 ? (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-auto px-2 py-0.5 text-xs text-red-600 hover:text-red-700"
+                onClick={() => removePackage(index)}
+                disabled={disabled}
+              >
+                {t('shipping_carriers.create.package.remove', 'Remove')}
+              </Button>
+            ) : null}
+          </div>
+          <div className="grid gap-3 sm:grid-cols-4">
+            {PACKAGE_FIELDS.map((field) => (
+              <div key={field}>
+                <label className="mb-1 block text-xs font-medium text-muted-foreground">
+                  {fieldLabel(field)}
+                </label>
+                <Input
+                  type="number"
+                  min="0.01"
+                  step="0.01"
+                  value={pkg[field]}
+                  onChange={(event) => updatePackage(index, field, event.target.value)}
+                  disabled={disabled}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+      <Button type="button" variant="outline" size="sm" onClick={addPackage} disabled={disabled}>
+        {t('shipping_carriers.create.package.add', '+ Add package')}
+      </Button>
+    </div>
+  )
+}

package/src/modules/shipping_carriers/lib/shipment-wizard/components/ProviderStep.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { match, P } from 'ts-pattern'
+import { Card, CardContent } from '@open-mercato/ui/primitives/card'
+import { ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Truck } from 'lucide-react'
+import type { Provider } from '../types'
+
+export type ProviderStepProps = {
+  isLoading: boolean
+  error: string | null
+  providers: Provider[]
+  onSelect: (providerKey: string) => void
+}
+
+export const ProviderStep = (props: ProviderStepProps) => {
+  const { providers, onSelect } = props
+  const t = useT()
+
+  return match(props)
+    .with({ isLoading: true }, () => (
+      <div className="flex justify-center py-8"><Spinner /></div>
+    ))
+    .with({ error: P.string }, ({ error }) => (
+      <ErrorMessage label={error} />
+    ))
+    .with({ providers: [] }, () => (
+      <Card>
+        <CardContent className="py-8 text-center text-sm text-muted-foreground">
+          {t('shipping_carriers.create.noProviders', 'No shipping providers are configured. Enable a carrier integration first.')}
+        </CardContent>
+      </Card>
+    ))
+    .otherwise(() => (
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        {providers.map((provider) => (
+          <button
+            key={provider.providerKey}
+            type="button"
+            className="flex cursor-pointer items-center gap-3 rounded-lg border bg-card p-4 text-left transition-colors hover:border-primary hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={() => onSelect(provider.providerKey)}
+          >
+            <Truck className="h-6 w-6 shrink-0 text-muted-foreground" />
+            <div>
+              <p className="font-medium capitalize">{provider.providerKey.replace(/_/g, ' ')}</p>
+              <p className="text-xs text-muted-foreground">{provider.providerKey}</p>
+            </div>
+          </button>
+        ))}
+      </div>
+    ))
+}

package/src/modules/shipping_carriers/lib/shipment-wizard/components/WizardNav.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from 'react'
+import { match } from 'ts-pattern'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { WizardStep } from '../types'
+
+const STEP_ORDER: WizardStep[] = ['provider', 'configure', 'confirm']
+
+export type WizardNavProps = {
+  step: WizardStep
+  onNavigate: (step: WizardStep) => void
+}
+
+export const WizardNav = (props: WizardNavProps) => {
+  const { step, onNavigate } = props
+  const t = useT()
+  const stepIndex = STEP_ORDER.indexOf(step)
+
+  const stepLabels: Record<WizardStep, string> = {
+    provider: t('shipping_carriers.create.step.provider', 'Select carrier'),
+    configure: t('shipping_carriers.create.step.configure', 'Configure shipment'),
+    confirm: t('shipping_carriers.create.step.confirm', 'Select service & confirm'),
+  }
+
+  return (
+    <nav className="flex items-center gap-2 text-sm text-muted-foreground">
+      {STEP_ORDER.map((stepId, index) => (
+        <React.Fragment key={stepId}>
+          {index > 0 ? <span aria-hidden>›</span> : null}
+          <span
+            className={match({ isCurrent: stepId === step, isPast: index < stepIndex })
+              .with({ isCurrent: true }, () => 'font-medium text-foreground')
+              .with({ isPast: true }, () => 'cursor-pointer hover:text-foreground')
+              .otherwise(() => '')}
+            onClick={() => {
+              if (index < stepIndex) onNavigate(stepId)
+            }}
+          >
+            {index + 1}. {stepLabels[stepId]}
+          </span>
+        </React.Fragment>
+      ))}
+    </nav>
+  )
+}

package/src/modules/shipping_carriers/lib/shipment-wizard/hooks/shipmentApi.ts

@@ -0,0 +1,153 @@
+import { match, P } from 'ts-pattern'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import type { Provider, Address, PackageDimension, ShippingRate, DocumentAddress, DropOffPoint } from '../types'
+
+export type FetchProvidersResult =
+  | { ok: true; providers: Provider[] }
+  | { ok: false; error: string }
+
+export type FetchOrderAddressesResult =
+  | { ok: true; items: DocumentAddress[] }
+  | { ok: false }
+
+export type FetchRatesParams = {
+  providerKey: string
+  origin: Address
+  destination: Address
+  packages: PackageDimension[]
+  receiverPhone?: string
+  receiverEmail?: string
+}
+
+export type FetchRatesResult =
+  | { ok: true; rates: ShippingRate[] }
+  | { ok: false; error: string }
+
+export type CreateShipmentParams = {
+  providerKey: string
+  orderId: string
+  origin: Address
+  destination: Address
+  packages: PackageDimension[]
+  serviceCode: string
+  labelFormat: string
+  senderPhone?: string
+  senderEmail?: string
+  receiverPhone?: string
+  receiverEmail?: string
+  targetPoint?: string
+  c2cSendingMethod?: string
+}
+
+export type CreateShipmentResult =
+  | { ok: true }
+  | { ok: false; error: string }
+
+export type FetchDropOffPointsParams = {
+  providerKey: string
+  query?: string
+  type?: string
+  postCode?: string
+}
+
+export type FetchDropOffPointsResult =
+  | { ok: true; points: DropOffPoint[] }
+  | { ok: false; error: string }
+
+export const fetchProviders = async (): Promise<FetchProvidersResult> => {
+  const call = await apiCall<{ providers: Provider[] }>(
+    '/api/shipping-carriers/providers',
+    undefined,
+    { fallback: { providers: [] } },
+  )
+  return match(call)
+    .with({ ok: true, result: P.not(P.nullish) }, ({ result }) => ({
+      ok: true as const,
+      providers: result.providers,
+    }))
+    .otherwise(() => ({ ok: false as const, error: 'Failed to load shipping providers.' }))
+}
+
+export const fetchOrderAddresses = async (orderId: string): Promise<FetchOrderAddressesResult> => {
+  const call = await apiCall<{ items: DocumentAddress[] }>(
+    `/api/sales/document-addresses?documentId=${orderId}&documentKind=order&pageSize=50`,
+    undefined,
+    { fallback: { items: [] } },
+  )
+  return match(call)
+    .with({ ok: true, result: P.not(P.nullish) }, ({ result }) => ({
+      ok: true as const,
+      items: result.items,
+    }))
+    .otherwise(() => ({ ok: false as const }))
+}
+
+export const fetchRates = async (params: FetchRatesParams): Promise<FetchRatesResult> => {
+  const { providerKey, origin, destination, packages, receiverPhone, receiverEmail } = params
+  const call = await apiCall<{ rates: ShippingRate[] }>(
+    '/api/shipping-carriers/rates',
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        providerKey,
+        origin,
+        destination,
+        packages,
+        ...(receiverPhone !== undefined ? { receiverPhone } : {}),
+        ...(receiverEmail !== undefined ? { receiverEmail } : {}),
+      }),
+    },
+    { fallback: { rates: [] } },
+  )
+  return match(call)
+    .with({ ok: true, result: P.not(P.nullish) }, ({ result }) => ({
+      ok: true as const,
+      rates: result.rates,
+    }))
+    .otherwise(({ result }) => ({
+      ok: false as const,
+      error: (result as { error?: string } | null)?.error ?? 'Failed to fetch shipping rates.',
+    }))
+}
+
+export const createShipment = async (params: CreateShipmentParams): Promise<CreateShipmentResult> => {
+  const call = await apiCall(
+    '/api/shipping-carriers/shipments',
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    },
+    { fallback: null },
+  )
+  return match(call)
+    .with({ ok: true }, () => ({ ok: true as const }))
+    .otherwise(({ result }) => ({
+      ok: false as const,
+      error: (result as { error?: string } | null)?.error ?? 'Failed to create shipment.',
+    }))
+}
+
+export const fetchDropOffPoints = async (params: FetchDropOffPointsParams): Promise<FetchDropOffPointsResult> => {
+  const url = new URL('/api/shipping-carriers/points', 'http://placeholder')
+  url.searchParams.set('providerKey', params.providerKey)
+  if (params.query) url.searchParams.set('query', params.query)
+  if (params.type) url.searchParams.set('type', params.type)
+  if (params.postCode) url.searchParams.set('postCode', params.postCode)
+
+  const call = await apiCall<{ points: DropOffPoint[] }>(
+    `${url.pathname}${url.search}`,
+    undefined,
+    { fallback: { points: [] } },
+  )
+  return match(call)
+    .with({ ok: true, result: P.not(P.nullish) }, ({ result }) => ({
+      ok: true as const,
+      points: result.points,
+    }))
+    .otherwise(({ result }) => ({
+      ok: false as const,
+      error: (result as { error?: string } | null)?.error ?? 'Failed to fetch drop-off points.',
+    }))
+}