@faststore/core 3.43.0 → 3.44.0

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

@@ -1,9 +1,14 @@
 import type { RegionBarProps as UIRegionBarProps } from '@faststore/ui'
+import { useEffect, useRef } from 'react'
 
 import { useUI } from '@faststore/ui'
 import { useSession } from 'src/sdk/session'
 
+import { deliveryPromise, session as initialSession } from 'discovery.config'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+import { textToTitleCase } from 'src/utils/utilities'
+
+import { useRegionModal } from '../RegionModal/useRegionModal'
 
 export interface RegionBarProps {
   /**
@@ -43,8 +48,34 @@ function RegionBar({
     ButtonIcon,
   } = useOverrideComponents<'RegionBar'>()
 
-  const { openModal } = useUI()
-  const { postalCode } = useSession()
+  const { openModal, openPopover } = useUI()
+  const { city, postalCode } = useSession()
+  const { isValidationComplete } = useRegionModal()
+  const regionBarRef = useRef<HTMLDivElement>(null)
+
+  const defaultPostalCode =
+    !!initialSession?.postalCode && postalCode === initialSession.postalCode
+
+  // If location is not mandatory, and default zipCode is provided or if the user has not set a zipCode, show the popover.
+  const displayRegionPopover =
+    defaultPostalCode || (!postalCode && !deliveryPromise.mandatory)
+
+  useEffect(() => {
+    if (!deliveryPromise.enabled) {
+      return
+    }
+
+    if (!isValidationComplete) {
+      return
+    }
+
+    if (isValidationComplete && displayRegionPopover && regionBarRef.current) {
+      openPopover({
+        isOpen: true,
+        triggerRef: regionBarRef,
+      })
+    }
+  }, [isValidationComplete])
 
   return (
     <RegionBarWrapper.Component
@@ -69,7 +100,9 @@ function RegionBar({
       // This decision can be reviewed later if needed
       onButtonClick={openModal}
       postalCode={postalCode}
+      city={textToTitleCase(city ?? '')}
       {...otherProps}
+      ref={regionBarRef}
     />
   )
 }

package/src/components/region/RegionButton/RegionButton.tsx

@@ -1,21 +1,56 @@
-import { Button as UIButton } from '@faststore/ui'
+import { useEffect, useRef } from 'react'
 
-import { Icon, useUI } from '@faststore/ui'
+import { Button as UIButton, Icon as UIIcon, useUI } from '@faststore/ui'
+import { deliveryPromise, session as initialSession } from 'discovery.config'
 import { useSession } from 'src/sdk/session'
+import { textToTitleCase } from 'src/utils/utilities'
+
+import { useRegionModal } from '../RegionModal/useRegionModal'
 
 function RegionButton({ icon, label }: { icon: string; label: string }) {
-  const { openModal } = useUI()
-  const { postalCode } = useSession()
+  const { openModal, openPopover } = useUI()
+  const { city, postalCode } = useSession()
+  const { isValidationComplete } = useRegionModal()
+  const regionButtonRef = useRef<HTMLButtonElement>(null)
+
+  const defaultPostalCode =
+    !!initialSession?.postalCode && postalCode === initialSession.postalCode
+
+  // If location is not mandatory, and default zipCode is provided or if the user has not set a zipCode, show the popover.
+  const displayRegionPopover =
+    defaultPostalCode || (!postalCode && !deliveryPromise.mandatory)
+
+  useEffect(() => {
+    if (!deliveryPromise.enabled) {
+      return
+    }
+
+    if (!isValidationComplete) {
+      return
+    }
+
+    if (
+      isValidationComplete &&
+      displayRegionPopover &&
+      regionButtonRef.current
+    ) {
+      openPopover({
+        isOpen: true,
+        triggerRef: regionButtonRef,
+      })
+    }
+  }, [isValidationComplete])
 
   return (
     <UIButton
       variant="tertiary"
       size="small"
-      icon={<Icon name={icon} width={18} height={18} weight="bold" />}
+      icon={<UIIcon name={icon} width={18} height={18} weight="bold" />}
       iconPosition="left"
       onClick={openModal}
+      ref={regionButtonRef}
     >
-      {postalCode ?? label}
+      {city && postalCode ? `${textToTitleCase(city)}, ${postalCode}` : label}
     </UIButton>
   )
 }

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

@@ -1,13 +1,14 @@
-import {
-  Icon,
-  type RegionModalProps as UIRegionModalProps,
-  useUI,
-} from '@faststore/ui'
+import dynamic from 'next/dynamic'
 import { useRef, useState } from 'react'
 
-import { sessionStore, useSession, validateSession } from 'src/sdk/session'
+import type { RegionModalProps as UIRegionModalProps } from '@faststore/ui'
+import { Icon, useUI } from '@faststore/ui'
+
+import { deliveryPromise } from 'discovery.config'
+import { useSession } from 'src/sdk/session'
+
+import useRegion from './useRegion'
 
-import dynamic from 'next/dynamic'
 import styles from './section.module.scss'
 
 const UIRegionModal = dynamic<UIRegionModalProps>(
@@ -17,7 +18,6 @@ const UIRegionModal = dynamic<UIRegionModalProps>(
     ),
   { ssr: false }
 )
-
 interface RegionModalProps {
   title?: UIRegionModalProps['title']
   description?: UIRegionModalProps['description']
@@ -25,6 +25,8 @@ interface RegionModalProps {
   inputField?: {
     label?: UIRegionModalProps['inputLabel']
     errorMessage?: UIRegionModalProps['errorMessage']
+    noProductsAvailableErrorMessage?: UIRegionModalProps['errorMessage']
+    buttonActionText?: UIRegionModalProps['inputButtonActionText']
   }
   idkPostalCodeLink?: {
     text?: string
@@ -40,7 +42,12 @@ function RegionModal({
   title,
   description,
   closeButtonAriaLabel,
-  inputField: { label: inputFieldLabel, errorMessage: inputFieldErrorMessage },
+  inputField: {
+    label: inputFieldLabel,
+    errorMessage: inputFieldErrorMessage,
+    noProductsAvailableErrorMessage: inputFieldNoProductsAvailableErrorMessage,
+    buttonActionText: inputButtonActionText,
+  },
   idkPostalCodeLink: {
     text: idkPostalCodeLinkText,
     to: idkPostalCodeLinkTo,
@@ -49,35 +56,33 @@ function RegionModal({
 }: RegionModalProps) {
   const inputRef = useRef<HTMLInputElement>(null)
   const { isValidating, ...session } = useSession()
-  const [errorMessage, setErrorMessage] = useState<string>('')
+  const { modal: displayModal, closeModal } = useUI()
+
   const [input, setInput] = useState<string>('')
-  const { modal: displayModal } = useUI()
 
-  const handleSubmit = async () => {
-    const postalCode = inputRef.current?.value
+  const { loading, setRegion, regionError, setRegionError } = useRegion()
 
-    if (typeof postalCode !== 'string') {
+  const handleSubmit = async () => {
+    if (isValidating) {
       return
     }
 
-    setErrorMessage('')
-
-    try {
-      const newSession = {
-        ...session,
-        postalCode,
-      }
-
-      const validatedSession = await validateSession(newSession)
-
-      sessionStore.set(validatedSession ?? newSession)
-    } catch (error) {
-      setErrorMessage(inputFieldErrorMessage)
-    }
+    await setRegion({
+      session,
+      onSuccess: () => {
+        setInput('')
+        closeModal()
+      },
+      postalCode: input,
+      errorMessage: inputFieldErrorMessage,
+      noProductsAvailableErrorMessage:
+        inputFieldNoProductsAvailableErrorMessage,
+    })
   }
 
+  const isDismissible = !!(!deliveryPromise?.mandatory || session.postalCode)
   const idkPostalCodeLinkProps: UIRegionModalProps['idkPostalCodeLinkProps'] = {
-    href: idkPostalCodeLinkTo ?? '#',
+    href: idkPostalCodeLinkTo,
     children: (
       <>
         {idkPostalCodeLinkText}
@@ -106,15 +111,22 @@ function RegionModal({
           inputRef={inputRef}
           inputValue={input}
           inputLabel={inputFieldLabel}
-          errorMessage={errorMessage}
-          idkPostalCodeLinkProps={idkPostalCodeLinkProps}
+          errorMessage={regionError}
+          idkPostalCodeLinkProps={
+            idkPostalCodeLinkTo ? idkPostalCodeLinkProps : null
+          }
           onInput={(e) => {
-            errorMessage !== '' && setErrorMessage('')
+            regionError !== '' && setRegionError('')
             setInput(e.currentTarget.value)
           }}
           onSubmit={handleSubmit}
-          fadeOutOnSubmit={true}
-          onClear={() => setInput('')}
+          fadeOutOnSubmit={false}
+          onClear={() => {
+            setInput('')
+            setRegionError('')
+          }}
+          inputButtonActionText={loading ? '...' : inputButtonActionText}
+          dismissible={isDismissible}
         />
       )}
     </>

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

@@ -0,0 +1,79 @@
+import { useCallback, 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'
+
+type SetRegionProps = {
+  session: Session
+  postalCode: string | undefined
+  onSuccess?: () => void
+  errorMessage: string
+  noProductsAvailableErrorMessage?: string
+}
+
+type UseRegionValues = {
+  loading: boolean
+  regionError: string
+  setRegion: (props: SetRegionProps) => Promise<void>
+  setRegionError: (value: string) => void
+}
+
+export default function useRegion(): UseRegionValues {
+  const [loading, setLoading] = useState<boolean>(false)
+  const [regionError, setRegionError] = useState<string>('')
+
+  const setRegion = async ({
+    postalCode,
+    errorMessage,
+    session,
+    onSuccess,
+    noProductsAvailableErrorMessage,
+  }: SetRegionProps) => {
+    if (typeof postalCode !== 'string') {
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      const newSession = {
+        ...session,
+        postalCode,
+        geoCoordinates: null, // Revalidate geo coordinates in API when users set a new postal code
+      } as Session
+
+      const validatedSession = await validateSession(newSession)
+
+      if (deliveryPromise.enabled) {
+        // 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)
+          setLoading(false)
+          return
+        }
+      }
+
+      sessionStore.set(validatedSession ?? newSession)
+      setRegionError('')
+      onSuccess?.() // Execute the post-validation action (close modal, etc.)
+    } catch (error) {
+      setRegionError(errorMessage)
+    } finally {
+      setLoading(false) // Reset loading to false when validation is complete
+    }
+  }
+
+  return {
+    loading,
+    setRegion,
+    regionError,
+    setRegionError,
+  }
+}

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

@@ -0,0 +1,44 @@
+import { useUI } from '@faststore/ui'
+import { deliveryPromise } from 'discovery.config'
+import { useEffect, useRef, useState } from 'react'
+import { sessionStore, useSession } from 'src/sdk/session'
+
+export function useRegionModal() {
+  const { openModal: displayRegionModal } = useUI()
+  const { isValidating } = useSession()
+
+  // Ref to track the previous value of isValidating
+  const prevIsValidating = useRef(isValidating)
+
+  // State to track if validation is complete
+  const [isValidationComplete, setValidationComplete] = useState(false)
+
+  const openRegionModal = () => {
+    const { postalCode } = sessionStore.read()
+    if (!postalCode) {
+      displayRegionModal()
+    }
+  }
+
+  // Effect to handle when isValidating changes from true to false
+  useEffect(() => {
+    if (!deliveryPromise.enabled) {
+      return
+    }
+
+    // Check if validation has completed (isValidating changed from true to false)
+    if (prevIsValidating.current && !isValidating) {
+      setValidationComplete(true)
+
+      // If the postal code is not set and is mandatory, open the region modal
+      if (deliveryPromise.mandatory) {
+        openRegionModal()
+      }
+    }
+
+    // Update the previous value of isValidating
+    prevIsValidating.current = isValidating
+  }, [openRegionModal])
+
+  return { openRegionModal, isValidationComplete }
+}

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

@@ -0,0 +1,174 @@
+import type { PopoverProps as UIPopoverProps } from '@faststore/ui'
+import {
+  Icon as UIIcon,
+  InputField as UIInputField,
+  Link as UILink,
+  Popover as UIPopover,
+  useUI,
+} from '@faststore/ui'
+import { useRef, useState } from 'react'
+
+import useRegion from '../RegionModal/useRegion'
+
+import { sessionStore, useSession } from 'src/sdk/session'
+import { textToTitleCase } from 'src/utils/utilities'
+import styles from './section.module.scss'
+
+interface RegionPopoverProps {
+  title?: UIPopoverProps['title']
+  closeButtonAriaLabel?: UIPopoverProps['closeButtonAriaLabel']
+  inputField?: {
+    label?: string
+    errorMessage?: string
+    noProductsAvailableErrorMessage?: string
+    buttonActionText?: string
+  }
+  idkPostalCodeLink?: {
+    text?: string
+    to?: string
+    icon?: {
+      icon?: string
+      alt?: string
+    }
+  }
+  textBeforeLocation?: string
+  textAfterLocation?: string
+  description?: string
+  triggerRef?: UIPopoverProps['triggerRef']
+  onDismiss: UIPopoverProps['onDismiss']
+  offsetTop?: UIPopoverProps['offsetTop']
+  offsetLeft?: UIPopoverProps['offsetLeft']
+  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) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const { isValidating, ...session } = useSession()
+  const { popover: displayPopover, closePopover } = useUI()
+  const { city, postalCode } = sessionStore.read()
+  const location = city ? `${textToTitleCase(city)}, ${postalCode}` : postalCode
+
+  const [input, setInput] = useState<string>('')
+
+  const { loading, setRegion, regionError, setRegionError } = useRegion()
+
+  const handleSubmit = async () => {
+    if (isValidating) {
+      return
+    }
+
+    await setRegion({
+      session,
+      onSuccess: () => {
+        setInput('')
+        closePopover()
+      },
+      postalCode: input,
+      errorMessage: inputFieldErrorMessage,
+      noProductsAvailableErrorMessage:
+        inputFieldNoProductsAvailableErrorMessage,
+    })
+  }
+
+  const idkPostalCodeLinkProps = {
+    href: idkPostalCodeLinkTo,
+    children: (
+      <>
+        {idkPostalCodeLinkText}
+        {!!idkPostalCodeLinkIcon && (
+          <UIIcon
+            name={idkPostalCodeLinkIcon}
+            aria-label={idkPostalCodeLinkIconAlt}
+            width={20}
+            height={20}
+          />
+        )}
+      </>
+    ),
+  }
+
+  const RegionPopoverContent = (
+    <>
+      <span data-fs-region-popover-description>
+        {postalCode ? (
+          <>
+            {textBeforeLocation} <span>{location}</span>. {textAfterLocation}
+          </>
+        ) : (
+          <>{description}</>
+        )}
+      </span>
+      <UIInputField
+        data-fs-region-popover-input
+        id="region-popover-input-postal-code"
+        inputRef={inputRef}
+        label={inputFieldLabel}
+        actionable
+        value={input}
+        onInput={(e) => {
+          regionError !== '' && setRegionError('')
+          setInput(e.currentTarget.value)
+        }}
+        onSubmit={handleSubmit}
+        onClear={() => {
+          setInput('')
+          setRegionError('')
+        }}
+        buttonActionText={loading ? '...' : inputButtonActionText}
+        error={regionError}
+      />
+      {idkPostalCodeLinkTo && (
+        <UILink data-fs-region-popover-link {...idkPostalCodeLinkProps} />
+      )}
+    </>
+  )
+
+  return (
+    <>
+      {displayPopover.isOpen && (
+        <div className={`${styles.section} section-region-popover`}>
+          <UIPopover
+            data-fs-region-popover
+            title={title}
+            isOpen={displayPopover.isOpen}
+            content={RegionPopoverContent}
+            placement={placement}
+            dismissible
+            triggerRef={triggerRef}
+            offsetTop={offsetTop}
+            offsetLeft={offsetLeft}
+            closeButtonAriaLabel={closeButtonAriaLabel}
+            onEntered={() => {
+              if (!postalCode && inputRef.current) {
+                inputRef.current.focus()
+              }
+            }}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default RegionPopover

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

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

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

@@ -0,0 +1,9 @@
+.section {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/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/Popover/styles.scss";
+  @import "@faststore/ui/src/components/organisms/RegionPopover/styles.scss";
+}

package/src/components/search/SearchInput/SearchInput.tsx

@@ -18,6 +18,7 @@ import {
   Icon as UIIcon,
   IconButton as UIIconButton,
   SearchInput as UISearchInput,
+  useOnClickOutside,
 } from '@faststore/ui'
 
 import type {
@@ -27,10 +28,9 @@ import type {
 
 import type { SearchProviderContextValue } from '@faststore/ui'
 
+import type { NavbarProps } from 'src/components/sections/Navbar'
 import useSearchHistory from 'src/sdk/search/useSearchHistory'
 import useSuggestions from 'src/sdk/search/useSuggestions'
-import useOnClickOutside from 'src/sdk/ui/useOnClickOutside'
-import type { NavbarProps } from 'src/components/sections/Navbar'
 
 import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
 

package/src/components/sections/Navbar/section.module.scss

@@ -14,10 +14,13 @@
     @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
     @import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
     @import "@faststore/ui/src/components/atoms/Price/styles.scss";
+    @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
     @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
     @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
     @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Popover/styles.scss";
     @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
+    @import "@faststore/ui/src/components/organisms/RegionPopover/styles.scss";
     @import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";
     @import "@faststore/ui/src/components/molecules/SearchDropdown/styles.scss";
     @import "@faststore/ui/src/components/molecules/SearchHistory/styles.scss";

package/src/components/sections/RegionBar/RegionBar.tsx

@@ -1,3 +1,4 @@
+import useScreenResize from 'src/sdk/ui/useScreenResize'
 import { getOverridableSection } from '../../..//sdk/overrides/getOverriddenSection'
 import RegionBar, {
   type RegionBarProps,
@@ -30,10 +31,14 @@ type RegionBarSectionProps = {
 }
 
 function RegionBarSection({ ...otherProps }: RegionBarSectionProps) {
+  const { isDesktop } = useScreenResize()
+
   return (
-    <Section className={`${styles.section} section-region-bar display-mobile`}>
-      <RegionBar {...otherProps} />
-    </Section>
+    !isDesktop && (
+      <Section className={`${styles.section} section-region-bar`}>
+        <RegionBar {...otherProps} />
+      </Section>
+    )
   )
 }
 

package/src/constants.ts

@@ -1,2 +1,3 @@
 export const ITEMS_PER_PAGE = 12
 export const ITEMS_PER_SECTION = 5
+export const TIME_TO_VALIDATE_SESSION = 3000

package/src/pages/[slug]/p.tsx

@@ -91,8 +91,9 @@ function Page({
   offers,
   meta,
 }: Props) {
-  const { product } = server
   const { currency } = useSession()
+
+  const { product } = server
   const {
     seo: { pdp: pdpSeo, ...storeSeo },
   } = storeConfig

package/src/pages/_app.tsx

@@ -3,17 +3,19 @@ import type { AppProps } from 'next/app'
 import Layout from 'src/Layout'
 import AnalyticsHandler from 'src/sdk/analytics'
 import ErrorBoundary from 'src/sdk/error/ErrorBoundary'
+import useGeolocation from 'src/sdk/geolocation/useGeolocation'
 import SEO from '../../next-seo.config'
 
 // FastStore UI's base styles
-import '../styles/global/index.scss'
-import '../plugins/index.scss'
 import '../customizations/src/themes/index.scss'
+import '../plugins/index.scss'
+import '../styles/global/index.scss'
 
 import { DefaultSeo } from 'next-seo'
 
 function App({ Component, pageProps }: AppProps) {
   const { key } = pageProps
+  useGeolocation()
 
   return (
     <ErrorBoundary>