@faststore/core 3.66.0 → 3.68.0

package/src/sdk/deliveryPromise/useDeliveryPromise.ts

@@ -0,0 +1,419 @@
+import deepEquals from 'fast-deep-equal'
+import { useCallback, useEffect, useMemo } from 'react'
+
+import {
+  createStore,
+  toggleFacets,
+  useSearch,
+  type SearchState,
+  type Session,
+} from '@faststore/sdk'
+import type { Filter_FacetsFragment } from '@generated/graphql'
+
+import type { useFilter } from 'src/sdk/search/useFilter'
+import { useSession } from 'src/sdk/session'
+import type { GlobalCmsData } from 'src/utils/globalSettings'
+
+import { deliveryPromise as deliveryPromiseConfig } from 'discovery.config'
+import {
+  initialPickupPointsSimulation,
+  useDeliveryPromiseContext,
+  type PickupPointsSimulation,
+} from '.'
+
+export const PICKUP_POINT_FACET_KEY = 'pickupPoint' as const
+export const SHIPPING_FACET_KEY = 'shipping' as const
+export const PICKUP_IN_POINT_FACET_VALUE = 'pickup-in-point' as const
+export const ALL_DELIVERY_METHODS_FACET_VALUE = 'all-delivery-methods' as const
+export const PICKUP_ALL_FACET_VALUE = 'pickup-all' as const
+
+type Facet = SearchState['selectedFacets'][number]
+
+export type PickupPoint = {
+  id: string
+  name?: string
+  address?: {
+    street?: string
+    number?: string
+    postalCode?: string
+    city?: string
+    state?: string
+  }
+  distance?: number
+  totalItems?: number
+}
+
+export type DeliveryPromiseStore = {
+  pickupPoints?: PickupPoint[]
+  defaultPickupPoint?: PickupPoint | null
+  globalPickupPoint?: PickupPoint | null
+  shouldUpdatePickupPoints?: boolean
+  simulatePickupPoints?: boolean
+  pickupPointsSimulation?: PickupPointsSimulation
+}
+
+const baseStore = createStore<DeliveryPromiseStore>(
+  {
+    pickupPoints: [],
+    defaultPickupPoint: null,
+    globalPickupPoint: null,
+    shouldUpdatePickupPoints: false,
+    pickupPointsSimulation: undefined,
+    simulatePickupPoints: false,
+  },
+  'fs::deliveryPromise'
+)
+
+export const deliveryPromiseStore = {
+  ...baseStore,
+  set: (state: Partial<DeliveryPromiseStore>) => {
+    const oldState = baseStore.read()
+    const newState = { ...oldState, ...state }
+
+    if (!deepEquals(oldState, newState)) {
+      baseStore.set(newState)
+    }
+  },
+}
+
+type Props = {
+  deliveryPromiseSettings?: GlobalCmsData['deliveryPromise']
+  allFacets?: ReturnType<typeof useFilter>['facets']
+  fallbackToFirstPickupPoint?: boolean
+  selectedFilterFacets?: Facet[]
+}
+
+/**
+ * @param fallbackToFirstPickupPoint When true, the first available pickup point will be used as the pickup-in-point facet
+ * when the shopper has not yet explicitly chosen a pickup point.
+ */
+export function useDeliveryPromise({
+  allFacets,
+  selectedFilterFacets = undefined,
+  deliveryPromiseSettings,
+  fallbackToFirstPickupPoint = true,
+}: Props = {}) {
+  const { postalCode } = useSession()
+  const { state: searchState, setState: setSearchState } = useSearch()
+  const {
+    pickupPoints,
+    defaultPickupPoint,
+    globalPickupPoint,
+    pickupPointsSimulation,
+    dispatchDeliveryPromiseAction,
+    shouldUpdatePickupPoints,
+  } = useDeliveryPromiseContext()
+
+  const isDeliveryPromiseEnabled = deliveryPromiseConfig.enabled
+
+  const selectedFacets = useMemo(
+    () => selectedFilterFacets ?? searchState.selectedFacets,
+    [selectedFilterFacets, searchState.selectedFacets]
+  )
+  const selectedPickupPointFacet = useMemo(
+    () =>
+      selectedFacets.find(({ key }) => key === PICKUP_POINT_FACET_KEY)?.value,
+    [selectedFacets]
+  )
+
+  // Update Delivery Promise global state after store changes
+  useEffect(() => {
+    const unsubscribers = [
+      deliveryPromiseStore.subscribe((storeValue) => {
+        dispatchDeliveryPromiseAction({
+          type: 'updateDeliveryPromiseState',
+          payload: storeValue,
+        })
+      }),
+    ]
+
+    return () => {
+      unsubscribers.forEach((unsub) => unsub())
+    }
+  }, [])
+
+  // Set the default selected pickup point based on pickup points list
+  useEffect(() => {
+    if (pickupPoints.length === 0) return
+
+    deliveryPromiseStore.set({
+      defaultPickupPoint: pickupPointByID(selectedPickupPointFacet),
+    })
+  }, [pickupPoints, selectedPickupPointFacet])
+
+  // Validate if should select the global pickup point facet in the first load
+  useEffect(() => {
+    const hasShippingFacetSelected = selectedFacets.some(
+      ({ key }) => key === SHIPPING_FACET_KEY
+    )
+    const shouldSelectGlobalPickupPoint =
+      !!globalPickupPoint && !hasShippingFacetSelected
+
+    if (shouldSelectGlobalPickupPoint) {
+      setSearchState({
+        selectedFacets: toggleFacets(
+          selectedFacets,
+          [
+            { key: SHIPPING_FACET_KEY, value: PICKUP_IN_POINT_FACET_VALUE },
+            {
+              key: PICKUP_POINT_FACET_KEY,
+              value: globalPickupPoint.id,
+            },
+          ],
+          true
+        ),
+        page: 0,
+      })
+    }
+  }, [])
+
+  const pickupPointByID = useCallback(
+    (pickupPointId: string) => {
+      if (!pickupPoints?.length) return
+
+      const preferredPickupPoint =
+        pickupPoints?.find(({ id }) => id === pickupPointId) ??
+        defaultPickupPoint ??
+        globalPickupPoint
+
+      if (fallbackToFirstPickupPoint && !preferredPickupPoint) {
+        return pickupPoints[0]
+      }
+
+      return preferredPickupPoint
+    },
+    [pickupPoints, defaultPickupPoint, globalPickupPoint]
+  )
+
+  const pickupInPointFacet = useMemo(
+    () => ({
+      value: PICKUP_IN_POINT_FACET_VALUE,
+      label: defaultPickupPoint?.name ?? defaultPickupPoint?.address.street,
+      selected: selectedFacets?.some(
+        ({ key, value }) =>
+          value === PICKUP_IN_POINT_FACET_VALUE ||
+          key === PICKUP_POINT_FACET_KEY
+      ),
+      quantity: defaultPickupPoint?.totalItems,
+    }),
+    [defaultPickupPoint, selectedFacets]
+  )
+
+  const allDeliveryMethodsFacet = useMemo(
+    () => ({
+      value: ALL_DELIVERY_METHODS_FACET_VALUE,
+      label:
+        deliveryPromiseSettings?.deliveryMethods?.allDeliveryMethods ??
+        'All delivery methods',
+      selected:
+        !selectedFacets.some((facet) => facet.key === SHIPPING_FACET_KEY) ||
+        selectedFacets?.some(
+          (facet) =>
+            facet.key === SHIPPING_FACET_KEY &&
+            facet.value === ALL_DELIVERY_METHODS_FACET_VALUE
+        ),
+      quantity: 0,
+    }),
+    [selectedFacets, deliveryPromiseSettings, pickupInPointFacet]
+  )
+
+  const onDeliveryFacetChange = useCallback(
+    ({
+      facet = null,
+      facets = [],
+      filterDispatch,
+    }: {
+      facet?: Facet
+      facets?: Facet[]
+      filterDispatch?: ReturnType<typeof useFilter>['dispatch']
+    }) => {
+      let unique = true
+      const facetsToToggle: Facet[] = facets?.length !== 0 ? facets : [facet]
+      let currentSelectedFacets = selectedFacets
+
+      // Toggle `pickup-in-point` and `pickupPoint` facets
+      if (facet?.value === PICKUP_IN_POINT_FACET_VALUE) {
+        facetsToToggle.push({
+          key: PICKUP_POINT_FACET_KEY,
+          value: defaultPickupPoint?.id,
+        })
+      } else {
+        // Toggle previously selected pickupPoint facet
+        unique = isRadioFacet(facet?.key)
+        currentSelectedFacets = currentSelectedFacets.filter(
+          ({ key }) => key !== PICKUP_POINT_FACET_KEY
+        )
+        facetsToToggle.concat(currentSelectedFacets)
+      }
+
+      // Filter Slider should dispatch filter actions
+      if (filterDispatch) {
+        filterDispatch({
+          type: 'toggleFacets',
+          payload: { unique, facets: facetsToToggle },
+        })
+
+        return
+      }
+
+      setSearchState({
+        selectedFacets: toggleFacets(
+          currentSelectedFacets,
+          facetsToToggle,
+          unique
+        ),
+        page: 0,
+      })
+    },
+    [selectedFacets, defaultPickupPoint]
+  )
+
+  const facets = useMemo(() => {
+    if (!allFacets) return []
+
+    return !isDeliveryPromiseEnabled || !postalCode
+      ? allFacets.filter(({ key }) => key !== SHIPPING_FACET_KEY)
+      : allFacets.map((facet) => {
+          if (
+            facet.key !== SHIPPING_FACET_KEY ||
+            facet.__typename !== 'StoreFacetBoolean'
+          )
+            return facet
+
+          facet.values = withUniqueFacet(facet.values, allDeliveryMethodsFacet)
+          const pickupInPointFacetIndex = facet.values.findIndex(
+            (item) => item?.value === PICKUP_IN_POINT_FACET_VALUE
+          )
+
+          // Remove old pickup `pickup in point` facet from list and search state
+          if (pickupInPointFacetIndex !== -1 && !defaultPickupPoint) {
+            const selectedShippingFacet = selectedFacets.find(
+              ({ key }) => key === SHIPPING_FACET_KEY
+            )
+
+            if (selectedShippingFacet) {
+              const selectedPickupInPointFacets = selectedFacets.filter(
+                ({ key, value }) =>
+                  value === PICKUP_IN_POINT_FACET_VALUE ||
+                  key === PICKUP_POINT_FACET_KEY
+              )
+
+              selectedPickupInPointFacets.length
+                ? onDeliveryFacetChange({ facets: selectedPickupInPointFacets })
+                : onDeliveryFacetChange({ facet: selectedShippingFacet })
+            }
+
+            // Removes pickupInPointIndex from array
+            facet.values = facet.values.filter(
+              (_, index) => index !== pickupInPointFacetIndex
+            )
+          }
+          // Prevent multiple `pickup in point` facet
+          else if (pickupInPointFacetIndex === -1 && defaultPickupPoint) {
+            facet.values.push(pickupInPointFacet)
+          }
+          // Replace current `pickup-in-point` facet with the updated one
+          else if (
+            facet.values[pickupInPointFacetIndex] &&
+            facet.values[pickupInPointFacetIndex]?.label !==
+              pickupInPointFacet.label
+          ) {
+            facet.values[pickupInPointFacetIndex] = pickupInPointFacet
+          }
+
+          facet.values = facet.values.sort((a, b) =>
+            (a.value ?? '').localeCompare(b.value ?? '')
+          )
+
+          return facet
+        })
+  }, [
+    allDeliveryMethodsFacet,
+    pickupInPointFacet,
+    allFacets,
+    defaultPickupPoint,
+    globalPickupPoint,
+    pickupPoints,
+    selectedFacets,
+    onDeliveryFacetChange,
+    selectedPickupPointFacet,
+  ])
+
+  const onPostalCodeChange = useCallback(
+    ({
+      simulatePickupPoints = false,
+      validatedSession = null,
+    }: { simulatePickupPoints?: boolean; validatedSession?: Session } = {}) => {
+      const partialSession = {
+        country: validatedSession?.country,
+        postalCode: validatedSession?.postalCode,
+        geoCoordinates: validatedSession?.geoCoordinates,
+      }
+
+      dispatchDeliveryPromiseAction({
+        type: 'onPostalCodeChange',
+        ...(simulatePickupPoints
+          ? {
+              payload: {
+                simulatePickupPoints,
+                validatedSession: { ...partialSession },
+              },
+            }
+          : undefined),
+      })
+    },
+    []
+  )
+
+  const clearPickupPointsSimulation = useCallback(
+    () =>
+      deliveryPromiseStore.set({
+        pickupPointsSimulation: initialPickupPointsSimulation,
+      }),
+    []
+  )
+
+  return {
+    mandatory: deliveryPromiseConfig.mandatory,
+    isEnabled: isDeliveryPromiseEnabled,
+    pickupPoints,
+    defaultPickupPoint,
+    selectedPickupPointFacet,
+    pickupPointsSimulation,
+    clearPickupPointsSimulation,
+    fetchingPickupPoints: shouldUpdatePickupPoints,
+    changePickupPoint: (pickupPoint: PickupPoint) => {
+      deliveryPromiseStore.set({ defaultPickupPoint: pickupPoint })
+    },
+    globalPickupPoint,
+    changeGlobalPickupPoint: (pickupPoint: PickupPoint) => {
+      deliveryPromiseStore.set({ globalPickupPoint: pickupPoint })
+    },
+    pickupPointByID,
+    facets,
+    onPostalCodeChange,
+    onDeliveryFacetChange,
+    deliveryLabel:
+      deliveryPromiseSettings?.deliveryMethods?.title ?? 'Delivery',
+    isPickupAllEnabled:
+      pickupPoints?.length > 0 &&
+      (deliveryPromiseSettings?.deliveryMethods?.pickupAll?.enabled ?? false),
+    shouldDisplayDeliveryButton: isDeliveryPromiseEnabled && !postalCode,
+  }
+}
+
+type BoleanFacet = Extract<
+  Filter_FacetsFragment,
+  { __typename: 'StoreFacetBoolean' }
+>['values'][number]
+
+function withUniqueFacet(facets: Array<BoleanFacet>, facet: BoleanFacet) {
+  return facets.filter((item) => item.value !== facet.value).concat([facet])
+}
+
+const RADIO_FACETS = ['shipping', 'pickupPoint'] as const
+function isRadioFacet(facet: unknown): facet is (typeof RADIO_FACETS)[number] {
+  if (typeof facet !== 'string') return false
+
+  return RADIO_FACETS.some((el) => el === facet)
+}

package/src/sdk/overrides/PageProvider.tsx

@@ -9,26 +9,30 @@ import type { PropsWithChildren } from 'react'
 import { createContext, useContext, useMemo } from 'react'
 import type { SearchPageContextType } from 'src/pages/s'
 
-export interface PDPContext {
+interface PageGlobalContext {
+  globalSettings?: Record<string, unknown>
+}
+
+export interface PDPContext extends PageGlobalContext {
   data?: ServerProductQueryQuery &
     ClientProductQueryQuery['product'] & { isValidating?: boolean }
 }
 
-export interface PLPContext {
+export interface PLPContext extends PageGlobalContext {
   data?: ServerCollectionPageQueryQuery &
     ClientProductGalleryQueryQuery & {
       pages: ClientManyProductsQueryQuery[]
     }
 }
 
-export interface SearchPageContext {
+export interface SearchPageContext extends PageGlobalContext {
   data?: SearchPageContextType &
     ClientProductGalleryQueryQuery & {
       pages: ClientManyProductsQueryQuery[]
     }
 }
 
-export interface DynamicContent<T> {
+export interface DynamicContent<T> extends PageGlobalContext {
   data?: T
 }
 
@@ -37,6 +41,7 @@ export interface PageProviderContextValue {
 }
 
 type PageProviderContext =
+  | PageGlobalContext
   | PDPContext
   | PLPContext
   | SearchPageContext

package/src/sdk/product/useLocalizedVariables.ts

@@ -1,11 +1,18 @@
-import type { ClientManyProductsQueryQueryVariables } from '@generated/graphql'
 import { useMemo } from 'react'
+import deepmerge from 'deepmerge'
+
+import { useSearch, type SearchState } from '@faststore/sdk'
+import type { ClientManyProductsQueryQueryVariables } from '@generated/graphql'
+
+import { useSession } from 'src/sdk/session'
 import { ITEMS_PER_SECTION } from 'src/constants'
-import { useSession } from '../session'
 
 const toArray = <T>(x: T[] | T | undefined) =>
   Array.isArray(x) ? x : x ? [x] : []
 
+// Array merging strategy from deepmerge that makes client arrays overwrite server array
+const overwriteMerge = (_: any[], clientArray: any[]) => clientArray
+
 export const useLocalizedVariables = ({
   first,
   after,
@@ -15,24 +22,31 @@ export const useLocalizedVariables = ({
   sponsoredCount,
 }: Partial<ClientManyProductsQueryQueryVariables>) => {
   const { channel, locale } = useSession()
+  const { state: searchState } = useSearch()
 
-  return useMemo(() => {
-    const facets = toArray(selectedFacets)
+  const mergedSelectedFacets = deepmerge(
+    selectedFacets as SearchState['selectedFacets'],
+    searchState.selectedFacets,
+    {
+      arrayMerge: overwriteMerge,
+    }
+  )
 
+  return useMemo(() => {
     return {
       first: first ?? ITEMS_PER_SECTION,
       after: after ?? '0',
       sort: sort ?? ('score_desc' as const),
       term: term ?? '',
       selectedFacets: [
-        ...facets,
+        ...mergedSelectedFacets,
         { key: 'channel', value: channel ?? '' },
         { key: 'locale', value: locale },
       ],
       sponsoredCount: sponsoredCount ?? 3,
     }
   }, [
-    selectedFacets,
+    mergedSelectedFacets,
     first,
     after,
     sort,

package/src/sdk/search/useFilter.ts

@@ -1,4 +1,4 @@
-import { setFacet, toggleFacet, useSearch } from '@faststore/sdk'
+import { setFacet, toggleFacet, toggleFacets, useSearch } from '@faststore/sdk'
 import { useEffect, useMemo, useReducer } from 'react'
 import type { IStoreSelectedFacet } from '@faststore/api'
 
@@ -22,6 +22,10 @@ type Action =
       type: 'toggleFacet'
       payload: IStoreSelectedFacet
     }
+  | {
+      type: 'toggleFacets'
+      payload: { facets: IStoreSelectedFacet[]; unique?: boolean }
+    }
   | {
       type: 'setFacet'
       payload: { facet: IStoreSelectedFacet; unique?: boolean }
@@ -63,6 +67,13 @@ const reducer = (state: State, action: Action) => {
       }
     }
 
+    case 'toggleFacets': {
+      return {
+        ...state,
+        selected: toggleFacets(state.selected, payload.facets, payload.unique),
+      }
+    }
+
     case 'setFacet': {
       return {
         ...state,

package/src/server/cms/index.ts

@@ -2,6 +2,7 @@ import type { ContentData, ContentTypeOptions, Locator } from '@vtex/client-cms'
 import ClientCMS from '@vtex/client-cms'
 
 import MultipleContentError from 'src/sdk/error/MultipleContentError'
+import { sanitizeHost } from 'src/utils/utilities'
 import config from '../../../discovery.config'
 
 export type Options =
@@ -65,6 +66,7 @@ export const isLocator = (x: any): x is Locator =>
 export const clientCMS = new ClientCMS({
   workspace: config.api.workspace,
   tenant: config.api.storeId,
+  host: sanitizeHost(config.storeUrl),
 })
 
 export const getCMSPage = async (

package/src/typings/overrides.ts

@@ -361,10 +361,11 @@ export type SectionsOverrides = {
     components: {
       RegionBar: ComponentOverrideDefinition<
         RegionBarProps,
-        Omit<RegionBarProps, 'onButtonClick' | 'postalCode'>
+        Omit<RegionBarProps, 'onButtonClick' | 'postalCode' | 'city'>
       >
       LocationIcon: ComponentOverrideDefinition<IconProps, IconProps>
       ButtonIcon: ComponentOverrideDefinition<IconProps, IconProps>
+      FilterButtonIcon: ComponentOverrideDefinition<IconProps, IconProps>
     }
   }
 }

package/src/utils/globalSettings.ts

@@ -0,0 +1,74 @@
+import deepmerge from 'deepmerge'
+import { usePage } from 'src/sdk/overrides/PageProvider'
+
+export type GlobalCmsData = {
+  regionalization?: RegionalizationCmsData
+  deliveryPromise?: DeliveryPromiseCmsData
+}
+
+type RegionalizationCmsData = {
+  inputField?: {
+    label?: string
+    errorMessage?: string
+    noProductsAvailableErrorMessage?: string
+    buttonActionText?: string
+    errorMessageHelper?: string
+  }
+  idkPostalCodeLink?: {
+    text?: string
+    to?: string
+    icon?: {
+      icon?: string
+      alt?: string
+    }
+  }
+}
+
+type DeliveryPromiseCmsData = {
+  deliveryMethods?: {
+    title?: string
+    description?: string
+    setLocationButtonLabel?: string
+    allDeliveryMethods?: string
+    delivery?: string
+    pickupInPoint?: string
+    pickupNearby?: string
+    pickupAll?: {
+      label?: string
+      enabled?: boolean
+    }
+  }
+  regionSlider?: {
+    title?: {
+      setLocation?: string
+      changeLocation?: string
+      changePickupPoint?: string
+      globalChangePickupPoint?: string
+    }
+    pickupPointChangeApplyButtonLabel?: string
+    pickupPointClearFilterButtonLabel?: string
+    choosePickupPointAriaLabel?: string
+    noPickupPointsAvailableInLocation?: string
+  }
+  filterByPickupPoint?: {
+    enabled?: boolean
+    label?: string
+    icon?: {
+      icon?: string
+      alt?: string
+    }
+  }
+}
+
+export function getGlobalSettings(
+  sectionRegionalizationData?: GlobalCmsData['regionalization']
+): GlobalCmsData {
+  const context = usePage()
+  const globalData: GlobalCmsData = context?.globalSettings ?? {}
+
+  if (sectionRegionalizationData === undefined) {
+    return globalData
+  }
+
+  return deepmerge(globalData, { regionalization: sectionRegionalizationData })
+}

package/src/utils/utilities.ts

@@ -75,3 +75,8 @@ export function extractStatusFromError(error: any): number | undefined {
 
   return undefined
 }
+
+export function sanitizeHost(url: string): string {
+  if (!url) return ''
+  return url.replace(/^https?:\/\//, '')
+}

package/test/server/index.test.ts

@@ -80,6 +80,7 @@ const QUERIES = [
   'accountProfile',
   'accountName',
   'validateUser',
+  'pickupPoints',
 ]
 
 const MUTATIONS = [

package/.next/server/chunks/6272.js

@@ -1 +0,0 @@
-"use strict";exports.id=6272,exports.ids=[6272],exports.modules={56272:(e,t,o)=>{o.d(t,{En:()=>isSearchPage,OJ:()=>isPLP,ZP:()=>__WEBPACK_DEFAULT_EXPORT__,al:()=>usePDP,qt:()=>usePage,tS:()=>isPDP});var s=o(16689),a=o(20997);let isPDP=e=>e?.data?.product?.sku!=void 0&&e?.data?.product?.sku!=null,isPLP=e=>e?.data?.collection?.seo!=void 0&&e?.data?.collection?.seo!=null&&e?.data?.collection?.sku==void 0,isSearchPage=e=>void 0===e||e?.data?.title!=void 0||e?.data?.searchTerm!=void 0,i=(0,s.createContext)(null);function usePage(){let{context:e}=(0,s.useContext)(i);if(null==e)throw Error("Missing Overrides context on React tree");return e}let usePDP=()=>usePage(),__WEBPACK_DEFAULT_EXPORT__=function({context:e,children:t}){let o=(0,s.useMemo)(()=>({context:e}),[e]);return a.jsx(i.Provider,{value:o,children:t})}}};