@faststore/core 4.4.0 → 4.5.0-dev.0

package/src/components/account/quotes/MyAccountListQuotes/MyAccountQuotesSelectedTags/MyAccountQuotesSelectedTags.tsx

@@ -0,0 +1,125 @@
+import { Button } from '@faststore/ui'
+import { useSession } from 'src/sdk/session'
+import { quoteStatusMap, type QuoteStatusKey } from 'src/utils/quoteStatus'
+import { formatFilterDate } from '../quoteFilters'
+
+type MyAccountQuotesSelectedTagsProps = Readonly<{
+  filters: {
+    status?: string[]
+    createdAtFrom?: string
+    createdAtTo?: string
+    expiresAtFrom?: string
+    expiresAtTo?: string
+  }
+  onClearAll: () => void
+  onRemoveFilter: (
+    key:
+      | 'status'
+      | 'createdAtFrom'
+      | 'createdAtTo'
+      | 'expiresAtFrom'
+      | 'expiresAtTo',
+    value: string
+  ) => void
+}>
+
+function formatDateRangeLabel(
+  from: string | undefined,
+  to: string | undefined,
+  locale: string
+) {
+  if (from && to) {
+    return `${formatFilterDate(from, locale)} to ${formatFilterDate(to, locale)}`
+  }
+  if (from) {
+    return `from ${formatFilterDate(from, locale)}`
+  }
+  return `to ${formatFilterDate(to!, locale)}`
+}
+
+function Tags({
+  filters,
+  onRemoveFilter,
+}: Pick<MyAccountQuotesSelectedTagsProps, 'filters' | 'onRemoveFilter'>) {
+  const { locale } = useSession()
+  const { createdAtFrom, createdAtTo, expiresAtFrom, expiresAtTo, status } =
+    filters
+
+  const createdTag = (createdAtFrom || createdAtTo) && (
+    <div key="created-date-range" data-fs-list-orders-selected-tag>
+      <span data-fs-list-orders-selected-tag-label>
+        {`Created: ${formatDateRangeLabel(createdAtFrom, createdAtTo, locale)}`}
+      </span>
+      <button
+        data-fs-list-orders-selected-tag-clear
+        onClick={() => onRemoveFilter('createdAtFrom', createdAtFrom ?? '')}
+      >
+        &times;
+      </button>
+    </div>
+  )
+
+  const expiresTag = (expiresAtFrom || expiresAtTo) && (
+    <div key="expires-date-range" data-fs-list-orders-selected-tag>
+      <span data-fs-list-orders-selected-tag-label>
+        {`Expires: ${formatDateRangeLabel(expiresAtFrom, expiresAtTo, locale)}`}
+      </span>
+      <button
+        data-fs-list-orders-selected-tag-clear
+        onClick={() => onRemoveFilter('expiresAtFrom', expiresAtFrom ?? '')}
+      >
+        &times;
+      </button>
+    </div>
+  )
+
+  const statusTags = (status || []).map((value) => (
+    <div key={`status-${value}`} data-fs-list-orders-selected-tag>
+      <span>{quoteStatusMap[value as QuoteStatusKey]?.label ?? value}</span>
+      <button
+        data-fs-list-orders-selected-tag-clear
+        onClick={() => onRemoveFilter('status', value)}
+      >
+        &times;
+      </button>
+    </div>
+  ))
+
+  return (
+    <>
+      {createdTag}
+      {expiresTag}
+      {statusTags}
+    </>
+  )
+}
+
+function MyAccountQuotesSelectedTags({
+  filters,
+  onClearAll,
+  onRemoveFilter,
+}: MyAccountQuotesSelectedTagsProps) {
+  const hasFilters = Object.entries(filters).some(([, values]) =>
+    Array.isArray(values) ? values.length > 0 : Boolean(values)
+  )
+
+  return (
+    <>
+      {hasFilters && (
+        <div data-fs-list-orders-selected-tags>
+          <Tags filters={filters} onRemoveFilter={onRemoveFilter} />
+          <Button
+            variant="tertiary"
+            size="small"
+            data-fs-list-orders-selected-tags-clear-all-button
+            onClick={onClearAll}
+          >
+            Clear All
+          </Button>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default MyAccountQuotesSelectedTags

package/src/components/account/quotes/MyAccountListQuotes/MyAccountQuotesStatusSelector/MyAccountQuotesStatusSelector.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useId, useRef, useState } from 'react'
+
+import { quoteStatusMap } from 'src/utils/quoteStatus'
+import styles from './styles.module.scss'
+
+type MyAccountQuotesStatusSelectorProps = Readonly<{
+  value: string[]
+  onChange: (selected: string[]) => void
+}>
+
+const statusEntries = Object.entries(quoteStatusMap).map(([key, entry]) => ({
+  key,
+  label: entry.label,
+  variant: entry.variant,
+}))
+
+export default function MyAccountQuotesStatusSelector({
+  value,
+  onChange,
+}: MyAccountQuotesStatusSelectorProps) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const labelId = useId()
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const toggle = (key: string) => {
+    const next = value.includes(key)
+      ? value.filter((v) => v !== key)
+      : [...value, key]
+    onChange(next)
+  }
+
+  const remove = (key: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    onChange(value.filter((v) => v !== key))
+  }
+
+  return (
+    <div className={styles.wrapper} ref={ref} data-fs-quotes-status-selector>
+      <span id={labelId} className={styles.label}>
+        Status
+      </span>
+      <div data-fs-quotes-status-input-wrapper>
+        <div className={styles.input} data-open={open || undefined}>
+          {value.map((key) => {
+            const entry = statusEntries.find((e) => e.key === key)
+            return (
+              <span
+                key={key}
+                className={styles.chip}
+                data-variant={entry?.variant ?? 'neutral'}
+              >
+                {entry?.label ?? key}
+                <button
+                  type="button"
+                  className={styles.chipRemove}
+                  onClick={(e) => remove(key, e)}
+                  aria-label={`Remove ${entry?.label ?? key}`}
+                >
+                  &times;
+                </button>
+              </span>
+            )
+          })}
+          <button
+            type="button"
+            className={styles.toggle}
+            aria-labelledby={labelId}
+            aria-expanded={open}
+            aria-controls="status-listbox"
+            onClick={() => setOpen((o) => !o)}
+          >
+            <span aria-hidden="true">▾</span>
+          </button>
+        </div>
+        {open && (
+          <div id="status-listbox" className={styles.dropdown} tabIndex={-1}>
+            {statusEntries.map(({ key, label }) => {
+              const id = `status-opt-${key}`
+              const checked = value.includes(key)
+              return (
+                <div key={key} className={styles.option}>
+                  <input
+                    type="checkbox"
+                    id={id}
+                    checked={checked}
+                    onChange={() => toggle(key)}
+                  />
+                  <label htmlFor={id}>{label}</label>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/account/quotes/MyAccountListQuotes/MyAccountQuotesStatusSelector/styles.module.scss

@@ -0,0 +1,144 @@
+@use "@faststore/ui/src/styles/base/utilities";
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--fs-spacing-1);
+  min-width: 220px;
+
+  [data-fs-quotes-status-input-wrapper] {
+    position: relative;
+  }
+}
+
+.label {
+  font-size: var(--fs-text-size-2);
+  font-weight: var(--fs-text-weight-medium);
+  color: var(--fs-color-text);
+}
+
+.input {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fs-spacing-1);
+  align-items: center;
+  min-height: 2.5rem;
+  padding: var(--fs-spacing-1) var(--fs-spacing-2);
+  background-color: var(--fs-color-neutral-0);
+  border: 1px solid var(--fs-border-color);
+  border-radius: var(--fs-border-radius);
+
+  &[data-open] {
+    border-color: var(--fs-color-focus-ring);
+    box-shadow: 0 0 0 2px var(--fs-color-focus-ring-outline);
+  }
+}
+
+.chip {
+  display: inline-flex;
+  gap: var(--fs-spacing-0);
+  align-items: center;
+  padding: var(--fs-spacing-0) var(--fs-spacing-2);
+  font-size: var(--fs-text-size-1);
+  color: var(--fs-color-text);
+  background-color: var(--fs-color-neutral-2);
+  border-radius: var(--fs-border-radius-pill);
+
+  &[data-variant="success"] {
+    background-color: #e9fce3;
+  }
+
+  &[data-variant="warning"] {
+    background-color: #ffedcd;
+  }
+
+  &[data-variant="info"] {
+    background-color: #d0f0e8;
+  }
+
+  &[data-variant="danger"] {
+    background-color: #fce3e3;
+  }
+
+  &[data-variant="neutral"] {
+    background-color: #f5f5f5;
+  }
+}
+
+.toggle {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--fs-spacing-1);
+  margin-left: auto;
+  color: var(--fs-color-text);
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+
+  &:focus-visible {
+    outline: 2px solid var(--fs-color-focus-ring);
+  }
+}
+
+.chipRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: var(--fs-spacing-0);
+  font-size: var(--fs-text-size-2);
+  line-height: 1;
+  color: var(--fs-color-text);
+  cursor: pointer;
+  background: none;
+  border: none;
+
+  &:hover {
+    opacity: 0.6;
+  }
+}
+
+.dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  z-index: 100;
+  padding: var(--fs-spacing-1) 0;
+  margin: 0;
+  list-style: none;
+  background-color: var(--fs-color-neutral-0);
+  border: 1px solid var(--fs-border-color-light);
+  border-top: none;
+  border-radius: 0 0 var(--fs-border-radius) var(--fs-border-radius);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 8%);
+}
+
+.option {
+  display: flex;
+  gap: var(--fs-spacing-2);
+  align-items: center;
+  padding: var(--fs-spacing-2) var(--fs-spacing-3);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--fs-color-neutral-1);
+  }
+
+  input[type="checkbox"] {
+    flex-shrink: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+    cursor: pointer;
+    accent-color: var(--fs-color-primary-bkg);
+  }
+
+  label {
+    font-size: var(--fs-text-size-body);
+    color: var(--fs-color-text);
+    cursor: pointer;
+  }
+}

package/src/components/account/quotes/MyAccountListQuotes/index.ts

@@ -0,0 +1,2 @@
+export { default as MyAccountListQuotes } from './MyAccountListQuotes'
+export type { MyAccountListQuotesProps } from './MyAccountListQuotes'

package/src/components/account/quotes/MyAccountListQuotes/quoteFilters.ts

@@ -0,0 +1,89 @@
+import { quoteStatusMap } from 'src/utils/quoteStatus'
+
+export type QuoteFilters = {
+  page: number
+  status: string[]
+  createdAtFrom: string
+  createdAtTo: string
+  expiresAtFrom: string
+  expiresAtTo: string
+  label: string
+}
+
+export type QuoteSelectedFacet = { key: string; value: string }
+
+export function getSelectedFacets(filters: QuoteFilters): QuoteSelectedFacet[] {
+  const facets: QuoteSelectedFacet[] = []
+  if (filters.status.length > 0) {
+    filters.status.forEach((s) => facets.push({ key: 'status', value: s }))
+  }
+  return facets
+}
+
+export function getAllFacets(filters: QuoteFilters) {
+  return [
+    {
+      __typename: 'StoreFacetBoolean' as const,
+      key: 'status',
+      label: 'Status',
+      values: Object.entries(quoteStatusMap).map(([key, { label }]) => ({
+        label,
+        quantity: 0,
+        selected: false,
+        value: key,
+      })),
+    },
+    {
+      __typename: 'StoreFacetRange' as const,
+      key: 'createdAt',
+      label: 'Created Date',
+      from: filters.createdAtFrom,
+      to: filters.createdAtTo,
+    },
+    {
+      __typename: 'StoreFacetRange' as const,
+      key: 'expiresAt',
+      label: 'Expiry Date',
+      from: filters.expiresAtFrom,
+      to: filters.expiresAtTo,
+    },
+  ]
+}
+
+export function hasActiveFilters(filters: QuoteFilters): boolean {
+  return (
+    filters.status.length > 0 ||
+    Boolean(filters.createdAtFrom) ||
+    Boolean(filters.createdAtTo) ||
+    Boolean(filters.expiresAtFrom) ||
+    Boolean(filters.expiresAtTo) ||
+    Boolean(filters.label)
+  )
+}
+
+export function countActiveFilters(filters: QuoteFilters): number {
+  let count = 0
+  if (filters.status.length > 0) count++
+  if (filters.createdAtFrom || filters.createdAtTo) count++
+  if (filters.expiresAtFrom || filters.expiresAtTo) count++
+  return count
+}
+
+export function formatFilterDate(date: string, locale: string): string {
+  if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) return date
+  const [year, month, day] = date.split('-').map(Number)
+  if (!year || !month || !day) return date
+  const parsed = new Date(year, month - 1, day)
+  if (
+    parsed.getFullYear() !== year ||
+    parsed.getMonth() !== month - 1 ||
+    parsed.getDate() !== day
+  ) {
+    return date
+  }
+  return parsed.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  })
+}

package/src/components/account/quotes/MyAccountListQuotes/styles.module.scss

@@ -0,0 +1,174 @@
+@use "sass:meta";
+@use "@faststore/ui/src/styles/base/utilities";
+
+.page {
+  @include meta.load-css("../../components/StatusBadge/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/SearchInputField/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/EmptyState/styles.scss");
+
+  // --------------------------------------------------------
+  // Design Tokens
+  // --------------------------------------------------------
+
+  --fs-page-height: 100%;
+  --fs-quotes-list-border-color: var(--fs-border-color-light);
+  --fs-quotes-list-row-hover-bg: var(--fs-color-neutral-1);
+  --fs-quotes-list-id-size: var(--fs-text-size-base);
+  --fs-quotes-list-label-size: var(--fs-text-size-2);
+  --fs-quotes-list-label-color: var(--fs-color-neutral-6);
+  --fs-quotes-list-date-label-size: var(--fs-text-size-tiny);
+  --fs-quotes-list-date-label-color: var(--fs-color-neutral-6);
+  --fs-quotes-list-date-value-size: var(--fs-text-size-2);
+  --fs-quotes-list-relative-expiry-color: var(--fs-color-neutral-5);
+  --fs-quotes-list-total-size: var(--fs-text-size-2);
+  --fs-quotes-list-total-color: var(--fs-color-neutral-6);
+  --fs-quotes-list-filter-margin-bottom: var(--fs-spacing-3);
+
+  height: var(--fs-page-height);
+
+  // --------------------------------------------------------
+  // Controls bar (filter button + pagination)
+  // --------------------------------------------------------
+
+  [data-fs-list-quotes-controls] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--fs-quotes-list-filter-margin-bottom);
+  }
+
+  [data-fs-list-quotes-search-filters] {
+    display: flex;
+    flex: 1;
+    gap: var(--fs-spacing-3);
+    align-items: center;
+    max-width: 55%;
+
+    [data-fs-search-input-field-wrapper] {
+      flex: 1;
+    }
+  }
+
+  [data-fs-filter-count] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-left: var(--fs-spacing-1);
+    font-size: var(--fs-text-size-tiny);
+    font-weight: var(--fs-text-weight-bold);
+    line-height: 1;
+    color: var(--fs-color-primary-text);
+    background-color: var(--fs-color-primary-bkg);
+    border-radius: 50%;
+  }
+
+  // --------------------------------------------------------
+  // Quotes list
+  // --------------------------------------------------------
+
+  [data-fs-quotes-list] {
+    width: 100%;
+  }
+
+  [data-fs-quotes-list-row] {
+    display: flex;
+    gap: var(--fs-spacing-4);
+    align-items: flex-start;
+    padding: var(--fs-spacing-4) 0;
+    border-bottom: 1px solid var(--fs-quotes-list-border-color);
+    transition: background-color 0.2s ease;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background-color: var(--fs-quotes-list-row-hover-bg);
+    }
+  }
+
+  // Left column: ID + label
+  [data-fs-quotes-list-col-main] {
+    display: flex;
+    flex: 1 1 35%;
+    flex-direction: column;
+    gap: var(--fs-spacing-1);
+    min-width: 0;
+  }
+
+  [data-fs-quotes-list-id] {
+    overflow: hidden;
+    font-size: var(--fs-quotes-list-id-size);
+    font-weight: var(--fs-text-weight-bold);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-fs-quotes-list-label] {
+    overflow: hidden;
+    font-size: var(--fs-quotes-list-label-size);
+    color: var(--fs-quotes-list-label-color);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Middle column: created by + dates
+  [data-fs-quotes-list-col-dates] {
+    display: flex;
+    flex: 1 1 40%;
+    flex-direction: column;
+    gap: var(--fs-spacing-2);
+    min-width: 0;
+  }
+
+  [data-fs-quotes-list-date-group] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fs-spacing-0);
+  }
+
+  [data-fs-quotes-list-date-label] {
+    font-size: var(--fs-quotes-list-date-label-size);
+    font-weight: var(--fs-text-weight-medium);
+    color: var(--fs-quotes-list-date-label-color);
+  }
+
+  [data-fs-quotes-list-date-value] {
+    font-size: var(--fs-quotes-list-date-value-size);
+  }
+
+  [data-fs-quotes-list-relative-expiry] {
+    color: var(--fs-quotes-list-relative-expiry-color);
+  }
+
+  // Right column: badge + total
+  [data-fs-quotes-list-col-status] {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    gap: var(--fs-spacing-2);
+    align-items: flex-end;
+    min-width: 120px;
+  }
+
+  [data-fs-quotes-list-total] {
+    font-size: var(--fs-quotes-list-total-size);
+    color: var(--fs-quotes-list-total-color);
+    text-align: right;
+
+    strong {
+      font-weight: var(--fs-text-weight-bold);
+      color: var(--fs-color-text);
+    }
+  }
+
+  // --------------------------------------------------------
+  // Pagination + selected tags (reuse from orders)
+  // --------------------------------------------------------
+
+  @include meta.load-css("../../orders/ListOrders/ListOrdersTable/styles.scss");
+  @include meta.load-css("../../orders/ListOrders/SelectedTags/styles.scss");
+}

package/src/customizations/src/myAccount/extensions/quotes/after.tsx

@@ -0,0 +1,5 @@
+function After() {
+  return <></>
+}
+
+export default After

package/src/customizations/src/myAccount/extensions/quotes/before.tsx

@@ -0,0 +1,5 @@
+function Before() {
+  return <></>
+}
+
+export default Before