@faststore/core 2.1.8 → 2.1.9

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

@@ -0,0 +1,198 @@
+import { Button as UIButton, InputField as UIInputField } from '@faststore/ui'
+import { ComponentPropsWithRef, FormEvent } from 'react'
+import { forwardRef, useRef } from 'react'
+import { convertFromRaw } from 'draft-js'
+import { stateToHTML } from 'draft-js-export-html'
+import { Icon, useUI } from '@faststore/ui'
+import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
+
+const cmsToHtml = (content) => {
+  if (!content) {
+    return ''
+  }
+  const rawDraftContentState = JSON.parse(content)
+  const html = stateToHTML(convertFromRaw(rawDraftContentState), {
+    entityStyleFn: (entity) => {
+      const entityType = entity.get('type').toLowerCase()
+      if (entityType === 'link') {
+        const data = entity.getData()
+        return {
+          element: 'a',
+          attributes: {
+            'data-fs-link': 'true',
+            'data-fs-link-variant': 'inline',
+            'data-fs-link-inverse': 'true',
+            'data-fs-link-size': 'regular',
+            'data-testid': 'fs-link',
+            href: data.url,
+          },
+        }
+      }
+    },
+  })
+
+  return html
+}
+
+export type SubscribeMessage = {
+  title: string
+  message: string
+  icon: string
+}
+
+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
+
+  toastSubscribe: SubscribeMessage
+
+  toastSubscribeError: SubscribeMessage
+}
+
+const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
+  function Newsletter(
+    {
+      icon,
+      title,
+      description,
+      privacyPolicy,
+      emailInputLabel,
+      displayNameInput,
+      nameInputLabel,
+      subscribeButtonLabel,
+      subscribeButtonLoadingLabel,
+      card,
+      toastSubscribe,
+      toastSubscribeError,
+      ...otherProps
+    },
+    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({
+          ...toastSubscribe,
+          status: 'INFO',
+          icon: <Icon name={toastSubscribe.icon} width={30} height={30} />,
+        })
+      } else {
+        pushToast({
+          ...toastSubscribeError,
+          status: 'ERROR',
+          icon: <Icon name={toastSubscribeError.icon} width={30} height={30} />,
+        })
+      }
+
+      const formElement = event.currentTarget as HTMLFormElement
+
+      formElement.reset()
+    }
+
+    return (
+      <div data-fs-newsletter={card ? 'card' : ''}>
+        <form
+          data-fs-newsletter-form
+          ref={ref}
+          onSubmit={handleSubmit}
+          {...otherProps}
+          className="layout__content"
+        >
+          <header data-fs-newsletter-header>
+            <h3>
+              <Icon name={icon.icon} width={32} height={32} />
+              {title}
+            </h3>
+            {description && <span> {description}</span>}
+          </header>
+
+          <div data-fs-newsletter-controls>
+            <>
+              {displayNameInput ? (
+                <UIInputField
+                  inputRef={nameInputRef}
+                  id="newsletter-name"
+                  label={nameInputLabel}
+                  required
+                />
+              ) : null}
+              <UIInputField
+                inputRef={emailInputRef}
+                id="newsletter-email"
+                label={emailInputLabel}
+                type="email"
+                required
+              />
+              <span
+                data-fs-newsletter-addendum
+                dangerouslySetInnerHTML={{
+                  __html: cmsToHtml(privacyPolicy),
+                }}
+              ></span>
+              <UIButton variant="secondary" inverse type="submit">
+                {loading ? subscribeButtonLoadingLabel : subscribeButtonLabel}
+              </UIButton>
+            </>
+          </div>
+        </form>
+      </div>
+    )
+  }
+)
+
+export default Newsletter

package/src/components/ui/Newsletter/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Newsletter'
+export type { NewsletterProps } from './Newsletter'

package/.next/BUILD_ID

@@ -1 +0,0 @@
-m-KBQyrPnRowl0kHU2Zwh

package/.next/build-manifest.json

@@ -1,123 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/m-KBQyrPnRowl0kHU2Zwh/_buildManifest.js",
-    "static/m-KBQyrPnRowl0kHU2Zwh/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/23a9d5dfc051ec6e.css",
-      "static/chunks/682-5cfea9ed52851ed1.js",
-      "static/css/287f5ba239375052.css",
-      "static/chunks/234-7d72b0ee52936c13.js",
-      "static/css/c7fc1f563fa33060.css",
-      "static/chunks/pages/index-2912eeade1da43bf.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/23a9d5dfc051ec6e.css",
-      "static/chunks/682-5cfea9ed52851ed1.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/404-c3b320b915df45bb.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/23a9d5dfc051ec6e.css",
-      "static/chunks/682-5cfea9ed52851ed1.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/500-d37a3a2e931f6995.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/23a9d5dfc051ec6e.css",
-      "static/chunks/682-5cfea9ed52851ed1.js",
-      "static/css/d4a0d9df8c6df555.css",
-      "static/chunks/791-727eda8f766aa791.js",
-      "static/css/6e41f1b6078c14c1.css",
-      "static/chunks/pages/[...slug]-d4e0a671c6248369.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/23a9d5dfc051ec6e.css",
-      "static/chunks/682-5cfea9ed52851ed1.js",
-      "static/css/287f5ba239375052.css",
-      "static/chunks/234-7d72b0ee52936c13.js",
-      "static/css/0f8ce5203de8ae6f.css",
-      "static/chunks/pages/[slug]/p-2ad8b84fd5d98814.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/css/104f0f3ce3be32c6.css",
-      "static/chunks/pages/_app-79d333aa6001a806.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/23a9d5dfc051ec6e.css",
-      "static/chunks/682-5cfea9ed52851ed1.js",
-      "static/chunks/pages/account-86a1b6e7db03bab6.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/23a9d5dfc051ec6e.css",
-      "static/chunks/682-5cfea9ed52851ed1.js",
-      "static/chunks/pages/checkout-c77dbc66c0b35ec3.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/23a9d5dfc051ec6e.css",
-      "static/chunks/682-5cfea9ed52851ed1.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/login-bbf85bc59afce37c.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-c5cf5350bcb7f6f4.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/738-a5ff304828f20cbf.js",
-      "static/css/23a9d5dfc051ec6e.css",
-      "static/chunks/682-5cfea9ed52851ed1.js",
-      "static/css/d4a0d9df8c6df555.css",
-      "static/chunks/791-727eda8f766aa791.js",
-      "static/chunks/pages/s-dd486933e8ba7fbf.js"
-    ]
-  },
-  "ampFirstPages": []
-}