@faststore/core 2.0.146-alpha.0 → 2.0.151-alpha.0

package/.turbo/turbo-build.log

@@ -28,8 +28,8 @@ Route (pages)                              Size     First Load JS
 ├   /_app                                  0 B            77.9 kB
 ├ ● /[...slug]                             9.9 kB          133 kB
 ├   └ css/2e9de35e0cb999e0.css             7.9 kB
-├ ● /[slug]/p                              11.4 kB         134 kB
-├   └ css/7701d01af31e31d1.css             10.9 kB
+├ ● /[slug]/p                              11.7 kB         135 kB
+├   └ css/1de3e7b6ba8daaac.css             10.9 kB
 ├ ○ /404                                   1.09 kB         113 kB
 ├ ● /500                                   1.11 kB         113 kB
 ├ ● /account                               672 B           113 kB
@@ -42,7 +42,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-3e4e7e579cb0681a.js  6.43 kB
-  ├ chunks/webpack-4e162ac7f81d85d4.js     2.27 kB
+  ├ chunks/webpack-5051dce9659282f3.js     2.27 kB
   └ css/923c4a942e57bc91.css               2.81 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.151-alpha.0](https://github.com/vtex/faststore/compare/v2.0.150-alpha.0...v2.0.151-alpha.0) (2023-05-22)
+
+### Features
+
+- Adjust `ProductDetails` for CMS ([#1740](https://github.com/vtex/faststore/issues/1740)) ([5cbd315](https://github.com/vtex/faststore/commit/5cbd31544bf57336f6d53780142338f80b61226b))
+
+## [2.0.147-alpha.0](https://github.com/vtex/faststore/compare/v2.0.146-alpha.0...v2.0.147-alpha.0) (2023-05-19)
+
+### Chores
+
+- removes required button props ([#1781](https://github.com/vtex/faststore/issues/1781)) ([b2758ee](https://github.com/vtex/faststore/commit/b2758ee37ae4737b3b59a7b6634baec138fe02f6))
+
 ## [2.0.146-alpha.0](https://github.com/vtex/faststore/compare/v2.0.145-alpha.0...v2.0.146-alpha.0) (2023-05-19)
 
 ### Features

package/cms/faststore/sections.json

@@ -661,7 +661,6 @@
         "link": {
           "title": "Call to Action",
           "type": "object",
-          "required": ["text", "url"],
           "properties": {
             "text": {
               "type": "string",
@@ -1142,9 +1141,21 @@
           "type": "object",
           "properties": {
             "discountBadge": {
-              "title": "Show Discount Badge?",
-              "type": "boolean",
-              "default": false
+              "title": "Discount Badge",
+              "type": "object",
+              "properties": {
+                "showDiscountBadge": {
+                  "title": "Show Discount Badge?",
+                  "type": "boolean",
+                  "default": false
+                },
+                "size": {
+                  "title": "Size",
+                  "type": "string",
+                  "enumNames": ["Big", "Small"],
+                  "enum": ["big", "small"]
+                }
+              }
             },
             "refNumber": {
               "title": "Show Reference Number?",
@@ -1216,8 +1227,8 @@
             }
           }
         },
-        "productDetailsContent": {
-          "title": "Product Details Content",
+        "productDescription": {
+          "title": "Product Description",
           "type": "object",
           "properties": {
             "initiallyExpanded": {
@@ -1226,20 +1237,15 @@
               "enumNames": ["First", "All", "None"],
               "enum": ["first", "all", "none"]
             },
-            "details": {
-              "type": "object",
-              "properties": {
-                "displayDescription": {
-                  "title": "Should display description?",
-                  "type": "boolean",
-                  "default": true
-                },
-                "title": {
-                  "title": "Description section title",
-                  "type": "string",
-                  "default": "Description"
-                }
-              }
+            "displayDescription": {
+              "title": "Should display description?",
+              "type": "boolean",
+              "default": true
+            },
+            "title": {
+              "title": "Description section title",
+              "type": "string",
+              "default": "Description"
             }
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.146-alpha.0",
+  "version": "2.0.151-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,10 +30,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.140-alpha.0",
-    "@faststore/components": "^2.0.145-alpha.0",
+    "@faststore/components": "^2.0.151-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.118-alpha.0",
-    "@faststore/ui": "^2.0.142-alpha.0",
+    "@faststore/ui": "^2.0.151-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "918a41884eea2c10f1c6b93fad21c7ed100b0668"
+  "gitHead": "6e3e406c91c7dd87beff20ddf090f4ad724b3a7d"
 }

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

@@ -1,38 +1,88 @@
+import { useEffect, useState } from 'react'
+
 import { gql } from '@faststore/graphql-utils'
-import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
+import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
+import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 import {
-  BuyButton as UIBuyButton,
+  Link as UILink,
   ProductTitle as UIProductTitle,
-  QuantitySelector as UIQuantitySelector,
+  DiscountBadge as UIDiscountBadge,
 } from '@faststore/ui'
-import { useEffect, useState } from 'react'
 
-import { Components } from './Overrides'
-const { Price, DiscountBadge } = Components
+import { useSession } from 'src/sdk/session'
+import { useProduct } from 'src/sdk/product/useProduct'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+import type { AnalyticsItem } from 'src/sdk/analytics/types'
 
-import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
+import Section from '../Section'
 import OutOfStock from 'src/components/product/OutOfStock'
 import ImageGallery from 'src/components/ui/ImageGallery'
 import ShippingSimulation from 'src/components/ui/ShippingSimulation'
-import Selectors from 'src/components/ui/SkuSelector'
-import type { AnalyticsItem } from 'src/sdk/analytics/types'
-import { useBuyButton } from 'src/sdk/cart/useBuyButton'
-import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
-import { useProduct } from 'src/sdk/product/useProduct'
-import { useSession } from 'src/sdk/session'
+import ProductDescription from 'src/components/ui/ProductDescription'
+import { ProductDetailsSettings } from 'src/components/ui/ProductDetails'
 
-import ProductDetailsContent from '../ProducDetailsContent'
-import Section from '../Section'
 import styles from './section.module.scss'
 
-interface Props {
+interface ProductDetailsContextProps {
   context: ProductDetailsFragment_ProductFragment
 }
 
-function ProductDetails({ context: staleProduct }: Props) {
+export interface ProductDetailsProps {
+  productTitle: {
+    refNumber: boolean
+    discountBadge: {
+      size: 'big' | 'small'
+      showDiscountBadge: boolean
+    }
+  }
+  buyButton: {
+    title: string
+    icon: {
+      alt: string
+      icon: string
+    }
+  }
+  shippingSimulator: {
+    title: string
+    inputLabel: string
+    link: {
+      to: string
+      text: string
+    }
+    shippingOptionsTableTitle: string
+  }
+  productDescription: {
+    title: string
+    displayDescription: boolean
+    initiallyExpanded: 'first' | 'all' | 'none'
+  }
+}
+
+function ProductDetails({
+  context: staleProduct,
+  productTitle: {
+    refNumber: showRefNumber,
+    discountBadge: { showDiscountBadge, size: discountBadgeSize },
+  },
+  buyButton: {
+    title: buyButtonTitle,
+    icon: { icon: buyButtonIconName, alt: buyButtonIconAlt },
+  },
+  shippingSimulator: {
+    title: shippingSimulatorTitle,
+    inputLabel: shippingSimulatorInputLabel,
+    shippingOptionsTableTitle: shippingSimulatorOptionsTableTitle,
+    link: { to: shippingSimulatorLinkUrl, text: shippingSimulatorLinkText },
+  },
+  productDescription: {
+    title: productDescriptionDetailsTitle,
+    initiallyExpanded: productDescriptionInitiallyExpanded,
+    displayDescription: shouldDisplayProductDescription,
+  },
+}: ProductDetailsProps & ProductDetailsContextProps) {
   const { currency } = useSession()
-  const [addQuantity, setAddQuantity] = useState(1)
+  const [quantity, setQuantity] = useState(1)
 
   // Stale while revalidate the product for fetching the new price etc
   const { data, isValidating } = useProduct(staleProduct.id, {
@@ -51,86 +101,15 @@ function ProductDetails({ context: staleProduct }: Props) {
       name: variantName,
       brand,
       isVariantOf,
-      isVariantOf: { name, productGroupID: productId, skuVariants },
+      isVariantOf: { name, productGroupID: productId },
       image: productImages,
       offers: {
         offers: [{ availability, price, listPrice, seller }],
         lowPrice,
       },
-      breadcrumbList: breadcrumbs,
-      additionalProperty,
     },
   } = data
 
-  const buyDisabled = availability !== 'https://schema.org/InStock'
-
-  const buyProps = useBuyButton({
-    id,
-    price,
-    listPrice,
-    seller,
-    quantity: addQuantity,
-    itemOffered: {
-      sku,
-      name: variantName,
-      gtin,
-      image: productImages,
-      brand,
-      isVariantOf,
-      additionalProperty,
-    },
-  })
-
-  const ProductDetailsSection = () => {
-    return (
-      <>
-        <section data-fs-product-details-values>
-          <div data-fs-product-details-prices>
-            <Price
-              value={listPrice}
-              formatter={useFormattedPrice}
-              testId="list-price"
-              data-value={listPrice}
-              variant="listing"
-              SRText="Original price:"
-            />
-            <Price
-              value={lowPrice}
-              formatter={useFormattedPrice}
-              testId="price"
-              data-value={lowPrice}
-              variant="spot"
-              className="text__lead"
-              SRText="Sale Price:"
-            />
-          </div>
-          <UIQuantitySelector min={1} max={10} onChange={setAddQuantity} />
-        </section>
-        {skuVariants && (
-          <Selectors
-            slugsMap={skuVariants.slugsMap}
-            availableVariations={skuVariants.availableVariations}
-            activeVariations={skuVariants.activeVariations}
-            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 />
-          ) : (
-            <UIBuyButton disabled={buyDisabled} {...buyProps}>
-              Add to Cart
-            </UIBuyButton>
-          )
-        }
-      </>
-    )
-  }
-
   useEffect(() => {
     sendAnalyticsEvent<ViewItemEvent<AnalyticsItem>>({
       name: 'view_item',
@@ -174,13 +153,15 @@ function ProductDetails({ context: staleProduct }: Props) {
             <UIProductTitle
               title={<h1>{name}</h1>}
               label={
-                <DiscountBadge
-                  listPrice={listPrice}
-                  spotPrice={lowPrice}
-                  size="big"
-                />
+                showDiscountBadge && (
+                  <UIDiscountBadge
+                    listPrice={listPrice}
+                    spotPrice={lowPrice}
+                    size={discountBadgeSize}
+                  />
+                )
               }
-              refNumber={productId}
+              refNumber={showRefNumber && productId}
             />
           </header>
           <ImageGallery
@@ -192,86 +173,54 @@ function ProductDetails({ context: staleProduct }: Props) {
               data-fs-product-details-settings
               data-fs-product-details-section
             >
-              {availability ? <ProductDetailsSection /> : <OutOfStock />}
+              {availability ? (
+                <ProductDetailsSettings
+                  product={data.product}
+                  isValidating={isValidating}
+                  buyButtonTitle={buyButtonTitle}
+                  quantity={quantity}
+                  setQuantity={setQuantity}
+                  buyButtonIcon={buyButtonIconName}
+                />
+              ) : (
+                <OutOfStock />
+              )}
             </section>
+
             {availability && (
               <ShippingSimulation
                 data-fs-product-details-section
                 data-fs-product-details-shipping
                 productShippingInfo={{
                   id,
-                  quantity: addQuantity,
+                  quantity,
                   seller: seller.identifier,
                 }}
                 formatter={useFormattedPrice}
+                title={shippingSimulatorTitle}
+                inputLabel={shippingSimulatorInputLabel}
+                idkPostalCodeLinkProps={
+                  <UILink href={shippingSimulatorLinkUrl}>
+                    {shippingSimulatorLinkText}
+                  </UILink>
+                }
+                optionsLabel={shippingSimulatorOptionsTableTitle}
               />
             )}
           </section>
-          <ProductDetailsContent />
+
+          {shouldDisplayProductDescription && (
+            <ProductDescription
+              labels={{ description: productDescriptionDetailsTitle }}
+              initiallyExpanded={productDescriptionInitiallyExpanded}
+            />
+          )}
         </section>
       </section>
     </Section>
   )
 }
 
-function AddToCartLoadingSkeleton() {
-  // Generated via https://skeletonreact.com/.
-  return (
-    <svg
-      role="img"
-      width="100%"
-      height="48"
-      aria-labelledby="loading-aria"
-      viewBox="0 0 112 48"
-      preserveAspectRatio="none"
-    >
-      <title id="loading-aria">Loading...</title>
-      <rect
-        x="0"
-        y="0"
-        width="100%"
-        height="100%"
-        clipPath="url(#clip-path)"
-        style={{ fill: 'url("#fill")' }}
-      />
-      <defs>
-        <clipPath id="clip-path">
-          <rect x="0" y="0" rx="2" ry="2" width="112" height="48" />
-        </clipPath>
-        <linearGradient id="fill">
-          <stop offset="0.599964" stopColor="#f3f3f3" stopOpacity="1">
-            <animate
-              attributeName="offset"
-              values="-2; -2; 1"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            />
-          </stop>
-          <stop offset="1.59996" stopColor="#ecebeb" stopOpacity="1">
-            <animate
-              attributeName="offset"
-              values="-1; -1; 2"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            />
-          </stop>
-          <stop offset="2.59996" stopColor="#f3f3f3" stopOpacity="1">
-            <animate
-              attributeName="offset"
-              values="0; 0; 3"
-              keyTimes="0; 0.25; 1"
-              dur="2s"
-              repeatCount="indefinite"
-            />
-          </stop>
-        </linearGradient>
-      </defs>
-    </svg>
-  )
-}
-
 export const fragment = gql`
   fragment ProductDetailsFragment_product on StoreProduct {
     id: productID
@@ -311,14 +260,6 @@ export const fragment = gql`
       }
     }
 
-    breadcrumbList {
-      itemListElement {
-        item
-        name
-        position
-      }
-    }
-
     # Contains necessary info to add this item to cart
     ...CartProductItem
   }

package/src/components/{sections/ProducDetailsContent/ProductDetailsContent.tsx → ui/ProductDescription/ProductDescription.tsx}

@@ -73,7 +73,7 @@ const DEFAULT_LABELS: ArticleLabels = {
   learnMore: 'Learn More',
 } as const
 
-function ProductDetailsContent({
+function ProductDescription({
   initiallyExpanded = 'first',
   labels: propLabels = {},
 }: Props) {
@@ -98,7 +98,7 @@ function ProductDetailsContent({
   const labels = { ...DEFAULT_LABELS, ...propLabels }
 
   return (
-    <section data-fs-product-details-content>
+    <section data-fs-product-description>
       <UIAccordion
         indices={indices}
         onChange={onChange}
@@ -108,7 +108,7 @@ function ProductDetailsContent({
           as="article"
           index={0}
           data-fs-product-details-description
-          prefixId="product-details-content"
+          prefixId="product-description"
         >
           <UIAccordionButton>{labels.description}</UIAccordionButton>
           <UIAccordionPanel>
@@ -122,7 +122,7 @@ function ProductDetailsContent({
           as="article"
           index={1}
           data-fs-product-details-about
-          prefixId="product-details-content"
+          prefixId="product-description"
         >
           <UIAccordionButton>{labels.about}</UIAccordionButton>
           <UIAccordionPanel>
@@ -215,7 +215,7 @@ function ProductDetailsContent({
           className="text__body"
           index={2}
           data-fs-product-details-highlights
-          prefixId="product-details-content"
+          prefixId="product-description"
         >
           <UIAccordionButton>{labels.highlights}</UIAccordionButton>
           <UIAccordionPanel>
@@ -257,7 +257,7 @@ function ProductDetailsContent({
           as="article"
           index={3}
           data-fs-product-details-learn-more
-          prefixId="product-details-content"
+          prefixId="product-description"
         >
           <UIAccordionButton>{labels.learnMore}</UIAccordionButton>
           <UIAccordionPanel>
@@ -277,4 +277,4 @@ function ProductDetailsContent({
   )
 }
 
-export default ProductDetailsContent
+export default ProductDescription

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

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

package/src/components/ui/ProductDetails/AddToCartLoadingSkeleton.tsx

@@ -0,0 +1,57 @@
+export default function AddToCartLoadingSkeleton() {
+  return (
+    // Generated via https://skeletonreact.com/.
+    <svg
+      role="img"
+      width="100%"
+      height="48"
+      aria-labelledby="loading-aria"
+      viewBox="0 0 112 48"
+      preserveAspectRatio="none"
+    >
+      <title id="loading-aria">Loading...</title>
+      <rect
+        x="0"
+        y="0"
+        width="100%"
+        height="100%"
+        clipPath="url(#clip-path)"
+        style={{ fill: 'url("#fill")' }}
+      />
+      <defs>
+        <clipPath id="clip-path">
+          <rect x="0" y="0" rx="2" ry="2" width="112" height="48" />
+        </clipPath>
+        <linearGradient id="fill">
+          <stop offset="0.599964" stopColor="#f3f3f3" stopOpacity="1">
+            <animate
+              attributeName="offset"
+              values="-2; -2; 1"
+              keyTimes="0; 0.25; 1"
+              dur="2s"
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="1.59996" stopColor="#ecebeb" stopOpacity="1">
+            <animate
+              attributeName="offset"
+              values="-1; -1; 2"
+              keyTimes="0; 0.25; 1"
+              dur="2s"
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="2.59996" stopColor="#f3f3f3" stopOpacity="1">
+            <animate
+              attributeName="offset"
+              values="0; 0; 3"
+              keyTimes="0; 0.25; 1"
+              dur="2s"
+              repeatCount="indefinite"
+            />
+          </stop>
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}