@faststore/core 2.0.165-alpha.0 → 2.0.168-alpha.0

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

@@ -1,15 +1,49 @@
-import { RegionModal as UIRegionModal } from '@faststore/ui'
-import { useRef, useState } from 'react'
+import {
+  Icon,
+  RegionModal as UIRegionModal,
+  RegionModalProps as UIRegionModalProps,
+  useUI,
+} from '@faststore/ui'
+import { Suspense, useRef, useState } from 'react'
 
 import { sessionStore, useSession, validateSession } from 'src/sdk/session'
 
 import styles from './section.module.scss'
 
-function RegionModal() {
+interface RegionModalProps {
+  title?: UIRegionModalProps['title']
+  description?: UIRegionModalProps['description']
+  closeButtonAriaLabel?: UIRegionModalProps['closeButtonAriaLabel']
+  inputField?: {
+    label?: UIRegionModalProps['inputLabel']
+    errorMessage?: UIRegionModalProps['errorMessage']
+  }
+  idkPostalCodeLink?: {
+    text?: string
+    to?: string
+    icon?: {
+      icon: string
+      alt: string
+    }
+  }
+}
+
+function RegionModal({
+  title,
+  description,
+  closeButtonAriaLabel,
+  inputField: { label: inputFieldLabel, errorMessage: inputFieldErrorMessage },
+  idkPostalCodeLink: {
+    text: idkPostalCodeLinkText,
+    to: idkPostalCodeLinkTo,
+    icon: { icon: idkPostalCodeLinkIcon, alt: idkPostalCodeLinkIconAlt },
+  },
+}: RegionModalProps) {
   const inputRef = useRef<HTMLInputElement>(null)
   const { isValidating, ...session } = useSession()
   const [errorMessage, setErrorMessage] = useState<string>('')
   const [input, setInput] = useState<string>('')
+  const { modal: displayModal } = useUI()
 
   const handleSubmit = async () => {
     const postalCode = inputRef.current?.value
@@ -30,26 +64,54 @@ function RegionModal() {
 
       sessionStore.set(validatedSession ?? newSession)
     } catch (error) {
-      setErrorMessage('You entered an invalid Postal Code')
+      setErrorMessage(inputFieldErrorMessage)
     }
   }
 
+  const idkPostalCodeLinkProps: UIRegionModalProps['idkPostalCodeLinkProps'] = {
+    href: idkPostalCodeLinkTo ?? '#',
+    children: (
+      <>
+        {idkPostalCodeLinkText}
+        {!!idkPostalCodeLinkIcon ?? (
+          <Icon
+            name={idkPostalCodeLinkIcon}
+            aria-label={idkPostalCodeLinkIconAlt}
+            width={20}
+            height={20}
+          />
+        )}
+      </>
+    ),
+  }
+
   return (
-    <UIRegionModal
-      overlayProps={{
-        className: `section ${styles.section} section-region-modal`,
-      }}
-      inputRef={inputRef}
-      inputValue={input}
-      errorMessage={errorMessage}
-      onInput={(e) => {
-        errorMessage !== '' && setErrorMessage('')
-        setInput(e.currentTarget.value)
-      }}
-      onSubmit={handleSubmit}
-      fadeOutOnSubmit={true}
-      onClear={() => setInput('')}
-    />
+    <>
+      {displayModal && (
+        <Suspense fallback={null}>
+          <UIRegionModal
+            title={title}
+            description={description}
+            overlayProps={{
+              className: `section ${styles.section} section-region-modal`,
+            }}
+            closeButtonAriaLabel={closeButtonAriaLabel}
+            inputRef={inputRef}
+            inputValue={input}
+            inputLabel={inputFieldLabel}
+            errorMessage={errorMessage}
+            idkPostalCodeLinkProps={idkPostalCodeLinkProps}
+            onInput={(e) => {
+              errorMessage !== '' && setErrorMessage('')
+              setInput(e.currentTarget.value)
+            }}
+            onSubmit={handleSubmit}
+            fadeOutOnSubmit={true}
+            onClear={() => setInput('')}
+          />
+        </Suspense>
+      )}
+    </>
   )
 }
 

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

@@ -0,0 +1,41 @@
+import RegionBar, {
+  RegionBarProps,
+} from 'src/components/region/RegionBar/RegionBar'
+import Section from 'src/components/sections/Section/Section'
+import styles from './section.module.scss'
+
+type RegionBarSectionProps = {
+  /**
+   * className forwarded to the section.
+   */
+  className?: string
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon: RegionBarProps['icon']
+  /**
+   * Specifies a label for the location text.
+   */
+  label: RegionBarProps['label']
+  /**
+   * Specifies a label for the edit text.
+   */
+  editLabel?: RegionBarProps['editLabel']
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  buttonIcon?: RegionBarProps['buttonIcon']
+}
+
+function RegionBarSection({
+  className = 'display-mobile',
+  ...otherProps
+}: RegionBarSectionProps) {
+  return (
+    <Section className={`${styles.section} section-region-bar ${className}`}>
+      <RegionBar {...otherProps} />
+    </Section>
+  )
+}
+
+export default RegionBarSection

package/.next/BUILD_ID

@@ -1 +0,0 @@
-zYvKRrlOU3r6IZCy0a0eY

package/.next/build-manifest.json

@@ -1,132 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/zYvKRrlOU3r6IZCy0a0eY/_buildManifest.js",
-    "static/zYvKRrlOU3r6IZCy0a0eY/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/28d7d73e13e2bc1d.css",
-      "static/chunks/377-891ff95d759cb061.js",
-      "static/css/287f5ba239375052.css",
-      "static/chunks/240-8e66b2892f9d8c40.js",
-      "static/css/13a4da555ff5e3be.css",
-      "static/chunks/pages/index-2006be8f08ad057f.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/28d7d73e13e2bc1d.css",
-      "static/chunks/377-891ff95d759cb061.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/404-459452495a0df278.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/28d7d73e13e2bc1d.css",
-      "static/chunks/377-891ff95d759cb061.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/500-008e30c48eceebed.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/28d7d73e13e2bc1d.css",
-      "static/chunks/377-891ff95d759cb061.js",
-      "static/css/d4a0d9df8c6df555.css",
-      "static/chunks/0-82274e07cb857231.js",
-      "static/css/6e41f1b6078c14c1.css",
-      "static/chunks/pages/[...slug]-e9d8386ff5e56d85.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/28d7d73e13e2bc1d.css",
-      "static/chunks/377-891ff95d759cb061.js",
-      "static/css/287f5ba239375052.css",
-      "static/chunks/240-8e66b2892f9d8c40.js",
-      "static/css/c6f97f692b2efad9.css",
-      "static/chunks/pages/[slug]/p-8346514a688bf869.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/css/47d82dcec9a7dbc2.css",
-      "static/chunks/pages/_app-78846ca9151cf266.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/28d7d73e13e2bc1d.css",
-      "static/chunks/377-891ff95d759cb061.js",
-      "static/chunks/pages/account-46263f0c100c3eae.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/28d7d73e13e2bc1d.css",
-      "static/chunks/377-891ff95d759cb061.js",
-      "static/chunks/pages/checkout-20bb3710b24df3b6.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/28d7d73e13e2bc1d.css",
-      "static/chunks/377-891ff95d759cb061.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/login-f9d316d261fcc062.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-e9bf82a67cc08d0f.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/28d7d73e13e2bc1d.css",
-      "static/chunks/377-891ff95d759cb061.js",
-      "static/css/d4a0d9df8c6df555.css",
-      "static/chunks/0-82274e07cb857231.js",
-      "static/chunks/pages/s-1cbe740b5b781d28.js"
-    ]
-  },
-  "ampFirstPages": []
-}