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

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

@@ -0,0 +1,135 @@
+import type { OrderDeliverySectionLabels } from './orderDetailsLabels'
+
+type DeliveryOptionLabelData = {
+  selectedSla?: string | null
+  deliveryChannel?: string | null
+  deliveryCompany?: string | null
+  seller?: string | null
+  shippingEstimate?: string | null
+  shippingEstimateDate?: string | null
+  friendlyDeliveryOptionName?: string | null
+  address?: {
+    neighborhood?: string | null
+    addressId?: string | null
+  } | null
+  pickupStoreInfo?: {
+    address?: { neighborhood?: string | null } | null
+  } | null
+  deliveryWindow?: {
+    startDateUtc?: string | null
+    endDateUtc?: string | null
+  } | null
+}
+
+type EstimateUnit = 'bd' | 'd' | 'h' | 'm'
+type EstimateQuantity = 'zero' | 'one' | 'other'
+
+const ESTIMATE_LABEL_KEYS: Record<
+  EstimateUnit,
+  Record<EstimateQuantity, keyof OrderDeliverySectionLabels>
+> = {
+  bd: {
+    zero: 'businessDaysZeroTemplate',
+    one: 'businessDaysOneTemplate',
+    other: 'businessDaysOtherTemplate',
+  },
+  d: {
+    zero: 'daysZeroTemplate',
+    one: 'daysOneTemplate',
+    other: 'daysOtherTemplate',
+  },
+  h: {
+    zero: 'hoursZeroTemplate',
+    one: 'hoursOneTemplate',
+    other: 'hoursOtherTemplate',
+  },
+  m: {
+    zero: 'minutesZeroTemplate',
+    one: 'minutesOneTemplate',
+    other: 'minutesOtherTemplate',
+  },
+}
+
+const CHANNEL_LABEL_KEYS: Record<
+  string,
+  keyof OrderDeliverySectionLabels | undefined
+> = {
+  delivery: 'deliveryChannelLabel',
+  pickup: 'pickupChannelLabel',
+  'pickup-in-point': 'pickupChannelLabel',
+  'take-away': 'takeAwayChannelLabel',
+  '': undefined,
+}
+
+function isEstimateUnit(unit: string): unit is EstimateUnit {
+  return unit === 'bd' || unit === 'd' || unit === 'h' || unit === 'm'
+}
+
+function getLocalizedEstimate(
+  estimate: string,
+  labels: Required<OrderDeliverySectionLabels>
+): string | undefined {
+  const count = estimate.split(/\D+/)[0]
+  const unit = estimate.split(/\d+/)[1]
+
+  if (count === '' || Number.isNaN(Number(count)) || !isEstimateUnit(unit)) {
+    return undefined
+  }
+
+  let quantity: EstimateQuantity = 'other'
+  if (Number(count) === 0) {
+    quantity = 'zero'
+  } else if (Number(count) < 2) {
+    quantity = 'one'
+  }
+
+  const template = labels[ESTIMATE_LABEL_KEYS[unit][quantity]]
+
+  return template.replace('{count}', count)
+}
+
+export function getDeliveryOptionKey(option: DeliveryOptionLabelData): string {
+  return [
+    option.selectedSla,
+    option.deliveryChannel,
+    option.deliveryCompany,
+    option.seller,
+    option.shippingEstimate,
+    option.shippingEstimateDate,
+    option.address?.addressId,
+    option.deliveryWindow?.startDateUtc,
+    option.deliveryWindow?.endDateUtc,
+  ].join('|')
+}
+
+export function getDeliveryOptionLabel(
+  option: DeliveryOptionLabelData,
+  labels: Required<OrderDeliverySectionLabels>
+): string {
+  const channelLabelKey =
+    CHANNEL_LABEL_KEYS[option.deliveryChannel ?? 'unknown']
+  const estimate = option.shippingEstimate
+    ? getLocalizedEstimate(option.shippingEstimate, labels)
+    : undefined
+
+  if (channelLabelKey === undefined && option.deliveryChannel) {
+    return option.friendlyDeliveryOptionName ?? ''
+  }
+
+  if (!estimate) {
+    return channelLabelKey
+      ? labels[channelLabelKey]
+      : (option.friendlyDeliveryOptionName ?? '')
+  }
+
+  const neighborhood =
+    option.address?.neighborhood ??
+    option.pickupStoreInfo?.address?.neighborhood
+  const destination = neighborhood
+    ? labels.toNeighborhoodTemplate.replace('{neighborhood}', neighborhood)
+    : ''
+
+  return [channelLabelKey ? labels[channelLabelKey] : '', estimate, destination]
+    .filter(Boolean)
+    .join(' ')
+}

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

@@ -13,15 +13,31 @@ export type OrderDetailsHeaderLabels = {
   /** Supports the `{policy}` placeholder, replaced with the policy name. */
   rejectModalMessage?: string
   rejectModalConfirmText?: string
+  /** Supports the `{policy}` placeholder, replaced with the policy name. */
+  approveSuccessToast?: string
+  approveErrorToast?: string
+  /** Supports the `{policy}` placeholder, replaced with the policy name. */
+  rejectSuccessToast?: string
+  rejectErrorToast?: string
+  pendingFurtherApprovalsAlert?: string
 }
 
 export type OrderStatusSectionLabels = {
   statusTitle?: string
   orderPlacedStep?: string
+  approvedStep?: string
+  pendingApprovalStep?: string
+  deniedStep?: string
+  paymentApprovedStep?: string
   paymentPendingStep?: string
+  paymentAuthorizationStep?: string
+  paymentDeniedStep?: string
+  readyForDeliveryStep?: string
   handlingStep?: string
+  canceledStep?: string
   invoicedStep?: string
   deliveredStep?: string
+  shipOrderStep?: string
 }
 
 export type OrderPaymentSectionLabels = {
@@ -50,12 +66,33 @@ export type OrderDeliverySectionLabels = {
   eachLabel?: string
   taxesLabel?: string
   totalLabel?: string
+  deliveryChannelLabel?: string
+  pickupChannelLabel?: string
+  takeAwayChannelLabel?: string
+  businessDaysZeroTemplate?: string
+  businessDaysOneTemplate?: string
+  businessDaysOtherTemplate?: string
+  daysZeroTemplate?: string
+  daysOneTemplate?: string
+  daysOtherTemplate?: string
+  hoursZeroTemplate?: string
+  hoursOneTemplate?: string
+  hoursOtherTemplate?: string
+  minutesZeroTemplate?: string
+  minutesOneTemplate?: string
+  minutesOtherTemplate?: string
+  toNeighborhoodTemplate?: string
 }
 
 export type OrderSummarySectionLabels = {
   summaryTitle?: string
   totalLabel?: string
   interestLabel?: string
+  itemsTotalLabel?: string
+  discountsTotalLabel?: string
+  shippingTotalLabel?: string
+  taxTotalLabel?: string
+  changeTotalLabel?: string
 }
 
 export type OrderOrderedBySectionLabels = {
@@ -91,15 +128,30 @@ export const defaultOrderDetailsHeaderLabels: Required<OrderDetailsHeaderLabels>
     rejectModalMessage:
       "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.",
     rejectModalConfirmText: 'Reject',
+    approveSuccessToast: '{policy} policy approved successfully.',
+    approveErrorToast: "Policy couldn't be approved due to a technical issue.",
+    rejectSuccessToast: '{policy} policy rejected successfully. Order denied.',
+    rejectErrorToast: "Policy couldn't be rejected due to a technical issue.",
+    pendingFurtherApprovalsAlert:
+      'Your approval is recorded. This order is still pending further approvals.',
   }
 
 export const defaultOrderStatusLabels: Required<OrderStatusSectionLabels> = {
   statusTitle: 'Status',
   orderPlacedStep: 'Order placed',
+  approvedStep: 'Approved',
+  pendingApprovalStep: 'Pending approval',
+  deniedStep: 'Denied',
+  paymentApprovedStep: 'Payment Approved',
   paymentPendingStep: 'Payment Pending',
+  paymentAuthorizationStep: 'Payment authorization',
+  paymentDeniedStep: 'Payment Denied',
+  readyForDeliveryStep: 'Ready for Delivery',
   handlingStep: 'Handling order',
+  canceledStep: 'Canceled',
   invoicedStep: 'Invoiced',
   deliveredStep: 'Delivered',
+  shipOrderStep: 'Ship order',
 }
 
 export const defaultOrderPaymentLabels: Required<OrderPaymentSectionLabels> = {
@@ -129,12 +181,33 @@ export const defaultOrderDeliveryLabels: Required<OrderDeliverySectionLabels> =
     eachLabel: 'Each',
     taxesLabel: 'Taxes',
     totalLabel: 'Total',
+    deliveryChannelLabel: 'Delivery',
+    pickupChannelLabel: 'Pickup',
+    takeAwayChannelLabel: 'Take away',
+    businessDaysZeroTemplate: 'Today',
+    businessDaysOneTemplate: 'In 1 business day',
+    businessDaysOtherTemplate: 'Up to {count} business days',
+    daysZeroTemplate: 'Today',
+    daysOneTemplate: 'In 1 day',
+    daysOtherTemplate: 'Up to {count} days',
+    hoursZeroTemplate: 'Now',
+    hoursOneTemplate: 'In 1 hour',
+    hoursOtherTemplate: 'Up to {count} hours',
+    minutesZeroTemplate: 'Now',
+    minutesOneTemplate: 'In 1 minute',
+    minutesOtherTemplate: 'Up to {count} minutes',
+    toNeighborhoodTemplate: 'to {neighborhood}',
   }
 
 export const defaultOrderSummaryLabels: Required<OrderSummarySectionLabels> = {
   summaryTitle: 'Summary',
   totalLabel: 'Total',
   interestLabel: 'Interest',
+  itemsTotalLabel: 'Items Total',
+  discountsTotalLabel: 'Discounts Total',
+  shippingTotalLabel: 'Shipping Total',
+  taxTotalLabel: 'Tax Total',
+  changeTotalLabel: 'Change Total',
 }
 
 export const defaultOrderOrderedByLabels: Required<OrderOrderedBySectionLabels> =

package/src/components/navigation/Navbar/Navbar.tsx

@@ -3,8 +3,6 @@ import { useCallback, useRef, useState } from 'react'
 
 import { Icon as UIIcon, useScrollDirection, useUI } from '@faststore/ui'
 
-import { Skeleton as UISkeleton } from '@faststore/ui'
-import { OrganizationSignInButton } from 'src/components/account/Drawer/OrganizationSignInButton'
 import CartToggle from 'src/components/cart/CartToggle'
 import type { SearchInputRef } from 'src/components/search/SearchInput'
 import SearchInput from 'src/components/search/SearchInput'
@@ -13,10 +11,12 @@ import LocalizationButton from 'src/components/ui/LocalizationButton'
 import Logo from 'src/components/ui/Logo'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { useSession } from 'src/sdk/session'
+import { isSignInAreaResolved } from 'src/sdk/session/isSignInAreaResolved'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
 
 import storeConfig from 'discovery.config'
 import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
+import { NavbarAccountArea } from './NavbarAccountArea'
 
 const NavbarLinks = dynamic(
   () =>
@@ -121,7 +121,11 @@ function Navbar({
   const scrollDirection = useScrollDirection()
   const { openNavbar, navbar: displayNavbar } = useUI()
   const { isDesktop } = useScreenResize()
-  const { b2b, isSessionReady } = useSession()
+  const { b2b, isSessionReady, hasValidated } = useSession()
+  const isSignInResolved = isSignInAreaResolved({
+    isSessionReady,
+    hasValidated,
+  })
 
   const searchMobileRef = useRef<SearchInputRef>(null)
   const [searchExpanded, setSearchExpanded] = useState(false)
@@ -232,22 +236,16 @@ function Navbar({
               />
             )}
 
-            {isDesktop &&
-              (isSessionReady ? (
-                isOrganizationEnabled ? (
-                  <OrganizationSignInButton
-                    icon={signInButton.icon}
-                    isRepresentative={isRepresentative}
-                  />
-                ) : (
-                  <ButtonSignIn.Component {...signInButton} />
-                )
-              ) : (
-                <UISkeleton
-                  data-fs-navbar-signin-skeleton
-                  size={{ width: '140px', height: '2.5rem' }}
-                />
-              ))}
+            {isDesktop && (
+              <NavbarAccountArea
+                isSignInResolved={isSignInResolved}
+                isOrganizationEnabled={isOrganizationEnabled}
+                isRepresentative={isRepresentative}
+                signInButton={signInButton}
+                ButtonSignIn={ButtonSignIn}
+                skeletonAttr="data-fs-navbar-signin-skeleton"
+              />
+            )}
 
             <CartToggle {...cart} />
           </NavbarButtons.Component>

package/src/components/navigation/Navbar/NavbarAccountArea.tsx

@@ -0,0 +1,57 @@
+import { Skeleton as UISkeleton } from '@faststore/ui'
+
+import { OrganizationSignInButton } from 'src/components/account/Drawer/OrganizationSignInButton'
+import type { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+
+import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
+
+type NavbarOverrides = ReturnType<typeof useOverrideComponents<'Navbar'>>
+
+export type NavbarAccountAreaProps = {
+  /** Whether the B2B session has resolved enough to know what to render. */
+  isSignInResolved: boolean
+  /** Whether the representative-only Organization sign-in area is enabled. */
+  isOrganizationEnabled: boolean | undefined
+  isRepresentative?: boolean
+  signInButton: SectionNavbarProps['signInButton']
+  ButtonSignIn: NavbarOverrides['_experimentalButtonSignIn']
+  /** Data attribute toggled on the loading skeleton (Navbar vs NavbarSlider). */
+  skeletonAttr:
+    | 'data-fs-navbar-signin-skeleton'
+    | 'data-fs-navbar-slider-signin-skeleton'
+}
+
+/**
+ * Renders the account/sign-in area shared by the desktop Navbar and the
+ * mobile NavbarSlider: a loading skeleton until the B2B session resolves,
+ * then either the Organization sign-in button (representatives) or the
+ * storefront's own sign-in button.
+ */
+export const NavbarAccountArea = ({
+  isSignInResolved,
+  isOrganizationEnabled,
+  isRepresentative,
+  signInButton,
+  ButtonSignIn,
+  skeletonAttr,
+}: NavbarAccountAreaProps) => {
+  if (!isSignInResolved) {
+    return (
+      <UISkeleton
+        {...{ [skeletonAttr]: true }}
+        size={{ width: '140px', height: '2.5rem' }}
+      />
+    )
+  }
+
+  if (isOrganizationEnabled) {
+    return (
+      <OrganizationSignInButton
+        icon={signInButton.icon}
+        isRepresentative={isRepresentative}
+      />
+    )
+  }
+
+  return <ButtonSignIn.Component {...signInButton} />
+}

package/src/components/navigation/NavbarSlider/NavbarSlider.tsx

@@ -1,4 +1,4 @@
-import { Skeleton as UISkeleton, useFadeEffect, useUI } from '@faststore/ui'
+import { useFadeEffect, useUI } from '@faststore/ui'
 import { Suspense } from 'react'
 
 import storeConfig from 'discovery.config'
@@ -9,10 +9,11 @@ import LocalizationButton from 'src/components/ui/LocalizationButton'
 import Logo from 'src/components/ui/Logo'
 
 import type { NavbarProps } from '../Navbar'
+import { NavbarAccountArea } from '../Navbar/NavbarAccountArea'
 
-import { OrganizationSignInButton } from 'src/components/account/Drawer/OrganizationSignInButton'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { useSession } from 'src/sdk/session'
+import { isSignInAreaResolved } from 'src/sdk/session/isSignInAreaResolved'
 import styles from './section.module.scss'
 
 interface NavbarSliderProps {
@@ -44,7 +45,11 @@ function NavbarSlider({
 
   const { closeNavbar } = useUI()
   const { fade, fadeOut } = useFadeEffect()
-  const { b2b, isSessionReady } = useSession()
+  const { b2b, isSessionReady, hasValidated } = useSession()
+  const isSignInResolved = isSignInAreaResolved({
+    isSessionReady,
+    hasValidated,
+  })
 
   const isFaststoreMyAccountEnabled =
     storeConfig.experimental?.enableFaststoreMyAccount
@@ -84,21 +89,14 @@ function NavbarSlider({
       </NavbarSliderContent.Component>
       <NavbarSliderFooter.Component {...NavbarSliderFooter.props}>
         <Suspense fallback={<ButtonSignInFallback />}>
-          {isSessionReady ? (
-            isOrganizationEnabled ? (
-              <OrganizationSignInButton
-                icon={signInButton.icon}
-                isRepresentative={isRepresentative}
-              />
-            ) : (
-              <ButtonSignIn.Component {...signInButton} />
-            )
-          ) : (
-            <UISkeleton
-              data-fs-navbar-slider-signin-skeleton
-              size={{ width: '140px', height: '2.5rem' }}
-            />
-          )}
+          <NavbarAccountArea
+            isSignInResolved={isSignInResolved}
+            isOrganizationEnabled={isOrganizationEnabled}
+            isRepresentative={isRepresentative}
+            signInButton={signInButton}
+            ButtonSignIn={ButtonSignIn}
+            skeletonAttr="data-fs-navbar-slider-signin-skeleton"
+          />
         </Suspense>
         {isLocalizationEnabled && (
           <LocalizationButton

package/src/components/sections/Account/AccountOrderDelivery.tsx

@@ -4,6 +4,7 @@ import {
   type OrderDeliverySectionLabels,
   defaultOrderDeliveryLabels,
 } from 'src/components/account/orders/OrderDetails/orderDetailsLabels'
+import { getDeliveryOptionKey } from 'src/components/account/orders/OrderDetails/getDeliveryOptionLabel'
 import type {
   UserOrderDeliveryOption,
   UserOrderDeliveryOptionsData,
@@ -35,10 +36,11 @@ const AccountOrderDelivery = (props: AccountOrderDeliveryProps) => {
             ?.fields || []
         }
         title={labels.deliveryTitle}
+        labels={labels}
       />
       {order.deliveryOptionsData.deliveryOptions.map((option) => (
         <DeliveryOptionAccordion
-          key={option.friendlyDeliveryOptionName}
+          key={getDeliveryOptionKey(option)}
           deliveryOption={option as UserOrderDeliveryOption}
           contact={order.deliveryOptionsData.contact}
           currencyCode={order.storePreferencesData.currencyCode}

package/src/components/sections/Account/AccountOrderDetails.tsx

@@ -22,6 +22,14 @@ const AccountOrderDetails = ({
   cancelErrorToast = defaultOrderDetailsHeaderLabels.cancelErrorToast,
   approveLabel = defaultOrderDetailsHeaderLabels.approveLabel,
   rejectLabel = defaultOrderDetailsHeaderLabels.rejectLabel,
+  rejectModalTitle = defaultOrderDetailsHeaderLabels.rejectModalTitle,
+  rejectModalMessage = defaultOrderDetailsHeaderLabels.rejectModalMessage,
+  rejectModalConfirmText = defaultOrderDetailsHeaderLabels.rejectModalConfirmText,
+  approveSuccessToast = defaultOrderDetailsHeaderLabels.approveSuccessToast,
+  approveErrorToast = defaultOrderDetailsHeaderLabels.approveErrorToast,
+  rejectSuccessToast = defaultOrderDetailsHeaderLabels.rejectSuccessToast,
+  rejectErrorToast = defaultOrderDetailsHeaderLabels.rejectErrorToast,
+  pendingFurtherApprovalsAlert = defaultOrderDetailsHeaderLabels.pendingFurtherApprovalsAlert,
 }: AccountOrderDetailsProps) => {
   const { order, orderStatusLabels } =
     useAccountPageData<AccountOrderDetailsPageData>()
@@ -46,6 +54,14 @@ const AccountOrderDetails = ({
           cancelErrorToast,
           approveLabel,
           rejectLabel,
+          rejectModalTitle,
+          rejectModalMessage,
+          rejectModalConfirmText,
+          approveSuccessToast,
+          approveErrorToast,
+          rejectSuccessToast,
+          rejectErrorToast,
+          pendingFurtherApprovalsAlert,
         }}
       />
     </Section>

package/src/components/sections/Account/AccountOrderStatus.tsx

@@ -7,20 +7,34 @@ import {
   type AccountOrderDetailsPageData,
   useAccountPageData,
 } from 'src/sdk/account/accountPageContext'
-import type { OrderStatusKey } from 'src/utils/userOrderStatus'
+import type {
+  OrderStatusCmsLabels,
+  OrderStatusKey,
+} from 'src/utils/userOrderStatus'
 import Section from '../Section'
 
-export type AccountOrderStatusProps = OrderStatusSectionLabels
+export type AccountOrderStatusProps = OrderStatusSectionLabels &
+  OrderStatusCmsLabels
 
 const AccountOrderStatus = ({
   statusTitle = defaultOrderStatusLabels.statusTitle,
   orderPlacedStep = defaultOrderStatusLabels.orderPlacedStep,
+  approvedStep = defaultOrderStatusLabels.approvedStep,
+  pendingApprovalStep = defaultOrderStatusLabels.pendingApprovalStep,
+  deniedStep = defaultOrderStatusLabels.deniedStep,
+  paymentApprovedStep = defaultOrderStatusLabels.paymentApprovedStep,
   paymentPendingStep = defaultOrderStatusLabels.paymentPendingStep,
+  paymentAuthorizationStep = defaultOrderStatusLabels.paymentAuthorizationStep,
+  paymentDeniedStep = defaultOrderStatusLabels.paymentDeniedStep,
+  readyForDeliveryStep = defaultOrderStatusLabels.readyForDeliveryStep,
   handlingStep = defaultOrderStatusLabels.handlingStep,
+  canceledStep = defaultOrderStatusLabels.canceledStep,
   invoicedStep = defaultOrderStatusLabels.invoicedStep,
   deliveredStep = defaultOrderStatusLabels.deliveredStep,
+  shipOrderStep = defaultOrderStatusLabels.shipOrderStep,
 }: AccountOrderStatusProps) => {
-  const { order } = useAccountPageData<AccountOrderDetailsPageData>()
+  const { order, orderStatusLabels } =
+    useAccountPageData<AccountOrderDetailsPageData>()
 
   if (!order) {
     return null
@@ -31,13 +45,23 @@ const AccountOrderStatus = ({
       <StatusCard
         status={order.status as OrderStatusKey}
         creationDate={order.creationDate}
+        statusLabels={orderStatusLabels}
         labels={{
           statusTitle,
           orderPlacedStep,
+          approvedStep,
+          pendingApprovalStep,
+          deniedStep,
+          paymentApprovedStep,
           paymentPendingStep,
+          paymentAuthorizationStep,
+          paymentDeniedStep,
+          readyForDeliveryStep,
           handlingStep,
+          canceledStep,
           invoicedStep,
           deliveredStep,
+          shipOrderStep,
         }}
       />
     </Section>

package/src/components/sections/Account/AccountOrdersList.tsx

@@ -21,6 +21,8 @@ const AccountOrdersList = ({
   placedOnLabel = defaultListOrdersLabels.placedOnLabel,
   deliveryByLabel = defaultListOrdersLabels.deliveryByLabel,
   pendingApprovalLabel = defaultListOrdersLabels.pendingApprovalLabel,
+  statusFilterLabel = defaultListOrdersLabels.statusFilterLabel,
+  orderDateFilterLabel = defaultListOrdersLabels.orderDateFilterLabel,
   paginationOfLabel = defaultListOrdersLabels.paginationOfLabel,
   previousPageLabel = defaultListOrdersLabels.previousPageLabel,
   nextPageLabel = defaultListOrdersLabels.nextPageLabel,
@@ -61,6 +63,8 @@ const AccountOrdersList = ({
           placedOnLabel,
           deliveryByLabel,
           pendingApprovalLabel,
+          statusFilterLabel,
+          orderDateFilterLabel,
           paginationOfLabel,
           previousPageLabel,
           nextPageLabel,