@faststore/core 3.66.0 → 3.68.0

package/cms/faststore/sections.json

@@ -2142,7 +2142,7 @@
       "required": ["label"],
       "properties": {
         "icon": {
-          "title": "Location Icon",
+          "title": "Location icon",
           "type": "object",
           "properties": {
             "icon": {
@@ -2153,7 +2153,7 @@
               "default": "MapPin"
             },
             "alt": {
-              "title": "Alternative Label",
+              "title": "Alternative label",
               "type": "string",
               "default": "Map Pin icon"
             }
@@ -2167,7 +2167,8 @@
         "editLabel": {
           "title": "Location edit label",
           "type": "string",
-          "default": "Edit"
+          "default": "",
+          "description": "[Deprecated] This label should not be used anymore."
         },
         "buttonIcon": {
           "title": "Button Icon",
@@ -2219,24 +2220,23 @@
           "properties": {
             "label": {
               "title": "Input field label",
-              "type": "string",
-              "default": "Postal Code"
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections",
+              "type": "string"
             },
             "errorMessage": {
               "title": "Input field error message",
-              "type": "string",
-              "default": "You entered an invalid Postal Code"
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections",
+              "type": "string"
             },
             "noProductsAvailableErrorMessage": {
               "title": "Input field error message for the scenario of no products available for a given location",
-              "type": "string",
-              "default": "There are no products available for %s.",
-              "description": "The '%s' will be replaced by the postal code value."
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections The '%s' is replaced by the postal code value.",
+              "type": "string"
             },
             "buttonActionText": {
               "title": "Input field action button label",
-              "type": "string",
-              "default": "Apply"
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections",
+              "type": "string"
             }
           }
         },
@@ -2247,11 +2247,12 @@
             "text": {
               "type": "string",
               "title": "Link Text",
-              "default": "I don't know my Postal Code"
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections"
             },
             "to": {
               "type": "string",
-              "title": "Action link"
+              "title": "Action link",
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections"
             },
             "icon": {
               "title": "Icon",
@@ -2259,15 +2260,15 @@
               "properties": {
                 "icon": {
                   "title": "Icon",
+                  "description": "[Deprecated] Use the fields from the Settings tab in Global Sections",
                   "type": "string",
                   "enumNames": ["Arrow Square Out"],
-                  "enum": ["ArrowSquareOut"],
-                  "default": "ArrowSquareOut"
+                  "enum": ["ArrowSquareOut"]
                 },
                 "alt": {
                   "title": "Alternative Label",
-                  "type": "string",
-                  "default": "Arrow Square Out icon"
+                  "description": "[Deprecated] Use the fields from the Settings tab in Global Sections",
+                  "type": "string"
                 }
               }
             }
@@ -2300,24 +2301,23 @@
           "properties": {
             "label": {
               "title": "Input field label",
-              "type": "string",
-              "default": "Postal Code"
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections",
+              "type": "string"
             },
             "errorMessage": {
               "title": "Input field error message",
-              "type": "string",
-              "default": "You entered an invalid Postal Code"
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections",
+              "type": "string"
             },
             "noProductsAvailableErrorMessage": {
               "title": "Input field error message for the scenario of no products available for a given location",
-              "type": "string",
-              "default": "There are no products available for %s.",
-              "description": "The '%s' will be replaced by the postal code value."
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections The '%s' is replaced by the postal code value.",
+              "type": "string"
             },
             "buttonActionText": {
               "title": "Input field action button label",
-              "type": "string",
-              "default": "Apply"
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections",
+              "type": "string"
             }
           }
         },
@@ -2345,11 +2345,12 @@
             "text": {
               "type": "string",
               "title": "Link Text",
-              "default": "I don't know my Postal Code"
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections"
             },
             "to": {
               "type": "string",
-              "title": "Action link"
+              "title": "Action link",
+              "description": "[Deprecated] Use the fields from the Settings tab in Global Sections"
             },
             "icon": {
               "title": "Icon",
@@ -2357,15 +2358,15 @@
               "properties": {
                 "icon": {
                   "title": "Icon",
+                  "description": "[Deprecated] Use the fields from the Settings tab in Global Sections",
                   "type": "string",
                   "enumNames": ["Arrow Square Out"],
-                  "enum": ["ArrowSquareOut"],
-                  "default": "ArrowSquareOut"
+                  "enum": ["ArrowSquareOut"]
                 },
                 "alt": {
                   "title": "Alternative Label",
-                  "type": "string",
-                  "default": "Arrow Square Out icon"
+                  "description": "[Deprecated] Use the fields from the Settings tab in Global Sections",
+                  "type": "string"
                 }
               }
             }

package/cypress/integration/plp.test.js

@@ -3,8 +3,8 @@
  * Cypress tests for PLP
  */
 
-import { options } from '../global'
 import { cypress } from '../../discovery.config'
+import { options } from '../global'
 
 const { pages } = cypress
 
@@ -33,7 +33,7 @@ describe('Search page Filters and Sorting options', () => {
         const value = $checkbox.attr('data-value')
         // const quantity = $checkbox.attr('data-quantity')
 
-        cy.getById('filter-slider-button-apply')
+        cy.getById('fs-filter-slider-button-apply')
           .click()
 
           .then(() => {

package/index.ts

@@ -26,3 +26,12 @@ export { default as ProductGallerySection } from './src/components/sections/Prod
 export { default as ProductShelfSection } from './src/components/sections/ProductShelf'
 export { default as RegionBarSection } from './src/components/sections/RegionBar'
 export { default as Section } from './src/components/sections/Section'
+
+// Delivery Promise
+export {
+  PICKUP_IN_POINT_FACET_VALUE,
+  PICKUP_POINT_FACET_KEY,
+  SHIPPING_FACET_KEY,
+  PICKUP_ALL_FACET_VALUE,
+  getPickupPoints,
+} from './src/sdk/deliveryPromise'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.66.0",
+  "version": "3.68.0",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -44,11 +44,11 @@
     "@envelop/graphql-jit": "^8.0.3",
     "@envelop/parser-cache": "^6.0.2",
     "@envelop/validation-cache": "^6.0.2",
-    "@faststore/api": "^3.66.0",
+    "@faststore/api": "^3.68.0",
     "@faststore/graphql-utils": "^3.56.1",
     "@faststore/lighthouse": "^3.56.1",
-    "@faststore/sdk": "^3.63.0",
-    "@faststore/ui": "^3.65.0",
+    "@faststore/sdk": "^3.68.0",
+    "@faststore/ui": "^3.68.0",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
     "@graphql-codegen/typescript": "4.0.7",
@@ -60,7 +60,7 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "@parcel/watcher": "^2.4.0",
     "@types/react": "^18.2.42",
-    "@vtex/client-cms": "^0.2.12",
+    "@vtex/client-cms": "^0.2.16",
     "@vtex/client-cp": "0.3.0",
     "@vtex/prettier-config": "1.0.0",
     "autoprefixer": "^10.4.0",
@@ -107,5 +107,5 @@
     "ts-jest": "29.1.1",
     "typescript": "5.3.2"
   },
-  "gitHead": "df3a172b06dc2e5759067eeed6dd13905003b7d7"
+  "gitHead": "ecc700eec58eaa22c6ae8c5f655c204ecf18f598"
 }

package/src/components/cms/GlobalSections.tsx

@@ -10,6 +10,7 @@ export const GLOBAL_SECTIONS_FOOTER_CONTENT_TYPE = 'globalFooterSections'
 
 export type GlobalSectionsData = {
   sections: Section[]
+  settings?: Record<string, unknown>
 }
 
 export const getGlobalSectionsByType = async (

package/src/components/cms/RenderSections.tsx

@@ -12,9 +12,9 @@ import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import useTTI from 'src/sdk/performance/useTTI'
 import { isContentPlatformSource } from 'src/server/content/utils'
+import COMPONENTS from './global/Components'
 import SectionBoundary from './SectionBoundary'
 import ViewportObserver from './ViewportObserver'
-import COMPONENTS from './global/Components'
 
 interface Props {
   components?: Record<string, ComponentType<any>>
@@ -23,7 +23,7 @@ interface Props {
   isInteractive?: boolean
 }
 
-const SECTIONS_OUT_OF_VIEWPORT = ['CartSidebar', 'RegionModal']
+const SECTIONS_OUT_OF_VIEWPORT = ['CartSidebar', 'RegionModal', 'RegionSlider']
 
 const Toast = dynamic(
   () => import(/* webpackChunkName: "Toast" */ '../common/Toast'),
@@ -67,12 +67,16 @@ export const LazyLoadingSection = ({
   debug?: boolean
   isInteractive?: boolean
 }) => {
-  const { cart: displayCart, modal: displayModal } = useUI()
+  const { cart: displayCart, modal: displayModal, regionSlider } = useUI()
+
   if (SECTIONS_OUT_OF_VIEWPORT.includes(sectionName)) {
     const shouldLoad =
       isInteractive ||
       (sectionName === 'CartSidebar' && displayCart) ||
-      (sectionName === 'RegionModal' && displayModal)
+      (sectionName === 'RegionModal' && displayModal) ||
+      (sectionName === 'RegionSlider' &&
+        regionSlider.isOpen &&
+        regionSlider.type !== 'none')
 
     if (debug) {
       console.log(

package/src/components/cms/global/Components.ts

@@ -28,6 +28,13 @@ const Footer = dynamic(
     import(/* webpackChunkName: "Footer" */ 'src/components/sections/Footer'),
   { ssr: false }
 )
+const RegionSlider = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "RegionSlider" */ 'src/components/region/RegionSlider'
+    ),
+  { ssr: false }
+)
 
 const COMPONENTS: Record<string, ComponentType<any>> = {
   Alert,
@@ -36,6 +43,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   RegionPopover,
   CartSidebar, // out of viewport
   RegionModal, // out of viewport
+  RegionSlider, // out of viewport
   Footer, // out of viewport
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,

package/src/components/common/PreviewTag/section.module.scss

@@ -5,12 +5,12 @@
     @import "@faststore/ui/src/components/molecules/Tag/styles.scss";
 
     [data-fs-preview-tag] {
-      box-shadow: var(--fs-shadow-darker);
-      backdrop-filter: blur(var(--fs-spacing-1));
       position: fixed;
       top: 1rem;
       right: 1rem;
       z-index: 10000;
+      box-shadow: var(--fs-shadow-darker);
+      backdrop-filter: blur(var(--fs-spacing-1));
     }
   }
 }

package/src/components/navigation/Navbar/Navbar.tsx

@@ -1,20 +1,19 @@
 import { useCallback, useRef, useState } from 'react'
+import dynamic from 'next/dynamic'
 
 import { Icon as UIIcon, useScrollDirection, useUI } from '@faststore/ui'
 
 import type { SearchInputRef } from 'src/components/search/SearchInput'
 import SearchInput from 'src/components/search/SearchInput'
-
 import CartToggle from 'src/components/cart/CartToggle'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
-import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
-
-import storeConfig from 'discovery.config'
-import dynamic from 'next/dynamic'
 import { OrganizationSignInButton } from 'src/components/account/MyAccountDrawer/OrganizationSignInButton'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { useSession } from 'src/sdk/session'
 import useScreenResize from 'src/sdk/ui/useScreenResize'
+
+import storeConfig from 'discovery.config'
 import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
 
 const NavbarLinks = dynamic(
@@ -101,7 +100,7 @@ function Navbar({
   const scrollDirection = useScrollDirection()
   const { openNavbar, navbar: displayNavbar } = useUI()
   const { isDesktop, isMobile } = useScreenResize()
-  const { person, b2b } = useSession()
+  const { b2b } = useSession()
 
   const searchMobileRef = useRef<SearchInputRef>(null)
   const [searchExpanded, setSearchExpanded] = useState(false)

package/src/components/navigation/NavbarLinks/NavbarLinks.tsx

@@ -1,13 +1,19 @@
 import type { AnchorHTMLAttributes } from 'react'
+import { useRouter } from 'next/router'
 
-import type { NavbarLinksProps as UINavbarLinksProps } from '@faststore/ui'
-import { NavbarLinksListItem as UINavbarLinksListItem } from '@faststore/ui'
+import {
+  NavbarLinksListItem as UINavbarLinksListItem,
+  type NavbarLinksProps as UINavbarLinksProps,
+} from '@faststore/ui'
 
 import type { NavbarProps } from 'src/components/navigation/Navbar'
 import RegionButton from 'src/components/region/RegionButton'
+import RegionFilterButton from 'src/components/region/RegionFilterButton'
 import Link from 'src/components/ui/Link'
-
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { useSession } from 'src/sdk/session'
+import { useDeliveryPromise } from 'src/sdk/deliveryPromise'
+import { getGlobalSettings } from 'src/utils/globalSettings'
 
 interface NavbarLinksProps extends UINavbarLinksProps {
   links: NavbarProps['links']
@@ -26,18 +32,31 @@ function NavbarLinks({
 }: NavbarLinksProps) {
   const { NavbarLinks: NavbarLinksWrapper, NavbarLinksList } =
     useOverrideComponents<'Navbar'>()
+  const router = useRouter()
+  const { postalCode } = useSession()
+  const {
+    deliveryPromise: { filterByPickupPoint } = {},
+  } = getGlobalSettings()
+  const { isEnabled: isDeliveryPromiseEnabled } = useDeliveryPromise()
+
+  const shouldDisplayGlobalFilter =
+    isDeliveryPromiseEnabled && !!postalCode && filterByPickupPoint?.enabled
+
   return (
     <NavbarLinksWrapper.Component {...otherProps} {...NavbarLinksWrapper.props}>
       <div data-fs-navbar-links-wrapper data-fs-content="navbar">
         {shouldDisplayRegion && (
           <RegionButton icon={regionIcon} label={regionLabel} />
         )}
+        {shouldDisplayGlobalFilter && (
+          <RegionFilterButton filterByPickupPoint={filterByPickupPoint} />
+        )}
         <NavbarLinksList.Component {...NavbarLinksList.props}>
           {links.map(({ url, text }) => (
             <UINavbarLinksListItem key={text}>
               <Link
                 variant="display"
-                href={url}
+                href={router.asPath.includes(url) ? '#' : url}
                 prefetch={false}
                 onClick={onClickLink}
               >

package/src/components/region/RegionBar/RegionBar.tsx

@@ -1,18 +1,23 @@
-import type { RegionBarProps as UIRegionBarProps } from '@faststore/ui'
+import {
+  regionSliderTypes,
+  type RegionBarProps as UIRegionBarProps,
+} from '@faststore/ui'
 import { useEffect, useRef } from 'react'
 
 import { useUI } from '@faststore/ui'
 import { useSession } from 'src/sdk/session'
+import { useDeliveryPromise } from 'src/sdk/deliveryPromise'
 
 import { deliveryPromise, session as initialSession } from 'discovery.config'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { textToTitleCase } from 'src/utils/utilities'
+import { getGlobalSettings } from 'src/utils/globalSettings'
 
 import { useRegionModal } from '../RegionModal/useRegionModal'
 
 export interface RegionBarProps {
   /**
-   * A React component that will be rendered as an icon.
+   * A React component that will be rendered as the location icon.
    */
   icon?: {
     icon: string
@@ -24,6 +29,7 @@ export interface RegionBarProps {
   label: UIRegionBarProps['label']
   /**
    * Specifies a label for the edit text.
+   * @deprecated
    */
   editLabel?: UIRegionBarProps['editLabel']
   /**
@@ -37,24 +43,31 @@ export interface RegionBarProps {
 
 function RegionBar({
   icon: { icon: locationIcon, alt: locationIconAlt },
-  buttonIcon: { icon: buttonIcon, alt: buttonIconAlt },
-  label,
-  editLabel,
+  buttonIcon = undefined,
+  label: locationLabel,
+  editLabel = undefined,
   ...otherProps
 }: RegionBarProps) {
   const {
     RegionBar: RegionBarWrapper,
     LocationIcon,
     ButtonIcon,
+    FilterButtonIcon,
   } = useOverrideComponents<'RegionBar'>()
 
-  const { openModal, openPopover } = useUI()
+  const { openModal, openPopover, openRegionSlider } = useUI()
   const { city, postalCode } = useSession()
   const { isValidationComplete } = useRegionModal()
+  const { globalPickupPoint } = useDeliveryPromise()
+  const {
+    deliveryPromise: { filterByPickupPoint } = {},
+  } = getGlobalSettings()
   const regionBarRef = useRef<HTMLDivElement>(null)
 
   const defaultPostalCode =
     !!initialSession?.postalCode && postalCode === initialSession.postalCode
+  const shouldDisplayGlobalFilter =
+    deliveryPromise.enabled && !!postalCode && filterByPickupPoint?.enabled
 
   // If location is not mandatory, and default zipCode is provided or if the user has not set a zipCode, show the popover.
   const displayRegionPopover =
@@ -87,14 +100,37 @@ function RegionBar({
         />
       }
       buttonIcon={
-        <ButtonIcon.Component
-          {...ButtonIcon.props}
-          name={buttonIcon ?? ButtonIcon.props.name}
-          aria-label={buttonIconAlt ?? ButtonIcon.props['aria-label']}
-        />
+        buttonIcon?.icon ? (
+          <ButtonIcon.Component
+            {...ButtonIcon.props}
+            name={buttonIcon?.icon ?? ButtonIcon.props.name}
+            aria-label={buttonIcon?.alt ?? ButtonIcon.props['aria-label']}
+          />
+        ) : undefined
       }
+      filterButton={{
+        label: filterByPickupPoint?.label,
+        icon: (
+          <FilterButtonIcon.Component
+            {...FilterButtonIcon.props}
+            name={
+              filterByPickupPoint?.icon?.icon ?? FilterButtonIcon.props.name
+            }
+            aria-label={
+              filterByPickupPoint?.icon?.alt ??
+              FilterButtonIcon.props['aria-label']
+            }
+          />
+        ),
+        selectedFilter:
+          (globalPickupPoint?.name || globalPickupPoint?.address?.street) ??
+          undefined,
+        shouldDisplayFilterButton: shouldDisplayGlobalFilter,
+        onClick: () =>
+          openRegionSlider(regionSliderTypes.globalChangePickupPoint),
+      }}
       {...RegionBarWrapper.props}
-      label={label ?? RegionBarWrapper.props.label}
+      label={locationLabel ?? RegionBarWrapper.props.label}
       editLabel={editLabel ?? RegionBarWrapper.props.editLabel}
       // Dynamic props shouldn't be overridable
       // This decision can be reviewed later if needed

package/src/components/region/RegionFilterButton/RegionFilterButton.tsx

@@ -0,0 +1,57 @@
+import { useRef } from 'react'
+
+import {
+  Button as UIButton,
+  Icon as UIIcon,
+  useUI,
+  regionSliderTypes,
+} from '@faststore/ui'
+
+import { useDeliveryPromise } from 'src/sdk/deliveryPromise'
+
+type RegionFilterButtonProps = {
+  filterByPickupPoint?: {
+    enabled?: boolean
+    label?: string
+    icon?: {
+      icon?: string
+      alt?: string
+    }
+  }
+}
+
+function RegionFilterButton({
+  filterByPickupPoint: {
+    label: filterByPickupPointLabel,
+    icon: { icon: filterByPickupPointIcon, alt: filterByPickupPointAlt } = {},
+  } = {},
+}: RegionFilterButtonProps) {
+  const { openRegionSlider } = useUI()
+  const { globalPickupPoint } = useDeliveryPromise()
+  const regionFilterButtonRef = useRef<HTMLButtonElement>(null)
+
+  return (
+    <UIButton
+      variant="tertiary"
+      size="small"
+      icon={
+        <UIIcon
+          name={filterByPickupPointIcon}
+          width={18}
+          height={18}
+          weight="bold"
+          aria-label={filterByPickupPointAlt}
+        />
+      }
+      iconPosition="left"
+      onClick={() =>
+        openRegionSlider(regionSliderTypes.globalChangePickupPoint)
+      }
+      ref={regionFilterButtonRef}
+    >
+      {globalPickupPoint?.name ?? filterByPickupPointLabel}
+    </UIButton>
+  )
+}
+
+export default RegionFilterButton

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

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

package/src/components/region/RegionModal/RegionModal.tsx

@@ -5,10 +5,12 @@ import type { RegionModalProps as UIRegionModalProps } from '@faststore/ui'
 import { Icon, useUI } from '@faststore/ui'
 
 import { deliveryPromise } from 'discovery.config'
+import { useDeliveryPromise } from 'src/sdk/deliveryPromise'
 import { useSession } from 'src/sdk/session'
 
 import useRegion from './useRegion'
 
+import { getGlobalSettings } from 'src/utils/globalSettings'
 import styles from './section.module.scss'
 
 const UIRegionModal = dynamic<UIRegionModalProps>(
@@ -38,22 +40,29 @@ interface RegionModalProps {
   }
 }
 
-function RegionModal({
-  title,
-  description,
-  closeButtonAriaLabel,
-  inputField: {
-    label: inputFieldLabel,
-    errorMessage: inputFieldErrorMessage,
-    noProductsAvailableErrorMessage: inputFieldNoProductsAvailableErrorMessage,
-    buttonActionText: inputButtonActionText,
-  },
-  idkPostalCodeLink: {
-    text: idkPostalCodeLinkText,
-    to: idkPostalCodeLinkTo,
-    icon: { icon: idkPostalCodeLinkIcon, alt: idkPostalCodeLinkIconAlt },
-  },
-}: RegionModalProps) {
+function RegionModal(regionModalProps: RegionModalProps) {
+  const { onPostalCodeChange } = useDeliveryPromise()
+  const { title, description, closeButtonAriaLabel, ...otherRegionModalProps } =
+    regionModalProps
+  const cmsData = getGlobalSettings(otherRegionModalProps)
+  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 { modal: displayModal, closeModal } = useUI()
@@ -70,6 +79,7 @@ function RegionModal({
     await setRegion({
       session,
       onSuccess: () => {
+        onPostalCodeChange()
         setInput('')
         closeModal()
       },