@salesforce/retail-react-app 2.0.0 → 2.1.0-nightly-20230927165653

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## v2.1.0-dev (Sep 26, 2023)
+- Support Storefront Preview 
+  - [#1413](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1413)
+  - [#1440](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1440)
+  
 ## v2.0.0 (Sep 21, 2023)
 
 - V3 Fix checkout card number [#1424](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1424)

package/app/components/_app/index.jsx

@@ -8,6 +8,7 @@
 import React, {useState, useEffect} from 'react'
 import PropTypes from 'prop-types'
 import {useHistory, useLocation} from 'react-router-dom'
+import StorefrontPreview from '@salesforce/pwa-kit-react-sdk/storefront-preview'
 import {getAssetUrl} from '@salesforce/pwa-kit-react-sdk/ssr/universal/utils'
 import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
@@ -112,7 +113,7 @@ const App = (props) => {
     const {children} = props
     const {data: categoriesTree} = useLazyLoadCategories()
     const categories = flatten(categoriesTree || {}, 'categories')
-
+    const {getTokenWhenReady} = useAccessToken()
     const appOrigin = getAppOrigin()
 
     const history = useHistory()
@@ -267,7 +268,6 @@ const App = (props) => {
         const path = buildUrl('/account/wishlist')
         history.push(path)
     }
-
     return (
         <Box className="sf-app" {...styles.container}>
             <IntlProvider
@@ -294,6 +294,7 @@ const App = (props) => {
                 defaultLocale={DEFAULT_LOCALE}
             >
                 <CurrencyProvider currency={currency}>
+                    <StorefrontPreview getToken={getTokenWhenReady} />
                     <Seo>
                         <meta name="theme-color" content={THEME_COLOR} />
                         <meta name="apple-mobile-web-app-title" content={DEFAULT_SITE_TITLE} />

package/app/components/display-price/index.jsx

@@ -0,0 +1,67 @@
+/*
+ * 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 React from 'react'
+import PropTypes from 'prop-types'
+import {Skeleton, Text} from '@salesforce/retail-react-app/app/components/shared/ui'
+import {useIntl} from 'react-intl'
+import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
+
+const DisplayPrice = ({
+    basePrice,
+    discountPrice,
+    isProductASet = false,
+    currency,
+    discountPriceProps,
+    basePriceProps,
+    skeletonProps
+}) => {
+    const intl = useIntl()
+    const {currency: activeCurrency} = useCurrency()
+    return (
+        <Skeleton isLoaded={basePrice} display={'flex'} {...skeletonProps}>
+            <Text fontWeight="bold" fontSize="md" mr={1}>
+                {isProductASet &&
+                    `${intl.formatMessage({
+                        id: 'product_view.label.starting_at_price',
+                        defaultMessage: 'Starting at'
+                    })} `}
+            </Text>
+            {typeof discountPrice === 'number' && (
+                <Text as="b" {...discountPriceProps}>
+                    {intl.formatNumber(discountPrice, {
+                        style: 'currency',
+                        currency: currency || activeCurrency
+                    })}
+                </Text>
+            )}
+            <Text
+                as={discountPrice > 0 ? 's' : 'b'}
+                ml={discountPrice > 0 ? 2 : 0}
+                fontWeight={discountPrice ? 'normal' : 'bold'}
+                {...basePriceProps}
+            >
+                {intl.formatNumber(basePrice, {
+                    style: 'currency',
+                    currency: currency || activeCurrency
+                })}
+            </Text>
+        </Skeleton>
+    )
+}
+
+DisplayPrice.propTypes = {
+    basePrice: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    discountPrice: PropTypes.number,
+    currency: PropTypes.string,
+    isProductASet: PropTypes.bool,
+    discountPriceProps: PropTypes.object,
+    basePriceProps: PropTypes.object,
+    skeletonProps: PropTypes.object
+}
+
+export default DisplayPrice

package/app/components/display-price/index.test.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021, salesforce.com, 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 {screen, within} from '@testing-library/react'
+import DisplayPrice from '@salesforce/retail-react-app/app/components/display-price/index'
+import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
+
+describe('DisplayPrice', function () {
+    test('should render without error', () => {
+        renderWithProviders(<DisplayPrice currency="GBP" basePrice={100} discountPrice={90} />)
+        expect(screen.getByText(/£90\.00/i)).toBeInTheDocument()
+        expect(screen.getByText(/£100\.00/i)).toBeInTheDocument()
+    })
+
+    test('should render according html tag for prices', () => {
+        const {container} = renderWithProviders(
+            <DisplayPrice currency="GBP" basePrice={100} discountPrice={90} />
+        )
+        const discountPriceTag = container.querySelectorAll('b')
+        const basePriceTag = container.querySelectorAll('s')
+        expect(within(discountPriceTag[0]).getByText(/£90\.00/i)).toBeDefined()
+        expect(within(basePriceTag[0]).getByText(/£100\.00/i)).toBeDefined()
+        expect(discountPriceTag).toHaveLength(1)
+        expect(basePriceTag).toHaveLength(1)
+    })
+
+    test('should not render discount price if not available', () => {
+        renderWithProviders(<DisplayPrice currency="GBP" basePrice={100} />)
+        expect(screen.queryByText(/£90\.00/i)).not.toBeInTheDocument()
+        expect(screen.getByText(/£100\.00/i)).toBeInTheDocument()
+    })
+})

package/app/components/item-variant/item-price.jsx

@@ -34,7 +34,7 @@ const PricePerItem = ({currency, basket, basePrice}) => {
 PricePerItem.propTypes = {
     currency: PropTypes.string,
     basket: PropTypes.object,
-    basePrice: PropTypes.string
+    basePrice: PropTypes.number
 }
 
 /**

package/app/components/product-view/index.jsx

@@ -31,16 +31,15 @@ import ImageGallery from '@salesforce/retail-react-app/app/components/image-gall
 import Breadcrumb from '@salesforce/retail-react-app/app/components/breadcrumb'
 import Link from '@salesforce/retail-react-app/app/components/link'
 import withRegistration from '@salesforce/retail-react-app/app/components/with-registration'
-import {useCurrency} from '@salesforce/retail-react-app/app/hooks'
 import {Skeleton as ImageGallerySkeleton} from '@salesforce/retail-react-app/app/components/image-gallery'
 import {HideOnDesktop, HideOnMobile} from '@salesforce/retail-react-app/app/components/responsive'
 import QuantityPicker from '@salesforce/retail-react-app/app/components/quantity-picker'
 import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
 import {API_ERROR_MESSAGE} from '@salesforce/retail-react-app/app/constants'
+import DisplayPrice from '@salesforce/retail-react-app/app/components/display-price'
+import {getDisplayPrice} from '@salesforce/retail-react-app/app/utils/product-utils'
 
-const ProductViewHeader = ({name, price, currency, category, productType}) => {
-    const intl = useIntl()
-    const {currency: activeCurrency} = useCurrency()
+const ProductViewHeader = ({name, basePrice, discountPrice, currency, category, productType}) => {
     const isProductASet = productType?.set
 
     return (
@@ -56,27 +55,20 @@ const ProductViewHeader = ({name, price, currency, category, productType}) => {
                 <Heading fontSize="2xl">{`${name}`}</Heading>
             </Skeleton>
 
-            {/* Price */}
-            <Skeleton isLoaded={price} minWidth={32}>
-                <Text fontWeight="bold" fontSize="md" aria-label="price">
-                    {isProductASet &&
-                        `${intl.formatMessage({
-                            id: 'product_view.label.starting_at_price',
-                            defaultMessage: 'Starting at'
-                        })} `}
-                    {intl.formatNumber(price, {
-                        style: 'currency',
-                        currency: currency || activeCurrency
-                    })}
-                </Text>
-            </Skeleton>
+            <DisplayPrice
+                basePrice={basePrice}
+                discountPrice={discountPrice}
+                currency={currency}
+                isProductASet={isProductASet}
+            />
         </VStack>
     )
 }
 
 ProductViewHeader.propTypes = {
     name: PropTypes.string,
-    price: PropTypes.number,
+    basePrice: PropTypes.number,
+    discountPrice: PropTypes.number,
     currency: PropTypes.string,
     category: PropTypes.array,
     productType: PropTypes.object
@@ -134,6 +126,7 @@ const ProductView = forwardRef(
             stockLevel,
             stepQuantity
         } = useDerivedProduct(product, isProductPartOfSet)
+        const {basePrice, discountPrice} = getDisplayPrice(product)
         const canAddToWishlist = !isProductLoading
         const isProductASet = product?.type.set
         const errorContainerRef = useRef(null)
@@ -299,7 +292,8 @@ const ProductView = forwardRef(
                 <Box display={['block', 'block', 'block', 'none']}>
                     <ProductViewHeader
                         name={product?.name}
-                        price={product?.pricePerUnit || product?.price}
+                        basePrice={basePrice}
+                        discountPrice={discountPrice}
                         productType={product?.type}
                         currency={product?.currency}
                         category={category}
@@ -338,7 +332,8 @@ const ProductView = forwardRef(
                         <Box display={['none', 'none', 'none', 'block']}>
                             <ProductViewHeader
                                 name={product?.name}
-                                price={product?.pricePerUnit || product?.price}
+                                basePrice={basePrice}
+                                discountPrice={discountPrice}
                                 productType={product?.type}
                                 currency={product?.currency}
                                 category={category}

package/app/hooks/use-add-to-cart-modal.js

@@ -29,8 +29,12 @@ import Link from '@salesforce/retail-react-app/app/components/link'
 import RecommendedProducts from '@salesforce/retail-react-app/app/components/recommended-products'
 import {LockIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {findImageGroupBy} from '@salesforce/retail-react-app/app/utils/image-groups-utils'
-import {getDisplayVariationValues} from '@salesforce/retail-react-app/app/utils/product-utils'
+import {
+    getDisplayPrice,
+    getDisplayVariationValues
+} from '@salesforce/retail-react-app/app/utils/product-utils'
 import {EINSTEIN_RECOMMENDERS} from '@salesforce/retail-react-app/app/constants'
+import DisplayPrice from '@salesforce/retail-react-app/app/components/display-price'
 
 /**
  * This is the context for managing the AddToCartModal.
@@ -63,7 +67,7 @@ export const AddToCartModal = () => {
         derivedData: {totalItems}
     } = useCurrentBasket()
     const size = useBreakpointValue({base: 'full', lg: '2xl', xl: '4xl'})
-    const {currency, productItems, productSubTotal} = basket
+    const {currency, productSubTotal} = basket
     const numerOfItemsAdded = itemsAdded.reduce((acc, {quantity}) => acc + quantity, 0)
 
     if (!isOpen) {
@@ -110,10 +114,10 @@ export const AddToCartModal = () => {
                                     viewType: 'small',
                                     selectedVariationAttributes: variant.variationValues
                                 })?.images?.[0]
-                                const lineItemPrice =
-                                    productItems?.find(
-                                        (item) => item.productId === variant.productId
-                                    )?.basePrice * quantity
+                                const {
+                                    basePrice: lineItemBasePrice,
+                                    discountPrice: lineItemDiscountPrice
+                                } = getDisplayPrice(product)
                                 const variationAttributeValues = getDisplayVariationValues(
                                     product.variationAttributes,
                                     variant.variationValues
@@ -165,13 +169,12 @@ export const AddToCartModal = () => {
                                         </Flex>
 
                                         <Box flex="none" alignSelf="flex-end" fontWeight="600">
-                                            <Text>
-                                                {!!lineItemPrice &&
-                                                    intl.formatNumber(lineItemPrice, {
-                                                        style: 'currency',
-                                                        currency: currency
-                                                    })}
-                                            </Text>
+                                            <DisplayPrice
+                                                discountPriceProps={{as: 'p'}}
+                                                basePrice={lineItemBasePrice * quantity}
+                                                discountPrice={lineItemDiscountPrice * quantity}
+                                                currency={currency}
+                                            />
                                         </Box>
                                     </Flex>
                                 )

package/app/hooks/use-derived-product.js

@@ -10,6 +10,7 @@ import {useVariant} from '@salesforce/retail-react-app/app/hooks/use-variant'
 import {useIntl} from 'react-intl'
 import {useVariationParams} from '@salesforce/retail-react-app/app/hooks/use-variation-params'
 import {useVariationAttributes} from '@salesforce/retail-react-app/app/hooks/use-variation-attributes'
+import {getDisplayPrice} from '@salesforce/retail-react-app/app/utils/product-utils'
 
 const OUT_OF_STOCK = 'OUT_OF_STOCK'
 const UNFULFILLABLE = 'UNFULFILLABLE'
@@ -54,6 +55,8 @@ export const useDerivedProduct = (product, isProductPartOfSet = false) => {
         (isOutOfStock && inventoryMessages[OUT_OF_STOCK]) ||
         (unfulfillable && inventoryMessages[UNFULFILLABLE])
 
+    const {basePrice, discountPrice} = getDisplayPrice(product)
+
     // If the `initialQuantity` changes, update the state. This typically happens
     // when either the master product changes, or the inventory of the product changes
     // from out-of-stock to in-stock or vice versa.
@@ -72,6 +75,8 @@ export const useDerivedProduct = (product, isProductPartOfSet = false) => {
         variationParams,
         setQuantity,
         variant,
-        stockLevel
+        stockLevel,
+        basePrice,
+        discountPrice
     }
 }

package/app/mocks/mock-data.js

@@ -2211,6 +2211,14 @@ export const mockedCustomerProductListsDetails = {
                 {
                     calloutMsg: '$50offOrderCountAbove5',
                     promotionId: '$50offOrderCountAbove5'
+                },
+                {
+                    promotionalPrice: 189.0,
+                    promotionId: '10$offIpod'
+                },
+                {
+                    promotionalPrice: 194.0,
+                    promotionId: '5$offIpod'
                 }
             ],
             shortDescription:

package/app/pages/product-detail/index.jsx

@@ -31,6 +31,8 @@ import RecommendedProducts from '@salesforce/retail-react-app/app/components/rec
 import ProductView from '@salesforce/retail-react-app/app/components/product-view'
 import InformationAccordion from '@salesforce/retail-react-app/app/pages/product-detail/partials/information-accordion'
 
+import {HTTPNotFound, HTTPError} from '@salesforce/pwa-kit-react-sdk/ssr/universal/errors'
+
 // constant
 import {
     API_ERROR_MESSAGE,
@@ -66,7 +68,12 @@ const ProductDetail = () => {
     /*************************** Product Detail and Category ********************/
     const {productId} = useParams()
     const urlParams = new URLSearchParams(location.search)
-    const {data: product, isLoading: isProductLoading} = useProduct(
+    const {
+        data: product,
+        isLoading: isProductLoading,
+        isError: isProductError,
+        error: productError
+    } = useProduct(
         {
             parameters: {
                 id: urlParams.get('pid') || productId,
@@ -79,15 +86,43 @@ const ProductDetail = () => {
             keepPreviousData: true
         }
     )
-    const isProductASet = product?.type.set
+
     // Note: Since category needs id from product detail, it can't be server side rendered atm
     // until we can do dependent query on server
-    const {data: category} = useCategory({
+    const {
+        data: category,
+        isError: isCategoryError,
+        error: categoryError
+    } = useCategory({
         parameters: {
             id: product?.primaryCategoryId,
             level: 1
         }
     })
+
+    /**************** Error Handling ****************/
+
+    if (isProductError) {
+        const errorStatus = productError?.response?.status
+        switch (errorStatus) {
+            case 404:
+                throw new HTTPNotFound('Product Not Found.')
+            default:
+                throw new HTTPError(`HTTP Error ${errorStatus} occurred.`)
+        }
+    }
+    if (isCategoryError) {
+        const errorStatus = categoryError?.response?.status
+        switch (errorStatus) {
+            case 404:
+                throw new HTTPNotFound('Category Not Found.')
+            default:
+                throw new HTTPError(`HTTP Error ${errorStatus} occurred.`)
+        }
+    }
+
+    const isProductASet = product?.type.set
+
     const [primaryCategory, setPrimaryCategory] = useState(category)
     const variant = useVariant(product)
     // This page uses the `primaryCategoryId` to retrieve the category data. This attribute

package/app/pages/registration/index.test.jsx

@@ -91,7 +91,6 @@ test('Allows customer to create an account', async () => {
     await user.type(withinForm.getByLabelText('Last Name'), 'Tester')
     await user.type(withinForm.getByPlaceholderText(/you@email.com/i), 'customer@test.com')
     await user.type(withinForm.getAllByLabelText(/password/i)[0], 'Password!1')
-    screen.logTestingPlaygroundURL()
 
     // login with credentials
     global.server.use(

package/app/ssr.js

@@ -11,6 +11,7 @@ import path from 'path'
 import {getRuntime} from '@salesforce/pwa-kit-runtime/ssr/server/express'
 import {isRemote} from '@salesforce/pwa-kit-runtime/utils/ssr-server'
 import {getConfig} from '@salesforce/pwa-kit-runtime/utils/ssr-config'
+import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'
 import helmet from 'helmet'
 
 const options = {
@@ -35,19 +36,64 @@ const options = {
 const runtime = getRuntime()
 
 const {handler} = runtime.createHandler(options, (app) => {
+    const getRuntimeEnv = () => {
+        if (process.env.NODE_ENV !== 'production') return process.env.NODE_ENV ?? 'development'
+        const origin = getAppOrigin()
+        // mobify-storefront-staging sites have NODE_ENV set to production, but for the purposes
+        // of CSP we consider the sites to be staging.
+        return origin.endsWith('.mobify-storefront-staging.com') ? 'staging' : 'production'
+    }
+
+    // This is a temporary solution while we work on Storefront Preview - a full solution will
+    // prevent required CSP headers from being modified.
+    const getCSP = () => {
+        const trustedMap = {
+            development: [
+                'localhost:*',
+                '*.commercecloud.salesforce.com',
+                '*.demandware.net',
+                '*.mobify-staging.com',
+                '*.mobify-storefront-staging.com',
+                '*.mobify-storefront.com',
+                'runtime.commercecloud.com'
+            ],
+            staging: [
+                '*.demandware.net',
+                '*.mobify-staging.com',
+                '*.mobify-storefront-staging.com',
+                '*.mobify-storefront.com',
+                '*.commercecloud.salesforce.com',
+                'runtime.commercecloud.com'
+            ],
+            production: [
+                '*.demandware.com',
+                '*.mobify.com',
+                '*.mobify-storefront.com',
+                '*.commercecloud.salesforce.com',
+                'runtime.commercecloud.com'
+            ]
+        }
+
+        const env = getRuntimeEnv()
+        const trusted = ["'self'", ...(trustedMap[env] ? trustedMap[env] : [])]
+
+        return {
+            'connect-src': ['api.cquotient.com', ...trusted],
+            'frame-ancestors': [...trusted],
+            'img-src': ['data:', ...trusted],
+            'script-src': ["'unsafe-eval'", 'storage.googleapis.com', ...trusted],
+
+            // Do not upgrade insecure requests for local development
+            'upgrade-insecure-requests': isRemote() ? [] : null
+        }
+    }
+
     // Set HTTP security headers
     app.use(
         helmet({
             contentSecurityPolicy: {
                 useDefaults: true,
-                directives: {
-                    'img-src': ["'self'", '*.commercecloud.salesforce.com', 'data:'],
-                    'script-src': ["'self'", "'unsafe-eval'", 'storage.googleapis.com'],
-                    'connect-src': ["'self'", 'api.cquotient.com'],
-
-                    // Do not upgrade insecure requests for local development
-                    'upgrade-insecure-requests': isRemote() ? [] : null
-                }
+                directives: getCSP()
             },
             hsts: isRemote()
         })

package/app/utils/product-utils.js

@@ -33,3 +33,21 @@ export const getDisplayVariationValues = (variationAttributes, values = {}) => {
     }, {})
     return returnVal
 }
+
+/**
+ * This function extract the promotional price from a product. If there are more than one price, the smallest price will be picked
+ * @param {object} product - product detail object
+ * @returns {{discountPrice: number, basePrice: number | string}}
+ */
+export const getDisplayPrice = (product) => {
+    const basePrice = product?.pricePerUnit || product?.price
+    const promotionalPriceList = product?.productPromotions
+        ?.map((promo) => promo.promotionalPrice)
+        .filter((i) => i !== null && i !== undefined)
+    // choose the smallest price among the promotionalPrice
+    const discountPrice = promotionalPriceList?.length ? Math.min(...promotionalPriceList) : null
+    return {
+        basePrice,
+        discountPrice
+    }
+}

package/app/utils/product-utils.test.js

@@ -5,7 +5,11 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import {getDisplayVariationValues} from '@salesforce/retail-react-app/app/utils/product-utils'
+import {
+    getDisplayPrice,
+    getDisplayVariationValues
+} from '@salesforce/retail-react-app/app/utils/product-utils'
+import {mockedCustomerProductListsDetails} from '@salesforce/retail-react-app/app/mocks/mock-data'
 
 const variationAttributes = [
     {
@@ -49,3 +53,25 @@ test('getDisplayVariationValues', () => {
         Width: 'M'
     })
 })
+
+describe('getDisplayPrice', function () {
+    test('returns basePrice and discountPrice', () => {
+        const {basePrice, discountPrice} = getDisplayPrice(
+            mockedCustomerProductListsDetails.data[0]
+        )
+
+        expect(basePrice).toBe(199.0)
+        expect(discountPrice).toBe(189.0)
+    })
+
+    test('returns null if there is not discount promotion', () => {
+        const data = {
+            ...mockedCustomerProductListsDetails.data[0],
+            productPromotions: []
+        }
+        const {basePrice, discountPrice} = getDisplayPrice(data)
+
+        expect(basePrice).toBe(199.0)
+        expect(discountPrice).toBeNull()
+    })
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "2.0.0",
+  "version": "2.1.0-nightly-20230927165653",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -45,10 +45,10 @@
     "@lhci/cli": "^0.11.0",
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
-    "@salesforce/commerce-sdk-react": "1.0.2",
-    "@salesforce/pwa-kit-dev": "3.1.1",
-    "@salesforce/pwa-kit-react-sdk": "3.1.1",
-    "@salesforce/pwa-kit-runtime": "3.1.1",
+    "@salesforce/commerce-sdk-react": "1.1.0-nightly-20230927165653",
+    "@salesforce/pwa-kit-dev": "3.2.0-nightly-20230927165653",
+    "@salesforce/pwa-kit-react-sdk": "3.2.0-nightly-20230927165653",
+    "@salesforce/pwa-kit-runtime": "3.2.0-nightly-20230927165653",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
     "@testing-library/dom": "^9.0.1",
@@ -103,5 +103,5 @@
   "overrides": {
     "nwsapi": "2.2.2"
   },
-  "gitHead": "0194d62014788b280549e70e6e80da279227b500"
+  "gitHead": "0ce804a25eeb347d8b4d2fb74752907b20ce4031"
 }