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

package/src/components/account/orders/{MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterSlider.tsx → ListOrders/FilterSlider/FilterSlider.tsx}

@@ -12,8 +12,8 @@ import type {
   MyAccountFilter_FacetsFragment,
   useMyAccountFilter,
 } from 'src/sdk/search/useMyAccountFilter'
-import FilterFacetDateRange from './MyAccountFilterFacetDateRange'
-import FilterFacetPendingApproval from './MyAccountFilterFacetPendingApproval'
+import FilterFacetDateRange from './FilterFacetDateRange'
+import FilterFacetPendingApproval from './FilterFacetPendingApproval'
 import styles from './section.module.scss'
 
 export interface FilterSliderProps {
@@ -42,9 +42,12 @@ export interface FilterSliderProps {
    * Ref to the search input field.
    */
   searchInputRef?: MutableRefObject<SearchInputFieldRef>
+  fromLabel?: string
+  toLabel?: string
+  invalidDateRangeLabel?: string
 }
 
-function MyAccountFilterSlider({
+function FilterSlider({
   facets,
   testId,
   dispatch,
@@ -54,6 +57,9 @@ function MyAccountFilterSlider({
   clearButtonLabel,
   applyButtonLabel,
   searchInputRef,
+  fromLabel,
+  toLabel,
+  invalidDateRangeLabel,
 }: FilterSliderProps & ReturnType<typeof useMyAccountFilter>) {
   const dateRangeInputRef = useRef<{
     clear: () => void
@@ -220,6 +226,9 @@ function MyAccountFilterSlider({
                   from={facet.from}
                   to={facet.to}
                   setDisabled={setDisabled}
+                  fromLabel={fromLabel}
+                  toLabel={toLabel}
+                  invalidDateRangeLabel={invalidDateRangeLabel}
                 />
               )}
             </UIFilterFacets>
@@ -230,4 +239,4 @@ function MyAccountFilterSlider({
   )
 }
 
-export default MyAccountFilterSlider
+export default FilterSlider

package/src/components/account/orders/ListOrders/FilterSlider/index.ts

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

package/src/components/account/orders/{MyAccountListOrders/MyAccountFilterSlider → ListOrders/FilterSlider}/section.module.scss

@@ -18,8 +18,8 @@
   @include meta.load-css("~@faststore/ui/src/components/organisms/Filter/styles.scss");
   @include meta.load-css("~@faststore/ui/src/components/organisms/FilterSlider/styles.scss");
   @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
-  @include meta.load-css("./MyAccountFilterFacetDateRange/styles.scss");
-  @include meta.load-css("./MyAccountFilterFacetPendingApproval/styles.scss");
+  @include meta.load-css("./FilterFacetDateRange/styles.scss");
+  @include meta.load-css("./FilterFacetPendingApproval/styles.scss");
 
   [data-fs-badge] {
     display: none;

package/src/components/account/orders/{MyAccountListOrders/MyAccountListOrders.tsx → ListOrders/ListOrders.tsx}

@@ -13,7 +13,7 @@ import {
   type SearchInputFieldRef,
 } from '@faststore/ui'
 import { useEffect } from 'react'
-import MyAccountFilterSlider from 'src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider'
+import FilterSlider from 'src/components/account/orders/ListOrders/FilterSlider'
 import { useDebounce } from 'src/sdk/account/useDebounce'
 import {
   useMyAccountFilter,
@@ -22,14 +22,17 @@ import {
 } from 'src/sdk/search/useMyAccountFilter'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 import { FastStoreOrderStatus } from 'src/utils/userOrderStatus'
-import AccountHeader from '../../components/MyAccountHeader'
-import MyAccountListOrdersTable, {
-  Pagination,
-} from './MyAccountListOrdersTable/MyAccountListOrdersTable'
-import SelectedFiltersTags from './MyAccountSelectedTags/MyAccountSelectedTags'
+import AccountHeader from '../../components/Header'
+import {
+  type ListOrdersSectionLabels,
+  getStatusFacetLabels,
+  resolveListOrdersLabels,
+} from './listOrdersLabels'
+import ListOrdersTable, { Pagination } from './ListOrdersTable/ListOrdersTable'
+import SelectedFiltersTags from './SelectedTags/SelectedTags'
 import styles from './styles.module.scss'
 
-export type MyAccountListOrdersProps = {
+export type ListOrdersProps = {
   listOrders: ServerListOrdersQueryQuery['listUserOrders']
   total: number
   perPage: number
@@ -42,12 +45,13 @@ export type MyAccountListOrdersProps = {
     clientEmail: string
     pendingMyApproval?: boolean
   }
+  labels?: ListOrdersSectionLabels
 }
 
 function getSelectedFacets({
   filters,
 }: {
-  filters: MyAccountListOrdersProps['filters']
+  filters: ListOrdersProps['filters']
 }): SelectedFacet[] {
   return Object.keys(filters).reduce((acc, filter) => {
     // FilterSlider does not deal with these filters
@@ -88,21 +92,25 @@ function getSelectedFacets({
 
 function getAllFacets({
   filters,
+  labels,
 }: {
-  filters: MyAccountListOrdersProps['filters']
+  filters: ListOrdersProps['filters']
+  labels: ReturnType<typeof resolveListOrdersLabels>
 }): MyAccountFilter_FacetsFragment[] {
+  const statusFacetLabels = getStatusFacetLabels(labels)
+
   return [
     {
       __typename: 'StoreFacetPendingApproval',
       key: 'pendingMyApproval',
-      label: 'Pending Approval',
+      label: labels.pendingApprovalLabel,
     } as any,
     {
       __typename: 'StoreFacetBoolean',
       key: 'status',
       label: 'Status',
-      values: FastStoreOrderStatus.map((status) => ({
-        label: status,
+      values: FastStoreOrderStatus.map((status, index) => ({
+        label: statusFacetLabels[index] ?? status,
         quantity: 0,
         selected: false,
         value: status.toLowerCase(),
@@ -118,9 +126,7 @@ function getAllFacets({
   ]
 }
 
-function hasActiveFilters(
-  filters: MyAccountListOrdersProps['filters']
-): boolean {
+function hasActiveFilters(filters: ListOrdersProps['filters']): boolean {
   return (
     filters.status.length > 0 ||
     Boolean(filters.dateInitial) ||
@@ -130,12 +136,14 @@ function hasActiveFilters(
   )
 }
 
-export default function MyAccountListOrders({
+export default function ListOrders({
   listOrders,
   total,
   perPage,
   filters,
-}: MyAccountListOrdersProps) {
+  labels: labelsProp,
+}: ListOrdersProps) {
+  const labels = resolveListOrdersLabels(labelsProp)
   const router = useRouter()
   const { isDesktop } = useScreenResize()
   const searchInputRef = useRef(null) as MutableRefObject<SearchInputFieldRef>
@@ -179,7 +187,7 @@ export default function MyAccountListOrders({
   )
 
   const selectedFacets: SelectedFacet[] = getSelectedFacets({ filters })
-  const allFacets = getAllFacets({ filters })
+  const allFacets = getAllFacets({ filters, labels })
 
   const filter = useMyAccountFilter({
     allFacets,
@@ -193,13 +201,13 @@ export default function MyAccountListOrders({
 
   return (
     <div className={styles.page}>
-      <AccountHeader pageTitle="Orders" />
+      <AccountHeader pageTitle={labels.pageTitle} />
       <div data-fs-list-orders-controls>
         <div data-fs-list-orders-search-filters>
           <SearchInputField
             ref={searchInputRef}
             data-fs-search-input-field-list-orders
-            placeholder="Search"
+            placeholder={labels.searchPlaceholder}
             onBlur={(_) => {
               handleSearchChange(searchInputRef.current.inputRef.value)
             }}
@@ -233,15 +241,21 @@ export default function MyAccountListOrders({
               openFilter()
             }}
           >
-            Filters
+            {labels.filtersLabel}
           </Button>
         </div>
         {isDesktop && (
-          <Pagination page={filters.page} total={total} perPage={perPage} />
+          <Pagination
+            page={filters.page}
+            total={total}
+            perPage={perPage}
+            labels={labels}
+          />
         )}
       </div>
 
       <SelectedFiltersTags
+        labels={labels}
         filters={{
           status: filters.status,
           dateInitial: filters.dateInitial,
@@ -280,11 +294,14 @@ export default function MyAccountListOrders({
       />
 
       {displayFilter && (
-        <MyAccountFilterSlider
+        <FilterSlider
           {...filter}
-          title="Filters"
-          clearButtonLabel="Clear All"
-          applyButtonLabel="View Results"
+          title={labels.filtersLabel}
+          clearButtonLabel={labels.clearAllLabel}
+          applyButtonLabel={labels.viewResultsLabel}
+          fromLabel={labels.fromLabel}
+          toLabel={labels.toLabel}
+          invalidDateRangeLabel={labels.invalidDateRangeLabel}
           searchInputRef={searchInputRef}
           testId="my-account-filter-slider"
         />
@@ -300,7 +317,7 @@ export default function MyAccountListOrders({
               weight="thin"
             />
           }
-          title={hasFilters ? 'No results found' : "You don't have any orders"}
+          title={hasFilters ? labels.noResultsLabel : labels.noOrdersLabel}
           bkgColor="light"
         >
           {!hasFilters && (
@@ -309,20 +326,26 @@ export default function MyAccountListOrders({
               href="/"
               variant="secondary"
             >
-              Start shopping
+              {labels.startShoppingLabel}
             </LinkButton>
           )}
         </EmptyState>
       ) : (
-        <MyAccountListOrdersTable
+        <ListOrdersTable
           listOrders={listOrders}
           total={total}
           perPage={perPage}
           filters={filters}
+          labels={labels}
         />
       )}
       {!isDesktop && (
-        <Pagination page={filters.page} total={total} perPage={perPage} />
+        <Pagination
+          page={filters.page}
+          total={total}
+          perPage={perPage}
+          labels={labels}
+        />
       )}
     </div>
   )

package/src/components/account/orders/{MyAccountListOrders/MyAccountListOrdersTable → ListOrders/ListOrdersTable}/ExpandButton/ExpandButton.tsx

@@ -5,6 +5,8 @@ type ExpandButtonProps = {
   onToggle: (e: React.MouseEvent<HTMLButtonElement>) => void
   count: number
   label?: string
+  viewAllLabel?: string
+  viewLessLabel?: string
   ariaControls?: string
 }
 
@@ -12,6 +14,8 @@ export function ExpandButton({
   isExpanded,
   onToggle,
   label,
+  viewAllLabel = 'View all',
+  viewLessLabel = 'View less',
   ariaControls,
 }: ExpandButtonProps) {
   return (
@@ -36,7 +40,7 @@ export function ExpandButton({
         onToggle(e)
       }}
     >
-      {isExpanded ? 'View less' : (label ?? 'View all')}
+      {isExpanded ? viewLessLabel : (label ?? viewAllLabel)}
     </Button>
   )
 }

package/src/components/account/orders/{MyAccountListOrders/MyAccountListOrdersTable/MyAccountListOrdersTable.tsx → ListOrders/ListOrdersTable/ListOrdersTable.tsx}

@@ -2,13 +2,18 @@ import { Icon, IconButton } from '@faststore/ui'
 
 import { useState } from 'react'
 
-import MyAccountStatusBadge from 'src/components/account/components/MyAccountStatusBadge'
+import StatusBadge from 'src/components/account/components/StatusBadge'
 import { useFormatPrice } from 'src/components/account/utils/useFormatPrice'
 import { useSession } from 'src/sdk/session'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 import { ExpandButton } from './ExpandButton/ExpandButton'
 
 import type { ServerListOrdersQueryQuery } from '@generated/graphql'
+import type { ListOrdersSectionLabels } from '../listOrdersLabels'
+import {
+  pickOrderStatusCmsLabels,
+  resolveListOrdersLabels,
+} from '../listOrdersLabels'
 
 const MAX_ITEM_FIELDS = 5
 const MAX_ORDER_FIELDS = 5
@@ -21,7 +26,7 @@ function formatOrderDate(date: string, locale: string) {
   })
 }
 
-type MyAccountListOrdersTableProps = {
+type ListOrdersTableProps = {
   listOrders: ServerListOrdersQueryQuery['listUserOrders']
   total: number
   perPage: number
@@ -40,11 +45,14 @@ export function Pagination({
   page,
   total,
   perPage,
+  labels: labelsProp,
 }: {
   page: number
   total: number
   perPage: number
+  labels?: ListOrdersSectionLabels
 }) {
+  const labels = resolveListOrdersLabels(labelsProp)
   const totalPages = Math.ceil(total / perPage)
   const firstIndexLabel = page === 1 ? 1 : (page - 1) * perPage + 1
   const lastIndexLabel =
@@ -64,14 +72,14 @@ export function Pagination({
 
   return (
     <div data-fs-list-orders-table-pagination>
-      <p>{`${firstIndexLabel} — ${lastIndexLabel} of ${total}`}</p>
+      <p>{`${firstIndexLabel} — ${lastIndexLabel} ${labels.paginationOfLabel} ${total}`}</p>
       <IconButton
         size="small"
         variant="tertiary"
         disabled={page === 1}
         onClick={() => handlePageChange(page - 1)}
         icon={<Icon name="CaretLeft" />}
-        aria-label="Previous Page"
+        aria-label={labels.previousPageLabel}
       />
       <IconButton
         size="small"
@@ -79,18 +87,23 @@ export function Pagination({
         disabled={page === totalPages}
         onClick={() => handlePageChange(page + 1)}
         icon={<Icon name="CaretRight" />}
-        aria-label="Next Page"
+        aria-label={labels.nextPageLabel}
       />
     </div>
   )
 }
 
-export default function MyAccountListOrdersTable({
+export default function ListOrdersTable({
   listOrders,
   total,
   perPage,
   filters,
-}: MyAccountListOrdersTableProps) {
+  labels: labelsProp,
+}: ListOrdersTableProps & {
+  labels?: ListOrdersSectionLabels
+}) {
+  const labels = resolveListOrdersLabels(labelsProp)
+  const statusLabels = pickOrderStatusCmsLabels(labels)
   const { isDesktop } = useScreenResize()
   const { locale } = useSession()
   const formatPrice = useFormatPrice()
@@ -157,7 +170,7 @@ export default function MyAccountListOrdersTable({
               : '-'
             const totalPrice = formatPrice(item.totalValue, item.currencyCode)
             const deliveryBy = item.ShippingEstimatedDate
-              ? `Delivery by ${formatOrderDate(
+              ? `${labels.deliveryByLabel} ${formatOrderDate(
                   item.ShippingEstimatedDate,
                   locale
                 )}`
@@ -208,7 +221,7 @@ export default function MyAccountListOrdersTable({
                     <td data-fs-list-orders-table-cell>
                       <div data-fs-list-orders-table-product-info>
                         <p data-fs-list-orders-table-product-info-label>
-                          Placed on
+                          {labels.placedOnLabel}
                         </p>
                         <p
                           data-fs-list-orders-table-product-info-value
@@ -220,7 +233,7 @@ export default function MyAccountListOrdersTable({
                       {hasOrderOrItemCustomFields && (
                         <div data-fs-list-orders-table-product-info>
                           <p data-fs-list-orders-table-product-info-label>
-                            Delivery by
+                            {labels.deliveryByLabel}
                           </p>
                           <p
                             data-fs-list-orders-table-product-info-value
@@ -259,6 +272,8 @@ export default function MyAccountListOrdersTable({
                               ariaControls={additionalInfoIdOrder}
                               isExpanded={isOrderFieldsExpanded}
                               count={orderLevel.length - MAX_ORDER_FIELDS}
+                              viewAllLabel={labels.viewAllLabel}
+                              viewLessLabel={labels.viewLessLabel}
                               onToggle={() =>
                                 handleToggle(item.orderId, 'order')
                               }
@@ -295,6 +310,8 @@ export default function MyAccountListOrdersTable({
                               ariaControls={additionalInfoIdItem}
                               isExpanded={isItemFieldsExpanded}
                               count={itemLevel.length - MAX_ITEM_FIELDS}
+                              viewAllLabel={labels.viewAllLabel}
+                              viewLessLabel={labels.viewLessLabel}
                               onToggle={() =>
                                 handleToggle(item.orderId, 'item')
                               }
@@ -307,9 +324,10 @@ export default function MyAccountListOrdersTable({
                 )}
 
                 <td data-fs-list-orders-table-cell>
-                  <MyAccountStatusBadge
+                  <StatusBadge
                     status={item.status}
                     statusFallback={item.statusDescription}
+                    statusLabels={statusLabels}
                   />
                   {!isDesktop && <p>{deliveryBy}</p>}
                 </td>
@@ -319,7 +337,12 @@ export default function MyAccountListOrdersTable({
         </tbody>
       </table>
       {isDesktop && (
-        <Pagination page={filters.page} total={total} perPage={perPage} />
+        <Pagination
+          page={filters.page}
+          total={total}
+          perPage={perPage}
+          labels={labels}
+        />
       )}
     </>
   )

package/src/components/account/orders/ListOrders/ListOrdersTable/index.ts

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

package/src/components/account/orders/{MyAccountListOrders/MyAccountSelectedTags/MyAccountSelectedTags.tsx → ListOrders/SelectedTags/SelectedTags.tsx}

@@ -1,8 +1,13 @@
 import { Button } from '@faststore/ui'
 import { useSession } from 'src/sdk/session'
-import { FastStoreOrderStatusWithLabels } from 'src/utils/userOrderStatus'
+import {
+  type ListOrdersSectionLabels,
+  getStatusDisplayLabels,
+  resolveListOrdersLabels,
+} from '../listOrdersLabels'
 
-type MyAccountSelectedTagsProps = {
+type SelectedTagsProps = {
+  labels?: ListOrdersSectionLabels
   filters: {
     status?: string[]
     dateInitial?: string
@@ -39,7 +44,10 @@ function formatFilterDate(date: string, locale: string) {
 function Tags({
   filters,
   onRemoveFilter,
-}: Pick<MyAccountSelectedTagsProps, 'filters' | 'onRemoveFilter'>) {
+  labels: labelsProp,
+}: Pick<SelectedTagsProps, 'filters' | 'onRemoveFilter' | 'labels'>) {
+  const labels = resolveListOrdersLabels(labelsProp)
+  const statusDisplayLabels = getStatusDisplayLabels(labels)
   const { locale } = useSession()
   const { dateInitial, dateFinal, status, pendingMyApproval } = filters
 
@@ -73,11 +81,7 @@ function Tags({
 
   const statusTags = (status || []).map((value) => (
     <div key={`status-${value}`} data-fs-list-orders-selected-tag>
-      <span>
-        {FastStoreOrderStatusWithLabels[
-          value.toLowerCase() as keyof typeof FastStoreOrderStatusWithLabels
-        ] || value}
-      </span>
+      <span>{statusDisplayLabels[value.toLowerCase()] || value}</span>
       <button
         data-fs-list-orders-selected-tag-clear
         onClick={() => onRemoveFilter('status', value)}
@@ -89,7 +93,7 @@ function Tags({
 
   const pendingMyApprovalTag = pendingMyApproval && (
     <div key="pending-approval" data-fs-list-orders-selected-tag>
-      <span>Pending my approval</span>
+      <span>{labels.pendingApprovalLabel}</span>
       <button
         data-fs-list-orders-selected-tag-clear
         onClick={() => onRemoveFilter('pendingMyApproval', pendingMyApproval)}
@@ -108,11 +112,13 @@ function Tags({
   )
 }
 
-function MyAccountSelectedTags({
+function SelectedTags({
   filters,
   onClearAll,
   onRemoveFilter,
-}: MyAccountSelectedTagsProps) {
+  labels: labelsProp,
+}: SelectedTagsProps) {
+  const labels = resolveListOrdersLabels(labelsProp)
   const hasFilters = Object.entries(filters).some(
     ([key, values]) =>
       (key === 'status' ||
@@ -127,14 +133,18 @@ function MyAccountSelectedTags({
     <>
       {hasFilters && (
         <div data-fs-list-orders-selected-tags>
-          <Tags filters={filters} onRemoveFilter={onRemoveFilter} />
+          <Tags
+            filters={filters}
+            onRemoveFilter={onRemoveFilter}
+            labels={labels}
+          />
           <Button
             variant="tertiary"
             size="small"
             data-fs-list-orders-selected-tags-clear-all-button
             onClick={onClearAll}
           >
-            Clear All
+            {labels.clearAllLabel}
           </Button>
         </div>
       )}
@@ -142,4 +152,4 @@ function MyAccountSelectedTags({
   )
 }
 
-export default MyAccountSelectedTags
+export default SelectedTags

package/src/components/account/orders/ListOrders/SelectedTags/index.ts

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

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

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

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

@@ -0,0 +1,112 @@
+import type { OrderStatusCmsLabels } from 'src/utils/userOrderStatus'
+import { pickOrderStatusCmsLabels as pickOrderStatusCmsLabelsFromData } from 'src/utils/userOrderStatus'
+
+export type ListOrdersSectionLabels = {
+  pageTitle?: string
+  searchPlaceholder?: string
+  filtersLabel?: string
+  clearAllLabel?: string
+  viewResultsLabel?: string
+  noResultsLabel?: string
+  noOrdersLabel?: string
+  startShoppingLabel?: string
+  placedOnLabel?: string
+  deliveryByLabel?: string
+  pendingApprovalLabel?: string
+  paginationOfLabel?: string
+  previousPageLabel?: string
+  nextPageLabel?: string
+  viewAllLabel?: string
+  viewLessLabel?: string
+  fromLabel?: string
+  toLabel?: string
+  invalidDateRangeLabel?: string
+  orderPlacedStatus?: string
+  pendingApprovalStatus?: string
+  paymentPendingStatus?: string
+  paymentApprovedStatus?: string
+  paymentDeniedStatus?: string
+  readyForDeliveryStatus?: string
+  invoicedStatus?: string
+  cancellationRequestedStatus?: string
+  canceledStatus?: string
+}
+
+export const defaultListOrdersLabels: Required<ListOrdersSectionLabels> = {
+  pageTitle: 'Orders',
+  searchPlaceholder: 'Search',
+  filtersLabel: 'Filters',
+  clearAllLabel: 'Clear All',
+  viewResultsLabel: 'View Results',
+  noResultsLabel: 'No results found',
+  noOrdersLabel: "You don't have any orders",
+  startShoppingLabel: 'Start shopping',
+  placedOnLabel: 'Placed on',
+  deliveryByLabel: 'Delivery by',
+  pendingApprovalLabel: 'Pending my approval',
+  paginationOfLabel: 'of',
+  previousPageLabel: 'Previous Page',
+  nextPageLabel: 'Next Page',
+  viewAllLabel: 'View all',
+  viewLessLabel: 'View less',
+  fromLabel: 'From',
+  toLabel: 'To',
+  invalidDateRangeLabel: 'Invalid date range',
+  orderPlacedStatus: 'Order Placed',
+  pendingApprovalStatus: 'Pending approval',
+  paymentPendingStatus: 'Payment Pending',
+  paymentApprovedStatus: 'Payment Approved',
+  paymentDeniedStatus: 'Payment Denied',
+  readyForDeliveryStatus: 'Ready for Delivery',
+  invoicedStatus: 'Invoiced',
+  cancellationRequestedStatus: 'Cancellation Requested',
+  canceledStatus: 'Canceled',
+}
+
+const STATUS_LABEL_KEYS = [
+  'orderPlacedStatus',
+  'pendingApprovalStatus',
+  'paymentPendingStatus',
+  'paymentApprovedStatus',
+  'paymentDeniedStatus',
+  'readyForDeliveryStatus',
+  'invoicedStatus',
+  'cancellationRequestedStatus',
+  'canceledStatus',
+] as const satisfies readonly (keyof ListOrdersSectionLabels)[]
+
+export function resolveListOrdersLabels(
+  labels?: ListOrdersSectionLabels
+): Required<ListOrdersSectionLabels> {
+  return { ...defaultListOrdersLabels, ...labels }
+}
+
+export function getStatusDisplayLabels(
+  labels: Required<ListOrdersSectionLabels>
+): Record<string, string> {
+  return {
+    'order placed': labels.orderPlacedStatus,
+    'pending approval': labels.pendingApprovalStatus,
+    'payment pending': labels.paymentPendingStatus,
+    'payment approved': labels.paymentApprovedStatus,
+    'payment denied': labels.paymentDeniedStatus,
+    'ready for delivery': labels.readyForDeliveryStatus,
+    invoiced: labels.invoicedStatus,
+    'cancellation requested': labels.cancellationRequestedStatus,
+    canceled: labels.canceledStatus,
+  }
+}
+
+export function getStatusFacetLabels(
+  labels: Required<ListOrdersSectionLabels>
+): string[] {
+  return STATUS_LABEL_KEYS.map((key) => labels[key])
+}
+
+export function pickOrderStatusCmsLabels(
+  labels?: ListOrdersSectionLabels
+): OrderStatusCmsLabels | undefined {
+  return pickOrderStatusCmsLabelsFromData(
+    labels as Record<string, unknown> | undefined
+  )
+}