@faststore/core 3.88.7 → 3.89.1

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>

package/src/components/account/orders/MyAccountOrderDetails/MyAccountStatusCard/styles.scss

@@ -6,7 +6,7 @@
   // Default properties
   --fs-order-status-card-gap                     : var(--fs-spacing-1);
   --fs-order-status-card-padding                 : var(--fs-spacing-3) var(--fs-spacing-2);
-  --fs-order-status-card-bkg-color               : var(--fs-color-neutral-1);
+  --fs-order-status-card-bkg-color               : rgb(0 0 0 / 3%);
   --fs-order-status-card-border-radius           : var(--fs-border-radius-medium);
 
   // Step Icon
@@ -17,8 +17,8 @@
   --fs-order-status-step-icon-margin            : var(--fs-spacing-0);
 
   // Step Icon States
-  --fs-order-status-step-icon-completed-color   : #08a822;
-  --fs-order-status-step-icon-failed-color      : #5c5c5c;
+  --fs-order-status-step-icon-completed-color   : var(--fs-color-success-2);
+  --fs-order-status-step-icon-failed-color      : var(--fs-color-neutral-5);
   --fs-order-status-step-icon-canceled-color     : var(--fs-color-neutral-1);
   --fs-order-status-step-icon-loading-color     : var(--fs-color-neutral-4);
   --fs-order-status-step-icon-text-color        : var(--fs-color-neutral-0);
@@ -77,6 +77,10 @@
     width: 100%;
     padding: var(--fs-order-status-card-padding);
 
+    &:first-child [data-fs-shipping-connector] {
+      display: none;
+    }
+
     &[data-fs-shipping-status="loading"] {
       z-index: -1;
       background-color: var(--fs-order-status-card-bkg-color);
@@ -104,6 +108,7 @@
       width: var(--fs-order-status-step-icon-size);
       height: var(--fs-order-status-step-icon-size);
       margin: var(--fs-order-status-step-icon-margin);
+      border-radius: var(--fs-order-status-step-icon-border-radius);
 
       [data-fs-icon] {
         color: var(--fs-color-neutral-0);
@@ -111,7 +116,6 @@
 
       &[data-fs-shipping-step-completed] {
         background-color: var(--fs-order-status-step-icon-completed-color);
-        border-radius: var(--fs-order-status-step-icon-border-radius);
 
         [class*="icon"] {
           color: var(--fs-order-status-step-icon-text-color);
@@ -120,7 +124,6 @@
 
       &[data-fs-shipping-step-failed] {
         background-color: var(--fs-order-status-step-icon-failed-color);
-        border-radius: var(--fs-order-status-step-icon-border-radius);
 
         [class*="icon"] {
           color: var(--fs-order-status-step-icon-text-color);
@@ -133,17 +136,11 @@
 
       &[data-fs-shipping-step-loading] {
         background-color: var(--fs-order-status-step-icon-loading-color);
-        border-radius: var(--fs-order-status-step-icon-border-radius);
 
         [class*="icon"] {
           color: var(--fs-order-status-step-icon-text-color);
         }
       }
-
-      &:not([data-fs-shipping-step-completed]):not([data-fs-shipping-step-loading]) {
-        border: var(--fs-order-status-step-icon-border);
-        border-radius: var(--fs-order-status-step-icon-border-radius);
-      }
     }
 
     [data-fs-shipping-step-content] {
@@ -193,8 +190,19 @@
 
     [data-fs-shipping-connector] {
       position: absolute;
+      bottom: calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-connector-spacing));
+      left: calc(var(--fs-spacing-2) + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-step-icon-margin));
       background-color: var(--fs-order-status-connector-color);
 
+      @include media(">=notebook") {
+        top: calc(1rem + var(--fs-order-status-step-icon-margin) + var(--fs-order-status-step-icon-half-size));
+        right: calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-card-gap));
+        bottom: auto;
+        left: auto;
+        width: 100%;
+        height: var(--fs-border-width);
+      }
+
       &[data-fs-shipping-connector-status="completed"] {
         background-color: var(--fs-order-status-connector-completed-color);
       }
@@ -213,7 +221,15 @@
     }
   }
 
+  [data-fs-shipping-status="completed"] + [data-fs-shipping-step]:not([data-fs-shipping-status="completed"]) {
+    [data-fs-shipping-connector] { background-color: var(--fs-color-neutral-4); }
+  }
+
   [data-fs-shipping-status="not-started"] {
+    [data-fs-shipping-step-icon]:not([data-fs-shipping-step-canceled]) {
+      border: var(--fs-order-status-step-icon-border);
+    }
+
     [data-fs-shipping-step-label] {
       color: var(--fs-order-status-step-not-started-color);
     }

package/src/components/account/orders/MyAccountOrderDetails/MyAccountStatusCard/useConnectorPositioning.ts

@@ -45,19 +45,11 @@ export function useConnectorPositioning(
       if (isDesktop) {
         const containerGap = calculateContainerGap()
         connectors.forEach((connector) => {
-          connector.style.top =
-            'calc(1rem + var(--fs-order-status-step-icon-margin) + var(--fs-order-status-step-icon-half-size))'
-          connector.style.left =
-            'calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-card-gap))'
           connector.style.width = `calc(((50% - var(--fs-order-status-step-icon-half-size) - var(--fs-order-status-card-gap)) * 2) + ${containerGap}px)`
           connector.style.height = 'var(--fs-border-width)'
         })
       } else {
         connectors.forEach((connector) => {
-          connector.style.top =
-            'calc(50% + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-connector-spacing))'
-          connector.style.left =
-            'calc(var(--fs-spacing-2) + var(--fs-order-status-step-icon-half-size) + var(--fs-order-status-step-icon-margin))'
           connector.style.width = 'var(--fs-border-width)'
           connector.style.height =
             'calc((50% - var(--fs-order-status-step-icon-half-size)) + var(--fs-order-status-card-gap) + (50% - var(--fs-order-status-step-icon-half-size)) - (var(--fs-order-status-connector-spacing) * 2))'

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

@@ -40,8 +40,6 @@
   // Structural Styles
   // --------------------------------------------------------
 
-  padding: var(--fs-order-details-padding);
-
   @include media (">=notebook") {
     --fs-order-details-padding                      : 0;
   }
@@ -73,6 +71,7 @@
       [data-fs-order-details-header-back-button] {
         flex-shrink: 0;
         margin-top: calc(var(--fs-spacing-2) * -1); // Align the back button with the title
+        margin-left: calc(var(--fs-spacing-2) * -1); // Align the back button with the content
 
         @include media(">=notebook") {
           margin-top: calc(var(--fs-spacing-1) * -1); // Align the back button with the title
@@ -96,7 +95,7 @@
         font-weight: var(--fs-order-details-header-weight);
         line-height: var(--fs-order-details-header-line-height);
 
-        @include truncate-title(1);
+        @include truncate-title(2);
       }
     }
   }

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

@@ -1,89 +1,5 @@
 @layer components {
   .section {
-    [data-fs-account-profile-header] {
-      padding-block: var(--fs-spacing-6);
-      padding-inline: var(--fs-spacing-11);
-    }
-
-    [data-fs-account-profile-body] {
-      padding-inline: var(--fs-spacing-11);
-    }
-
-    [data-fs-account-profile-title] {
-      font-family: var(--fs-text-face-title);
-      font-size: var(--fs-text-size-4);
-      font-weight: var(--fs-text-weight-semibold);
-    }
-
-    [data-fs-account-profile-table] {
-      display: grid;
-      grid-template-columns: minmax(11.25rem, auto) 1fr;
-      width: 100%;
-      border-spacing: 0;
-      border-collapse: collapse;
-    }
-
-    [data-fs-account-profile-table-body] {
-      display: contents;
-      gap: var(--fs-spacing-1);
-    }
-
-    [data-fs-account-profile-table-row] {
-      display: contents;
-
-      &:last-child {
-        > [data-fs-account-profile-table-heading] {
-          border-bottom: none;
-        }
-
-        > [data-fs-account-profile-table-data] {
-          border-bottom: none;
-        }
-      }
-    }
-
-    [data-fs-account-profile-table-heading] {
-      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-account-profile-table-data] {
-      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-regular);
-      color: var(--fs-color-text);
-      border-bottom: var(--fs-border-width) solid var(--fs-border-color-light);
-    }
-
-    @include media("<notebook") {
-      [data-fs-account-profile-header] {
-        padding-inline: var(--fs-spacing-4);
-      }
-
-      [data-fs-account-profile-body] {
-        padding-inline: var(--fs-spacing-4);
-      }
-
-      [data-fs-account-profile-table] {
-        grid-template-columns: 1fr;
-      }
-
-      [data-fs-account-profile-table-heading] {
-        padding-block: var(--fs-spacing-4) 0;
-        border-bottom: none;
-      }
-
-      [data-fs-account-profile-table-data] {
-        padding-block: var(--fs-spacing-1) var(--fs-spacing-4);
-        padding-inline: 0;
-      }
-    }
+    @import "../components/MyAccountTable/styles.scss";
   }
 }

package/src/components/account/profile/profile.tsx

@@ -1,3 +1,6 @@
+import { Link } from '@faststore/ui'
+import AccountTable from '../components/MyAccountTable'
+import AccountHeader from '../components/MyAccountHeader'
 import { strings } from './i18n'
 import styles from './profile.module.scss'
 import { useDateFormatter } from './use-date-formatter'
@@ -25,38 +28,28 @@ export function ProfileSection({
 
   return (
     <div data-fs-account-profile-section className={styles.section}>
-      <header data-fs-account-profile-header>
-        <h1 data-fs-account-profile-title>{strings.profile}</h1>
-      </header>
+      <AccountHeader pageTitle={strings.profile} />
       <section data-fs-account-profile-body>
-        <table data-fs-account-profile-table>
-          <tbody data-fs-account-profile-table-body>
-            <tr data-fs-account-profile-table-row>
-              <th data-fs-account-profile-table-heading>{strings.name}</th>
-              <td data-fs-account-profile-table-data>{profile?.name}</td>
-            </tr>
-            <tr data-fs-account-profile-table-row>
-              <th data-fs-account-profile-table-heading>{strings.email}</th>
-              <td data-fs-account-profile-table-data>
-                <a href={`mailto:${profile?.email}`}>{profile?.email}</a>
-              </td>
-            </tr>
-            <tr data-fs-account-profile-table-row>
-              <th data-fs-account-profile-table-heading>{strings.id}</th>
-              <td data-fs-account-profile-table-data>{profile?.id}</td>
-            </tr>
-            {profile.createdDate && (
-              <tr data-fs-account-profile-table-row>
-                <th data-fs-account-profile-table-heading>
-                  {strings.createdDate}
-                </th>
-                <td data-fs-account-profile-table-data>
-                  {formatStringDate(profile.createdDate)}
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </table>
+        <AccountTable
+          rows={[
+            { heading: strings.name, data: profile?.name },
+            {
+              heading: strings.email,
+              data: (
+                <Link href={`mailto:${profile?.email}`}>{profile?.email}</Link>
+              ),
+            },
+            { heading: strings.id, data: profile?.id },
+            ...(profile?.createdDate
+              ? [
+                  {
+                    heading: strings.createdDate,
+                    data: formatStringDate(profile.createdDate),
+                  },
+                ]
+              : []),
+          ]}
+        />
       </section>
     </div>
   )