@faststore/core 4.4.1-dev.0 → 4.5.0-dev.1

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

@@ -0,0 +1,170 @@
+import {
+  Button,
+  EmptyState,
+  Icon as UIIcon,
+  SearchInputField,
+  useUI,
+  type SearchInputFieldRef,
+} from '@faststore/ui'
+import { useRef, useEffect, type MutableRefObject } from 'react'
+
+import type { ServerListQuotesQueryQuery } from '@generated/graphql'
+
+import AccountHeader from '../../components/Header'
+import { useDebounce } from 'src/sdk/account/useDebounce'
+import { useMyAccountFilter } from 'src/sdk/search/useMyAccountFilter'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
+import MyAccountListQuotesTable, {
+  Pagination,
+} from './MyAccountListQuotesTable/MyAccountListQuotesTable'
+import MyAccountQuotesFilterSlider from './MyAccountQuotesFilterSlider/MyAccountQuotesFilterSlider'
+import {
+  getSelectedFacets,
+  getAllFacets,
+  hasActiveFilters,
+  countActiveFilters,
+} from './quoteFilters'
+import styles from './styles.module.scss'
+
+export type MyAccountListQuotesProps = Readonly<{
+  listQuotes: ServerListQuotesQueryQuery['listUserQuotes']
+  total: number
+  perPage: number
+  filters: {
+    page: number
+    status: string[]
+    createdAtFrom: string
+    createdAtTo: string
+    expiresAtFrom: string
+    expiresAtTo: string
+    label: string
+  }
+}>
+
+export default function MyAccountListQuotes({
+  listQuotes,
+  total,
+  perPage,
+  filters,
+}: MyAccountListQuotesProps) {
+  const { isDesktop } = useScreenResize()
+  const searchInputRef = useRef(null) as MutableRefObject<SearchInputFieldRef>
+
+  useEffect(() => {
+    if (!searchInputRef.current?.inputRef) return
+    searchInputRef.current.inputRef.value = filters.label ?? ''
+  }, [filters.label])
+
+  const handleSearchChange = useDebounce(
+    (value: string) => {
+      const params = new URLSearchParams(globalThis.location.search)
+      params.delete('label')
+      params.delete('page')
+      if (value) params.set('label', value)
+      globalThis.location.href = `/pvt/account/quotes?${params.toString()}`
+    },
+    300,
+    filters.label
+  )
+
+  const selectedFacets = getSelectedFacets(filters)
+  const allFacets = getAllFacets(filters)
+
+  const filter = useMyAccountFilter({ allFacets, selectedFacets })
+  const { openFilter, filter: displayFilter } = useUI()
+
+  const hasFilters = hasActiveFilters(filters)
+  const activeFilterCount = countActiveFilters(filters)
+  const isEmpty = (listQuotes?.list.length ?? 0) === 0
+
+  return (
+    <div className={styles.page}>
+      <AccountHeader pageTitle="Quotes" />
+      <div data-fs-list-quotes-controls>
+        <div data-fs-list-quotes-search-filters>
+          <SearchInputField
+            ref={searchInputRef}
+            data-fs-search-input-field-list-quotes
+            placeholder="Search"
+            onBlur={() => {
+              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-quotes-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
+            {activeFilterCount > 0 && (
+              <span data-fs-filter-count>{activeFilterCount}</span>
+            )}
+          </Button>
+        </div>
+        {isDesktop && total > 0 && (
+          <Pagination page={filters.page} total={total} perPage={perPage} />
+        )}
+      </div>
+
+      {displayFilter && (
+        <MyAccountQuotesFilterSlider
+          {...filter}
+          title="Filters"
+          clearButtonLabel="Clear All"
+          applyButtonLabel="View Results"
+          testId="my-account-quotes-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 quotes"}
+          bkgColor="light"
+        />
+      ) : (
+        <MyAccountListQuotesTable
+          listQuotes={listQuotes}
+          total={total}
+          perPage={perPage}
+          filters={filters}
+        />
+      )}
+
+      {!isDesktop && total > 0 && (
+        <Pagination page={filters.page} total={total} perPage={perPage} />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,194 @@
+import { Icon, IconButton } from '@faststore/ui'
+
+import MyAccountQuoteStatusBadge from './MyAccountQuoteStatusBadge'
+import { useSession } from 'src/sdk/session'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
+import type { ServerListQuotesQueryQuery } from '@generated/graphql'
+
+function formatDateTime(isoString: string, locale: string) {
+  if (!isoString) return ''
+  const parsed = new Date(isoString)
+  if (Number.isNaN(parsed.getTime())) return isoString
+  return parsed.toLocaleString(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
+}
+
+function formatDateShort(isoString: string, locale: string) {
+  if (!isoString) return ''
+  const parsed = new Date(isoString)
+  if (Number.isNaN(parsed.getTime())) return isoString
+  return parsed.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+function getRelativeExpiry(isoString: string): string | null {
+  const diffMs = new Date(isoString).getTime() - Date.now()
+  if (diffMs <= 0) return null
+
+  const hours = Math.floor(diffMs / 3_600_000)
+  const days = Math.floor(diffMs / 86_400_000)
+  const weeks = Math.floor(days / 7)
+  const months = Math.floor(days / 30)
+
+  if (hours < 24) return `${hours} ${hours === 1 ? 'hour' : 'hours'} left`
+  if (days < 14) return `${days} ${days === 1 ? 'day' : 'days'} left`
+  if (weeks < 8) return `${weeks} ${weeks === 1 ? 'week' : 'weeks'} left`
+  return `${months} ${months === 1 ? 'month' : 'months'} left`
+}
+
+function formatAmount(amount: number, locale: string, currencyCode: string) {
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: currencyCode,
+    minimumFractionDigits: 2,
+  }).format(amount)
+}
+
+type MyAccountListQuotesTableProps = Readonly<{
+  listQuotes: ServerListQuotesQueryQuery['listUserQuotes']
+  total: number
+  perPage: number
+  filters: {
+    page: number
+    status: string[]
+    createdAtFrom: string
+    createdAtTo: string
+    expiresAtFrom: string
+    expiresAtTo: string
+    label: string
+  }
+}>
+
+export function Pagination({
+  page,
+  total,
+  perPage,
+}: Readonly<{
+  page: number
+  total: number
+  perPage: number
+}>) {
+  const totalPages = Math.ceil(total / perPage)
+  const firstIndexLabel = page === 1 ? 1 : (page - 1) * perPage + 1
+  const lastIndexLabel = Math.min(firstIndexLabel + perPage - 1, total)
+
+  const handlePageChange = (newPage: number) => {
+    const params = new URLSearchParams(globalThis.location.search)
+    if (newPage === 1 || newPage === 0) {
+      params.delete('page')
+    } else {
+      params.set('page', String(newPage))
+    }
+    const search = params.toString()
+    globalThis.location.href = search
+      ? `/pvt/account/quotes?${search}`
+      : '/pvt/account/quotes'
+  }
+
+  return (
+    <div data-fs-list-orders-table-pagination>
+      <p>{`${firstIndexLabel} — ${lastIndexLabel} of ${total}`}</p>
+      <IconButton
+        size="small"
+        variant="tertiary"
+        disabled={page === 1}
+        onClick={() => handlePageChange(page - 1)}
+        icon={<Icon name="CaretLeft" />}
+        aria-label="Previous Page"
+      />
+      <IconButton
+        size="small"
+        variant="tertiary"
+        disabled={page === totalPages}
+        onClick={() => handlePageChange(page + 1)}
+        icon={<Icon name="CaretRight" />}
+        aria-label="Next Page"
+      />
+    </div>
+  )
+}
+
+export default function MyAccountListQuotesTable({
+  listQuotes,
+  total,
+  perPage,
+  filters,
+}: MyAccountListQuotesTableProps) {
+  const { isDesktop } = useScreenResize()
+  const { locale, currency } = useSession()
+  const currencyCode = currency.code
+
+  return (
+    <>
+      <div data-fs-quotes-list>
+        {listQuotes.list.map((item) => {
+          const relativeExpiry = getRelativeExpiry(item.expiresAt)
+          const formattedAmount = formatAmount(
+            item.amount,
+            locale,
+            currencyCode
+          )
+
+          return (
+            <div data-fs-quotes-list-row key={item.id}>
+              {/* Left: ID + label */}
+              <div data-fs-quotes-list-col-main>
+                <p data-fs-quotes-list-id>{item.id}</p>
+                {item.label && <p data-fs-quotes-list-label>{item.label}</p>}
+              </div>
+
+              {/* Middle: created by + dates (desktop only) */}
+              {isDesktop && (
+                <div data-fs-quotes-list-col-dates>
+                  {item.createdBy && (
+                    <div data-fs-quotes-list-date-group>
+                      <span data-fs-quotes-list-date-label>Created by</span>
+                      <span data-fs-quotes-list-date-value>
+                        {item.createdBy}
+                      </span>
+                    </div>
+                  )}
+                  <div data-fs-quotes-list-date-group>
+                    <span data-fs-quotes-list-date-label>Creation date</span>
+                    <span data-fs-quotes-list-date-value>
+                      {formatDateTime(item.createdAt, locale)}
+                    </span>
+                  </div>
+                  <div data-fs-quotes-list-date-group>
+                    <span data-fs-quotes-list-date-label>Expires on</span>
+                    <span data-fs-quotes-list-date-value>
+                      {formatDateShort(item.expiresAt, locale)}
+                      {relativeExpiry && (
+                        <span data-fs-quotes-list-relative-expiry>
+                          {' · '}
+                          {relativeExpiry}
+                        </span>
+                      )}
+                    </span>
+                  </div>
+                </div>
+              )}
+
+              {/* Right: badge + total */}
+              <div data-fs-quotes-list-col-status>
+                <MyAccountQuoteStatusBadge status={item.status} />
+                <p data-fs-quotes-list-total>
+                  Total <strong>{formattedAmount}</strong>
+                </p>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+      <Pagination page={filters.page} total={total} perPage={perPage} />
+    </>
+  )
+}

package/src/components/account/quotes/MyAccountListQuotes/MyAccountListQuotesTable/MyAccountQuoteStatusBadge.tsx

@@ -0,0 +1,15 @@
+import { quoteStatusMap, type QuoteStatusKey } from 'src/utils/quoteStatus'
+
+function MyAccountQuoteStatusBadge({ status }: Readonly<{ status: string }>) {
+  const entry = quoteStatusMap[status as QuoteStatusKey]
+  return (
+    <span
+      data-fs-my-account-badge
+      data-fs-my-account-badge-variant={entry?.variant ?? 'neutral'}
+    >
+      {entry?.label ?? status}
+    </span>
+  )
+}
+
+export default MyAccountQuoteStatusBadge

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

@@ -0,0 +1,162 @@
+import { FilterSlider as UIFilterSlider } from '@faststore/ui'
+
+import { useRef, useState } from 'react'
+import MyAccountFilterFacetDateRange from 'src/components/account/orders/ListOrders/FilterSlider/FilterFacetDateRange/FilterFacetDateRange'
+import type {
+  MyAccountFilter_FacetsFragment,
+  useMyAccountFilter,
+} from 'src/sdk/search/useMyAccountFilter'
+import MyAccountQuotesStatusSelector from '../MyAccountQuotesStatusSelector/MyAccountQuotesStatusSelector'
+import styles from './section.module.scss'
+
+export interface MyAccountQuotesFilterSliderProps {
+  testId?: string
+  facets: MyAccountFilter_FacetsFragment[]
+  title?: string
+  clearButtonLabel?: string
+  applyButtonLabel?: string
+}
+
+function MyAccountQuotesFilterSlider({
+  facets,
+  testId,
+  dispatch,
+  expanded,
+  selected,
+  title,
+  clearButtonLabel,
+  applyButtonLabel,
+}: MyAccountQuotesFilterSliderProps & ReturnType<typeof useMyAccountFilter>) {
+  const createdDateRangeRef = useRef<{
+    clear: () => void
+    getDataRangeFacet: () => {
+      key: string
+      value: { from: string; to: string }
+    }
+  }>(null)
+
+  const expiresDateRangeRef = useRef<{
+    clear: () => void
+    getDataRangeFacet: () => {
+      key: string
+      value: { from: string; to: string }
+    }
+  }>(null)
+
+  const [disabled, setDisabled] = useState(false)
+
+  const handleApply = () => {
+    const createdRange = createdDateRangeRef.current?.getDataRangeFacet()?.value
+    const expiresRange = expiresDateRangeRef.current?.getDataRangeFacet()?.value
+
+    const params = new URLSearchParams(globalThis.location.search)
+    params.delete('page')
+    params.delete('status')
+    params.delete('createdAtFrom')
+    params.delete('createdAtTo')
+    params.delete('expiresAtFrom')
+    params.delete('expiresAtTo')
+
+    const statusFacets = selected.filter((f) => f.key === 'status')
+    statusFacets.forEach((f) => params.append('status', f.value))
+
+    if (createdRange?.from?.trim()) {
+      params.set('createdAtFrom', createdRange.from.trim())
+    }
+    if (createdRange?.to?.trim()) {
+      params.set('createdAtTo', createdRange.to.trim())
+    }
+    if (expiresRange?.from?.trim()) {
+      params.set('expiresAtFrom', expiresRange.from.trim())
+    }
+    if (expiresRange?.to?.trim()) {
+      params.set('expiresAtTo', expiresRange.to.trim())
+    }
+
+    const search = params.toString()
+    globalThis.location.href = search
+      ? `/pvt/account/quotes?${search}`
+      : '/pvt/account/quotes'
+  }
+
+  const statusFacet = facets.find(
+    (f) => f.__typename === 'StoreFacetBoolean' && f.key === 'status'
+  )
+  const rangeFacets = facets.filter((f) => f.__typename === 'StoreFacetRange')
+  const selectedStatusValues = selected
+    .filter((f) => f.key === 'status')
+    .map((f) => f.value)
+
+  return (
+    <UIFilterSlider
+      overlayProps={{
+        className: `section ${styles.section} section-filter-slider`,
+      }}
+      title={title}
+      size="partial"
+      direction="rightSide"
+      clearBtnProps={{
+        variant: 'secondary',
+        onClick: () => {
+          createdDateRangeRef.current?.clear()
+          expiresDateRangeRef.current?.clear()
+          dispatch({ type: 'selectFacets', payload: [] })
+        },
+        children: clearButtonLabel ?? 'Clear All',
+      }}
+      applyBtnProps={{
+        variant: 'primary',
+        onClick: handleApply,
+        disabled,
+        children: applyButtonLabel ?? 'Apply',
+      }}
+      onClose={() => {}}
+    >
+      {statusFacet && (
+        <MyAccountQuotesStatusSelector
+          value={selectedStatusValues}
+          onChange={(newSelected) => {
+            const added = newSelected.filter(
+              (v) => !selectedStatusValues.includes(v)
+            )
+            const removed = selectedStatusValues.filter(
+              (v) => !newSelected.includes(v)
+            )
+            ;[...added, ...removed].forEach((v) =>
+              dispatch({
+                type: 'toggleFacet',
+                payload: { key: 'status', value: v },
+              })
+            )
+          }}
+        />
+      )}
+      {rangeFacets.map((facet, index) => (
+        <div
+          key={`${testId}-${facet.label}-${index}`}
+          data-fs-quotes-filter-group
+        >
+          <p data-fs-quotes-filter-group-label>{facet.label}</p>
+          {facet.key === 'createdAt' && (
+            <MyAccountFilterFacetDateRange
+              ref={createdDateRangeRef}
+              from={facet.from}
+              to={facet.to}
+              setDisabled={setDisabled}
+            />
+          )}
+          {facet.key === 'expiresAt' && (
+            <MyAccountFilterFacetDateRange
+              ref={expiresDateRangeRef}
+              from={facet.from}
+              to={facet.to}
+              setDisabled={setDisabled}
+            />
+          )}
+        </div>
+      ))}
+    </UIFilterSlider>
+  )
+}
+
+export default MyAccountQuotesFilterSlider

package/src/components/account/quotes/MyAccountListQuotes/MyAccountQuotesFilterSlider/section.module.scss

@@ -0,0 +1,49 @@
+@use "sass:meta";
+
+.section {
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Checkbox/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Input/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/List/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Slider/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Toggle/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/DiscountBadge/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Accordion/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/InputField/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Modal/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/SelectField/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/Filter/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/FilterSlider/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
+  @include meta.load-css("../../../orders/ListOrders/FilterSlider/FilterFacetDateRange/styles.scss");
+
+  [data-fs-slide-over] {
+    --fs-slide-over-partial-width-notebook: calc(100% / 2.2);
+    --fs-slide-over-partial-max-width-notebook: calc(var(--fs-grid-breakpoint-notebook) / 2.2);
+    --fs-filter-slider-content-padding: 0 var(--fs-spacing-7);
+  }
+
+  [data-fs-badge] {
+    display: none;
+    visibility: hidden;
+  }
+
+  // Status selector inside the filter drawer
+  [data-fs-quotes-status-selector] {
+    padding: var(--fs-spacing-5) var(--fs-spacing-7) 0;
+  }
+
+  [data-fs-quotes-filter-group] {
+    padding: var(--fs-spacing-5) var(--fs-spacing-7) 0;
+  }
+
+  [data-fs-quotes-filter-group-label] {
+    margin: 0 0 var(--fs-spacing-3);
+    font-size: var(--fs-text-size-base);
+    font-weight: var(--fs-text-weight-regular);
+    color: var(--fs-color-text);
+  }
+}