Feat/product comparison packages core

packages/api/src/typeDefs/skuVariants.graphql

@@ -26,7 +26,7 @@ type SkuVariants {
   availableVariations(dominantVariantName: String): FormattedVariants
 
   """
-  All possible variant combinations of the current product. It also includes the data for each variant.
+  All available options for each SKU variant property, indexed by their name.
   """
   allVariantProducts: [StoreProduct!]
 }

packages/components/src/hooks/index.ts

@@ -12,3 +12,6 @@ export type {
   SlideDirection,
 } from './useSlider'
 export { useSlideVisibility } from './useSlideVisibility'
+export { useProductComparison } from './useProductComparison'
+
+

packages/components/src/hooks/useProductComparison.ts

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+
+import { ProductComparisonContext } from "../organisms/ProductComparison/provider/ProductComparisonProvider";
+
+export function useProductComparison() {
+  const context = useContext(ProductComparisonContext);
+
+  if (context === undefined) {
+    throw new Error("useProductComparison must be used within a ProductComparisonProvider");
+  }
+
+  return context;
+}

packages/components/src/index.ts

@@ -361,6 +361,9 @@ export type {
   SlideOverHeaderProps,
 } from './organisms/SlideOver'
 
+export { default as ProductComparison, ProductComparisonTrigger, ProductComparisonToolbar, ProductComparisonSidebar } from './organisms/ProductComparison'
+export type { ProductComparisonProps, ProductComparisonTriggerProps, ProductComparisonToolbarProps, ProductComparisonSidebarProps } from './organisms/ProductComparison'
+
 export {
   default as SKUMatrix,
   SKUMatrixTrigger,

packages/core/@generated/gql.ts

@@ -12,7 +12,7 @@ import * as types from './graphql'
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-  '\n  fragment ProductSummary_product on StoreProduct {\n    id: productID\n    slug\n    sku\n    brand {\n      brandName: name\n    }\n    name\n    gtin\n\n    isVariantOf {\n      productGroupID\n      name\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        listPrice\n        listPriceWithTaxes\n        quantity\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    advertisement {\n      adId\n      adResponseId\n    }\n  }\n':
+  '\n  fragment ProductSummary_product on StoreProduct {\n    id: productID\n    slug\n    sku\n    brand {\n      brandName: name\n    }\n    name\n    gtin\n\n    isVariantOf {\n      productGroupID\n      name\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        listPrice\n        listPriceWithTaxes\n        priceWithTaxes\n        quantity\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    hasSpecifications\n\n    unitMultiplier\n\n    isVariantOf {\n      productGroupID\n      name\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n        allVariantProducts {\n          name\n          productID\n        }\n      }\n    }\n\n    advertisement {\n      adId\n      adResponseId\n    }\n  }\n':
     types.ProductSummary_ProductFragmentDoc,
   '\n  fragment Filter_facets on StoreFacet {\n    ... on StoreFacetRange {\n      key\n      label\n\n      min {\n        selected\n        absolute\n      }\n\n      max {\n        selected\n        absolute\n      }\n\n      __typename\n    }\n    ... on StoreFacetBoolean {\n      key\n      label\n      values {\n        label\n        value\n        selected\n        quantity\n      }\n\n      __typename\n    }\n  }\n':
     types.Filter_FacetsFragmentDoc,
@@ -66,7 +66,7 @@ const documents = {
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(
-  source: '\n  fragment ProductSummary_product on StoreProduct {\n    id: productID\n    slug\n    sku\n    brand {\n      brandName: name\n    }\n    name\n    gtin\n\n    isVariantOf {\n      productGroupID\n      name\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        listPrice\n        listPriceWithTaxes\n        quantity\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    advertisement {\n      adId\n      adResponseId\n    }\n  }\n'
+  source: '\n  fragment ProductSummary_product on StoreProduct {\n    id: productID\n    slug\n    sku\n    brand {\n      brandName: name\n    }\n    name\n    gtin\n\n    isVariantOf {\n      productGroupID\n      name\n    }\n\n    image {\n      url\n      alternateName\n    }\n\n    brand {\n      name\n    }\n\n    offers {\n      lowPrice\n      lowPriceWithTaxes\n      offers {\n        availability\n        price\n        listPrice\n        listPriceWithTaxes\n        priceWithTaxes\n        quantity\n        seller {\n          identifier\n        }\n      }\n    }\n\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n\n    hasSpecifications\n\n    unitMultiplier\n\n    isVariantOf {\n      productGroupID\n      name\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n        allVariantProducts {\n          name\n          productID\n        }\n      }\n    }\n\n    advertisement {\n      adId\n      adResponseId\n    }\n  }\n'
 ): typeof import('./graphql').ProductSummary_ProductFragmentDoc
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.

packages/core/@generated/graphql.ts

@@ -1136,9 +1136,20 @@ export type ProductSummary_ProductFragment = {
   sku: string
   name: string
   gtin: string
+  hasSpecifications: boolean | null
+  unitMultiplier: number | null
   id: string
   brand: { name: string; brandName: string }
-  isVariantOf: { productGroupID: string; name: string }
+  isVariantOf: {
+    productGroupID: string
+    name: string
+    skuVariants: {
+      activeVariations: any | null
+      slugsMap: any | null
+      availableVariations: any | null
+      allVariantProducts: Array<{ name: string; productID: string }> | null
+    } | null
+  }
   image: Array<{ url: string; alternateName: string }>
   offers: {
     lowPrice: number
@@ -1148,6 +1159,7 @@ export type ProductSummary_ProductFragment = {
       price: number
       listPrice: number
       listPriceWithTaxes: number
+      priceWithTaxes: number
       quantity: number
       seller: { identifier: string }
     }>
@@ -1193,12 +1205,54 @@ export type ProductDetailsFragment_ProductFragment = {
   unitMultiplier: number | null
   id: string
   isVariantOf: {
+    productGroupID: string
     name: string
+    skuVariants: {
+      activeVariations: any | null
+      slugsMap: any | null
+      availableVariations: any | null
+      allVariantProducts: Array<{ name: string; productID: string }> | null
+    } | null
+  }
+  image: Array<{ url: string; alternateName: string }>
+  brand: { name: string }
+  offers: {
+    lowPrice: number
+    lowPriceWithTaxes: number
+    offers: Array<{
+      availability: string
+      price: number
+      priceWithTaxes: number
+      listPrice: number
+      listPriceWithTaxes: number
+      seller: { identifier: string }
+    }>
+  }
+  additionalProperty: Array<{
+    propertyID: string
+    name: string
+    value: any
+    valueReference: any
+  }>
+}
+
+export type ProductComparisonFragment_ProductFragment = {
+  sku: string
+  slug: string
+  name: string
+  gtin: string
+  description: string
+  unitMultiplier: number | null
+  hasSpecifications: boolean | null
+  id: string
+  isVariantOf: {
     productGroupID: string
+    name: string
     skuVariants: {
       activeVariations: any | null
       slugsMap: any | null
       availableVariations: any | null
+      allVariantProducts: Array<{ name: string; productID: string }> | null
     } | null
   }
   image: Array<{ url: string; alternateName: string }>
@@ -1211,6 +1265,7 @@ export type ProductDetailsFragment_ProductFragment = {
       price: number
       priceWithTaxes: number
       listPrice: number
+      quantity: number
       listPriceWithTaxes: number
       seller: { identifier: string }
     }>
@@ -1344,12 +1399,13 @@ export type ServerProductQueryQuery = {
       }>
     }
     isVariantOf: {
-      name: string
       productGroupID: string
+      name: string
       skuVariants: {
         activeVariations: any | null
         slugsMap: any | null
         availableVariations: any | null
+        allVariantProducts: Array<{ name: string; productID: string }> | null
       } | null
     }
     additionalProperty: Array<{
@@ -1541,9 +1597,23 @@ export type ClientManyProductsQueryQuery = {
           sku: string
           name: string
           gtin: string
+          hasSpecifications: boolean | null
+          unitMultiplier: number | null
           id: string
           brand: { name: string; brandName: string }
-          isVariantOf: { productGroupID: string; name: string }
+          isVariantOf: {
+            productGroupID: string
+            name: string
+            skuVariants: {
+              activeVariations: any | null
+              slugsMap: any | null
+              availableVariations: any | null
+              allVariantProducts: Array<{
+                name: string
+                productID: string
+              }> | null
+            } | null
+          }
           image: Array<{ url: string; alternateName: string }>
           offers: {
             lowPrice: number
@@ -1553,6 +1623,7 @@ export type ClientManyProductsQueryQuery = {
               price: number
               listPrice: number
               listPriceWithTaxes: number
+              priceWithTaxes: number
               quantity: number
               seller: { identifier: string }
             }>
@@ -1629,12 +1700,13 @@ export type ClientProductQueryQuery = {
     unitMultiplier: number | null
     id: string
     isVariantOf: {
-      name: string
       productGroupID: string
+      name: string
       skuVariants: {
         activeVariations: any | null
         slugsMap: any | null
         availableVariations: any | null
+        allVariantProducts: Array<{ name: string; productID: string }> | null
       } | null
     }
     image: Array<{ url: string; alternateName: string }>
@@ -1674,9 +1746,23 @@ export type ClientSearchSuggestionsQueryQuery = {
         sku: string
         name: string
         gtin: string
+        hasSpecifications: boolean | null
+        unitMultiplier: number | null
         id: string
         brand: { name: string; brandName: string }
-        isVariantOf: { productGroupID: string; name: string }
+        isVariantOf: {
+          productGroupID: string
+          name: string
+          skuVariants: {
+            activeVariations: any | null
+            slugsMap: any | null
+            availableVariations: any | null
+            allVariantProducts: Array<{
+              name: string
+              productID: string
+            }> | null
+          } | null
+        }
         image: Array<{ url: string; alternateName: string }>
         offers: {
           lowPrice: number
@@ -1686,6 +1772,7 @@ export type ClientSearchSuggestionsQueryQuery = {
             price: number
             listPrice: number
             listPriceWithTaxes: number
+            priceWithTaxes: number
             quantity: number
             seller: { identifier: string }
           }>
@@ -1820,6 +1907,7 @@ export const ProductSummary_ProductFragmentDoc = new TypedDocumentString(
       price
       listPrice
       listPriceWithTaxes
+      priceWithTaxes
       quantity
       seller {
         identifier
@@ -1832,6 +1920,21 @@ export const ProductSummary_ProductFragmentDoc = new TypedDocumentString(
     value
     valueReference
   }
+  hasSpecifications
+  unitMultiplier
+  isVariantOf {
+    productGroupID
+    name
+    skuVariants {
+      activeVariations
+      slugsMap
+      availableVariations
+      allVariantProducts {
+        name
+        productID
+      }
+    }
+  }
   advertisement {
     adId
     adResponseId
@@ -1921,6 +2024,10 @@ export const ProductDetailsFragment_ProductFragmentDoc =
       activeVariations
       slugsMap
       availableVariations
+      allVariantProducts {
+        name
+        productID
+      }
     }
   }
   image {
@@ -2226,7 +2333,7 @@ export const ServerCollectionPageQueryDocument = {
 export const ServerProductQueryDocument = {
   __meta__: {
     operationName: 'ServerProductQuery',
-    operationHash: '46103bee661405bde706d72126fdbf9b0a0c9e6e',
+    operationHash: 'e855903879c6504e90269e6e010549bc6de933eb',
   },
 } as unknown as TypedDocumentString<
   ServerProductQueryQuery,
@@ -2280,7 +2387,7 @@ export const ClientProductGalleryQueryDocument = {
 export const ClientProductQueryDocument = {
   __meta__: {
     operationName: 'ClientProductQuery',
-    operationHash: '7d121ef8d4dc99174e64e4429a9b977b8bbebed8',
+    operationHash: '47aa22eb750cb2c529e5eeafb921bfeadb67db71',
   },
 } as unknown as TypedDocumentString<
   ClientProductQueryQuery,
@@ -2289,7 +2396,7 @@ export const ClientProductQueryDocument = {
 export const ClientSearchSuggestionsQueryDocument = {
   __meta__: {
     operationName: 'ClientSearchSuggestionsQuery',
-    operationHash: '47e48eaee91d16a4237eb2c1241bc2ed3e2ad9bb',
+    operationHash: '061bbf200ec29ac0b235d1eb40ebdce9cda7bcf0',
   },
 } as unknown as TypedDocumentString<
   ClientSearchSuggestionsQueryQuery,

packages/core/cms/faststore/sections.json

@@ -1920,6 +1920,54 @@
               }
             }
           }
+        },
+        "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"
+                },
+                "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."
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
       }
     }