@faststore/core 3.52.0 → 3.53.0

package/src/pages/account/403.tsx

@@ -1,5 +1,5 @@
 import type { Locator } from '@vtex/client-cms'
-import type { GetStaticProps } from 'next'
+import type { GetServerSideProps } from 'next'
 import { NextSeo } from 'next-seo'
 import type { ComponentType } from 'react'
 import {
@@ -17,6 +17,12 @@ import PLUGINS_COMPONENTS from 'src/plugins'
 import { type PageContentType, getPage } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
+import { gql } from '@generated/gql'
+import { execute } from 'src/server'
+import type {
+  ServerAccountPageQueryQuery,
+  ServerAccountPageQueryQueryVariables,
+} from '@generated/graphql'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -27,9 +33,10 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
 
 type Props = {
   globalSections: GlobalSectionsData
+  accountName: ServerAccountPageQueryQuery['accountName']
 }
 
-function Page({ globalSections }: Props) {
+function Page({ globalSections, accountName }: Props) {
   return (
     <RenderSections
       globalSections={globalSections.sections}
@@ -37,7 +44,7 @@ function Page({ globalSections }: Props) {
     >
       <NextSeo noindex nofollow />
 
-      <MyAccountLayout>
+      <MyAccountLayout accountName={accountName}>
         <EmptyState
           title="Unauthorized Access"
           titleIcon={{ icon: 'ShoppingCart', alt: 'Shopping Cart' }}
@@ -53,15 +60,21 @@ function Page({ globalSections }: Props) {
   )
 }
 
-export const getStaticProps: GetStaticProps<
+const query = gql(`
+  query ServerAccountPageQuery {
+    accountName
+  }
+`)
+
+export const getServerSideProps: GetServerSideProps<
   Props,
   Record<string, string>,
   Locator
-> = async ({ previewData }) => {
+> = async (context) => {
   // TODO validate permissions here
 
   const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
-    query: {},
+    query: context.query,
   })
 
   if (!isFaststoreMyAccountEnabled) {
@@ -72,18 +85,30 @@ export const getStaticProps: GetStaticProps<
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(context.previewData)
 
-  const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
-    await Promise.all([
-      getPage<PageContentType>({
-        ...(previewData?.contentType === '403' && previewData),
-        contentType: '403',
-      }),
-      globalSectionsPromise,
-      globalSectionsHeaderPromise,
-      globalSectionsFooterPromise,
-    ])
+  const [
+    page,
+    account,
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  ] = await Promise.all([
+    getPage<PageContentType>({
+      ...(context.previewData?.contentType === '403' && context.previewData),
+      contentType: '403',
+    }),
+    execute<ServerAccountPageQueryQueryVariables, ServerAccountPageQueryQuery>(
+      {
+        variables: {},
+        operation: query,
+      },
+      { headers: { ...context.req.headers } }
+    ),
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ])
 
   const globalSectionsResult = injectGlobalSections({
     globalSections,
@@ -96,6 +121,7 @@ export const getStaticProps: GetStaticProps<
       // The sections from the CMS page are not utilized here for the My Account page.
       // page,
       globalSections: globalSectionsResult,
+      accountName: account.data.accountName,
     },
   }
 }

package/src/pages/account/404.tsx

@@ -1,5 +1,5 @@
 import type { Locator } from '@vtex/client-cms'
-import type { GetStaticProps } from 'next'
+import type { GetServerSideProps } from 'next'
 import { NextSeo } from 'next-seo'
 import type { ComponentType } from 'react'
 import {
@@ -18,6 +18,12 @@ import PLUGINS_COMPONENTS from 'src/plugins'
 import { type PageContentType, getPage } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
+import { gql } from '@generated/gql'
+import { execute } from 'src/server'
+import type {
+  ServerAccountPageQueryQuery,
+  ServerAccountPageQueryQueryVariables,
+} from '@generated/graphql'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -30,9 +36,10 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
 type Props = {
   page: PageContentType
   globalSections: GlobalSectionsData
+  accountName: ServerAccountPageQueryQuery['accountName']
 }
 
-function Page({ page: { sections }, globalSections }: Props) {
+function Page({ page: { sections }, globalSections, accountName }: Props) {
   return (
     <RenderSections
       globalSections={globalSections.sections}
@@ -40,7 +47,7 @@ function Page({ page: { sections }, globalSections }: Props) {
     >
       <NextSeo noindex nofollow />
 
-      <MyAccountLayout>
+      <MyAccountLayout accountName={accountName}>
         {sections && sections.length > 0 && (
           <RenderSectionsBase sections={sections} components={COMPONENTS} />
         )}
@@ -49,15 +56,21 @@ function Page({ page: { sections }, globalSections }: Props) {
   )
 }
 
-export const getStaticProps: GetStaticProps<
+const query = gql(`
+  query ServerAccountPageQuery {
+    accountName
+  }
+`)
+
+export const getServerSideProps: GetServerSideProps<
   Props,
   Record<string, string>,
   Locator
-> = async ({ previewData }) => {
+> = async (context) => {
   // TODO validate permissions here
 
   const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
-    query: {},
+    query: context.query,
   })
 
   if (!isFaststoreMyAccountEnabled) {
@@ -68,18 +81,30 @@ export const getStaticProps: GetStaticProps<
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(context.previewData)
 
-  const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
-    await Promise.all([
-      getPage<PageContentType>({
-        ...(previewData?.contentType === '404' && previewData),
-        contentType: '404',
-      }),
-      globalSectionsPromise,
-      globalSectionsHeaderPromise,
-      globalSectionsFooterPromise,
-    ])
+  const [
+    page,
+    account,
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  ] = await Promise.all([
+    getPage<PageContentType>({
+      ...(context.previewData?.contentType === '404' && context.previewData),
+      contentType: '404',
+    }),
+    execute<ServerAccountPageQueryQueryVariables, ServerAccountPageQueryQuery>(
+      {
+        variables: {},
+        operation: query,
+      },
+      { headers: { ...context.req.headers } }
+    ),
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ])
 
   const globalSectionsResult = injectGlobalSections({
     globalSections,
@@ -88,7 +113,11 @@ export const getStaticProps: GetStaticProps<
   })
 
   return {
-    props: { page, globalSections: globalSectionsResult },
+    props: {
+      page,
+      globalSections: globalSectionsResult,
+      accountName: account.data.accountName,
+    },
   }
 }
 

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

@@ -33,6 +33,7 @@ type OrderDetailsPageProps = {
 export default function OrderDetailsPage({
   globalSections,
   order,
+  accountName,
 }: OrderDetailsPageProps) {
   return (
     <RenderSections
@@ -41,7 +42,7 @@ export default function OrderDetailsPage({
     >
       <NextSeo noindex nofollow />
 
-      <MyAccountLayout>
+      <MyAccountLayout accountName={accountName}>
         <BeforeSection />
         <MyAccountOrderDetails order={order} />
         <AfterSection />
@@ -193,6 +194,7 @@ const query = gql(`
         value
       }
     }
+    accountName
   }
 `)
 
@@ -266,6 +268,7 @@ export const getServerSideProps: GetServerSideProps<
     props: {
       globalSections: globalSectionsResult,
       order: orderDetails.data.userOrder,
+      accountName: orderDetails.data.accountName,
     },
   }
 }

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

@@ -46,6 +46,7 @@ type ListOrdersPageProps = {
 
 export default function ListOrdersPage({
   globalSections,
+  accountName,
   listOrders,
   total,
   perPage,
@@ -58,7 +59,7 @@ export default function ListOrdersPage({
     >
       <NextSeo noindex nofollow />
 
-      <MyAccountLayout>
+      <MyAccountLayout accountName={accountName}>
         <BeforeSection />
         <MyAccountListOrders
           listOrders={listOrders}
@@ -107,6 +108,7 @@ const query = gql(`
         perPage
       }
     }
+    accountName
   }
 `)
 
@@ -205,6 +207,7 @@ export const getServerSideProps: GetServerSideProps<
   return {
     props: {
       globalSections: globalSectionsResult,
+      accountName: listOrders.data.accountName,
       listOrders: listOrders.data.listUserOrders,
       total: listOrders.data.listUserOrders.paging.total,
       perPage: listOrders.data.listUserOrders.paging.perPage,

package/src/pages/account/profile.tsx

@@ -17,6 +17,12 @@ import { default as BeforeSection } from 'src/customizations/src/myAccount/exten
 import type { MyAccountProps } from 'src/experimental/myAccountSeverSideProps'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
+import { gql } from '@generated/gql'
+import { execute } from 'src/server'
+import type {
+  ServerProfileQueryQuery,
+  ServerProfileQueryQueryVariables,
+} from '@generated/graphql'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -24,7 +30,10 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ...CUSTOM_COMPONENTS,
 }
 
-export default function Profile({ globalSections }: MyAccountProps) {
+export default function Profile({
+  globalSections,
+  accountName,
+}: MyAccountProps) {
   return (
     <RenderSections
       globalSections={globalSections.sections}
@@ -32,7 +41,7 @@ export default function Profile({ globalSections }: MyAccountProps) {
     >
       <NextSeo noindex nofollow />
 
-      <MyAccountLayout>
+      <MyAccountLayout accountName={accountName}>
         <BeforeSection />
         <div>
           <h1>Profile</h1>
@@ -43,15 +52,21 @@ export default function Profile({ globalSections }: MyAccountProps) {
   )
 }
 
+const query = gql(`
+  query ServerProfileQuery {
+    accountName
+  }
+`)
+
 export const getServerSideProps: GetServerSideProps<
   MyAccountProps,
   Record<string, string>,
   Locator
-> = async ({ previewData, query }) => {
+> = async (context) => {
   // TODO validate permissions here
 
   const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
-    query,
+    query: context.query,
   })
 
   if (!isFaststoreMyAccountEnabled) {
@@ -62,24 +77,34 @@ export const getServerSideProps: GetServerSideProps<
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(context.previewData)
 
-  const [globalSections, globalSectionsHeader, globalSectionsFooter] =
+  const [profile, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
+      execute<ServerProfileQueryQueryVariables, ServerProfileQueryQuery>(
+        {
+          variables: {},
+          operation: query,
+        },
+        { headers: { ...context.req.headers } }
+      ),
       globalSectionsPromise,
       globalSectionsHeaderPromise,
       globalSectionsFooterPromise,
     ])
 
-  // TODO handle 404 when profile request is made
-  // if (profile.errors) {
-  //   return {
-  //     redirect: {
-  //       destination: '/account/404',
-  //       permanent: false,
-  //     },
-  //   }
-  // }
+  if (profile.errors) {
+    const statusCode: number = (profile.errors[0] as any)?.extensions?.status
+    const destination: string =
+      statusCode === 403 ? '/account/403' : '/account/404'
+
+    return {
+      redirect: {
+        destination,
+        permanent: false,
+      },
+    }
+  }
 
   const globalSectionsResult = injectGlobalSections({
     globalSections,
@@ -88,6 +113,9 @@ export const getServerSideProps: GetServerSideProps<
   })
 
   return {
-    props: { globalSections: globalSectionsResult },
+    props: {
+      globalSections: globalSectionsResult,
+      accountName: profile.data.accountName,
+    },
   }
 }

package/src/pages/account/security.tsx

@@ -18,6 +18,12 @@ import { default as BeforeSection } from 'src/customizations/src/myAccount/exten
 import type { MyAccountProps } from 'src/experimental/myAccountSeverSideProps'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
+import { execute } from 'src/server'
+import { gql } from '@generated/gql'
+import type {
+  ServerSecurityQueryQuery,
+  ServerSecurityQueryQueryVariables,
+} from '@generated/graphql'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -25,7 +31,14 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ...CUSTOM_COMPONENTS,
 }
 
-export default function Page({ globalSections }: MyAccountProps) {
+type SecurityPageProps = {
+  accountName: string
+} & MyAccountProps
+
+export default function Page({
+  globalSections,
+  accountName,
+}: SecurityPageProps) {
   return (
     <RenderSections
       globalSections={globalSections.sections}
@@ -33,7 +46,7 @@ export default function Page({ globalSections }: MyAccountProps) {
     >
       <NextSeo noindex nofollow />
 
-      <MyAccountLayout>
+      <MyAccountLayout accountName={accountName}>
         <BeforeSection />
         <div>
           <h1>Security</h1>
@@ -44,15 +57,21 @@ export default function Page({ globalSections }: MyAccountProps) {
   )
 }
 
+const query = gql(`
+  query ServerSecurityQuery {
+    accountName
+  }
+`)
+
 export const getServerSideProps: GetServerSideProps<
   MyAccountProps,
   Record<string, string>,
   Locator
-> = async ({ previewData, query }) => {
+> = async (context) => {
   // TODO validate permissions here
 
   const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
-    query,
+    query: context.query,
   })
 
   if (!isFaststoreMyAccountEnabled) {
@@ -63,24 +82,34 @@ export const getServerSideProps: GetServerSideProps<
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(context.previewData)
 
-  const [globalSections, globalSectionsHeader, globalSectionsFooter] =
+  const [security, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
+      execute<ServerSecurityQueryQueryVariables, ServerSecurityQueryQuery>(
+        {
+          variables: {},
+          operation: query,
+        },
+        { headers: { ...context.req.headers } }
+      ),
       globalSectionsPromise,
       globalSectionsHeaderPromise,
       globalSectionsFooterPromise,
     ])
 
-  // TODO handle 404 when security request is made
-  // if (security.errors) {
-  //   return {
-  //     redirect: {
-  //       destination: '/account/404',
-  //       permanent: false,
-  //     },
-  //   }
-  // }
+  if (security.errors) {
+    const statusCode: number = (security.errors[0] as any)?.extensions?.status
+    const destination: string =
+      statusCode === 403 ? '/account/403' : '/account/404'
+
+    return {
+      redirect: {
+        destination,
+        permanent: false,
+      },
+    }
+  }
 
   const globalSectionsResult = injectGlobalSections({
     globalSections,
@@ -89,6 +118,9 @@ export const getServerSideProps: GetServerSideProps<
   })
 
   return {
-    props: { globalSections: globalSectionsResult },
+    props: {
+      globalSections: globalSectionsResult,
+      accountName: security.data.accountName,
+    },
   }
 }

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

@@ -18,6 +18,12 @@ import { default as BeforeSection } from 'src/customizations/src/myAccount/exten
 import type { MyAccountProps } from 'src/experimental/myAccountSeverSideProps'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
+import { gql } from '@generated/gql'
+import { execute } from 'src/server'
+import type {
+  ServerUserDetailsQueryQuery,
+  ServerUserDetailsQueryQueryVariables,
+} from '@generated/graphql'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -25,7 +31,10 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   ...CUSTOM_COMPONENTS,
 }
 
-export default function Page({ globalSections }: MyAccountProps) {
+export default function UserDetails({
+  globalSections,
+  accountName,
+}: MyAccountProps) {
   return (
     <RenderSections
       globalSections={globalSections.sections}
@@ -33,7 +42,7 @@ export default function Page({ globalSections }: MyAccountProps) {
     >
       <NextSeo noindex nofollow />
 
-      <MyAccountLayout>
+      <MyAccountLayout accountName={accountName}>
         <BeforeSection />
         <div>
           <h1>User Details</h1>
@@ -44,15 +53,21 @@ export default function Page({ globalSections }: MyAccountProps) {
   )
 }
 
+const query = gql(`
+  query ServerUserDetailsQuery {
+    accountName
+  }
+`)
+
 export const getServerSideProps: GetServerSideProps<
   MyAccountProps,
   Record<string, string>,
   Locator
-> = async ({ previewData, query }) => {
+> = async (context) => {
   // TODO validate permissions here
 
   const { isFaststoreMyAccountEnabled, redirect } = getMyAccountRedirect({
-    query,
+    query: context.query,
   })
 
   if (!isFaststoreMyAccountEnabled) {
@@ -63,24 +78,39 @@ export const getServerSideProps: GetServerSideProps<
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
-
-  const [globalSections, globalSectionsHeader, globalSectionsFooter] =
-    await Promise.all([
-      globalSectionsPromise,
-      globalSectionsHeaderPromise,
-      globalSectionsFooterPromise,
-    ])
-
-  // TODO handle 404 when userDetails request is made
-  // if (userDetails.errors) {
-  //   return {
-  //     redirect: {
-  //       destination: '/account/404',
-  //       permanent: false,
-  //     },
-  //   }
-  // }
+  ] = getGlobalSectionsData(context.previewData)
+
+  const [
+    userDetails,
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  ] = await Promise.all([
+    execute<ServerUserDetailsQueryQueryVariables, ServerUserDetailsQueryQuery>(
+      {
+        variables: {},
+        operation: query,
+      },
+      { headers: { ...context.req.headers } }
+    ),
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ])
+
+  if (userDetails.errors) {
+    const statusCode: number = (userDetails.errors[0] as any)?.extensions
+      ?.status
+    const destination: string =
+      statusCode === 403 ? '/account/403' : '/account/404'
+
+    return {
+      redirect: {
+        destination,
+        permanent: false,
+      },
+    }
+  }
 
   const globalSectionsResult = injectGlobalSections({
     globalSections,
@@ -89,6 +119,9 @@ export const getServerSideProps: GetServerSideProps<
   })
 
   return {
-    props: { globalSections: globalSectionsResult },
+    props: {
+      globalSections: globalSectionsResult,
+      accountName: userDetails.data.accountName,
+    },
   }
 }

package/test/server/index.test.ts

@@ -76,6 +76,7 @@ const QUERIES = [
   'productCount',
   'userOrder',
   'listUserOrders',
+  'accountName',
 ]
 
 const MUTATIONS = [