@faststore/core 2.2.66 → 2.2.68

package/src/components/ui/Newsletter/Newsletter.tsx

@@ -1,204 +1,155 @@
-import { ComponentPropsWithRef, FormEvent } from 'react'
-import { forwardRef, useRef } from 'react'
+import { useRef } from 'react'
+import type { FormEvent } from 'react'
+
 import { useUI } from '@faststore/ui'
 import type { InputFieldProps } from '@faststore/ui'
 
 import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
+
+import type { NewsletterProps as SectionNewsletterProps } from 'src/components/sections/Newsletter'
 import {
+  Newsletter as NewsletterWrapper,
+  NewsletterAddendum,
+  NewsletterContent,
+  NewsletterForm,
+  NewsletterHeader,
   ToastIconSuccess,
   ToastIconError,
   HeaderIcon,
   InputFieldName,
   InputFieldEmail,
   Button,
-  __experimentalNewsletterAddendum as NewsletterAddendum,
 } from 'src/components/sections/Newsletter/Overrides'
 
-export type SubscribeMessage = {
-  title: string
-  message: string
-  icon: string
-}
+export type NewsletterProps = SectionNewsletterProps
 
-export interface NewsletterProps
-  extends Omit<ComponentPropsWithRef<'form'>, 'title' | 'onSubmit'> {
-  /**
-   * Icon for the section.
-   */
-  icon: {
-    icon: string
-    alt: string
-  }
-  /**
-   * Title for the section.
-   */
-  title: string
-  /**
-   * A description for the section.
-   */
-  description?: string
-  /**
-   * The Privacy Policy disclaimer.
-   */
-  privacyPolicy?: string
-  /**
-   * The email input label.
-   */
-  emailInputLabel?: string
-  /**
-   * The name input visibility.
-   */
-  displayNameInput?: boolean
-  /**
-   * The name input label.
-   */
-  nameInputLabel?: string
-  /**
-   * The subscribe button label.
-   */
-  subscribeButtonLabel?: string
-  /**
-   * The subscribe button loading label.
-   */
-  subscribeButtonLoadingLabel?: string
-  /**
-   * The card Variant
-   */
-  card: Boolean
+function Newsletter({
+  icon: { icon, alt: iconAlt },
+  title,
+  description,
+  privacyPolicy,
+  emailInputLabel,
+  displayNameInput,
+  nameInputLabel,
+  subscribeButtonLabel,
+  subscribeButtonLoadingLabel,
+  card,
+  toastSubscribe,
+  toastSubscribeError,
+  colorVariant,
+}: NewsletterProps) {
+  const { pushToast } = useUI()
+  const { subscribeUser, loading, data } = useNewsletter()
 
-  toastSubscribe: SubscribeMessage
+  const formRef = useRef<HTMLFormElement>(null)
+  const nameInputRef = useRef<HTMLInputElement>(null)
+  const emailInputRef = useRef<HTMLInputElement>(null)
 
-  toastSubscribeError: SubscribeMessage
-}
+  const onSubmit = (event: FormEvent) => {
+    event.preventDefault()
 
-const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
-  function Newsletter(
-    {
-      icon,
-      title,
-      description,
-      privacyPolicy,
-      emailInputLabel,
-      displayNameInput,
-      nameInputLabel,
-      subscribeButtonLabel,
-      subscribeButtonLoadingLabel,
-      card,
-      toastSubscribe,
-      toastSubscribeError,
-    },
-    ref
-  ) {
-    const { subscribeUser, loading, data } = useNewsletter()
-    const nameInputRef = useRef<HTMLInputElement>(null)
-    const emailInputRef = useRef<HTMLInputElement>(null)
+    subscribeUser({
+      data: {
+        name: nameInputRef.current?.value ?? '',
+        email: emailInputRef.current?.value ?? '',
+      },
+    })
 
-    const { pushToast } = useUI()
-
-    const handleSubmit = (event: FormEvent) => {
-      event.preventDefault()
-      subscribeUser({
-        data: {
-          name: nameInputRef.current?.value ?? '',
-          email: emailInputRef.current?.value ?? '',
-        },
+    if (data?.subscribeToNewsletter?.id) {
+      pushToast({
+        ...toastSubscribe,
+        status: 'INFO',
+        icon: (
+          <ToastIconSuccess.Component
+            width={30}
+            height={30}
+            {...ToastIconSuccess.props}
+            name={toastSubscribe.icon ?? ToastIconSuccess.props.name}
+          />
+        ),
+      })
+    } else {
+      pushToast({
+        ...toastSubscribeError,
+        status: 'ERROR',
+        icon: (
+          <ToastIconError.Component
+            width={30}
+            height={30}
+            {...ToastIconError.props}
+            name={toastSubscribe.icon ?? ToastIconError.props.name}
+          />
+        ),
       })
-
-      if (data?.subscribeToNewsletter?.id) {
-        pushToast({
-          ...toastSubscribe,
-          status: 'INFO',
-          icon: (
-            <ToastIconSuccess.Component
-              width={30}
-              height={30}
-              {...ToastIconSuccess.props}
-              name={toastSubscribe.icon ?? ToastIconSuccess.props.name}
-            />
-          ),
-        })
-      } else {
-        pushToast({
-          ...toastSubscribeError,
-          status: 'ERROR',
-          icon: (
-            <ToastIconError.Component
-              width={30}
-              height={30}
-              {...ToastIconError.props}
-              name={toastSubscribe.icon ?? ToastIconError.props.name}
-            />
-          ),
-        })
-      }
-
-      const formElement = event.currentTarget as HTMLFormElement
-
-      formElement.reset()
     }
 
-    return (
-      <div data-fs-newsletter={card ? 'card' : ''}>
-        <form
-          ref={ref}
-          data-fs-newsletter-form
-          data-fs-content="newsletter"
-          onSubmit={handleSubmit}
-        >
-          <header data-fs-newsletter-header>
-            <h3>
-              <HeaderIcon.Component
-                width={32}
-                height={32}
-                {...HeaderIcon.props}
-                name={icon?.icon ?? HeaderIcon.props.name}
-              />
-              {title}
-            </h3>
-            {description && <span> {description}</span>}
-          </header>
-
-          <div data-fs-newsletter-controls>
-            <>
-              {displayNameInput ? (
-                <InputFieldName.Component
-                  id="newsletter-name"
-                  required
-                  {...(InputFieldName.props as InputFieldProps)}
-                  label={nameInputLabel ?? InputFieldName.props.label}
-                  // Dynamic props shouldn't be overridable
-                  // This decision can be reviewed later if needed
-                  inputRef={nameInputRef}
-                />
-              ) : null}
-              <InputFieldEmail.Component
-                id="newsletter-email"
-                type="email"
-                required
-                {...(InputFieldEmail.props as InputFieldProps)}
-                label={emailInputLabel ?? InputFieldEmail.props.label}
-                // Dynamic props shouldn't be overridable
-                // This decision can be reviewed later if needed
-                inputRef={emailInputRef}
-              />
-              <NewsletterAddendum.Component
-                addendum={privacyPolicy}
-                {...NewsletterAddendum.props}
-              />
-              <Button.Component
-                variant="secondary"
-                inverse
-                type="submit"
-                {...Button.props}
-              >
-                {loading ? subscribeButtonLoadingLabel : subscribeButtonLabel}
-              </Button.Component>
-            </>
-          </div>
-        </form>
-      </div>
-    )
+    formRef.current.reset()
   }
-)
+
+  return (
+    <NewsletterWrapper.Component
+      card={card}
+      colorVariant={colorVariant}
+      {...NewsletterWrapper.props}
+    >
+      <NewsletterForm.Component
+        ref={formRef}
+        onSubmit={onSubmit}
+        {...NewsletterForm.props}
+      >
+        <NewsletterHeader.Component
+          title={title}
+          description={description}
+          icon={
+            <HeaderIcon.Component
+              width={32}
+              height={32}
+              {...HeaderIcon.props}
+              name={icon ?? HeaderIcon.props.name}
+              aria-label={iconAlt ?? HeaderIcon.props['aria-label']}
+            />
+          }
+          {...NewsletterHeader.props}
+        />
+
+        <NewsletterContent.Component {...NewsletterContent.props}>
+          {displayNameInput && (
+            <InputFieldName.Component
+              id="newsletter-name"
+              required
+              {...(InputFieldName.props as InputFieldProps)}
+              label={nameInputLabel ?? InputFieldName.props.label}
+              // Dynamic props shouldn't be overridable
+              // This decision can be reviewed later if needed
+              inputRef={nameInputRef}
+            />
+          )}
+          <InputFieldEmail.Component
+            id="newsletter-email"
+            type="email"
+            required
+            {...(InputFieldEmail.props as InputFieldProps)}
+            label={emailInputLabel ?? InputFieldEmail.props.label}
+            // Dynamic props shouldn't be overridable
+            // This decision can be reviewed later if needed
+            inputRef={emailInputRef}
+          />
+          <NewsletterAddendum.Component
+            addendum={privacyPolicy}
+            {...NewsletterAddendum.props}
+          />
+          <Button.Component
+            variant="secondary"
+            inverse
+            type="submit"
+            {...Button.props}
+          >
+            {loading ? subscribeButtonLoadingLabel : subscribeButtonLabel}
+          </Button.Component>
+        </NewsletterContent.Component>
+      </NewsletterForm.Component>
+    </NewsletterWrapper.Component>
+  )
+}
 
 export default Newsletter

package/src/components/ui/Newsletter/NewsletterAddendum.tsx

@@ -14,17 +14,19 @@
  * This is a limitation not only for this component, but for every native & custom component that makes use of Rich Text.
  */
 import draftToHtml from 'draftjs-to-html'
+import { NewsletterAddendum as UINewsletterAddendum } from '@faststore/ui'
+import type { NewsletterAddendumProps as UINewsletterAddendumProps } from '@faststore/ui'
 
 export interface NewsletterAddendumProps {
   /**
    * Expects a string of a JSON object in the form of draftjs's raw content state.
    */
-  addendum: string
+  addendum: UINewsletterAddendumProps['addendum']
 }
 
 function getLinkElementAsString(url: string, text: string) {
   return `
-    <a 
+    <a
       data-fs-link="true"
       data-fs-link-variant="inline"
       data-fs-link-inverse="true"
@@ -75,12 +77,9 @@ export function NewsletterAddendum({
   ...otherProps
 }: NewsletterAddendumProps) {
   return (
-    <span
-      data-fs-newsletter-addendum
-      dangerouslySetInnerHTML={{
-        __html: cmsToHtml(addendum),
-      }}
+    <UINewsletterAddendum
+      dangerouslySetInnerHTML={{ __html: cmsToHtml(addendum) }}
       {...otherProps}
-    ></span>
+    />
   )
 }

package/src/typings/overrides.ts

@@ -26,6 +26,11 @@ import type {
   NavbarSliderFooterProps,
   NavbarSliderHeaderProps,
   NavbarSliderProps,
+  NewsletterProps,
+  NewsletterAddendumProps,
+  NewsletterContentProps,
+  NewsletterFormProps,
+  NewsletterHeaderProps,
   ProductPriceProps,
   ProductShelfProps,
   ProductTitleProps,
@@ -40,7 +45,6 @@ import type {
   ComponentOverrideDefinition,
   SectionOverrideDefinition,
 } from './overridesDefinition'
-import { NewsletterAddendumProps } from 'src/components/ui/Newsletter/NewsletterAddendum'
 
 export type SectionOverride = {
   [K in keyof SectionsOverrides]: SectionOverrideDefinition<K>
@@ -134,6 +138,23 @@ export type SectionsOverrides = {
     >
   }
   Newsletter: {
+    Newsletter: ComponentOverrideDefinition<NewsletterProps, NewsletterProps>
+    NewsletterAddendum: ComponentOverrideDefinition<
+      NewsletterAddendumProps,
+      NewsletterAddendumProps
+    >
+    NewsletterContent: ComponentOverrideDefinition<
+      NewsletterContentProps,
+      NewsletterContentProps
+    >
+    NewsletterForm: ComponentOverrideDefinition<
+      NewsletterFormProps,
+      NewsletterFormProps
+    >
+    NewsletterHeader: ComponentOverrideDefinition<
+      NewsletterHeaderProps,
+      NewsletterHeaderProps
+    >
     ToastIconSuccess: ComponentOverrideDefinition<IconProps, IconProps>
     ToastIconError: ComponentOverrideDefinition<IconProps, IconProps>
     HeaderIcon: ComponentOverrideDefinition<IconProps, IconProps>
@@ -146,10 +167,6 @@ export type SectionsOverrides = {
       Omit<InputFieldProps, 'inputRef'>
     >
     Button: ComponentOverrideDefinition<ButtonProps, ButtonProps>
-    __experimentalNewsletterAddendum: ComponentOverrideDefinition<
-      NewsletterAddendumProps,
-      NewsletterAddendumProps
-    >
   }
   ProductDetails: {
     ProductTitle: ComponentOverrideDefinition<

package/.next/static/Z7PsIH45Cy7Rnzoy9ETnz/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,e){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[s,c,a,"static/css/d2e8564f2bf133d9.css","static/chunks/pages/index-9bda5b7b8c3a723e.js"],"/404":[s,c,a,e,"static/chunks/pages/404-5e6c01505839ca4e.js"],"/500":[s,c,a,e,"static/chunks/pages/500-92239cdd00a581dd.js"],"/_error":["static/chunks/pages/_error-319451dea77827a6.js"],"/account":[s,c,a,"static/chunks/pages/account-2d15d4e38b855872.js"],"/checkout":[s,c,a,"static/chunks/pages/checkout-e34b1a2945839749.js"],"/login":[s,c,a,e,"static/chunks/pages/login-1b197c0b0d5ba457.js"],"/s":[s,c,a,"static/chunks/pages/s-ed126d7e39eec25b.js"],"/[slug]/p":[s,c,a,"static/css/e67c73ff7fbc8c54.css","static/chunks/pages/[slug]/p-1b15ce4b48000425.js"],"/[...slug]":[s,c,a,"static/css/eababca67e15ef4b.css","static/chunks/pages/[...slug]-c7b64458aaf57ba4.js"],sortedPages:["/","/404","/500","/_app","/_error","/account","/checkout","/login","/s","/[slug]/p","/[...slug]"]}}("static/chunks/897-b07932d813bb7dac.js","static/css/7926db3235e499be.css","static/chunks/846-fbe704a112d163f4.js","static/css/df588bb98c0b0ca6.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();