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

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

@@ -1,10 +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 { ProfileSection } from 'src/components/account/profile'
-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'
 
@@ -18,8 +20,12 @@ import type {
 import { default as AfterSection } from 'src/customizations/src/myAccount/extensions/profile/after'
 import { default as BeforeSection } from 'src/customizations/src/myAccount/extensions/profile/before'
 import type { MyAccountProps } from 'src/experimental/myAccountServerSideProps'
+import type { AccountProfilePageData } from 'src/sdk/account/accountPageContext'
+import type { AccountNavigationLabels } from 'src/sdk/account/getMyAccountRoutes'
 import { getIsRepresentative } from 'src/sdk/account/getIsRepresentative'
 import { injectGlobalSections } from 'src/server/cms/global'
+import { extractAccountNavigationData } from 'src/server/cms/myAccountDefaultSections'
+import { fetchMyAccountPageContent } from 'src/server/cms/fetchMyAccountPageContent'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 import { withLocaleValidationSSR } from 'src/utils/localization/withLocaleValidation'
 
@@ -27,23 +33,22 @@ import storeConfig from 'discovery.config'
 import PageProvider from 'src/sdk/overrides/PageProvider'
 import { execute } from 'src/server'
 
-/* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 
 type ProfilePageProps = {
-  accountProfile: {
-    name: string | null
-    email: string | null
-    id: string | null
-  }
+  pageSections: Section[]
+  navigationLabels: AccountNavigationLabels
+  accountPageData: AccountProfilePageData
 } & MyAccountProps
 
 export default function Profile({
   globalSections: globalSectionsProp,
-  accountProfile,
+  pageSections,
+  navigationLabels,
+  accountPageData,
   accountName,
   isRepresentative,
 }: ProfilePageProps) {
@@ -51,18 +56,28 @@ export default function Profile({
     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 />
-          <ProfileSection profile={accountProfile} />
+          <RenderSectionsBase
+            sections={pageSections}
+            components={ACCOUNT_COMPONENTS}
+          />
           <AfterSection />
-        </MyAccountLayout>
+        </Layout>
       </RenderSections>
     </PageProvider>
   )
@@ -79,7 +94,7 @@ const query = gql(`
 `)
 
 const getServerSidePropsBase: GetServerSideProps<
-  MyAccountProps,
+  ProfilePageProps,
   Record<string, string>,
   Locator
 > = async (context) => {
@@ -106,27 +121,35 @@ const getServerSidePropsBase: GetServerSideProps<
     globalSectionsFooterPromise,
   ] = getGlobalSectionsData(contentContext)
 
-  const [profile, globalSections, globalSectionsHeader, globalSectionsFooter] =
-    await Promise.all([
-      execute<ServerProfileQueryQueryVariables, ServerProfileQueryQuery>(
-        {
-          variables: {},
-          operation: query,
-        },
-        { headers: { ...context.req.headers } }
-      ),
-      globalSectionsPromise,
-      globalSectionsHeaderPromise,
-      globalSectionsFooterPromise,
-    ])
+  const [
+    pageContent,
+    profile,
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  ] = await Promise.all([
+    fetchMyAccountPageContent(
+      'myAccountProfile',
+      contentContext,
+      '/pvt/account/profile'
+    ),
+    execute<ServerProfileQueryQueryVariables, ServerProfileQueryQuery>(
+      {
+        variables: {},
+        operation: query,
+      },
+      { headers: { ...context.req.headers } }
+    ),
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ])
 
   if (profile.errors) {
     console.error(...profile.errors)
 
     const statusCode: number = (profile.errors[0] as any)?.extensions?.status
 
-    // Redirect to 403 for authentication errors (401/403) to handle token refresh
-    // Redirect to 404 for other errors
     const destination: string =
       statusCode === 401 || statusCode === 403
         ? `/pvt/account/403?from=${encodeURIComponent('/pvt/account/profile')}`
@@ -140,6 +163,10 @@ const getServerSidePropsBase: GetServerSideProps<
     }
   }
 
+  const { pageSections, navigationData } = extractAccountNavigationData(
+    pageContent.sections
+  )
+
   const globalSectionsResult = injectGlobalSections({
     globalSections,
     globalSectionsHeader,
@@ -149,8 +176,12 @@ const getServerSidePropsBase: GetServerSideProps<
   return {
     props: {
       globalSections: globalSectionsResult,
-      accountName: profile.data.accountProfile.name,
-      accountProfile: profile.data.accountProfile,
+      accountName: profile.data.accountProfile.name ?? '',
+      accountPageData: {
+        profile: profile.data.accountProfile,
+      },
+      pageSections,
+      navigationLabels: navigationData as AccountNavigationLabels,
       isRepresentative,
     },
   }

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

@@ -1,13 +1,15 @@
+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'
 
-import type { Locator } from '@vtex/client-cms'
-import type { GetServerSideProps } from 'next'
-
 import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
 
 import { gql } from '@generated/gql'
@@ -18,50 +20,65 @@ import type {
 import { default as AfterSection } from 'src/customizations/src/myAccount/extensions/security/after'
 import { default as BeforeSection } from 'src/customizations/src/myAccount/extensions/security/before'
 import type { MyAccountProps } from 'src/experimental/myAccountServerSideProps'
+import type { AccountSecurityPageData } 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 { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 import { withLocaleValidationSSR } from 'src/utils/localization/withLocaleValidation'
 
 import PageProvider from 'src/sdk/overrides/PageProvider'
 
 import storeConfig from 'discovery.config'
-import { SecuritySection } from 'src/components/account/security'
 
-/* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 
 type SecurityPageProps = {
-  accountName: string
-  userEmail: string
+  pageSections: Section[]
+  navigationLabels: AccountNavigationLabels
+  accountPageData: AccountSecurityPageData
 } & MyAccountProps
 
 export default function Page({
   globalSections: globalSectionsProp,
+  pageSections,
+  navigationLabels,
+  accountPageData,
   accountName,
   isRepresentative,
-  userEmail,
 }: SecurityPageProps) {
   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 />
-          <SecuritySection userEmail={userEmail} />
+          <RenderSectionsBase
+            sections={pageSections}
+            components={ACCOUNT_COMPONENTS}
+          />
           <AfterSection />
-        </MyAccountLayout>
+        </Layout>
       </RenderSections>
     </PageProvider>
   )
@@ -79,7 +96,7 @@ const query = gql(`
 `)
 
 const getServerSidePropsBase: GetServerSideProps<
-  MyAccountProps,
+  SecurityPageProps,
   Record<string, string>,
   Locator
 > = async (context) => {
@@ -95,6 +112,7 @@ const getServerSidePropsBase: GetServerSideProps<
   if (!isFaststoreMyAccountEnabled) {
     return { redirect }
   }
+
   const contentContext = {
     previewData: context.previewData,
     locale: context.locale,
@@ -106,26 +124,34 @@ const getServerSidePropsBase: GetServerSideProps<
     globalSectionsFooterPromise,
   ] = getGlobalSectionsData(contentContext)
 
-  const [security, globalSections, globalSectionsHeader, globalSectionsFooter] =
-    await Promise.all([
-      execute<ServerSecurityQueryVariables, ServerSecurityQuery>(
-        {
-          variables: {},
-          operation: query,
-        },
-        { headers: { ...context.req.headers } }
-      ),
-      globalSectionsPromise,
-      globalSectionsHeaderPromise,
-      globalSectionsFooterPromise,
-    ])
+  const [
+    pageContent,
+    security,
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  ] = await Promise.all([
+    fetchMyAccountPageContent(
+      'myAccountSecurity',
+      contentContext,
+      '/pvt/account/security'
+    ),
+    execute<ServerSecurityQueryVariables, ServerSecurityQuery>(
+      {
+        variables: {},
+        operation: query,
+      },
+      { headers: { ...context.req.headers } }
+    ),
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ])
 
   if (security.errors) {
     console.error(...security.errors)
     const statusCode: number = (security.errors[0] as any)?.extensions?.status
 
-    // Redirect to 403 for authentication errors (401/403) to handle token refresh
-    // Redirect to 404 for other errors
     const destination: string =
       statusCode === 401 || statusCode === 403
         ? `/pvt/account/403?from=${encodeURIComponent('/pvt/account/security')}`
@@ -139,6 +165,10 @@ const getServerSidePropsBase: GetServerSideProps<
     }
   }
 
+  const { pageSections, navigationData } = extractAccountNavigationData(
+    pageContent.sections
+  )
+
   const globalSectionsResult = injectGlobalSections({
     globalSections,
     globalSectionsHeader,
@@ -147,9 +177,13 @@ const getServerSidePropsBase: GetServerSideProps<
 
   return {
     props: {
-      accountName: security.data.accountProfile.name,
-      userEmail: security.data?.userDetails.email || '',
+      accountName: security.data.accountProfile.name ?? '',
+      navigationLabels: navigationData as AccountNavigationLabels,
+      accountPageData: {
+        userEmail: security.data?.userDetails?.email || '',
+      },
       globalSections: globalSectionsResult,
+      pageSections,
       isRepresentative,
     },
   }

package/src/pages/pvt/account/user-details.tsx

@@ -1,13 +1,15 @@
+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'
 
-import type { Locator } from '@vtex/client-cms'
-import type { GetServerSideProps } from 'next'
-
 import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
 
 import { gql } from '@generated/gql'
@@ -16,56 +18,65 @@ import type {
   ServerUserDetailsQueryQueryVariables,
 } from '@generated/graphql'
 import storeConfig from 'discovery.config'
-import MyAccountUserDetails from 'src/components/account/MyAccountUserDetails/MyAccountUserDetails'
 import { default as AfterSection } from 'src/customizations/src/myAccount/extensions/user-details/after'
 import { default as BeforeSection } from 'src/customizations/src/myAccount/extensions/user-details/before'
 import type { MyAccountProps } from 'src/experimental/myAccountServerSideProps'
+import type { AccountUserDetailsPageData } from 'src/sdk/account/accountPageContext'
+import type { AccountNavigationLabels } from 'src/sdk/account/getMyAccountRoutes'
 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 { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 import { withLocaleValidationSSR } from 'src/utils/localization/withLocaleValidation'
 
-/* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ...GLOBAL_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }
 
-type UserDetailsPagePros = {
-  userDetails: {
-    username: string
-    name: string
-    email: string
-    phone: string
-    role: string[]
-    orgUnit: string
-  }
+type UserDetailsPageProps = {
+  pageSections: Section[]
+  navigationLabels: AccountNavigationLabels
+  accountPageData: AccountUserDetailsPageData
 } & MyAccountProps
 
 export default function Page({
   globalSections: globalSectionsProp,
+  pageSections,
+  navigationLabels,
+  accountPageData,
   accountName,
   isRepresentative,
-  userDetails,
-}: UserDetailsPagePros) {
+}: UserDetailsPageProps) {
   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 />
-          <MyAccountUserDetails userDetails={userDetails} />
+          <RenderSectionsBase
+            sections={pageSections}
+            components={ACCOUNT_COMPONENTS}
+          />
           <AfterSection />
-        </MyAccountLayout>
+        </Layout>
       </RenderSections>
     </PageProvider>
   )
@@ -88,7 +99,7 @@ const query = gql(`
 `)
 
 const getServerSidePropsBase: GetServerSideProps<
-  MyAccountProps,
+  UserDetailsPageProps,
   Record<string, string>,
   Locator
 > = async (context) => {
@@ -104,6 +115,16 @@ const getServerSidePropsBase: GetServerSideProps<
   if (!isFaststoreMyAccountEnabled) {
     return { redirect }
   }
+
+  if (!isRepresentative) {
+    return {
+      redirect: {
+        destination: '/pvt/account',
+        permanent: false,
+      },
+    }
+  }
+
   const contentContext = {
     previewData: context.previewData,
     locale: context.locale,
@@ -116,11 +137,17 @@ const getServerSidePropsBase: GetServerSideProps<
   ] = getGlobalSectionsData(contentContext)
 
   const [
+    pageContent,
     userDetails,
     globalSections,
     globalSectionsHeader,
     globalSectionsFooter,
   ] = await Promise.all([
+    fetchMyAccountPageContent(
+      'myAccountUserDetails',
+      contentContext,
+      '/pvt/account/user-details'
+    ),
     execute<ServerUserDetailsQueryQueryVariables, ServerUserDetailsQueryQuery>(
       {
         variables: {},
@@ -135,24 +162,12 @@ const getServerSidePropsBase: GetServerSideProps<
     globalSectionsFooterPromise,
   ])
 
-  // If the user is not a representative (b2b), redirect them to the account home page
-  if (!isRepresentative) {
-    return {
-      redirect: {
-        destination: '/pvt/account',
-        permanent: false,
-      },
-    }
-  }
-
   if (userDetails?.errors) {
     console.error(...userDetails.errors)
 
     const statusCode: number = (userDetails.errors[0] as any)?.extensions
       ?.status
 
-    // Redirect to 403 for authentication errors (401/403) to handle token refresh
-    // Redirect to 404 for other errors
     const destination: string =
       statusCode === 401 || statusCode === 403
         ? `/pvt/account/403?from=${encodeURIComponent('/pvt/account/user-details')}`
@@ -166,6 +181,10 @@ const getServerSidePropsBase: GetServerSideProps<
     }
   }
 
+  const { pageSections, navigationData } = extractAccountNavigationData(
+    pageContent.sections
+  )
+
   const globalSectionsResult = injectGlobalSections({
     globalSections,
     globalSectionsHeader,
@@ -175,8 +194,19 @@ const getServerSidePropsBase: GetServerSideProps<
   return {
     props: {
       globalSections: globalSectionsResult,
-      accountName: userDetails.data.accountProfile.name,
-      userDetails: userDetails.data?.userDetails ?? {},
+      accountName: userDetails.data.accountProfile.name ?? '',
+      navigationLabels: navigationData as AccountNavigationLabels,
+      accountPageData: {
+        userDetails: userDetails.data?.userDetails ?? {
+          username: '',
+          name: '',
+          email: '',
+          phone: '',
+          role: [],
+          orgUnit: '',
+        },
+      },
+      pageSections,
       isRepresentative,
     },
   }

package/src/sdk/account/accountPageContext.ts

@@ -0,0 +1,73 @@
+import type {
+  ServerListOrdersQueryQuery,
+  ServerOrderDetailsQueryQuery,
+  ServerProfileQueryQuery,
+} from '@generated/graphql'
+import type { PageGlobalContext } from 'src/sdk/overrides/PageProvider'
+import { usePage } from 'src/sdk/overrides/PageProvider'
+import type { OrderStatusCmsLabels } from 'src/utils/userOrderStatus'
+import type { AccountNavigationLabels } from './getMyAccountRoutes'
+
+export type AccountProfilePageData = {
+  profile: ServerProfileQueryQuery['accountProfile']
+}
+
+export type AccountOrdersListPageData = {
+  listOrders: ServerListOrdersQueryQuery['listUserOrders']
+  total: number
+  perPage: number
+  filters: {
+    page: number
+    status: string[]
+    dateInitial: string
+    dateFinal: string
+    text: string
+    clientEmail: string
+    pendingMyApproval?: boolean
+  }
+}
+
+export type AccountOrderDetailsPageData = {
+  order: ServerOrderDetailsQueryQuery['userOrder']
+  orderStatusLabels?: OrderStatusCmsLabels
+}
+
+export type AccountSecurityPageData = {
+  userEmail: string
+}
+
+export type AccountUserDetailsPageData = {
+  userDetails: {
+    username: string
+    name: string
+    email: string
+    phone: string
+    role: string[]
+    orgUnit: string
+  }
+}
+
+export type AccountPageData =
+  | AccountProfilePageData
+  | AccountOrdersListPageData
+  | AccountOrderDetailsPageData
+  | AccountSecurityPageData
+  | AccountUserDetailsPageData
+  | Record<string, never>
+
+export interface AccountPageContext extends PageGlobalContext {
+  accountPageData: AccountPageData
+  navigationLabels?: AccountNavigationLabels
+}
+
+export function useAccountNavigationLabels() {
+  const ctx = usePage<AccountPageContext>()
+  return ctx.navigationLabels
+}
+
+export function useAccountPageData<
+  T extends AccountPageData = AccountPageData,
+>(): T {
+  const ctx = usePage<AccountPageContext>()
+  return ctx.accountPageData as T
+}