@faststore/core 3.67.0 → 3.68.0

package/src/components/region/RegionModal/useRegion.ts

@@ -1,16 +1,17 @@
-import { useCallback, useState } from 'react'
+import { useState } from 'react'
 
 import type { Session } from '@faststore/sdk'
-import { sessionStore, validateSession } from 'src/sdk/session'
-import { getProductCount } from 'src/sdk/product'
 import { deliveryPromise } from 'discovery.config'
+import { getProductCount } from 'src/sdk/product'
+import { sessionStore, validateSession } from 'src/sdk/session'
 
 type SetRegionProps = {
   session: Session
   postalCode: string | undefined
-  onSuccess?: () => void
+  onSuccess?: (validatedSession?: Session) => void
   errorMessage: string
   noProductsAvailableErrorMessage?: string
+  simulation?: boolean
 }
 
 type UseRegionValues = {
@@ -30,6 +31,7 @@ export default function useRegion(): UseRegionValues {
     session,
     onSuccess,
     noProductsAvailableErrorMessage,
+    simulation = false,
   }: SetRegionProps) => {
     if (typeof postalCode !== 'string') {
       return
@@ -50,19 +52,18 @@ export default function useRegion(): UseRegionValues {
         // Check product availability for specific postal code
         const productCount = await getProductCount()
         if (productCount === 0) {
-          const errorFallback = `There are no products available for ${postalCode}.`
-          const noProductsAvailableError =
-            noProductsAvailableErrorMessage?.replace(/%s/g, () => postalCode)
-
-          setRegionError(noProductsAvailableError ?? errorFallback)
+          setRegionError(
+            noProductsAvailableErrorMessage?.replace(/%s/g, postalCode) ??
+              `There are no products available for ${postalCode}.`
+          )
           setLoading(false)
           return
         }
       }
 
-      sessionStore.set(validatedSession ?? newSession)
+      !simulation && sessionStore.set(validatedSession ?? newSession)
       setRegionError('')
-      onSuccess?.() // Execute the post-validation action (close modal, etc.)
+      onSuccess?.(simulation ? validatedSession : undefined) // Execute the post-validation action (close modal, etc.)
     } catch (error) {
       setRegionError(errorMessage)
     } finally {

package/src/components/region/RegionPopover/RegionPopover.tsx

@@ -10,8 +10,11 @@ import { useRef, useState } from 'react'
 
 import useRegion from '../RegionModal/useRegion'
 
+import { useDeliveryPromise } from 'src/sdk/deliveryPromise'
 import { sessionStore, useSession } from 'src/sdk/session'
+import { getGlobalSettings } from 'src/utils/globalSettings'
 import { textToTitleCase } from 'src/utils/utilities'
+
 import styles from './section.module.scss'
 
 interface RegionPopoverProps {
@@ -41,31 +44,42 @@ interface RegionPopoverProps {
   placement?: UIPopoverProps['placement']
 }
 
-function RegionPopover({
-  title = 'Set your location',
-  closeButtonAriaLabel,
-  inputField: {
-    label: inputFieldLabel,
-    errorMessage: inputFieldErrorMessage,
-    noProductsAvailableErrorMessage: inputFieldNoProductsAvailableErrorMessage,
-    buttonActionText: inputButtonActionText,
-  },
-  idkPostalCodeLink: {
-    text: idkPostalCodeLinkText,
-    to: idkPostalCodeLinkTo,
-    icon: { icon: idkPostalCodeLinkIcon, alt: idkPostalCodeLinkIconAlt },
-  },
-  textBeforeLocation = 'Your current location is:',
-  textAfterLocation = 'Use the field below to change it.',
-  description = 'Offers and availability vary by location.',
-  triggerRef,
-  offsetTop = 6,
-  offsetLeft,
-  placement = 'bottom-start',
-}: RegionPopoverProps) {
+function RegionPopover(regionPopoverProps: RegionPopoverProps) {
+  const {
+    title = 'Set your location',
+    closeButtonAriaLabel,
+    textBeforeLocation = 'Your current location is:',
+    textAfterLocation = 'Use the field below to change it.',
+    description = 'Offers and availability vary by location.',
+    triggerRef,
+    offsetTop = 6,
+    offsetLeft,
+    placement = 'bottom-start',
+    ...otherRegionPopoverProps
+  } = regionPopoverProps
+  const cmsData = getGlobalSettings(otherRegionPopoverProps)
+  const {
+    inputField: {
+      label: inputFieldLabel = '',
+      errorMessage: inputFieldErrorMessage = '',
+      noProductsAvailableErrorMessage:
+        inputFieldNoProductsAvailableErrorMessage = '',
+      buttonActionText: inputButtonActionText = '',
+    } = {},
+    idkPostalCodeLink: {
+      text: idkPostalCodeLinkText = '',
+      to: idkPostalCodeLinkTo = '',
+      icon: {
+        icon: idkPostalCodeLinkIcon = '',
+        alt: idkPostalCodeLinkIconAlt = '',
+      } = {},
+    } = {},
+  } = cmsData?.regionalization ?? {}
+
   const inputRef = useRef<HTMLInputElement>(null)
   const { isValidating, ...session } = useSession()
   const { popover: displayPopover, closePopover } = useUI()
+  const { onPostalCodeChange } = useDeliveryPromise()
   const { city, postalCode } = sessionStore.read()
   const location = city ? `${textToTitleCase(city)}, ${postalCode}` : postalCode
 
@@ -81,6 +95,7 @@ function RegionPopover({
     await setRegion({
       session,
       onSuccess: () => {
+        onPostalCodeChange()
         setInput('')
         closePopover()
       },

package/src/components/region/RegionSlider/RegionSlider.tsx

@@ -0,0 +1,407 @@
+import { toggleFacets, useSearch, type Session } from '@faststore/sdk'
+import {
+  useUI,
+  type FilterSliderProps as UIFilterSliderProps,
+  type IconProps as UIIconProps,
+  type InputFieldProps as UIInputFieldProps,
+} from '@faststore/ui'
+import dynamic from 'next/dynamic'
+import type { ChangeEvent, MouseEvent } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import useRegion from 'src/components/region/RegionModal/useRegion'
+import { PickupPointCards } from 'src/components/ui/PickupPoints'
+import {
+  PICKUP_IN_POINT_FACET_VALUE,
+  PICKUP_POINT_FACET_KEY,
+  SHIPPING_FACET_KEY,
+  useDeliveryPromise,
+} from 'src/sdk/deliveryPromise'
+import { sessionStore, useSession } from 'src/sdk/session'
+import { getGlobalSettings } from 'src/utils/globalSettings'
+import styles from './section.module.scss'
+
+const UIFilterSlider = dynamic<UIFilterSliderProps>(
+  () =>
+    /* webpackChunkName: "UIFilterSlider" */
+    import('@faststore/ui').then((mod) => mod.FilterSlider),
+  { ssr: false }
+)
+const UIInputField = dynamic<UIInputFieldProps>(() =>
+  /* webpackChunkName: "UIInputField" */
+  import('@faststore/ui').then((mod) => mod.InputField)
+)
+const UIIcon = dynamic<UIIconProps>(() =>
+  /* webpackChunkName: "UIIcon" */
+  import('@faststore/ui').then((mod) => mod.Icon)
+)
+const UILink = dynamic(() =>
+  /* webpackChunkName: "UILink" */
+  import('@faststore/ui').then((mod) => mod.Link)
+)
+
+function RegionSlider() {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const {
+    regionSlider: { type: regionSliderType, isOpen },
+    closeRegionSlider,
+  } = useUI()
+  const { isValidating, ...session } = useSession()
+  const { state: searchState, setState: setSearchState } = useSearch()
+  const {
+    loading: loadingRegion,
+    setRegion,
+    regionError,
+    setRegionError,
+  } = useRegion()
+  const {
+    pickupPoints: statePickupPoints,
+    onPostalCodeChange,
+    changeGlobalPickupPoint,
+    selectedPickupPointFacet,
+    pickupPointsSimulation,
+    clearPickupPointsSimulation,
+    globalPickupPoint,
+    fetchingPickupPoints,
+    changePickupPoint,
+  } = useDeliveryPromise({ selectedFilterFacets: searchState.selectedFacets })
+
+  const isChangingPickupPoint = useMemo(
+    () =>
+      ['changePickupPoint', 'globalChangePickupPoint'].includes(
+        regionSliderType
+      ),
+    [regionSliderType]
+  )
+  const pickupPoints = useMemo(
+    () =>
+      pickupPointsSimulation?.geoCoordinates
+        ? pickupPointsSimulation.pickupPoints
+        : statePickupPoints,
+    [statePickupPoints, pickupPointsSimulation]
+  )
+
+  const [dataLoading, setDataLoading] = useState(
+    loadingRegion || fetchingPickupPoints
+  )
+  const [input, setInput] = useState<string>(session.postalCode ?? '')
+  const [appliedInput, setAppliedInput] = useState<string>(
+    session.postalCode ?? ''
+  )
+  const [pickupPointOption, setPickupPointOption] = useState<string | null>(
+    regionSliderType === 'globalChangePickupPoint'
+      ? (globalPickupPoint?.id ?? null)
+      : (selectedPickupPointFacet ?? null)
+  )
+  const [validatedSession, setValidatedSession] = useState<Session>(undefined)
+
+  useEffect(() => inputRef.current?.focus(), [])
+
+  useEffect(() => setDataLoading(fetchingPickupPoints), [fetchingPickupPoints])
+
+  // Sets default state values based on the `regionSliderType` and when the postal code changes
+  useEffect(() => {
+    if (regionSliderType === 'none') return
+
+    setInput(session.postalCode)
+    setAppliedInput(session.postalCode)
+    setPickupPointOption(
+      regionSliderType === 'globalChangePickupPoint'
+        ? (globalPickupPoint?.id ?? null)
+        : (selectedPickupPointFacet ?? null)
+    )
+    setDataLoading(false)
+  }, [session.postalCode, regionSliderType])
+
+  const cmsData = getGlobalSettings()
+  const inputField = cmsData?.regionalization?.inputField
+  const idkPostalCodeLink = cmsData?.regionalization?.idkPostalCodeLink
+
+  const handleSubmit = async () => {
+    if (isValidating) {
+      return
+    }
+
+    setDataLoading(true)
+    setAppliedInput(input)
+
+    await setRegion({
+      session,
+      simulation: isChangingPickupPoint,
+      onSuccess: (newSession) => {
+        // Pickup points simulation
+        if (newSession) {
+          setValidatedSession(newSession)
+          onPostalCodeChange({
+            simulatePickupPoints: true,
+            validatedSession: newSession,
+          })
+        } else {
+          onPostalCodeChange()
+        }
+
+        if (!isChangingPickupPoint) {
+          setInput('')
+          closeRegionSlider()
+        }
+      },
+      postalCode: input,
+      errorMessage: inputField?.errorMessage,
+      noProductsAvailableErrorMessage:
+        inputField?.noProductsAvailableErrorMessage,
+    })
+  }
+
+  const handlePickupPointOnChange = (
+    e: ChangeEvent<HTMLInputElement> & MouseEvent<HTMLInputElement>
+  ) => {
+    if (pickupPointOption === e.currentTarget.value) {
+      return setPickupPointOption(null)
+    }
+
+    setPickupPointOption(e.currentTarget.value)
+  }
+
+  const handlePickupPointUpdate = async () => {
+    if (validatedSession && isChangingPickupPoint) {
+      sessionStore.set(validatedSession)
+    }
+
+    // If shipping is not 'pickup-in-point', we need to toggle it
+    const facetsToToggle = []
+    const shippingFacet = searchState.selectedFacets.find(
+      (facet) => facet.key === SHIPPING_FACET_KEY
+    )
+
+    // Add/update the pickupPoint facet
+    if (pickupPointOption) {
+      facetsToToggle.push({
+        key: PICKUP_POINT_FACET_KEY,
+        value: pickupPointOption,
+      })
+
+      if (regionSliderType === 'globalChangePickupPoint') {
+        const pickupPointFacet = pickupPoints.find(
+          (pickupPoint) => pickupPoint.id === pickupPointOption
+        )
+
+        changeGlobalPickupPoint(pickupPointFacet)
+      }
+    }
+
+    if (!shippingFacet || shippingFacet.value !== PICKUP_IN_POINT_FACET_VALUE) {
+      facetsToToggle.push({
+        key: SHIPPING_FACET_KEY,
+        value: PICKUP_IN_POINT_FACET_VALUE,
+      })
+    }
+
+    isChangingPickupPoint && onPostalCodeChange()
+
+    if (facetsToToggle.length > 0) {
+      setSearchState({
+        selectedFacets: toggleFacets(
+          searchState.selectedFacets,
+          facetsToToggle,
+          true
+        ),
+        page: 0,
+      })
+    }
+  }
+
+  // The `shouldClearPickupPointsSimulation` param prevent triggering store update more than once.
+  const onDismissSlider = async ({
+    shouldClearPickupPointsSimulation = true,
+  }: { shouldClearPickupPointsSimulation?: boolean } = {}) => {
+    setDataLoading(true)
+    setInput(session.postalCode)
+    setAppliedInput(session.postalCode)
+    setValidatedSession(undefined)
+    setPickupPointOption(null)
+    shouldClearPickupPointsSimulation && clearPickupPointsSimulation()
+  }
+
+  const clearFilter = async () => {
+    const selectedPickupInPointFacets = searchState.selectedFacets.filter(
+      ({ key, value }) =>
+        value === PICKUP_IN_POINT_FACET_VALUE || key === PICKUP_POINT_FACET_KEY
+    )
+
+    if (selectedPickupInPointFacets.length === 0) {
+      if (regionSliderType === 'globalChangePickupPoint') {
+        changeGlobalPickupPoint(null)
+        await onDismissSlider()
+        return closeRegionSlider()
+      }
+
+      return onDismissSlider()
+    }
+
+    if (isChangingPickupPoint) {
+      changePickupPoint(null)
+      regionSliderType === 'globalChangePickupPoint' &&
+        changeGlobalPickupPoint(null)
+    }
+
+    setSearchState({
+      selectedFacets: toggleFacets(
+        searchState.selectedFacets,
+        selectedPickupInPointFacets,
+        true
+      ),
+      page: 0,
+    })
+
+    await onDismissSlider()
+    closeRegionSlider()
+  }
+
+  const idkPostalCodeLinkProps = useMemo(
+    () => ({
+      href: idkPostalCodeLink?.to,
+      children: (
+        <>
+          {idkPostalCodeLink?.text}
+          {!!idkPostalCodeLink?.icon?.icon && (
+            <UIIcon
+              name={idkPostalCodeLink?.icon?.icon}
+              aria-label={idkPostalCodeLink?.icon?.alt}
+              width={20}
+              height={20}
+            />
+          )}
+        </>
+      ),
+    }),
+    [idkPostalCodeLink]
+  )
+
+  if (!isOpen) return null
+
+  const isSameSelectedPickupPoint =
+    regionSliderType === 'changePickupPoint' &&
+    selectedPickupPointFacet &&
+    pickupPointOption === selectedPickupPointFacet
+  const isSameGlobalPickupPoint =
+    regionSliderType === 'globalChangePickupPoint' &&
+    globalPickupPoint &&
+    pickupPointOption === globalPickupPoint.id
+  const shouldDisableUpdateButton =
+    dataLoading ||
+    input === '' ||
+    input !== appliedInput ||
+    pickupPoints?.length === 0 ||
+    !pickupPointOption ||
+    isSameSelectedPickupPoint ||
+    isSameGlobalPickupPoint ||
+    regionError !== ''
+  const shouldDisableClearButton =
+    !dataLoading && !pickupPointOption && !selectedPickupPointFacet
+
+  return (
+    <UIFilterSlider
+      data-fs-filter-region-slider
+      testId="fs-region-slider"
+      overlayProps={{
+        className: `section ${styles.section} section-filter-slider`,
+      }}
+      title={
+        regionSliderType !== 'none'
+          ? cmsData?.deliveryPromise?.regionSlider?.title?.[regionSliderType]
+          : ''
+      }
+      size="partial"
+      direction="rightSide"
+      onClose={() => onDismissSlider()}
+      onDismiss={() => onDismissSlider()}
+      footer={isChangingPickupPoint ? true : false}
+      applyBtnProps={
+        isChangingPickupPoint
+          ? {
+              variant: 'primary',
+              children:
+                cmsData?.deliveryPromise?.regionSlider
+                  ?.pickupPointChangeApplyButtonLabel,
+              disabled: shouldDisableUpdateButton,
+              onClick: async () => {
+                await handlePickupPointUpdate()
+
+                // Clear local state when leaving the component after setting a pickup point.
+                // Pickup points simulation data are reset by the `onPostalCodeChange` callback.
+                await onDismissSlider({
+                  shouldClearPickupPointsSimulation: false,
+                })
+              },
+            }
+          : undefined
+      }
+      clearBtnProps={
+        isChangingPickupPoint
+          ? {
+              variant: 'secondary',
+              disabled: shouldDisableClearButton,
+              onClick: () => clearFilter(),
+              children:
+                cmsData?.deliveryPromise?.regionSlider
+                  ?.pickupPointClearFilterButtonLabel ?? 'Clear filter',
+            }
+          : undefined
+      }
+    >
+      <div data-fs-filter-region-slider-content>
+        <span data-fs-filter-region-slider-description>
+          {cmsData?.deliveryPromise?.deliveryMethods?.description}
+        </span>
+        <UIInputField
+          id="region-slider-input-field"
+          inputRef={inputRef}
+          label={inputField?.label}
+          actionable
+          value={input}
+          buttonActionText={dataLoading ? '...' : inputField?.buttonActionText}
+          onInput={(e) => {
+            setInput(e.currentTarget.value)
+            regionError !== '' && setRegionError('')
+          }}
+          onSubmit={() => handleSubmit()}
+          onClear={() => {
+            setInput('')
+            setRegionError('')
+          }}
+          error={regionError}
+        />
+        {idkPostalCodeLink?.to && (
+          <UILink data-fs-filter-delivery-link {...idkPostalCodeLinkProps} />
+        )}
+
+        {isChangingPickupPoint &&
+          input !== '' &&
+          input === appliedInput &&
+          !dataLoading && (
+            <PickupPointCards
+              pickupPoints={regionError ? [] : pickupPoints}
+              selectedOption={pickupPointOption}
+              onChange={handlePickupPointOnChange}
+              noPickupPointsAvailableMessage={
+                pickupPoints?.length === 0
+                  ? cmsData.deliveryPromise?.regionSlider
+                      ?.noPickupPointsAvailableInLocation
+                  : undefined
+              }
+              errorMessage={{
+                title: regionError,
+                description:
+                  cmsData?.regionalization?.inputField?.errorMessageHelper,
+              }}
+              choosePickupPointAriaLabel={
+                cmsData?.deliveryPromise?.regionSlider
+                  ?.choosePickupPointAriaLabel
+              }
+            />
+          )}
+      </div>
+    </UIFilterSlider>
+  )
+}
+
+export default RegionSlider

package/src/components/region/RegionSlider/index.ts

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

package/src/components/region/RegionSlider/section.module.scss

@@ -0,0 +1,72 @@
+.section {
+  @import "@faststore/ui/src/components/atoms/Button/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/molecules/InputField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+  @import "@faststore/ui/src/components/molecules/PickupPointCard/styles.scss";
+  @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+  @import "@faststore/ui/src/components/organisms/FilterSlider/styles.scss";
+  @import "@faststore/ui/src/components/organisms/PickupPointCards/styles.scss";
+  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+
+  [data-fs-filter-region-slider] {
+    [data-fs-filter-slider-title] {
+      font-size: var(--fs-text-size-3);
+      font-weight: var(--fs-text-weight-semibold);
+    }
+
+    [data-fs-filter-slider-footer] {
+      [data-fs-filter-slider-footer-button-apply] {
+        width: 100%;
+      }
+
+      [data-fs-filter-slider-footer-button-clear] {
+        width: 100%;
+      }
+    }
+
+    [data-fs-slide-over-header] {
+      @include media(">=notebook") {
+        padding-right: var(--fs-spacing-6);
+        padding-left: var(--fs-spacing-6);
+      }
+    }
+
+    [data-fs-filter-region-slider-content] {
+      height: 100%;
+      padding: 0 var(--fs-spacing-3);
+
+      @include media(">=notebook") {
+        padding: 0 var(--fs-spacing-6);
+      }
+
+      [data-fs-empty-state] {
+        height: calc(90% - var(--fs-filter-slider-footer-height));
+        padding: 0;
+        color: var(--fs-empty-state-title-color);
+      }
+    }
+
+    [data-fs-filter-region-slider-description] {
+      display: flex;
+      padding: var(--fs-spacing-4) 0;
+      font-size: var(--fs-text-size-2);
+      line-height: 1.25;
+    }
+
+    // Duplicate from data-fs-region-modal-link
+    [data-fs-filter-delivery-link] {
+      display: flex;
+      flex-direction: row;
+      column-gap: var(--fs-filter-link-column-gap);
+      align-content: flex-start;
+      align-items: center;
+      justify-content: flex-start;
+      padding: var(--fs-filter-link-padding);
+      margin-top: var(--fs-spacing-2);
+      color: var(--fs-filter-link-color);
+    }
+  }
+}

package/src/components/search/Filter/FilterDeliveryMethodFacet.tsx

@@ -0,0 +1,68 @@
+import { regionSliderTypes, Button as UIButton, useUI } from '@faststore/ui'
+import { sessionStore } from 'src/sdk/session'
+import type { GlobalCmsData } from 'src/utils/globalSettings'
+import { textToTitleCase } from 'src/utils/utilities'
+
+interface FacetValue {
+  value: string
+  label: string
+  selected: boolean
+  quantity: number
+}
+
+interface FilterDeliveryMethodFacetProps {
+  item: FacetValue
+  deliveryMethods: GlobalCmsData['deliveryPromise']['deliveryMethods']
+}
+
+export default function FilterDeliveryMethodFacet({
+  item,
+  deliveryMethods,
+}: FilterDeliveryMethodFacetProps) {
+  const { city, postalCode } = sessionStore.read()
+  const { openRegionSlider } = useUI()
+
+  const location = city ? `${textToTitleCase(city)}, ${postalCode}` : postalCode
+  const mapDeliveryMethodLabel: Record<string, string> = {
+    delivery: deliveryMethods?.delivery ?? 'Shipping to',
+    'pickup-in-point': deliveryMethods?.pickupInPoint ?? 'Pickup at',
+    'pickup-nearby': deliveryMethods?.pickupNearby ?? 'Pickup Nearby',
+    'pickup-all': deliveryMethods?.pickupAll?.label ?? 'Pickup Anywhere',
+  }
+
+  if (item.value === 'delivery') {
+    return (
+      <>
+        {mapDeliveryMethodLabel[item.value]}
+        <UIButton
+          data-fs-filter-list-item-button
+          size="small"
+          onClick={() => {
+            openRegionSlider(regionSliderTypes.changeLocation)
+          }}
+        >
+          {location}
+        </UIButton>
+      </>
+    )
+  }
+
+  if (item.value === 'pickup-in-point') {
+    return (
+      <>
+        {mapDeliveryMethodLabel[item.value]}
+        <UIButton
+          data-fs-filter-list-item-button
+          size="small"
+          onClick={() => {
+            openRegionSlider(regionSliderTypes.changePickupPoint)
+          }}
+        >
+          {item.label}
+        </UIButton>
+      </>
+    )
+  }
+
+  return <>{mapDeliveryMethodLabel[item.value] ?? item.label}</>
+}