@faststore/core 2.2.0-alpha.5 → 2.2.0-alpha.6

package/cypress/integration/seo.test.js

@@ -16,7 +16,7 @@ describe('Home Page Seo', () => {
     cy.clearIDB()
   })
 
-  it.skip('has meta/canonical/link tags', () => {
+  it('has meta/canonical/link tags', () => {
     cy.visit(pages.home, options)
     cy.waitForHydration()
 
@@ -34,7 +34,7 @@ describe('Home Page Seo', () => {
       })
   })
 
-  it.skip('has structured data', () => {
+  it('has structured data', () => {
     cy.visit(pages.home, options)
     cy.waitForHydration()
 
@@ -48,7 +48,7 @@ describe('Home Page Seo', () => {
       })
   })
 
-  it.skip('has OpenGraph tags', () => {
+  it('has OpenGraph tags', () => {
     cy.visit(pages.home, options)
     cy.waitForHydration()
 
@@ -77,7 +77,7 @@ describe('Product Page Seo', () => {
     cy.clearIDB()
   })
 
-  it.skip('has meta/canonical/link tags', () => {
+  it('has meta/canonical/link tags', () => {
     cy.visit(pages.pdp, options)
     cy.waitForHydration()
 
@@ -95,7 +95,7 @@ describe('Product Page Seo', () => {
       })
   })
 
-  it.skip('has structured data', () => {
+  it('has structured data', () => {
     cy.visit(pages.pdp, options)
     cy.waitForHydration()
 
@@ -115,7 +115,7 @@ describe('Product Page Seo', () => {
       })
   })
 
-  it.skip('has OpenGraph tags', () => {
+  it('has OpenGraph tags', () => {
     cy.visit(pages.pdp, options)
     cy.waitForHydration()
 
@@ -162,7 +162,7 @@ describe('Collection Page Seo', () => {
     cy.clearIDB()
   })
 
-  it.skip('has meta/canonical/link tags', () => {
+  it('has meta/canonical/link tags', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
@@ -182,7 +182,7 @@ describe('Collection Page Seo', () => {
       })
   })
 
-  it.skip('has structured data', () => {
+  it('has structured data', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
@@ -201,7 +201,7 @@ describe('Collection Page Seo', () => {
       })
   })
 
-  it.skip('has OpenGraph tags', () => {
+  it('has OpenGraph tags', () => {
     cy.visit(pages.collection, options)
     cy.waitForHydration()
 
@@ -226,7 +226,7 @@ describe('Collection Page Seo', () => {
 })
 
 describe('Filtered Collection Page Seo', () => {
-  it.skip('has canonical pointing to parent url', () => {
+  it('has canonical pointing to parent url', () => {
     cy.visit(pages.collection_filtered, options)
     cy.waitForHydration()
 
@@ -239,7 +239,7 @@ describe('Filtered Collection Page Seo', () => {
       })
   })
 
-  it.skip('has structured data', () => {
+  it('has structured data', () => {
     cy.visit(pages.collection_filtered, options)
     cy.waitForHydration()
 
@@ -258,7 +258,7 @@ describe('Filtered Collection Page Seo', () => {
       })
   })
 
-  it.skip('has OpenGraph tags', () => {
+  it('has OpenGraph tags', () => {
     cy.visit(pages.collection_filtered, options)
     cy.waitForHydration()
 
@@ -283,7 +283,7 @@ describe('Filtered Collection Page Seo', () => {
 })
 
 describe('Search Page Seo', () => {
-  it.skip('has meta/canonical/link tags', () => {
+  it('has meta/canonical/link tags', () => {
     cy.visit(pages.search, options)
     cy.waitForHydration()
 
@@ -297,7 +297,7 @@ describe('Search Page Seo', () => {
     cy.get('link[rel="canonical"]').should('not.exist')
   })
 
-  it.skip('has OpenGraph tags', () => {
+  it('has OpenGraph tags', () => {
     cy.visit(pages.search, options)
     cy.waitForHydration()
 

package/cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  retries: 0,
+  video: true,
+  trashAssetsBeforeRuns: true,
+  screenshotOnRunFailure: true,
+  viewportWidth: 1000,
+  viewportHeight: 600,
+  e2e: {
+    supportFile: 'cypress/support/index.js',
+    specPattern: 'cypress/integration/**/*.test.{js,jsx,ts,tsx}',
+    setupNodeEvents(on, config) {
+      return require('cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:3000/',
+    experimentalRunAllSpecs: true,
+  },
+})

package/faststore.config.js

@@ -89,6 +89,7 @@ module.exports = {
   },
 
   experimental: {
+    cypressVersion: 12,
     enableCypressExtension: false,
   },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.0-alpha.5",
+  "version": "2.2.0-alpha.6",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "exports": {
@@ -31,13 +31,14 @@
   "engines": {
     "node": ">=14"
   },
+  "sideEffects": false,
   "dependencies": {
     "@builder.io/partytown": "^0.6.1",
     "@envelop/core": "^1.2.0",
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.2.0-alpha.1",
+    "@faststore/api": "^2.2.0-alpha.6",
     "@faststore/components": "^2.2.0-alpha.4",
     "@faststore/graphql-utils": "^2.2.0-alpha.1",
     "@faststore/sdk": "^2.2.0-alpha.1",
@@ -55,8 +56,7 @@
     "chalk": "^5.2.0",
     "css-loader": "^6.7.1",
     "deepmerge": "^4.3.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",
@@ -78,9 +78,9 @@
     "typescript": "4.7.3"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.9.10",
+    "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/cli": "^2.2.0-alpha.3",
+    "@faststore/cli": "^2.2.0-alpha.6",
     "@faststore/eslint-config": "^2.2.0-alpha.1",
     "@faststore/lighthouse": "^1.12.32",
     "@lhci/cli": "^0.9.0",
@@ -91,13 +91,14 @@
     "@storybook/builder-webpack5": "^6.5.9",
     "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/react": "^6.5.9",
-    "@testing-library/cypress": "^8.0.0",
+    "@testing-library/cypress": "^10.0.1",
     "@types/cypress": "^1.1.3",
     "@types/jest": "29.1.0",
-    "axe-core": "^4.3.3",
-    "cypress": "9.6.0",
-    "cypress-axe": "^0.13.0",
-    "cypress-wait-until": "^1.7.2",
+    "@vtex/prettier-config": "1.0.0",
+    "axe-core": "^4.8.1",
+    "cypress": "12.17.4",
+    "cypress-axe": "^1.5.0",
+    "cypress-wait-until": "^2.0.1",
     "dotenv": "^8.2.0",
     "eslint": "^7.32.0",
     "husky": "^5.2.0",
@@ -128,5 +129,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "f3114da2b9ed62f0b456f4881a827a7b53149d3a"
+  "gitHead": "1d01644a9c6f9e6fbb2df4e05523aaa85b5d2b1b"
 }

package/src/components/cart/CartSidebar/CartSidebar.tsx

@@ -10,7 +10,7 @@ import type { CartSidebarProps as UICartSidebarProps } from '@faststore/ui'
 
 import type { CurrencyCode, ViewCartEvent } from '@faststore/sdk'
 import { Icon, useFadeEffect, useUI } from '@faststore/ui'
-import { Suspense, useEffect } from 'react'
+import { Suspense, useCallback, useEffect, useMemo } from 'react'
 import { useCart } from 'src/sdk/cart'
 import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
 import { useSession } from 'src/sdk/session'
@@ -21,6 +21,37 @@ import EmptyCart from '../EmptyCart'
 import OrderSummary from '../OrderSummary'
 import styles from './section.module.scss'
 
+function useViewCartEvent() {
+  const {
+    currency: { code },
+  } = useSession()
+  const { items, gifts, total } = useCart()
+
+  const sendViewCartEvent = useCallback(() => {
+    return sendAnalyticsEvent<ViewCartEvent>({
+      name: 'view_cart',
+      params: {
+        currency: code as CurrencyCode,
+        value: total,
+        items: items.concat(gifts).map((item) => ({
+          item_id: item.itemOffered.isVariantOf.productGroupID,
+          item_name: item.itemOffered.isVariantOf.name,
+          item_brand: item.itemOffered.brand.name,
+          item_variant: item.itemOffered.sku,
+          quantity: item.quantity,
+          price: item.price,
+          discount: item.listPrice - item.price,
+          currency: code as CurrencyCode,
+          item_variant_name: item.itemOffered.name,
+          product_reference_id: item.itemOffered.gtin,
+        })),
+      },
+    })
+  }, [code, gifts, items, total])
+
+  return useMemo(() => ({ sendViewCartEvent }), [sendViewCartEvent])
+}
+
 export interface CartSidebarProps {
   title: UICartSidebarProps['title']
   alert?: {
@@ -52,38 +83,21 @@ function CartSidebar({
     icon: { icon: checkoutButtonIcon, alt: checkoutButtonIconAlt },
   },
 }: CartSidebarProps) {
-  const { currency } = useSession()
   const btnProps = useCheckoutButton()
-  const cart = useCart()
+  const { items, gifts, totalItems, isValidating, subTotal, total } = useCart()
   const { cart: displayCart, closeCart } = useUI()
   const { fadeOut } = useFadeEffect()
+  const { sendViewCartEvent } = useViewCartEvent()
 
-  const { items, gifts, totalItems, isValidating, subTotal, total } = cart
-
-  const isEmpty = items.length === 0
+  const isEmpty = useMemo(() => items.length === 0, [items])
 
   useEffect(() => {
-    sendAnalyticsEvent<ViewCartEvent>({
-      name: 'view_cart',
-      params: {
-        currency: currency.code as CurrencyCode,
-        value: total,
-        items: items.concat(gifts).map((item) => ({
-          item_id: item.itemOffered.isVariantOf.productGroupID,
-          item_name: item.itemOffered.isVariantOf.name,
-          item_brand: item.itemOffered.brand.name,
-          item_variant: item.itemOffered.sku,
-          quantity: item.quantity,
-          price: item.price,
-          discount: item.listPrice - item.price,
-          currency: currency.code as CurrencyCode,
-          item_variant_name: item.itemOffered.name,
-          product_reference_id: item.itemOffered.gtin,
-        })),
-      },
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+    if (!displayCart) {
+      return
+    }
+
+    sendViewCartEvent()
+  }, [displayCart, sendViewCartEvent])
 
   return (
     <>

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 type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
@@ -19,6 +19,7 @@ import {
   ProductTitle,
   __experimentalImageGallery as ImageGallery,
   __experimentalShippingSimulation as ShippingSimulation,
+  __experimentalNotAvailableButton as NotAvailableButton,
 } from 'src/components/sections/ProductDetails/Overrides'
 
 import { usePDP } from 'src/sdk/overrides/PageProvider'
@@ -55,6 +56,9 @@ export interface ProductDetailsProps {
   imageGallery: {
     imagePosition: 'top' | 'center' | 'bottom'
   }
+  notAvailableButton: {
+    title: string
+  }
 }
 
 function ProductDetails({
@@ -86,6 +90,9 @@ function ProductDetails({
     displayDescription: shouldDisplayProductDescription,
   },
   imageGallery: { imagePosition = ImageGallery.props.imagePosition },
+  notAvailableButton: {
+    title: notAvailableButtonTitle = NotAvailableButton.props.title,
+  },
 }: ProductDetailsProps) {
   const { currency } = useSession()
   const [quantity, setQuantity] = useState(1)
@@ -145,7 +152,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`}>
@@ -184,19 +194,15 @@ function ProductDetails({
               data-fs-product-details-settings
               data-fs-product-details-section
             >
-              {!outOfStock ? (
-                <ProductDetailsSettings
-                  product={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={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 { ComponentPropsWithRef, FormEvent } 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'
 
-export 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/Newsletter/index.ts

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