@faststore/core 3.44.1 → 3.45.0

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

@@ -0,0 +1,20 @@
+import { Icon, LinkButton } from '@faststore/ui'
+
+export default function MyAccountListOrdersEmptyState() {
+  return (
+    <div data-fs-list-orders-empty-state>
+      <div data-fs-list-orders-empty-state-image>
+        <Icon name="Bag2" width={56} height={56} />
+        <h2 data-fs-list-orders-empty-state-title>You don’t have any orders</h2>
+      </div>
+
+      <LinkButton
+        data-fs-list-orders-empty-state-link
+        href="/"
+        variant="secondary"
+      >
+        Start shopping
+      </LinkButton>
+    </div>
+  )
+}

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrdersEmptyState/index.ts

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

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

@@ -0,0 +1,43 @@
+[data-fs-list-orders-empty-state] {
+  // --------------------------------------------------------
+  // Design Tokens
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-list-orders-empty-state-gap: var(--fs-spacing-4);
+
+  // Title
+  --fs-list-orders-empty-state-title-font-size: var(--fs-text-size-3);
+  --fs-list-orders-empty-state-title-font-weight:
+    var(
+      --fs-text-weight-semibold
+    );
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--fs-list-orders-empty-state-gap);
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--fs-spacing-5) 0;
+
+  [data-fs-list-orders-empty-state-image] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  [data-fs-list-orders-empty-state-title] {
+    font-size: var(--fs-list-orders-empty-state-title-font-size);
+    font-weight: var(--fs-list-orders-empty-state-title-font-weight);
+    line-height: var(--fs-spacing-5);
+    color: var(--fs-color-disabled-text);
+    letter-spacing: -4%;
+  }
+
+  [data-fs-list-orders-empty-state-link] {
+    text-decoration: none;
+  }
+}

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

@@ -0,0 +1,210 @@
+import { Button, Icon } from '@faststore/ui'
+import type { ServerListOrdersQueryQuery } from '@generated/graphql'
+import { useRouter } from 'next/router'
+
+import MyAccountStatusBadge from 'src/components/account/components/MyAccountStatusBadge'
+import { useFormatPrice } from 'src/components/account/utils/useFormatPrice'
+import { useSession } from 'src/sdk/session'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
+
+function formatShippingDate(date: string, locale: string) {
+  return new Date(date).toLocaleDateString(locale, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+type MyAccountListOrdersTableProps = {
+  listOrders: ServerListOrdersQueryQuery['listUserOrders']
+  total: number
+  perPage: number
+  filters: {
+    page: number
+    status: string[]
+    dateInitial: string
+    dateFinal: string
+    text: string
+    clientEmail: string
+  }
+}
+
+export function Pagination({
+  page,
+  total,
+  perPage,
+}: {
+  page: number
+  total: number
+  perPage: number
+}) {
+  const router = useRouter()
+  const totalPages = Math.ceil(total / perPage)
+  const firstIndexLabel = page === 1 ? 1 : (page - 1) * perPage + 1
+  const lastIndexLabel =
+    total > firstIndexLabel + perPage - 1
+      ? firstIndexLabel + perPage - 1
+      : total
+
+  const handlePageChange = (newPage: number) => {
+    const { page, ...rest } = router.query
+    const isFirstPage = newPage === 0 || newPage === 1
+    router.push({
+      pathname: '/account/orders',
+      query: {
+        ...rest,
+        ...(!isFirstPage ? { page: newPage } : {}),
+      },
+    })
+  }
+
+  return (
+    <div data-fs-list-orders-table-pagination>
+      <p>{`${firstIndexLabel} — ${lastIndexLabel} of ${total}`}</p>
+      <Button
+        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
+        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>
+    </div>
+  )
+}
+
+export default function MyAccountListOrdersTable({
+  listOrders,
+  total,
+  perPage,
+  filters,
+}: MyAccountListOrdersTableProps) {
+  const router = useRouter()
+  const { isDesktop } = useScreenResize()
+  const { locale } = useSession()
+  const formatPrice = useFormatPrice()
+
+  const handleOrderDetail = ({ orderId }: { orderId: string }) => {
+    router.push({
+      pathname: `/account/orders/${orderId}`,
+    })
+  }
+
+  return (
+    <>
+      <table data-fs-list-orders-table>
+        <thead data-fs-list-orders-table-header>
+          <tr
+            data-fs-list-orders-table-header-row
+            data-fs-list-orders-table-row
+          >
+            <th data-fs-list-orders-table-header-cell>Order</th>
+            {isDesktop && (
+              <>
+                <th data-fs-list-orders-table-header-cell>Ordered by</th>
+                <th data-fs-list-orders-table-header-cell>Cost Center</th>
+                <th data-fs-list-orders-table-header-cell>Release</th>
+                <th data-fs-list-orders-table-header-cell>PO number</th>
+                <th data-fs-list-orders-table-header-cell>Delivery by</th>
+              </>
+            )}
+            <th data-fs-list-orders-table-header-cell>
+              {isDesktop && <>Status</>}
+            </th>
+          </tr>
+        </thead>
+        <tbody data-fs-list-orders-table-body>
+          {listOrders.list.map((item) => (
+            // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+            <tr
+              data-fs-list-orders-table-body-row
+              data-fs-list-orders-table-row
+              key={item.orderId}
+              onClick={() => handleOrderDetail({ orderId: item.orderId })}
+              role="button"
+            >
+              <td data-fs-list-orders-table-cell>
+                <div data-fs-list-orders-table-product-info>
+                  <p data-fs-list-orders-table-product-info-order-id>
+                    {item.orderId || '-'}
+                  </p>
+                  <p data-fs-list-orders-table-product-info-order-date>
+                    Placed on{' '}
+                    {item.creationDate
+                      ? formatShippingDate(item.creationDate, locale)
+                      : '-'}
+                  </p>
+                  <p data-fs-list-orders-table-product-info-order-total>
+                    Total: {formatPrice(item.totalValue, item.currencyCode)}
+                  </p>
+                </div>
+              </td>
+
+              {isDesktop && (
+                <>
+                  <td data-fs-list-orders-table-cell>{item?.clientName}</td>
+                  <td data-fs-list-orders-table-cell>
+                    <p>(Cost Center)</p>
+                  </td>
+                  <td data-fs-list-orders-table-cell>
+                    <p>(Release)</p>
+                  </td>
+                  <td data-fs-list-orders-table-cell>
+                    <p>(PO Number)</p>
+                  </td>
+                  <td data-fs-list-orders-table-cell>
+                    {item.ShippingEstimatedDate
+                      ? formatShippingDate(item.ShippingEstimatedDate, locale)
+                      : '-'}
+                  </td>
+                </>
+              )}
+
+              <td data-fs-list-orders-table-cell>
+                <MyAccountStatusBadge
+                  status={item.status}
+                  statusFallback={item.statusDescription}
+                />
+                {!isDesktop && (
+                  <p>
+                    {item.ShippingEstimatedDate
+                      ? `Delivery by ${formatShippingDate(
+                          item.ShippingEstimatedDate,
+                          locale
+                        )}`
+                      : ''}
+                  </p>
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {isDesktop && (
+        <Pagination page={filters.page} total={total} perPage={perPage} />
+      )}
+    </>
+  )
+}

package/src/components/account/orders/MyAccountListOrders/MyAccountListOrdersTable/index.ts

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

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

@@ -0,0 +1,153 @@
+[data-fs-list-orders-table] {
+  // --------------------------------------------------------
+  // Design Tokens
+  // --------------------------------------------------------
+
+  --fs-list-orders-table-font-size                 : var(--fs-text-size-tiny);
+  --fs-list-orders-table-header-padding            : var(--fs-spacing-4) var(--fs-spacing-2) var(--fs-spacing-3);
+  --fs-list-orders-table-header-font-weight        : var(--fs-text-weight-medium);
+  --fs-list-orders-table-header-line-height        : var(--fs-text-size-1);
+  --fs-list-orders-table-header-color              : var(--fs-color-neutral-6);
+  --fs-list-orders-table-first-child-width         : 20%;
+  --fs-list-orders-table-first-child-width-mobile  : 30%;
+  --fs-list-orders-table-last-child-width          : 10%;
+  --fs-list-orders-table-gap                       : 1.2rem;
+  --fs-list-orders-table-product-info-text-size    : var(--fs-text-size-base);
+  --fs-list-orders-table-product-info-font-weight  : var(--fs-text-weight-semibold);
+  --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);
+  --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);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: 100%;
+  margin: 0 auto;
+  font-size: var(--fs-list-orders-table-font-size);
+  vertical-align: middle;
+  border-collapse: collapse;
+  border: none;
+
+  [data-fs-list-orders-table-header] [data-fs-list-orders-table-header-cell] {
+    @include media("<notebook") {
+      padding: 0;
+    }
+
+    padding: var(--fs-list-orders-table-header-padding);
+    font-weight: var(--fs-list-orders-table-header-font-weight);
+    line-height: var(--fs-list-orders-table-header-line-height);
+    color: var(--fs-list-orders-table-header-color);
+    cursor: default;
+  }
+
+  [data-fs-list-orders-table-header-cell]:first-child, [data-fs-list-orders-table-cell]:first-child {
+    width: var(--fs-list-orders-table-first-child-width);
+
+    @include media("<notebook") {
+      display: flex;
+      align-items: center;
+      width: var(--fs-list-orders-table-first-child-width-mobile);
+    }
+  }
+
+  [data-fs-list-orders-table-header-cell]:last-child,[data-fs-list-orders-table-cell]:last-child {
+    width: var(--fs-list-orders-table-last-child-width);
+
+    @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-list-orders-table-product-info-order-id], [data-fs-list-orders-table-product-info-order-date], [data-fs-list-orders-table-product-info-order-total] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-fs-list-orders-table-product-info-order-id] {
+    font-size: var(--fs-list-orders-table-product-info-text-size);
+    font-weight: var(--fs-list-orders-table-product-info-font-weight);
+    vertical-align: middle;
+  }
+
+  [data-fs-list-orders-table-product-info-order-date] {
+    margin-top: var(--fs-list-orders-table-product-info-margin-top);
+    line-height: var(--fs-list-orders-table-product-info-line-height);
+  }
+
+  [data-fs-list-orders-table-header-cell], [data-fs-list-orders-table-cell] {
+    padding: var(--fs-list-orders-table-cell-padding);
+    text-align: left;
+    border: none;
+
+    @include media("<notebook") {
+      padding: var(--fs-list-orders-table-cell-padding-mobile);
+    }
+  }
+
+  [data-fs-list-orders-table-cell]:not(:first-child):not(:last-child) {
+    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);
+    transition: background-color 0.5s ease;
+
+    @include media("<notebook") {
+      display: flex;
+      justify-content: space-between;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  [data-fs-list-orders-table-body-row]:hover, [data-fs-list-orders-table-body-row]:focus {
+    background-color: var(--fs-list-orders-table-row-hover-bg);
+  }
+}
+
+[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-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);
+
+  @include media("<notebook") {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: var(--fs-list-orders-table-pagination-padding);
+    background-color: var(--fs-list-orders-table-pagination-bkg-color);
+    box-shadow: var(--fs-list-orders-table-pagination-box-shadow);
+  }
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: var(--fs-list-orders-table-pagination-text-size);
+
+  [data-fs-button] {
+    [data-fs-button-wrapper] {
+      background-color: transparent;
+      transition: unset;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,119 @@
+import { Button } from '@faststore/ui'
+import { useSession } from 'src/sdk/session'
+import { FastStoreOrderStatusWithLabels } from 'src/utils/userOrderStatus'
+
+type MyAccountSelectedTagsProps = {
+  filters: {
+    status?: string[]
+    dateInitial?: string
+    dateFinal?: string
+  }
+  onClearAll: () => void
+  onRemoveFilter: (
+    key: 'status' | 'dateInitial' | 'dateFinal',
+    value: string
+  ) => void
+}
+
+function formatShippingDate(date: string, locale: string) {
+  return new Date(date).toLocaleDateString(locale, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}
+
+function Tags({
+  filters,
+  onRemoveFilter,
+}: Pick<MyAccountSelectedTagsProps, 'filters' | 'onRemoveFilter'>) {
+  const { locale } = useSession()
+  const { dateInitial, dateFinal, status } = filters
+  const formattedDateInitial = dateInitial
+    ? formatShippingDate(dateInitial, locale)
+    : ''
+  const formattedDateFinal = dateFinal
+    ? formatShippingDate(dateFinal, locale)
+    : ''
+
+  const dateTag = (dateInitial || dateFinal) && (
+    <div key="date-range" data-fs-list-orders-selected-tag>
+      <span data-fs-list-orders-selected-tag-label>
+        {(dateInitial && dateFinal
+          ? `${formattedDateInitial} to ${formattedDateFinal}`
+          : formattedDateInitial
+            ? `from ${formattedDateInitial}`
+            : `to ${formattedDateFinal}`) || ''}
+      </span>
+      <button
+        data-fs-list-orders-selected-tag-clear
+        onClick={() => {
+          onRemoveFilter('dateInitial', dateInitial)
+          // dateFinal is not needed as the date range is a single tag
+        }}
+      >
+        &times;
+      </button>
+    </div>
+  )
+
+  const statusTags = (status || []).map((value) => (
+    <div key={`status-${value}`} data-fs-list-orders-selected-tag>
+      <span>
+        {FastStoreOrderStatusWithLabels[
+          value.toLowerCase() as keyof typeof FastStoreOrderStatusWithLabels
+        ] || value}
+      </span>
+      <button
+        data-fs-list-orders-selected-tag-clear
+        onClick={() => onRemoveFilter('status', value)}
+      >
+        &times;
+      </button>
+    </div>
+  ))
+
+  return (
+    <>
+      {dateTag}
+      {statusTags}
+    </>
+  )
+}
+
+function MyAccountSelectedTags({
+  filters,
+  onClearAll,
+  onRemoveFilter,
+}: MyAccountSelectedTagsProps) {
+  const hasFilters = Object.entries(filters).some(
+    ([key, values]) =>
+      (key === 'status' || key === 'dateInitial' || key === 'dateFinal') &&
+      values &&
+      (Array.isArray(values) ? values.length > 0 : true)
+  )
+
+  return (
+    <>
+      {hasFilters && (
+        <div data-fs-list-orders-selected-tags>
+          <div data-fs-list-orders-selected-tags-pills>
+            <Tags filters={filters} onRemoveFilter={onRemoveFilter} />
+          </div>
+          <div data-fs-list-orders-selected-tags-clear-all>
+            <Button
+              variant="tertiary"
+              size="small"
+              data-fs-list-orders-selected-tags-clear-all-button
+              onClick={onClearAll}
+            >
+              Clear All
+            </Button>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default MyAccountSelectedTags

package/src/components/account/orders/MyAccountListOrders/MyAccountSelectedTags/index.ts

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

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

@@ -0,0 +1,69 @@
+[data-fs-list-orders-selected-tags] {
+  // --------------------------------------------------------
+  // Design Tokens
+  // --------------------------------------------------------
+
+  --fs-list-orders-selected-tags-gap                 : var(--fs-spacing-0);
+  --fs-list-orders-selected-tags-min-height          : 3rem;
+  --fs-list-orders-selected-tags-text-size           : var(--fs-text-size-1);
+
+  --fs-list-orders-selected-tags-height              : 1.6rem;
+  --fs-list-orders-selected-tags-padding             : var(--fs-spacing-0) 0 var(--fs-spacing-0) var(--fs-spacing-1);
+  --fs-list-orders-selected-tags-color               : var(--fs-color-text);
+  --fs-list-orders-selected-tags-bkg-color           : #e0e0e0;
+  --fs-list-orders-selected-tags-border              : 1px none transparent;
+  --fs-list-orders-selected-tags-border-radius       : var(--fs-border-radius-pill);
+  --fs-list-orders-selected-tags-label-padding       : var(--fs-spacing-0);
+
+  --fs-list-orders-selected-tags-clear-margin-bottom : 2px;
+  --fs-list-orders-selected-tags-clear-text-size     : 1.2rem;
+
+  --fs-list-orders-selected-tags-clear-all-min-width : 102px;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  gap: var(--fs-list-orders-selected-tags-gap);
+  align-items: baseline;
+  min-height: var(--fs-list-orders-selected-tags-min-height);
+  font-size: var(--fs-list-orders-selected-tags-text-size);
+
+  [data-fs-list-orders-selected-tags-pills] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fs-list-orders-selected-tags-gap);
+  }
+
+  [data-fs-list-orders-selected-tag] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--fs-list-orders-selected-tags-height);
+    padding: var(--fs-list-orders-selected-tags-padding);
+    color: var(--fs-list-orders-selected-tags-color);
+    background-color: var(--fs-list-orders-selected-tags-bkg-color);
+    border: var(--fs-list-orders-selected-tags-border);
+    border-radius: var(--fs-list-orders-selected-tags-border-radius);
+  }
+
+  [data-fs-list-orders-selected-tag-label] {
+    padding: var(--fs-list-orders-selected-tags-label-padding);
+  }
+
+  [data-fs-list-orders-selected-tag-clear] {
+    margin-bottom: var(--fs-list-orders-selected-tags-clear-margin-bottom);
+    font-size: var(--fs-list-orders-selected-tags-clear-text-size);
+    color: var(--fs-list-orders-selected-tags-color);
+    cursor: pointer;
+  }
+
+  [data-fs-list-orders-selected-tags-clear-all] {
+    min-width: var(--fs-list-orders-selected-tags-clear-all-min-width);
+  }
+
+  [data-fs-list-orders-selected-tags-clear-all-button] {
+    --fs-button-height: 1.5rem;
+  }
+}

package/src/components/account/orders/MyAccountListOrders/index.ts

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