@faststore/core 3.88.6 → 3.89.0

package/.turbo/turbo-build.log

@@ -1,23 +1,23 @@
 
-> @faststore/core@3.88.5 prebuild /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.88.7 prebuild /home/runner/work/faststore/faststore/packages/core
 > na run partytown && na run generate
 
 
-> @faststore/core@3.88.5 partytown /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.88.7 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.88.5 generate /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.88.7 generate /home/runner/work/faststore/faststore/packages/core
 > na run generate:schema && na run generate:codegen && na run format:generated
 
 
-> @faststore/core@3.88.5 generate:schema /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.88.7 generate:schema /home/runner/work/faststore/faststore/packages/core
 > tsx src/server/generator/generateGraphQLSchemaFile.ts
 
 Schema GraphQL file generated successfully
 
-> @faststore/core@3.88.5 generate:codegen /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.88.7 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.88.5 format:generated /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.88.7 format:generated /home/runner/work/faststore/faststore/packages/core
 > prettier --write "@generated/**/*.{ts,js,tsx,jsx,json}" --loglevel error
 
 
-> @faststore/core@3.88.5 build /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.88.7 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
@@ -58,7 +58,7 @@ Browserslist: caniuse-lite is outdated. Please run:
    Creating an optimized production build ...
    Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc.js" https://nextjs.org/docs/messages/swc-disabled
    Using external babel configuration from /home/runner/work/faststore/faststore/packages/core/.babelrc.js
-Browserslist: browsers data (caniuse-lite) is 8 months old. Please run:
+Browserslist: browsers data (caniuse-lite) is 9 months old. Please run:
   npx update-browserslist-db@latest
   Why you should do it regularly: https://github.com/browserslist/update-db#readme
  ✓ Compiled successfully
@@ -74,12 +74,12 @@ Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Cont
 
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      3.69 kB         142 kB
-├   └ css/b1806cbafd0c1f81.css             3.06 kB
+├   └ css/c29fee5b9f9d48d9.css             3.07 kB
 ├   /_app                                  0 B             107 kB
 ├ ● /[...slug]                             2.49 kB         156 kB
 ├ ● /[slug]/p                              97.4 kB         236 kB
-├   ├ css/6cd282d958f613bc.css             5.9 kB
-├   └ css/175fa823349dc534.css             22 kB
+├   ├ css/331f08e9d306e70b.css             5.92 kB
+├   └ css/a9328b56f3942b82.css             22 kB
 ├ ○ /404                                   1.57 kB         140 kB
 ├ ● /500                                   1.57 kB         140 kB
 ├ λ /api/graphql                           0 B             107 kB
@@ -90,26 +90,26 @@ Route (pages)                              Size     First Load JS
 ├ ● /login                                 1.7 kB          140 kB
 ├ λ /pvt/account                           247 B           108 kB
 ├ ● /pvt/account/[...unknown]              287 B           108 kB
-├ λ /pvt/account/403                       2.47 kB         141 kB
-├   └ css/b7bba8fce075688b.css             4.2 kB
-├ λ /pvt/account/404                       2.16 kB         140 kB
-├   └ css/5347dbc8b71de47d.css             4.25 kB
-├ λ /pvt/account/orders                    10.5 kB         149 kB
-├   └ css/b7fc24e8f1eb011f.css             12.8 kB
-├ λ /pvt/account/orders/[id]               12.2 kB         150 kB
-├   └ css/297be4be3be36ff0.css             12.6 kB
-├ λ /pvt/account/profile                   1.81 kB         140 kB
-├   └ css/831a1f72fe4b2d80.css             3.97 kB
-├ λ /pvt/account/security                  3.79 kB         142 kB
-├   └ css/ec7fdad03808422d.css             5.22 kB
-├ λ /pvt/account/user-details              1.76 kB         140 kB
-├   └ css/e46393a76c5d93a9.css             4.17 kB
+├ λ /pvt/account/403                       2.49 kB         141 kB
+├   └ css/c53b17b6fa994508.css             4.66 kB
+├ λ /pvt/account/404                       2.18 kB         140 kB
+├   └ css/ceb410a7062740d1.css             4.72 kB
+├ λ /pvt/account/orders                    10.6 kB         149 kB
+├   └ css/f81198b7fe9f5f6f.css             13.9 kB
+├ λ /pvt/account/orders/[id]               12.1 kB         150 kB
+├   └ css/da5bfb1f39c54578.css             13.3 kB
+├ λ /pvt/account/profile                   1.98 kB         140 kB
+├   └ css/b65e005fb943434c.css             4.4 kB
+├ λ /pvt/account/security                  3.96 kB         142 kB
+├   └ css/6bb0abee27fe0019.css             5.65 kB
+├ λ /pvt/account/user-details              1.91 kB         140 kB
+├   └ css/bd121d85d6ceed46.css             4.52 kB
 └ ● /s                                     3.28 kB         157 kB
 + First Load JS shared by all              111 kB
   ├ chunks/framework-d514426edf885c68.js   45.4 kB
   ├ chunks/main-595f5e3b626b9fff.js        33.2 kB
   ├ chunks/pages/_app-78bc68991096280c.js  25 kB
-  ├ chunks/webpack-3230a260fda8541e.js     3.85 kB
+  ├ chunks/webpack-f16e329d9f50b79b.js     3.86 kB
   └ css/24a5e8f6808266fe.css               3.53 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,14 +1,15 @@
 
-> @faststore/core@3.88.5 test /home/runner/work/faststore/faststore/packages/core
+> @faststore/core@3.88.7 test /home/runner/work/faststore/faststore/packages/core
 > jest
 
-PASS test/server/cms/global.test.ts (27.829 s)
-PASS test/utils/multipleTemplates.test.ts (28.007 s)
+PASS test/utils/multipleTemplates.test.ts (27.104 s)
+PASS test/server/cms/global.test.ts (27.492 s)
 PASS test/server/cms/index.test.ts
-PASS test/server/index.test.ts (31.794 s)
+PASS test/server/index.test.ts (31.571 s)
+A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.
 
 Test Suites: 4 passed, 4 total
 Tests:       22 passed, 22 total
 Snapshots:   0 total
-Time:        32.913 s
+Time:        32.998 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.89.0](https://github.com/vtex/faststore/compare/v3.88.7...v3.89.0) (2025-10-02)
+
+### Features
+
+- My Account QA SFS-2859 ([#3040](https://github.com/vtex/faststore/issues/3040)) ([5e36a5f](https://github.com/vtex/faststore/commit/5e36a5f31acb1523024ad6e7063ca51aabe2f303)), closes [/github.com/vtex/faststore/blob/af6d2acbbc2fb72778c7223897ec7846736b4c87/packages/core/src/components/account/orders/MyAccountOrderDetails/MyAccountOrderDetails.tsx#L1](https://github.com//github.com/vtex/faststore/blob/af6d2acbbc2fb72778c7223897ec7846736b4c87/packages/core/src/components/account/orders/MyAccountOrderDetails/MyAccountOrderDetails.tsx/issues/L1)
+
+## [3.88.7](https://github.com/vtex/faststore/compare/v3.88.6...v3.88.7) (2025-09-25)
+
+### Bug Fixes
+
+- refactor search dropdown to handle analytics events asynchronously ([#3057](https://github.com/vtex/faststore/issues/3057)) ([ebd0ead](https://github.com/vtex/faststore/commit/ebd0eadfaf80f493e4defd88e47517f346720810))
+
 ## [3.88.6](https://github.com/vtex/faststore/compare/v3.88.5...v3.88.6) (2025-09-23)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.88.6",
+  "version": "3.89.0",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -48,7 +48,7 @@
     "@faststore/graphql-utils": "^3.81.0",
     "@faststore/lighthouse": "^3.81.0",
     "@faststore/sdk": "^3.88.6",
-    "@faststore/ui": "^3.88.0",
+    "@faststore/ui": "^3.89.0",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
     "@graphql-codegen/typescript": "4.0.7",
@@ -116,5 +116,5 @@
     "ts-jest": "29.1.1",
     "typescript": "5.3.2"
   },
-  "gitHead": "34769c038ba85fdb91feade652abbe350b6578d6"
+  "gitHead": "77bd257d8f854dba233d1962aad06f34a1b12230"
 }

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

@@ -23,10 +23,10 @@ const MyAccountLayout = ({
       )
 
   return (
-    <div className={styles.layout}>
+    <section className={styles.layout}>
       <MyAccountMenu accountName={accountName} items={routes} />
-      <section>{children}</section>
-    </div>
+      <div data-fs-account-layout-content>{children}</div>
+    </section>
   )
 }
 export default MyAccountLayout

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

@@ -1,11 +1,13 @@
 .layout {
   @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
   @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
   @import "@faststore/ui/src/components/atoms/Input/styles.scss";
   @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
   @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
   @import "../MyAccountMenu/styles.scss";
+  @import "../components/MyAccountHeader/styles.scss";
 
   display: grid;
   grid-template-rows: auto 1fr;
@@ -18,4 +20,12 @@
     max-width: var(--fs-grid-breakpoint-desktop);
     margin: 0 auto;
   }
+
+  [data-fs-account-layout-content] {
+    padding: 0 var(--fs-spacing-4);
+
+    @include media(">=notebook") {
+      padding: 0 var(--fs-spacing-8);
+    }
+  }
 }

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

@@ -46,6 +46,7 @@
   height: var(--fs-spacing-6);
   font-size: var(--fs-text-size-1);
   font-weight: var(--fs-text-weight-medium);
+  white-space: nowrap;
   background-color: var(--fs-color-tertiary-bkg);
   border-radius: var(--fs-border-radius-pill);
 
@@ -101,7 +102,7 @@
 
   .nav {
     flex-direction: column;
-    gap: 0;
+    gap: var(--fs-spacing-0);
   }
 
   .navItem {

package/src/components/account/MyAccountUserDetails/MyAccountUserDetails.tsx

@@ -1,4 +1,6 @@
 import Tag from '../components/MyAccountTag'
+import AccountTable from '../components/MyAccountTable'
+import AccountHeader from '../components/MyAccountHeader'
 import styles from './styles.module.scss'
 
 type MyAccountUserDetailsProps = {
@@ -15,46 +17,23 @@ export default function MyAccountUserDetails({
 }: MyAccountUserDetailsProps) {
   return (
     <section className={styles.section}>
-      <h1 data-fs-user-details-title>User details</h1>
+      <AccountHeader pageTitle="User details" />
       <div data-fs-user-details-container>
-        <table data-fs-user-details-table>
-          <tbody>
-            <tr data-fs-user-details-row>
-              <th data-fs-user-details-row-label>Name</th>
-              <td data-fs-user-details-row-value>{name}</td>
-            </tr>
-            <tr data-fs-user-details-divider-row>
-              <td data-fs-user-details-divider></td>
-              <td data-fs-user-details-divider></td>
-            </tr>
-            <tr data-fs-user-details-row>
-              <th data-fs-user-details-row-label>Email</th>
-              <td data-fs-user-details-row-value>{email}</td>
-            </tr>
-            <tr data-fs-user-details-divider-row>
-              <td data-fs-user-details-divider></td>
-              <td data-fs-user-details-divider></td>
-            </tr>
-            <tr data-fs-user-details-row>
-              <th data-fs-user-details-row-label>Role</th>
-              <td data-fs-user-details-row-tags>
-                {role.map((r) => (
-                  <span key={r} data-fs-user-details-row-value>
-                    <Tag>{r}</Tag>
-                  </span>
-                ))}
-              </td>
-            </tr>
-            <tr data-fs-user-details-divider-row>
-              <td data-fs-user-details-divider></td>
-              <td data-fs-user-details-divider></td>
-            </tr>
-            <tr data-fs-user-details-row>
-              <th data-fs-user-details-row-label>Organizational unit</th>
-              <td data-fs-user-details-row-value>{orgUnit}</td>
-            </tr>
-          </tbody>
-        </table>
+        <AccountTable
+          rows={[
+            { heading: 'Name', data: name ? name : '–' },
+            { heading: 'Email', data: email },
+            {
+              heading: 'Role',
+              data: role.map((r) => (
+                <span key={r} data-fs-user-details-row-value>
+                  <Tag>{r}</Tag>
+                </span>
+              )),
+            },
+            { heading: 'Organizational unit', data: orgUnit },
+          ]}
+        />
       </div>
     </section>
   )

package/src/components/account/MyAccountUserDetails/styles.module.scss

@@ -1,108 +1,16 @@
 @layer components {
   .section {
     @import "../components/MyAccountTag/styles.scss";
+    @import "../components/MyAccountTable/styles.scss";
 
     // --------------------------------------------------------
     // Design Tokens
     // --------------------------------------------------------
 
-    --fs-user-details-padding                     : var(--fs-spacing-4) var(--fs-spacing-9);
-
-    // Title
-    --fs-user-details-title-padding               : var(--fs-spacing-4) 0;
-    --fs-user-details-title-size                  : var(--fs-text-size-4);
-    --fs-user-details-title-weight                : var(--fs-text-weight-semibold);
-    --fs-user-details-title-line-height           : var(--fs-spacing-4);
-
-    // Divider
-    --fs-user-details-divider-border              : calc(var(--fs-border-width) / 2) solid #e0e0e0;
-
-    // Row
-    --fs-user-details-row-padding                 : var(--fs-spacing-4) 0;
-    --fs-user-details-row-weight                  : var(--fs-text-weight-medium);
-    --fs-user-details-row-label-width             : 12.5rem;
-    --fs-user-details-row-label-size              : var(--fs-text-size-1);
-    --fs-user-details-row-label-weight            : var(--fs-text-weight-medium);
-    --fs-user-details-row-label-color             : var(--fs-color-neutral-5);
-
-    // Row Value
-    --fs-user-details-row-value-size              : var(--fs-text-size-1);
-    --fs-user-details-row-value-weight            : var(--fs-text-weight-medium);
-    --fs-user-details-row-value-color             : black;
-
-    width: 100%;
-    padding: var(--fs-user-details-padding);
-
-    @include media("<notebook") {
-      padding: var(--fs-spacing-0) var(--fs-spacing-5);
-    }
-
-    [data-fs-user-details-table] {
-      width: 100%;
-      border-spacing: 0;
-      border-collapse: collapse;
-    }
-
-    [data-fs-user-details-row] {
-      display: flex;
-      padding: var(--fs-user-details-row-padding);
-      font-weight: var(--fs-user-details-row-weight);
-      line-height: var(--fs-user-details-row-line-height);
-      border-bottom: var(--fs-user-details-divider-border);
-
-      @include media("<tablet") {
-        flex-direction: column;
-        gap: .5rem;
-      }
-    }
-
-    [data-fs-user-details-row]:last-of-type {
-      border-bottom: none;
-    }
-
-    [data-fs-user-details-divider-row] {
-      height: 0;
-    }
-
-    [data-fs-user-details-divider] {
-      height: 0;
-      padding: 0;
-      border: none;
-      border: var(--fs-user-details-divider-border);
-    }
-
-    [data-fs-user-details-title] {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: var(--fs-user-details-title-padding);
-      font-size: var(--fs-user-details-title-size);
-      font-weight: var(--fs-user-details-title-weight);
-      line-height: var(--fs-user-details-title-line-height);
-    }
-
-    [data-fs-user-details-row-label] {
-      width: var(--fs-user-details-row-label-width);
-      font-size: var(--fs-user-details-row-label-size);
-      font-weight: var(--fs-user-details-row-label-weight);
-      color: var(--fs-user-details-row-label-color);
-      text-align: left;
-    }
-
-    [data-fs-user-details-row-value] {
-      font-size: var(--fs-user-details-row-value-size);
-      font-weight: var(--fs-user-details-row-value-weight);
-      color: var(--fs-user-details-row-value-color);
-    }
-
     [data-fs-user-details-row-tags] {
       display: flex;
       flex-wrap: wrap;
       gap: var(--fs-spacing-0);
-
-      [data-fs-user-details-row-value] {
-        margin-top: var(--fs-spacing-0);
-      }
     }
   }
 }

package/src/components/account/components/MyAccountHeader/MyAccountHeader.tsx

@@ -0,0 +1,13 @@
+interface MyAccountHeaderProps {
+  pageTitle: string
+}
+
+function MyAccountHeader({ pageTitle }: MyAccountHeaderProps) {
+  return (
+    <header data-fs-account-header>
+      <h1 data-fs-account-header-title>{pageTitle}</h1>
+    </header>
+  )
+}
+
+export default MyAccountHeader

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

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

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

@@ -0,0 +1,13 @@
+[data-fs-account-header] {
+  padding: var(--fs-spacing-3) 0;
+
+  @include media(">=notebook") {
+    padding: var(--fs-spacing-6) 0;
+  }
+
+  [data-fs-account-header-title] {
+    font-family: var(--fs-text-face-title);
+    font-size: var(--fs-text-size-4);
+    font-weight: var(--fs-text-weight-semibold);
+  }
+}

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

@@ -11,14 +11,14 @@
   --fs-my-account-badge-padding                                  : var(--fs-spacing-0) var(--fs-spacing-2);
   --fs-my-account-badge-line-height                              : 1;
   --fs-my-account-badge-color                                    : var(--fs-color-text);
-  --fs-my-account-badge-border                                   : 1px none transparent;
+  --fs-my-account-badge-border                                   : 2px solid var(--fs-color-neutral-0);
   --fs-my-account-badge-border-radius                            : var(--fs-border-radius-pill);
   --fs-my-account-badge-success-bkg                              : var(--fs-color-success-bkg);
-  --fs-my-account-badge-success-border                           : var(--fs-color-success-bkg);
+  --fs-my-account-badge-success-border                           : var(--fs-color-neutral-0);
   --fs-my-account-badge-warning-bkg                              : var(--fs-color-warning-bkg);
-  --fs-my-account-badge-warning-border                           : var(--fs-color-warning-bkg);
+  --fs-my-account-badge-warning-border                           : var(--fs-color-neutral-0);
   --fs-my-account-badge-neutral-bkg                              : var(--fs-color-neutral-bkg);
-  --fs-my-account-badge-neutral-border                           : var(--fs-color-neutral-bkg);
+  --fs-my-account-badge-neutral-border                           : var(--fs-color-neutral-0);
 
   // --------------------------------------------------------
   // Structural Styles

package/src/components/account/components/MyAccountTable/MyAccountTable.tsx

@@ -0,0 +1,23 @@
+interface MyAccountTableProps {
+  rows?: Array<{
+    heading: string
+    data: React.ReactNode | string
+  }>
+}
+
+function MyAccountTable({ rows, ...props }: MyAccountTableProps) {
+  return (
+    <table data-fs-account-table {...props}>
+      <tbody data-fs-account-table-body>
+        {rows?.map((row, idx) => (
+          <tr data-fs-account-table-row key={idx}>
+            <th data-fs-account-table-heading>{row.heading}</th>
+            <td data-fs-account-table-data>{row.data}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
+
+export default MyAccountTable

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

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

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

@@ -0,0 +1,67 @@
+[data-fs-account-table] {
+  display: grid;
+  grid-template-columns: 1fr;
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  @include media(">=notebook") {
+    grid-template-columns: minmax(11.25rem, auto) 1fr;
+  }
+
+  [data-fs-account-table-body] {
+    display: contents;
+    gap: var(--fs-spacing-1);
+  }
+
+  [data-fs-account-table-row] {
+    display: flex;
+    flex-direction: column;
+    padding: var(--fs-spacing-4) 0;
+    border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
+
+    &:last-child:not(:only-child) {
+      > [data-fs-account-table-heading],
+      > [data-fs-account-table-data] { border-bottom: none; }
+    }
+
+    @include media(">=notebook") {
+      display: contents;
+    }
+  }
+
+  [data-fs-account-table-heading] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: var(--fs-spacing-1);
+    font-family: var(--fs-text-face-body);
+    font-size: var(--fs-text-size-2);
+    font-weight: var(--fs-text-weight-regular);
+    color: var(--fs-color-text-light);
+    text-align: left;
+
+    @include media(">=notebook") {
+      min-height: var(--fs-spacing-10);
+      padding-bottom: 0;
+      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
+    }
+  }
+
+  [data-fs-account-table-data] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--fs-text-face-body);
+    font-size: var(--fs-text-size-2);
+    font-weight: var(--fs-text-weight-regular);
+    color: var(--fs-color-text);
+
+    [data-fs-link] { padding: 0; }
+
+    @include media(">=notebook") {
+      min-height: var(--fs-spacing-10);
+      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
+    }
+  }
+}