@faststore/core 3.99.0 → 4.0.0-dev.1

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

@@ -108,6 +108,10 @@ export interface CartSidebarProps {
     }
     text: UICartSidebarProps['alertText']
   }
+  emptyCart?: {
+    title?: string
+    buttonLabel?: string
+  }
   checkoutButton: {
     label: string
     loadingLabel: string
@@ -131,6 +135,7 @@ function CartSidebar({
     icon: { icon: alertIcon, alt: alertIconAlt },
     text: alertText,
   },
+  emptyCart,
   checkoutButton: {
     label: checkoutLabel,
     loadingLabel: checkoutLoadingLabel,
@@ -178,7 +183,11 @@ function CartSidebar({
           onClose={fadeOut}
         >
           {isEmpty ? (
-            <EmptyCart onDismiss={closeCart} />
+            <EmptyCart
+              title={emptyCart?.title}
+              buttonLabel={emptyCart?.buttonLabel}
+              onDismiss={closeCart}
+            />
           ) : (
             <>
               <UICartSidebarList>

package/src/components/cart/CartSidebar/section.module.scss

@@ -1,21 +1,23 @@
+@use "sass:meta";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Badge/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/atoms/List/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Price/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
-    @import "@faststore/ui/src/components/molecules/CartItem/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Gift/styles.scss";
-    @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
-    @import "@faststore/ui/src/components/molecules/OrderSummary/styles.scss";
-    @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
-    @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
-    @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
-    @import "@faststore/ui/src/components/organisms/CartSidebar/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Overlay/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/List/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Price/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Alert/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Modal/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/CartItem/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Gift/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/QuantitySelector/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/OrderSummary/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductPrice/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/EmptyState/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/CartSidebar/styles.scss");
   }
 }

package/src/components/cart/EmptyCart/EmptyCart.tsx

@@ -6,21 +6,29 @@ import {
 
 interface Props {
   /**
-   * This function is called when `Start Shopping` button is clicked
+   * Title text for empty cart state
+   */
+  title?: string
+  /**
+   * Button label for empty cart action
+   */
+  buttonLabel?: string
+  /**
+   * This function is called when the button is clicked
    */
   onDismiss: () => void
 }
 
-function EmptyCart({ onDismiss }: Props) {
+function EmptyCart({ title, buttonLabel, onDismiss }: Props) {
   return (
     <UIEmptyState
-      title="Your Cart is empty"
+      title={title}
       titleIcon={
         <UIIcon name="ShoppingCart" width={56} height={56} weight="thin" />
       }
     >
       <UIButton onClick={onDismiss} variant="secondary">
-        Start Shopping
+        {buttonLabel}
       </UIButton>
     </UIEmptyState>
   )

package/src/components/cms/GlobalSections.tsx

@@ -2,7 +2,7 @@ import type { Section } from '@vtex/client-cms'
 import storeConfig from 'discovery.config'
 import type { PageContentType } from 'src/server/cms'
 import { contentService } from 'src/server/content/service'
-import type { PreviewData } from 'src/server/content/types'
+import type { ContentRequestContext } from 'src/server/content/types'
 
 export const GLOBAL_SECTIONS_CONTENT_TYPE = 'globalSections'
 export const GLOBAL_SECTIONS_HEADER_CONTENT_TYPE = 'globalHeaderSections'
@@ -14,8 +14,8 @@ export type GlobalSectionsData = {
 }
 
 export const getGlobalSectionsByType = async (
-  previewData: PreviewData,
-  contentType: string
+  contentType: string,
+  contentContext: ContentRequestContext
 ): Promise<GlobalSectionsData> => {
   if (storeConfig.cms.data) {
     const cmsData = JSON.parse(storeConfig.cms.data)
@@ -24,7 +24,7 @@ export const getGlobalSectionsByType = async (
     if (page) {
       const pageData = contentService.getSingleContent<PageContentType>({
         contentType,
-        previewData,
+        ...contentContext,
         documentId: page.documentId,
         versionId: page.versionId,
         releaseId: page.releaseId,
@@ -36,26 +36,26 @@ export const getGlobalSectionsByType = async (
 
   const pageData = contentService.getSingleContent<PageContentType>({
     contentType,
-    previewData,
+    ...contentContext,
   })
 
   return pageData
 }
 
 export const getGlobalSectionsData = (
-  previewData: PreviewData
+  contentContext: ContentRequestContext
 ): Promise<GlobalSectionsData>[] => {
   const globalSections = getGlobalSectionsByType(
-    previewData,
-    GLOBAL_SECTIONS_CONTENT_TYPE
+    GLOBAL_SECTIONS_CONTENT_TYPE,
+    contentContext
   )
   const globalHeaderSections = getGlobalSectionsByType(
-    previewData,
-    GLOBAL_SECTIONS_HEADER_CONTENT_TYPE
+    GLOBAL_SECTIONS_HEADER_CONTENT_TYPE,
+    contentContext
   )
   const globalFooterSections = getGlobalSectionsByType(
-    previewData,
-    GLOBAL_SECTIONS_FOOTER_CONTENT_TYPE
+    GLOBAL_SECTIONS_FOOTER_CONTENT_TYPE,
+    contentContext
   )
 
   return [globalSections, globalHeaderSections, globalFooterSections]

package/src/components/cms/RenderSections.tsx

@@ -25,6 +25,12 @@ interface Props {
 
 const SECTIONS_OUT_OF_VIEWPORT = ['CartSidebar', 'RegionModal', 'RegionSlider']
 
+/** Filter CMS metadata props so they are not passed to section components (and thus to the DOM). */
+function getSectionProps(data: Record<string, unknown>) {
+  const { $componentKey: _key, $componentTitle: _title, ...sectionProps } = data
+  return sectionProps
+}
+
 const Toast = dynamic(
   () => import(/* webpackChunkName: "Toast" */ '../common/Toast'),
   { ssr: false }
@@ -119,16 +125,18 @@ export const RenderSectionsBase = ({
           return null
         }
 
+        const sectionProps = getSectionProps(data)
+
         return (
           <SectionBoundary key={`cms-section-${name}-${index}`} name={name}>
             {data.skipLazyLoadingSection ? (
-              <Component {...data} />
+              <Component {...sectionProps} />
             ) : (
               <LazyLoadingSection
                 sectionName={name}
                 isInteractive={isInteractive}
               >
-                <Component {...data} />
+                <Component {...sectionProps} />
               </LazyLoadingSection>
             )}
           </SectionBoundary>

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

@@ -41,6 +41,14 @@ const ProductTiles = dynamic(
     ),
   { ssr: false }
 )
+const ScrollToTopButton = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ScrollToTopButton" */
+      'src/components/sections/ScrollToTopButton'
+    ),
+  { ssr: false }
+)
 
 /**
  * Sections: Components imported from each store's custom components and '../components/sections' only.
@@ -55,6 +63,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
   [getComponentKey(Newsletter, 'Newsletter')]: Newsletter,
   [getComponentKey(ProductShelf, 'ProductShelf')]: ProductShelf,
   [getComponentKey(ProductTiles, 'ProductTiles')]: ProductTiles,
+  [getComponentKey(ScrollToTopButton, 'ScrollToTopButton')]: ScrollToTopButton,
   ...PLUGINS_COMPONENTS,
   ...CUSTOM_COMPONENTS,
 }

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

@@ -1,10 +1,15 @@
+@use "sass:meta";
+@use "@faststore/ui/src/styles/base/utilities";
+
 @layer components {
   .section {
-    [data-fs-content="alert"] { @include layout-content-full; }
+    [data-fs-content="alert"] {
+      @include utilities.layout-content-full;
+    }
 
-    @import "@faststore/ui/src/components/atoms/Icon/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/Alert/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Alert/styles.scss");
   }
 }

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

@@ -1,51 +1,59 @@
-.section [data-fs-preview-tag] {
-  position: fixed;
-  inset: 1rem 1rem auto auto;
-  z-index: var(--fs-z-index-highest);
-  border-radius: var(--fs-border-radius-pill);
-  box-shadow: var(--fs-shadow-darker);
-  backdrop-filter: blur(var(--fs-spacing-1));
+@use "sass:meta";
 
-  [data-fs-badge-wrapper="true"] {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: var(--fs-spacing-1) var(--fs-spacing-6) var(--fs-spacing-1) var(--fs-spacing-2);
-    color: var(--fs-color-text);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    background: var(--fs-color-danger-bkg);
-    border-radius: var(--fs-border-radius-pill);
-    box-shadow: var(--fs-shadow-hover);
+@layer components {
+  .section {
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Tag/styles.scss");
 
-    [data-fs-tag-icon-button="true"] {
-      position: absolute;
-      right: calc(-1 * var(--fs-spacing-1));
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--fs-spacing-7);
-      height: var(--fs-spacing-7);
-      cursor: pointer;
+    [data-fs-preview-tag] {
+      position: fixed;
+      inset: 1rem 1rem auto auto;
+      z-index: var(--fs-z-index-highest);
+      border-radius: var(--fs-border-radius-pill);
+      box-shadow: var(--fs-shadow-darker);
+      backdrop-filter: blur(var(--fs-spacing-1));
 
-      [data-fs-icon] {
+      [data-fs-badge-wrapper="true"] {
+        position: relative;
         display: flex;
         align-items: center;
-        justify-content: center;
-        width: 16px;
-        height: 16px;
+        padding: var(--fs-spacing-1) var(--fs-spacing-6) var(--fs-spacing-1) var(--fs-spacing-2);
+        color: var(--fs-color-text);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
         background: var(--fs-color-danger-bkg);
-        border-radius: 50%;
-        transition: var(--fs-transition-property) var(--fs-transition-timing) var(--fs-transition-function);
-      }
+        border-radius: var(--fs-border-radius-pill);
+        box-shadow: var(--fs-shadow-hover);
 
-      &:hover [data-fs-icon],
-      &:focus [data-fs-icon] {
-        filter: brightness(0.9);
-      }
+        [data-fs-tag-icon-button="true"] {
+          position: absolute;
+          right: calc(-1 * var(--fs-spacing-1));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--fs-spacing-7);
+          height: var(--fs-spacing-7);
+          cursor: pointer;
+
+          [data-fs-icon] {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: var(--fs-color-danger-bkg);
+            border-radius: 50%;
+            transition: var(--fs-transition-property) var(--fs-transition-timing) var(--fs-transition-function);
+          }
+
+          &:hover [data-fs-icon],
+          &:focus [data-fs-icon] {
+            filter: brightness(0.9);
+          }
 
-      &:focus [data-fs-icon] {
-        border: var(--fs-border-width) solid currentColor;
+          &:focus [data-fs-icon] {
+            border: var(--fs-border-width) solid currentColor;
+          }
+        }
       }
     }
   }

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

@@ -1,6 +1,8 @@
+@use "sass:meta";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Toast/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Toast/styles.scss");
   }
 }