pwa-kit/packages/extension-chakra-storefront/src/pages/product-detail/index.jsx at d925fd4658f442bd97ac5a16c78f0d2f16be13e3 · SalesforceCommerceCloud/pwa-kit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/*
 * Copyright (c) 2025, 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 React from 'react'
import {Box, Stack} from '@chakra-ui/react'
import ProductDetails from './partials/product-details'
import RecommendedProductsSection from './partials/recommended-products-section'
import PageMetadata from './page-metadata'
import PageCache from './page-cache'
import PageAnalytics from './page-analytics'
import {useProductDetailData} from './use-product-detail-data'

const ProductDetail = () => {
    const {
        product,
        isProductLoading,
        primaryCategory,
        isProductASet,
        isProductABundle,
        comboProduct,
        childProductRefs,
        childProductSelection,
        setChildProductSelection,
        childProductOrderability,
        setChildProductOrderability,
        selectedBundleQuantity,
        setSelectedBundleQuantity,
        handleAddToCart,
        handleAddToWishlist,
        handleProductSetAddToCart,
        handleProductBundleAddToCart,
        handleChildProductValidation,
        isBasketLoading,
        isWishlistLoading
    } = useProductDetailData()

    return (
        <>
            <PageCache />
            <PageMetadata product={product} />
            <PageAnalytics product={product} category={primaryCategory} />
            <Box
                className="sf-product-detail-page"
                layerStyle="page"
                data-testid="product-details-page"
            >
                <Stack gap={16}>
                    <ProductDetails
                        product={product}
                        primaryCategory={primaryCategory}
                        isProductASet={isProductASet}
                        isProductABundle={isProductABundle}
                        comboProduct={comboProduct}
                        childProductRefs={childProductRefs}
                        childProductSelection={childProductSelection}
                        setChildProductSelection={setChildProductSelection}
                        childProductOrderability={childProductOrderability}
                        setChildProductOrderability={setChildProductOrderability}
                        selectedBundleQuantity={selectedBundleQuantity}
                        setSelectedBundleQuantity={setSelectedBundleQuantity}
                        // Handlers
                        handleAddToCart={handleAddToCart}
                        handleAddToWishlist={handleAddToWishlist}
                        handleProductSetAddToCart={handleProductSetAddToCart}
                        handleProductBundleAddToCart={handleProductBundleAddToCart}
                        handleChildProductValidation={handleChildProductValidation}
                        // Loading states
                        isProductLoading={isProductLoading}
                        isBasketLoading={isBasketLoading}
                        isWishlistLoading={isWishlistLoading}
                    />

                    <RecommendedProductsSection product={product} isProductASet={isProductASet} />
                </Stack>
            </Box>
        </>
    )
}

ProductDetail.getTemplateName = () => 'product-detail'

export default ProductDetail