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

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

@@ -0,0 +1,92 @@
+import type {
+  ServerOrderDetailsQueryQuery,
+  UserOrderDeliveryOption,
+  UserOrderDeliveryOptionsData,
+} from '@generated/graphql'
+import type { OrderStatusKey } from 'src/utils/userOrderStatus'
+import BudgetsCard from './BudgetsCard'
+import DeliveryCard from './DeliveryCard'
+import { DeliveryOptionAccordion } from './DeliveryOptionAccordion'
+import MoreInformationCard from './MoreInformationCard'
+import OrderedByCard from './OrderedByCard'
+import PaymentCard from './PaymentCard'
+import StatusCard from './StatusCard'
+import SummaryCard from './SummaryCard'
+import { OrderDetailsHeader, OrderDetailsPageShell } from './OrderDetailsHeader'
+
+export interface OrderDetailsProps {
+  order: ServerOrderDetailsQueryQuery['userOrder']
+}
+
+/**
+ * @deprecated Use CMS section wrappers (AccountOrderDetails, AccountOrderStatus, …)
+ * rendered via RenderSectionsBase on the order details page.
+ */
+export default function OrderDetails({ order }: OrderDetailsProps) {
+  const moreInformationCustomFields = order?.customFields?.find(
+    (field) => field.type === 'order'
+  )?.fields
+
+  return (
+    <OrderDetailsPageShell>
+      <OrderDetailsHeader order={order} />
+
+      <main data-fs-order-details-content>
+        <OrderedByCard
+          clientProfileData={order.clientProfileData}
+          shopper={order.shopper}
+        />
+
+        <DeliveryCard
+          deliveryOptionsData={
+            order.deliveryOptionsData as UserOrderDeliveryOptionsData
+          }
+          fields={
+            order?.customFields?.find((field) => field.type === 'address')
+              ?.fields || []
+          }
+        />
+
+        <StatusCard
+          status={order.status as OrderStatusKey}
+          creationDate={order.creationDate}
+        />
+
+        <PaymentCard
+          currencyCode={order.storePreferencesData.currencyCode}
+          paymentData={order.paymentData}
+          allowCancellation={order.allowCancellation}
+        />
+
+        <SummaryCard
+          totals={order.totals}
+          currencyCode={order.storePreferencesData.currencyCode}
+          transactions={order.paymentData.transactions}
+        />
+
+        {order.deliveryOptionsData.deliveryOptions.map((option) => (
+          <DeliveryOptionAccordion
+            key={option.friendlyDeliveryOptionName}
+            deliveryOption={option as UserOrderDeliveryOption}
+            contact={order.deliveryOptionsData.contact}
+            currencyCode={order.storePreferencesData.currencyCode}
+            customFields={order.customFields.filter(
+              (field) => field.type === 'item'
+            )}
+          />
+        ))}
+
+        {moreInformationCustomFields?.length > 0 && (
+          <MoreInformationCard fields={moreInformationCustomFields} />
+        )}
+
+        {order.budgetData && (
+          <BudgetsCard
+            budgetData={order.budgetData}
+            currencyCode={order.storePreferencesData.currencyCode}
+          />
+        )}
+      </main>
+    </OrderDetailsPageShell>
+  )
+}

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

@@ -0,0 +1,89 @@
+import { Icon as UIIcon, IconButton as UIIconButton } from '@faststore/ui'
+import type { PropsWithChildren } from 'react'
+import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
+import type { OrderStatusCmsLabels } from 'src/utils/userOrderStatus'
+import StatusBadge from '../../components/StatusBadge'
+import BuyingPolicyAlert from './BuyingPolicyAlert'
+import OrderActions from './OrderActions'
+import ReorderButton from './ReorderButton'
+import {
+  type OrderDetailsHeaderLabels,
+  resolveOrderDetailsHeaderLabels,
+} from './orderDetailsLabels'
+import styles from './section.module.scss'
+
+export type OrderDetailsHeaderProps = {
+  order: ServerOrderDetailsQueryQuery['userOrder']
+  labels?: OrderDetailsHeaderLabels
+  statusLabels?: OrderStatusCmsLabels
+}
+
+export function OrderDetailsHeader({
+  order,
+  labels: labelsProp,
+  statusLabels,
+}: OrderDetailsHeaderProps) {
+  const labels = resolveOrderDetailsHeaderLabels(labelsProp)
+
+  return (
+    <>
+      <header data-fs-order-details-header>
+        <div data-fs-order-details-header-title>
+          <a href="/pvt/account/orders">
+            <UIIconButton
+              data-fs-order-details-header-back-button
+              size="small"
+              aria-label={labels.goBackLabel}
+              icon={<UIIcon name="ArrowLeft" />}
+              type="button"
+            />
+          </a>
+          <div data-fs-order-details-header-title-wrapper>
+            <h1 data-fs-order-details-header-title-text>
+              {labels.orderNumberPrefix}
+              {order.orderId}
+            </h1>
+            <StatusBadge
+              status={order.status}
+              statusFallback={order.statusDescription}
+              statusLabels={statusLabels}
+            />
+          </div>
+        </div>
+
+        <div data-fs-order-details-header-actions>
+          <ReorderButton order={order} label={labels.reorderLabel} />
+          <OrderActions
+            allowCancellation={order.allowCancellation}
+            orderId={order.orderId}
+            customerEmail={order.clientProfileData?.email}
+            order={order}
+            labels={labels}
+          />
+        </div>
+      </header>
+
+      {order.ruleForAuthorization && (
+        <BuyingPolicyAlert
+          ruleForAuthorization={order.ruleForAuthorization}
+          onAuthorizationComplete={() => window.location.reload()}
+          labels={{
+            approveLabel: labels.approveLabel,
+            rejectLabel: labels.rejectLabel,
+            rejectModalTitle: labels.rejectModalTitle,
+            rejectModalMessage: labels.rejectModalMessage,
+            rejectModalConfirmText: labels.rejectModalConfirmText,
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+export function OrderDetailsPageShell({ children }: PropsWithChildren) {
+  return (
+    <div className={styles.page} data-fs-order-details>
+      {children}
+    </div>
+  )
+}

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountOrderedByCard/MyAccountOrderedByCard.tsx → OrderDetails/OrderedByCard/OrderedByCard.tsx}

@@ -1,7 +1,8 @@
 import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
-import MyAccountCard from '../../../components/MyAccountCard'
+import Card from '../../../components/Card'
 
-interface MyAccountOrderedByCardProps {
+interface OrderedByCardProps {
+  title?: string
   clientProfileData: Pick<
     ServerOrderDetailsQueryQuery['userOrder']['clientProfileData'],
     | 'firstName'
@@ -19,10 +20,11 @@ interface MyAccountOrderedByCardProps {
   }
 }
 
-function MyAccountOrderedByCard({
+function OrderedByCard({
+  title = 'Ordered by',
   clientProfileData,
   shopper,
-}: MyAccountOrderedByCardProps) {
+}: OrderedByCardProps) {
   const shopperNameExists = Boolean(shopper?.firstName)
   const firstName =
     (shopperNameExists ? shopper?.firstName : clientProfileData?.firstName) ??
@@ -39,7 +41,7 @@ function MyAccountOrderedByCard({
   }
 
   return (
-    <MyAccountCard title="Ordered by" data-fs-order-ordered-by-card>
+    <Card title={title} data-fs-order-ordered-by-card>
       {isCorporate && corporateName && (
         <div data-fs-ordered-by-org>
           <div data-fs-ordered-by-avatar>{getFirstLetter(corporateName)}</div>
@@ -58,8 +60,8 @@ function MyAccountOrderedByCard({
           </p>
         )}
       </div>
-    </MyAccountCard>
+    </Card>
   )
 }
 
-export default MyAccountOrderedByCard
+export default OrderedByCard

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

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

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountPaymentCard/MyAccountPaymentCard.tsx → OrderDetails/PaymentCard/PaymentCard.tsx}

@@ -1,8 +1,12 @@
-import MyAccountCard from '../../../components/MyAccountCard'
-import MyAccountPaymentFlagsIcon from './MyAccountPaymentFlagsIcon'
+import Card from '../../../components/Card'
+import PaymentFlagsIcon from './PaymentFlagsIcon'
 import { Link } from '@faststore/ui'
 import { useFormatPrice } from '../../../utils/useFormatPrice'
 import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
+import {
+  type OrderPaymentSectionLabels,
+  resolveOrderPaymentLabels,
+} from '../orderDetailsLabels'
 
 export type OrderPaymentData =
   ServerOrderDetailsQueryQuery['userOrder']['paymentData']
@@ -11,17 +15,19 @@ export type OrderPaymentDataTransaction =
 export type OrderPaymentDataTransactionPayment =
   OrderPaymentDataTransaction['payments'][number]
 
-interface MyAccountPaymentCardProps {
+interface PaymentCardProps {
   paymentData?: OrderPaymentData
   currencyCode: string
   allowCancellation?: boolean
+  labels?: OrderPaymentSectionLabels
 }
 
 const getPaymentMethodInfo = (
-  payment: OrderPaymentDataTransaction['payments'][number]
+  payment: OrderPaymentDataTransaction['payments'][number],
+  labels: Required<OrderPaymentSectionLabels>
 ) => {
   const baseInfo = {
-    type: 'Billing',
+    type: labels.billingLabel,
     methodName: '',
     icon: payment.paymentSystemName,
   }
@@ -31,24 +37,24 @@ const getPaymentMethodInfo = (
     case 'debitCard':
       return {
         ...baseInfo,
-        methodName: `${payment.paymentSystemName} ending in ${payment.lastDigits}`,
+        methodName: `${payment.paymentSystemName} ${labels.endingInLabel} ${payment.lastDigits}`,
       }
     case 'bankInvoice':
       return {
         ...baseInfo,
-        type: 'Bank Invoice',
-        methodName: 'Bank Invoice',
+        type: labels.bankInvoiceLabel,
+        methodName: labels.bankInvoiceLabel,
       }
     case 'payPal':
       return {
         ...baseInfo,
-        methodName: 'PayPal',
+        methodName: labels.paypalLabel,
       }
     case 'giftCard':
       return {
         ...baseInfo,
-        type: 'Gift Card',
-        methodName: 'Gift Card',
+        type: labels.giftCardLabel,
+        methodName: labels.giftCardLabel,
       }
     default:
       return {
@@ -70,11 +76,13 @@ const getBankInvoiceUrl = (transactions: OrderPaymentDataTransaction[]) => {
   return null
 }
 
-function MyAccountPaymentCard({
+function PaymentCard({
   paymentData,
   currencyCode,
   allowCancellation = false,
-}: MyAccountPaymentCardProps) {
+  labels: labelsProp,
+}: PaymentCardProps) {
+  const labels = resolveOrderPaymentLabels(labelsProp)
   const formatPrice = useFormatPrice()
 
   const bankInvoiceUrl = getBankInvoiceUrl(paymentData?.transactions)
@@ -82,10 +90,10 @@ function MyAccountPaymentCard({
   const showPrintBankInvoiceButton = allowCancellation && bankInvoiceUrl
 
   return (
-    <MyAccountCard title="Payment" data-fs-order-payment-card>
+    <Card title={labels.paymentTitle} data-fs-order-payment-card>
       <div data-fs-payment-details>
         {paymentData?.transactions[0]?.payments.map((payment) => {
-          const methodInfo = getPaymentMethodInfo(payment)
+          const methodInfo = getPaymentMethodInfo(payment, labels)
           // Check if redemptionCode exists on payment
           const hasRedemptionCode =
             payment.group === 'giftCard' && payment.redemptionCode
@@ -95,7 +103,7 @@ function MyAccountPaymentCard({
               <div data-fs-payment-method>
                 <div data-fs-payment-method-info>
                   <p data-fs-payment-name>{methodInfo.methodName}</p>
-                  <MyAccountPaymentFlagsIcon payment={payment} />
+                  <PaymentFlagsIcon payment={payment} />
                 </div>
                 <div data-fs-payment-value>
                   {hasRedemptionCode ? (
@@ -105,11 +113,15 @@ function MyAccountPaymentCard({
                     </span>
                   ) : payment.installments > 1 ? (
                     <span>
-                      {payment.installments}x of{' '}
-                      {formatPrice(
-                        payment.value / payment.installments,
-                        currencyCode
-                      )}
+                      {labels.installmentCopy
+                        .replace('{count}', String(payment.installments))
+                        .replace(
+                          '{value}',
+                          formatPrice(
+                            payment.value / payment.installments,
+                            currencyCode
+                          )
+                        )}
                     </span>
                   ) : (
                     <span>{formatPrice(payment.value, currencyCode)}</span>
@@ -119,17 +131,20 @@ function MyAccountPaymentCard({
 
               <div data-fs-payment-transaction-info>
                 {payment.tid && (
-                  <span data-fs-payment-tid>Tid: {payment.tid}</span>
+                  <span data-fs-payment-tid>
+                    {labels.tidLabel} {payment.tid}
+                  </span>
                 )}
                 {payment.connectorResponses?.authId && (
                   <span data-fs-payment-authid>
-                    AuthId: {String(payment.connectorResponses.authId)}
+                    {labels.authIdLabel}{' '}
+                    {String(payment.connectorResponses.authId)}
                   </span>
                 )}
                 <div data-fs-payment-bank-invoice>
                   {payment.bankIssuedInvoiceIdentificationNumber && (
                     <span data-fs-payment-bank-invoice-number>
-                      Invoice Number:{' '}
+                      {labels.invoiceNumberLabel}{' '}
                       {payment.bankIssuedInvoiceIdentificationNumber}
                     </span>
                   )}
@@ -139,7 +154,7 @@ function MyAccountPaymentCard({
                       href={bankInvoiceUrl}
                       target="_blank"
                     >
-                      Print Bank Invoice
+                      {labels.printBankInvoiceLabel}
                     </Link>
                   )}
                 </div>
@@ -148,8 +163,8 @@ function MyAccountPaymentCard({
           )
         })}
       </div>
-    </MyAccountCard>
+    </Card>
   )
 }
 
-export default MyAccountPaymentCard
+export default PaymentCard

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountPaymentCard/MyAccountPaymentFlagsIcon.tsx → OrderDetails/PaymentCard/PaymentFlagsIcon.tsx}

@@ -1,5 +1,5 @@
 import { Icon as UIIcon } from '@faststore/ui'
-import type { OrderPaymentDataTransactionPayment } from './MyAccountPaymentCard'
+import type { OrderPaymentDataTransactionPayment } from './PaymentCard'
 
 interface PaymentFlagsIconProps {
   payment: Pick<
@@ -45,7 +45,7 @@ function shouldShowFlag(
   return true
 }
 
-function MyAccountPaymentFlagsIcon({ payment }: PaymentFlagsIconProps) {
+function PaymentFlagsIcon({ payment }: PaymentFlagsIconProps) {
   const getPaymentFlag = () => {
     const { group, paymentSystemName, paymentOrigin } = payment
 
@@ -103,4 +103,4 @@ function MyAccountPaymentFlagsIcon({ payment }: PaymentFlagsIconProps) {
   )
 }
 
-export default MyAccountPaymentFlagsIcon
+export default PaymentFlagsIcon

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

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

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountReorderButton/MyAccountReorderButton.tsx → OrderDetails/ReorderButton/ReorderButton.tsx}

@@ -4,15 +4,17 @@ import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
 
 type Order = ServerOrderDetailsQueryQuery['userOrder']
 
-export interface MyAccountReorderButtonProps {
+export interface ReorderButtonProps {
   order: Order
   onClick?: () => void
+  label?: string
 }
 
-export default function MyAccountReorderButton({
+export default function ReorderButton({
   order,
   onClick,
-}: MyAccountReorderButtonProps) {
+  label = 'Reorder',
+}: ReorderButtonProps) {
   const { reorder, loading } = useReorder()
 
   const handleClick = async () => {
@@ -31,7 +33,7 @@ export default function MyAccountReorderButton({
       onClick={handleClick}
       disabled={loading}
     >
-      Reorder
+      {label}
     </Button>
   )
 }

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

@@ -0,0 +1,2 @@
+export { default } from './ReorderButton'
+export type { ReorderButtonProps } from './ReorderButton'

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountStatusCard/MyAccountStatusCard.tsx → OrderDetails/StatusCard/StatusCard.tsx}

@@ -1,9 +1,13 @@
 import { Icon as UIIcon, Skeleton as UISkeleton } from '@faststore/ui'
 import { useRef, type ReactNode } from 'react'
-import MyAccountCard from 'src/components/account/components/MyAccountCard'
+import Card from 'src/components/account/components/Card'
 import { orderStatusMap, type OrderStatusKey } from 'src/utils/userOrderStatus'
 import { useConnectorPositioning } from './useConnectorPositioning'
 import type { ServerOrderDetailsQueryQuery } from '@generated/graphql'
+import {
+  type OrderStatusSectionLabels,
+  resolveOrderStatusLabels,
+} from '../orderDetailsLabels'
 
 export type StepStatus = 'completed' | 'loading' | 'not-started' | 'failed'
 export type StepKey =
@@ -19,9 +23,10 @@ interface Step {
   completedAt?: string
 }
 
-interface MyAccountStatusCardProps {
+interface StatusCardProps {
   status: OrderStatusKey
   creationDate: ServerOrderDetailsQueryQuery['userOrder']['creationDate']
+  labels?: OrderStatusSectionLabels
 }
 
 // Define custom labels for each step based on their status
@@ -212,10 +217,12 @@ const getStepStatus = ({
   return thisStepIndex < currentStepIndex ? 'completed' : 'not-started'
 }
 
-function MyAccountStatusCard({
+function StatusCard({
   status,
   creationDate,
-}: MyAccountStatusCardProps) {
+  labels: labelsProp,
+}: StatusCardProps) {
+  const labels = resolveOrderStatusLabels(labelsProp)
   const containerRef = useRef<HTMLDivElement>(null)
 
   useConnectorPositioning(containerRef)
@@ -237,12 +244,26 @@ function MyAccountStatusCard({
       isFailed,
     })
 
-    const stepLabel = isCanceled
+    let stepLabel = isCanceled
       ? step.key === 'payment'
         ? currentStatusLabel
         : '—' // prevent hydration mismatch
       : step.label(stepStatus)
 
+    if (!isCanceled) {
+      if (step.key === 'order') {
+        stepLabel = labels.orderPlacedStep
+      } else if (step.key === 'payment' && stepStatus === 'loading') {
+        stepLabel = labels.paymentPendingStep
+      } else if (step.key === 'processing' && stepStatus === 'loading') {
+        stepLabel = labels.handlingStep
+      } else if (step.key === 'shipping' && stepStatus === 'completed') {
+        stepLabel = labels.invoicedStep
+      } else if (step.key === 'shipping' && stepStatus === 'loading') {
+        stepLabel = labels.deliveredStep
+      }
+    }
+
     // Add creation date to the order step when it's completed or failed
     let completedAt: string | undefined
     if (
@@ -261,7 +282,7 @@ function MyAccountStatusCard({
   })
 
   return (
-    <MyAccountCard title="Status" data-fs-order-status-card>
+    <Card title={labels.statusTitle} data-fs-order-status-card>
       <div data-fs-order-status-content ref={containerRef}>
         {steps.map((step, index) => (
           <div
@@ -300,8 +321,8 @@ function MyAccountStatusCard({
           </div>
         ))}
       </div>
-    </MyAccountCard>
+    </Card>
   )
 }
 
-export default MyAccountStatusCard
+export default StatusCard

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

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

package/src/components/account/orders/{MyAccountOrderDetails/MyAccountSummaryCard/MyAccountSummaryCard.tsx → OrderDetails/SummaryCard/SummaryCard.tsx}

@@ -1,5 +1,9 @@
-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 OrderSummarySectionLabels,
+  resolveOrderSummaryLabels,
+} from '../orderDetailsLabels'
 
 // Interface for order totals (items, shipping, discounts)
 // TODO: Use type from API
@@ -19,17 +23,20 @@ interface Transaction {
   }>
 }
 
-interface MyAccountSummaryCardProps {
+interface SummaryCardProps {
   totals: Total[]
   currencyCode: string
   transactions: Transaction[]
+  labels?: OrderSummarySectionLabels
 }
 
-function MyAccountSummaryCard({
+function SummaryCard({
   totals,
   currencyCode,
   transactions,
-}: MyAccountSummaryCardProps) {
+  labels: labelsProp,
+}: SummaryCardProps) {
+  const labels = resolveOrderSummaryLabels(labelsProp)
   const formatPrice = useFormatPrice()
 
   // Calculate any payment surcharges from active transactions
@@ -58,7 +65,7 @@ function MyAccountSummaryCard({
     if (surchargeAmount > 0) {
       const interestLineItem = {
         id: 'Interest',
-        name: 'Interest',
+        name: labels.interestLabel,
         value: surchargeAmount,
       }
 
@@ -73,7 +80,7 @@ function MyAccountSummaryCard({
   const totalAmount = displayTotals.reduce((sum, total) => sum + total.value, 0)
 
   return (
-    <MyAccountCard title="Summary" data-fs-order-summary-card>
+    <Card title={labels.summaryTitle} data-fs-order-summary-card>
       {displayTotals.map((total) => (
         <div key={total.id} data-fs-order-summary-item>
           <span>{total.name}</span>
@@ -81,11 +88,11 @@ function MyAccountSummaryCard({
         </div>
       ))}
       <div data-fs-order-summary-item data-fs-order-summary-total>
-        <span>Total</span>
+        <span>{labels.totalLabel}</span>
         <span>{formatPrice(totalAmount, currencyCode)}</span>
       </div>
-    </MyAccountCard>
+    </Card>
   )
 }
 
-export default MyAccountSummaryCard
+export default SummaryCard

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

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

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

@@ -0,0 +1,10 @@
+export { default } from './OrderDetails'
+export { OrderDetailsHeader, OrderDetailsPageShell } from './OrderDetailsHeader'
+export { default as StatusCard } from './StatusCard'
+export { default as PaymentCard } from './PaymentCard'
+export { default as DeliveryCard } from './DeliveryCard'
+export { DeliveryOptionAccordion } from './DeliveryOptionAccordion'
+export { default as SummaryCard } from './SummaryCard'
+export { default as OrderedByCard } from './OrderedByCard'
+export { default as BudgetsCard } from './BudgetsCard'
+export { default as MoreInformationCard } from './MoreInformationCard'