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

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

@@ -18,6 +18,13 @@ interface BuyingPolicyAlertProps {
     rejectModalTitle?: string
     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
   }
 }
 
@@ -28,9 +35,22 @@ const DEFAULT_REJECT_MODAL_TITLE = 'Reject approval request'
 const DEFAULT_REJECT_MODAL_MESSAGE =
   "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."
 const DEFAULT_REJECT_MODAL_CONFIRM_TEXT = 'Reject'
+const DEFAULT_APPROVE_SUCCESS_TOAST = '{policy} policy approved successfully.'
+const DEFAULT_APPROVE_ERROR_TOAST =
+  "Policy couldn't be approved due to a technical issue."
+const DEFAULT_REJECT_SUCCESS_TOAST =
+  '{policy} policy rejected successfully. Order denied.'
+const DEFAULT_REJECT_ERROR_TOAST =
+  "Policy couldn't be rejected due to a technical issue."
+const DEFAULT_PENDING_FURTHER_APPROVALS_ALERT =
+  'Your approval is recorded. This order is still pending further approvals.'
+
+function interpolatePolicyName(template: string, policyName: string): string {
+  return template.split('{policy}').join(policyName)
+}
 
 function renderRejectMessage(template: string, policyName: string): ReactNode {
-  const lines = template.replace('{policy}', policyName).split('\n')
+  const lines = interpolatePolicyName(template, policyName).split('\n')
 
   return lines.map((line, index) => (
     <Fragment key={`${index}-${line}`}>
@@ -53,6 +73,17 @@ export default function BuyingPolicyAlert({
     labels?.rejectModalMessage ?? DEFAULT_REJECT_MODAL_MESSAGE
   const rejectModalConfirmText =
     labels?.rejectModalConfirmText ?? DEFAULT_REJECT_MODAL_CONFIRM_TEXT
+  const approveSuccessToast =
+    labels?.approveSuccessToast ?? DEFAULT_APPROVE_SUCCESS_TOAST
+  const approveErrorToast =
+    labels?.approveErrorToast ?? DEFAULT_APPROVE_ERROR_TOAST
+  const rejectSuccessToast =
+    labels?.rejectSuccessToast ?? DEFAULT_REJECT_SUCCESS_TOAST
+  const rejectErrorToast =
+    labels?.rejectErrorToast ?? DEFAULT_REJECT_ERROR_TOAST
+  const pendingFurtherApprovalsAlert =
+    labels?.pendingFurtherApprovalsAlert ??
+    DEFAULT_PENDING_FURTHER_APPROVALS_ALERT
   const { pushToast } = useUI()
   const [isAuthorizationOpen, setIsAuthorizationOpen] = useState<boolean>(false)
   const { data, error, processOrderAuthorization, loading } =
@@ -72,15 +103,18 @@ export default function BuyingPolicyAlert({
       // Success toast
       pushToast({
         status: 'INFO',
-        message: `${ruleForAuthorization.rule.name} policy approved successfully.`,
+        message: interpolatePolicyName(
+          approveSuccessToast,
+          ruleForAuthorization.rule.name
+        ),
         icon: <UIIcon width={30} height={30} name="CircleWavyCheck" />,
       })
 
       onAuthorizationComplete?.()
-    } catch (error) {
+    } catch {
       pushToast({
         status: 'ERROR',
-        message: "Policy couldn't be approved due to a technical issue.",
+        message: approveErrorToast,
         icon: <UIIcon width={30} height={30} name="CircleWavyWarning" />,
       })
     }
@@ -99,16 +133,19 @@ export default function BuyingPolicyAlert({
 
       pushToast({
         status: 'INFO',
-        message: `${ruleForAuthorization.rule.name} policy rejected successfully. Order denied.`,
+        message: interpolatePolicyName(
+          rejectSuccessToast,
+          ruleForAuthorization.rule.name
+        ),
         icon: <UIIcon width={30} height={30} name="XCircle" />,
       })
 
       setIsAuthorizationOpen(false)
       onAuthorizationComplete?.()
-    } catch (error) {
+    } catch {
       pushToast({
         status: 'ERROR',
-        message: "Policy couldn't be rejected due to a technical issue.",
+        message: rejectErrorToast,
         icon: <UIIcon width={30} height={30} name="CircleWavyWarning" />,
       })
     }
@@ -159,8 +196,7 @@ export default function BuyingPolicyAlert({
           data-fs-pending-policies-alert
           icon={<UIIcon name="Info" width={20} height={20} />}
         >
-          Your approval is recorded. This order is still pending further
-          approvals.
+          {pendingFurtherApprovalsAlert}
         </UIAlert>
       )}
 

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

@@ -1,10 +1,19 @@
 import type { UserOrderDeliveryOptionsData } from '@generated/graphql'
 import { camelCaseToTitle } from 'src/utils/utilities'
 import Card from '../../../components/Card'
+import {
+  getDeliveryOptionKey,
+  getDeliveryOptionLabel,
+} from '../getDeliveryOptionLabel'
+import {
+  type OrderDeliverySectionLabels,
+  resolveOrderDeliveryLabels,
+} from '../orderDetailsLabels'
 
 interface DeliveryCardProps {
   title?: string
   deliveryOptionsData?: UserOrderDeliveryOptionsData
+  labels?: OrderDeliverySectionLabels
   fields?: Array<{
     name: string
     value: string
@@ -15,8 +24,10 @@ interface DeliveryCardProps {
 export default function DeliveryCard({
   title = 'Delivery',
   deliveryOptionsData,
+  labels: labelsProp,
   fields,
-}: DeliveryCardProps) {
+}: Readonly<DeliveryCardProps>) {
+  const labels = resolveOrderDeliveryLabels(labelsProp)
   const deliveryOptions = deliveryOptionsData?.deliveryOptions ?? []
   const contact = deliveryOptionsData?.contact
 
@@ -24,8 +35,8 @@ export default function DeliveryCard({
     <Card title={title} data-fs-order-delivery-card>
       <div data-fs-delivery-methods>
         {deliveryOptions.map((option) => (
-          <p key={option.friendlyDeliveryOptionName} data-fs-delivery-method>
-            {option.friendlyDeliveryOptionName}
+          <p key={getDeliveryOptionKey(option)} data-fs-delivery-method>
+            {getDeliveryOptionLabel(option, labels)}
           </p>
         ))}
       </div>

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

@@ -20,6 +20,7 @@ import {
   type OrderDeliverySectionLabels,
   resolveOrderDeliveryLabels,
 } from '../orderDetailsLabels'
+import { getDeliveryOptionLabel } from '../getDeliveryOptionLabel'
 
 interface DeliveryOptionAccordionProps {
   deliveryOption: UserOrderDeliveryOption
@@ -50,7 +51,7 @@ function DeliveryOptionAccordion({
   )
   const formatPrice = useFormatPrice()
 
-  const title = deliveryOption.friendlyDeliveryOptionName
+  const title = getDeliveryOptionLabel(deliveryOption, labels)
 
   const itemCount = labels.itemCountTemplate.replace(
     '{count}',
@@ -80,6 +81,7 @@ function DeliveryOptionAccordion({
           <DeliveryOptionAccordionDeliveryInfo
             deliveryOption={deliveryOption}
             contact={contact}
+            labels={labels}
           />
           <DeliveryOptionAccordionProducts>
             {deliveryOption.items?.map((item, index) => {
@@ -97,6 +99,7 @@ function DeliveryOptionAccordion({
                   price={formatPrice(item.sellingPrice ?? 0, currencyCode)}
                   tax={formatPrice(tax, currencyCode)}
                   total={formatPrice(item.total ?? 0, currencyCode)}
+                  labels={labels}
                 />
               )
             })}

package/src/components/account/orders/OrderDetails/DeliveryOptionAccordion/DeliveryOptionAccordionDeliveryInfo.tsx

@@ -3,13 +3,14 @@ import type {
   UserOrderDeliveryOption,
   UserOrderDeliveryOptionsContact,
 } from '@generated/graphql'
+import type { OrderDeliverySectionLabels } from '../orderDetailsLabels'
 
 interface InfoContainerProps {
   title: string
   children: ReactNode
 }
 
-function InfoContainer({ title, children }: InfoContainerProps) {
+function InfoContainer({ title, children }: Readonly<InfoContainerProps>) {
   return (
     <div data-fs-delivery-option-accordion-info-container>
       <span data-fs-delivery-option-accordion-info-title>{title}</span>
@@ -21,12 +22,14 @@ function InfoContainer({ title, children }: InfoContainerProps) {
 interface DeliveryOptionAccordionDeliveryInfoProps {
   deliveryOption: UserOrderDeliveryOption
   contact?: UserOrderDeliveryOptionsContact | null
+  labels: Required<OrderDeliverySectionLabels>
 }
 
 function DeliveryOptionAccordionDeliveryInfo({
   deliveryOption,
   contact,
-}: DeliveryOptionAccordionDeliveryInfoProps) {
+  labels,
+}: Readonly<DeliveryOptionAccordionDeliveryInfoProps>) {
   const isPickup = deliveryOption.deliveryChannel === 'pickup-in-point'
   const address = isPickup
     ? deliveryOption.pickupStoreInfo?.address
@@ -39,7 +42,7 @@ function DeliveryOptionAccordionDeliveryInfo({
   return (
     <div data-fs-delivery-option-accordion-delivery-info>
       {!isPickup && contact && (
-        <InfoContainer title="Recipient">
+        <InfoContainer title={labels.recipientLabel}>
           <span data-fs-delivery-option-accordion-info>
             <strong>{contact.name}</strong>
           </span>
@@ -52,7 +55,11 @@ function DeliveryOptionAccordionDeliveryInfo({
         </InfoContainer>
       )}
 
-      <InfoContainer title={isPickup ? 'Store address' : 'Delivery address'}>
+      <InfoContainer
+        title={
+          isPickup ? labels.storeAddressLabel : labels.deliveryAddressLabel
+        }
+      >
         <span data-fs-delivery-option-accordion-info>
           <strong>{address.city}</strong>
         </span>
@@ -64,15 +71,15 @@ function DeliveryOptionAccordionDeliveryInfo({
 
       {/* TODO: Validate this after we check the return from api  */}
       {isPickup && deliveryOption.deliveryWindow && (
-        <InfoContainer title="Store Hours">
+        <InfoContainer title={labels.storeHoursLabel}>
           <span data-fs-delivery-option-accordion-info>
-            From:{' '}
+            {labels.fromLabel}{' '}
             {new Date(
               deliveryOption.deliveryWindow.startDateUtc
             ).toLocaleString()}
           </span>
           <span data-fs-delivery-option-accordion-info>
-            To:{' '}
+            {labels.toLabel}{' '}
             {new Date(
               deliveryOption.deliveryWindow.endDateUtc
             ).toLocaleString()}

package/src/components/account/orders/OrderDetails/DeliveryOptionAccordion/DeliveryOptionAccordionProducts.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { camelCaseToTitle } from 'src/utils/utilities'
+import type { OrderDeliverySectionLabels } from '../orderDetailsLabels'
 
 interface DeliveryOptionAccordionProductProps {
   image: string
@@ -13,6 +14,7 @@ interface DeliveryOptionAccordionProductProps {
   price: string
   tax: string
   total: string
+  labels: Required<OrderDeliverySectionLabels>
 }
 
 function DeliveryOptionAccordionProduct({
@@ -23,7 +25,8 @@ function DeliveryOptionAccordionProduct({
   price,
   tax,
   total,
-}: DeliveryOptionAccordionProductProps) {
+  labels,
+}: Readonly<DeliveryOptionAccordionProductProps>) {
   return (
     <div data-fs-delivery-option-accordion-product>
       <div data-fs-delivery-option-accordion-product-top>
@@ -43,15 +46,15 @@ function DeliveryOptionAccordionProduct({
       <div data-fs-delivery-option-accordion-product-bottom>
         <div data-fs-delivery-option-accordion-product-price>
           <p>{price}</p>
-          <span>Each</span>
+          <span>{labels.eachLabel}</span>
         </div>
         <div data-fs-delivery-option-accordion-product-tax>
           <p>{tax}</p>
-          <span>Taxes</span>
+          <span>{labels.taxesLabel}</span>
         </div>
         <div data-fs-delivery-option-accordion-product-total>
           <p>{total}</p>
-          <span>Total</span>
+          <span>{labels.totalLabel}</span>
         </div>
       </div>
     </div>
@@ -64,7 +67,7 @@ interface DeliveryOptionAccordionProductsProps {
 
 function DeliveryOptionAccordionProducts({
   children,
-}: DeliveryOptionAccordionProductsProps) {
+}: Readonly<DeliveryOptionAccordionProductsProps>) {
   return <div data-fs-delivery-option-accordion-products>{children}</div>
 }
 

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

@@ -78,6 +78,11 @@ export function OrderDetailsHeader({
             rejectModalTitle: labels.rejectModalTitle,
             rejectModalMessage: labels.rejectModalMessage,
             rejectModalConfirmText: labels.rejectModalConfirmText,
+            approveSuccessToast: labels.approveSuccessToast,
+            approveErrorToast: labels.approveErrorToast,
+            rejectSuccessToast: labels.rejectSuccessToast,
+            rejectErrorToast: labels.rejectErrorToast,
+            pendingFurtherApprovalsAlert: labels.pendingFurtherApprovalsAlert,
           }}
         />
       )}

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
+}