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

package/src/sdk/account/getMyAccountRoutes.ts

@@ -1,13 +1,26 @@
-interface Route {
+export interface Route {
   /* Page name, displayed in the sidebar */
   title: string
   /* Accessible path within My Account */
   route: string
 }
 
+export type AccountNavigationLabels = Partial<{
+  profileLabel: string
+  ordersLabel: string
+  userDetailsLabel: string
+  securityLabel: string
+  manageLabel: string
+  logoutLabel: string
+  switchLabel: string
+  companyLabel: string
+  contractLabel: string
+}>
+
 interface GetMyAccountRouteParams {
   /* Route list */
   routes: Route[]
+  labels?: AccountNavigationLabels
 }
 
 export const PROFILE_ROUTE = '/pvt/account/profile'
@@ -15,6 +28,13 @@ export const ORDERS_ROUTE = '/pvt/account/orders'
 export const USER_DETAILS_ROUTE = '/pvt/account/user-details'
 export const SECURITY_ROUTE = '/pvt/account/security'
 
+const ROUTE_LABEL_KEYS: Record<string, keyof AccountNavigationLabels> = {
+  [PROFILE_ROUTE]: 'profileLabel',
+  [ORDERS_ROUTE]: 'ordersLabel',
+  [USER_DETAILS_ROUTE]: 'userDetailsLabel',
+  [SECURITY_ROUTE]: 'securityLabel',
+}
+
 // This is the default route list for My Account, we should add then as the feature is implemented
 const DEFAULT_ROUTES: Route[] = [
   {
@@ -35,12 +55,37 @@ const DEFAULT_ROUTES: Route[] = [
   },
 ]
 
-export function getMyAccountRoutes({ routes }: GetMyAccountRouteParams) {
+function withNavigationLabels(
+  routes: Route[],
+  labels?: AccountNavigationLabels
+): Route[] {
+  if (!labels) {
+    return routes
+  }
+
+  return routes.map((item) => {
+    const labelKey = ROUTE_LABEL_KEYS[item.route]
+    const title = labelKey ? (labels[labelKey] ?? item.title) : item.title
+
+    return { ...item, title }
+  })
+}
+
+export function getMyAccountRoutes({
+  routes,
+  labels,
+}: GetMyAccountRouteParams) {
   // Ensure all routes have the /pvt prefix
   const normalizedRoutes = routes.map(({ route, ...rest }) => ({
     ...rest,
     route: route.startsWith('/pvt') ? route : `/pvt${route}`,
   }))
 
-  return [...DEFAULT_ROUTES, ...normalizedRoutes]
+  return withNavigationLabels([...DEFAULT_ROUTES, ...normalizedRoutes], labels)
+}
+
+export function getExtraMyAccountRoutes(routes: Route[]): Route[] {
+  const defaultPaths = new Set(DEFAULT_ROUTES.map(({ route }) => route))
+
+  return routes.filter(({ route }) => !defaultPaths.has(route))
 }

package/src/sdk/overrides/PageProvider.tsx

@@ -8,8 +8,9 @@ import type {
 import type { PropsWithChildren } from 'react'
 import { createContext, useContext, useMemo } from 'react'
 import type { SearchPageContextType } from 'src/pages/s'
+import type { AccountPageContext } from 'src/sdk/account/accountPageContext'
 
-interface PageGlobalContext {
+export interface PageGlobalContext {
   globalSettings?: Record<string, unknown>
 }
 
@@ -42,6 +43,7 @@ export interface PageProviderContextValue {
 
 type PageProviderContext =
   | PageGlobalContext
+  | AccountPageContext
   | PDPContext
   | PLPContext
   | SearchPageContext

package/src/server/cms/fetchMyAccountPageContent.ts

@@ -0,0 +1,45 @@
+import type { Locator } from '@vtex/client-cms'
+import type { PageContentType } from 'src/server/cms'
+import { contentService } from 'src/server/content/service'
+import {
+  type MyAccountContentType,
+  withDefaultMyAccountSections,
+} from './myAccountDefaultSections'
+
+type FetchMyAccountPageContentContext = {
+  previewData?: Locator
+  locale?: string
+}
+
+export async function fetchMyAccountPageContent(
+  contentType: MyAccountContentType,
+  context: FetchMyAccountPageContentContext,
+  pagePath: string
+) {
+  const pageContent = await contentService
+    .getSingleContent<PageContentType>({
+      contentType,
+      previewData: context.previewData,
+      locale: context.locale,
+    })
+    .catch((err) => {
+      console.warn('[MyAccount CMS fallback]', {
+        contentType,
+        locale: context.locale,
+        fallbackReason: err instanceof Error ? err.message : String(err),
+        page: pagePath,
+      })
+
+      return { sections: [], settings: {} } as PageContentType
+    })
+
+  const sections = withDefaultMyAccountSections(
+    contentType,
+    pageContent.sections
+  )
+
+  return {
+    ...pageContent,
+    sections,
+  }
+}

package/src/server/cms/myAccountDefaultSections.ts

@@ -0,0 +1,73 @@
+export type MyAccountContentType =
+  | 'myAccountProfile'
+  | 'myAccountOrders'
+  | 'myAccountOrderDetails'
+  | 'myAccountUserDetails'
+  | 'myAccountSecurity'
+  | 'myAccountUnauthorized'
+
+export type DefaultMyAccountSection = {
+  name: string
+  $componentKey: string
+  data: Record<string, unknown>
+}
+
+const DEFAULT_SECTION_KEYS: Record<MyAccountContentType, string[]> = {
+  myAccountProfile: ['AccountNavigation', 'AccountProfile'],
+  myAccountOrders: ['AccountNavigation', 'AccountOrdersList'],
+  myAccountOrderDetails: [
+    'AccountNavigation',
+    'AccountOrderDetails',
+    'AccountOrderStatus',
+    'AccountOrderPayment',
+    'AccountOrderDelivery',
+    'AccountOrderSummary',
+    'AccountOrderOrderedBy',
+    'AccountOrderBudgets',
+    'AccountOrderMoreInfo',
+  ],
+  myAccountUserDetails: ['AccountNavigation', 'AccountUserDetails'],
+  myAccountSecurity: ['AccountNavigation', 'AccountSecurity'],
+  myAccountUnauthorized: ['AccountUnauthorized'],
+}
+
+export function getDefaultMyAccountSections(
+  contentType: MyAccountContentType
+): DefaultMyAccountSection[] {
+  return (DEFAULT_SECTION_KEYS[contentType] ?? []).map((key) => ({
+    name: key,
+    $componentKey: key,
+    data: {},
+  }))
+}
+
+export function withDefaultMyAccountSections<
+  T extends { $componentKey?: string; name: string; data?: unknown },
+>(contentType: MyAccountContentType, sections: T[] | undefined | null): T[] {
+  if (sections && sections.length > 0) {
+    return sections
+  }
+
+  return getDefaultMyAccountSections(contentType) as unknown as T[]
+}
+
+export function extractAccountNavigationData<
+  T extends { $componentKey?: string; name: string; data?: unknown },
+>(sections: T[]) {
+  const navigationSection = sections.find(
+    (section) => (section.$componentKey ?? section.name) === 'AccountNavigation'
+  )
+
+  return {
+    navigationData: (navigationSection?.data ?? {}) as Record<string, string>,
+    pageSections: sections
+      .filter(
+        (section) =>
+          (section.$componentKey ?? section.name) !== 'AccountNavigation'
+      )
+      .map((section) => ({
+        ...section,
+        data: (section.data ?? {}) as Record<string, unknown>,
+      })),
+  }
+}

package/src/utils/userOrderStatus.ts

@@ -103,6 +103,135 @@ export type OrderStatusKey = keyof typeof orderStatusMap
 export type OrderStatusVariant =
   (typeof orderStatusMap)[OrderStatusKey]['variant']
 
+export type OrderStatusCmsLabels = Partial<{
+  orderPlacedStatus: string
+  pendingApprovalStatus: string
+  paymentPendingStatus: string
+  paymentApprovedStatus: string
+  paymentDeniedStatus: string
+  readyForDeliveryStatus: string
+  invoicedStatus: string
+  cancellationRequestedStatus: string
+  canceledStatus: string
+}>
+
+const ORDER_STATUS_CMS_LABEL_KEYS = [
+  'orderPlacedStatus',
+  'pendingApprovalStatus',
+  'paymentPendingStatus',
+  'paymentApprovedStatus',
+  'paymentDeniedStatus',
+  'readyForDeliveryStatus',
+  'invoicedStatus',
+  'cancellationRequestedStatus',
+  'canceledStatus',
+] as const satisfies readonly (keyof OrderStatusCmsLabels)[]
+
+const CMS_LABEL_TO_CANONICAL: Record<
+  keyof Required<OrderStatusCmsLabels>,
+  string
+> = {
+  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',
+}
+
+function cmsLabelsToDisplayOverrides(
+  cmsLabels?: OrderStatusCmsLabels
+): Record<string, string> {
+  if (!cmsLabels) {
+    return {}
+  }
+
+  const overrides: Record<string, string> = {}
+
+  for (const key of ORDER_STATUS_CMS_LABEL_KEYS) {
+    const label = cmsLabels[key]
+    if (label) {
+      overrides[CMS_LABEL_TO_CANONICAL[key].toLowerCase()] = label
+    }
+  }
+
+  return overrides
+}
+
+export function pickOrderStatusCmsLabels(
+  data?: Record<string, unknown>
+): OrderStatusCmsLabels | undefined {
+  if (!data) {
+    return undefined
+  }
+
+  const labels: OrderStatusCmsLabels = {}
+  let hasAny = false
+
+  for (const key of ORDER_STATUS_CMS_LABEL_KEYS) {
+    const value = data[key]
+    if (typeof value === 'string' && value.length > 0) {
+      labels[key] = value
+      hasAny = true
+    }
+  }
+
+  return hasAny ? labels : undefined
+}
+
+export function extractOrderStatusLabelsFromSections<
+  T extends { data?: unknown },
+>(sections: T[]): OrderStatusCmsLabels | undefined {
+  const merged: OrderStatusCmsLabels = {}
+  let hasAny = false
+
+  for (const section of sections) {
+    const picked = pickOrderStatusCmsLabels(
+      (section.data ?? {}) as Record<string, unknown>
+    )
+
+    if (picked) {
+      Object.assign(merged, picked)
+      hasAny = true
+    }
+  }
+
+  return hasAny ? merged : undefined
+}
+
+export function getLocalizedOrderStatusMap(
+  cmsLabels?: OrderStatusCmsLabels
+): Record<OrderStatusKey, OrderStatusMapValue> {
+  const overrides = cmsLabelsToDisplayOverrides(cmsLabels)
+  const localizedMap = {} as Record<OrderStatusKey, OrderStatusMapValue>
+
+  for (const [key, value] of Object.entries(orderStatusMap) as [
+    OrderStatusKey,
+    OrderStatusMapValue,
+  ][]) {
+    const override = overrides[value.label.toLowerCase()]
+    localizedMap[key] = override ? { ...value, label: override } : value
+  }
+
+  return localizedMap
+}
+
+export function getOrderStatusLabel({
+  status,
+  cmsLabels,
+  statusFallback,
+}: {
+  status: string
+  cmsLabels?: OrderStatusCmsLabels
+  statusFallback?: string
+}): string {
+  const localizedMap = getLocalizedOrderStatusMap(cmsLabels)
+  return localizedMap[status as OrderStatusKey]?.label ?? statusFallback ?? '-'
+}
+
 export const groupOrderStatusByLabel = (): Record<string, string[]> => {
   const groupedStatus: Record<string, string[]> = {}
 

package/test/utils/userOrderStatus.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  getLocalizedOrderStatusMap,
+  getOrderStatusLabel,
+  orderStatusMap,
+} from 'src/utils/userOrderStatus'
+
+describe('getLocalizedOrderStatusMap', () => {
+  it('returns default labels when CMS labels are not provided', () => {
+    const map = getLocalizedOrderStatusMap()
+
+    expect(map['payment-approved'].label).toBe(
+      orderStatusMap['payment-approved'].label
+    )
+  })
+
+  it('overrides labels for all statuses in the same group', () => {
+    const map = getLocalizedOrderStatusMap({
+      paymentApprovedStatus: 'Pagamento aprovado',
+    })
+
+    expect(map['payment-approved'].label).toBe('Pagamento aprovado')
+    expect(map['approve-payment'].label).toBe('Pagamento aprovado')
+  })
+
+  it('resolves display label with fallback for unmapped statuses', () => {
+    expect(
+      getOrderStatusLabel({
+        status: 'unknown-status',
+        cmsLabels: { canceledStatus: 'Cancelado' },
+        statusFallback: 'Custom fallback',
+      })
+    ).toBe('Custom fallback')
+  })
+})

package/src/components/account/MyAccountLayout/MyAccountLayout.tsx

@@ -1,32 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import menuRoutes from 'src/customizations/src/myAccount/navigation'
-import { USER_DETAILS_ROUTE } from 'src/sdk/account/getMyAccountRoutes'
-import MyAccountMenu from '../MyAccountMenu'
-import styles from '../section.module.scss'
-
-export type MyAccountLayoutProps = {
-  accountName: string
-  isRepresentative?: boolean
-}
-
-const ROUTES_ONLY_FOR_REPRESENTATIVE = [USER_DETAILS_ROUTE]
-
-const MyAccountLayout = ({
-  children,
-  accountName,
-  isRepresentative = true,
-}: PropsWithChildren<MyAccountLayoutProps>) => {
-  const routes = isRepresentative
-    ? menuRoutes
-    : menuRoutes.filter(
-        ({ route }) => !ROUTES_ONLY_FOR_REPRESENTATIVE.includes(route)
-      )
-
-  return (
-    <section className={styles.layout}>
-      <MyAccountMenu accountName={accountName} items={routes} />
-      <div data-fs-account-layout-content>{children}</div>
-    </section>
-  )
-}
-export default MyAccountLayout

package/src/components/account/MyAccountLayout/index.ts

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

package/src/components/account/MyAccountMenu/index.ts

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

package/src/components/account/MyAccountUserDetails/MyAccountUserDetails.tsx

@@ -1,46 +0,0 @@
-import Tag from '../components/MyAccountTag'
-import AccountTable from '../components/MyAccountTable'
-import AccountHeader from '../components/MyAccountHeader'
-import styles from './styles.module.scss'
-
-type MyAccountUserDetailsProps = {
-  userDetails: {
-    username: string
-    name: string
-    email: string
-    phone: string
-    role: string[]
-    orgUnit: string
-  }
-}
-
-export default function MyAccountUserDetails({
-  userDetails: { username, name, email, phone, role, orgUnit },
-}: MyAccountUserDetailsProps) {
-  return (
-    <section className={styles.section}>
-      <AccountHeader pageTitle="User details" />
-      <div data-fs-user-details-container>
-        <AccountTable
-          rows={[
-            { heading: 'Name', data: name ? name : '–' },
-            { heading: 'Username', data: username ? username : '–' },
-            { heading: 'Phone number', data: phone ? phone : '–' },
-            { heading: 'Email', data: email },
-            {
-              heading: 'Role',
-              data: (
-                <span data-fs-user-details-row-tags>
-                  {role.map((r) => (
-                    <Tag key={r}>{r}</Tag>
-                  ))}
-                </span>
-              ),
-            },
-            { heading: 'Organizational unit', data: orgUnit },
-          ]}
-        />
-      </div>
-    </section>
-  )
-}

package/src/components/account/MyAccountUserDetails/index.ts

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

package/src/components/account/components/MyAccountAccordion/index.ts

@@ -1,4 +0,0 @@
-export { default as MyAccountAccordion } from './MyAccountAccordion'
-export { default as MyAccountAccordionButton } from './MyAccountAccordionButton'
-export { default as MyAccountAccordionItem } from './MyAccountAccordionItem'
-export { default as MyAccountAccordionPanel } from './MyAccountAccordionPanel'

package/src/components/account/components/MyAccountCard/index.ts

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

package/src/components/account/components/MyAccountHeader/index.ts

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

package/src/components/account/components/MyAccountStatusBadge/MyAccountStatusBadge.tsx

@@ -1,28 +0,0 @@
-import {
-  orderStatusMap,
-  type OrderStatusKey,
-  type OrderStatusMapValue,
-} from 'src/utils/userOrderStatus'
-
-function getStatusVariant({ status }: { status: string }) {
-  return (
-    (orderStatusMap[status as OrderStatusKey] as OrderStatusMapValue)
-      ?.variant || 'neutral'
-  )
-}
-
-function MyAccountStatusBadge({
-  status,
-  statusFallback,
-}: { status: string; statusFallback?: string }) {
-  return (
-    <span
-      data-fs-my-account-badge
-      data-fs-my-account-badge-variant={getStatusVariant({ status })}
-    >
-      {orderStatusMap[status as OrderStatusKey]?.label || statusFallback || '-'}
-    </span>
-  )
-}
-
-export default MyAccountStatusBadge

package/src/components/account/components/MyAccountStatusBadge/index.ts

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

package/src/components/account/components/MyAccountTable/index.ts

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

package/src/components/account/components/MyAccountTag/index.ts

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

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterFacetDateRange/MyAccountFilterFacetDateRange.tsx

@@ -1,113 +0,0 @@
-import { InputField } from '@faststore/ui'
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
-
-export interface MyAccountFilterFacetDateRangeProps {
-  /**
-   * The from value of the Range Facet
-   */
-  from: string
-  /**
-   * The to value of the Range Facet
-   */
-  to: string
-  /**
-   * The function to be called when the date range changes
-   */
-  setDisabled: (disabled: boolean) => void
-}
-
-const MyAccountFilterFacetDateRange = forwardRef<
-  {
-    clear: () => void
-    getDataRangeFacet: () => {
-      key: string
-      value: { from: string; to: string }
-    }
-  },
-  MyAccountFilterFacetDateRangeProps
->(({ to, from, setDisabled }, ref) => {
-  const inputFromRef = useRef<HTMLInputElement>(null)
-  const inputToRef = useRef<HTMLInputElement>(null)
-  const [inputFromError, setInputFromError] = useState<string>()
-  const [inputToError, setInputToError] = useState<string>()
-
-  const [dateRange, setDateRange] = useState<{ from: string; to: string }>({
-    from,
-    to,
-  })
-
-  function onEnd(value: { from: string; to: string }) {
-    if (!value.from || !value.to) {
-      setInputFromError(undefined)
-      setInputToError(undefined)
-      setDisabled(false)
-      return
-    }
-
-    if (new Date(value.from) > new Date(value.to)) {
-      setInputFromError('Invalid date range')
-      setDisabled(true)
-    } else {
-      setInputFromError(undefined)
-      setInputToError(undefined)
-      setDisabled(false)
-    }
-  }
-
-  function onChangeInputFrom(value: string) {
-    setDateRange({ ...dateRange, from: String(value) })
-    onEnd?.({ ...dateRange, from: String(value) })
-  }
-
-  function onChangeInputTo(value: string) {
-    setDateRange({ ...dateRange, to: String(value) })
-    onEnd?.({ ...dateRange, to: String(value) })
-  }
-
-  useImperativeHandle(ref, () => ({
-    clear: () => {
-      setInputFromError(undefined)
-      setInputToError(undefined)
-      setDateRange({ from: '', to: '' })
-      if (inputFromRef.current) inputFromRef.current.value = ''
-      if (inputToRef.current) inputToRef.current.value = ''
-    },
-    getDataRangeFacet: () => {
-      return {
-        key: 'dateRange',
-        value: dateRange,
-      }
-    },
-  }))
-
-  return (
-    <div data-fs-list-orders-filters-date-range>
-      <div data-fs-list-orders-filters-date-range-inputs>
-        <InputField
-          id="date-range-from"
-          label="From"
-          type="date"
-          inputMode="text"
-          error={inputFromError}
-          inputRef={inputFromRef}
-          value={dateRange.from}
-          onChange={(e) => onChangeInputFrom(e.target.value)}
-          onBlur={() => !inputFromError && onEnd?.(dateRange)}
-        />
-        <InputField
-          id="date-range-to"
-          label="To"
-          type="date"
-          inputMode="text"
-          error={inputToError}
-          inputRef={inputToRef}
-          value={dateRange.to}
-          onChange={(e) => onChangeInputTo(e.target.value)}
-          onBlur={() => !inputToError && onEnd?.(dateRange)}
-        />
-      </div>
-    </div>
-  )
-})
-
-export default MyAccountFilterFacetDateRange

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterFacetDateRange/index.ts

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

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterFacetPendingApproval/index.ts

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

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/index.ts

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

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrdersTable/index.ts

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

package/src/components/account/orders/MyAccountListOrders/MyAccountSelectedTags/index.ts

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

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

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

package/src/components/account/orders/MyAccountOrderDetails/MyAccountBudgetsCard/index.ts

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

package/src/components/account/orders/MyAccountOrderDetails/MyAccountBuyingPolicyAlert/index.ts

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

package/src/components/account/orders/MyAccountOrderDetails/MyAccountDeliveryCard/index.ts

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