feat: Delivery Promise 2.1 - filters by Dynamic Estimate

packages/components/src/molecules/ToggleField/ToggleField.tsx

@@ -1,3 +1,4 @@
+import type { ChangeEventHandler } from 'react'
 import React, { forwardRef } from 'react'
 import { Label, SROnly, Toggle, type ToggleProps } from './../../'
 
@@ -26,6 +27,14 @@ export interface ToggleFieldProps extends ToggleProps {
    * Controls the component's direction.
    */
   variant?: 'horizontal' | 'vertical'
+  /**
+   * Specifies if the input is checked or not.
+   */
+  checked?: boolean
+  /**
+   * Function that is triggered when any children is checked.
+   */
+  onChange?: ChangeEventHandler<HTMLInputElement>
 }
 
 const ToggleField = forwardRef<HTMLDivElement, ToggleFieldProps>(
@@ -43,7 +52,13 @@ const ToggleField = forwardRef<HTMLDivElement, ToggleFieldProps>(
   ) {
     return (
       <div ref={ref} data-fs-toggle-field data-testid={testId}>
-        <Toggle id={id} variant={variant} disabled={disabled} {...otherProps} />
+        <Toggle
+          id={id}
+          variant={variant}
+          disabled={disabled}
+          data-testid={`${testId}-toggle`}
+          {...otherProps}
+        />
         {displayLabel ? (
           <Label data-fs-toggle-field-label htmlFor={id}>
             {label}

packages/components/src/organisms/Filter/FilterFacetBooleanItem.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import React from 'react'
-import { Badge, Checkbox, Label, RadioField } from '../..'
+import { Badge, Checkbox, Label, RadioField, ToggleField } from '../..'
 import type { OnFacetChange } from './Filter'
 
 export interface FilterFacetBooleanItemProps {
@@ -39,7 +39,7 @@ export interface FilterFacetBooleanItemProps {
   /**
    * Type of the Facet Item.
    */
-  type?: 'checkbox' | 'radio'
+  type?: 'checkbox' | 'radio' | 'toggle'
 }
 
 function FilterFacetBooleanItem({
@@ -53,31 +53,32 @@ function FilterFacetBooleanItem({
   type = 'checkbox',
   onFacetChange,
 }: FilterFacetBooleanItemProps) {
-  return (
-    <li key={id} data-fs-filter-list-item>
-      {type === 'checkbox' ? (
-        <>
-          <Checkbox
-            id={id}
-            checked={selected}
-            onChange={() => onFacetChange({ key: facetKey, value }, 'BOOLEAN')}
-            data-fs-filter-list-item-checkbox
-            data-testid={`${testId}-accordion-panel-checkbox`}
-            data-value={value}
-            data-quantity={quantity}
-          />
-          <Label
-            htmlFor={id}
-            className="text__title-mini-alt"
-            data-fs-filter-list-item-label
-          >
-            {label}
-            {quantity && (
-              <Badge data-fs-filter-list-item-badge>{quantity}</Badge>
-            )}
-          </Label>
-        </>
-      ) : (
+  if (type === 'checkbox') {
+    return (
+      <li key={id} data-fs-filter-list-item>
+        <Checkbox
+          id={id}
+          checked={selected}
+          onChange={() => onFacetChange({ key: facetKey, value }, 'BOOLEAN')}
+          data-fs-filter-list-item-checkbox
+          data-testid={`${testId}-accordion-panel-checkbox`}
+          data-value={value}
+          data-quantity={quantity}
+        />
+        <Label
+          htmlFor={id}
+          className="text__title-mini-alt"
+          data-fs-filter-list-item-label
+        >
+          {label} <Badge data-fs-filter-list-item-badge>{quantity}</Badge>
+        </Label>
+      </li>
+    )
+  }
+
+  if (type === 'radio') {
+    return (
+      <li key={id} data-fs-filter-list-item>
         <RadioField
           id={id}
           name={facetKey}
@@ -89,9 +90,25 @@ function FilterFacetBooleanItem({
           data-value={value}
           label={label}
         />
-      )}
-    </li>
-  )
+      </li>
+    )
+  }
+
+  if (type === 'toggle') {
+    return (
+      <li key={id} data-fs-filter-list-item>
+        <ToggleField
+          id={id}
+          label={label as string}
+          checked={selected}
+          onChange={() => onFacetChange({ key: facetKey, value }, 'BOOLEAN')}
+          testId={`${testId}-accordion-panel-toggle-field`}
+        />
+      </li>
+    )
+  }
+
+  return null
 }
 
 export default FilterFacetBooleanItem

packages/components/src/organisms/Filter/FilterFacets.tsx

@@ -17,11 +17,15 @@ export interface FilterFacetsProps {
   /**
    * The text displayed to identify the Facet.
    */
-  label: string
+  label?: string
   /**
    * The description displayed to identify the Facet.
    */
   description?: string
+  /**
+   * Defines if the facet should be highlighted, it will not be displayed as an accordion button and will be expanded (not collapsible).
+   */
+  highlighted?: boolean
 }
 
 function FilterFacets({
@@ -31,6 +35,7 @@ function FilterFacets({
   children,
   type,
   description,
+  highlighted,
 }: PropsWithChildren<FilterFacetsProps>) {
   return (
     <AccordionItem
@@ -40,16 +45,25 @@ function FilterFacets({
       index={index}
       data-type={type}
       data-fs-filter-accordion-item
+      data-fs-filter-accordion-item-highlighted={highlighted}
     >
-      <AccordionButton testId={`${testId}-accordion-button`}>
-        {label}
-      </AccordionButton>
-      <AccordionPanel>
-        {description && (
-          <span data-fs-filter-accordion-item-description>{description}</span>
-        )}
-        {children}
-      </AccordionPanel>
+      {highlighted ? (
+        <>{children}</>
+      ) : (
+        <>
+          <AccordionButton testId={`${testId}-accordion-button`}>
+            {label}
+          </AccordionButton>
+          <AccordionPanel>
+            {description && (
+              <span data-fs-filter-accordion-item-description>
+                {description}
+              </span>
+            )}
+            {children}
+          </AccordionPanel>
+        </>
+      )}
     </AccordionItem>
   )
 }

packages/core/cms/faststore/content-types.json

@@ -256,6 +256,27 @@
                     }
                   }
                 },
+                "dynamicEstimate": {
+                  "title": "PLP/Search Filter: Dynamic Estimate",
+                  "type": "object",
+                  "properties": {
+                    "enabled": {
+                      "title": "Should display Dynamic Estimate?",
+                      "type": "boolean",
+                      "default": true
+                    },
+                    "sameDay": {
+                      "title": "Same Day label",
+                      "type": "string",
+                      "default": "Receive Today"
+                    },
+                    "nextDay": {
+                      "title": "Next Day label",
+                      "type": "string",
+                      "default": "Receive Tomorrow"
+                    }
+                  }
+                },
                 "deliveryPromiseBadges": {
                   "title": "Delivery Promise badges",
                   "type": "object",

packages/core/src/components/search/Filter/FilterDesktop.tsx

@@ -34,7 +34,7 @@ interface FilterDesktopProps
 
 function FilterDesktop({
   facets,
-  testId,
+  testId = 'filter-desktop',
   dispatch,
   expanded,
   title,
@@ -48,11 +48,13 @@ function FilterDesktop({
   } = useSearch()
   const { openRegionSlider } = useUI()
   const {
-    facets: filteredFacets,
+    highlightedFacet,
+    facetsWithoutHighlightedFacet,
     labelsMap,
     isPickupAllEnabled,
     shouldDisplayDeliveryButton,
     onDeliveryFacetChange,
+    getDynamicEstimateLabel,
   } = useDeliveryPromise({
     allFacets: facets,
     selectedFilterFacets: searchState.selectedFacets,
@@ -90,7 +92,35 @@ function FilterDesktop({
           </UIFilterFacets>
         )}
 
-        {filteredFacets.map((facet, idx) => {
+        {highlightedFacet &&
+          highlightedFacet.__typename === 'StoreFacetBoolean' && (
+            <UIFilterFacets
+              key={`${testId}-${highlightedFacet.key}`}
+              testId={testId}
+              highlighted
+              type={highlightedFacet.__typename}
+              index={undefined}
+            >
+              {highlightedFacet.values.map((item) => (
+                <UIFilterFacetBooleanItem
+                  key={`${testId}-${highlightedFacet.label}-${item.value}`}
+                  id={`${testId}-${highlightedFacet.label}-${item.value}`}
+                  testId={testId}
+                  onFacetChange={(facet) => {
+                    onDeliveryFacetChange({ facet })
+                    resetInfiniteScroll(0)
+                  }}
+                  selected={item.selected}
+                  value={item.value}
+                  facetKey={highlightedFacet.key}
+                  label={getDynamicEstimateLabel(item.value) ?? item.label}
+                  type="toggle"
+                />
+              ))}
+            </UIFilterFacets>
+          )}
+
+        {facetsWithoutHighlightedFacet.map((facet, idx) => {
           const index = shouldDisplayDeliveryButton ? idx + 1 : idx
           const { __typename: type, label } = facet
           const isExpanded = expanded.has(index)

packages/core/src/components/search/Filter/FilterSlider.tsx

@@ -103,11 +103,13 @@ function FilterSlider({
   const { deliveryPromise: deliveryPromiseSettings } = cmsData ?? {}
 
   const {
-    facets: filteredFacets,
+    highlightedFacet,
+    facetsWithoutHighlightedFacet,
     labelsMap,
     isPickupAllEnabled,
     shouldDisplayDeliveryButton,
     onDeliveryFacetChange,
+    getDynamicEstimateLabel,
   } = useDeliveryPromise({
     selectedFilterFacets: selected,
     allFacets: facets,
@@ -187,7 +189,37 @@ function FilterSlider({
             </UIFilterFacets>
           )}
 
-          {filteredFacets.map((facet, idx) => {
+          {highlightedFacet &&
+            highlightedFacet.__typename === 'StoreFacetBoolean' && (
+              <UIFilterFacets
+                key={`${testId}-${highlightedFacet.key}`}
+                testId={testId}
+                highlighted
+                type={highlightedFacet.__typename}
+                index={undefined}
+              >
+                {highlightedFacet.values.map((item) => (
+                  <UIFilterFacetBooleanItem
+                    key={`${testId}-${highlightedFacet.label}-${item.value}`}
+                    id={`${testId}-${highlightedFacet.label}-${item.value}`}
+                    testId={testId}
+                    onFacetChange={(facet) => {
+                      onDeliveryFacetChange({
+                        facet,
+                        filterDispatch: dispatch,
+                      })
+                    }}
+                    selected={item.selected}
+                    value={item.value}
+                    facetKey={highlightedFacet.key}
+                    label={getDynamicEstimateLabel(item.value) ?? item.label}
+                    type="toggle"
+                  />
+                ))}
+              </UIFilterFacets>
+            )}
+
+          {facetsWithoutHighlightedFacet.map((facet, idx) => {
             const index = shouldDisplayDeliveryButton ? idx + 1 : idx
             const { __typename: type, label } = facet
             const isExpanded = expanded.has(index)

packages/core/src/components/search/Filter/section.module.scss

@@ -14,6 +14,8 @@
   @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
   @import "@faststore/ui/src/components/molecules/RadioField/styles.scss";
   @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
+  @import "@faststore/ui/src/components/molecules/ToggleField/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/PriceRange/styles.scss";