@faststore/core 3.77.3 → 3.78.0

package/cms/faststore/sections.json

@@ -2005,6 +2005,105 @@
               }
             }
           }
+        },
+        "productComparison": {
+          "title": "Product Comparison",
+          "type": "object",
+          "properties": {
+            "enabled": {
+              "title": "Enable Product Comparison",
+              "type": "boolean",
+              "default": false
+            },
+            "labels": {
+              "title": "Labels",
+              "type": "object",
+              "properties": {
+                "compareButton": {
+                  "title": "Compare Button",
+                  "type": "string",
+                  "default": "Compare"
+                },
+                "clearSelectionButton": {
+                  "title": "Clear Selection Button",
+                  "type": "string",
+                  "default": "Clear Selection"
+                },
+                "selectionWarning": {
+                  "title": "Selection Warning",
+                  "type": "string",
+                  "default": "Select at least 2"
+                },
+                "sidebarComponent": {
+                  "title": "Sidebar component",
+                  "type": "object",
+                  "properties": {
+                    "title": {
+                      "title": "Title",
+                      "type": "string",
+                      "default": "Compare Products"
+                    },
+                    "filterLabel": {
+                      "title": "Filter text",
+                      "type": "string",
+                      "default": "Filters"
+                    },
+                    "productNameFilterLabel": {
+                      "title": "Filter by product name text",
+                      "type": "string",
+                      "default": "Product name"
+                    },
+                    "sortLabel": {
+                      "title": "Sort filter text",
+                      "type": "string",
+                      "default": "Sort by"
+                    },
+                    "toggleFieldLabel": {
+                      "title": "Toggle filter text",
+                      "type": "string",
+                      "default": "Show only differences"
+                    },
+                    "preferencesLabel": {
+                      "title": "Preferences text",
+                      "type": "string",
+                      "default": "Preferences"
+                    },
+                    "cartButtonLabel": {
+                      "title": "Add to cart button",
+                      "type": "string",
+                      "default": "Add to cart"
+                    },
+                    "priceLabel": {
+                      "title": "Price text",
+                      "type": "string",
+                      "default": "Price"
+                    },
+                    "priceWithTaxLabel": {
+                      "title": "Price with taxes text",
+                      "type": "string",
+                      "default": "Price with taxes"
+                    }
+                  }
+                },
+                "technicalInformation": {
+                  "title": "Technical Information",
+                  "type": "object",
+                  "properties": {
+                    "title": {
+                      "title": "Title",
+                      "type": "string",
+                      "default": "Technical Information"
+                    },
+                    "description": {
+                      "title": "Description",
+                      "type": "string",
+                      "default": "Technical facts and information about the product."
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.77.3",
+  "version": "3.78.0",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -44,11 +44,11 @@
     "@envelop/graphql-jit": "^8.0.3",
     "@envelop/parser-cache": "^6.0.2",
     "@envelop/validation-cache": "^6.0.2",
-    "@faststore/api": "^3.73.0",
+    "@faststore/api": "^3.78.0",
     "@faststore/graphql-utils": "^3.56.1",
     "@faststore/lighthouse": "^3.56.1",
     "@faststore/sdk": "^3.77.2",
-    "@faststore/ui": "^3.70.2",
+    "@faststore/ui": "^3.78.0",
     "@graphql-codegen/cli": "5.0.2",
     "@graphql-codegen/client-preset": "4.2.6",
     "@graphql-codegen/typescript": "4.0.7",
@@ -108,5 +108,5 @@
     "ts-jest": "29.1.1",
     "typescript": "5.3.2"
   },
-  "gitHead": "87d2a27bd3afc8327bda2d611ac08d64b00fc607"
+  "gitHead": "e4853a8c962f5ba4527694ea4b60984fa21e1208"
 }

package/src/components/product/ProductCard/ProductCard.tsx

@@ -2,6 +2,7 @@ import {
   ProductCard as UIProductCard,
   ProductCardContent as UIProductCardContent,
   ProductCardImage as UIProductCardImage,
+  ProductComparisonTrigger as UIProductComparisonTrigger,
 } from '@faststore/ui'
 import { memo, useMemo } from 'react'
 
@@ -61,6 +62,14 @@ export interface ProductCardProps {
    * Specifies the sponsored label, if advertisement is applicable.
    */
   sponsoredLabel?: string
+  /**
+   * Enable the compare checkbox on display.
+   */
+  enableCompareCheckbox?: boolean
+  /**
+   * Label for the compare checkbox.
+   */
+  compareLabel?: string
 }
 
 function ProductCard({
@@ -76,6 +85,8 @@ function ProductCard({
   showDiscountBadge = true,
   taxesConfiguration,
   sponsoredLabel,
+  enableCompareCheckbox = false,
+  compareLabel,
   ...otherProps
 }: ProductCardProps) {
   const {
@@ -121,42 +132,52 @@ function ProductCard({
     : {}
 
   return (
-    <UIProductCard
-      outOfStock={outOfStock}
-      bordered={bordered}
-      variant={variant}
-      data-fs-product-card-sku={sku}
-      {...advertisementDataAttributes}
-      {...otherProps}
-    >
-      <UIProductCardImage aspectRatio={aspectRatio}>
-        <Image
-          src={img.url}
-          alt={img.alternateName}
-          sizes={`${imgProps?.sizes ?? '(max-width: 768px) 40vw, 30vw'}`}
-          width={imgProps?.width ?? 360}
-          height={Math.round((Number(imgProps?.height) || 360) / aspectRatio)}
-          loading={imgProps?.loading}
+    <>
+      {enableCompareCheckbox && (
+        <UIProductComparisonTrigger
+          label={compareLabel}
+          product={product}
+          id={product.id}
         />
-      </UIProductCardImage>
-      <UIProductCardContent
-        title={name}
-        price={{
-          value: spotPrice,
-          listPrice: listPrice,
-          formatter: useFormattedPrice,
-        }}
-        ratingValue={ratingValue}
+      )}
+
+      <UIProductCard
         outOfStock={outOfStock}
-        onButtonClick={onButtonClick}
-        linkProps={linkProps}
-        showDiscountBadge={hasDiscount && showDiscountBadge}
-        includeTaxes={taxesConfiguration?.usePriceWithTaxes}
-        includeTaxesLabel={taxesConfiguration?.taxesLabel}
-        sponsored={!!advertisement}
-        sponsoredLabel={sponsoredLabel}
-      />
-    </UIProductCard>
+        bordered={bordered}
+        variant={variant}
+        data-fs-product-card-sku={sku}
+        {...advertisementDataAttributes}
+        {...otherProps}
+      >
+        <UIProductCardImage aspectRatio={aspectRatio}>
+          <Image
+            src={img.url}
+            alt={img.alternateName}
+            sizes={`${imgProps?.sizes ?? '(max-width: 768px) 40vw, 30vw'}`}
+            width={imgProps?.width ?? 360}
+            height={Math.round((Number(imgProps?.height) || 360) / aspectRatio)}
+            loading={imgProps?.loading}
+          />
+        </UIProductCardImage>
+        <UIProductCardContent
+          title={name}
+          price={{
+            value: spotPrice,
+            listPrice: listPrice,
+            formatter: useFormattedPrice,
+          }}
+          ratingValue={ratingValue}
+          outOfStock={outOfStock}
+          onButtonClick={onButtonClick}
+          linkProps={linkProps}
+          showDiscountBadge={hasDiscount && showDiscountBadge}
+          includeTaxes={taxesConfiguration?.usePriceWithTaxes}
+          includeTaxesLabel={taxesConfiguration?.taxesLabel}
+          sponsored={!!advertisement}
+          sponsoredLabel={sponsoredLabel}
+        />
+      </UIProductCard>
+    </>
   )
 }
 
@@ -200,7 +221,7 @@ export const fragment = gql(`
         price
         listPrice
         listPriceWithTaxes
-				priceWithTaxes
+        priceWithTaxes
         quantity
         seller {
           identifier
@@ -215,6 +236,24 @@ export const fragment = gql(`
       valueReference
     }
 
+    hasSpecifications
+
+    unitMultiplier
+
+    isVariantOf {
+      productGroupID
+      name
+      skuVariants {
+        activeVariations
+        slugsMap
+        availableVariations
+        allVariantProducts {
+          name
+          productID
+        }
+      }
+    }
+
     advertisement {
       adId
       adResponseId

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -36,6 +36,14 @@ interface Props {
    * Determine if the current page is the first page.
    */
   firstPage?: number
+  /**
+   * Determine whether to show the comparison checkbox.
+   */
+  shouldShowComparison?: boolean
+  /**
+   * Label for comparison text.
+   */
+  compareLabel?: string
   /**
    * Title for the `ProductGrid` component that will be send to GA events.
    */
@@ -53,6 +61,8 @@ function ProductGrid({
     sponsoredLabel,
   } = {},
   firstPage,
+  shouldShowComparison,
+  compareLabel,
   title,
 }: Props) {
   const { isMobile } = useScreenResize()
@@ -80,6 +90,8 @@ function ProductGrid({
                   pageSize={pageSize}
                 >
                   <ProductCard.Component
+                    enableCompareCheckbox={shouldShowComparison}
+                    compareLabel={compareLabel}
                     aspectRatio={aspectRatio}
                     imgProps={{
                       width: 150,
@@ -110,6 +122,8 @@ function ProductGrid({
                     pageSize={pageSize}
                   >
                     <ProductCard.Component
+                      enableCompareCheckbox={shouldShowComparison}
+                      compareLabel={compareLabel}
                       aspectRatio={aspectRatio}
                       imgProps={{
                         width: 150,
@@ -143,6 +157,8 @@ function ProductGrid({
                   pageSize={pageSize}
                 >
                   <ProductCard.Component
+                    enableCompareCheckbox={shouldShowComparison}
+                    compareLabel={compareLabel}
                     aspectRatio={aspectRatio}
                     imgProps={{
                       width: 150,

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

@@ -353,6 +353,10 @@ export const fragment = gql(`
         activeVariations
         slugsMap
         availableVariations
+        allVariantProducts {
+          name
+          productID
+        }
       }
     }
 

package/src/components/sections/ProductGallery/DefaultComponents.ts

@@ -3,6 +3,10 @@ import {
   Icon as UIIcon,
   LinkButton as UILinkButton,
   Skeleton as UISkeleton,
+  ToggleField as UIToggleField,
+  ProductComparison as UIProductComparison,
+  ProductComparisonSidebar as UIProductComparisonSidebar,
+  ProductComparisonToolbar as UIProductComparisonToolbar,
 } from '@faststore/ui'
 
 import dynamic from 'next/dynamic'
@@ -29,6 +33,12 @@ const FilterSlider = dynamic(
     import('src/components/search/Filter/FilterSlider')
 )
 
+const ProductComparisonSidebar = dynamic(
+  () =>
+    /* webpackChunkName: "ProductComparisonSidebar" */
+    import('src/components/ui/ProductComparison')
+)
+
 export const ProductGalleryDefaultComponents = {
   MobileFilterButton: UIButton,
   FilterIcon: UIIcon,
@@ -36,10 +46,15 @@ export const ProductGalleryDefaultComponents = {
   ResultsCountSkeleton: UISkeleton,
   SortSkeleton: UISkeleton,
   FilterButtonSkeleton: UISkeleton,
+  ToggleField: UIToggleField,
+  ProductComparison: UIProductComparison,
+  ProductComparisonSidebar: UIProductComparisonSidebar,
+  ProductComparisonToolbar: UIProductComparisonToolbar,
   LinkButtonPrev: UILinkButton,
   LinkButtonNext: UILinkButton,
   __experimentalFilterDesktop: FilterDesktop,
   __experimentalFilterSlider: FilterSlider,
   __experimentalProductCard: ProductCard,
   __experimentalEmptyGallery: EmptyGallery,
+  __experimentalProductComparisonSidebar: ProductComparisonSidebar,
 } as const

package/src/components/sections/ProductGallery/ProductGallery.tsx

@@ -26,6 +26,7 @@ export interface ProductGallerySectionProps {
   sortBySelector?: ProductGalleryProps['sortBySelector']
   productCard?: ProductGalleryProps['productCard']
   emptyGallery?: EmptyGalleryProps
+  productComparison?: ProductGalleryProps['productComparison']
 }
 
 function ProductGallerySection({

package/src/components/sections/ProductGallery/section.module.scss

@@ -2,7 +2,10 @@
   .section {
     @include media("<notebook") {
       margin-top: 0;
-      &:last-child { margin-bottom: 0; }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
 
       @include section-divisor(bottom, 0);
     }
@@ -22,7 +25,10 @@
       h1 {
         font-size: var(--fs-text-size-4);
 
-        @include media(">=tablet") { padding-top: var(--fs-spacing-4); font-size: var(--fs-text-size-5); }
+        @include media(">=tablet") {
+          padding-top: var(--fs-spacing-4);
+          font-size: var(--fs-text-size-5);
+        }
 
         span {
           font-weight: var(--fs-text-weight-bold);
@@ -43,19 +49,26 @@
     @import "@faststore/ui/src/components/atoms/Skeleton/styles";
     @import "@faststore/ui/src/components/atoms/Slider/styles.scss";
     @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
+    @import "@faststore/ui/src/components/molecules/CheckboxField/styles.scss";
     @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
     @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
     @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
     @import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";
     @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
     @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
     @import "@faststore/ui/src/components/molecules/RadioField/styles.scss";
     @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Toggle/styles.scss";
+    @import "@faststore/ui/src/components/molecules/ToggleField/styles.scss";
     @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
     @import "@faststore/ui/src/components/organisms/Filter/styles.scss";
     @import "@faststore/ui/src/components/organisms/FilterSkeleton/styles.scss";
     @import "@faststore/ui/src/components/organisms/PriceRange/styles.scss";
-    @import "@faststore/ui/src/components/organisms/ProductGrid/styles.scss";
+    @import "@faststore/ui/src/components/organisms/ProductComparison/styles";
     @import "@faststore/ui/src/components/organisms/ProductGallery/styles.scss";
+    @import "@faststore/ui/src/components/organisms/ProductGrid/styles.scss";
+    @import "@faststore/ui/src/components/organisms/SlideOver/styles";
   }
 }