@faststore/core 4.8.0 → 4.8.1-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/.turbo/turbo-generate.log +3 -3
  2. package/.turbo/turbo-test.log +146 -108
  3. package/CHANGELOG.md +14 -0
  4. package/cms/faststore/my-account/components/cms_component__accountnavigation.jsonc +10 -0
  5. package/cms/faststore/my-account/components/cms_component__accountorderdelivery.jsonc +80 -0
  6. package/cms/faststore/my-account/components/cms_component__accountorderdetails.jsonc +25 -0
  7. package/cms/faststore/my-account/components/cms_component__accountorderslist.jsonc +10 -0
  8. package/cms/faststore/my-account/components/cms_component__accountorderstatus.jsonc +90 -0
  9. package/cms/faststore/my-account/components/cms_component__accountordersummary.jsonc +25 -0
  10. package/package.json +6 -6
  11. package/src/components/account/Drawer/OrganizationDrawer/OrganizationDrawerFooter.tsx +13 -2
  12. package/src/components/account/orders/ListOrders/FilterSlider/FilterFacetPendingApproval/FilterFacetPendingApproval.tsx +8 -3
  13. package/src/components/account/orders/ListOrders/FilterSlider/FilterSlider.tsx +1 -0
  14. package/src/components/account/orders/ListOrders/ListOrders.tsx +2 -2
  15. package/src/components/account/orders/ListOrders/listOrdersLabels.ts +4 -0
  16. package/src/components/account/orders/OrderDetails/BuyingPolicyAlert/BuyingPolicyAlert.tsx +45 -9
  17. package/src/components/account/orders/OrderDetails/DeliveryCard/DeliveryCard.tsx +14 -3
  18. package/src/components/account/orders/OrderDetails/DeliveryOptionAccordion/DeliveryOptionAccordion.tsx +4 -1
  19. package/src/components/account/orders/OrderDetails/DeliveryOptionAccordion/DeliveryOptionAccordionDeliveryInfo.tsx +14 -7
  20. package/src/components/account/orders/OrderDetails/DeliveryOptionAccordion/DeliveryOptionAccordionProducts.tsx +8 -5
  21. package/src/components/account/orders/OrderDetails/OrderDetailsHeader.tsx +5 -0
  22. package/src/components/account/orders/OrderDetails/StatusCard/StatusCard.tsx +26 -89
  23. package/src/components/account/orders/OrderDetails/StatusCard/statusCardLocalization.ts +114 -0
  24. package/src/components/account/orders/OrderDetails/SummaryCard/SummaryCard.tsx +2 -1
  25. package/src/components/account/orders/OrderDetails/SummaryCard/getOrderTotalLabel.ts +19 -0
  26. package/src/components/account/orders/OrderDetails/getDeliveryOptionLabel.ts +135 -0
  27. package/src/components/account/orders/OrderDetails/orderDetailsLabels.ts +73 -0
  28. package/src/components/sections/Account/AccountOrderDelivery.tsx +3 -1
  29. package/src/components/sections/Account/AccountOrderDetails.tsx +16 -0
  30. package/src/components/sections/Account/AccountOrderStatus.tsx +27 -3
  31. package/src/components/sections/Account/AccountOrdersList.tsx +4 -0
  32. package/src/pages/api/graphql.ts +108 -69
  33. package/src/sdk/account/accountPageContext.ts +14 -3
  34. package/src/sdk/account/getMyAccountRoutes.ts +2 -0
  35. package/src/sdk/overrides/PageProvider.tsx +1 -1
  36. package/test/components/account/OrganizationDrawerFooter.browser.test.tsx +95 -1
  37. package/test/components/account/orders/BuyingPolicyAlert.browser.test.tsx +342 -0
  38. package/test/components/account/orders/DeliveryCard.browser.test.tsx +36 -0
  39. package/test/components/account/orders/DeliveryOptionAccordion.browser.test.tsx +76 -0
  40. package/test/components/account/orders/DeliveryOptionAccordionDeliveryInfo.browser.test.tsx +41 -0
  41. package/test/components/account/orders/DeliveryOptionAccordionProducts.browser.test.tsx +35 -0
  42. package/test/components/account/orders/FilterFacetPendingApproval.browser.test.tsx +25 -0
  43. package/test/components/account/orders/StatusCard.browser.test.tsx +37 -0
  44. package/test/components/account/orders/StatusCard.test.ts +101 -0
  45. package/test/components/account/orders/SummaryCard.browser.test.tsx +59 -0
  46. package/test/components/account/orders/getDeliveryOptionLabel.test.ts +129 -0
  47. package/test/components/account/orders/getOrderTotalLabel.test.ts +35 -0
  48. package/test/components/account/orders/listOrdersLabels.test.ts +23 -0
  49. package/test/components/account/orders/orderDetailsLabels.test.ts +13 -0
  50. package/test/components/sections/Account/AccountOrderDelivery.browser.test.tsx +72 -0
  51. package/test/components/sections/Account/AccountOrderDetails.browser.test.tsx +151 -0
  52. package/test/components/sections/Account/AccountOrderStatus.browser.test.tsx +59 -0
  53. package/test/components/sections/Account/AccountOrdersList.browser.test.tsx +67 -0
  54. package/test/pages/api/graphql.test.ts +27 -1
  55. package/test/sdk/account/getMyAccountRoutes.test.ts +11 -1
  56. package/test/utils/userOrderStatus.test.ts +22 -0
@@ -61,6 +61,16 @@
61
61
  "title": "Pending Approval Label",
62
62
  "default": "Pending my approval"
63
63
  },
64
+ "statusFilterLabel": {
65
+ "type": "string",
66
+ "title": "Status Filter Label",
67
+ "default": "Status"
68
+ },
69
+ "orderDateFilterLabel": {
70
+ "type": "string",
71
+ "title": "Order Date Filter Label",
72
+ "default": "Order Date"
73
+ },
64
74
  "paginationOfLabel": {
65
75
  "type": "string",
66
76
  "title": "Pagination Of Label",
@@ -16,16 +16,56 @@
16
16
  "title": "Order Placed Step",
17
17
  "default": "Order placed"
18
18
  },
19
+ "approvedStep": {
20
+ "type": "string",
21
+ "title": "Approved Step",
22
+ "default": "Approved"
23
+ },
24
+ "pendingApprovalStep": {
25
+ "type": "string",
26
+ "title": "Pending Approval Step",
27
+ "default": "Pending approval"
28
+ },
29
+ "deniedStep": {
30
+ "type": "string",
31
+ "title": "Denied Step",
32
+ "default": "Denied"
33
+ },
34
+ "paymentApprovedStep": {
35
+ "type": "string",
36
+ "title": "Payment Approved Step",
37
+ "default": "Payment Approved"
38
+ },
19
39
  "paymentPendingStep": {
20
40
  "type": "string",
21
41
  "title": "Payment Pending Step",
22
42
  "default": "Payment Pending"
23
43
  },
44
+ "paymentAuthorizationStep": {
45
+ "type": "string",
46
+ "title": "Payment Authorization Step",
47
+ "default": "Payment authorization"
48
+ },
49
+ "paymentDeniedStep": {
50
+ "type": "string",
51
+ "title": "Payment Denied Step",
52
+ "default": "Payment Denied"
53
+ },
54
+ "readyForDeliveryStep": {
55
+ "type": "string",
56
+ "title": "Ready For Delivery Step",
57
+ "default": "Ready for Delivery"
58
+ },
24
59
  "handlingStep": {
25
60
  "type": "string",
26
61
  "title": "Handling Step",
27
62
  "default": "Handling order"
28
63
  },
64
+ "canceledStep": {
65
+ "type": "string",
66
+ "title": "Canceled Step",
67
+ "default": "Canceled"
68
+ },
29
69
  "invoicedStep": {
30
70
  "type": "string",
31
71
  "title": "Invoiced Step",
@@ -35,6 +75,56 @@
35
75
  "type": "string",
36
76
  "title": "Delivered Step",
37
77
  "default": "Delivered"
78
+ },
79
+ "shipOrderStep": {
80
+ "type": "string",
81
+ "title": "Ship Order Step",
82
+ "default": "Ship order"
83
+ },
84
+ "orderPlacedStatus": {
85
+ "type": "string",
86
+ "title": "Order Placed Status",
87
+ "default": "Order Placed"
88
+ },
89
+ "pendingApprovalStatus": {
90
+ "type": "string",
91
+ "title": "Pending Approval Status",
92
+ "default": "Pending approval"
93
+ },
94
+ "paymentPendingStatus": {
95
+ "type": "string",
96
+ "title": "Payment Pending Status",
97
+ "default": "Payment Pending"
98
+ },
99
+ "paymentApprovedStatus": {
100
+ "type": "string",
101
+ "title": "Payment Approved Status",
102
+ "default": "Payment Approved"
103
+ },
104
+ "paymentDeniedStatus": {
105
+ "type": "string",
106
+ "title": "Payment Denied Status",
107
+ "default": "Payment Denied"
108
+ },
109
+ "readyForDeliveryStatus": {
110
+ "type": "string",
111
+ "title": "Ready For Delivery Status",
112
+ "default": "Ready for Delivery"
113
+ },
114
+ "invoicedStatus": {
115
+ "type": "string",
116
+ "title": "Invoiced Status",
117
+ "default": "Invoiced"
118
+ },
119
+ "cancellationRequestedStatus": {
120
+ "type": "string",
121
+ "title": "Cancellation Requested Status",
122
+ "default": "Cancellation Requested"
123
+ },
124
+ "canceledStatus": {
125
+ "type": "string",
126
+ "title": "Canceled Status",
127
+ "default": "Canceled"
38
128
  }
39
129
  },
40
130
  "readOnly": false,
@@ -20,6 +20,31 @@
20
20
  "type": "string",
21
21
  "title": "Interest Label",
22
22
  "default": "Interest"
23
+ },
24
+ "itemsTotalLabel": {
25
+ "type": "string",
26
+ "title": "Items Total Label",
27
+ "default": "Items Total"
28
+ },
29
+ "discountsTotalLabel": {
30
+ "type": "string",
31
+ "title": "Discounts Total Label",
32
+ "default": "Discounts Total"
33
+ },
34
+ "shippingTotalLabel": {
35
+ "type": "string",
36
+ "title": "Shipping Total Label",
37
+ "default": "Shipping Total"
38
+ },
39
+ "taxTotalLabel": {
40
+ "type": "string",
41
+ "title": "Tax Total Label",
42
+ "default": "Tax Total"
43
+ },
44
+ "changeTotalLabel": {
45
+ "type": "string",
46
+ "title": "Change Total Label",
47
+ "default": "Change Total"
23
48
  }
24
49
  },
25
50
  "readOnly": false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@faststore/core",
3
- "version": "4.8.0",
3
+ "version": "4.8.1-dev.1",
4
4
  "license": "MIT",
5
5
  "repository": {
6
6
  "type": "git",
@@ -71,11 +71,11 @@
71
71
  "style-loader": "^3.3.1",
72
72
  "swr": "^2.2.5",
73
73
  "use-sync-external-store": "^1.6.0",
74
- "@faststore/api": "4.8.0",
75
- "@faststore/diagnostics": "4.8.0",
76
- "@faststore/sdk": "4.8.0",
77
- "@faststore/ui": "4.8.0",
78
- "@faststore/lighthouse": "4.8.0"
74
+ "@faststore/diagnostics": "4.8.1-dev.1",
75
+ "@faststore/lighthouse": "4.8.1-dev.1",
76
+ "@faststore/sdk": "4.8.1-dev.1",
77
+ "@faststore/api": "4.8.1-dev.1",
78
+ "@faststore/ui": "4.8.1-dev.1"
79
79
  },
80
80
  "devDependencies": {
81
81
  "@cypress/code-coverage": "^3.12.1",
@@ -1,4 +1,5 @@
1
1
  import { Icon, IconButton, Link } from '@faststore/ui'
2
+ import { useAccountNavigationLabels } from 'src/sdk/account/accountPageContext'
2
3
 
3
4
  export interface OrganizationDrawerFooterProps {
4
5
  orgName: string
@@ -6,6 +7,8 @@ export interface OrganizationDrawerFooterProps {
6
7
  userEmail?: string
7
8
  showManageLink?: boolean
8
9
  manageUrl?: string
10
+ manageLabel?: string
11
+ logoutLabel?: string
9
12
  onLogoutClick?: () => void
10
13
  }
11
14
 
@@ -15,8 +18,16 @@ export const OrganizationDrawerFooter = ({
15
18
  userEmail,
16
19
  showManageLink,
17
20
  manageUrl,
21
+ manageLabel: manageLabelProp,
22
+ logoutLabel: logoutLabelProp,
18
23
  onLogoutClick,
19
24
  }: OrganizationDrawerFooterProps) => {
25
+ const navigationLabels = useAccountNavigationLabels()
26
+ const manageLabel =
27
+ manageLabelProp ?? navigationLabels?.manageLabel ?? 'Manage'
28
+ const logoutLabel =
29
+ logoutLabelProp ?? navigationLabels?.logoutLabel ?? 'Logout'
30
+
20
31
  return (
21
32
  <div data-fs-organization-drawer-footer>
22
33
  <div data-fs-organization-drawer-footer-org>
@@ -31,7 +42,7 @@ export const OrganizationDrawerFooter = ({
31
42
  </div>
32
43
  {showManageLink && manageUrl && (
33
44
  <Link href={manageUrl} data-fs-organization-drawer-footer-manage>
34
- Manage
45
+ {manageLabel}
35
46
  </Link>
36
47
  )}
37
48
  </div>
@@ -45,7 +56,7 @@ export const OrganizationDrawerFooter = ({
45
56
  </div>
46
57
  <IconButton
47
58
  data-fs-organization-drawer-footer-logout
48
- aria-label="Log out"
59
+ aria-label={logoutLabel}
49
60
  icon={<Icon name="SignOut" width={20} height={20} />}
50
61
  onClick={onLogoutClick}
51
62
  />
@@ -3,6 +3,10 @@ import { useMemo } from 'react'
3
3
  import type { SelectedFacet } from 'src/sdk/search/useMyAccountFilter'
4
4
 
5
5
  export interface FilterFacetPendingApprovalProps {
6
+ /**
7
+ * Localized label shown next to the toggle.
8
+ */
9
+ label: string
6
10
  /**
7
11
  * Current selected facets from filter context
8
12
  */
@@ -14,9 +18,10 @@ export interface FilterFacetPendingApprovalProps {
14
18
  }
15
19
 
16
20
  function FilterFacetPendingApproval({
21
+ label,
17
22
  selected,
18
23
  dispatch,
19
- }: FilterFacetPendingApprovalProps) {
24
+ }: Readonly<FilterFacetPendingApprovalProps>) {
20
25
  const isSelected = useMemo(
21
26
  () =>
22
27
  selected.some((f) => f.key === 'pendingMyApproval' && f.value === 'true'),
@@ -52,9 +57,9 @@ function FilterFacetPendingApproval({
52
57
  testId="pending-approval-toggle"
53
58
  checked={isSelected}
54
59
  onChange={handleToggleChange}
55
- aria-label="Filter orders pending approval"
60
+ aria-label={label}
56
61
  />
57
- <label htmlFor="pending-approval-toggle">Pending my approval</label>
62
+ <label htmlFor="pending-approval-toggle">{label}</label>
58
63
  </div>
59
64
  )
60
65
  }
@@ -220,6 +220,7 @@ function FilterSlider({
220
220
  )}
221
221
  {type === 'StoreFacetPendingApproval' && isExpanded && (
222
222
  <FilterFacetPendingApproval
223
+ label={label}
223
224
  selected={selected}
224
225
  dispatch={dispatch}
225
226
  />
@@ -111,7 +111,7 @@ function getAllFacets({
111
111
  {
112
112
  __typename: 'StoreFacetBoolean',
113
113
  key: 'status',
114
- label: 'Status',
114
+ label: labels.statusFilterLabel,
115
115
  values: FastStoreOrderStatus.map((status, index) => ({
116
116
  label: statusFacetLabels[index] ?? status,
117
117
  quantity: 0,
@@ -122,7 +122,7 @@ function getAllFacets({
122
122
  {
123
123
  __typename: 'StoreFacetRange',
124
124
  key: 'dateRange',
125
- label: 'Order Date',
125
+ label: labels.orderDateFilterLabel,
126
126
  from: filters.dateInitial,
127
127
  to: filters.dateFinal,
128
128
  },
@@ -13,6 +13,8 @@ export type ListOrdersSectionLabels = {
13
13
  placedOnLabel?: string
14
14
  deliveryByLabel?: string
15
15
  pendingApprovalLabel?: string
16
+ statusFilterLabel?: string
17
+ orderDateFilterLabel?: string
16
18
  paginationOfLabel?: string
17
19
  previousPageLabel?: string
18
20
  nextPageLabel?: string
@@ -44,6 +46,8 @@ export const defaultListOrdersLabels: Required<ListOrdersSectionLabels> = {
44
46
  placedOnLabel: 'Placed on',
45
47
  deliveryByLabel: 'Delivery by',
46
48
  pendingApprovalLabel: 'Pending my approval',
49
+ statusFilterLabel: 'Status',
50
+ orderDateFilterLabel: 'Order Date',
47
51
  paginationOfLabel: 'of',
48
52
  previousPageLabel: 'Previous Page',
49
53
  nextPageLabel: 'Next Page',
@@ -18,6 +18,13 @@ interface BuyingPolicyAlertProps {
18
18
  rejectModalTitle?: string
19
19
  rejectModalMessage?: string
20
20
  rejectModalConfirmText?: string
21
+ /** Supports the `{policy}` placeholder, replaced with the policy name. */
22
+ approveSuccessToast?: string
23
+ approveErrorToast?: string
24
+ /** Supports the `{policy}` placeholder, replaced with the policy name. */
25
+ rejectSuccessToast?: string
26
+ rejectErrorToast?: string
27
+ pendingFurtherApprovalsAlert?: string
21
28
  }
22
29
  }
23
30
 
@@ -28,9 +35,22 @@ const DEFAULT_REJECT_MODAL_TITLE = 'Reject approval request'
28
35
  const DEFAULT_REJECT_MODAL_MESSAGE =
29
36
  "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."
30
37
  const DEFAULT_REJECT_MODAL_CONFIRM_TEXT = 'Reject'
38
+ const DEFAULT_APPROVE_SUCCESS_TOAST = '{policy} policy approved successfully.'
39
+ const DEFAULT_APPROVE_ERROR_TOAST =
40
+ "Policy couldn't be approved due to a technical issue."
41
+ const DEFAULT_REJECT_SUCCESS_TOAST =
42
+ '{policy} policy rejected successfully. Order denied.'
43
+ const DEFAULT_REJECT_ERROR_TOAST =
44
+ "Policy couldn't be rejected due to a technical issue."
45
+ const DEFAULT_PENDING_FURTHER_APPROVALS_ALERT =
46
+ 'Your approval is recorded. This order is still pending further approvals.'
47
+
48
+ function interpolatePolicyName(template: string, policyName: string): string {
49
+ return template.split('{policy}').join(policyName)
50
+ }
31
51
 
32
52
  function renderRejectMessage(template: string, policyName: string): ReactNode {
33
- const lines = template.replace('{policy}', policyName).split('\n')
53
+ const lines = interpolatePolicyName(template, policyName).split('\n')
34
54
 
35
55
  return lines.map((line, index) => (
36
56
  <Fragment key={`${index}-${line}`}>
@@ -53,6 +73,17 @@ export default function BuyingPolicyAlert({
53
73
  labels?.rejectModalMessage ?? DEFAULT_REJECT_MODAL_MESSAGE
54
74
  const rejectModalConfirmText =
55
75
  labels?.rejectModalConfirmText ?? DEFAULT_REJECT_MODAL_CONFIRM_TEXT
76
+ const approveSuccessToast =
77
+ labels?.approveSuccessToast ?? DEFAULT_APPROVE_SUCCESS_TOAST
78
+ const approveErrorToast =
79
+ labels?.approveErrorToast ?? DEFAULT_APPROVE_ERROR_TOAST
80
+ const rejectSuccessToast =
81
+ labels?.rejectSuccessToast ?? DEFAULT_REJECT_SUCCESS_TOAST
82
+ const rejectErrorToast =
83
+ labels?.rejectErrorToast ?? DEFAULT_REJECT_ERROR_TOAST
84
+ const pendingFurtherApprovalsAlert =
85
+ labels?.pendingFurtherApprovalsAlert ??
86
+ DEFAULT_PENDING_FURTHER_APPROVALS_ALERT
56
87
  const { pushToast } = useUI()
57
88
  const [isAuthorizationOpen, setIsAuthorizationOpen] = useState<boolean>(false)
58
89
  const { data, error, processOrderAuthorization, loading } =
@@ -72,15 +103,18 @@ export default function BuyingPolicyAlert({
72
103
  // Success toast
73
104
  pushToast({
74
105
  status: 'INFO',
75
- message: `${ruleForAuthorization.rule.name} policy approved successfully.`,
106
+ message: interpolatePolicyName(
107
+ approveSuccessToast,
108
+ ruleForAuthorization.rule.name
109
+ ),
76
110
  icon: <UIIcon width={30} height={30} name="CircleWavyCheck" />,
77
111
  })
78
112
 
79
113
  onAuthorizationComplete?.()
80
- } catch (error) {
114
+ } catch {
81
115
  pushToast({
82
116
  status: 'ERROR',
83
- message: "Policy couldn't be approved due to a technical issue.",
117
+ message: approveErrorToast,
84
118
  icon: <UIIcon width={30} height={30} name="CircleWavyWarning" />,
85
119
  })
86
120
  }
@@ -99,16 +133,19 @@ export default function BuyingPolicyAlert({
99
133
 
100
134
  pushToast({
101
135
  status: 'INFO',
102
- message: `${ruleForAuthorization.rule.name} policy rejected successfully. Order denied.`,
136
+ message: interpolatePolicyName(
137
+ rejectSuccessToast,
138
+ ruleForAuthorization.rule.name
139
+ ),
103
140
  icon: <UIIcon width={30} height={30} name="XCircle" />,
104
141
  })
105
142
 
106
143
  setIsAuthorizationOpen(false)
107
144
  onAuthorizationComplete?.()
108
- } catch (error) {
145
+ } catch {
109
146
  pushToast({
110
147
  status: 'ERROR',
111
- message: "Policy couldn't be rejected due to a technical issue.",
148
+ message: rejectErrorToast,
112
149
  icon: <UIIcon width={30} height={30} name="CircleWavyWarning" />,
113
150
  })
114
151
  }
@@ -159,8 +196,7 @@ export default function BuyingPolicyAlert({
159
196
  data-fs-pending-policies-alert
160
197
  icon={<UIIcon name="Info" width={20} height={20} />}
161
198
  >
162
- Your approval is recorded. This order is still pending further
163
- approvals.
199
+ {pendingFurtherApprovalsAlert}
164
200
  </UIAlert>
165
201
  )}
166
202
 
@@ -1,10 +1,19 @@
1
1
  import type { UserOrderDeliveryOptionsData } from '@generated/graphql'
2
2
  import { camelCaseToTitle } from 'src/utils/utilities'
3
3
  import Card from '../../../components/Card'
4
+ import {
5
+ getDeliveryOptionKey,
6
+ getDeliveryOptionLabel,
7
+ } from '../getDeliveryOptionLabel'
8
+ import {
9
+ type OrderDeliverySectionLabels,
10
+ resolveOrderDeliveryLabels,
11
+ } from '../orderDetailsLabels'
4
12
 
5
13
  interface DeliveryCardProps {
6
14
  title?: string
7
15
  deliveryOptionsData?: UserOrderDeliveryOptionsData
16
+ labels?: OrderDeliverySectionLabels
8
17
  fields?: Array<{
9
18
  name: string
10
19
  value: string
@@ -15,8 +24,10 @@ interface DeliveryCardProps {
15
24
  export default function DeliveryCard({
16
25
  title = 'Delivery',
17
26
  deliveryOptionsData,
27
+ labels: labelsProp,
18
28
  fields,
19
- }: DeliveryCardProps) {
29
+ }: Readonly<DeliveryCardProps>) {
30
+ const labels = resolveOrderDeliveryLabels(labelsProp)
20
31
  const deliveryOptions = deliveryOptionsData?.deliveryOptions ?? []
21
32
  const contact = deliveryOptionsData?.contact
22
33
 
@@ -24,8 +35,8 @@ export default function DeliveryCard({
24
35
  <Card title={title} data-fs-order-delivery-card>
25
36
  <div data-fs-delivery-methods>
26
37
  {deliveryOptions.map((option) => (
27
- <p key={option.friendlyDeliveryOptionName} data-fs-delivery-method>
28
- {option.friendlyDeliveryOptionName}
38
+ <p key={getDeliveryOptionKey(option)} data-fs-delivery-method>
39
+ {getDeliveryOptionLabel(option, labels)}
29
40
  </p>
30
41
  ))}
31
42
  </div>
@@ -20,6 +20,7 @@ import {
20
20
  type OrderDeliverySectionLabels,
21
21
  resolveOrderDeliveryLabels,
22
22
  } from '../orderDetailsLabels'
23
+ import { getDeliveryOptionLabel } from '../getDeliveryOptionLabel'
23
24
 
24
25
  interface DeliveryOptionAccordionProps {
25
26
  deliveryOption: UserOrderDeliveryOption
@@ -50,7 +51,7 @@ function DeliveryOptionAccordion({
50
51
  )
51
52
  const formatPrice = useFormatPrice()
52
53
 
53
- const title = deliveryOption.friendlyDeliveryOptionName
54
+ const title = getDeliveryOptionLabel(deliveryOption, labels)
54
55
 
55
56
  const itemCount = labels.itemCountTemplate.replace(
56
57
  '{count}',
@@ -80,6 +81,7 @@ function DeliveryOptionAccordion({
80
81
  <DeliveryOptionAccordionDeliveryInfo
81
82
  deliveryOption={deliveryOption}
82
83
  contact={contact}
84
+ labels={labels}
83
85
  />
84
86
  <DeliveryOptionAccordionProducts>
85
87
  {deliveryOption.items?.map((item, index) => {
@@ -97,6 +99,7 @@ function DeliveryOptionAccordion({
97
99
  price={formatPrice(item.sellingPrice ?? 0, currencyCode)}
98
100
  tax={formatPrice(tax, currencyCode)}
99
101
  total={formatPrice(item.total ?? 0, currencyCode)}
102
+ labels={labels}
100
103
  />
101
104
  )
102
105
  })}
@@ -3,13 +3,14 @@ import type {
3
3
  UserOrderDeliveryOption,
4
4
  UserOrderDeliveryOptionsContact,
5
5
  } from '@generated/graphql'
6
+ import type { OrderDeliverySectionLabels } from '../orderDetailsLabels'
6
7
 
7
8
  interface InfoContainerProps {
8
9
  title: string
9
10
  children: ReactNode
10
11
  }
11
12
 
12
- function InfoContainer({ title, children }: InfoContainerProps) {
13
+ function InfoContainer({ title, children }: Readonly<InfoContainerProps>) {
13
14
  return (
14
15
  <div data-fs-delivery-option-accordion-info-container>
15
16
  <span data-fs-delivery-option-accordion-info-title>{title}</span>
@@ -21,12 +22,14 @@ function InfoContainer({ title, children }: InfoContainerProps) {
21
22
  interface DeliveryOptionAccordionDeliveryInfoProps {
22
23
  deliveryOption: UserOrderDeliveryOption
23
24
  contact?: UserOrderDeliveryOptionsContact | null
25
+ labels: Required<OrderDeliverySectionLabels>
24
26
  }
25
27
 
26
28
  function DeliveryOptionAccordionDeliveryInfo({
27
29
  deliveryOption,
28
30
  contact,
29
- }: DeliveryOptionAccordionDeliveryInfoProps) {
31
+ labels,
32
+ }: Readonly<DeliveryOptionAccordionDeliveryInfoProps>) {
30
33
  const isPickup = deliveryOption.deliveryChannel === 'pickup-in-point'
31
34
  const address = isPickup
32
35
  ? deliveryOption.pickupStoreInfo?.address
@@ -39,7 +42,7 @@ function DeliveryOptionAccordionDeliveryInfo({
39
42
  return (
40
43
  <div data-fs-delivery-option-accordion-delivery-info>
41
44
  {!isPickup && contact && (
42
- <InfoContainer title="Recipient">
45
+ <InfoContainer title={labels.recipientLabel}>
43
46
  <span data-fs-delivery-option-accordion-info>
44
47
  <strong>{contact.name}</strong>
45
48
  </span>
@@ -52,7 +55,11 @@ function DeliveryOptionAccordionDeliveryInfo({
52
55
  </InfoContainer>
53
56
  )}
54
57
 
55
- <InfoContainer title={isPickup ? 'Store address' : 'Delivery address'}>
58
+ <InfoContainer
59
+ title={
60
+ isPickup ? labels.storeAddressLabel : labels.deliveryAddressLabel
61
+ }
62
+ >
56
63
  <span data-fs-delivery-option-accordion-info>
57
64
  <strong>{address.city}</strong>
58
65
  </span>
@@ -64,15 +71,15 @@ function DeliveryOptionAccordionDeliveryInfo({
64
71
 
65
72
  {/* TODO: Validate this after we check the return from api */}
66
73
  {isPickup && deliveryOption.deliveryWindow && (
67
- <InfoContainer title="Store Hours">
74
+ <InfoContainer title={labels.storeHoursLabel}>
68
75
  <span data-fs-delivery-option-accordion-info>
69
- From:{' '}
76
+ {labels.fromLabel}{' '}
70
77
  {new Date(
71
78
  deliveryOption.deliveryWindow.startDateUtc
72
79
  ).toLocaleString()}
73
80
  </span>
74
81
  <span data-fs-delivery-option-accordion-info>
75
- To:{' '}
82
+ {labels.toLabel}{' '}
76
83
  {new Date(
77
84
  deliveryOption.deliveryWindow.endDateUtc
78
85
  ).toLocaleString()}
@@ -1,5 +1,6 @@
1
1
  import type { ReactNode } from 'react'
2
2
  import { camelCaseToTitle } from 'src/utils/utilities'
3
+ import type { OrderDeliverySectionLabels } from '../orderDetailsLabels'
3
4
 
4
5
  interface DeliveryOptionAccordionProductProps {
5
6
  image: string
@@ -13,6 +14,7 @@ interface DeliveryOptionAccordionProductProps {
13
14
  price: string
14
15
  tax: string
15
16
  total: string
17
+ labels: Required<OrderDeliverySectionLabels>
16
18
  }
17
19
 
18
20
  function DeliveryOptionAccordionProduct({
@@ -23,7 +25,8 @@ function DeliveryOptionAccordionProduct({
23
25
  price,
24
26
  tax,
25
27
  total,
26
- }: DeliveryOptionAccordionProductProps) {
28
+ labels,
29
+ }: Readonly<DeliveryOptionAccordionProductProps>) {
27
30
  return (
28
31
  <div data-fs-delivery-option-accordion-product>
29
32
  <div data-fs-delivery-option-accordion-product-top>
@@ -43,15 +46,15 @@ function DeliveryOptionAccordionProduct({
43
46
  <div data-fs-delivery-option-accordion-product-bottom>
44
47
  <div data-fs-delivery-option-accordion-product-price>
45
48
  <p>{price}</p>
46
- <span>Each</span>
49
+ <span>{labels.eachLabel}</span>
47
50
  </div>
48
51
  <div data-fs-delivery-option-accordion-product-tax>
49
52
  <p>{tax}</p>
50
- <span>Taxes</span>
53
+ <span>{labels.taxesLabel}</span>
51
54
  </div>
52
55
  <div data-fs-delivery-option-accordion-product-total>
53
56
  <p>{total}</p>
54
- <span>Total</span>
57
+ <span>{labels.totalLabel}</span>
55
58
  </div>
56
59
  </div>
57
60
  </div>
@@ -64,7 +67,7 @@ interface DeliveryOptionAccordionProductsProps {
64
67
 
65
68
  function DeliveryOptionAccordionProducts({
66
69
  children,
67
- }: DeliveryOptionAccordionProductsProps) {
70
+ }: Readonly<DeliveryOptionAccordionProductsProps>) {
68
71
  return <div data-fs-delivery-option-accordion-products>{children}</div>
69
72
  }
70
73
 
@@ -78,6 +78,11 @@ export function OrderDetailsHeader({
78
78
  rejectModalTitle: labels.rejectModalTitle,
79
79
  rejectModalMessage: labels.rejectModalMessage,
80
80
  rejectModalConfirmText: labels.rejectModalConfirmText,
81
+ approveSuccessToast: labels.approveSuccessToast,
82
+ approveErrorToast: labels.approveErrorToast,
83
+ rejectSuccessToast: labels.rejectSuccessToast,
84
+ rejectErrorToast: labels.rejectErrorToast,
85
+ pendingFurtherApprovalsAlert: labels.pendingFurtherApprovalsAlert,
81
86
  }}
82
87
  />
83
88
  )}