@faststore/core 2.1.98 → 2.1.100

package/.turbo/turbo-build.log

@@ -1,10 +1,16 @@
 $ yarn partytown && next build
 $ partytown copylib ./public/~partytown
-Partytown lib copied to: /Users/emersonlaurentino/develop/vtex/faststore/packages/core/public/~partytown
+Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
+warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
+Attention: Next.js now collects completely anonymous telemetry regarding usage.
+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
+
 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
-info  - Using external babel configuration from /Users/emersonlaurentino/develop/vtex/faststore/packages/core/.babelrc
+info  - Using external babel configuration from /home/runner/work/faststore/faststore/packages/core/.babelrc
 info  - Compiled successfully
 info  - Collecting page data...
 info  - Generating static pages (0/7)
@@ -15,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.5 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
@@ -31,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-34aa83cb25f3f792.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/.turbo/turbo-lint.log

@@ -0,0 +1,2 @@
+$ next lint
+✔ No ESLint warnings or errors

package/cms/faststore/sections.json

@@ -1374,6 +1374,18 @@
             }
           }
         },
+        "notAvailableButton": {
+          "title": "Not Available Button",
+          "description": "Shown when a SKU is not available",
+          "type": "object",
+          "properties": {
+            "title": {
+              "title": "Title",
+              "type": "string",
+              "default": "Not Available"
+            }
+          }
+        },
         "shippingSimulator": {
           "title": "Shipping Simulation",
           "type": "object",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.98",
+  "version": "2.1.100",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -29,18 +29,17 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.1.98",
-    "@faststore/components": "^2.1.94",
-    "@faststore/graphql-utils": "^2.1.82",
-    "@faststore/sdk": "^2.1.82",
-    "@faststore/ui": "^2.1.94",
+    "@faststore/api": "^2.1.99",
+    "@faststore/components": "^2.1.99",
+    "@faststore/graphql-utils": "^2.1.99",
+    "@faststore/sdk": "^2.1.99",
+    "@faststore/ui": "^2.1.99",
     "@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",
+    "draftjs-to-html": "^0.9.1",
     "graphql": "^15.0.0",
     "include-media": "^1.4.10",
     "msw": "^0.43.1",
@@ -61,7 +60,7 @@
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
-    "@faststore/eslint-config": "^2.1.82",
+    "@faststore/eslint-config": "^2.1.99",
     "@faststore/lighthouse": "^1.12.32",
     "@graphql-codegen/cli": "^2.6.2",
     "@graphql-codegen/typescript": "^2.5.1",
@@ -110,5 +109,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "5b295774a676946af022c70fb0d04914d3bd3a44"
+  "gitHead": "c1c5860557d7751c49caba0b8dae76f0f8926d85"
 }

package/src/components/product/NotAvailableButton/NotAvailableButton.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react'
+import { Button } from '@faststore/ui'
+
+// TODO: Remove this component when <OutOfStock /> is ready to use
+function NotAvailableButton({ children }: PropsWithChildren) {
+  return (
+    <Button variant="primary" disabled data-fs-buy-button>
+      {children}
+    </Button>
+  )
+}
+
+export default NotAvailableButton

package/src/components/product/NotAvailableButton/index.ts

@@ -0,0 +1 @@
+export { default } from './NotAvailableButton'

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/sections/ProductDetails/Overrides.tsx

@@ -14,6 +14,7 @@ import {
 import LocalImageGallery from 'src/components/ui/ImageGallery'
 import LocalShippingSimulation from 'src/components/ui/ShippingSimulation/ShippingSimulation'
 import { Image } from 'src/components/ui/Image'
+import LocalNotAvailableButton from 'src/components/product/NotAvailableButton'
 
 import { getSectionOverrides } from 'src/utils/overrides'
 import { override } from 'src/customizations/components/overrides/ProductDetails'
@@ -33,6 +34,7 @@ const {
   __experimentalImageGalleryImage,
   __experimentalImageGallery,
   __experimentalShippingSimulation,
+  __experimentalNotAvailableButton,
 } = getSectionOverrides(
   {
     ProductTitle: UIProductTitle,
@@ -48,6 +50,7 @@ const {
     __experimentalImageGalleryImage: Image,
     __experimentalImageGallery: LocalImageGallery,
     __experimentalShippingSimulation: LocalShippingSimulation,
+    __experimentalNotAvailableButton: LocalNotAvailableButton,
   },
   override as ProductDetailsOverrideDefinition
 )
@@ -66,4 +69,5 @@ export {
   __experimentalImageGalleryImage,
   __experimentalImageGallery,
   __experimentalShippingSimulation,
+  __experimentalNotAvailableButton,
 }

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 
 import { gql } from '@faststore/graphql-utils'
 import { sendAnalyticsEvent } from '@faststore/sdk'
@@ -21,6 +21,7 @@ import {
   DiscountBadge,
   __experimentalImageGallery as ImageGallery,
   __experimentalShippingSimulation as ShippingSimulation,
+  __experimentalNotAvailableButton as NotAvailableButton,
 } from 'src/components/sections/ProductDetails/Overrides'
 
 interface ProductDetailsContextProps {
@@ -59,6 +60,9 @@ export interface ProductDetailsProps {
   imageGallery: {
     imagePosition: 'top' | 'center' | 'bottom'
   }
+  notAvailableButton: {
+    title: string
+  }
 }
 
 function ProductDetails({
@@ -91,6 +95,9 @@ function ProductDetails({
     displayDescription: shouldDisplayProductDescription,
   },
   imageGallery: { imagePosition = ImageGallery.props.imagePosition },
+  notAvailableButton: {
+    title: notAvailableButtonTitle = NotAvailableButton.props.title,
+  },
 }: ProductDetailsProps & ProductDetailsContextProps) {
   const { currency } = useSession()
   const [quantity, setQuantity] = useState(1)
@@ -155,7 +162,10 @@ function ProductDetails({
     gtin,
   ])
 
-  const outOfStock = availability == 'https://schema.org/OutOfStock'
+  const outOfStock = useMemo(
+    () => availability === 'https://schema.org/OutOfStock',
+    [availability]
+  )
 
   return (
     <Section className={`${styles.section} section-product-details`}>
@@ -194,19 +204,15 @@ function ProductDetails({
               data-fs-product-details-settings
               data-fs-product-details-section
             >
-              {!outOfStock ? (
-                <ProductDetailsSettings
-                  product={data.product}
-                  isValidating={isValidating}
-                  buyButtonTitle={buyButtonTitle}
-                  quantity={quantity}
-                  setQuantity={setQuantity}
-                  buyButtonIcon={buyButtonIcon}
-                />
-              ) : (
-                // TODO: Adds <OutOfStock /> when component is ready to use
-                <p>Not Available</p>
-              )}
+              <ProductDetailsSettings
+                product={data.product}
+                isValidating={isValidating}
+                buyButtonTitle={buyButtonTitle}
+                quantity={quantity}
+                setQuantity={setQuantity}
+                buyButtonIcon={buyButtonIcon}
+                notAvailableButtonTitle={notAvailableButtonTitle}
+              />
             </section>
 
             {!outOfStock && (

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/components/ui/ProductDetails/ProductDetailsSettings.tsx

@@ -1,4 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react'
+import { useMemo } from 'react'
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 
@@ -13,6 +14,7 @@ import {
   Icon,
   Price,
   QuantitySelector,
+  __experimentalNotAvailableButton as NotAvailableButton,
 } from 'src/components/sections/ProductDetails/Overrides'
 
 interface ProductDetailsSettingsProps {
@@ -25,6 +27,7 @@ interface ProductDetailsSettingsProps {
   isValidating: boolean
   quantity: number
   setQuantity: Dispatch<SetStateAction<number>>
+  notAvailableButtonTitle: string
 }
 
 function ProductDetailsSettings({
@@ -37,6 +40,7 @@ function ProductDetailsSettings({
     icon: buyButtonIconName = Icon.props.name,
     alt: buyButtonIconAlt = Icon.props['aria-label'],
   },
+  notAvailableButtonTitle,
 }: ProductDetailsSettingsProps) {
   const {
     id,
@@ -54,8 +58,6 @@ function ProductDetailsSettings({
     },
   } = product
 
-  const buyDisabled = availability !== 'https://schema.org/InStock'
-
   const buyProps = useBuyButton({
     id,
     price,
@@ -73,62 +75,94 @@ function ProductDetailsSettings({
     },
   })
 
-  const shouldShowDiscountedPrice = lowPrice !== listPrice
+  const outOfStock = useMemo(
+    () => availability === 'https://schema.org/OutOfStock',
+    [availability]
+  )
+  const shouldShowDiscountedPrice = useMemo(
+    () => lowPrice !== listPrice,
+    [lowPrice, listPrice]
+  )
+
+  const AddToCartButton = () => {
+    return outOfStock ? (
+      // TODO: Adds <OutOfStock /> when component is ready to use
+      <NotAvailableButton.Component>
+        {notAvailableButtonTitle}
+      </NotAvailableButton.Component>
+    ) : (
+      <BuyButton.Component
+        {...BuyButton.props}
+        icon={
+          <Icon.Component
+            {...Icon.props}
+            name={buyButtonIconName}
+            aria-label={buyButtonIconAlt}
+          />
+        }
+        {...buyProps}
+      >
+        {buyButtonTitle || 'Add to Cart'}
+      </BuyButton.Component>
+    )
+  }
 
   return (
     <>
-      <section data-fs-product-details-values>
-        <div data-fs-product-details-prices>
-          {shouldShowDiscountedPrice ? (
-            <>
+      {!outOfStock && (
+        <section data-fs-product-details-values>
+          <div data-fs-product-details-prices>
+            {shouldShowDiscountedPrice ? (
+              <>
+                <Price.Component
+                  formatter={useFormattedPrice}
+                  testId="list-price"
+                  variant="listing"
+                  SRText="Original price:"
+                  {...Price.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  value={listPrice}
+                  data-value={listPrice}
+                />
+                <Price.Component
+                  formatter={useFormattedPrice}
+                  testId="price"
+                  variant="spot"
+                  className="text__lead"
+                  SRText="Sale Price:"
+                  {...Price.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  value={lowPrice}
+                  data-value={lowPrice}
+                />
+              </>
+            ) : (
               <Price.Component
                 formatter={useFormattedPrice}
                 testId="list-price"
-                variant="listing"
-                SRText="Original price:"
-                {...Price.props}
-                // Dynamic props shouldn't be overridable
-                // This decision can be reviewed later if needed
-                value={listPrice}
-                data-value={listPrice}
-              />
-              <Price.Component
-                formatter={useFormattedPrice}
-                testId="price"
                 variant="spot"
                 className="text__lead"
-                SRText="Sale Price:"
+                SRText="Original price:"
                 {...Price.props}
                 // Dynamic props shouldn't be overridable
                 // This decision can be reviewed later if needed
                 value={lowPrice}
                 data-value={lowPrice}
               />
-            </>
-          ) : (
-            <Price.Component
-              formatter={useFormattedPrice}
-              testId="list-price"
-              variant="spot"
-              className="text__lead"
-              SRText="Original price:"
-              {...Price.props}
-              // Dynamic props shouldn't be overridable
-              // This decision can be reviewed later if needed
-              value={lowPrice}
-              data-value={lowPrice}
-            />
-          )}
-        </div>
-        <QuantitySelector.Component
-          min={1}
-          max={10}
-          {...QuantitySelector.props}
-          // Dynamic props shouldn't be overridable
-          // This decision can be reviewed later if needed
-          onChange={setQuantity}
-        />
-      </section>
+            )}
+          </div>
+          <QuantitySelector.Component
+            min={1}
+            max={10}
+            {...QuantitySelector.props}
+            // Dynamic props shouldn't be overridable
+            // This decision can be reviewed later if needed
+            onChange={setQuantity}
+          />
+        </section>
+      )}
       {skuVariants && (
         <Selectors
           slugsMap={skuVariants.slugsMap}
@@ -137,30 +171,16 @@ function ProductDetailsSettings({
           data-fs-product-details-selectors
         />
       )}
-      {
-        /* NOTE: A loading skeleton had to be used to avoid a Lighthouse's
-                  non-composited animation violation due to the button transitioning its
-                  background color when changing from its initial disabled to active state.
-                  See full explanation on commit https://git.io/JyXV5. */
-        isValidating ? (
-          <AddToCartLoadingSkeleton />
-        ) : (
-          <BuyButton.Component
-            {...BuyButton.props}
-            icon={
-              <Icon.Component
-                {...Icon.props}
-                aria-label={buyButtonIconAlt}
-                name={buyButtonIconName}
-              />
-            }
-            disabled={buyDisabled}
-            {...buyProps}
-          >
-            {buyButtonTitle || 'Add to Cart'}
-          </BuyButton.Component>
-        )
-      }
+      {isValidating ? (
+        /* NOTE:
+          A loading skeleton had to be used to avoid a Lighthouse's
+          non-composited animation violation due to the button transitioning its
+          background color when changing from its initial disabled to active state.
+          See full explanation on commit https://git.io/JyXV5. */
+        <AddToCartLoadingSkeleton />
+      ) : (
+        <AddToCartButton />
+      )}
     </>
   )
 }

package/src/pages/api/graphql.ts

@@ -59,10 +59,6 @@ const handler: NextApiHandler = async (request, response) => {
         ? stringifyCacheControl(extensions.cacheControl)
         : 'no-cache, no-store'
 
-    if (extensions.cookies && !hasErrors) {
-      response.setHeader('set-cookie', extensions.cookies)
-    }
-
     response.setHeader('cache-control', cacheControl)
     response.setHeader('content-type', 'application/json')
     response.send(JSON.stringify({ data, errors }))