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

package/src/components/account/orders/{MyAccountListOrders → ListOrders}/styles.module.scss

@@ -2,9 +2,9 @@
 @use "@faststore/ui/src/styles/base/utilities";
 
 .page {
-  @include meta.load-css("./MyAccountListOrdersTable/styles.scss");
-  @include meta.load-css("./MyAccountSelectedTags/styles.scss");
-  @include meta.load-css("../../components/MyAccountStatusBadge/styles.scss");
+  @include meta.load-css("./ListOrdersTable/styles.scss");
+  @include meta.load-css("./SelectedTags/styles.scss");
+  @include meta.load-css("../../components/StatusBadge/styles.scss");
   @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
   @include meta.load-css("~@faststore/ui/src/components/molecules/SearchInputField/styles.scss");
   @include meta.load-css("~@faststore/ui/src/components/organisms/EmptyState/styles.scss");

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountBudgetsCard/MyAccountBudgetsCard.tsx → OrderDetails/BudgetsCard/BudgetsCard.tsx}

@@ -1,16 +1,23 @@
 import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
-import MyAccountCard from 'src/components/account/components/MyAccountCard'
+import Card from 'src/components/account/components/Card'
 import { useFormatPrice } from 'src/components/account/utils/useFormatPrice'
+import {
+  type OrderBudgetsSectionLabels,
+  resolveOrderBudgetsLabels,
+} from '../orderDetailsLabels'
 
-interface MyAccountBudgetsCardProps {
+interface BudgetsCardProps {
   budgetData: ServerOrderDetailsQueryQuery['userOrder']['budgetData']
   currencyCode: string
+  labels?: OrderBudgetsSectionLabels
 }
 
-function MyAccountBudgetsCard({
+function BudgetsCard({
   budgetData,
   currencyCode,
-}: MyAccountBudgetsCardProps) {
+  labels: labelsProp,
+}: BudgetsCardProps) {
+  const labels = resolveOrderBudgetsLabels(labelsProp)
   const formatPrice = useFormatPrice()
 
   if (!budgetData?.budgets || budgetData.budgets.length === 0) {
@@ -68,13 +75,13 @@ function MyAccountBudgetsCard({
   }
 
   return (
-    <MyAccountCard title="Budgets" data-fs-order-budgets-card>
+    <Card title={labels.budgetsTitle} data-fs-order-budgets-card>
       <div data-fs-budgets-table>
         <div data-fs-budgets-table-header>
-          <div data-fs-budgets-header-name>Name</div>
-          <div data-fs-budgets-header-available>Available</div>
-          <div data-fs-budgets-header-to-be-spent>To be spent</div>
-          <div data-fs-budgets-header-remaining>Remaining</div>
+          <div data-fs-budgets-header-name>{labels.nameLabel}</div>
+          <div data-fs-budgets-header-available>{labels.availableLabel}</div>
+          <div data-fs-budgets-header-to-be-spent>{labels.toBeSpentLabel}</div>
+          <div data-fs-budgets-header-remaining>{labels.remainingLabel}</div>
         </div>
         <div data-fs-budgets-table-body>
           {budgetRows.map(
@@ -112,8 +119,8 @@ function MyAccountBudgetsCard({
           )}
         </div>
       </div>
-    </MyAccountCard>
+    </Card>
   )
 }
 
-export default MyAccountBudgetsCard
+export default BudgetsCard

package/src/components/account/orders/OrderDetails/BudgetsCard/index.ts

@@ -0,0 +1 @@
+export { default } from './BudgetsCard'

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountBuyingPolicyAlert/MyAccountBuyingPolicyAlert.tsx → OrderDetails/BuyingPolicyAlert/BuyingPolicyAlert.tsx}

@@ -4,23 +4,55 @@ import {
   Icon as UIIcon,
   useUI,
 } from '@faststore/ui'
-import { useState } from 'react'
-import MyAccountOrderActionModal from '../MyAccountOrderActionModal'
+import { Fragment, type ReactNode, useState } from 'react'
+import OrderActionModal from '../OrderActionModal'
 import { useOrderAuthorization } from 'src/sdk/account/useOrderAuthorization'
 import type { ProcessOrderAuthorizationRule } from '@generated/graphql'
 
-interface MyAccountBuyingPolicyAlertProps {
+interface BuyingPolicyAlertProps {
   ruleForAuthorization: ProcessOrderAuthorizationRule
   onAuthorizationComplete?: () => void
+  labels?: {
+    approveLabel?: string
+    rejectLabel?: string
+    rejectModalTitle?: string
+    rejectModalMessage?: string
+    rejectModalConfirmText?: string
+  }
 }
 
 export const BUYING_POLICY_APPROVAL_REQUIRED_MESSAGE =
   'This buying policy requires your approval before the order can proceed.'
 
-export default function MyAccountBuyingPolicyAlert({
+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'
+
+function renderRejectMessage(template: string, policyName: string): ReactNode {
+  const lines = template.replace('{policy}', policyName).split('\n')
+
+  return lines.map((line, index) => (
+    <Fragment key={`${index}-${line}`}>
+      {line}
+      {index < lines.length - 1 && <br />}
+    </Fragment>
+  ))
+}
+
+export default function BuyingPolicyAlert({
   ruleForAuthorization,
   onAuthorizationComplete,
-}: MyAccountBuyingPolicyAlertProps) {
+  labels,
+}: BuyingPolicyAlertProps) {
+  const approveLabel = labels?.approveLabel ?? 'Approve'
+  const rejectLabel = labels?.rejectLabel ?? 'Reject'
+  const rejectModalTitle =
+    labels?.rejectModalTitle ?? DEFAULT_REJECT_MODAL_TITLE
+  const rejectModalMessage =
+    labels?.rejectModalMessage ?? DEFAULT_REJECT_MODAL_MESSAGE
+  const rejectModalConfirmText =
+    labels?.rejectModalConfirmText ?? DEFAULT_REJECT_MODAL_CONFIRM_TEXT
   const { pushToast } = useUI()
   const [isAuthorizationOpen, setIsAuthorizationOpen] = useState<boolean>(false)
   const { data, error, processOrderAuthorization, loading } =
@@ -107,7 +139,7 @@ export default function MyAccountBuyingPolicyAlert({
             data-fs-buying-policy-action-reject
             data-fs-button-danger
           >
-            Reject
+            {rejectLabel}
           </UIButton>
           <UIButton
             variant="primary"
@@ -117,7 +149,7 @@ export default function MyAccountBuyingPolicyAlert({
             loading={loading}
             data-fs-buying-policy-action-approve
           >
-            Approve
+            {approveLabel}
           </UIButton>
         </div>
       </div>
@@ -132,23 +164,17 @@ export default function MyAccountBuyingPolicyAlert({
         </UIAlert>
       )}
 
-      <MyAccountOrderActionModal
+      <OrderActionModal
         isOpen={isAuthorizationOpen}
         loading={loading}
         onClose={() => setIsAuthorizationOpen(false)}
         onConfirm={handleReject}
-        title="Reject approval request"
-        message={
-          <>
-            You're about to reject this approval request, triggered by the
-            {` ${ruleForAuthorization.rule.name} policy`}. Rejecting any
-            approval request will deny the entire order.
-            <br />
-            <br />
-            This action is permanent and cannot be undone.
-          </>
-        }
-        confirmText="Reject"
+        title={rejectModalTitle}
+        message={renderRejectMessage(
+          rejectModalMessage,
+          ruleForAuthorization.rule.name
+        )}
+        confirmText={rejectModalConfirmText}
         danger
       />
     </>

package/src/components/account/orders/OrderDetails/BuyingPolicyAlert/index.ts

@@ -0,0 +1 @@
+export { default } from './BuyingPolicyAlert'

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountDeliveryCard/MyAccountDeliveryCard.tsx → OrderDetails/DeliveryCard/DeliveryCard.tsx}

@@ -1,8 +1,9 @@
 import type { UserOrderDeliveryOptionsData } from '@generated/graphql'
 import { camelCaseToTitle } from 'src/utils/utilities'
-import MyAccountCard from '../../../components/MyAccountCard'
+import Card from '../../../components/Card'
 
-interface MyAccountDeliveryCardProps {
+interface DeliveryCardProps {
+  title?: string
   deliveryOptionsData?: UserOrderDeliveryOptionsData
   fields?: Array<{
     name: string
@@ -11,29 +12,29 @@ interface MyAccountDeliveryCardProps {
   }>
 }
 
-export default function MyAccountDeliveryCard({
+export default function DeliveryCard({
+  title = 'Delivery',
   deliveryOptionsData,
   fields,
-}: MyAccountDeliveryCardProps) {
+}: DeliveryCardProps) {
+  const deliveryOptions = deliveryOptionsData?.deliveryOptions ?? []
+  const contact = deliveryOptionsData?.contact
+
   return (
-    <MyAccountCard title="Delivery" data-fs-order-delivery-card>
+    <Card title={title} data-fs-order-delivery-card>
       <div data-fs-delivery-methods>
-        {deliveryOptionsData.deliveryOptions.map((option, index) => (
+        {deliveryOptions.map((option) => (
           <p key={option.friendlyDeliveryOptionName} data-fs-delivery-method>
             {option.friendlyDeliveryOptionName}
           </p>
         ))}
       </div>
 
-      {deliveryOptionsData.contact && (
+      {contact && (
         <div data-fs-delivery-contact>
-          <p data-fs-delivery-contact-name>
-            {deliveryOptionsData.contact.name}
-          </p>
-          {deliveryOptionsData.contact.phone && (
-            <p data-fs-delivery-contact-phone>
-              {deliveryOptionsData.contact.phone}
-            </p>
+          <p data-fs-delivery-contact-name>{contact.name}</p>
+          {contact.phone && (
+            <p data-fs-delivery-contact-phone>{contact.phone}</p>
           )}
           {fields?.length > 0 && (
             <p data-fs-delivery-contact-fields>
@@ -42,6 +43,6 @@ export default function MyAccountDeliveryCard({
           )}
         </div>
       )}
-    </MyAccountCard>
+    </Card>
   )
 }

package/src/components/account/orders/OrderDetails/DeliveryCard/index.ts

@@ -0,0 +1 @@
+export { default } from './DeliveryCard'

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountDeliveryOptionAccordion/MyAccountDeliveryOptionAccordion.tsx → OrderDetails/DeliveryOptionAccordion/DeliveryOptionAccordion.tsx}

@@ -4,22 +4,28 @@ import type {
 } from '@generated/graphql'
 import { useState } from 'react'
 import {
-  MyAccountAccordion,
-  MyAccountAccordionButton,
-  MyAccountAccordionItem,
-  MyAccountAccordionPanel,
-} from '../../../components/MyAccountAccordion'
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+} from '../../../components/Accordion'
 import { useFormatPrice } from '../../../utils/useFormatPrice'
-import MyAccountDeliveryOptionAccordionDeliveryInfo from './MyAccountDeliveryOptionAccordionDeliveryInfo'
+import DeliveryOptionAccordionDeliveryInfo from './DeliveryOptionAccordionDeliveryInfo'
 import {
-  MyAccountDeliveryOptionAccordionProduct,
-  MyAccountDeliveryOptionAccordionProducts,
-} from './MyAccountDeliveryOptionAccordionProducts'
+  DeliveryOptionAccordionProduct,
+  DeliveryOptionAccordionProducts,
+} from './DeliveryOptionAccordionProducts'
 
-interface MyAccountDeliveryOptionAccordionProps {
+import {
+  type OrderDeliverySectionLabels,
+  resolveOrderDeliveryLabels,
+} from '../orderDetailsLabels'
+
+interface DeliveryOptionAccordionProps {
   deliveryOption: UserOrderDeliveryOption
   contact?: UserOrderDeliveryOptionsContact | null
   currencyCode: string
+  labels?: OrderDeliverySectionLabels
   customFields?: Array<{
     type: string
     id: string
@@ -31,12 +37,14 @@ interface MyAccountDeliveryOptionAccordionProps {
   }>
 }
 
-function MyAccountDeliveryOptionAccordion({
+function DeliveryOptionAccordion({
   deliveryOption,
   contact,
   currencyCode,
+  labels: labelsProp,
   customFields,
-}: MyAccountDeliveryOptionAccordionProps) {
+}: DeliveryOptionAccordionProps) {
+  const labels = resolveOrderDeliveryLabels(labelsProp)
   const [indicesExpanded, setIndicesExpanded] = useState<Set<number>>(
     new Set([])
   )
@@ -44,7 +52,12 @@ function MyAccountDeliveryOptionAccordion({
 
   const title = deliveryOption.friendlyDeliveryOptionName
 
-  const summary = `${deliveryOption.quantityOfDifferentItems} ${deliveryOption.quantityOfDifferentItems === 1 ? 'item' : 'items'} – Total ${formatPrice(deliveryOption.total ?? 0, currencyCode)}`
+  const itemCount = labels.itemCountTemplate.replace(
+    '{count}',
+    String(deliveryOption.quantityOfDifferentItems)
+  )
+
+  const summary = `${itemCount} – ${labels.totalLabel} ${formatPrice(deliveryOption.total ?? 0, currencyCode)}`
 
   const onChange = (index: number) => {
     if (indicesExpanded.has(index)) {
@@ -56,23 +69,23 @@ function MyAccountDeliveryOptionAccordion({
   }
 
   return (
-    <MyAccountAccordion
+    <Accordion
       indices={indicesExpanded}
       onChange={onChange}
       data-fs-delivery-option-accordion
     >
-      <MyAccountAccordionItem index={0} key={String(0)}>
-        <MyAccountAccordionButton title={title} summary={summary} />
-        <MyAccountAccordionPanel>
-          <MyAccountDeliveryOptionAccordionDeliveryInfo
+      <AccordionItem index={0} key={String(0)}>
+        <AccordionButton title={title} summary={summary} />
+        <AccordionPanel>
+          <DeliveryOptionAccordionDeliveryInfo
             deliveryOption={deliveryOption}
             contact={contact}
           />
-          <MyAccountDeliveryOptionAccordionProducts>
+          <DeliveryOptionAccordionProducts>
             {deliveryOption.items?.map((item, index) => {
               const tax = (item.tax ?? 0) + (item.taxPriceTagsTotal ?? 0)
               return (
-                <MyAccountDeliveryOptionAccordionProduct
+                <DeliveryOptionAccordionProduct
                   key={index}
                   image={item.imageUrl || ''}
                   quantity={item.quantity}
@@ -87,11 +100,11 @@ function MyAccountDeliveryOptionAccordion({
                 />
               )
             })}
-          </MyAccountDeliveryOptionAccordionProducts>
-        </MyAccountAccordionPanel>
-      </MyAccountAccordionItem>
-    </MyAccountAccordion>
+          </DeliveryOptionAccordionProducts>
+        </AccordionPanel>
+      </AccordionItem>
+    </Accordion>
   )
 }
 
-export default MyAccountDeliveryOptionAccordion
+export default DeliveryOptionAccordion

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountDeliveryOptionAccordion/MyAccountDeliveryOptionAccordionDeliveryInfo.tsx → OrderDetails/DeliveryOptionAccordion/DeliveryOptionAccordionDeliveryInfo.tsx}

@@ -18,15 +18,15 @@ function InfoContainer({ title, children }: InfoContainerProps) {
   )
 }
 
-interface MyAccountDeliveryOptionAccordionDeliveryInfoProps {
+interface DeliveryOptionAccordionDeliveryInfoProps {
   deliveryOption: UserOrderDeliveryOption
   contact?: UserOrderDeliveryOptionsContact | null
 }
 
-function MyAccountDeliveryOptionAccordionDeliveryInfo({
+function DeliveryOptionAccordionDeliveryInfo({
   deliveryOption,
   contact,
-}: MyAccountDeliveryOptionAccordionDeliveryInfoProps) {
+}: DeliveryOptionAccordionDeliveryInfoProps) {
   const isPickup = deliveryOption.deliveryChannel === 'pickup-in-point'
   const address = isPickup
     ? deliveryOption.pickupStoreInfo?.address
@@ -83,4 +83,4 @@ function MyAccountDeliveryOptionAccordionDeliveryInfo({
   )
 }
 
-export default MyAccountDeliveryOptionAccordionDeliveryInfo
+export default DeliveryOptionAccordionDeliveryInfo

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountDeliveryOptionAccordion/MyAccountDeliveryOptionAccordionProducts.tsx → OrderDetails/DeliveryOptionAccordion/DeliveryOptionAccordionProducts.tsx}

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import { camelCaseToTitle } from 'src/utils/utilities'
 
-interface MyAccountDeliveryOptionAccordionProductProps {
+interface DeliveryOptionAccordionProductProps {
   image: string
   quantity: number
   name: string
@@ -15,7 +15,7 @@ interface MyAccountDeliveryOptionAccordionProductProps {
   total: string
 }
 
-function MyAccountDeliveryOptionAccordionProduct({
+function DeliveryOptionAccordionProduct({
   image,
   quantity,
   name,
@@ -23,7 +23,7 @@ function MyAccountDeliveryOptionAccordionProduct({
   price,
   tax,
   total,
-}: MyAccountDeliveryOptionAccordionProductProps) {
+}: DeliveryOptionAccordionProductProps) {
   return (
     <div data-fs-delivery-option-accordion-product>
       <div data-fs-delivery-option-accordion-product-top>
@@ -58,17 +58,14 @@ function MyAccountDeliveryOptionAccordionProduct({
   )
 }
 
-interface MyAccountDeliveryOptionAccordionProductsProps {
+interface DeliveryOptionAccordionProductsProps {
   children: ReactNode
 }
 
-function MyAccountDeliveryOptionAccordionProducts({
+function DeliveryOptionAccordionProducts({
   children,
-}: MyAccountDeliveryOptionAccordionProductsProps) {
+}: DeliveryOptionAccordionProductsProps) {
   return <div data-fs-delivery-option-accordion-products>{children}</div>
 }
 
-export {
-  MyAccountDeliveryOptionAccordionProduct,
-  MyAccountDeliveryOptionAccordionProducts,
-}
+export { DeliveryOptionAccordionProduct, DeliveryOptionAccordionProducts }

package/src/components/account/orders/OrderDetails/DeliveryOptionAccordion/index.ts

@@ -0,0 +1,6 @@
+export { default as DeliveryOptionAccordion } from './DeliveryOptionAccordion'
+export { default as DeliveryOptionAccordionDeliveryInfo } from './DeliveryOptionAccordionDeliveryInfo'
+export {
+  DeliveryOptionAccordionProduct,
+  DeliveryOptionAccordionProducts,
+} from './DeliveryOptionAccordionProducts'

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountMoreInformationCard/MyAccountMoreInformationCard.tsx → OrderDetails/MoreInformationCard/MoreInformationCard.tsx}

@@ -1,7 +1,9 @@
 import { camelCaseToTitle } from 'src/utils/utilities'
-import MyAccountCard from '../../../components/MyAccountCard'
+import Card from '../../../components/Card'
+import { defaultOrderMoreInfoLabels } from '../orderDetailsLabels'
 
-export interface MyAccountMoreInformationCardProps {
+export interface MoreInformationCardProps {
+  title?: string
   fields: Array<{
     name: string
     value: string
@@ -9,11 +11,12 @@ export interface MyAccountMoreInformationCardProps {
   }>
 }
 
-function MyAccountMoreInformationCard({
+function MoreInformationCard({
+  title = defaultOrderMoreInfoLabels.moreInfoTitle,
   fields,
-}: MyAccountMoreInformationCardProps) {
+}: MoreInformationCardProps) {
   return (
-    <MyAccountCard title="More information" data-fs-order-more-information-card>
+    <Card title={title} data-fs-order-more-information-card>
       <div data-fs-order-more-information-card-content>
         {fields.map((item) => (
           <div key={item.name} data-fs-order-more-information-card-item>
@@ -24,8 +27,8 @@ function MyAccountMoreInformationCard({
           </div>
         ))}
       </div>
-    </MyAccountCard>
+    </Card>
   )
 }
 
-export default MyAccountMoreInformationCard
+export default MoreInformationCard

package/src/components/account/orders/OrderDetails/MoreInformationCard/index.ts

@@ -0,0 +1 @@
+export { default } from './MoreInformationCard'

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountOrderActionModal/MyAccountOrderActionModal.tsx → OrderDetails/OrderActionModal/OrderActionModal.tsx}

@@ -9,7 +9,7 @@ import {
 } from '@faststore/ui'
 import styles from './styles.module.scss'
 
-interface MyAccountOrderActionModalProps {
+interface OrderActionModalProps {
   isOpen: boolean
   loading?: boolean
   title: string
@@ -22,7 +22,7 @@ interface MyAccountOrderActionModalProps {
   onConfirm: () => void
 }
 
-export default function MyAccountOrderActionModal({
+export default function OrderActionModal({
   isOpen = false,
   loading = false,
   title,
@@ -33,7 +33,7 @@ export default function MyAccountOrderActionModal({
   danger = false,
   onClose,
   onConfirm,
-}: MyAccountOrderActionModalProps) {
+}: OrderActionModalProps) {
   const { fade, fadeOut, fadeIn } = useFadeEffect()
 
   return (

package/src/components/account/orders/OrderDetails/OrderActionModal/index.ts

@@ -0,0 +1 @@
+export { default } from './OrderActionModal'

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountOrderActions/MyAccountOrderActions.tsx → OrderDetails/OrderActions/OrderActions.tsx}

@@ -7,26 +7,33 @@ import {
   useUI,
 } from '@faststore/ui'
 import { useState } from 'react'
-import MyAccountOrderActionModal from 'src/components/account/orders/MyAccountOrderDetails/MyAccountOrderActionModal'
+import OrderActionModal from 'src/components/account/orders/OrderDetails/OrderActionModal'
 import { useCancelOrder } from 'src/sdk/account/useCancelOrder'
 import { useReorder } from 'src/sdk/account/useReorder'
 import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
+import {
+  type OrderDetailsHeaderLabels,
+  resolveOrderDetailsHeaderLabels,
+} from '../orderDetailsLabels'
 
 type Order = ServerOrderDetailsQueryQuery['userOrder']
 
-interface MyAccountOrderActionsProps {
+interface OrderActionsProps {
   allowCancellation: boolean
   orderId: string
   customerEmail?: string
   order: Order
+  labels?: OrderDetailsHeaderLabels
 }
 
-export default function MyAccountOrderActions({
+export default function OrderActions({
   allowCancellation,
   orderId,
   customerEmail,
   order,
-}: MyAccountOrderActionsProps) {
+  labels: labelsProp,
+}: OrderActionsProps) {
+  const labels = resolveOrderDetailsHeaderLabels(labelsProp)
   const [isCancelOpen, setIsCancelOpen] = useState<boolean>(false)
   const { pushToast } = useUI()
 
@@ -47,7 +54,7 @@ export default function MyAccountOrderActions({
       setIsCancelOpen(false)
       pushToast({
         status: 'INFO',
-        message: 'Order canceled successfully',
+        message: labels.cancelSuccessToast,
         icon: <UIIcon width={30} height={30} name="CircleWavyCheck" />,
       })
 
@@ -55,7 +62,7 @@ export default function MyAccountOrderActions({
     } catch (error) {
       pushToast({
         status: 'ERROR',
-        message: "Order couldn't be canceled due to a technical issue.",
+        message: labels.cancelErrorToast,
         icon: <UIIcon width={30} height={30} name="CircleWavyWarning" />,
       })
     }
@@ -79,7 +86,7 @@ export default function MyAccountOrderActions({
               data-fs-order-actions-item
               data-fs-order-actions-item-reorder
             >
-              Reorder
+              {labels.reorderLabel}
             </DropdownItem>
             {allowCancellation && (
               <DropdownItem
@@ -88,19 +95,19 @@ export default function MyAccountOrderActions({
                 data-fs-order-actions-item
                 data-fs-order-actions-item-cancel
               >
-                Cancel order
+                {labels.cancelOrderLabel}
               </DropdownItem>
             )}
           </DropdownMenu>
         </Dropdown>
       </div>
 
-      <MyAccountOrderActionModal
+      <OrderActionModal
         isOpen={isCancelOpen}
         loading={loading}
-        title="Cancel order"
-        message="Are you sure you want to cancel this order? This action can't be undone."
-        confirmText="Cancel order"
+        title={labels.cancelOrderLabel}
+        message={labels.cancelConfirmMessage}
+        confirmText={labels.cancelOrderLabel}
         danger
         onClose={() => setIsCancelOpen(false)}
         onConfirm={handleCancel}

package/src/components/account/orders/OrderDetails/OrderActions/index.ts

@@ -0,0 +1 @@
+export { default } from './OrderActions'