@faststore/core 2.1.5 → 2.1.9

package/.turbo/turbo-build.log

@@ -7,10 +7,19 @@ This information is used to shape Next.js' roadmap and prioritize features.
 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
 https://nextjs.org/telemetry
 
+Browserslist: caniuse-lite is outdated. Please run:
+  npx browserslist@latest --update-db
+  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
 info  - Linting and checking validity of types...
 info  - Creating an optimized production build...
 info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
+Browserslist: caniuse-lite is outdated. Please run:
+  npx browserslist@latest --update-db
+  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
 info  - Using external babel configuration from /home/runner/work/faststore/faststore/packages/core/.babelrc
+Browserslist: caniuse-lite is outdated. Please run:
+  npx update-browserslist-db@latest
+  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 info  - Compiled successfully
 info  - Collecting page data...
 info  - Generating static pages (0/7)
@@ -21,18 +30,18 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.47 kB         126 kB
-├   └ css/c7fc1f563fa33060.css             7.18 kB
-├   /_app                                  0 B            77.8 kB
-├ ● /[...slug]                             8.79 kB         134 kB
+┌ ● /                                      3.21 kB         197 kB
+├   └ css/0d62ff2d64099b84.css             6.47 kB
+├   /_app                                  0 B            77.9 kB
+├ ● /[...slug]                             8.8 kB          134 kB
 ├   └ css/6e41f1b6078c14c1.css             7.9 kB
-├ ● /[slug]/p                              11.1 kB         134 kB
+├ ● /[slug]/p                              11 kB           204 kB
 ├   └ css/0f8ce5203de8ae6f.css             11.2 kB
 ├ ○ /404                                   1.09 kB         113 kB
 ├ ● /500                                   1.11 kB         113 kB
 ├ ● /account                               668 B           113 kB
-├ λ /api/graphql                           0 B            77.8 kB
-├ λ /api/preview                           0 B            77.8 kB
+├ λ /api/graphql                           0 B            77.9 kB
+├ λ /api/preview                           0 B            77.9 kB
 ├ ● /checkout                              657 B           113 kB
 ├ ● /login                                 1.01 kB         113 kB
 └ ● /s                                     1.11 kB         126 kB
@@ -40,7 +49,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-79d333aa6001a806.js  6.38 kB
-  ├ chunks/webpack-c5cf5350bcb7f6f4.js     2.21 kB
+  ├ chunks/webpack-3eefca84f4c29194.js     2.28 kB
   └ css/104f0f3ce3be32c6.css               2.79 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/cms/faststore/sections.json

@@ -1033,7 +1033,10 @@
         },
         "privacyPolicy": {
           "title": "Privacy Policy Disclaimer",
-          "type": "string"
+          "type": "string",
+          "widget": {
+            "ui:widget": "draftjs-rich-text"
+          }
         },
         "emailInputLabel": {
           "title": "Email input label",
@@ -1054,6 +1057,66 @@
           "title": "Subscribe button label",
           "type": "string",
           "default": "Subscribe"
+        },
+        "subscribeButtonLoadingLabel": {
+          "title": "Subscribe button loading label",
+          "type": "string",
+          "default": "Loading..."
+        },
+        "card": {
+          "title": "Newsletter should be in card format?",
+          "type": "boolean",
+          "default": false
+        },
+        "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"
+            }
+          }
         }
       }
     }
@@ -1081,11 +1144,13 @@
           "properties": {
             "title": {
               "title": "Title",
-              "type": "string"
+              "type": "string",
+              "default": "Get to Know Our Next Release"
             },
             "caption": {
               "title": "Caption",
-              "type": "string"
+              "type": "string",
+              "default": "Discover cutting-edge tech, advanced features, and a seamless user experience. Get ready for the future!"
             },
             "link": {
               "title": "Call to Action",
@@ -1094,11 +1159,13 @@
               "properties": {
                 "text": {
                   "title": "Text",
-                  "type": "string"
+                  "type": "string",
+                  "default": "Shop now"
                 },
                 "url": {
                   "title": "URL",
-                  "type": "string"
+                  "type": "string",
+                  "default": "/"
                 }
               }
             },
@@ -1106,13 +1173,15 @@
               "title": "Color variant",
               "type": "string",
               "enumNames": ["Main", "Light", "Accent"],
-              "enum": ["main", "light", "accent"]
+              "enum": ["main", "light", "accent"],
+              "default": "light"
             },
             "variant": {
               "title": "Variant",
               "type": "string",
               "enumNames": ["Primary", "Secondary"],
-              "enum": ["primary", "secondary"]
+              "enum": ["primary", "secondary"],
+              "default": "secondary"
             }
           }
         },
@@ -1121,6 +1190,24 @@
           "type": "object",
           "required": ["title", "description"],
           "properties": {
+            "icon": {
+              "title": "Icon",
+              "type": "object",
+              "properties": {
+                "icon": {
+                  "title": "Icon",
+                  "type": "string",
+                  "enumNames": ["Envelop"],
+                  "enum": ["Envelop"],
+                  "default": "Envelop"
+                },
+                "alt": {
+                  "type": "string",
+                  "title": "Alternative Label",
+                  "default": "Envelop"
+                }
+              }
+            },
             "title": {
               "title": "Title",
               "type": "string",
@@ -1130,6 +1217,43 @@
               "title": "Description",
               "type": "string",
               "default": "Receive our news and promotions in advance"
+            },
+            "privacyPolicy": {
+              "title": "Privacy Policy Disclaimer",
+              "type": "string",
+              "widget": {
+                "ui:widget": "draftjs-rich-text"
+              }
+            },
+            "emailInputLabel": {
+              "title": "Email input label",
+              "type": "string",
+              "default": "Your Email"
+            },
+            "displayNameInput": {
+              "title": "Request name?",
+              "type": "boolean",
+              "default": true
+            },
+            "nameInputLabel": {
+              "title": "Name input label",
+              "type": "string",
+              "default": "Your Name"
+            },
+            "subscribeButtonLabel": {
+              "title": "Subscribe button label",
+              "type": "string",
+              "default": "Subscribe"
+            },
+            "subscribeButtonLoadingLabel": {
+              "title": "Subscribe button loading label",
+              "type": "string",
+              "default": "Loading..."
+            },
+            "card": {
+              "title": "Newsletter should be in card format?",
+              "type": "boolean",
+              "default": true
             }
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.5",
+  "version": "2.1.9",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -29,16 +29,18 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.1.1",
-    "@faststore/components": "^2.1.4",
-    "@faststore/graphql-utils": "^2.1.1",
-    "@faststore/sdk": "^2.1.1",
-    "@faststore/ui": "^2.1.4",
+    "@faststore/api": "^2.1.9",
+    "@faststore/components": "^2.1.9",
+    "@faststore/graphql-utils": "^2.1.9",
+    "@faststore/sdk": "^2.1.9",
+    "@faststore/ui": "^2.1.9",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
     "chalk": "^5.2.0",
     "css-loader": "^6.7.1",
+    "draft-js": "^0.11.7",
+    "draft-js-export-html": "^1.4.1",
     "graphql": "^15.0.0",
     "include-media": "^1.4.10",
     "msw": "^0.43.1",
@@ -59,7 +61,7 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.10",
-    "@faststore/eslint-config": "^2.1.1",
+    "@faststore/eslint-config": "^2.1.9",
     "@faststore/lighthouse": "^1.12.32",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/typescript": "^2.5.1",
@@ -108,5 +110,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "4ff1ab24fa4280397a532c9362741bd97f4a38d9"
+  "gitHead": "e8c0051ff4e990fcf9375bc8a22f76570967e1af"
 }

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

@@ -1,31 +1,39 @@
-import {
-  Banner as UIBanner,
-  BannerContent as UIBannerContent,
-} from '@faststore/ui'
-import Newsletter from '../Newsletter'
+import BannerText, { BannerTextProps } from 'src/components/sections/BannerText'
+import Newsletter, { NewsletterProps } from 'src/components/sections/Newsletter'
 import Section from '../Section'
 import styles from './section.module.scss'
 
-function BannerNewsletter() {
+function BannerNewsletter({
+  banner,
+  newsletter,
+}: {
+  banner: BannerTextProps
+  newsletter: NewsletterProps
+}) {
   return (
     <Section
       className={`${styles.section} section-banner-newsletter layout__content`}
     >
       <div data-fs-banner-newsletter>
-        <UIBanner variant="secondary" colorVariant="light">
-          <UIBannerContent
-            title="Get to Know Our Next Release"
-            caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam elit nisi, vehicula in turpis sit amet, posuere aliquam nisl. "
-            link="/"
-            linkText="Shop Now"
-          />
-        </UIBanner>
-
+        <BannerText
+          title={banner.title}
+          caption={banner.caption}
+          link={banner?.link}
+          variant={banner.variant}
+          colorVariant={banner.colorVariant}
+        />
         <Newsletter
-          title="Get News and Special Offers!"
-          description="Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here."
-          card
-          lite
+          title={newsletter.title}
+          description={newsletter.description}
+          icon={newsletter.icon}
+          privacyPolicy={newsletter.privacyPolicy}
+          emailInputLabel={newsletter.emailInputLabel}
+          displayNameInput={newsletter.displayNameInput}
+          nameInputLabel={newsletter.nameInputLabel}
+          subscribeButtonLabel={newsletter.subscribeButtonLabel}
+          toastSubscribe={newsletter.toastSubscribe}
+          toastSubscribeError={newsletter.toastSubscribeError}
+          card={newsletter.card}
         />
       </div>
     </Section>

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

@@ -1,143 +1,89 @@
-import { Button as UIButton, InputField as UIInputField } from '@faststore/ui'
-import type { ComponentPropsWithRef, FormEvent, ReactNode } from 'react'
-import { forwardRef, useRef } from 'react'
-
-import { Icon, useUI } from '@faststore/ui'
-import Link from 'src/components/ui/Link'
-import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
+import { ComponentPropsWithRef } from 'react'
+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'> {
+  /**
+   * Icon for the section.
+   */
+  icon: {
+    icon: string
+    alt: string
+  }
   /**
    * Title for the section.
    */
-  title: ReactNode
+  title: string
   /**
    * A description for the section.
    */
-  description?: ReactNode
+  description?: string
   /**
-   * The card Variant
+   * The Privacy Policy disclaimer.
    */
-  card?: boolean
+  privacyPolicy?: string
   /**
-   * The compact version of the Newsletter component
+   * The email input label.
    */
-  lite?: boolean
-}
-
-const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
-  function Newsletter({ title, description, card = false, lite = false }, ref) {
-    const { subscribeUser, loading, data } = useNewsletter()
-    const nameInputRef = useRef<HTMLInputElement>(null)
-    const emailInputRef = useRef<HTMLInputElement>(null)
-
-    const { pushToast } = useUI()
-
-    const handleSubmit = (event: FormEvent) => {
-      event.preventDefault()
-      subscribeUser({
-        data: {
-          name: nameInputRef.current?.value ?? '',
-          email: emailInputRef.current?.value ?? '',
-        },
-      })
-
-      if (data?.subscribeToNewsletter?.id) {
-        pushToast({
-          title: 'Hooray!',
-          message: 'Thank for your subscription.',
-          status: 'INFO',
-          icon: <Icon name="CircleWavyCheck" width={30} height={30} />,
-        })
-      } else {
-        pushToast({
-          title: 'Oops.',
-          message: 'Something went wrong. Please Try again.',
-          status: 'ERROR',
-          icon: <Icon name="CircleWavyWarning" width={30} height={30} />,
-        })
-      }
-
-      const formElement = event.currentTarget as HTMLFormElement
+  emailInputLabel?: string
+  /**
+   * The name input visibility.
+   */
+  displayNameInput?: boolean
+  /**
+   * The name input label.
+   */
+  nameInputLabel?: string
+  /**
+   * The subscribe button label.
+   */
+  subscribeButtonLabel?: string
+  /**
+   * The card Variant
+   */
+  card: Boolean
 
-      formElement.reset()
-    }
+  toastSubscribe: SubscribeMessage
 
-    return (
-      <Section className={`${styles.section} section-newsletter`}>
-        <div data-fs-newsletter={card ? 'card' : ''}>
-          <form
-            ref={ref}
-            data-fs-newsletter-form
-            onSubmit={handleSubmit}
-            className="layout__content"
-          >
-            <header data-fs-newsletter-header>
-              <h3>
-                <Icon name="Envelop" width={32} height={32} />
-                {title}
-              </h3>
-              {description && <span> {description}</span>}
-            </header>
+  toastSubscribeError: SubscribeMessage
+}
 
-            <div data-fs-newsletter-controls>
-              {lite ? (
-                <>
-                  <UIInputField
-                    inputRef={emailInputRef}
-                    id="newsletter-email"
-                    label="Your Email"
-                    type="email"
-                    required
-                    actionable
-                    onSubmit={() => undefined}
-                    onClear={() => undefined}
-                    buttonActionText="Subscribe"
-                    displayClearButton={false}
-                  />
-                  <span data-fs-newsletter-addendum>
-                    By subscribing to our newsletter you agree to to our{' '}
-                    <Link href="/" inverse variant="inline">
-                      Privacy Policy.
-                    </Link>
-                  </span>
-                </>
-              ) : (
-                <>
-                  <UIInputField
-                    inputRef={nameInputRef}
-                    id="newsletter-name"
-                    label="Your Name"
-                    required
-                  />
-                  <UIInputField
-                    inputRef={emailInputRef}
-                    id="newsletter-email"
-                    label="Your Email"
-                    type="email"
-                    required
-                  />
-                  <span data-fs-newsletter-addendum>
-                    By subscribing to our newsletter you agree to to our{' '}
-                    <Link href="/" inverse variant="inline">
-                      Privacy Policy.
-                    </Link>
-                  </span>
-                  <UIButton variant="secondary" inverse type="submit">
-                    {loading ? 'Loading...' : 'Subscribe'}
-                  </UIButton>
-                </>
-              )}
-            </div>
-          </form>
-        </div>
-      </Section>
-    )
-  }
-)
+const Newsletter = function Newsletter({
+  icon,
+  title,
+  description,
+  privacyPolicy,
+  emailInputLabel,
+  displayNameInput,
+  nameInputLabel,
+  subscribeButtonLabel,
+  card,
+  toastSubscribe,
+  toastSubscribeError,
+  ...otherProps
+}: NewsletterProps) {
+  return (
+    <Section className={`${styles.section} section-newsletter`}>
+      <UINewsletter
+        icon={icon}
+        title={title}
+        description={description}
+        privacyPolicy={privacyPolicy}
+        emailInputLabel={emailInputLabel}
+        displayNameInput={displayNameInput}
+        nameInputLabel={nameInputLabel}
+        subscribeButtonLabel={subscribeButtonLabel}
+        toastSubscribe={toastSubscribe}
+        toastSubscribeError={toastSubscribeError}
+        card={card}
+        {...otherProps}
+      />
+    </Section>
+  )
+}
 
 export default Newsletter