@faststore/core 3.88.7 → 3.89.1

package/src/components/account/security/SecurityDrawer.tsx

@@ -133,100 +133,98 @@ export const SecurityDrawer = ({
       </SlideOverHeader>
 
       <div data-fs-security-drawer-body>
-        <div data-fs-security-drawer-body-form>
-          <div data-fs-security-drawer-body-current-password>
-            <Input
-              data-fs-security-drawer-input
-              id="security-drawer-input-current-password"
-              type={showCurrentPassword ? 'text' : 'password'}
-              placeholder="Current Password"
-              inputMode="text"
-              value={currentPassword}
-              onChange={(e) => {
-                setFormError(null)
-                setCurrentPassword(e.target.value)
-              }}
-            />
-            <IconButton
-              data-fs-security-drawer-input-password-toggle
-              size="small"
-              aria-label="Show Password"
-              onClick={() => setShowCurrentPassword((prev) => !prev)}
-              icon={
-                showCurrentPassword ? (
-                  <Icon name="EyeSlash" />
-                ) : (
-                  <Icon name="Eye" />
-                )
-              }
-            />
-          </div>
+        <div data-fs-security-drawer-body-password>
+          <Input
+            data-fs-security-drawer-input
+            id="security-drawer-input-current-password"
+            type={showCurrentPassword ? 'text' : 'password'}
+            placeholder="Current Password"
+            inputMode="text"
+            value={currentPassword}
+            onChange={(e) => {
+              setFormError(null)
+              setCurrentPassword(e.target.value)
+            }}
+          />
+          <IconButton
+            data-fs-security-drawer-input-password-toggle
+            size="small"
+            aria-label="Show Password"
+            onClick={() => setShowCurrentPassword((prev) => !prev)}
+            icon={
+              showCurrentPassword ? (
+                <Icon name="EyeSlash" />
+              ) : (
+                <Icon name="Eye" />
+              )
+            }
+          />
+        </div>
 
-          <div data-fs-security-drawer-body-new-password>
-            <Input
-              data-fs-security-drawer-input
-              id="security-drawer-input-new-password"
-              type={showNewPassword ? 'text' : 'password'}
-              placeholder="New Password"
-              inputMode="text"
-              value={newPassword}
-              onChange={(e) => {
-                setFormError(null)
-                setNewPassword(e.target.value)
-              }}
-            />
-            <IconButton
-              data-fs-security-drawer-input-password-toggle
-              size="small"
-              aria-label="Show Password"
-              onClick={() => setShowNewPassword((prev) => !prev)}
-              icon={
-                showNewPassword ? <Icon name="EyeSlash" /> : <Icon name="Eye" />
-              }
+        <div data-fs-security-drawer-body-password>
+          <Input
+            data-fs-security-drawer-input
+            id="security-drawer-input-new-password"
+            type={showNewPassword ? 'text' : 'password'}
+            placeholder="New Password"
+            inputMode="text"
+            value={newPassword}
+            onChange={(e) => {
+              setFormError(null)
+              setNewPassword(e.target.value)
+            }}
+          />
+          <IconButton
+            data-fs-security-drawer-input-password-toggle
+            size="small"
+            aria-label="Show Password"
+            onClick={() => setShowNewPassword((prev) => !prev)}
+            icon={
+              showNewPassword ? <Icon name="EyeSlash" /> : <Icon name="Eye" />
+            }
+          />
+        </div>
+
+        {formError && (
+          <div data-fs-security-drawer-error>
+            <Icon
+              width={20}
+              height={20}
+              name="CircleWavyWarning"
+              data-fs-security-drawer-error-icon
             />
+            <span>{formError}</span>
           </div>
-
-          {formError && (
-            <div data-fs-security-drawer-error>
-              <Icon
-                width={20}
-                height={20}
-                name="CircleWavyWarning"
-                data-fs-security-drawer-error-icon
-              />
-              <span>{formError}</span>
-            </div>
-          )}
-
-          {newPassword.length > 0 && (
-            <div data-fs-security-drawer-input-password-rules-container>
-              <p data-fs-security-drawer-input-password-rules-title>
-                Your password must have at least:
-              </p>
-
-              <ul data-fs-security-drawer-input-password-rules-list>
-                {newPasswordValidations.map((rule, index) => (
-                  <li
-                    key={index}
-                    data-fs-security-drawer-input-password-rule-item
-                    data-status={rule.isValid ? 'success' : 'error'}
-                  >
-                    <Icon
-                      name={rule.isValid ? 'CheckCircle' : 'XCircle'}
-                      width={20}
-                      height={20}
-                    />
-                    {rule.label}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
+        )}
+
+        {newPassword.length > 0 && (
+          <div data-fs-security-drawer-password-rules-container>
+            <p data-fs-security-drawer-password-rules-title>
+              Your password must have at least:
+            </p>
+
+            <ul data-fs-security-drawer-password-rules-list>
+              {newPasswordValidations.map((rule, index) => (
+                <li
+                  key={index}
+                  data-fs-security-drawer-password-rule-item
+                  data-status={rule.isValid ? 'success' : 'error'}
+                >
+                  <Icon
+                    name={rule.isValid ? 'CheckCircle' : 'XCircle'}
+                    width={20}
+                    height={20}
+                  />
+                  {rule.label}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
       </div>
 
       <footer data-fs-security-drawer-footer>
-        <Button variant="tertiary" onClick={handleClose}>
+        <Button variant="secondary" onClick={handleClose}>
           Cancel
         </Button>
 

package/src/components/account/security/SecuritySection.tsx

@@ -1,6 +1,9 @@
 import { useState } from 'react'
 import { Button } from '@faststore/ui'
 
+import AccountTable from '../components/MyAccountTable'
+import AccountHeader from '../components/MyAccountHeader'
+
 import { SecurityDrawer } from './SecurityDrawer'
 import styles from './styles.module.scss'
 
@@ -23,28 +26,28 @@ export const SecuritySection = ({
       )}
 
       <section data-fs-securiry-section className={styles.section}>
-        <header data-fs-security-header>
-          <h1 data-fs-security-title>Security</h1>
-        </header>
+        <AccountHeader pageTitle="Security" />
 
         <div data-fs-security-container>
-          <table data-fs-security-table>
-            <tbody data-fs-security-table-body>
-              <tr data-fs-security-table-row>
-                <th data-fs-security-table-heading>Password</th>
-                <td data-fs-security-table-data>
-                  <span data-fs-security-table-data-text>••••••••••</span>
-                  <Button
-                    variant="tertiary"
-                    data-fs-security-table-action-button
-                    onClick={() => setIsDrawerOpen(true)}
-                  >
-                    Reset password
-                  </Button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <AccountTable
+            rows={[
+              {
+                heading: 'Password',
+                data: (
+                  <>
+                    <span data-fs-security-table-data-text>••••••••••</span>
+                    <Button
+                      variant="tertiary"
+                      data-fs-security-table-action-button
+                      onClick={() => setIsDrawerOpen(true)}
+                    >
+                      Reset password
+                    </Button>
+                  </>
+                ),
+              },
+            ]}
+          />
         </div>
       </section>
     </>

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

@@ -5,6 +5,7 @@
     @import "@faststore/ui/src/components/atoms/Input/styles.scss";
     @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
     @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+    @import "../components/MyAccountTable/styles.scss";
 
     // --------------------------------------------------------
     // Design Tokens
@@ -24,40 +25,20 @@
     }
 
     [data-fs-security-drawer-header] {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
       border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
     }
 
     [data-fs-security-drawer-header-title] {
       font-size: var(--fs-text-size-3);
       font-weight: var(--fs-text-weight-bold);
-      color: var(--fs-color-text);
     }
 
     [data-fs-security-drawer-body] {
       display: flex;
       flex: 1;
       flex-direction: column;
-      gap: var(--fs-spacing-6);
-      padding: var(--fs-spacing-6);
-    }
-
-    [data-fs-security-drawer-body-form] {
-      display: flex;
-      flex-direction: column;
-      gap: var(--fs-spacing-3);
-    }
-
-    [data-fs-security-drawer-footer] {
-      display: flex;
       gap: var(--fs-spacing-2);
-      align-items: center;
-      justify-content: center;
-      padding: var(--fs-spacing-3);
-      border-top: var(--fs-border-width) solid var(--fs-border-color-light);
+      padding: var(--fs-spacing-4);
     }
 
     [data-fs-security-drawer-input] {
@@ -68,21 +49,18 @@
       font-weight: var(--fs-text-weight-regular);
     }
 
-    [data-fs-security-drawer-input-password-rules-container] {
+    [data-fs-security-drawer-password-rules-container] {
       display: flex;
       flex-direction: column;
       gap: var(--fs-spacing-2);
-      padding-block: var(--fs-spacing-2);
     }
 
-    [data-fs-security-drawer-input-password-rules-title] {
-      margin-bottom: var(--fs-spacing-2);
+    [data-fs-security-drawer-password-rules-title] {
       font-size: var(--fs-text-size-1);
-      font-weight: var(--fs-text-weight-semibold);
       color: var(--fs-color-text-light);
     }
 
-    [data-fs-security-drawer-input-password-rules-list] {
+    [data-fs-security-drawer-password-rules-list] {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: var(--fs-spacing-1);
@@ -90,31 +68,21 @@
       list-style: none;
     }
 
-    [data-fs-security-drawer-input-password-rule-item] {
+    [data-fs-security-drawer-password-rule-item] {
       display: flex;
       gap: var(--fs-spacing-1);
       align-items: center;
       font-size: var(--fs-text-size-1);
       font-weight: var(--fs-text-weight-regular);
       color: var(--fs-color-danger-text);
-    }
-
-    [data-fs-security-drawer-input-password-rule-item][data-status="success"] {
-      color: var(--fs-security-drawer-color-success);
-    }
 
-    [data-fs-security-drawer-input-password-rule-item][data-status="error"] {
-      color: var(--fs-security-drawer-color-error);
-    }
+      &[data-status="success"] {
+        color: var(--fs-security-drawer-color-success);
+      }
 
-    [data-fs-security-drawer-body-info] {
-      display: flex;
-      gap: var(--fs-spacing-1);
-      align-items: center;
-      padding-block: var(--fs-spacing-2);
-      font-size: var(--fs-text-size-1);
-      font-weight: var(--fs-text-weight-regular);
-      color: var(--fs-color-text-light);
+      &[data-status="error"] {
+        color: var(--fs-security-drawer-color-error);
+      }
     }
 
     [data-fs-security-drawer-resend] {
@@ -123,20 +91,16 @@
       color: var(--fs-color-text-light);
     }
 
-    [data-fs-security-drawer-body-new-password] {
+    [data-fs-security-drawer-body-password] {
       position: relative;
       display: flex;
       flex-direction: column;
       gap: var(--fs-spacing-1);
       width: 100%;
-    }
 
-    [data-fs-security-drawer-body-current-password] {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      gap: var(--fs-spacing-1);
-      width: 100%;
+      &:first-child {
+        margin-bottom: var(--fs-spacing-3);
+      }
     }
 
     [data-fs-security-drawer-input-password-toggle] {
@@ -155,82 +119,6 @@
       transform: translateY(-50%);
     }
 
-    display: flex;
-    flex-direction: column;
-    gap: var(--fs-spacing-6);
-
-    [data-fs-security-header] {
-      padding-block: var(--fs-spacing-6);
-      padding-inline: var(--fs-spacing-11);
-    }
-
-    [data-fs-security-title] {
-      font-family: var(--fs-text-face-title);
-      font-size: var(--fs-text-size-3);
-      font-weight: var(--fs-text-weight-semibold);
-    }
-
-    [data-fs-security-container] {
-      display: flex;
-      flex-direction: column;
-      gap: var(--fs-spacing-6);
-    }
-
-    [data-fs-security-table] {
-      display: grid;
-      grid-template-columns: minmax(11.25rem, auto) 1fr;
-      width: 100%;
-      padding-inline: var(--fs-spacing-11);
-      border-spacing: 0;
-      border-collapse: collapse;
-    }
-
-    [data-fs-security-table-body] {
-      display: contents;
-    }
-
-    [data-fs-security-table-row] {
-      display: contents;
-      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
-    }
-
-    [data-fs-security-table-heading] {
-      display: flex;
-      align-items: center;
-      padding-block: var(--fs-spacing-4);
-      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;
-      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
-    }
-
-    [data-fs-security-table-data] {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding-block: var(--fs-spacing-4);
-      padding-inline: var(--fs-spacing-1);
-      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
-
-      [data-fs-security-table-data-text] {
-        padding-block: var(--fs-spacing-4);
-        padding-inline: var(--fs-spacing-1);
-        font-family: var(--fs-text-face-body);
-        font-size: var(--fs-text-size-2);
-        font-weight: var(--fs-text-weight-semibold);
-        color: var(--fs-color-text);
-      }
-    }
-
-    [data-fs-security-table-action] {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      padding-inline: var(--fs-spacing-1);
-    }
-
     [data-fs-security-drawer-error] {
       display: flex;
       gap: var(--fs-spacing-1);
@@ -246,29 +134,17 @@
       flex-shrink: 0;
     }
 
-    @include media("<notebook") {
-      [data-fs-security-header] {
-        padding-inline: var(--fs-spacing-4);
-      }
-
-      [data-fs-security-body] {
-        padding-inline: var(--fs-spacing-4);
-      }
-
-      [data-fs-security-table] {
-        grid-template-columns: 1fr;
-      }
-
-      [data-fs-security-table-heading] {
-        padding-block: var(--fs-spacing-4) 0;
-        border-bottom: none;
-      }
-
-      [data-fs-security-table-data] {
-        padding-block: var(--fs-spacing-1) var(--fs-spacing-4);
-        padding-inline: 0;
-      }
+    [data-fs-security-drawer-footer] {
+      display: flex;
+      gap: var(--fs-spacing-3);
+      align-items: center;
+      justify-content: center;
+      padding: var(--fs-spacing-3) var(--fs-spacing-4);
+      border-top: var(--fs-border-width) solid var(--fs-border-color-light);
+      [data-fs-button] { width: 100%; }
+    }
 
+    @include media("<notebook") {
       [data-fs-security-drawer-footer] {
         align-items: center;
         justify-content: flex-end;

package/src/experimental/myAccountSeverSideProps.ts

@@ -10,12 +10,12 @@ import {
   type GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import { execute } from 'src/server'
 import { getIsRepresentative } from 'src/sdk/account/getIsRepresentative'
+import { execute } from 'src/server'
 
+import { validateUser } from 'src/sdk/account/validateUser'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
-import { validateUser } from 'src/sdk/account/validateUser'
 import storeConfig from '../../discovery.config'
 
 export type MyAccountProps = {
@@ -26,7 +26,9 @@ export type MyAccountProps = {
 
 const query = gql(`
   query ServerAccountPageQuery {
-    accountName
+    accountProfile {
+      name
+    }
   }
 `)
 
@@ -91,7 +93,7 @@ export const getServerSideProps: GetServerSideProps<
   return {
     props: {
       globalSections: globalSectionsResult,
-      accountName: account.data.accountName,
+      accountName: account.data.accountProfile.name,
       isRepresentative,
     },
   }

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

@@ -35,7 +35,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
 
 type Props = {
   globalSections: GlobalSectionsData
-  accountName: ServerAccountPageQueryQuery['accountName']
+  accountName: ServerAccountPageQueryQuery['accountProfile']['name']
 }
 
 function Page({ globalSections: globalSectionsProp, accountName }: Props) {
@@ -66,7 +66,9 @@ function Page({ globalSections: globalSectionsProp, accountName }: Props) {
 
 const query = gql(`
   query ServerAccountPageQuery {
-    accountName
+    accountProfile {
+      name
+    }
   }
 `)
 
@@ -134,7 +136,7 @@ export const getServerSideProps: GetServerSideProps<
       // The sections from the CMS page are not utilized here for the My Account page.
       // page,
       globalSections: globalSectionsResult,
-      accountName: account.data.accountName,
+      accountName: account.data.accountProfile.name,
     },
   }
 }

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

@@ -38,7 +38,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
 type Props = {
   page: PageContentType
   globalSections: GlobalSectionsData
-  accountName: ServerAccountPageQueryQuery['accountName']
+  accountName: ServerAccountPageQueryQuery['accountProfile']['name']
 }
 
 function Page({
@@ -66,7 +66,9 @@ function Page({
 
 const query = gql(`
   query ServerAccountPageQuery {
-    accountName
+    accountProfile {
+      name
+    }
   }
 `)
 
@@ -133,7 +135,7 @@ export const getServerSideProps: GetServerSideProps<
     props: {
       page,
       globalSections: globalSectionsResult,
-      accountName: account.data.accountName,
+      accountName: account.data.accountProfile.name,
     },
   }
 }

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

@@ -257,7 +257,9 @@ const query = gql(`
         phone
       }
     }
-    accountName
+    accountProfile {
+      name
+    }
   }
 `)
 
@@ -346,7 +348,7 @@ export const getServerSideProps: GetServerSideProps<
     props: {
       globalSections: globalSectionsResult,
       order: orderDetails.data.userOrder,
-      accountName: orderDetails.data.accountName,
+      accountName: orderDetails.data.accountProfile.name,
       isRepresentative,
     },
   }

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

@@ -120,7 +120,9 @@ const query = gql(`
         perPage
       }
     }
-    accountName
+    accountProfile {
+      name
+    }
   }
 `)
 
@@ -242,7 +244,7 @@ export const getServerSideProps: GetServerSideProps<
   return {
     props: {
       globalSections: globalSectionsResult,
-      accountName: listOrders.data.accountName,
+      accountName: listOrders.data.accountProfile.name,
       listOrders: listOrders.data.listUserOrders,
       total: listOrders.data.listUserOrders.paging.total,
       perPage: listOrders.data.listUserOrders.paging.perPage,

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

@@ -1,6 +1,3 @@
-/* ######################################### */
-/* Mocked Page until development is finished, it will be removed after */
-
 import type { Locator } from '@vtex/client-cms'
 import type { GetServerSideProps } from 'next'
 import { NextSeo } from 'next-seo'
@@ -46,8 +43,8 @@ type ProfilePagePros = {
 
 export default function Profile({
   globalSections: globalSectionsProp,
-  accountName,
   accountProfile,
+  accountName,
   isRepresentative,
 }: ProfilePagePros) {
   const { sections: globalSections, settings: globalSettings } =
@@ -73,7 +70,6 @@ export default function Profile({
 
 const query = gql(`
   query ServerProfileQuery {
-    accountName
     accountProfile {
       name
       email
@@ -155,7 +151,7 @@ export const getServerSideProps: GetServerSideProps<
   return {
     props: {
       globalSections: globalSectionsResult,
-      accountName: profile.data.accountName,
+      accountName: profile.data.accountProfile.name,
       accountProfile: profile.data.accountProfile,
       isRepresentative,
     },