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

package/.turbo/turbo-build.log

@@ -22,26 +22,26 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.1 kB          126 kB
+┌ ● /                                      3.1 kB          125 kB
 ├   └ css/13a4da555ff5e3be.css             7.19 kB
-├   /_app                                  0 B              78 kB
+├   /_app                                  0 B            77.8 kB
 ├ ● /[...slug]                             10.1 kB         133 kB
 ├   └ css/6e41f1b6078c14c1.css             7.9 kB
-├ ● /[slug]/p                              11.7 kB         135 kB
+├ ● /[slug]/p                              11.7 kB         134 kB
 ├   └ css/c6f97f692b2efad9.css             11 kB
 ├ ○ /404                                   1.09 kB         113 kB
 ├ ● /500                                   1.11 kB         113 kB
-├ ● /account                               672 B           113 kB
-├ λ /api/graphql                           0 B              78 kB
-├ λ /api/preview                           0 B              78 kB
-├ ● /checkout                              659 B           113 kB
+├ ● /account                               669 B           112 kB
+├ λ /api/graphql                           0 B            77.8 kB
+├ λ /api/preview                           0 B            77.8 kB
+├ ● /checkout                              657 B           112 kB
 ├ ● /login                                 1.01 kB         113 kB
 └ ● /s                                     1.11 kB         124 kB
-+ First Load JS shared by all              80.7 kB
++ First Load JS shared by all              80.6 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
-  ├ chunks/pages/_app-78846ca9151cf266.js  6.49 kB
-  ├ chunks/webpack-e9bf82a67cc08d0f.js     2.27 kB
+  ├ chunks/pages/_app-79d333aa6001a806.js  6.38 kB
+  ├ chunks/webpack-79982595c94ff0e7.js     2.21 kB
   └ css/47d82dcec9a7dbc2.css               2.78 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.168-alpha.0](https://github.com/vtex/faststore/compare/v2.0.167-alpha.0...v2.0.168-alpha.0) (2023-05-29)
+
+### Features
+
+- Adds `RegionBar` and `RegionModal` Sections ([#1798](https://github.com/vtex/faststore/issues/1798)) ([627fa25](https://github.com/vtex/faststore/commit/627fa25832a7a41a1feebe07bef43b67e5edf13a))
+
+## [2.0.166-alpha.0](https://github.com/vtex/faststore/compare/v2.0.165-alpha.0...v2.0.166-alpha.0) (2023-05-29)
+
+### Features
+
+- Adds `CartSidebar` Section ([#1795](https://github.com/vtex/faststore/issues/1795)) ([c544c45](https://github.com/vtex/faststore/commit/c544c4571b1419ad421b4df57a51de7a0f9e0e2b))
+
 ## [2.0.165-alpha.0](https://github.com/vtex/faststore/compare/v2.0.164-alpha.0...v2.0.165-alpha.0) (2023-05-26)
 
 **Note:** Version bump only for package @faststore/core

package/cms/faststore/sections.json

@@ -1422,5 +1422,231 @@
         }
       }
     }
+  },
+  {
+    "name": "CartSidebar",
+    "schema": {
+      "title": "Cart Sidebar",
+      "type": "object",
+      "description": "Cart Sidebar configuration",
+      "properties": {
+        "title": {
+          "title": "Title text",
+          "type": "string",
+          "default": "Your Cart"
+        },
+        "alert": {
+          "title": "Alert",
+          "type": "object",
+          "properties": {
+            "icon": {
+              "title": "Icon",
+              "type": "object",
+              "required": ["icon", "alt"],
+              "properties": {
+                "icon": {
+                  "title": "Icon",
+                  "type": "string",
+                  "enumNames": [
+                    "Bell",
+                    "BellRinging",
+                    "Checked",
+                    "Info",
+                    "Truck",
+                    "User"
+                  ],
+                  "enum": [
+                    "Bell",
+                    "BellRinging",
+                    "Checked",
+                    "Info",
+                    "Truck",
+                    "User"
+                  ],
+                  "default": "Truck"
+                },
+                "alt": {
+                  "title": "Alternative label",
+                  "type": "string",
+                  "default": "Arrow Right icon"
+                }
+              }
+            },
+            "text": {
+              "type": "string",
+              "title": "Text",
+              "default": "Free shipping starts at $300"
+            }
+          }
+        },
+        "checkoutButton": {
+          "title": "Checkout button",
+          "type": "object",
+          "required": ["label", "loadingLabel", "icon"],
+          "properties": {
+            "label": {
+              "title": "Label",
+              "type": "string",
+              "default": "Checkout"
+            },
+            "loadingLabel": {
+              "title": "Loading label",
+              "type": "string",
+              "default": "Loading..."
+            },
+            "icon": {
+              "title": "Icon",
+              "type": "object",
+              "required": ["icon", "alt"],
+              "properties": {
+                "icon": {
+                  "title": "Icon",
+                  "type": "string",
+                  "enumNames": ["ArrowRight"],
+                  "enum": ["ArrowRight"],
+                  "default": "ArrowRight"
+                },
+                "alt": {
+                  "title": "Alternative label",
+                  "type": "string",
+                  "default": "Arrow Right icon"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  {
+    "name": "RegionBar",
+    "schema": {
+      "title": "Region Bar",
+      "type": "object",
+      "description": "Region Bar configuration",
+      "required": ["label"],
+      "properties": {
+        "icon": {
+          "title": "Location Icon",
+          "type": "object",
+          "properties": {
+            "icon": {
+              "title": "Icon",
+              "type": "string",
+              "enumNames": ["Map Pin"],
+              "enum": ["MapPin"],
+              "default": "MapPin"
+            },
+            "alt": {
+              "title": "Alternative Label",
+              "type": "string",
+              "default": "Map Pin icon"
+            }
+          }
+        },
+        "label": {
+          "title": "Location label",
+          "type": "string",
+          "default": "Set your location"
+        },
+        "editLabel": {
+          "title": "Location edit label",
+          "type": "string",
+          "default": "Edit"
+        },
+        "buttonIcon": {
+          "title": "Button Icon",
+          "type": "object",
+          "properties": {
+            "icon": {
+              "title": "Icon",
+              "type": "string",
+              "enumNames": ["Caret Right"],
+              "enum": ["CaretRight"],
+              "default": "CaretRight"
+            },
+            "alt": {
+              "title": "Alternative Label",
+              "type": "string",
+              "default": "Caret Right icon"
+            }
+          }
+        }
+      }
+    }
+  },
+  {
+    "name": "RegionModal",
+    "schema": {
+      "title": "Region Modal",
+      "type": "object",
+      "description": "Region Modal configuration",
+      "properties": {
+        "title": {
+          "title": "Title",
+          "type": "string",
+          "default": "Set your location"
+        },
+        "description": {
+          "title": "Description",
+          "type": "string",
+          "default": "Prices, offers and availability may vary according to your location."
+        },
+        "closeButtonAriaLabel": {
+          "title": "Close modal aria-label",
+          "type": "string",
+          "default": "Close Region Modal"
+        },
+        "inputField": {
+          "title": "Input Field",
+          "type": "object",
+          "properties": {
+            "label": {
+              "title": "Input field label",
+              "type": "string",
+              "default": "Postal Code"
+            },
+            "errorMessage": {
+              "title": "Input field error message",
+              "type": "string",
+              "default": "You entered an invalid Postal Code"
+            }
+          }
+        },
+        "idkPostalCodeLink": {
+          "title": "I don't know my postal code link",
+          "type": "object",
+          "properties": {
+            "text": {
+              "type": "string",
+              "title": "Link Text",
+              "default": "I don't know my Postal Code"
+            },
+            "to": {
+              "type": "string",
+              "title": "Action link"
+            },
+            "icon": {
+              "title": "Icon",
+              "type": "object",
+              "properties": {
+                "icon": {
+                  "title": "Icon",
+                  "type": "string",
+                  "enumNames": ["Arrow Square Out"],
+                  "enum": ["ArrowSquareOut"],
+                  "default": "ArrowSquareOut"
+                },
+                "alt": {
+                  "title": "Alternative Label",
+                  "type": "string",
+                  "default": "Arrow Square Out icon"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.165-alpha.0",
+  "version": "2.0.168-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,7 +30,7 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.165-alpha.0",
-    "@faststore/components": "^2.0.160-alpha.0",
+    "@faststore/components": "^2.0.168-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.162-alpha.0",
     "@faststore/ui": "^2.0.160-alpha.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "21ad4389f70c01d68d1d9722acb5d68eb13ec30c"
+  "gitHead": "83716a775545aa6ed10a478113408de4a094f792"
 }

package/src/Layout.tsx

@@ -1,31 +1,7 @@
 import type { PropsWithChildren } from 'react'
-import { lazy, Suspense } from 'react'
-
-import { useUI } from '@faststore/ui'
-
-const CartSidebar = lazy(() => import('src/components/cart/CartSidebar'))
-const RegionModal = lazy(() => import('src/components/region/RegionModal'))
 
 function Layout({ children }: PropsWithChildren) {
-  const { cart: displayCart, modal: displayModal } = useUI()
-
-  return (
-    <>
-      {children}
-
-      {displayCart && (
-        <Suspense fallback={null}>
-          <CartSidebar />
-        </Suspense>
-      )}
-
-      {displayModal && (
-        <Suspense fallback={null}>
-          <RegionModal />
-        </Suspense>
-      )}
-    </>
-  )
+  return <>{children}</>
 }
 
 export default Layout

package/src/components/cart/CartSidebar/CartSidebar.tsx

@@ -6,10 +6,11 @@ import {
   CartSidebarList as UICartSidebarList,
 } from '@faststore/ui'
 
-import type { CurrencyCode, ViewCartEvent } from '@faststore/sdk'
-import { useEffect } from 'react'
+import type { CartSidebarProps as UICartSidebarProps } from '@faststore/ui'
 
+import type { CurrencyCode, ViewCartEvent } from '@faststore/sdk'
 import { Icon, useFadeEffect, useUI } from '@faststore/ui'
+import { Suspense, useEffect } from 'react'
 import { useCart } from 'src/sdk/cart'
 import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
 import { useSession } from 'src/sdk/session'
@@ -20,11 +21,41 @@ import EmptyCart from '../EmptyCart'
 import OrderSummary from '../OrderSummary'
 import styles from './section.module.scss'
 
-function CartSidebar() {
+export interface CartSidebarProps {
+  title: UICartSidebarProps['title']
+  alert?: {
+    icon?: {
+      icon: string
+      alt: string
+    }
+    text: UICartSidebarProps['alertText']
+  }
+  checkoutButton: {
+    label: string
+    loadingLabel: string
+    icon?: {
+      icon: string
+      alt: string
+    }
+  }
+}
+
+function CartSidebar({
+  title,
+  alert: {
+    icon: { icon: alertIcon, alt: alertIconAlt },
+    text: alertText,
+  },
+  checkoutButton: {
+    label: checkoutLabel,
+    loadingLabel: checkoutLoadingLabel,
+    icon: { icon: checkoutButtonIcon, alt: checkoutButtonIconAlt },
+  },
+}: CartSidebarProps) {
   const { currency } = useSession()
   const btnProps = useCheckoutButton()
   const cart = useCart()
-  const { closeCart } = useUI()
+  const { cart: displayCart, closeCart } = useUI()
   const { fadeOut } = useFadeEffect()
 
   const { items, gifts, totalItems, isValidating, subTotal, total } = cart
@@ -55,60 +86,72 @@ function CartSidebar() {
   }, [])
 
   return (
-    <UICartSidebar
-      overlayProps={{
-        className: `section ${styles.section} section-cart-sidebar`,
-      }}
-      totalItems={totalItems}
-      alertIcon={<Icon name="Truck" />}
-      alertText="Free shipping starts at $300"
-      onClose={fadeOut}
-    >
-      {isEmpty ? (
-        <EmptyCart onDismiss={closeCart} />
-      ) : (
-        <>
-          <UICartSidebarList>
-            {items.map((item) => (
-              <li key={item.id}>
-                <CartItem item={item} />
-              </li>
-            ))}
-            {gifts.length > 0 && (
+    <>
+      {displayCart && (
+        <Suspense fallback={null}>
+          <UICartSidebar
+            overlayProps={{
+              className: `section ${styles.section} section-cart-sidebar`,
+            }}
+            title={title}
+            totalItems={totalItems}
+            alertIcon={<Icon name={alertIcon} aria-label={alertIconAlt} />}
+            alertText={alertText}
+            onClose={fadeOut}
+          >
+            {isEmpty ? (
+              <EmptyCart onDismiss={closeCart} />
+            ) : (
               <>
-                {gifts.map((item) => (
-                  <li key={item.id}>
-                    <Gift item={item} />
-                  </li>
-                ))}
+                <UICartSidebarList>
+                  {items.map((item) => (
+                    <li key={item.id}>
+                      <CartItem item={item} />
+                    </li>
+                  ))}
+                  {gifts.length > 0 && (
+                    <>
+                      {gifts.map((item) => (
+                        <li key={item.id}>
+                          <Gift item={item} />
+                        </li>
+                      ))}
+                    </>
+                  )}
+                </UICartSidebarList>
+
+                <UICartSidebarFooter>
+                  <OrderSummary
+                    subTotal={subTotal}
+                    total={total}
+                    numberOfItems={totalItems}
+                    checkoutButton={
+                      <UIButton
+                        variant="primary"
+                        icon={
+                          !isValidating && (
+                            <Icon
+                              name={checkoutButtonIcon}
+                              aria-label={checkoutButtonIconAlt}
+                              width={18}
+                              height={18}
+                            />
+                          )
+                        }
+                        iconPosition="right"
+                        {...btnProps}
+                      >
+                        {isValidating ? checkoutLoadingLabel : checkoutLabel}
+                      </UIButton>
+                    }
+                  />
+                </UICartSidebarFooter>
               </>
             )}
-          </UICartSidebarList>
-
-          <UICartSidebarFooter>
-            <OrderSummary
-              subTotal={subTotal}
-              total={total}
-              numberOfItems={totalItems}
-              checkoutButton={
-                <UIButton
-                  variant="primary"
-                  icon={
-                    !isValidating && (
-                      <Icon name="ArrowRight" width={18} height={18} />
-                    )
-                  }
-                  iconPosition="right"
-                  {...btnProps}
-                >
-                  {isValidating ? 'Loading...' : 'Checkout'}
-                </UIButton>
-              }
-            />
-          </UICartSidebarFooter>
-        </>
+          </UICartSidebar>
+        </Suspense>
       )}
-    </UICartSidebar>
+    </>
   )
 }
 

package/src/components/cms/GlobalSections.tsx

@@ -1,17 +1,19 @@
-import { PropsWithChildren, useMemo } from 'react'
-
 import { Locator, Section } from '@vtex/client-cms'
 import type { ComponentType } from 'react'
+import { PropsWithChildren, lazy } from 'react'
 import CUSTOM_COMPONENTS from 'src/customizations/components'
 import { PageContentType, getPage } from 'src/server/cms'
 
-import RegionBar from 'src/components/common/RegionBar'
 import Toast from 'src/components/common/Toast'
 import RenderSections from './RenderSections'
 
 import Alert from 'src/components/sections/Alert'
-import Navbar from 'src/components/sections/Navbar'
 import Footer from 'src/components/sections/Footer'
+import Navbar from 'src/components/sections/Navbar'
+import RegionBar from 'src/components/sections/RegionBar'
+
+const RegionModal = lazy(() => import('src/components/region/RegionModal'))
+const CartSidebar = lazy(() => import('src/components/cart/CartSidebar'))
 
 export const GLOBAL_SECTIONS_CONTENT_TYPE = 'globalSections'
 
@@ -22,8 +24,11 @@ export type GlobalSectionsData = {
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   Alert,
-  Footer,
   Navbar,
+  RegionBar,
+  RegionModal,
+  CartSidebar,
+  Footer,
   ...CUSTOM_COMPONENTS,
 }
 
@@ -35,10 +40,7 @@ function GlobalSections({
     <RenderSections components={COMPONENTS} {...otherProps}>
       <Toast />
 
-      <main>
-        <RegionBar className="display-mobile" />
-        {children}
-      </main>
+      <main>{children}</main>
     </RenderSections>
   )
 }

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

@@ -1,9 +1,39 @@
-import { RegionBar as UIRegionBar } from '@faststore/ui'
+import type { RegionBarProps as UIRegionBarProps } from '@faststore/ui'
+import { Icon, RegionBar as UIRegionBar } from '@faststore/ui'
 
-import { useSession } from 'src/sdk/session'
 import { useUI } from '@faststore/ui'
+import { useSession } from 'src/sdk/session'
+
+export interface RegionBarProps {
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  icon?: {
+    icon: string
+    alt: string
+  }
+  /**
+   * Specifies a label for the location text.
+   */
+  label: UIRegionBarProps['label']
+  /**
+   * Specifies a label for the edit text.
+   */
+  editLabel?: UIRegionBarProps['editLabel']
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  buttonIcon?: {
+    icon: string
+    alt: string
+  }
+}
 
-function RegionBar({ ...otherProps }) {
+function RegionBar({
+  icon: { icon: locationIcon, alt: locationIconAlt },
+  buttonIcon: { icon: buttonIcon, alt: buttonIconAlt },
+  ...otherProps
+}: RegionBarProps) {
   const { openModal } = useUI()
   const { postalCode } = useSession()
 
@@ -11,6 +41,8 @@ function RegionBar({ ...otherProps }) {
     <UIRegionBar
       onButtonClick={openModal}
       postalCode={postalCode}
+      icon={<Icon name={locationIcon} aria-label={locationIconAlt} />}
+      buttonIcon={<Icon name={buttonIcon} aria-label={buttonIconAlt} />}
       {...otherProps}
     />
   )