@faststore/core 2.1.99 → 2.1.100

package/.turbo/turbo-build.log

@@ -21,11 +21,11 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.16 kB         197 kB
+┌ ● /                                      3.15 kB         130 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             4.06 kB         209 kB
+├ ● /[...slug]                             4.06 kB         141 kB
 ├   └ css/527e334fa69cf40a.css             1.85 kB
-├ ● /[slug]/p                              10.6 kB         205 kB
+├ ● /[slug]/p                              10.6 kB         137 kB
 ├   └ css/7ca374e5534a3f68.css             11.3 kB
 ├ ○ /404                                   1.19 kB         114 kB
 ├ ● /500                                   1.21 kB         114 kB
@@ -37,11 +37,11 @@ Route (pages)                              Size     First Load JS
 ├ ● /checkout                              657 B           113 kB
 ├ ● /login                                 1.09 kB         114 kB
 └ ● /s                                     4.6 kB          128 kB
-+ First Load JS shared by all              81 kB
++ First Load JS shared by all              80.9 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-40cff0982559d0b8.js  6.46 kB
-  ├ chunks/webpack-aa0b4e883a43f80d.js     2.29 kB
+  ├ chunks/webpack-7bbdc4ae00f1fa43.js     2.22 kB
   └ css/9e76fef1c9ca89af.css               3.06 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.99",
+  "version": "2.1.100",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -39,8 +39,7 @@
     "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",
+    "draftjs-to-html": "^0.9.1",
     "graphql": "^15.0.0",
     "include-media": "^1.4.10",
     "msw": "^0.43.1",
@@ -110,5 +109,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "2ecd31444b00639f05e8b99847df231d8f2f7b0e"
+  "gitHead": "c1c5860557d7751c49caba0b8dae76f0f8926d85"
 }

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

@@ -3,6 +3,7 @@ import {
   InputField as UIInputField,
   Icon as UIIcon,
 } from '@faststore/ui'
+import { NewsletterAddendum } from 'src/components/ui/Newsletter/NewsletterAddendum'
 
 import { getSectionOverrides } from 'src/utils/overrides'
 import { override } from 'src/customizations/components/overrides/Newsletter'
@@ -15,6 +16,7 @@ const {
   InputFieldName,
   InputFieldEmail,
   Button,
+  __experimentalNewsletterAddendum,
 } = getSectionOverrides(
   {
     ToastIconSuccess: UIIcon,
@@ -23,6 +25,7 @@ const {
     InputFieldName: UIInputField,
     InputFieldEmail: UIInputField,
     Button: UIButton,
+    __experimentalNewsletterAddendum: NewsletterAddendum,
   },
   override as NewsletterOverrideDefinition
 )
@@ -34,4 +37,5 @@ export {
   InputFieldName,
   InputFieldEmail,
   Button,
+  __experimentalNewsletterAddendum,
 }

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

@@ -1,7 +1,5 @@
 import { ComponentPropsWithRef, FormEvent, useMemo } from 'react'
 import { forwardRef, useRef } from 'react'
-import { convertFromRaw } from 'draft-js'
-import { stateToHTML } from 'draft-js-export-html'
 import { useUI } from '@faststore/ui'
 import type { InputFieldProps } from '@faststore/ui'
 
@@ -13,39 +11,9 @@ import {
   InputFieldName,
   InputFieldEmail,
   Button,
+  __experimentalNewsletterAddendum as NewsletterAddendum,
 } from 'src/components/sections/Newsletter/Overrides'
 
-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
@@ -124,10 +92,6 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
     const { subscribeUser, loading, data } = useNewsletter()
     const nameInputRef = useRef<HTMLInputElement>(null)
     const emailInputRef = useRef<HTMLInputElement>(null)
-    const subscriptionButtonLabel = useMemo(
-      () => (loading ? subscribeButtonLoadingLabel : subscribeButtonLabel),
-      [loading, subscribeButtonLabel, subscribeButtonLoadingLabel]
-    )
 
     const { pushToast } = useUI()
 
@@ -217,12 +181,10 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
                 // This decision can be reviewed later if needed
                 inputRef={emailInputRef}
               />
-              <span
-                data-fs-newsletter-addendum
-                dangerouslySetInnerHTML={{
-                  __html: cmsToHtml(privacyPolicy),
-                }}
-              ></span>
+              <NewsletterAddendum.Component
+                addendum={privacyPolicy}
+                {...NewsletterAddendum.props}
+              />
               <Button.Component
                 variant="secondary"
                 inverse

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

@@ -0,0 +1,86 @@
+/**
+ * TODO:
+ *
+ * This library hasn't been updated in 4 years at the time of writing.
+ *
+ * We're using it as a patch, and it is expected that some Rich Text use cases of draftjs are not supported by it.
+ * We have the dependency on draftjs because of the way the headless CMS send us the data.
+ *
+ * This library should be removed as soon as possible, which will probably be possible through one of two cases:
+ * 1. We support React Server Components and go back to using the official draftjs library for doing this, only on the server.
+ *    This is still not the ideal solution, since it still relies on a unsupported, deprecated and archived library (draftjs).
+ * 2. CMS uses a new library or changes how it sends the data to not depend on draftjs.
+ *
+ * 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'
+
+export interface NewsletterAddendumProps {
+  /**
+   * Expects a string of a JSON object in the form of draftjs's raw content state.
+   */
+  addendum: string
+}
+
+function getLinkElementAsString(url: string, text: string) {
+  return `
+    <a 
+      data-fs-link="true"
+      data-fs-link-variant="inline"
+      data-fs-link-inverse="true"
+      data-fs-link-size="regular"
+      data-testid="fs-link"
+      href="${url}"
+    >${text}</a>`
+}
+
+function cmsToHtml(addendum: string) {
+  if (!addendum) {
+    return ''
+  }
+
+  let rawDraftContentState = null
+
+  try {
+    rawDraftContentState = JSON.parse(addendum)
+  } catch (e) {
+    throw new Error(
+      'Newsletter\'s prop "addendum" is not a JSON string. This is happening because the overridden prop is malformed or the CMS is providing malformed content for that prop.',
+      {
+        cause: e,
+      }
+    )
+  }
+
+  if (!rawDraftContentState) {
+    return ''
+  }
+
+  return draftToHtml(
+    rawDraftContentState,
+    undefined,
+    undefined,
+    (entity: { type: string; data: { url: string } }, text: string) => {
+      if (entity.type !== 'LINK') {
+        return null
+      }
+
+      return getLinkElementAsString(entity.data.url, text)
+    }
+  )
+}
+
+export function NewsletterAddendum({
+  addendum,
+  ...otherProps
+}: NewsletterAddendumProps) {
+  return (
+    <span
+      data-fs-newsletter-addendum
+      dangerouslySetInnerHTML={{
+        __html: cmsToHtml(addendum),
+      }}
+      {...otherProps}
+    ></span>
+  )
+}

package/src/typings/overrides.ts

@@ -40,6 +40,7 @@ import type {
   ComponentOverrideDefinition,
   SectionOverrideDefinition,
 } from './overrideDefinitionUtils'
+import { NewsletterAddendumProps } from 'src/components/ui/Newsletter/NewsletterAddendum'
 
 export type SectionOverride =
   | AlertOverrideDefinition
@@ -164,6 +165,7 @@ export type NewsletterOverrideDefinition = SectionOverrideDefinition<
       Omit<InputFieldProps, 'inputRef'>
     >
     Button: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+    __experimentalNewsletterAddendum: ComponentOverrideDefinition<NewsletterAddendumProps, NewsletterAddendumProps>
   }
 >