@faststore/core 4.8.1-dev.0 → 4.8.1-dev.1

package/src/components/account/orders/OrderDetails/StatusCard/StatusCard.tsx

@@ -1,21 +1,24 @@
 import { Icon as UIIcon, Skeleton as UISkeleton } from '@faststore/ui'
+import { useRouter } from 'next/router'
 import { useRef, type ReactNode } from 'react'
 import Card from 'src/components/account/components/Card'
-import { orderStatusMap, type OrderStatusKey } from 'src/utils/userOrderStatus'
+import {
+  orderStatusMap,
+  type OrderStatusCmsLabels,
+  type OrderStatusKey,
+} from 'src/utils/userOrderStatus'
 import { useConnectorPositioning } from './useConnectorPositioning'
 import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
 import {
   type OrderStatusSectionLabels,
   resolveOrderStatusLabels,
 } from '../orderDetailsLabels'
-
-export type StepStatus = 'completed' | 'loading' | 'not-started' | 'failed'
-export type StepKey =
-  | 'order'
-  | 'approval'
-  | 'payment'
-  | 'processing'
-  | 'shipping'
+import {
+  formatDate,
+  getDisplayStepLabel,
+  type StepKey,
+  type StepStatus,
+} from './statusCardLocalization'
 
 interface Step {
   label: ReactNode
@@ -27,63 +30,24 @@ interface StatusCardProps {
   status: OrderStatusKey
   creationDate: ServerOrderDetailsQueryQuery['userOrder']['creationDate']
   labels?: OrderStatusSectionLabels
-}
-
-// Define custom labels for each step based on their status
-// This allows us to show different text for the same step depending on its current state
-const STEP_LABELS: Record<StepKey, Record<StepStatus, string>> = {
-  order: {
-    completed: 'Order Placed',
-    loading: 'Order Placed',
-    'not-started': 'Order Placed',
-    failed: 'Order Placed',
-  },
-  approval: {
-    completed: 'Approved', // Custom
-    loading: 'Pending approval', // Use from orderStatusMap
-    'not-started': 'Pending approval',
-    failed: 'Denied', // Custom
-  },
-  payment: {
-    completed: 'Payment Approved', // Use from orderStatusMap
-    loading: 'Payment Pending', // Use from orderStatusMap
-    'not-started': 'Payment authorization', // Custom
-    failed: 'Payment Denied', // Use from orderStatusMap
-  },
-  processing: {
-    completed: 'Ready for Delivery', // Use from orderStatusMap
-    loading: 'Handling order', // Custom
-    'not-started': 'Handling order', // Custom
-    failed: 'Canceled', // Use from orderStatusMap
-  },
-  shipping: {
-    completed: 'Invoiced', // Use from orderStatusMap
-    loading: 'Shipping order', // Custom
-    'not-started': 'Ship order', // Custom
-    failed: 'Canceled', // Use from orderStatusMap
-  },
+  statusLabels?: OrderStatusCmsLabels
 }
 
 // Define the visual progression of order steps from start to finish
 const VISUAL_STEPS = [
   {
-    label: (stepStatus: StepStatus) => STEP_LABELS.order[stepStatus],
     key: 'order',
   },
   {
-    label: (stepStatus: StepStatus) => STEP_LABELS.approval[stepStatus],
     key: 'approval',
   },
   {
-    label: (stepStatus: StepStatus) => STEP_LABELS.payment[stepStatus],
     key: 'payment',
   },
   {
-    label: (stepStatus: StepStatus) => STEP_LABELS.processing[stepStatus],
     key: 'processing',
   },
   {
-    label: (stepStatus: StepStatus) => STEP_LABELS.shipping[stepStatus],
     key: 'shipping',
   },
 ] as const
@@ -105,24 +69,6 @@ const CANCELED_LABELS = ['Cancellation Requested', 'Canceled']
 // Define which order status labels indicate a failed state
 const FAILED_LABELS = ['Payment Denied']
 
-const formatDate = (date: string) => {
-  const dateObj = new Date(date)
-
-  const dateString = new Intl.DateTimeFormat('en-US', {
-    month: '2-digit',
-    day: '2-digit',
-    year: 'numeric',
-  }).format(dateObj)
-
-  const timeString = new Intl.DateTimeFormat('en-US', {
-    hour: 'numeric',
-    minute: '2-digit',
-    hour12: true,
-  }).format(dateObj)
-
-  return { date: dateString, time: timeString }
-}
-
 const StepIcon = ({
   status,
   isCanceled,
@@ -221,8 +167,10 @@ function StatusCard({
   status,
   creationDate,
   labels: labelsProp,
-}: StatusCardProps) {
+  statusLabels,
+}: Readonly<StatusCardProps>) {
   const labels = resolveOrderStatusLabels(labelsProp)
+  const { locale = 'en-US' } = useRouter()
   const containerRef = useRef<HTMLDivElement>(null)
 
   useConnectorPositioning(containerRef)
@@ -244,25 +192,14 @@ function StatusCard({
       isFailed,
     })
 
-    let stepLabel = isCanceled
-      ? step.key === 'payment'
-        ? currentStatusLabel
-        : '—' // prevent hydration mismatch
-      : step.label(stepStatus)
-
-    if (!isCanceled) {
-      if (step.key === 'order') {
-        stepLabel = labels.orderPlacedStep
-      } else if (step.key === 'payment' && stepStatus === 'loading') {
-        stepLabel = labels.paymentPendingStep
-      } else if (step.key === 'processing' && stepStatus === 'loading') {
-        stepLabel = labels.handlingStep
-      } else if (step.key === 'shipping' && stepStatus === 'completed') {
-        stepLabel = labels.invoicedStep
-      } else if (step.key === 'shipping' && stepStatus === 'loading') {
-        stepLabel = labels.deliveredStep
-      }
-    }
+    const stepLabel = getDisplayStepLabel({
+      stepKey: step.key,
+      stepStatus,
+      labels,
+      status,
+      statusLabels,
+      isCanceled,
+    })
 
     // Add creation date to the order step when it's completed or failed
     let completedAt: string | undefined
@@ -304,10 +241,10 @@ function StatusCard({
               {step.completedAt && (
                 <div data-fs-shipping-step-details>
                   <span data-fs-shipping-step-date>
-                    {formatDate(step.completedAt).date}
+                    {formatDate(step.completedAt, locale).date}
                   </span>
                   <span data-fs-shipping-step-time>
-                    {formatDate(step.completedAt).time}
+                    {formatDate(step.completedAt, locale).time}
                   </span>
                 </div>
               )}

package/src/components/account/orders/OrderDetails/StatusCard/statusCardLocalization.ts

@@ -0,0 +1,114 @@
+import {
+  getOrderStatusLabel,
+  type OrderStatusCmsLabels,
+  type OrderStatusKey,
+} from 'src/utils/userOrderStatus'
+import type { OrderStatusSectionLabels } from '../orderDetailsLabels'
+
+export type StepStatus = 'completed' | 'loading' | 'not-started' | 'failed'
+export type StepKey =
+  | 'order'
+  | 'approval'
+  | 'payment'
+  | 'processing'
+  | 'shipping'
+
+export function getStepLabel(
+  stepKey: StepKey,
+  stepStatus: StepStatus,
+  labels: Required<OrderStatusSectionLabels>
+): string {
+  const stepLabels: Record<StepKey, Record<StepStatus, string>> = {
+    order: {
+      completed: labels.orderPlacedStep,
+      loading: labels.orderPlacedStep,
+      'not-started': labels.orderPlacedStep,
+      failed: labels.orderPlacedStep,
+    },
+    approval: {
+      completed: labels.approvedStep,
+      loading: labels.pendingApprovalStep,
+      'not-started': labels.pendingApprovalStep,
+      failed: labels.deniedStep,
+    },
+    payment: {
+      completed: labels.paymentApprovedStep,
+      loading: labels.paymentPendingStep,
+      'not-started': labels.paymentAuthorizationStep,
+      failed: labels.paymentDeniedStep,
+    },
+    processing: {
+      completed: labels.readyForDeliveryStep,
+      loading: labels.handlingStep,
+      'not-started': labels.handlingStep,
+      failed: labels.canceledStep,
+    },
+    shipping: {
+      completed: labels.invoicedStep,
+      loading: labels.deliveredStep,
+      'not-started': labels.shipOrderStep,
+      failed: labels.canceledStep,
+    },
+  }
+
+  return stepLabels[stepKey][stepStatus]
+}
+
+export function getDisplayStepLabel({
+  stepKey,
+  stepStatus,
+  labels,
+  status,
+  statusLabels,
+  isCanceled,
+}: {
+  stepKey: StepKey
+  stepStatus: StepStatus
+  labels: Required<OrderStatusSectionLabels>
+  status: OrderStatusKey
+  statusLabels?: OrderStatusCmsLabels
+  isCanceled: boolean
+}): string {
+  if (isCanceled) {
+    return stepKey === 'payment'
+      ? getOrderStatusLabel({ status, cmsLabels: statusLabels })
+      : '—'
+  }
+
+  if (
+    stepStatus === 'failed' &&
+    (stepKey === 'processing' || stepKey === 'shipping')
+  ) {
+    return getOrderStatusLabel({
+      status: 'canceled',
+      cmsLabels: statusLabels,
+      statusFallback: labels.canceledStep,
+    })
+  }
+
+  if (stepStatus === 'failed' && stepKey === 'payment') {
+    return getOrderStatusLabel({
+      status,
+      cmsLabels: statusLabels,
+      statusFallback: labels.paymentDeniedStep,
+    })
+  }
+
+  return getStepLabel(stepKey, stepStatus, labels)
+}
+
+export function formatDate(date: string, locale: string) {
+  const dateObj = new Date(date)
+
+  return {
+    date: new Intl.DateTimeFormat(locale, {
+      month: '2-digit',
+      day: '2-digit',
+      year: 'numeric',
+    }).format(dateObj),
+    time: new Intl.DateTimeFormat(locale, {
+      hour: 'numeric',
+      minute: '2-digit',
+    }).format(dateObj),
+  }
+}

package/src/components/account/orders/OrderDetails/SummaryCard/SummaryCard.tsx

@@ -4,6 +4,7 @@ import {
   type OrderSummarySectionLabels,
   resolveOrderSummaryLabels,
 } from '../orderDetailsLabels'
+import { getOrderTotalLabel } from './getOrderTotalLabel'
 
 // Interface for order totals (items, shipping, discounts)
 // TODO: Use type from API
@@ -83,7 +84,7 @@ function SummaryCard({
     <Card title={labels.summaryTitle} data-fs-order-summary-card>
       {displayTotals.map((total) => (
         <div key={total.id} data-fs-order-summary-item>
-          <span>{total.name}</span>
+          <span>{getOrderTotalLabel(total, labels)}</span>
           <span>{formatPrice(total.value, currencyCode)}</span>
         </div>
       ))}

package/src/components/account/orders/OrderDetails/SummaryCard/getOrderTotalLabel.ts

@@ -0,0 +1,19 @@
+import type { OrderSummarySectionLabels } from '../orderDetailsLabels'
+
+const TOTAL_LABEL_KEYS = {
+  items: 'itemsTotalLabel',
+  discounts: 'discountsTotalLabel',
+  shipping: 'shippingTotalLabel',
+  tax: 'taxTotalLabel',
+  change: 'changeTotalLabel',
+  interest: 'interestLabel',
+} as const satisfies Record<string, keyof OrderSummarySectionLabels>
+
+export function getOrderTotalLabel(
+  total: { id: string; name: string },
+  labels: Required<OrderSummarySectionLabels>
+): string {
+  const labelKey = TOTAL_LABEL_KEYS[total.id.toLowerCase()]
+
+  return labelKey ? labels[labelKey] : total.name
+}

package/src/components/account/orders/OrderDetails/getDeliveryOptionLabel.ts

@@ -0,0 +1,135 @@
+import type { OrderDeliverySectionLabels } from './orderDetailsLabels'
+
+type DeliveryOptionLabelData = {
+  selectedSla?: string | null
+  deliveryChannel?: string | null
+  deliveryCompany?: string | null
+  seller?: string | null
+  shippingEstimate?: string | null
+  shippingEstimateDate?: string | null
+  friendlyDeliveryOptionName?: string | null
+  address?: {
+    neighborhood?: string | null
+    addressId?: string | null
+  } | null
+  pickupStoreInfo?: {
+    address?: { neighborhood?: string | null } | null
+  } | null
+  deliveryWindow?: {
+    startDateUtc?: string | null
+    endDateUtc?: string | null
+  } | null
+}
+
+type EstimateUnit = 'bd' | 'd' | 'h' | 'm'
+type EstimateQuantity = 'zero' | 'one' | 'other'
+
+const ESTIMATE_LABEL_KEYS: Record<
+  EstimateUnit,
+  Record<EstimateQuantity, keyof OrderDeliverySectionLabels>
+> = {
+  bd: {
+    zero: 'businessDaysZeroTemplate',
+    one: 'businessDaysOneTemplate',
+    other: 'businessDaysOtherTemplate',
+  },
+  d: {
+    zero: 'daysZeroTemplate',
+    one: 'daysOneTemplate',
+    other: 'daysOtherTemplate',
+  },
+  h: {
+    zero: 'hoursZeroTemplate',
+    one: 'hoursOneTemplate',
+    other: 'hoursOtherTemplate',
+  },
+  m: {
+    zero: 'minutesZeroTemplate',
+    one: 'minutesOneTemplate',
+    other: 'minutesOtherTemplate',
+  },
+}
+
+const CHANNEL_LABEL_KEYS: Record<
+  string,
+  keyof OrderDeliverySectionLabels | undefined
+> = {
+  delivery: 'deliveryChannelLabel',
+  pickup: 'pickupChannelLabel',
+  'pickup-in-point': 'pickupChannelLabel',
+  'take-away': 'takeAwayChannelLabel',
+  '': undefined,
+}
+
+function isEstimateUnit(unit: string): unit is EstimateUnit {
+  return unit === 'bd' || unit === 'd' || unit === 'h' || unit === 'm'
+}
+
+function getLocalizedEstimate(
+  estimate: string,
+  labels: Required<OrderDeliverySectionLabels>
+): string | undefined {
+  const count = estimate.split(/\D+/)[0]
+  const unit = estimate.split(/\d+/)[1]
+
+  if (count === '' || Number.isNaN(Number(count)) || !isEstimateUnit(unit)) {
+    return undefined
+  }
+
+  let quantity: EstimateQuantity = 'other'
+  if (Number(count) === 0) {
+    quantity = 'zero'
+  } else if (Number(count) < 2) {
+    quantity = 'one'
+  }
+
+  const template = labels[ESTIMATE_LABEL_KEYS[unit][quantity]]
+
+  return template.replace('{count}', count)
+}
+
+export function getDeliveryOptionKey(option: DeliveryOptionLabelData): string {
+  return [
+    option.selectedSla,
+    option.deliveryChannel,
+    option.deliveryCompany,
+    option.seller,
+    option.shippingEstimate,
+    option.shippingEstimateDate,
+    option.address?.addressId,
+    option.deliveryWindow?.startDateUtc,
+    option.deliveryWindow?.endDateUtc,
+  ].join('|')
+}
+
+export function getDeliveryOptionLabel(
+  option: DeliveryOptionLabelData,
+  labels: Required<OrderDeliverySectionLabels>
+): string {
+  const channelLabelKey =
+    CHANNEL_LABEL_KEYS[option.deliveryChannel ?? 'unknown']
+  const estimate = option.shippingEstimate
+    ? getLocalizedEstimate(option.shippingEstimate, labels)
+    : undefined
+
+  if (channelLabelKey === undefined && option.deliveryChannel) {
+    return option.friendlyDeliveryOptionName ?? ''
+  }
+
+  if (!estimate) {
+    return channelLabelKey
+      ? labels[channelLabelKey]
+      : (option.friendlyDeliveryOptionName ?? '')
+  }
+
+  const neighborhood =
+    option.address?.neighborhood ??
+    option.pickupStoreInfo?.address?.neighborhood
+  const destination = neighborhood
+    ? labels.toNeighborhoodTemplate.replace('{neighborhood}', neighborhood)
+    : ''
+
+  return [channelLabelKey ? labels[channelLabelKey] : '', estimate, destination]
+    .filter(Boolean)
+    .join(' ')
+}

package/src/components/account/orders/OrderDetails/orderDetailsLabels.ts

@@ -13,15 +13,31 @@ export type OrderDetailsHeaderLabels = {
   /** Supports the `{policy}` placeholder, replaced with the policy name. */
   rejectModalMessage?: string
   rejectModalConfirmText?: string
+  /** Supports the `{policy}` placeholder, replaced with the policy name. */
+  approveSuccessToast?: string
+  approveErrorToast?: string
+  /** Supports the `{policy}` placeholder, replaced with the policy name. */
+  rejectSuccessToast?: string
+  rejectErrorToast?: string
+  pendingFurtherApprovalsAlert?: string
 }
 
 export type OrderStatusSectionLabels = {
   statusTitle?: string
   orderPlacedStep?: string
+  approvedStep?: string
+  pendingApprovalStep?: string
+  deniedStep?: string
+  paymentApprovedStep?: string
   paymentPendingStep?: string
+  paymentAuthorizationStep?: string
+  paymentDeniedStep?: string
+  readyForDeliveryStep?: string
   handlingStep?: string
+  canceledStep?: string
   invoicedStep?: string
   deliveredStep?: string
+  shipOrderStep?: string
 }
 
 export type OrderPaymentSectionLabels = {
@@ -50,12 +66,33 @@ export type OrderDeliverySectionLabels = {
   eachLabel?: string
   taxesLabel?: string
   totalLabel?: string
+  deliveryChannelLabel?: string
+  pickupChannelLabel?: string
+  takeAwayChannelLabel?: string
+  businessDaysZeroTemplate?: string
+  businessDaysOneTemplate?: string
+  businessDaysOtherTemplate?: string
+  daysZeroTemplate?: string
+  daysOneTemplate?: string
+  daysOtherTemplate?: string
+  hoursZeroTemplate?: string
+  hoursOneTemplate?: string
+  hoursOtherTemplate?: string
+  minutesZeroTemplate?: string
+  minutesOneTemplate?: string
+  minutesOtherTemplate?: string
+  toNeighborhoodTemplate?: string
 }
 
 export type OrderSummarySectionLabels = {
   summaryTitle?: string
   totalLabel?: string
   interestLabel?: string
+  itemsTotalLabel?: string
+  discountsTotalLabel?: string
+  shippingTotalLabel?: string
+  taxTotalLabel?: string
+  changeTotalLabel?: string
 }
 
 export type OrderOrderedBySectionLabels = {
@@ -91,15 +128,30 @@ export const defaultOrderDetailsHeaderLabels: Required<OrderDetailsHeaderLabels>
     rejectModalMessage:
       "You're about to reject this approval request, triggered by the {policy} policy. Rejecting any approval request will deny the entire order.\n\nThis action is permanent and cannot be undone.",
     rejectModalConfirmText: 'Reject',
+    approveSuccessToast: '{policy} policy approved successfully.',
+    approveErrorToast: "Policy couldn't be approved due to a technical issue.",
+    rejectSuccessToast: '{policy} policy rejected successfully. Order denied.',
+    rejectErrorToast: "Policy couldn't be rejected due to a technical issue.",
+    pendingFurtherApprovalsAlert:
+      'Your approval is recorded. This order is still pending further approvals.',
   }
 
 export const defaultOrderStatusLabels: Required<OrderStatusSectionLabels> = {
   statusTitle: 'Status',
   orderPlacedStep: 'Order placed',
+  approvedStep: 'Approved',
+  pendingApprovalStep: 'Pending approval',
+  deniedStep: 'Denied',
+  paymentApprovedStep: 'Payment Approved',
   paymentPendingStep: 'Payment Pending',
+  paymentAuthorizationStep: 'Payment authorization',
+  paymentDeniedStep: 'Payment Denied',
+  readyForDeliveryStep: 'Ready for Delivery',
   handlingStep: 'Handling order',
+  canceledStep: 'Canceled',
   invoicedStep: 'Invoiced',
   deliveredStep: 'Delivered',
+  shipOrderStep: 'Ship order',
 }
 
 export const defaultOrderPaymentLabels: Required<OrderPaymentSectionLabels> = {
@@ -129,12 +181,33 @@ export const defaultOrderDeliveryLabels: Required<OrderDeliverySectionLabels> =
     eachLabel: 'Each',
     taxesLabel: 'Taxes',
     totalLabel: 'Total',
+    deliveryChannelLabel: 'Delivery',
+    pickupChannelLabel: 'Pickup',
+    takeAwayChannelLabel: 'Take away',
+    businessDaysZeroTemplate: 'Today',
+    businessDaysOneTemplate: 'In 1 business day',
+    businessDaysOtherTemplate: 'Up to {count} business days',
+    daysZeroTemplate: 'Today',
+    daysOneTemplate: 'In 1 day',
+    daysOtherTemplate: 'Up to {count} days',
+    hoursZeroTemplate: 'Now',
+    hoursOneTemplate: 'In 1 hour',
+    hoursOtherTemplate: 'Up to {count} hours',
+    minutesZeroTemplate: 'Now',
+    minutesOneTemplate: 'In 1 minute',
+    minutesOtherTemplate: 'Up to {count} minutes',
+    toNeighborhoodTemplate: 'to {neighborhood}',
   }
 
 export const defaultOrderSummaryLabels: Required<OrderSummarySectionLabels> = {
   summaryTitle: 'Summary',
   totalLabel: 'Total',
   interestLabel: 'Interest',
+  itemsTotalLabel: 'Items Total',
+  discountsTotalLabel: 'Discounts Total',
+  shippingTotalLabel: 'Shipping Total',
+  taxTotalLabel: 'Tax Total',
+  changeTotalLabel: 'Change Total',
 }
 
 export const defaultOrderOrderedByLabels: Required<OrderOrderedBySectionLabels> =

package/src/components/sections/Account/AccountOrderDelivery.tsx

@@ -4,6 +4,7 @@ import {
   type OrderDeliverySectionLabels,
   defaultOrderDeliveryLabels,
 } from 'src/components/account/orders/OrderDetails/orderDetailsLabels'
+import { getDeliveryOptionKey } from 'src/components/account/orders/OrderDetails/getDeliveryOptionLabel'
 import type {
   UserOrderDeliveryOption,
   UserOrderDeliveryOptionsData,
@@ -35,10 +36,11 @@ const AccountOrderDelivery = (props: AccountOrderDeliveryProps) => {
             ?.fields || []
         }
         title={labels.deliveryTitle}
+        labels={labels}
       />
       {order.deliveryOptionsData.deliveryOptions.map((option) => (
         <DeliveryOptionAccordion
-          key={option.friendlyDeliveryOptionName}
+          key={getDeliveryOptionKey(option)}
           deliveryOption={option as UserOrderDeliveryOption}
           contact={order.deliveryOptionsData.contact}
           currencyCode={order.storePreferencesData.currencyCode}

package/src/components/sections/Account/AccountOrderDetails.tsx

@@ -22,6 +22,14 @@ const AccountOrderDetails = ({
   cancelErrorToast = defaultOrderDetailsHeaderLabels.cancelErrorToast,
   approveLabel = defaultOrderDetailsHeaderLabels.approveLabel,
   rejectLabel = defaultOrderDetailsHeaderLabels.rejectLabel,
+  rejectModalTitle = defaultOrderDetailsHeaderLabels.rejectModalTitle,
+  rejectModalMessage = defaultOrderDetailsHeaderLabels.rejectModalMessage,
+  rejectModalConfirmText = defaultOrderDetailsHeaderLabels.rejectModalConfirmText,
+  approveSuccessToast = defaultOrderDetailsHeaderLabels.approveSuccessToast,
+  approveErrorToast = defaultOrderDetailsHeaderLabels.approveErrorToast,
+  rejectSuccessToast = defaultOrderDetailsHeaderLabels.rejectSuccessToast,
+  rejectErrorToast = defaultOrderDetailsHeaderLabels.rejectErrorToast,
+  pendingFurtherApprovalsAlert = defaultOrderDetailsHeaderLabels.pendingFurtherApprovalsAlert,
 }: AccountOrderDetailsProps) => {
   const { order, orderStatusLabels } =
     useAccountPageData<AccountOrderDetailsPageData>()
@@ -46,6 +54,14 @@ const AccountOrderDetails = ({
           cancelErrorToast,
           approveLabel,
           rejectLabel,
+          rejectModalTitle,
+          rejectModalMessage,
+          rejectModalConfirmText,
+          approveSuccessToast,
+          approveErrorToast,
+          rejectSuccessToast,
+          rejectErrorToast,
+          pendingFurtherApprovalsAlert,
         }}
       />
     </Section>