@faststore/core 3.44.1 → 3.45.0

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterFacetDateRange/MyAccountFilterFacetDateRange.tsx

@@ -0,0 +1,113 @@
+import { InputField } from '@faststore/ui'
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+
+export interface MyAccountFilterFacetDateRangeProps {
+  /**
+   * The from value of the Range Facet
+   */
+  from: string
+  /**
+   * The to value of the Range Facet
+   */
+  to: string
+  /**
+   * The function to be called when the date range changes
+   */
+  setDisabled: (disabled: boolean) => void
+}
+
+const MyAccountFilterFacetDateRange = forwardRef<
+  {
+    clear: () => void
+    getDataRangeFacet: () => {
+      key: string
+      value: { from: string; to: string }
+    }
+  },
+  MyAccountFilterFacetDateRangeProps
+>(({ to, from, setDisabled }, ref) => {
+  const inputFromRef = useRef<HTMLInputElement>(null)
+  const inputToRef = useRef<HTMLInputElement>(null)
+  const [inputFromError, setInputFromError] = useState<string>()
+  const [inputToError, setInputToError] = useState<string>()
+
+  const [dateRange, setDateRange] = useState<{ from: string; to: string }>({
+    from,
+    to,
+  })
+
+  function onEnd(value: { from: string; to: string }) {
+    if (!value.from || !value.to) {
+      setInputFromError(undefined)
+      setInputToError(undefined)
+      setDisabled(false)
+      return
+    }
+
+    if (new Date(value.from) > new Date(value.to)) {
+      setInputFromError('Invalid date range')
+      setDisabled(true)
+    } else {
+      setInputFromError(undefined)
+      setInputToError(undefined)
+      setDisabled(false)
+    }
+  }
+
+  function onChangeInputFrom(value: string) {
+    setDateRange({ ...dateRange, from: String(value) })
+    onEnd?.({ ...dateRange, from: String(value) })
+  }
+
+  function onChangeInputTo(value: string) {
+    setDateRange({ ...dateRange, to: String(value) })
+    onEnd?.({ ...dateRange, to: String(value) })
+  }
+
+  useImperativeHandle(ref, () => ({
+    clear: () => {
+      setInputFromError(undefined)
+      setInputToError(undefined)
+      setDateRange({ from: '', to: '' })
+      if (inputFromRef.current) inputFromRef.current.value = ''
+      if (inputToRef.current) inputToRef.current.value = ''
+    },
+    getDataRangeFacet: () => {
+      return {
+        key: 'dateRange',
+        value: dateRange,
+      }
+    },
+  }))
+
+  return (
+    <div data-fs-list-orders-filters-date-range>
+      <div data-fs-list-orders-filters-date-range-inputs>
+        <InputField
+          id="date-range-from"
+          label="From"
+          type="date"
+          inputMode="text"
+          error={inputFromError}
+          inputRef={inputFromRef}
+          value={dateRange.from}
+          onChange={(e) => onChangeInputFrom(e.target.value)}
+          onBlur={() => !inputFromError && onEnd?.(dateRange)}
+        />
+        <InputField
+          id="date-range-to"
+          label="To"
+          type="date"
+          inputMode="text"
+          error={inputToError}
+          inputRef={inputToRef}
+          value={dateRange.to}
+          onChange={(e) => onChangeInputTo(e.target.value)}
+          onBlur={() => !inputToError && onEnd?.(dateRange)}
+        />
+      </div>
+    </div>
+  )
+})
+
+export default MyAccountFilterFacetDateRange

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

@@ -0,0 +1,2 @@
+export { default } from './MyAccountFilterFacetDateRange'
+export type { MyAccountFilterFacetDateRangeProps } from './MyAccountFilterFacetDateRange'

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/MyAccountFilterFacetDateRange/styles.scss

@@ -0,0 +1,43 @@
+[data-fs-list-orders-filters-date-range] {
+  // --------------------------------------------------------
+  // Design Tokens
+  // --------------------------------------------------------
+
+  --fs-list-orders-filters-date-range-width: 100%;
+  --fs-list-orders-filters-date-range-input-width: 50%;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: var(--fs-list-orders-filters-date-range-width);
+
+  [data-fs-list-orders-filters-date-range-inputs] {
+    display: flex;
+
+    [data-fs-input-field] {
+      width: var(--fs-list-orders-filters-date-range-input-width);
+
+      [data-fs-input]:hover,
+      [data-fs-input]:focus-visible,
+      [data-fs-input]:focus {
+        z-index: 1;
+        + label { z-index: 1; }
+      }
+
+      &:first-of-type {
+        margin-right: -1px;
+
+        [data-fs-input] {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      &:last-of-type [data-fs-input] {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,209 @@
+import {
+  type SearchInputFieldRef,
+  Filter as UIFilter,
+  FilterFacetBoolean as UIFilterFacetBoolean,
+  FilterFacetBooleanItem as UIFilterFacetBooleanItem,
+  FilterFacets as UIFilterFacets,
+  FilterSlider as UIFilterSlider,
+} from '@faststore/ui'
+
+import router from 'next/router'
+import { type MutableRefObject, useRef, useState } from 'react'
+import type {
+  MyAccountFilter_FacetsFragment,
+  useMyAccountFilter,
+} from 'src/sdk/search/useMyAccountFilter'
+import FilterFacetDateRange from './MyAccountFilterFacetDateRange'
+import styles from './section.module.scss'
+
+export interface FilterSliderProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  /**
+   * The array that represents the details of every facet.
+   */
+  facets: MyAccountFilter_FacetsFragment[]
+  /**
+   * Title for the `Filter` component.
+   */
+  title?: string
+  /**
+   * Defined label for the clear button component.
+   */
+  clearButtonLabel?: string
+  /**
+   * Defined label for the apply button component.
+   */
+  applyButtonLabel?: string
+  /**
+   * Ref to the search input field.
+   */
+  searchInputRef?: MutableRefObject<SearchInputFieldRef>
+}
+
+function MyAccountFilterSlider({
+  facets,
+  testId,
+  dispatch,
+  expanded,
+  selected,
+  title,
+  clearButtonLabel,
+  applyButtonLabel,
+  searchInputRef,
+}: FilterSliderProps & ReturnType<typeof useMyAccountFilter>) {
+  const dateRangeInputRef = useRef<{
+    clear: () => void
+    getDataRangeFacet: () => {
+      key: string
+      value: { from: string; to: string }
+    }
+  }>(null)
+
+  const [disabled, setDisabled] = useState(false)
+
+  const handleFilterChange = ({
+    selectedFacets,
+    text,
+  }: {
+    selectedFacets: {
+      key: string
+      value: string
+    }[]
+    text: string
+  }) => {
+    const facets = selectedFacets.reduce(
+      (acc, facet) => {
+        const { key, value } = facet
+        if (key === 'dateInitial') {
+          acc['dateInitial'] = value
+        }
+
+        if (key === 'dateFinal') {
+          acc['dateFinal'] = value
+        }
+
+        if (key === 'status') {
+          acc['status'] = Array.isArray(acc['status'])
+            ? [...acc['status'], value]
+            : [value]
+        }
+
+        return acc
+      },
+      {} as Record<string, string | string[]>
+    )
+
+    router.push({
+      pathname: '/account/orders',
+      query: {
+        ...(text ? { text } : {}),
+        ...facets,
+      },
+    })
+  }
+
+  return (
+    <UIFilterSlider
+      overlayProps={{
+        className: `section ${styles.section} section-filter-slider`,
+      }}
+      title={title}
+      size="partial"
+      direction="rightSide"
+      clearBtnProps={{
+        variant: 'secondary',
+        onClick: () => {
+          dateRangeInputRef.current?.clear()
+          dispatch({ type: 'selectFacets', payload: [] })
+        },
+        children: clearButtonLabel ?? 'Clear All',
+      }}
+      applyBtnProps={{
+        variant: 'primary',
+        onClick: () => {
+          const dateRangeFacet = dateRangeInputRef.current?.getDataRangeFacet()
+
+          const selectedFacets = [
+            ...selected,
+            dateRangeFacet.value.from.trim()
+              ? {
+                  key: 'dateInitial',
+                  value: dateRangeFacet.value.from,
+                }
+              : undefined,
+            dateRangeFacet.value.to.trim()
+              ? {
+                  key: 'dateFinal',
+                  value: dateRangeFacet.value.to,
+                }
+              : undefined,
+          ].filter(Boolean)
+
+          handleFilterChange({
+            selectedFacets,
+            text: searchInputRef.current?.inputRef.value,
+          })
+        },
+        disabled: disabled,
+        children: applyButtonLabel ?? 'Apply',
+      }}
+      onClose={() => {}}
+    >
+      <UIFilter
+        testId={`mobile-${testId}`}
+        indicesExpanded={expanded}
+        onAccordionChange={(index: number) =>
+          dispatch({ type: 'toggleExpanded', payload: index })
+        }
+      >
+        {facets.map((facet, index) => {
+          const { __typename: type, label } = facet
+          const isExpanded = expanded.has(index)
+          return (
+            <UIFilterFacets
+              key={`${testId}-${label}-${index}`}
+              testId={`mobile-${testId}`}
+              index={index}
+              type={type}
+              label={label}
+            >
+              {type === 'StoreFacetBoolean' && isExpanded && (
+                <UIFilterFacetBoolean>
+                  {facet.values.map((item) => (
+                    <UIFilterFacetBooleanItem
+                      key={`${testId}-${facet.label}-${item.label}`}
+                      id={`${testId}-${facet.label}-${item.label}`}
+                      testId={`mobile-${testId}`}
+                      onFacetChange={(facet) =>
+                        dispatch({ type: 'toggleFacet', payload: facet })
+                      }
+                      selected={item.selected}
+                      value={item.value}
+                      quantity={item.quantity}
+                      facetKey={facet.key}
+                      label={item.label}
+                    />
+                  ))}
+                </UIFilterFacetBoolean>
+              )}
+              {type === 'StoreFacetRange' && isExpanded && (
+                <FilterFacetDateRange
+                  ref={dateRangeInputRef}
+                  from={facet.from}
+                  to={facet.to}
+                  setDisabled={setDisabled}
+                />
+              )}
+            </UIFilterFacets>
+          )
+        })}
+      </UIFilter>
+    </UIFilterSlider>
+  )
+}
+
+export default MyAccountFilterSlider

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

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

package/src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider/section.module.scss

@@ -0,0 +1,24 @@
+.section {
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Slider/styles.scss";
+  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
+  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
+  @import "@faststore/ui/src/components/organisms/Filter/styles.scss";
+  @import "@faststore/ui/src/components/organisms/FilterSlider/styles.scss";
+  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+  @import "./MyAccountFilterFacetDateRange/styles.scss";
+
+  [data-fs-badge] {
+    display: none;
+    visibility: hidden;
+  }
+}

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

@@ -0,0 +1,296 @@
+import { useRef, type MutableRefObject } from 'react'
+
+import type { ServerListOrdersQueryQuery } from '@generated/graphql'
+import { useRouter } from 'next/router'
+
+import {
+  Button,
+  Icon,
+  SearchInputField,
+  useUI,
+  type SearchInputFieldRef,
+} from '@faststore/ui'
+import { useEffect } from 'react'
+import MyAccountFilterSlider from 'src/components/account/orders/MyAccountListOrders/MyAccountFilterSlider'
+import { useDebounce } from 'src/sdk/account/useDebounce'
+import {
+  useMyAccountFilter,
+  type MyAccountFilter_FacetsFragment,
+  type SelectedFacet,
+} from 'src/sdk/search/useMyAccountFilter'
+import useScreenResize from 'src/sdk/ui/useScreenResize'
+import { FastStoreOrderStatus } from 'src/utils/userOrderStatus'
+import MyAccountListOrdersEmptyState from './MyAccountListOrdersEmptyState'
+import MyAccountListOrdersTable, {
+  Pagination,
+} from './MyAccountListOrdersTable/MyAccountListOrdersTable'
+import SelectedFiltersTags from './MyAccountSelectedTags/MyAccountSelectedTags'
+import styles from './styles.module.scss'
+
+export type MyAccountListOrdersProps = {
+  listOrders: ServerListOrdersQueryQuery['listUserOrders']
+  total: number
+  perPage: number
+  filters: {
+    page: number
+    status: string[]
+    dateInitial: string
+    dateFinal: string
+    text: string
+    clientEmail: string
+  }
+}
+
+function getSelectedFacets({
+  filters,
+}: {
+  filters: MyAccountListOrdersProps['filters']
+}): SelectedFacet[] {
+  return Object.keys(filters).reduce((acc, filter) => {
+    // FilterSlider does not deal with these filters
+    if (filter === 'page' || filter === 'text' || filter === 'clientEmail') {
+      return acc
+    }
+
+    const value = filters[filter as keyof typeof filters] as string | string[]
+
+    if (filter === 'status' && value.length > 0) {
+      const status = Array.isArray(value) ? value : [value]
+      acc.push(
+        ...status.map((statusValue) => ({
+          key: 'status',
+          value: statusValue.toLowerCase(),
+        }))
+      )
+    } else if (filter === 'dateInitial' && value) {
+      acc.push({
+        key: 'dateInitial',
+        value: String(value),
+      })
+    } else if (filter === 'dateFinal' && value) {
+      acc.push({
+        key: 'dateFinal',
+        value: String(value),
+      })
+    }
+
+    return acc
+  }, [] as SelectedFacet[])
+}
+
+function getAllFacets({
+  filters,
+}: {
+  filters: MyAccountListOrdersProps['filters']
+}): MyAccountFilter_FacetsFragment[] {
+  return [
+    {
+      __typename: 'StoreFacetBoolean',
+      key: 'status',
+      label: 'Status',
+      values: FastStoreOrderStatus.map((status) => ({
+        label: status,
+        quantity: 0,
+        selected: false,
+        value: status.toLowerCase(),
+      })),
+    },
+    {
+      __typename: 'StoreFacetRange',
+      key: 'dateRange',
+      label: 'Order Date',
+      from: filters.dateInitial,
+      to: filters.dateFinal,
+    },
+  ]
+}
+
+export default function MyAccountListOrders({
+  listOrders,
+  total,
+  perPage,
+  filters,
+}: MyAccountListOrdersProps) {
+  const router = useRouter()
+  const { isDesktop } = useScreenResize()
+  const searchInputRef = useRef(null) as MutableRefObject<SearchInputFieldRef>
+
+  // Set the initial value of the search input field based on server values
+  useEffect(() => {
+    if (!searchInputRef.current?.inputRef) return
+
+    if (filters?.text && searchInputRef.current?.inputRef) {
+      searchInputRef.current.inputRef.value = filters.text
+    } else {
+      searchInputRef.current.inputRef.value = ''
+    }
+  }, [filters?.text])
+
+  // Debounce the search input value to avoid too many requests
+  const handleSearchChange = useDebounce(
+    (value: string) => {
+      if (!value && !router.query.text) {
+        return
+      }
+
+      const searchInputValueChanged =
+        value.trim().toLowerCase() !==
+        router.query.text?.toString().trim().toLowerCase()
+
+      if (searchInputValueChanged) {
+        const { text, page, ...rest } = router.query
+        router.push({
+          pathname: '/account/orders',
+          query: {
+            ...rest,
+            ...(value ? { text: value } : {}),
+          },
+        })
+      }
+    },
+    300,
+    String(router.query.text)
+  )
+
+  const selectedFacets: SelectedFacet[] = getSelectedFacets({ filters })
+  const allFacets = getAllFacets({ filters })
+
+  const filter = useMyAccountFilter({
+    allFacets,
+    selectedFacets,
+  })
+
+  const { openFilter, filter: displayFilter } = useUI()
+
+  if (listOrders.list.length === 0) {
+    return (
+      <div className={styles.page}>
+        <MyAccountListOrdersEmptyState />
+      </div>
+    )
+  }
+
+  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={(_) => {
+                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={
+                <Icon
+                  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} />
+          )}
+        </div>
+
+        <SelectedFiltersTags
+          filters={{
+            status: filters.status,
+            dateInitial: filters.dateInitial,
+            dateFinal: filters.dateFinal,
+          }}
+          onClearAll={() => {
+            router.push({
+              pathname: '/account/orders',
+              query: {},
+            })
+          }}
+          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 {
+              delete updatedFilters[key]
+            }
+
+            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 {
+              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)
+              )
+            )
+
+            router.push({
+              pathname: '/account/orders',
+              query: filteredQuery,
+            })
+          }}
+        />
+
+        {displayFilter && (
+          <MyAccountFilterSlider
+            {...filter}
+            title="Filters"
+            clearButtonLabel="Clear All"
+            applyButtonLabel="View Results"
+            searchInputRef={searchInputRef}
+          />
+        )}
+
+        <MyAccountListOrdersTable
+          listOrders={listOrders}
+          total={total}
+          perPage={perPage}
+          filters={filters}
+        />
+      </div>
+      {!isDesktop && (
+        <Pagination page={filters.page} total={total} perPage={perPage} />
+      )}
+    </div>
+  )
+}