@faststore/core 3.88.7 → 3.89.0

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}

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrdersTable/styles.scss

@@ -17,11 +17,11 @@
   --fs-list-orders-table-product-info-margin-top-first   : var(--fs-spacing-0);
   --fs-list-orders-table-product-info-margin-top   : var(--fs-spacing-1);
   --fs-list-orders-table-product-info-line-height  : var(--fs-text-size-1);
-  --fs-list-orders-table-cell-padding              : var(--fs-spacing-4) var(--fs-spacing-2) var(--fs-spacing-3);
+  --fs-list-orders-table-cell-padding              : var(--fs-spacing-4) var(--fs-spacing-2);
   --fs-list-orders-table-cell-padding-mobile       : var(--fs-spacing-3) var(--fs-spacing-1);
   --fs-list-orders-table-cell-color                : var(--fs-color-neutral-6);
-  --fs-list-orders-table-row-border-bottom         : var(--fs-border-width) solid var(--fs-color-neutral-3);
-  --fs-list-orders-table-row-hover-bg              : color-mix(in srgb, var(--fs-color-accent-0) 30%, transparent);
+  --fs-list-orders-table-row-border-bottom         : var(--fs-border-width) solid var(--fs-border-color-light);
+  --fs-list-orders-table-row-hover-bg              : var(--fs-color-neutral-1);
 
   // Specific sizes
   --fs-list-orders-table-product-info-value-size   : 150px;
@@ -34,38 +34,50 @@
   width: 100%;
   margin: 0 auto;
   font-size: var(--fs-list-orders-table-font-size);
+  overflow-wrap: break-word;
   vertical-align: middle;
+  table-layout: fixed;
   border-collapse: collapse;
   border: none;
 
-  [data-fs-list-orders-table-cell]:first-child {
-    width: var(--fs-list-orders-table-first-child-width);
+  [data-fs-list-orders-table-product-info-main] {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+  }
 
-    @include media("<notebook") {
-      display: flex;
-      align-items: center;
-      width: var(--fs-list-orders-table-first-child-width-mobile);
+  [data-fs-list-orders-table-cell] {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-list-orders-table-gap);
+    align-items: flex-end;
+    justify-content: flex-end;
+    width: 50%;
+    padding: var(--fs-list-orders-table-cell-padding);
+    text-align: left;
+    vertical-align: top;
+
+    &:not(:first-child):not(:last-child) {
+      color: var(--fs-list-orders-table-cell-color);
     }
-  }
 
-  [data-fs-list-orders-table-cell]:last-child {
-    width: var(--fs-list-orders-table-last-child-width);
-    text-align: end;
+    &:last-child {
+      text-align: end;
+    }
 
-    @include media("<notebook") {
-      display: flex;
-      flex-direction: column;
-      gap: var(--fs-list-orders-table-gap);
-      align-items: flex-end;
-      justify-content: flex-end;
-      width: auto;
+    [data-fs-my-account-badge] { margin-right: calc(var(--fs-spacing-0) * -1); }
+
+    @include media(">=notebook") {
+      display: table-cell;
     }
   }
 
   [data-fs-list-orders-table-product-info-order-id], [data-fs-list-orders-table-product-info-order-total], [data-fs-list-orders-table-product-info-value] {
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   [data-fs-list-orders-table-product-info]:first-child, [data-fs-list-orders-table-product-info-value] {
@@ -74,9 +86,6 @@
 
   [data-fs-list-orders-table-product-info-value] {
     max-width: var(--fs-list-orders-table-product-info-value-size);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   [data-fs-list-orders-table-product-info-label] {
@@ -98,17 +107,6 @@
     line-height: var(--fs-list-orders-table-product-info-line-height);
   }
 
-  [data-fs-list-orders-table-cell] {
-    padding: var(--fs-list-orders-table-cell-padding);
-    text-align: left;
-    vertical-align: top;
-    border: none;
-
-    @include media("<notebook") {
-      padding: var(--fs-list-orders-table-cell-padding-mobile);
-    }
-  }
-
   [data-fs-list-orders-table-product-info-order], [data-fs-list-orders-table-product-info-item] {
     max-width: var(--fs-list-orders-table-product-info-order-size);
     margin-top: var(--fs-list-orders-table-product-info-margin-top-first);
@@ -117,11 +115,6 @@
     white-space: nowrap;
   }
 
-  [data-fs-list-orders-table-cell]:not(:first-child):not(:last-child) {
-    padding-top: calc(var(--fs-spacing-4) + var(--fs-spacing-0));
-    color: var(--fs-list-orders-table-cell-color);
-  }
-
   [data-fs-list-orders-table-row] {
     cursor: pointer;
     border-bottom: var(--fs-list-orders-table-row-border-bottom);
@@ -171,7 +164,7 @@
 
 [data-fs-list-orders-table-pagination] {
   --fs-list-orders-table-pagination-text-size   : .8rem;
-  --fs-list-orders-table-pagination-box-shadow  : 0 -4px 8px rgb(0 0 0 / 5%);
+  --fs-list-orders-table-pagination-box-shadow  : 0 -4px var(--fs-spacing-1) rgb(0 0 0 / 5%);
   --fs-list-orders-table-pagination-bkg-color   : var(--fs-body-bkg);
   --fs-list-orders-table-pagination-padding     : var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-0);
 
@@ -179,8 +172,10 @@
     position: sticky;
     bottom: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
     padding: var(--fs-list-orders-table-pagination-padding);
+    margin-right: calc(var(--fs-spacing-4) * -1);
+    margin-left: calc(var(--fs-spacing-4) * -1);
     background-color: var(--fs-list-orders-table-pagination-bkg-color);
     box-shadow: var(--fs-list-orders-table-pagination-box-shadow);
   }

package/src/components/account/orders/MyAccountListOrders/styles.module.scss

@@ -2,6 +2,8 @@
   @import "./MyAccountListOrdersTable/styles.scss";
   @import "./MyAccountSelectedTags/styles.scss";
   @import "../../components/MyAccountStatusBadge/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
   @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
 
   // --------------------------------------------------------
@@ -12,11 +14,6 @@
   --fs-list-orders-padding                            : var(--fs-spacing-5);
   --fs-page-height                                    : 100%;
 
-  // Title
-  --fs-list-orders-title-margin-bottom                : var(--fs-spacing-5);
-  --fs-list-orders-title-font-size                    : var(--fs-spacing-4);
-  --fs-list-orders-title-font-weight                  : var(--fs-text-weight-semibold);
-
   // Search Filters
   --fs-list-orders-filter-width                       : 55%;
   --fs-list-orders-filter-margin-bottom               : var(--fs-spacing-3);
@@ -33,24 +30,10 @@
 
   height: var(--fs-page-height);
 
-  [data-fs-list-orders] {
-    padding: var(--fs-list-orders-padding);
-
-    @include media("<notebook") {
-      padding-bottom: 0;
-    }
-  }
-
-  [data-fs-list-orders-title] {
-    margin-bottom: var(--fs-list-orders-title-margin-bottom);
-    font-size: var(--fs-list-orders-title-font-size);
-    font-weight: var(--fs-list-orders-title-font-weight);
-  }
-
-  [data-fs-list-orders-header] {
+  [data-fs-list-orders-controls] {
     display: flex;
-    align-items: baseline;
     justify-content: space-between;
+    margin-bottom: var(--fs-list-orders-filter-margin-bottom);
   }
 
   [data-fs-list-orders-search-filters] {
@@ -58,7 +41,6 @@
     align-items: center;
     justify-content: space-between;
     width: var(--fs-list-orders-filter-width);
-    margin-bottom: var(--fs-list-orders-filter-margin-bottom);
 
     @include media("<notebook") {
       flex-direction: column;
@@ -91,9 +73,6 @@
     }
 
     [data-fs-list-orders-search-filters-button] {
-      --fs-button-border-radius   : var(--fs-list-orders-filter-button-border-radius);
-      --fs-button-height          : var(--fs-list-orders-filter-button-height);
-
       margin-left: var(--fs-list-orders-filter-button-margin-left);
     }
   }

package/src/components/account/orders/MyAccountOrderDetails/MyAccountOrderActions/MyAccountOrderActions.tsx

@@ -64,12 +64,7 @@ export default function MyAccountOrderActions({
       <div data-fs-order-actions>
         <Dropdown>
           <DropdownButton aria-label="View More" data-fs-dropdown-button>
-            <UIIcon
-              name="DotsThree"
-              width={20}
-              height={20}
-              data-fs-dropdown-icon
-            />
+            <UIIcon name="DotsThree" data-fs-dropdown-icon />
           </DropdownButton>
           <DropdownMenu align="right">
             {allowCancellation && (

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

@@ -36,7 +36,7 @@ export default function MyAccountOrderDetails({
               data-fs-order-details-header-back-button
               size="small"
               aria-label="Go back"
-              icon={<UIIcon height={20} width={20} name="ArrowLeft" />}
+              icon={<UIIcon name="ArrowLeft" />}
               type="button"
             />
           </a>

package/src/components/account/orders/MyAccountOrderDetails/MyAccountStatusCard/MyAccountStatusCard.tsx

@@ -35,8 +35,8 @@ const STEP_LABELS: Record<StepKey, Record<StepStatus, string>> = {
   },
   approval: {
     completed: 'Approved', // Custom
-    loading: 'Approval Pending', // Use from orderStatusMap
-    'not-started': 'Approval Pending',
+    loading: 'Pending approval', // Use from orderStatusMap
+    'not-started': 'Pending approval',
     failed: 'Denied', // Custom
   },
   payment: {
@@ -86,7 +86,7 @@ const VISUAL_STEPS = [
 // Map labels from userOrderStatus.ts to step keys
 const LABEL_TO_STEP_MAPPING: Record<string, StepKey> = {
   'Order Placed': 'order',
-  'Approval Pending': 'approval',
+  'Pending approval': 'approval',
   'Payment Pending': 'payment',
   'Payment Approved': 'processing',
   'Payment Denied': 'payment',
@@ -291,14 +291,12 @@ function MyAccountStatusCard({
                 </div>
               )}
             </div>
-            {index < steps.length - 1 && (
-              <div
-                data-fs-shipping-connector
-                data-fs-shipping-connector-status={
-                  step.status === 'completed' ? 'completed' : 'not-started'
-                }
-              />
-            )}
+            <div
+              data-fs-shipping-connector
+              data-fs-shipping-connector-status={
+                step.status === 'completed' ? 'completed' : 'not-started'
+              }
+            />
           </div>
         ))}
       </div>