@faststore/core 3.88.7 → 3.89.1

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);
+    }
+  }
+}

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrders.tsx

@@ -14,6 +14,7 @@ import {
 } from '@faststore/ui'
 import { useEffect } from 'react'
 import MyAccountFilterSlider from 'src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider'
+import AccountHeader from '../../components/MyAccountHeader'
 import { useDebounce } from 'src/sdk/account/useDebounce'
 import {
   useMyAccountFilter,
@@ -191,151 +192,147 @@ export default function MyAccountListOrders({
 
   return (
     <div className={styles.page}>
-      <div data-fs-list-orders>
-        <h1 data-fs-list-orders-title>Orders</h1>
-        <div data-fs-list-orders-header>
-          <div data-fs-list-orders-search-filters>
-            <SearchInputField
-              ref={searchInputRef}
-              data-fs-search-input-field-list-orders
-              placeholder="Search"
-              onBlur={(_) => {
+      <AccountHeader pageTitle="Orders" />
+      <div data-fs-list-orders-controls>
+        <div data-fs-list-orders-search-filters>
+          <SearchInputField
+            ref={searchInputRef}
+            data-fs-search-input-field-list-orders
+            placeholder="Search"
+            onBlur={(_) => {
+              handleSearchChange(searchInputRef.current.inputRef.value)
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
                 handleSearchChange(searchInputRef.current.inputRef.value)
-              }}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  handleSearchChange(searchInputRef.current.inputRef.value)
-                }
-              }}
-              onSubmit={(_) => {
-                handleSearchChange(searchInputRef.current.inputRef.value)
-              }}
-            />
-            <Button
-              data-fs-list-orders-search-filters-button
-              variant="tertiary"
-              icon={
-                <UIIcon
-                  width={16}
-                  height={16}
-                  name="FadersHorizontal"
-                  aria-label="Open Filters"
-                />
               }
-              iconPosition="left"
-              onClick={() => {
-                filter.dispatch({
-                  type: 'selectFacets',
-                  payload: getSelectedFacets({ filters }),
-                })
-                openFilter()
-              }}
-            >
-              Filters
-            </Button>
-          </div>
-          {isDesktop && (
-            <Pagination page={filters.page} total={total} perPage={perPage} />
-          )}
+            }}
+            onSubmit={(_) => {
+              handleSearchChange(searchInputRef.current.inputRef.value)
+            }}
+          />
+          <Button
+            data-fs-list-orders-search-filters-button
+            size="small"
+            variant="tertiary"
+            icon={
+              <UIIcon
+                name="FadersHorizontal"
+                width={24}
+                height={24}
+                aria-label="Open Filters"
+              />
+            }
+            iconPosition="left"
+            onClick={() => {
+              filter.dispatch({
+                type: 'selectFacets',
+                payload: getSelectedFacets({ filters }),
+              })
+              openFilter()
+            }}
+          >
+            Filters
+          </Button>
         </div>
+        {isDesktop && (
+          <Pagination page={filters.page} total={total} perPage={perPage} />
+        )}
+      </div>
 
-        <SelectedFiltersTags
-          filters={{
-            status: filters.status,
-            dateInitial: filters.dateInitial,
-            dateFinal: filters.dateFinal,
-            purchaseAgentId: filters.purchaseAgentId,
-          }}
-          onClearAll={() => {
-            window.location.href = '/pvt/account/orders'
-          }}
-          onRemoveFilter={(key, value) => {
-            const { page, clientEmail, ...updatedFilters } = { ...filters }
-
-            if (key === 'status' && Array.isArray(updatedFilters[key])) {
-              updatedFilters[key] = updatedFilters[key].filter(
-                (v) => v !== value
-              )
-            } else if (key === 'dateInitial' || key === 'dateFinal') {
-              delete updatedFilters.dateInitial
-              delete updatedFilters.dateFinal
-            } else if (key === 'purchaseAgentId') {
-              delete updatedFilters.purchaseAgentId
-            } else {
-              delete updatedFilters[key]
-            }
+      <SelectedFiltersTags
+        filters={{
+          status: filters.status,
+          dateInitial: filters.dateInitial,
+          dateFinal: filters.dateFinal,
+          purchaseAgentId: filters.purchaseAgentId,
+        }}
+        onClearAll={() => {
+          window.location.href = '/pvt/account/orders'
+        }}
+        onRemoveFilter={(key, value) => {
+          const { page, clientEmail, ...updatedFilters } = { ...filters }
 
-            if (key === 'status' && Array.isArray(updatedFilters[key])) {
-              updatedFilters[key] = updatedFilters[key].filter(
-                (v) => v.toLowerCase() !== value.toLowerCase()
-              )
-            } else if (key === 'dateInitial' || key === 'dateFinal') {
-              delete updatedFilters.dateInitial
-              delete updatedFilters.dateFinal
-            } else if (key === 'purchaseAgentId') {
-              delete updatedFilters.purchaseAgentId
-            } else {
-              delete updatedFilters[key]
-            }
+          if (key === 'status' && Array.isArray(updatedFilters[key])) {
+            updatedFilters[key] = updatedFilters[key].filter((v) => v !== value)
+          } else if (key === 'dateInitial' || key === 'dateFinal') {
+            delete updatedFilters.dateInitial
+            delete updatedFilters.dateFinal
+          } else if (key === 'purchaseAgentId') {
+            delete updatedFilters.purchaseAgentId
+          } else {
+            delete updatedFilters[key]
+          }
 
-            // Remove filters with no values
-            const filteredQuery = Object.fromEntries(
-              Object.entries(updatedFilters).filter(([, v]) =>
-                Array.isArray(v) ? v.length > 0 : Boolean(v)
-              )
+          if (key === 'status' && Array.isArray(updatedFilters[key])) {
+            updatedFilters[key] = updatedFilters[key].filter(
+              (v) => v.toLowerCase() !== value.toLowerCase()
             )
+          } else if (key === 'dateInitial' || key === 'dateFinal') {
+            delete updatedFilters.dateInitial
+            delete updatedFilters.dateFinal
+          } else if (key === 'purchaseAgentId') {
+            delete updatedFilters.purchaseAgentId
+          } else {
+            delete updatedFilters[key]
+          }
 
-            const params = new URLSearchParams(
-              filteredQuery as Record<string, string>
+          // Remove filters with no values
+          const filteredQuery = Object.fromEntries(
+            Object.entries(updatedFilters).filter(([, v]) =>
+              Array.isArray(v) ? v.length > 0 : Boolean(v)
             )
-            window.location.href = `/pvt/account/orders?${params.toString()}`
-          }}
-        />
+          )
 
-        {displayFilter && (
-          <MyAccountFilterSlider
-            {...filter}
-            title="Filters"
-            clearButtonLabel="Clear All"
-            applyButtonLabel="View Results"
-            searchInputRef={searchInputRef}
-          />
-        )}
+          const params = new URLSearchParams(
+            filteredQuery as Record<string, string>
+          )
+          window.location.href = `/pvt/account/orders?${params.toString()}`
+        }}
+      />
 
-        {isEmpty ? (
-          <EmptyState
-            titleIcon={
-              <UIIcon
-                name={hasFilters ? 'MagnifyingGlass' : 'Bag2'}
-                width={56}
-                height={56}
-                weight="thin"
-              />
-            }
-            title={
-              hasFilters ? 'No results found' : "You don't have any orders"
-            }
-            bkgColor="light"
-          >
-            {!hasFilters && (
-              <LinkButton
-                data-fs-list-orders-empty-state-link
-                href="/"
-                variant="secondary"
-              >
-                Start shopping
-              </LinkButton>
-            )}
-          </EmptyState>
-        ) : (
-          <MyAccountListOrdersTable
-            listOrders={listOrders}
-            total={total}
-            perPage={perPage}
-            filters={filters}
-          />
-        )}
-      </div>
+      {displayFilter && (
+        <MyAccountFilterSlider
+          {...filter}
+          title="Filters"
+          clearButtonLabel="Clear All"
+          applyButtonLabel="View Results"
+          searchInputRef={searchInputRef}
+          testId="my-account-filter-slider"
+        />
+      )}
+
+      {isEmpty ? (
+        <EmptyState
+          titleIcon={
+            <UIIcon
+              name={hasFilters ? 'MagnifyingGlass' : 'Bag2'}
+              width={56}
+              height={56}
+              weight="thin"
+            />
+          }
+          title={hasFilters ? 'No results found' : "You don't have any orders"}
+          bkgColor="light"
+        >
+          {!hasFilters && (
+            <LinkButton
+              data-fs-list-orders-empty-state-link
+              href="/"
+              variant="secondary"
+            >
+              Start shopping
+            </LinkButton>
+          )}
+        </EmptyState>
+      ) : (
+        <MyAccountListOrdersTable
+          listOrders={listOrders}
+          total={total}
+          perPage={perPage}
+          filters={filters}
+        />
+      )}
       {!isDesktop && (
         <Pagination page={filters.page} total={total} perPage={perPage} />
       )}

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrdersTable/MyAccountListOrdersTable.tsx

@@ -1,4 +1,4 @@
-import { Button, Icon } from '@faststore/ui'
+import { Button, Icon, IconButton } from '@faststore/ui'
 import type { ServerListOrdersQueryQuery } from '@generated/graphql'
 import { useState } from 'react'
 
@@ -62,36 +62,22 @@ export function Pagination({
   return (
     <div data-fs-list-orders-table-pagination>
       <p>{`${firstIndexLabel} — ${lastIndexLabel} of ${total}`}</p>
-      <Button
+      <IconButton
         size="small"
         variant="tertiary"
         disabled={page === 1}
         onClick={() => handlePageChange(page - 1)}
-        icon={
-          <Icon
-            width={16}
-            height={16}
-            name="CaretLeft"
-            aria-label="Previous Page"
-          />
-        }
-        iconPosition="left"
-      ></Button>
-      <Button
+        icon={<Icon name="CaretLeft" />}
+        aria-label="Previous Page"
+      />
+      <IconButton
         size="small"
         variant="tertiary"
         disabled={page === totalPages}
         onClick={() => handlePageChange(page + 1)}
-        icon={
-          <Icon
-            width={16}
-            height={16}
-            name="CaretRight"
-            aria-label="Next Page"
-          />
-        }
-        iconPosition="left"
-      ></Button>
+        icon={<Icon name="CaretRight" />}
+        aria-label="Next Page"
+      />
     </div>
   )
 }
@@ -191,7 +177,6 @@ export default function MyAccountListOrdersTable({
 
             return (
               <tr
-                data-fs-list-orders-table-body-row
                 data-fs-list-orders-table-row
                 key={item.orderId}
                 onClick={handleRowClick}