@faststore/core 2.2.66 → 2.2.68

package/.turbo/turbo-build.log

@@ -38,13 +38,12 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      6.23 kB         142 kB
-├   └ css/d2e8564f2bf133d9.css             8.38 kB
+┌ ● /                                      1.08 kB         142 kB
 ├   /_app                                  0 B            83.7 kB
-├ ● /[...slug]                             8.26 kB         144 kB
-├   └ css/eababca67e15ef4b.css             8.8 kB
-├ ● /[slug]/p                              5.6 kB          141 kB
-├   └ css/e67c73ff7fbc8c54.css             4.42 kB
+├ ● /[...slug]                             3.29 kB         145 kB
+├   └ css/527e334fa69cf40a.css             1.85 kB
+├ ● /[slug]/p                              5.89 kB         141 kB
+├   └ css/c33c62a3d0c77436.css             4.48 kB
 ├ ○ /404                                   1.03 kB         136 kB
 ├ ● /500                                   1.05 kB         136 kB
 ├ ● /account                               676 B           136 kB
@@ -59,7 +58,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-e4e873ee741162eb.js        24.2 kB
   ├ chunks/pages/_app-30b9666307e4b3b1.js  12.1 kB
-  ├ chunks/webpack-340b017ee637c5d4.js     2.22 kB
+  ├ chunks/webpack-6c4b31200fed6646.js     2.22 kB
   └ css/5d1f64b61ea581f4.css               3.05 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,23 +1,23 @@
 $ jest
-PASS test/server/index.test.ts (22.015 s)
+PASS test/server/index.test.ts (21.676 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (9 ms)
-      ✓ should return a valid GraphQL schema contain all expected types (10 ms)
-      ✓ should return a valid GraphQL schema contain all expected queries (1 ms)
-      ✓ should return a valid GraphQL schema contain all expected mutations (1 ms)
+      ✓ should return a valid GraphQL schema (8 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (4 ms)
+      ✓ should return a valid GraphQL schema contain all expected queries (2 ms)
+      ✓ should return a valid GraphQL schema contain all expected mutations
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (9 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (8 ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (13 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (17 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (26 ms)
+      ✓ should return a valid merged GraphQL schema (54 ms)
     Envelop
-      ✓ should exist with its plugins (41 ms)
-      ✓ should handle options and execute (602 ms)
+      ✓ should exist with its plugins (71 ms)
+      ✓ should handle options and execute (585 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        22.137 s
+Time:        21.77 s
 Ran all test suites.

package/cms/faststore/sections.json

@@ -1063,13 +1063,14 @@
             "icon": {
               "title": "Icon",
               "type": "string",
-              "enumNames": ["Envelop"],
-              "enum": ["Envelop"]
+              "enumNames": ["Envelope"],
+              "enum": ["Envelope"],
+              "default": "Envelope"
             },
             "alt": {
               "type": "string",
               "title": "Alternative Label",
-              "default": "Envelop"
+              "default": "Envelope"
             }
           }
         },
@@ -1120,6 +1121,13 @@
           "type": "boolean",
           "default": false
         },
+        "colorVariant": {
+          "title": "Color variant",
+          "type": "string",
+          "enumNames": ["Main", "Light", "Accent"],
+          "enum": ["main", "light", "accent"],
+          "default": "main"
+        },
         "toastSubscribe": {
           "title": "Toast Subscribe",
           "type": "object",
@@ -1249,14 +1257,14 @@
                 "icon": {
                   "title": "Icon",
                   "type": "string",
-                  "enumNames": ["Envelop"],
-                  "enum": ["Envelop"],
-                  "default": "Envelop"
+                  "enumNames": ["Envelope"],
+                  "enum": ["Envelope"],
+                  "default": "Envelope"
                 },
                 "alt": {
                   "type": "string",
                   "title": "Alternative Label",
-                  "default": "Envelop"
+                  "default": "Envelope"
                 }
               }
             },
@@ -1302,10 +1310,62 @@
               "type": "string",
               "default": "Loading..."
             },
-            "card": {
-              "title": "Newsletter should be in card format?",
-              "type": "boolean",
-              "default": true
+            "colorVariant": {
+              "title": "Color variant",
+              "type": "string",
+              "enumNames": ["Main", "Light", "Accent"],
+              "enum": ["main", "light", "accent"],
+              "default": "main"
+            },
+            "toastSubscribe": {
+              "title": "Toast Subscribe",
+              "type": "object",
+              "properties": {
+                "title": {
+                  "title": "Title",
+                  "description": "Message Title",
+                  "type": "string",
+                  "default": "Hooray!"
+                },
+                "message": {
+                  "title": "Message",
+                  "description": "Message",
+                  "type": "string",
+                  "default": "Thank for your subscription."
+                },
+                "icon": {
+                  "title": "Icon",
+                  "type": "string",
+                  "enumNames": ["CircleWavyCheck"],
+                  "enum": ["CircleWavyCheck"],
+                  "default": "CircleWavyCheck"
+                }
+              }
+            },
+            "toastSubscribeError": {
+              "title": "Toast Subscribe Error",
+              "type": "object",
+              "properties": {
+                "title": {
+                  "title": "Title",
+                  "description": "Message Title",
+                  "type": "string",
+                  "default": "Oops."
+                },
+                "message": {
+                  "title": "Message",
+                  "description": "Message",
+                  "type": "string",
+                  "default": "Something went wrong. Please Try again."
+                },
+                "icon": {
+                  "title": "Icon",
+                  "type": "string",
+                  "enumNames": ["CircleWavyWarning"],
+                  "enum": ["CircleWavyWarning"],
+                  "default": "CircleWavyWarning"
+                }
+              }
             }
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.66",
+  "version": "2.2.68",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -38,10 +38,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.2.56",
-    "@faststore/components": "^2.2.63",
+    "@faststore/components": "^2.2.67",
     "@faststore/graphql-utils": "^2.2.56",
     "@faststore/sdk": "^2.2.61",
-    "@faststore/ui": "^2.2.63",
+    "@faststore/ui": "^2.2.67",
     "@graphql-codegen/cli": "^3.3.1",
     "@graphql-codegen/typescript": "^3.0.4",
     "@graphql-codegen/typescript-operations": "^3.0.4",
@@ -123,5 +123,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "81034df9aab52c9772e5c4684fc5c2138890b24b"
+  "gitHead": "7f7a80acfe28da4f8466d5513411c3a01722e959"
 }

package/src/components/sections/BannerNewsletter/BannerNewsletter.tsx

@@ -9,7 +9,7 @@ function BannerNewsletter({
   newsletter,
 }: {
   banner: BannerTextProps
-  newsletter: NewsletterProps
+  newsletter: Omit<NewsletterProps, 'card'>
 }) {
   return (
     <Section className={`${styles.section} section-banner-newsletter`}>
@@ -22,6 +22,8 @@ function BannerNewsletter({
           colorVariant={banner.colorVariant}
         />
         <Newsletter
+          card
+          colorVariant={newsletter.colorVariant}
           title={newsletter.title}
           description={newsletter.description}
           icon={newsletter.icon}
@@ -30,9 +32,9 @@ function BannerNewsletter({
           displayNameInput={newsletter.displayNameInput}
           nameInputLabel={newsletter.nameInputLabel}
           subscribeButtonLabel={newsletter.subscribeButtonLabel}
+          subscribeButtonLoadingLabel={newsletter.subscribeButtonLoadingLabel}
           toastSubscribe={newsletter.toastSubscribe}
           toastSubscribeError={newsletter.toastSubscribeError}
-          card={newsletter.card}
         />
       </div>
     </Section>

package/src/components/sections/BannerText/BannerText.tsx

@@ -33,26 +33,24 @@ function BannerText({
 
   return (
     <Section className={`${styles.section} section-banner layout__section`}>
-      <div className="layout__content">
-        <BannerTextWrapper.Component
-          {...BannerTextWrapper.props}
-          variant={variant ?? BannerTextWrapper.props.variant ?? 'primary'}
-          colorVariant={
-            colorVariant ?? BannerTextWrapper.props.colorVariant ?? 'main'
+      <BannerTextWrapper.Component
+        {...BannerTextWrapper.props}
+        variant={variant ?? BannerTextWrapper.props.variant ?? 'primary'}
+        colorVariant={
+          colorVariant ?? BannerTextWrapper.props.colorVariant ?? 'main'
+        }
+      >
+        <BannerTextContent.Component
+          {...BannerTextContent.props}
+          title={title}
+          caption={caption}
+          link={linkUrl ?? BannerTextContent.props.link}
+          linkText={linkText ?? BannerTextContent.props.linkText}
+          linkTargetBlank={
+            linkTargetBlank ?? BannerTextContent.props.linkTargetBlank
           }
-        >
-          <BannerTextContent.Component
-            {...BannerTextContent.props}
-            title={title}
-            caption={caption}
-            link={linkUrl ?? BannerTextContent.props.link}
-            linkText={linkText ?? BannerTextContent.props.linkText}
-            linkTargetBlank={
-              linkTargetBlank ?? BannerTextContent.props.linkTargetBlank
-            }
-          />
-        </BannerTextWrapper.Component>
-      </div>
+        />
+      </BannerTextWrapper.Component>
     </Section>
   )
 }

package/src/components/sections/Footer/Footer.tsx

@@ -55,7 +55,9 @@ const Footer = ({
 }: FooterProps) => {
   const homeLabel = 'Go to Home'
   return (
-    <Section className={`section ${styles.section} section-footer`}>
+    <Section
+      className={`section ${styles.section} section-footer layout__section`}
+    >
       <UIFooter>
         <UIIncentives incentives={incentives} />
         <UIFooterNavigation>

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

@@ -1,5 +1,7 @@
 @layer components {
   .section {
+    margin-bottom: 0;
+
     @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";

package/src/components/sections/Newsletter/Newsletter.tsx

@@ -1,31 +1,42 @@
-import { ComponentPropsWithRef } from 'react'
+import {
+  NewsletterProps as UINewsletterProps,
+  NewsletterAddendumProps as UINewsletterAddendumProps,
+  NewsletterFormProps as UINewsletterFormProps,
+  NewsletterHeaderProps as UINewsletterHeaderProps,
+} from '@faststore/ui'
+
 import UINewsletter from 'src/components/ui/Newsletter'
-import { SubscribeMessage } from 'src/components/ui/Newsletter/Newsletter'
 
 import Section from '../Section'
 import styles from './section.module.scss'
 
-export interface NewsletterProps
-  extends Omit<ComponentPropsWithRef<'form'>, 'title' | 'onSubmit'> {
+type SubscribeMessage = {
+  icon: string
+  title: string
+  message: string
+}
+
+export interface NewsletterProps {
   /**
-   * Icon for the section.
+   * Title for the section.
    */
-  icon: {
-    icon: string
-    alt: string
-  }
+  title: UINewsletterHeaderProps['title']
   /**
-   * Title for the section.
+   * The card Variant
    */
-  title: string
+  card?: UINewsletterProps['card']
+  /**
+   * Specifies the component's color variant combination.
+   */
+  colorVariant?: UINewsletterProps['colorVariant']
   /**
    * A description for the section.
    */
-  description?: string
+  description?: UINewsletterHeaderProps['description']
   /**
    * The Privacy Policy disclaimer.
    */
-  privacyPolicy?: string
+  privacyPolicy?: UINewsletterAddendumProps['addendum']
   /**
    * The email input label.
    */
@@ -34,6 +45,13 @@ export interface NewsletterProps
    * The name input visibility.
    */
   displayNameInput?: boolean
+  /**
+   * Icon for the section.
+   */
+  icon?: {
+    alt: string
+    icon: string
+  }
   /**
    * The name input label.
    */
@@ -43,13 +61,17 @@ export interface NewsletterProps
    */
   subscribeButtonLabel?: string
   /**
-   * The card Variant
+   * The subscribe button loading label.
    */
-  card: Boolean
-
-  toastSubscribe: SubscribeMessage
-
-  toastSubscribeError: SubscribeMessage
+  subscribeButtonLoadingLabel?: string
+  /**
+   * Toast attributes for successful subscriptions.
+   */
+  toastSubscribe?: SubscribeMessage
+  /**
+   * Toast attributes for unsuccessful subscriptions.
+   */
+  toastSubscribeError?: SubscribeMessage
 }
 
 const Newsletter = function Newsletter({
@@ -61,13 +83,15 @@ const Newsletter = function Newsletter({
   displayNameInput,
   nameInputLabel,
   subscribeButtonLabel,
+  subscribeButtonLoadingLabel,
   card,
   toastSubscribe,
   toastSubscribeError,
+  colorVariant,
   ...otherProps
 }: NewsletterProps) {
   return (
-    <Section className={`${styles.section} section-newsletter`}>
+    <Section className={`${styles.section} section-newsletter layout__section`}>
       <UINewsletter
         icon={icon}
         title={title}
@@ -77,9 +101,11 @@ const Newsletter = function Newsletter({
         displayNameInput={displayNameInput}
         nameInputLabel={nameInputLabel}
         subscribeButtonLabel={subscribeButtonLabel}
+        subscribeButtonLoadingLabel={subscribeButtonLoadingLabel}
         toastSubscribe={toastSubscribe}
         toastSubscribeError={toastSubscribeError}
         card={card}
+        colorVariant={colorVariant}
         {...otherProps}
       />
     </Section>

package/src/components/sections/Newsletter/Overrides.tsx

@@ -2,40 +2,57 @@ import {
   Button as UIButton,
   InputField as UIInputField,
   Icon as UIIcon,
+  Newsletter as UINewsletter,
+  NewsletterContent as UINewsletterContent,
+  NewsletterForm as UINewsletterForm,
+  NewsletterHeader as UINewsletterHeader,
 } from '@faststore/ui'
-import { NewsletterAddendum } from 'src/components/ui/Newsletter/NewsletterAddendum'
+
+import { NewsletterAddendum as UINewsletterAddendum } from 'src/components/ui/Newsletter/NewsletterAddendum'
 
 import { getSectionOverrides } from 'src/sdk/overrides/overrides'
 import { override } from 'src/customizations/src/components/overrides/Newsletter'
 import type { SectionOverrideDefinition } from 'src/typings/overridesDefinition'
 
 const {
+  Newsletter,
+  NewsletterAddendum,
+  NewsletterContent,
+  NewsletterForm,
+  NewsletterHeader,
   ToastIconSuccess,
   ToastIconError,
   HeaderIcon,
   InputFieldName,
   InputFieldEmail,
   Button,
-  __experimentalNewsletterAddendum,
 } = getSectionOverrides(
   {
+    Newsletter: UINewsletter,
+    NewsletterAddendum: UINewsletterAddendum,
+    NewsletterContent: UINewsletterContent,
+    NewsletterForm: UINewsletterForm,
+    NewsletterHeader: UINewsletterHeader,
     ToastIconSuccess: UIIcon,
     ToastIconError: UIIcon,
     HeaderIcon: UIIcon,
     InputFieldName: UIInputField,
     InputFieldEmail: UIInputField,
     Button: UIButton,
-    __experimentalNewsletterAddendum: NewsletterAddendum,
   },
   override as SectionOverrideDefinition<'Newsletter'>
 )
 
 export {
+  Newsletter,
+  NewsletterAddendum,
+  NewsletterContent,
+  NewsletterForm,
+  NewsletterHeader,
   ToastIconSuccess,
   ToastIconError,
   HeaderIcon,
   InputFieldName,
   InputFieldEmail,
   Button,
-  __experimentalNewsletterAddendum,
 }

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

@@ -1,7 +1,5 @@
 @layer components {
   .section {
-    margin-bottom: 0;
-
     @import "@faststore/ui/src/components/atoms/Button/styles.scss";
     @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
     @import "@faststore/ui/src/components/atoms/Input/styles.scss";