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

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,

package/src/pages/api/graphql.ts

@@ -150,6 +150,112 @@ const hasVtexIdclientAutCookie = (request: NextApiRequest): boolean => {
   )
 }
 
+/**
+ * Responds to a GraphQL execution that returned errors: recovers the
+ * upstream status from a FastStoreError when possible instead of collapsing
+ * everything to 500, and logs every error for observability.
+ */
+const respondWithGraphqlErrors = (
+  errors: readonly unknown[],
+  response: Parameters<NextApiHandler>[1]
+) => {
+  // After error masking, entries are GraphQLError instances whose `name` is
+  // "GraphQLError" — the original FastStoreError (carrying the upstream
+  // status) is nested in `originalError`. Recover it so the BFF propagates
+  // the real status instead of collapsing everything to 500.
+  const fastStoreError = errors.map(recoverFastStoreError).find(Boolean)
+  const reportedErrors = errors.map((graphqlError) => {
+    const fsError = recoverFastStoreError(graphqlError)
+
+    return {
+      message: (graphqlError as { message?: string })?.message,
+      status: fsError?.extensions.status,
+      type: fsError?.extensions.type,
+    }
+  })
+
+  console.error('Graphql execution returned with error: ', reportedErrors)
+  OTELLogger(
+    'error',
+    'Graphql execution returned with error: %o',
+    reportedErrors
+  )
+
+  const status = fastStoreError?.extensions.status ?? 500
+
+  // Error responses are never cacheable: some upstream statuses (404, 410,
+  // ...) are heuristically cacheable by intermediaries per RFC 9111 §4.2.2,
+  // which would let a CDN cache an error for this operation.
+  response.setHeader('cache-control', 'no-store')
+
+  // No recoverable FastStoreError: keep the masked, body-less 500.
+  if (!fastStoreError) {
+    response.status(status).end()
+    return
+  }
+
+  // Only FastStoreError-derived details are exposed. `type`/`status` are a
+  // closed enum (safe everywhere); the free-text `message` may echo raw
+  // upstream text, so it is restricted to non-production responses. The
+  // full message is still available server-side via the log above.
+  const responseError = {
+    extensions: {
+      type: fastStoreError.extensions.type,
+      status: fastStoreError.extensions.status,
+    },
+    ...(process.env.NODE_ENV === 'production'
+      ? {}
+      : { message: fastStoreError.message }),
+  }
+
+  response.status(status)
+  response.setHeader('content-type', 'application/json')
+  response.send(JSON.stringify({ errors: [responseError] }))
+}
+
+/**
+ * Responds to an error thrown out of the main handler try-block (a rejected
+ * `parseRequest`/`execute`, or anything else unexpected).
+ */
+const respondToUnexpectedError = (
+  err: unknown,
+  response: Parameters<NextApiHandler>[1]
+) => {
+  // Same rationale as `respondWithGraphqlErrors`: a 400/401/500 here must
+  // never be cached. This path can run after the success branch has already
+  // set a cacheable cache-control (e.g. `setHeader('set-cookie', ...)`
+  // rejecting a malformed upstream cookie, or `JSON.stringify` throwing
+  // after cache-control was set but before `send` completed). Guarded by
+  // `headersSent`: if the throw came from `send()` itself after headers were
+  // already flushed, `setHeader` would throw ERR_HTTP_HEADERS_SENT and this
+  // would fail to produce a handled response.
+  if (!response.headersSent) {
+    response.setHeader('cache-control', 'no-store')
+  }
+
+  console.error(
+    'Something unexpected occurred querying Graphql endpoint: \n',
+    err
+  )
+  OTELLogger(
+    'error',
+    'Something unexpected occurred querying Graphql endpoint: %o',
+    err
+  )
+
+  if (err instanceof BadRequestError) {
+    response.status(400).end()
+    return
+  }
+
+  if (err instanceof UnauthorizedError) {
+    response.status(401).end()
+    return
+  }
+
+  response.status(500).end()
+}
+
 const handler: NextApiHandler = async (request, response) => {
   if (request.method !== 'POST' && request.method !== 'GET') {
     response.status(405).end()
@@ -222,53 +328,7 @@ const handler: NextApiHandler = async (request, response) => {
     const hasErrors = Array.isArray(errors) && errors.length > 0
 
     if (hasErrors) {
-      // After error masking, entries are GraphQLError instances whose
-      // `name` is "GraphQLError" — the original FastStoreError (carrying the
-      // upstream status) is nested in `originalError`. Recover it so the BFF
-      // propagates the real status instead of collapsing everything to 500.
-      const fastStoreError = errors.map(recoverFastStoreError).find(Boolean)
-      const reportedErrors = errors.map((graphqlError) => {
-        const fsError = recoverFastStoreError(graphqlError)
-
-        return {
-          message: (graphqlError as { message?: string })?.message,
-          status: fsError?.extensions.status,
-          type: fsError?.extensions.type,
-        }
-      })
-
-      console.error('Graphql execution returned with error: ', reportedErrors)
-      OTELLogger(
-        'error',
-        'Graphql execution returned with error: %o',
-        reportedErrors
-      )
-
-      const status = fastStoreError?.extensions.status ?? 500
-
-      // No recoverable FastStoreError: keep the masked, body-less 500.
-      if (!fastStoreError) {
-        response.status(status).end()
-        return
-      }
-
-      // Only FastStoreError-derived details are exposed. `type`/`status` are a
-      // closed enum (safe everywhere); the free-text `message` may echo raw
-      // upstream text, so it is restricted to non-production responses. The
-      // full message is still available server-side via the log above.
-      const responseError = {
-        extensions: {
-          type: fastStoreError.extensions.type,
-          status: fastStoreError.extensions.status,
-        },
-        ...(process.env.NODE_ENV !== 'production'
-          ? { message: fastStoreError.message }
-          : {}),
-      }
-
-      response.status(status)
-      response.setHeader('content-type', 'application/json')
-      response.send(JSON.stringify({ errors: [responseError] }))
+      respondWithGraphqlErrors(errors, response)
       return
     }
 
@@ -321,28 +381,7 @@ const handler: NextApiHandler = async (request, response) => {
     response.setHeader('content-type', 'application/json')
     response.send(JSON.stringify({ data, errors }))
   } catch (err) {
-    console.error(
-      'Something unexpected occurred querying Graphql endpoint: \n',
-      err
-    )
-    OTELLogger(
-      'error',
-      'Something unexpected occurred querying Graphql endpoint: %o',
-      err
-    )
-
-    if (err instanceof BadRequestError) {
-      response.status(400).end()
-      return
-    }
-
-    if (err instanceof UnauthorizedError) {
-      response.status(401).end()
-      return
-    }
-
-    response.status(500).end()
-    return
+    respondToUnexpectedError(err, response)
   }
 }
 

package/src/sdk/account/accountPageContext.ts

@@ -4,8 +4,9 @@ import type {
   ServerOrderDetailsQueryQuery,
   ServerProfileQueryQuery,
 } from '@generated/graphql'
+import { useContext } from 'react'
 import type { PageGlobalContext } from 'src/sdk/overrides/PageProvider'
-import { usePage } from 'src/sdk/overrides/PageProvider'
+import { PageContext, usePage } from 'src/sdk/overrides/PageProvider'
 import type { OrderStatusCmsLabels } from 'src/utils/userOrderStatus'
 import type { AccountNavigationLabels } from './getMyAccountRoutes'
 
@@ -76,9 +77,19 @@ export interface AccountPageContext extends PageGlobalContext {
   navigationLabels?: AccountNavigationLabels
 }
 
+/**
+ * Same data as `usePage<AccountPageContext>().navigationLabels`, but safe to
+ * call from components (e.g. the B2B organization drawer) that render both
+ * inside and outside a My Account `PageProvider` tree — returns `undefined`
+ * instead of throwing when there is no provider, so callers fall back to
+ * their hardcoded default label.
+ */
 export function useAccountNavigationLabels() {
-  const ctx = usePage<AccountPageContext>()
-  return ctx.navigationLabels
+  const context = useContext(PageContext)?.context
+
+  return context && 'navigationLabels' in context
+    ? context.navigationLabels
+    : undefined
 }
 
 export function useAccountPageData<

package/src/sdk/account/getMyAccountRoutes.ts

@@ -22,6 +22,7 @@ export type AccountNavigationLabels = Partial<{
   companyLabel: string
   contractLabel: string
   cardsLabel: string
+  quotesLabel: string
 }>
 
 interface GetMyAccountRouteParams {
@@ -45,6 +46,7 @@ const ROUTE_LABEL_KEYS: Record<string, keyof AccountNavigationLabels> = {
   [USER_DETAILS_ROUTE]: 'userDetailsLabel',
   [SECURITY_ROUTE]: 'securityLabel',
   [CARDS_ROUTE]: 'cardsLabel',
+  [QUOTES_ROUTE]: 'quotesLabel',
 }
 
 // This is the default route list for My Account, we should add then as the feature is implemented

package/src/sdk/overrides/PageProvider.tsx

@@ -62,7 +62,7 @@ export const isSearchPage = (x: any): x is SearchPageContext =>
   x?.data?.title != undefined ||
   x?.data?.searchTerm != undefined
 
-const PageContext = createContext<PageProviderContextValue | null>(null)
+export const PageContext = createContext<PageProviderContextValue | null>(null)
 
 function PageProvider({
   context,

package/test/components/account/OrganizationDrawerFooter.browser.test.tsx

@@ -6,6 +6,7 @@ import { fireEvent, render, screen } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 
 import { OrganizationDrawerFooter } from '../../../src/components/account/Drawer/OrganizationDrawer/OrganizationDrawerFooter'
+import PageProvider from '../../../src/sdk/overrides/PageProvider'
 
 describe('OrganizationDrawerFooter', () => {
   it('renders org and user details with optional email', () => {
@@ -48,7 +49,100 @@ describe('OrganizationDrawerFooter', () => {
       />
     )
 
-    fireEvent.click(screen.getByRole('button', { name: /log out/i }))
+    fireEvent.click(screen.getByRole('button', { name: /logout/i }))
     expect(onLogoutClick).toHaveBeenCalledTimes(1)
   })
+
+  it('uses the default English manage/logout labels when rendered outside a My Account page context', () => {
+    render(
+      <OrganizationDrawerFooter
+        orgName="Stellar Global"
+        userName="Jane Buyer"
+        showManageLink
+        manageUrl="/pvt/organization-account/org-unit/unit-1"
+      />
+    )
+
+    expect(screen.getByText('Manage')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Logout' })).toBeTruthy()
+  })
+
+  it('uses the default labels inside a non-account page context', () => {
+    render(
+      <PageProvider context={{ globalSettings: {} }}>
+        <OrganizationDrawerFooter
+          orgName="Stellar Global"
+          userName="Jane Buyer"
+          showManageLink
+          manageUrl="/pvt/organization-account/org-unit/unit-1"
+        />
+      </PageProvider>
+    )
+
+    expect(screen.getByText('Manage')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Logout' })).toBeTruthy()
+  })
+
+  it('uses the CMS-provided navigation labels when rendered inside a My Account page', () => {
+    render(
+      <PageProvider
+        context={{
+          accountPageData: {},
+          navigationLabels: {
+            manageLabel: 'Gerenciar',
+            logoutLabel: 'Sair',
+          },
+        }}
+      >
+        <OrganizationDrawerFooter
+          orgName="Stellar Global"
+          userName="Jane Buyer"
+          showManageLink
+          manageUrl="/pvt/organization-account/org-unit/unit-1"
+        />
+      </PageProvider>
+    )
+
+    expect(screen.getByText('Gerenciar')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Sair' })).toBeTruthy()
+  })
+
+  it('lets an explicit label prop win over the CMS-provided navigation labels', () => {
+    render(
+      <PageProvider
+        context={{
+          accountPageData: {},
+          navigationLabels: {
+            manageLabel: 'Gerenciar',
+            logoutLabel: 'Sair',
+          },
+        }}
+      >
+        <OrganizationDrawerFooter
+          orgName="Stellar Global"
+          userName="Jane Buyer"
+          showManageLink
+          manageUrl="/pvt/organization-account/org-unit/unit-1"
+          manageLabel="Manage account"
+          logoutLabel="Sign out"
+        />
+      </PageProvider>
+    )
+
+    expect(screen.getByText('Manage account')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Sign out' })).toBeTruthy()
+  })
+
+  it('does not render the manage link when showManageLink is false', () => {
+    render(
+      <OrganizationDrawerFooter
+        orgName="Stellar Global"
+        userName="Jane Buyer"
+        showManageLink={false}
+        manageUrl="/pvt/organization-account/org-unit/unit-1"
+      />
+    )
+
+    expect(screen.queryByText('Manage')).toBeNull()
+  })
 })