Product sets: basic pdp (@W-12301851@)

packages/template-retail-react-app/app/components/swatch-group/index.jsx

@@ -15,7 +15,14 @@ import {noop} from '../../utils/utils'
  * Each Swatch is a link with will direct to a href passed to them
  */
 const SwatchGroup = (props) => {
-    const {displayName, children, value, label = '', variant = 'square', onChange = noop} = props
+    const {
+        displayName,
+        children,
+        value: selectedValue,
+        label = '',
+        variant = 'square',
+        onChange = noop
+    } = props
     const styles = useStyleConfig('SwatchGroup')
     return (
         <Flex {...styles.swatchGroup} role="radiogroup">
@@ -28,9 +35,7 @@ const SwatchGroup = (props) => {
                     const childValue = child.props.value
 
                     return React.cloneElement(child, {
-                        selected: childValue === value,
-                        key: childValue,
-                        value,
+                        selected: childValue === selectedValue,
                         variant,
                         onChange
                     })

packages/template-retail-react-app/app/hooks/use-add-to-cart-modal.js

@@ -29,6 +29,7 @@ import RecommendedProducts from '../components/recommended-products'
 import {LockIcon} from '../components/icons'
 import {useVariationAttributes} from './'
 import {findImageGroupBy} from '../utils/image-groups-utils'
+import {useVariant} from './use-variant'
 
 /**
  * This is the context for managing the AddToCartModal.
@@ -54,20 +55,21 @@ AddToCartModalProvider.propTypes = {
  */
 export const AddToCartModal = () => {
     const {isOpen, onClose, data} = useAddToCartModalContext()
-    const {product, quantity} = data || {}
-    const intl = useIntl()
-    const basket = useBasket()
-    const size = useBreakpointValue({base: 'full', lg: '2xl', xl: '4xl'})
-    const variationAttributes = useVariationAttributes(product)
     if (!isOpen) {
         return null
     }
+    const {product, isProductPartOfSet, quantity} = data || {}
+    const intl = useIntl()
+    const basket = useBasket()
+    const size = useBreakpointValue({base: 'full', lg: '2xl', xl: '4xl'})
+    const variationAttributes = useVariationAttributes(product, isProductPartOfSet)
+    const variant = useVariant(product, isProductPartOfSet)
     const {currency, productItems, productSubTotal, itemAccumulatedCount} = basket
     const {id, variationValues} = product
     const lineItemPrice = productItems?.find((item) => item.productId === id)?.basePrice * quantity
     const image = findImageGroupBy(product.imageGroups, {
         viewType: 'small',
-        selectedVariationAttributes: variationValues
+        selectedVariationAttributes: variationValues || variant?.variationValues
     })?.images?.[0]
 
     return (

packages/template-retail-react-app/app/hooks/use-pdp-search-params.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) 2023, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: BSD-3-Clause
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+ */
+import {useLocation} from 'react-router-dom'
+
+export const usePDPSearchParams = (productId) => {
+    const {search} = useLocation()
+
+    const allParams = new URLSearchParams(search)
+    const productParams = new URLSearchParams(allParams.get(productId) || '')
+
+    return [allParams, productParams]
+}

packages/template-retail-react-app/app/hooks/use-product.js

@@ -15,17 +15,18 @@ const OUT_OF_STOCK = 'OUT_OF_STOCK'
 const UNFULFILLABLE = 'UNFULFILLABLE'
 
 // TODO: This needs to be refactored.
-export const useProduct = (product) => {
+export const useProduct = (product, isProductPartOfSet = false) => {
     const showLoading = !product
     const stockLevel = product?.inventory?.stockLevel || 0
     const stepQuantity = product?.stepQuantity || 1
     const minOrderQuantity = stockLevel > 0 ? product?.minOrderQuantity || 1 : 0
     const initialQuantity = product?.quantity || product?.minOrderQuantity || 1
 
     const intl = useIntl()
-    const variant = useVariant(product)
-    const variationParams = useVariationParams(product)
-    const variationAttributes = useVariationAttributes(product)
+    const variant = useVariant(product, isProductPartOfSet)
+    const variationParams = useVariationParams(product, isProductPartOfSet)
+    const variationAttributes = useVariationAttributes(product, isProductPartOfSet)
+    // console.log('--- variationAttributes', variationAttributes)
     const [quantity, setQuantity] = useState(initialQuantity)
 
     // A product is considered out of stock if the stock level is 0 or if we have all our

packages/template-retail-react-app/app/hooks/use-variant.js

@@ -16,9 +16,9 @@ import {useVariationParams} from './use-variation-params'
  * @param {Object} product
  * @returns {Object} the currently selected `Variant` object.
  */
-export const useVariant = (product = {}) => {
+export const useVariant = (product = {}, isProductPartOfSet = false) => {
     const {variants = []} = product
-    const variationParams = useVariationParams(product)
+    const variationParams = useVariationParams(product, isProductPartOfSet)
 
     // Get a filtered array of variants. The resulting array will only have variants
     // which have all the current variation params values set.

packages/template-retail-react-app/app/hooks/use-variation-attributes.js

@@ -12,7 +12,8 @@ import {useLocation} from 'react-router-dom'
 import {useVariationParams} from './use-variation-params'
 
 // Utils
-import {rebuildPathWithParams} from '../utils/url'
+import {updateSearchParams} from '../utils/url'
+import {usePDPSearchParams} from './use-pdp-search-params'
 
 /**
  * Return the first image in the `swatch` type image group for a given
@@ -47,8 +48,23 @@ const getVariantValueSwatch = (product, variationValue) => {
  * @param {Object} location
  * @returns {String} a product url for the current variation value.
  */
-const buildVariantValueHref = (product, params, location) => {
-    return rebuildPathWithParams(`${location.pathname}${location.search}`, params)
+const buildVariantValueHref = ({
+    pathname,
+    existingParams,
+    newParams,
+    productId,
+    isProductPartOfSet
+}) => {
+    const [allParams, productParams] = existingParams
+
+    if (isProductPartOfSet) {
+        updateSearchParams(productParams, newParams)
+        allParams.set(productId, productParams.toString())
+    } else {
+        updateSearchParams(allParams, newParams)
+    }
+
+    return `${pathname}?${allParams.toString()}`
 }
 
 /**
@@ -80,10 +96,12 @@ const isVariantValueOrderable = (product, variationParams) => {
  * @returns {Array} a decorated variation attributes list.
  *
  */
-export const useVariationAttributes = (product = {}) => {
+export const useVariationAttributes = (product = {}, isProductPartOfSet = false) => {
     const {variationAttributes = []} = product
     const location = useLocation()
-    const variationParams = useVariationParams(product)
+    const variationParams = useVariationParams(product, isProductPartOfSet)
+
+    const existingParams = usePDPSearchParams(product.id)
 
     return useMemo(
         () =>
@@ -104,7 +122,13 @@ export const useVariationAttributes = (product = {}) => {
                     return {
                         ...value,
                         image: getVariantValueSwatch(product, value),
-                        href: buildVariantValueHref(product, params, location),
+                        href: buildVariantValueHref({
+                            pathname: location.pathname,
+                            existingParams,
+                            newParams: params,
+                            productId: product.id,
+                            isProductPartOfSet
+                        }),
                         orderable: isVariantValueOrderable(product, params)
                     }
                 })

packages/template-retail-react-app/app/hooks/use-variation-params.js

@@ -5,25 +5,27 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import {useLocation} from 'react-router-dom'
+import {usePDPSearchParams} from './use-pdp-search-params'
 
 /*
  * This hook will return only the params that are also product attributes for the
  * passed in product object.
  */
-export const useVariationParams = (product = {}) => {
+export const useVariationParams = (product = {}, isProductPartOfSet = false) => {
     const {variationAttributes = [], variationValues = {}} = product
-    const variationParams = variationAttributes.map(({id}) => id)
 
-    const {search} = useLocation()
-    const params = new URLSearchParams(search)
-    // Using all the variation attribute id from the array generated above, get
+    const [allParams, productParams] = usePDPSearchParams(product.id)
+    const params = isProductPartOfSet ? productParams : allParams
+
+    // Using all the variation attribute id from the array generated below, get
     // the value if there is one from the location search params and add it to the
     // accumulator.
-    const filteredVariationParams = variationParams.reduce((acc, key) => {
-        let value = params.get(`${key}`) || variationValues?.[key]
-        return value ? {...acc, [key]: value} : acc
-    }, {})
+    const variationParams = variationAttributes
+        .map(({id}) => id)
+        .reduce((acc, key) => {
+            let value = params.get(`${key}`) || variationValues?.[key]
+            return value ? {...acc, [key]: value} : acc
+        }, {})
 
-    return filteredVariationParams
+    return variationParams
 }