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

package/cms/faststore/my-account/components/cms_component__accountorderdetails.jsonc

@@ -70,6 +70,31 @@
       "type": "string",
       "title": "Reject Modal Confirm Text",
       "default": "Reject"
+    },
+    "approveSuccessToast": {
+      "type": "string",
+      "title": "Approve Success Toast",
+      "default": "{policy} policy approved successfully."
+    },
+    "approveErrorToast": {
+      "type": "string",
+      "title": "Approve Error Toast",
+      "default": "Policy couldn't be approved due to a technical issue."
+    },
+    "rejectSuccessToast": {
+      "type": "string",
+      "title": "Reject Success Toast",
+      "default": "{policy} policy rejected successfully. Order denied."
+    },
+    "rejectErrorToast": {
+      "type": "string",
+      "title": "Reject Error Toast",
+      "default": "Policy couldn't be rejected due to a technical issue."
+    },
+    "pendingFurtherApprovalsAlert": {
+      "type": "string",
+      "title": "Pending Further Approvals Alert",
+      "default": "Your approval is recorded. This order is still pending further approvals."
     }
   },
   "readOnly": false,

package/cms/faststore/my-account/components/cms_component__accountorderslist.jsonc

@@ -61,6 +61,16 @@
       "title": "Pending Approval Label",
       "default": "Pending my approval"
     },
+    "statusFilterLabel": {
+      "type": "string",
+      "title": "Status Filter Label",
+      "default": "Status"
+    },
+    "orderDateFilterLabel": {
+      "type": "string",
+      "title": "Order Date Filter Label",
+      "default": "Order Date"
+    },
     "paginationOfLabel": {
       "type": "string",
       "title": "Pagination Of Label",

package/cms/faststore/my-account/components/cms_component__accountorderstatus.jsonc

@@ -16,16 +16,56 @@
       "title": "Order Placed Step",
       "default": "Order placed"
     },
+    "approvedStep": {
+      "type": "string",
+      "title": "Approved Step",
+      "default": "Approved"
+    },
+    "pendingApprovalStep": {
+      "type": "string",
+      "title": "Pending Approval Step",
+      "default": "Pending approval"
+    },
+    "deniedStep": {
+      "type": "string",
+      "title": "Denied Step",
+      "default": "Denied"
+    },
+    "paymentApprovedStep": {
+      "type": "string",
+      "title": "Payment Approved Step",
+      "default": "Payment Approved"
+    },
     "paymentPendingStep": {
       "type": "string",
       "title": "Payment Pending Step",
       "default": "Payment Pending"
     },
+    "paymentAuthorizationStep": {
+      "type": "string",
+      "title": "Payment Authorization Step",
+      "default": "Payment authorization"
+    },
+    "paymentDeniedStep": {
+      "type": "string",
+      "title": "Payment Denied Step",
+      "default": "Payment Denied"
+    },
+    "readyForDeliveryStep": {
+      "type": "string",
+      "title": "Ready For Delivery Step",
+      "default": "Ready for Delivery"
+    },
     "handlingStep": {
       "type": "string",
       "title": "Handling Step",
       "default": "Handling order"
     },
+    "canceledStep": {
+      "type": "string",
+      "title": "Canceled Step",
+      "default": "Canceled"
+    },
     "invoicedStep": {
       "type": "string",
       "title": "Invoiced Step",
@@ -35,6 +75,56 @@
       "type": "string",
       "title": "Delivered Step",
       "default": "Delivered"
+    },
+    "shipOrderStep": {
+      "type": "string",
+      "title": "Ship Order Step",
+      "default": "Ship order"
+    },
+    "orderPlacedStatus": {
+      "type": "string",
+      "title": "Order Placed Status",
+      "default": "Order Placed"
+    },
+    "pendingApprovalStatus": {
+      "type": "string",
+      "title": "Pending Approval Status",
+      "default": "Pending approval"
+    },
+    "paymentPendingStatus": {
+      "type": "string",
+      "title": "Payment Pending Status",
+      "default": "Payment Pending"
+    },
+    "paymentApprovedStatus": {
+      "type": "string",
+      "title": "Payment Approved Status",
+      "default": "Payment Approved"
+    },
+    "paymentDeniedStatus": {
+      "type": "string",
+      "title": "Payment Denied Status",
+      "default": "Payment Denied"
+    },
+    "readyForDeliveryStatus": {
+      "type": "string",
+      "title": "Ready For Delivery Status",
+      "default": "Ready for Delivery"
+    },
+    "invoicedStatus": {
+      "type": "string",
+      "title": "Invoiced Status",
+      "default": "Invoiced"
+    },
+    "cancellationRequestedStatus": {
+      "type": "string",
+      "title": "Cancellation Requested Status",
+      "default": "Cancellation Requested"
+    },
+    "canceledStatus": {
+      "type": "string",
+      "title": "Canceled Status",
+      "default": "Canceled"
     }
   },
   "readOnly": false,

package/cms/faststore/my-account/components/cms_component__accountordersummary.jsonc

@@ -20,6 +20,31 @@
       "type": "string",
       "title": "Interest Label",
       "default": "Interest"
+    },
+    "itemsTotalLabel": {
+      "type": "string",
+      "title": "Items Total Label",
+      "default": "Items Total"
+    },
+    "discountsTotalLabel": {
+      "type": "string",
+      "title": "Discounts Total Label",
+      "default": "Discounts Total"
+    },
+    "shippingTotalLabel": {
+      "type": "string",
+      "title": "Shipping Total Label",
+      "default": "Shipping Total"
+    },
+    "taxTotalLabel": {
+      "type": "string",
+      "title": "Tax Total Label",
+      "default": "Tax Total"
+    },
+    "changeTotalLabel": {
+      "type": "string",
+      "title": "Change Total Label",
+      "default": "Change Total"
     }
   },
   "readOnly": false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "4.8.1-dev.0",
+  "version": "4.8.1-dev.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -71,11 +71,11 @@
     "style-loader": "^3.3.1",
     "swr": "^2.2.5",
     "use-sync-external-store": "^1.6.0",
-    "@faststore/api": "4.8.1-dev.0",
-    "@faststore/sdk": "4.8.1-dev.0",
-    "@faststore/ui": "4.8.1-dev.0",
-    "@faststore/lighthouse": "4.8.1-dev.0",
-    "@faststore/diagnostics": "4.8.1-dev.0"
+    "@faststore/diagnostics": "4.8.1-dev.1",
+    "@faststore/lighthouse": "4.8.1-dev.1",
+    "@faststore/sdk": "4.8.1-dev.1",
+    "@faststore/api": "4.8.1-dev.1",
+    "@faststore/ui": "4.8.1-dev.1"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",

package/src/components/account/Drawer/OrganizationDrawer/OrganizationDrawerFooter.tsx

@@ -1,4 +1,5 @@
 import { Icon, IconButton, Link } from '@faststore/ui'
+import { useAccountNavigationLabels } from 'src/sdk/account/accountPageContext'
 
 export interface OrganizationDrawerFooterProps {
   orgName: string
@@ -6,6 +7,8 @@ export interface OrganizationDrawerFooterProps {
   userEmail?: string
   showManageLink?: boolean
   manageUrl?: string
+  manageLabel?: string
+  logoutLabel?: string
   onLogoutClick?: () => void
 }
 
@@ -15,8 +18,16 @@ export const OrganizationDrawerFooter = ({
   userEmail,
   showManageLink,
   manageUrl,
+  manageLabel: manageLabelProp,
+  logoutLabel: logoutLabelProp,
   onLogoutClick,
 }: OrganizationDrawerFooterProps) => {
+  const navigationLabels = useAccountNavigationLabels()
+  const manageLabel =
+    manageLabelProp ?? navigationLabels?.manageLabel ?? 'Manage'
+  const logoutLabel =
+    logoutLabelProp ?? navigationLabels?.logoutLabel ?? 'Logout'
+
   return (
     <div data-fs-organization-drawer-footer>
       <div data-fs-organization-drawer-footer-org>
@@ -31,7 +42,7 @@ export const OrganizationDrawerFooter = ({
         </div>
         {showManageLink && manageUrl && (
           <Link href={manageUrl} data-fs-organization-drawer-footer-manage>
-            Manage
+            {manageLabel}
           </Link>
         )}
       </div>
@@ -45,7 +56,7 @@ export const OrganizationDrawerFooter = ({
         </div>
         <IconButton
           data-fs-organization-drawer-footer-logout
-          aria-label="Log out"
+          aria-label={logoutLabel}
           icon={<Icon name="SignOut" width={20} height={20} />}
           onClick={onLogoutClick}
         />

package/src/components/account/orders/ListOrders/FilterSlider/FilterFacetPendingApproval/FilterFacetPendingApproval.tsx

@@ -3,6 +3,10 @@ import { useMemo } from 'react'
 import type { SelectedFacet } from 'src/sdk/search/useMyAccountFilter'
 
 export interface FilterFacetPendingApprovalProps {
+  /**
+   * Localized label shown next to the toggle.
+   */
+  label: string
   /**
    * Current selected facets from filter context
    */
@@ -14,9 +18,10 @@ export interface FilterFacetPendingApprovalProps {
 }
 
 function FilterFacetPendingApproval({
+  label,
   selected,
   dispatch,
-}: FilterFacetPendingApprovalProps) {
+}: Readonly<FilterFacetPendingApprovalProps>) {
   const isSelected = useMemo(
     () =>
       selected.some((f) => f.key === 'pendingMyApproval' && f.value === 'true'),
@@ -52,9 +57,9 @@ function FilterFacetPendingApproval({
         testId="pending-approval-toggle"
         checked={isSelected}
         onChange={handleToggleChange}
-        aria-label="Filter orders pending approval"
+        aria-label={label}
       />
-      <label htmlFor="pending-approval-toggle">Pending my approval</label>
+      <label htmlFor="pending-approval-toggle">{label}</label>
     </div>
   )
 }

package/src/components/account/orders/ListOrders/FilterSlider/FilterSlider.tsx

@@ -220,6 +220,7 @@ function FilterSlider({
               )}
               {type === 'StoreFacetPendingApproval' && isExpanded && (
                 <FilterFacetPendingApproval
+                  label={label}
                   selected={selected}
                   dispatch={dispatch}
                 />

package/src/components/account/orders/ListOrders/ListOrders.tsx

@@ -111,7 +111,7 @@ function getAllFacets({
     {
       __typename: 'StoreFacetBoolean',
       key: 'status',
-      label: 'Status',
+      label: labels.statusFilterLabel,
       values: FastStoreOrderStatus.map((status, index) => ({
         label: statusFacetLabels[index] ?? status,
         quantity: 0,
@@ -122,7 +122,7 @@ function getAllFacets({
     {
       __typename: 'StoreFacetRange',
       key: 'dateRange',
-      label: 'Order Date',
+      label: labels.orderDateFilterLabel,
       from: filters.dateInitial,
       to: filters.dateFinal,
     },

package/src/components/account/orders/ListOrders/listOrdersLabels.ts

@@ -13,6 +13,8 @@ export type ListOrdersSectionLabels = {
   placedOnLabel?: string
   deliveryByLabel?: string
   pendingApprovalLabel?: string
+  statusFilterLabel?: string
+  orderDateFilterLabel?: string
   paginationOfLabel?: string
   previousPageLabel?: string
   nextPageLabel?: string
@@ -44,6 +46,8 @@ export const defaultListOrdersLabels: Required<ListOrdersSectionLabels> = {
   placedOnLabel: 'Placed on',
   deliveryByLabel: 'Delivery by',
   pendingApprovalLabel: 'Pending my approval',
+  statusFilterLabel: 'Status',
+  orderDateFilterLabel: 'Order Date',
   paginationOfLabel: 'of',
   previousPageLabel: 'Previous Page',
   nextPageLabel: 'Next Page',

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,
           }}
         />
       )}