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

package/src/pages/pvt/account/403.tsx

@@ -1,4 +1,4 @@
-import type { Locator } from '@vtex/client-cms'
+import type { Locator, Section } from '@vtex/client-cms'
 import type { GetServerSideProps } from 'next'
 import { NextSeo } from 'next-seo'
 import type { ComponentType } from 'react'
@@ -7,22 +7,23 @@ import {
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
 
-import { LinkButton } from '@faststore/ui'
 import { gql } from '@generated/gql'
 import type {
   ServerAccountPageQueryQuery,
   ServerAccountPageQueryQueryVariables,
 } from '@generated/graphql'
-import { MyAccountLayout } from 'src/components/account'
+import RenderSections, {
+  RenderSectionsBase,
+} from 'src/components/cms/RenderSections'
+import ACCOUNT_COMPONENTS from 'src/components/cms/account/Components'
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
-import RenderSections from 'src/components/cms/RenderSections'
-import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
 import { useRefreshToken } from 'src/sdk/account/useRefreshToken'
 import PageProvider from 'src/sdk/overrides/PageProvider'
 import { execute } from 'src/server'
 import { injectGlobalSections } from 'src/server/cms/global'
+import { fetchMyAccountPageContent } from 'src/server/cms/fetchMyAccountPageContent'
 import { getRequestHostname } from 'src/utils/getRequestHostname'
 import { isLocalHost } from 'src/utils/isLocalHost'
 import { withLocaleValidationSSR } from 'src/utils/localization/withLocaleValidation'
@@ -30,7 +31,6 @@ import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 
 import storeConfig from 'discovery.config'
 
-/* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
   ...PLUGINS_COMPONENTS,
@@ -39,47 +39,36 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
 
 type Props = {
   globalSections?: GlobalSectionsData
-  accountName?: ServerAccountPageQueryQuery['accountProfile']['name']
+  pageSections: Section[]
   needsRefreshToken?: boolean
   fromPage?: string
 }
 
 function Page({
   globalSections: globalSectionsProp,
-  accountName,
+  pageSections,
   needsRefreshToken,
   fromPage,
 }: Props) {
   const { sections: globalSections, settings: globalSettings } =
     globalSectionsProp ?? { sections: [], settings: {} }
 
-  // Use the new hook to handle refresh token with session management
   const { shouldShow403 } = useRefreshToken(needsRefreshToken, fromPage)
 
-  // Handle refresh token case - show loading while attempting refresh
   if (needsRefreshToken && !shouldShow403) {
     console.info('Refreshing authentication...')
     return <></>
   }
 
-  // Show 403 page if refresh failed or if we don't need refresh token
   return (
-    <PageProvider context={{ globalSettings }}>
+    <PageProvider context={{ globalSettings, accountPageData: {} }}>
       <RenderSections globalSections={globalSections} components={COMPONENTS}>
         <NextSeo noindex nofollow />
 
-        <MyAccountLayout accountName={accountName}>
-          <EmptyState
-            title="Unauthorized Access"
-            titleIcon={{ icon: 'ShoppingCart', alt: 'Shopping Cart' }}
-            subtitle="You don't have permission to access this page."
-            showLoader={false}
-          >
-            <LinkButton variant="secondary" href="/pvt/account">
-              Back to Account
-            </LinkButton>
-          </EmptyState>
-        </MyAccountLayout>
+        <RenderSectionsBase
+          sections={pageSections}
+          components={ACCOUNT_COMPONENTS}
+        />
       </RenderSections>
     </PageProvider>
   )
@@ -102,28 +91,36 @@ const getServerSidePropsBase: GetServerSideProps<
     previewData: context.previewData,
     locale: context.locale,
   }
+
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
   ] = getGlobalSectionsData(contentContext)
 
-  const [account, globalSections, globalSectionsHeader, globalSectionsFooter] =
-    await Promise.all([
-      execute<
-        ServerAccountPageQueryQueryVariables,
-        ServerAccountPageQueryQuery
-      >(
-        {
-          variables: {},
-          operation: query,
-        },
-        { headers: { ...context.req.headers } }
-      ),
-      globalSectionsPromise,
-      globalSectionsHeaderPromise,
-      globalSectionsFooterPromise,
-    ])
+  const [
+    pageContent,
+    account,
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  ] = await Promise.all([
+    fetchMyAccountPageContent(
+      'myAccountUnauthorized',
+      contentContext,
+      '/pvt/account/403'
+    ),
+    execute<ServerAccountPageQueryQueryVariables, ServerAccountPageQueryQuery>(
+      {
+        variables: {},
+        operation: query,
+      },
+      { headers: { ...context.req.headers } }
+    ),
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ])
 
   const globalSectionsResult = injectGlobalSections({
     globalSections,
@@ -131,24 +128,20 @@ const getServerSidePropsBase: GetServerSideProps<
     globalSectionsFooter,
   })
 
+  const fromPage =
+    typeof context.query.from === 'string' ? context.query.from : ''
+
   if (account.errors) {
     console.error(...account.errors)
 
     const statusCode: number = (account.errors[0] as any)?.extensions?.status
 
-    const fromPage =
-      typeof context.query.from === 'string' ? context.query.from : ''
-
-    // The refresh-token round-trip is unreachable from localhost (cross-origin
-    // POST that drops the `vid_rt` cookie), and forcing it would clear the
-    // manually injected `VtexIdclientAutCookie_<account>`. Render the static
-    // 403 view instead so developers can keep testing logged-in scenarios
-    // regardless of the `experimental.refreshToken` flag.
     const isLocal = isLocalHost(getRequestHostname(context.req.headers.host))
 
     return {
       props: {
         globalSections: globalSectionsResult,
+        pageSections: pageContent.sections,
         needsRefreshToken:
           !isLocal &&
           (statusCode === 401 || statusCode === 403) &&
@@ -168,9 +161,9 @@ const getServerSidePropsBase: GetServerSideProps<
 
   return {
     props: {
-      // The sections from the CMS page are not utilized here for the My Account page.
       globalSections: globalSectionsResult,
-      accountName: account?.data?.accountProfile?.name ?? '',
+      pageSections: pageContent.sections,
+      fromPage,
     },
   }
 }

package/src/pages/pvt/account/404.tsx

@@ -12,7 +12,7 @@ import type {
   ServerAccountPageQueryQuery,
   ServerAccountPageQueryQueryVariables,
 } from '@generated/graphql'
-import { MyAccountLayout } from 'src/components/account'
+import { Layout } from 'src/components/account'
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections, {
   RenderSectionsBase,
@@ -54,11 +54,11 @@ function Page({
       <RenderSections globalSections={globalSections} components={COMPONENTS}>
         <NextSeo noindex nofollow />
 
-        <MyAccountLayout accountName={accountName}>
+        <Layout accountName={accountName}>
           {sections && sections.length > 0 && (
             <RenderSectionsBase sections={sections} components={COMPONENTS} />
           )}
-        </MyAccountLayout>
+        </Layout>
       </RenderSections>
     </PageProvider>
   )

package/src/pages/pvt/account/orders/[id].tsx

@@ -1,13 +1,18 @@
-import type { Locator } from '@vtex/client-cms'
+import type { Locator, Section } from '@vtex/client-cms'
 import type { GetServerSideProps } from 'next'
 import { NextSeo } from 'next-seo'
 import type { ComponentType } from 'react'
-import { MyAccountLayout } from 'src/components/account'
-import MyAccountOrderDetails from 'src/components/account/orders/MyAccountOrderDetails'
-import RenderSections from 'src/components/cms/RenderSections'
+import { Layout } from 'src/components/account'
+import { OrderDetailsPageShell } from 'src/components/account/orders/OrderDetails'
+import RenderSections, {
+  RenderSectionsBase,
+} from 'src/components/cms/RenderSections'
+import ACCOUNT_COMPONENTS from 'src/components/cms/account/Components'
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import type { MyAccountProps } from 'src/experimental/myAccountServerSideProps'
+import type { AccountOrderDetailsPageData } from 'src/sdk/account/accountPageContext'
+import type { AccountNavigationLabels } from 'src/sdk/account/getMyAccountRoutes'
 
 import { gql } from '@generated'
 import type {
@@ -22,6 +27,9 @@ import { getIsRepresentative } from 'src/sdk/account/getIsRepresentative'
 import PageProvider from 'src/sdk/overrides/PageProvider'
 import { execute } from 'src/server'
 import { injectGlobalSections } from 'src/server/cms/global'
+import { extractAccountNavigationData } from 'src/server/cms/myAccountDefaultSections'
+import { fetchMyAccountPageContent } from 'src/server/cms/fetchMyAccountPageContent'
+import { extractOrderStatusLabelsFromSections } from 'src/utils/userOrderStatus'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 import { extractStatusFromError } from 'src/utils/utilities'
 import { withLocaleValidationSSR } from 'src/utils/localization/withLocaleValidation'
@@ -32,12 +40,16 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
 }
 
 type OrderDetailsPageProps = {
-  order: ServerOrderDetailsQueryQuery['userOrder']
+  pageSections: Section[]
+  navigationLabels: AccountNavigationLabels
+  accountPageData: AccountOrderDetailsPageData
 } & MyAccountProps
 
 export default function OrderDetailsPage({
   globalSections: globalSectionsProp,
-  order,
+  pageSections,
+  navigationLabels,
+  accountPageData,
   accountName,
   isRepresentative,
 }: OrderDetailsPageProps) {
@@ -45,18 +57,32 @@ export default function OrderDetailsPage({
     globalSectionsProp ?? {}
 
   return (
-    <PageProvider context={{ globalSettings }}>
+    <PageProvider
+      context={{
+        globalSettings,
+        accountPageData,
+        navigationLabels,
+      }}
+    >
       <RenderSections globalSections={globalSections} components={COMPONENTS}>
         <NextSeo noindex nofollow />
 
-        <MyAccountLayout
+        <Layout
           isRepresentative={isRepresentative}
           accountName={accountName}
+          navigationLabels={navigationLabels}
         >
           <BeforeSection />
-          <MyAccountOrderDetails order={order} />
+          <OrderDetailsPageShell>
+            <main data-fs-order-details-content>
+              <RenderSectionsBase
+                sections={pageSections}
+                components={ACCOUNT_COMPONENTS}
+              />
+            </main>
+          </OrderDetailsPageShell>
           <AfterSection />
-        </MyAccountLayout>
+        </Layout>
       </RenderSections>
     </PageProvider>
   )
@@ -313,12 +339,20 @@ const getServerSidePropsBase: GetServerSideProps<
     globalSectionsFooterPromise,
   ] = getGlobalSectionsData(contentContext)
 
+  const orderPath = `/pvt/account/orders/${id}`
+
   const [
+    pageContent,
     orderDetails,
     globalSections,
     globalSectionsHeader,
     globalSectionsFooter,
   ] = await Promise.all([
+    fetchMyAccountPageContent(
+      'myAccountOrderDetails',
+      contentContext,
+      orderPath
+    ),
     execute<
       ServerOrderDetailsQueryQueryVariables,
       ServerOrderDetailsQueryQuery
@@ -359,13 +393,24 @@ const getServerSidePropsBase: GetServerSideProps<
     globalSectionsFooter,
   })
 
-  const order = orderDetails.data.userOrder
+  const { pageSections, navigationData } = extractAccountNavigationData(
+    pageContent.sections
+  )
+
+  const orderStatusLabels = extractOrderStatusLabelsFromSections(
+    pageContent.sections
+  )
 
   return {
     props: {
       globalSections: globalSectionsResult,
-      order,
-      accountName: orderDetails.data.accountProfile.name,
+      accountName: orderDetails.data.accountProfile.name ?? '',
+      navigationLabels: navigationData as AccountNavigationLabels,
+      accountPageData: {
+        order: orderDetails.data.userOrder,
+        orderStatusLabels,
+      },
+      pageSections,
       isRepresentative,
     },
   }

package/src/pages/pvt/account/orders/index.tsx

@@ -1,9 +1,12 @@
-import type { Locator } from '@vtex/client-cms'
+import type { Locator, Section } from '@vtex/client-cms'
 import type { GetServerSideProps } from 'next'
 import { NextSeo } from 'next-seo'
 import type { ComponentType } from 'react'
-import { MyAccountLayout } from 'src/components/account'
-import RenderSections from 'src/components/cms/RenderSections'
+import { Layout } from 'src/components/account'
+import RenderSections, {
+  RenderSectionsBase,
+} from 'src/components/cms/RenderSections'
+import ACCOUNT_COMPONENTS from 'src/components/cms/account/Components'
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 
@@ -17,69 +20,66 @@ import type {
 import { default as AfterSection } from 'src/customizations/src/myAccount/extensions/orders/after'
 import { default as BeforeSection } from 'src/customizations/src/myAccount/extensions/orders/before'
 import type { MyAccountProps } from 'src/experimental/myAccountServerSideProps'
+import type { AccountOrdersListPageData } from 'src/sdk/account/accountPageContext'
+import type { AccountNavigationLabels } from 'src/sdk/account/getMyAccountRoutes'
+import { getIsRepresentative } from 'src/sdk/account/getIsRepresentative'
 import { execute } from 'src/server'
 import { injectGlobalSections } from 'src/server/cms/global'
+import { extractAccountNavigationData } from 'src/server/cms/myAccountDefaultSections'
+import { fetchMyAccountPageContent } from 'src/server/cms/fetchMyAccountPageContent'
 import { withLocaleValidationSSR } from 'src/utils/localization/withLocaleValidation'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 import { groupOrderStatusByLabel } from 'src/utils/userOrderStatus'
 
 import storeConfig from 'discovery.config'
-import { MyAccountListOrders } from 'src/components/account/orders/MyAccountListOrders'
-import { getIsRepresentative } from 'src/sdk/account/getIsRepresentative'
 import PageProvider from 'src/sdk/overrides/PageProvider'
 import { extractStatusFromError } from 'src/utils/utilities'
 
-/* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 
 type ListOrdersPageProps = {
-  listOrders: ServerListOrdersQueryQuery['listUserOrders']
-  total: number
-  perPage: number
-  filters: {
-    page: number
-    status: string[]
-    dateInitial: string
-    dateFinal: string
-    text: string
-    clientEmail: string
-    pendingMyApproval?: boolean
-  }
+  pageSections: Section[]
+  navigationLabels: AccountNavigationLabels
+  accountPageData: AccountOrdersListPageData
 } & MyAccountProps
 
 export default function ListOrdersPage({
   globalSections: globalSectionsProp,
+  pageSections,
+  navigationLabels,
+  accountPageData,
   accountName,
-  listOrders,
-  total,
-  perPage,
-  filters,
   isRepresentative,
 }: ListOrdersPageProps) {
   const { sections: globalSections, settings: globalSettings } =
     globalSectionsProp ?? {}
 
   return (
-    <PageProvider context={{ globalSettings }}>
+    <PageProvider
+      context={{
+        globalSettings,
+        accountPageData,
+        navigationLabels,
+      }}
+    >
       <RenderSections globalSections={globalSections} components={COMPONENTS}>
         <NextSeo noindex nofollow />
 
-        <MyAccountLayout
+        <Layout
           isRepresentative={isRepresentative}
           accountName={accountName}
+          navigationLabels={navigationLabels}
         >
           <BeforeSection />
-          <MyAccountListOrders
-            listOrders={listOrders}
-            filters={filters}
-            perPage={perPage}
-            total={total}
+          <RenderSectionsBase
+            sections={pageSections}
+            components={ACCOUNT_COMPONENTS}
           />
           <AfterSection />
-        </MyAccountLayout>
+        </Layout>
       </RenderSections>
     </PageProvider>
   )
@@ -127,7 +127,7 @@ const query = gql(`
 `)
 
 const getServerSidePropsBase: GetServerSideProps<
-  MyAccountProps,
+  ListOrdersPageProps,
   Record<string, string>,
   Locator
 > = async (context) => {
@@ -168,7 +168,6 @@ const getServerSidePropsBase: GetServerSideProps<
   const clientEmail = (context.query.clientEmail as string | undefined) || ''
   const pendingMyApproval = context.query.pendingMyApproval === 'true'
 
-  // Map labels from FastStore status to API status
   const groupedStatus = groupOrderStatusByLabel()
   const allStatuses =
     status
@@ -185,11 +184,17 @@ const getServerSidePropsBase: GetServerSideProps<
       .filter(Boolean) || []
 
   const [
+    pageContent,
     listOrders,
     globalSections,
     globalSectionsHeader,
     globalSectionsFooter,
   ] = await Promise.all([
+    fetchMyAccountPageContent(
+      'myAccountOrders',
+      contentContext,
+      '/pvt/account/orders'
+    ),
     execute<ServerListOrdersQueryQueryVariables, ServerListOrdersQueryQuery>(
       {
         variables: {
@@ -214,12 +219,10 @@ const getServerSidePropsBase: GetServerSideProps<
   if (listOrders.errors) {
     console.error(...listOrders.errors)
 
-    const status = extractStatusFromError(listOrders.errors[0])
+    const statusCode = extractStatusFromError(listOrders.errors[0])
 
-    // Redirect to 403 for authentication errors (401/403) to handle token refresh
-    // Redirect to 404 for other errors
     const destination =
-      status === 403 || status === 401
+      statusCode === 403 || statusCode === 401
         ? `/pvt/account/403?from=${encodeURIComponent('/pvt/account/orders')}`
         : '/pvt/account/404'
 
@@ -231,6 +234,10 @@ const getServerSidePropsBase: GetServerSideProps<
     }
   }
 
+  const { pageSections, navigationData } = extractAccountNavigationData(
+    pageContent.sections
+  )
+
   const globalSectionsResult = injectGlobalSections({
     globalSections,
     globalSectionsHeader,
@@ -240,19 +247,23 @@ const getServerSidePropsBase: GetServerSideProps<
   return {
     props: {
       globalSections: globalSectionsResult,
-      accountName: listOrders.data.accountProfile.name,
-      listOrders: listOrders.data.listUserOrders,
-      total: listOrders.data.listUserOrders.paging.total,
-      perPage: listOrders.data.listUserOrders.paging.perPage,
-      filters: {
-        page: listOrders.data.listUserOrders.paging.currentPage ?? page,
-        status,
-        dateInitial,
-        dateFinal,
-        text,
-        clientEmail,
-        pendingMyApproval,
+      accountName: listOrders.data.accountProfile.name ?? '',
+      navigationLabels: navigationData as AccountNavigationLabels,
+      accountPageData: {
+        listOrders: listOrders.data.listUserOrders,
+        total: listOrders.data.listUserOrders.paging.total,
+        perPage: listOrders.data.listUserOrders.paging.perPage,
+        filters: {
+          page: listOrders.data.listUserOrders.paging.currentPage ?? page,
+          status,
+          dateInitial,
+          dateFinal,
+          text,
+          clientEmail,
+          pendingMyApproval,
+        },
       },
+      pageSections,
       isRepresentative,
     },
   }