@faststore/core 3.35.0 → 3.36.0

package/.turbo/turbo-build.log

@@ -1,23 +1,23 @@
 
-> @faststore/core@3.34.0 prebuild /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.35.1 prebuild /home/runner/work/faststore/faststore/packages/core
 > na run partytown && na run generate
 
 
-> @faststore/core@3.34.0 partytown /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.35.1 partytown /home/runner/work/faststore/faststore/packages/core
 > partytown copylib ./public/~partytown
 
 Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
 
-> @faststore/core@3.34.0 generate /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.35.1 generate /home/runner/work/faststore/faststore/packages/core
 > na run generate:schema && na run generate:codegen && na run format:generated
 
 
-> @faststore/core@3.34.0 generate:schema /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.35.1 generate:schema /home/runner/work/faststore/faststore/packages/core
 > tsx src/server/generator/generateGraphQLSchemaFile.ts
 
 Schema GraphQL file generated successfully
 
-> @faststore/core@3.34.0 generate:codegen /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.35.1 generate:codegen /home/runner/work/faststore/faststore/packages/core
 > graphql-codegen
 
 [STARTED] Parse Configuration
@@ -37,11 +37,11 @@ Running lifecycle hook "afterStart" scripts...
 [CLI] Loading Documents
 [CLI] Generating output
 
-> @faststore/core@3.34.0 format:generated /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.35.1 format:generated /home/runner/work/faststore/faststore/packages/core
 > prettier --write "@generated/**/*.{ts,js,tsx,jsx,json}" --loglevel error
 
 
-> @faststore/core@3.34.0 build /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.35.1 build /home/runner/work/faststore/faststore/packages/core
 > next build
 
 ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
@@ -57,12 +57,12 @@ https://nextjs.org/telemetry
    Using external babel configuration from /home/runner/work/faststore/faststore/packages/core/.babelrc.js
  ✓ Compiled successfully
    Collecting page data ...
-   Generating static pages (0/7) ...
-
   Generating static pages (1/7) 
+   Generating static pages (0/6) ...
+
   Generating static pages (1/6) 
 Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Content documentation at https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview for mapping the page and the corresponding data-fetching function.
-
   Generating static pages (3/7) 
-
   Generating static pages (5/7) 
-
 ✓ Generating static pages (7/7) 
+
   Generating static pages (2/6) 
+
   Generating static pages (4/6) 
+
 ✓ Generating static pages (6/6) 
    Finalizing page optimization ...
    Collecting build traces ...
 
@@ -77,7 +77,9 @@ Route (pages)                              Size     First Load JS
 ├   └ css/b5bf49598c8f8b66.css             16.1 kB
 ├ ○ /404                                   1.48 kB         122 kB
 ├ ● /500                                   1.48 kB         122 kB
-├ ● /account                               712 B           121 kB
+├ λ /account                               767 B           121 kB
+├ λ /account/profile                       1.34 kB         122 kB
+├   └ css/249b9deaabc0d32d.css             2.51 kB
 ├ λ /api/graphql                           0 B            92.4 kB
 ├ λ /api/health/live                       0 B            92.4 kB
 ├ λ /api/health/ready                      0 B            92.4 kB
@@ -85,11 +87,11 @@ Route (pages)                              Size     First Load JS
 ├ ● /checkout                              694 B           121 kB
 ├ ● /login                                 1.59 kB         122 kB
 └ ● /s                                     3.18 kB         134 kB
-+ First Load JS shared by all              95.8 kB
++ First Load JS shared by all              95.9 kB
   ├ chunks/framework-807b0f81cbc129f0.js   45.4 kB
   ├ chunks/main-5569625b3fdd6741.js        33.1 kB
-  ├ chunks/pages/_app-836e2ad874a5b36e.js  10.3 kB
-  ├ chunks/webpack-c5394865bff5422b.js     3.58 kB
+  ├ chunks/pages/_app-012e51403727ae6a.js  10.4 kB
+  ├ chunks/webpack-1cd1c4aa7f418483.js     3.59 kB
   └ css/0a57ee6c7a57788c.css               3.49 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,14 +1,14 @@
 
-> @faststore/core@3.34.0 test /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.35.1 test /home/runner/work/faststore/faststore/packages/core
 > jest
 
-PASS test/server/cms/global.test.ts (25.214 s)
-PASS test/utils/multipleTemplates.test.ts (26.454 s)
+PASS test/utils/multipleTemplates.test.ts (22.915 s)
+PASS test/server/cms/global.test.ts (23.944 s)
 PASS test/server/cms/index.test.ts
-PASS test/server/index.test.ts (32.955 s)
+PASS test/server/index.test.ts (29.285 s)
 
 Test Suites: 4 passed, 4 total
 Tests:       22 passed, 22 total
 Snapshots:   0 total
-Time:        34.128 s
+Time:        30.513 s
 Ran all test suites.

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.36.0](https://github.com/vtex/faststore/compare/v3.35.1...v3.36.0) (2025-04-09)
+
+### Features
+
+- My Account Menu and Extensibility ([#2761](https://github.com/vtex/faststore/issues/2761)) ([0daf07a](https://github.com/vtex/faststore/commit/0daf07a7fdf524992472d9f9b4a013885aa175a2)), closes [#2729](https://github.com/vtex/faststore/issues/2729) [#2720](https://github.com/vtex/faststore/issues/2720) [#2738](https://github.com/vtex/faststore/issues/2738) [#2752](https://github.com/vtex/faststore/issues/2752)
+
+## [3.35.1](https://github.com/vtex/faststore/compare/v3.35.0...v3.35.1) (2025-04-08)
+
+### Bug Fixes
+
+- multiple view_cart events ([#2770](https://github.com/vtex/faststore/issues/2770)) ([9e8234b](https://github.com/vtex/faststore/commit/9e8234b0e097b7c4a749584e491c556cbdab4a31))
+
 # [3.35.0](https://github.com/vtex/faststore/compare/v3.34.0...v3.35.0) (2025-04-08)
 
 ### Features

package/discovery.config.default.js

@@ -130,6 +130,7 @@ module.exports = {
     preact: false,
     enableRedirects: false,
     enableSearchSSR: false,
+    enableFaststoreMyAccount: false,
     enableVtexAssetsLoader: false,
     graphqlCacheControl: {
       maxAge: 0, // 0 disables cache, 5 * 60 enable cache control maxAge 5 minutes

package/index.ts

@@ -10,6 +10,7 @@ export { useProductsQuery } from './src/sdk/product/useProductsQuery'
 
 export * from './src/typings/overrides'
 export { getOverriddenSection } from './src/sdk/overrides/getOverriddenSection'
+export { getMyAccountRoutes } from './src/sdk/account/getMyAccountRoutes'
 
 // Overridable Sections
 export { default as AlertSection } from './src/components/sections/Alert'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.35.0",
+  "version": "3.36.0",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -105,5 +105,5 @@
     "ts-jest": "29.1.1",
     "typescript": "5.3.2"
   },
-  "gitHead": "d7888ccc4f9e5511cc18a483d5d0014fdf15f6ab"
+  "gitHead": "02b2a2e2ef528893276e4ae88d0ef5fda96c4bf7"
 }

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

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react'
+import MyAccountMenu from '../MyAccountMenu'
+import menuRoutes from 'src/customizations/src/myAccount/navigation'
+import styles from '../section.module.scss'
+
+export type MyAccountLayoutProps = {}
+
+/* ######################################### */
+/* Mocked Data until development is finished */
+const mockedUserName = 'Mocked Username'
+
+/* ######################################### */
+
+const MyAccountLayout = ({
+  children,
+}: PropsWithChildren<MyAccountLayoutProps>) => {
+  return (
+    <div className={styles.layout}>
+      <MyAccountMenu accountName={mockedUserName} items={menuRoutes} />
+      {children}
+    </div>
+  )
+}
+
+export default MyAccountLayout

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

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

package/src/components/account/MyAccountLayout/styles.scss

@@ -0,0 +1,17 @@
+.layout {
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "../MyAccountMenu/styles.scss";
+
+  display: grid;
+  grid-template-rows: auto 1fr;
+  min-height: calc(100vh - 18rem);
+
+  @include media(">=notebook") {
+    grid-template-rows: none;
+    grid-template-columns: max(300px) auto;
+    gap: var(--fs-spacing-8);
+    max-width: var(--fs-grid-max-width);
+    padding: 0;
+    margin: 0 auto;
+  }
+}

package/src/components/account/MyAccountMenu/MyAccountMenu.tsx

@@ -0,0 +1,74 @@
+import { Button, Link } from '@faststore/ui'
+import { useRouter } from 'next/router'
+
+import styles from '../section.module.scss'
+
+import useScreenResize from 'src/sdk/ui/useScreenResize'
+
+interface NavItem {
+  title: string
+  route: string
+}
+
+export interface MyAccountMenuProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  avatarImageUrl?: string
+  accountName: string
+  items: NavItem[]
+}
+
+const Nav = ({ items }: Pick<MyAccountMenuProps, 'items'>) => {
+  const router = useRouter()
+  const currentRoute = router.pathname
+
+  return (
+    <ul className={styles.nav}>
+      {items.map(({ route, title }) => (
+        <li
+          className={styles.navItem}
+          data-is-selected={currentRoute === route}
+          key={route}
+        >
+          <Link href={route} tabIndex={0}>
+            {title}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+const MyAccountMenu = ({
+  avatarImageUrl,
+  accountName,
+  items,
+}: MyAccountMenuProps) => {
+  const { isDesktop } = useScreenResize()
+
+  return (
+    <div className={styles.menu}>
+      {isDesktop ? (
+        <div className={styles.account}>
+          <div className={styles.avatarContainer}>
+            {avatarImageUrl ? (
+              <img className={styles.avatar} src={avatarImageUrl} />
+            ) : (
+              <span className={styles.avatar}>{accountName[0]}</span>
+            )}
+            <h2>{accountName}</h2>
+          </div>
+          <Button
+            className={styles.switchButton}
+            variant="secondary"
+            size="small"
+          >
+            Switch
+          </Button>
+        </div>
+      ) : null}
+      <Nav items={items} />
+    </div>
+  )
+}
+
+export default MyAccountMenu

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

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

package/src/components/account/MyAccountMenu/styles.scss

@@ -0,0 +1,124 @@
+.menu {
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+  padding: var(--fs-spacing-3);
+  overflow: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.account {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: var(--fs-spacing-5);
+}
+
+.avatarContainer {
+  display: grid;
+  grid-template-rows: auto;
+  gap: var(--fs-spacing-2);
+  align-items: center;
+  padding-bottom: var(--fs-spacing-1);
+
+  h2 {
+    font-size: var(--fs-text-size-3);
+    font-weight: var(--fs-text-weight-semibold);
+    line-height: var(--fs-text-size-5);
+  }
+}
+
+.switchButton {
+  display: none; /* While it's use case is not implemented */
+  max-width: fit-content;
+  height: 1.5rem;
+}
+
+.nav {
+  display: flex;
+  gap: var(--fs-spacing-1);
+}
+
+.navItem {
+  align-content: center;
+  height: var(--fs-spacing-6);
+  font-size: var(--fs-text-size-1);
+  font-weight: var(--fs-text-weight-medium);
+  background-color: var(--fs-color-tertiary-bkg);
+  border-radius: var(--fs-border-radius-pill);
+
+  &:hover,
+  &[data-is-selected="true"] {
+    background-color: var(--fs-color-tertiary-bkg-hover);
+  }
+
+  &:active {
+    background-color: var(--fs-color-tertiary-bkg-active);
+    outline: none;
+  }
+
+  &:disabled {
+    color: var(--fs-color-disabled-text);
+    cursor: not-allowed;
+    background-color: var(--fs-color-tertiary-bkg-disabled);
+  }
+
+  >a,
+  a:link,
+  a:visited {
+    display: inline-block;
+    align-content: center;
+    width: max-content;
+    width: 100%;
+    height: 100%;
+    padding: 0 var(--fs-spacing-3);
+    color: var(--fs-color-text);
+    text-decoration: none;
+    background-color: transparent;
+    border-radius: var(--fs-border-radius-pill);
+
+    &:focus-visible {
+      outline: 3px solid var(--fs-color-focus-ring);
+      box-shadow: none;
+    }
+  }
+}
+
+@include media(">=notebook") {
+  grid-template-rows: none;
+  grid-template-columns: max(300px) 80%;
+  gap: var(--fs-spacing-8);
+  padding: 0 var(--fs-spacing-8);
+
+  .menu {
+    padding: 0;
+    padding-top: var(--fs-spacing-6);
+    overflow: visible;
+  }
+
+  .nav {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .navItem {
+    margin-left: -16px;
+  }
+
+  .avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--fs-spacing-8);
+    height: var(--fs-spacing-8);
+    font-size: var(--fs-text-size-4);
+    font-weight: var(--fs-text-weight-semibold);
+    color: var(--fs-color-main-2);
+    text-align: center;
+    background-color: var(--fs-color-accent-0);
+    border: var(--spacing-1) solid var(--fs-color-neutral-0);
+    border-radius: var(--fs-border-radius-circle);
+  }
+}

package/src/components/account/index.ts

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

package/src/components/account/section.module.scss

@@ -0,0 +1,3 @@
+@layer components {
+  @import "./MyAccountLayout/styles.scss";
+}

package/src/components/cart/CartSidebar/CartSidebar.tsx

@@ -65,7 +65,12 @@ function useViewCartEvent() {
   const {
     currency: { code },
   } = useSession()
-  const { items, gifts, total } = useCart()
+  const { items: itemsFromCart, gifts: giftsFromCart, total } = useCart()
+
+  // We need to stringify the items and gifts to avoid circular references
+  // when sending the event to the analytics
+  const gifts = JSON.stringify(giftsFromCart)
+  const items = JSON.stringify(itemsFromCart)
 
   const sendViewCartEvent = useCallback(() => {
     import('@faststore/sdk').then(({ sendAnalyticsEvent }) => {
@@ -74,7 +79,7 @@ function useViewCartEvent() {
         params: {
           currency: code as CurrencyCode,
           value: total,
-          items: items.concat(gifts).map((item) => ({
+          items: itemsFromCart.concat(giftsFromCart).map((item) => ({
             item_id: item.itemOffered.isVariantOf.productGroupID,
             item_name: item.itemOffered.isVariantOf.name,
             item_brand: item.itemOffered.brand.name,

package/src/customizations/src/myAccount/navigation.ts

@@ -0,0 +1,3 @@
+import { getMyAccountRoutes } from 'src/sdk/account/getMyAccountRoutes'
+
+export default getMyAccountRoutes({ routes: [] })

package/src/experimental/myAccountSeverSideProps.ts

@@ -0,0 +1,42 @@
+import type { Locator } from '@vtex/client-cms'
+import type { GetServerSideProps } from 'next'
+
+import {
+  type GlobalSectionsData,
+  getGlobalSectionsData,
+} from 'src/components/cms/GlobalSections'
+
+import { injectGlobalSections } from 'src/server/cms/global'
+
+export type MyAccountProps = {
+  globalSections: GlobalSectionsData
+}
+
+export const getServerSideProps: GetServerSideProps<
+  MyAccountProps,
+  Record<string, string>,
+  Locator
+> = async ({ previewData }) => {
+  const [
+    globalSectionsPromise,
+    globalSectionsHeaderPromise,
+    globalSectionsFooterPromise,
+  ] = getGlobalSectionsData(previewData)
+
+  const [globalSections, globalSectionsHeader, globalSectionsFooter] =
+    await Promise.all([
+      globalSectionsPromise,
+      globalSectionsHeaderPromise,
+      globalSectionsFooterPromise,
+    ])
+
+  const globalSectionsResult = injectGlobalSections({
+    globalSections,
+    globalSectionsHeader,
+    globalSectionsFooter,
+  })
+
+  return {
+    props: { globalSections: globalSectionsResult },
+  }
+}

package/src/pages/account/index.tsx

@@ -0,0 +1,44 @@
+import { NextSeo } from 'next-seo'
+import type { ComponentType } from 'react'
+import { useEffect } from 'react'
+import RenderSections from 'src/components/cms/RenderSections'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import storeConfig from 'discovery.config'
+import {
+  getServerSideProps,
+  type MyAccountProps,
+} from 'src/experimental/myAccountSeverSideProps'
+import { useRouter } from 'next/router'
+
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  ...CUSTOM_COMPONENTS,
+}
+
+function Page({ globalSections }: MyAccountProps) {
+  const router = useRouter()
+  useEffect(() => {
+    if (storeConfig.experimental.enableFaststoreMyAccount) {
+      router.push('/account/profile') // current default path in my account
+    } else {
+      window.location.href = `${storeConfig.accountUrl}${window.location.search}`
+    }
+  }, [])
+
+  return (
+    <RenderSections
+      globalSections={globalSections.sections}
+      components={COMPONENTS}
+    >
+      <NextSeo noindex nofollow />
+
+      <div>loading...</div>
+    </RenderSections>
+  )
+}
+
+export { getServerSideProps }
+
+export default Page

package/src/pages/account/profile.tsx

@@ -0,0 +1,48 @@
+/* ######################################### */
+/* Mocked Page until development is finished, it will be removed after */
+
+import { NextSeo } from 'next-seo'
+import type { ComponentType } from 'react'
+import { MyAccountLayout } from 'src/components/account'
+import RenderSections from 'src/components/cms/RenderSections'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import {
+  getServerSideProps,
+  type MyAccountProps,
+} from 'src/experimental/myAccountSeverSideProps'
+
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  ...CUSTOM_COMPONENTS,
+}
+
+const style = {
+  alignContent: 'center',
+  justifyContent: 'center',
+  alignItems: 'center',
+  display: 'flex',
+  h1: {
+    fontSize: '100px',
+  },
+}
+
+export default function Profile({ globalSections }: MyAccountProps) {
+  return (
+    <RenderSections
+      globalSections={globalSections.sections}
+      components={COMPONENTS}
+    >
+      <NextSeo noindex nofollow />
+
+      <MyAccountLayout>
+        <div style={style}>
+          <h1 style={style.h1}>Profile</h1>
+        </div>
+      </MyAccountLayout>
+    </RenderSections>
+  )
+}
+
+export { getServerSideProps }

package/src/sdk/account/getMyAccountRoutes.ts

@@ -0,0 +1,34 @@
+interface Route {
+  /* Page name, displayed in the sidebar */
+  title: string
+  /* Accessible path within My Account */
+  route: string
+}
+
+interface GetMyAccountRouteParams {
+  /* Route list */
+  routes: Route[]
+}
+
+const DEFAULT_ROUTES: Route[] = [
+  {
+    title: 'Profile',
+    route: '/account/profile',
+  },
+  {
+    title: 'Orders',
+    route: '/account/orders',
+  },
+  {
+    title: 'User Details',
+    route: '/account/user-details',
+  },
+  {
+    title: 'Security',
+    route: '/account/security',
+  },
+]
+
+export function getMyAccountRoutes({ routes }: GetMyAccountRouteParams) {
+  return [...DEFAULT_ROUTES, ...routes]
+}