@salesforce/retail-react-app 1.1.0-preview.0 → 2.1.0-nightly-20230927165653

package/CHANGELOG.md

@@ -1,10 +1,20 @@
-## v1.1.0-preview.0
+## 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)
 
-- Fix price display when a discounted price is zero [#1361](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1361)
-- Fix price adjustments of a line item when more than one is present [#1362](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1362)
+- V3 Fix checkout card number [#1424](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1424)
+- Cleanup wrong import path for page-designer component [#1441](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1441) @clavery
+- Modularize country code source for targeting via extensibility [#1445](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1445) @bfeister
+- Export icon helper function for target via overrides [#1420](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1420) @cbrother-csu
+- Migrate Page Designer core types to commerce-sdk-react [#1441](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1441) @clavery
 
-## v1.1.0-dev (June 15, 2023)
+## v1.0.1 (Jul 26, 2023)
 
+- Fix price display when a discounted price is zero [#1361](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1361)
+- Fix price adjustments of a line item when more than one is present [#1362](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1362)
 - Registered user checkout should set order with an email [#1363](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1363)
 
 ## v1.0.0 (June 15, 2023)
@@ -16,9 +26,9 @@
 
 ## Older Versions Without Namespace
 
-The older versions below were published without the `@salesforce` namespace.
+The versions published below were not published on npm, and the versioning matched that of the PWA Kit SDK. These versions did not use the `@salesforce` namespace.
 
-## v2.7.1 (May 11, 2023)
+### v2.7.1 (May 11, 2023)
 
 - Replace invalid row value with nowrap [#1179](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1179)
 - Add a redirect to login page after user signs out from checkout page [#1172](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1172)
@@ -32,7 +42,7 @@ The older versions below were published without the `@salesforce` namespace.
 - Fix addresses not having preferred address first. [#1051](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1051)
 - Changed type of the phone number field to bring up numberic keyboard on mobile devices - W-9871940 [#1016)](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1016)
 
-## v2.7.0 (Mar 03, 2023)
+### v2.7.0 (Mar 03, 2023)
 
 - Add Page Designer ImageTile component [#967](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/967)
 - Add Page Designer ImageWithText component [#991](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/991)
@@ -40,7 +50,7 @@ The older versions below were published without the `@salesforce` namespace.
 - Add Page Designer layout components [#993](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/993)
 - Support the product-set type [#1019](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1019)
 
-## v2.6.0 (Jan 25, 2023)
+### v2.6.0 (Jan 25, 2023)
 
 - Mega menu fixes [#875](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/875) and [#910](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/910)
 - Cache SLAS callback using request processor [#884](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/884)
@@ -49,14 +59,14 @@ The older versions below were published without the `@salesforce` namespace.
 - Fix PropTypes [#924](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/924)
 - Remove unnecessary map statement [#929](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/929)
 
-## v2.5.0 (Jan 5, 2023)
+### v2.5.0 (Jan 5, 2023)
 
 - Add instanceType to Einstein activity body [#858](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/858)
 - Do not use a proxy to call Einstein [#857](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/857)
 - Einstein handle variants [#867](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/867)
 - Fix cc exp year [#874](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/874)
 
-## v2.4.0 (Dec 1, 2022)
+### v2.4.0 (Dec 1, 2022)
 
 - Dynamic footer Copyright date [#741](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/741)
 - Footer copyright: remove the remaining hardcoded year [#760](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/760)
@@ -66,7 +76,7 @@ The older versions below were published without the `@salesforce` namespace.
 - pwa-kit-dev command for tailing logs [#789](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/789)
 - Update usages of zzrf-001 ODS instance to the new short URL format [#816](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/816)
 
-## v2.3.0 (Oct 27, 2022)
+### v2.3.0 (Oct 27, 2022)
 
 - Fix locale `alias` by including `locale` object inside the MultiSite Context. [#716](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/716)
 - Updated translations. [#725](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/725)
@@ -77,20 +87,20 @@ The older versions below were published without the `@salesforce` namespace.
 - Bugfix: image gallery thumbnails not working without DIS [#786](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/786)
 - Ensure that a valid target locale is use if none is provided [#788](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/788)
 
-## v2.2.0 (Aug 25, 2022)
+### v2.2.0 (Aug 25, 2022)
 
 - Update zzrf-001 url [#694](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/694)
 - Optimize Server-side performance [#667](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/667)
 - Remove references to session bridging [#684](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/684)
 
-## v2.1.0 (Jul 05, 2022)
+### v2.1.0 (Jul 05, 2022)
 
 - Update translations [#643](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/643)
 - Update translations [#653](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/653)
 - Add bundlesize test back into CI [#652](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/652)
 - Fix UI bug on notifications badge [#620](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/620)
 
-## v2.0.0 (May 16, 2022)
+### v2.0.0 (May 16, 2022)
 
 - Update translation docs [#570](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/570)
 - Fixed loading correct amount of skeletons [#576] (<https://github.com/SalesforceCommerceCloud/pwa-kit/pull/576>)
@@ -110,7 +120,7 @@ The older versions below were published without the `@salesforce` namespace.
 - Service worker loading for dev server [#464](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/464)
 - Environment Specific Configuration Support [#477](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/447)
 
-## v1.5.0 (Mar 17, 2022)
+### v1.5.0 (Mar 17, 2022)
 
 - Support storing authentication tokens in cookie [#429](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/429)
 - Make sure the forgot-password modal also shows up in the checkout flow [#373](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/373)
@@ -118,7 +128,7 @@ The older versions below were published without the `@salesforce` namespace.
 - Import cross-fetch to make OCAPI client isomorphic [#382](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/382)
 - Multi-site implementation for Retail React App [#391](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/391)
 
-## v1.4.0 (Jan 27, 2022)
+### v1.4.0 (Jan 27, 2022)
 
 - Do not send HSTS header during local development [#288](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/288)
 - Add constants for `<meta>` tags `theme-color` and `apple-mobile-web-app-title` [#287](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/287)
@@ -126,7 +136,7 @@ The older versions below were published without the `@salesforce` namespace.
 - Import preliminary translations [#324](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/324)
 - Remove old dependencies that are no longer used [#317](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/317)
 
-## v1.3.0 (Jan 06, 2022)
+### v1.3.0 (Jan 06, 2022)
 
 - Remove Einstein from home page [#208](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/208)
 - Add git2gus config to allow git2gus integration [210](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/210)
@@ -148,7 +158,7 @@ The older versions below were published without the `@salesforce` namespace.
 - Fix show applied promotion codes case sensitive issue [#224](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/224)
 - Fix section subtitle incorrect prop warning [#282](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/282)
 
-## v1.2.0 (Nov 18, 2021)
+### v1.2.0 (Nov 18, 2021)
 
 - Simplify homepage for Retail React App [#201](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/201)
 - Ensure `cookieId` value is sent always for Einstein recommendations [#179](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/179)
@@ -169,7 +179,7 @@ The older versions below were published without the `@salesforce` namespace.
 - Add cache control header to product details page [#172](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/172)
 - Clear SLAS tokens when OID is changed [#178](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/178)
 
-## v1.1.0 (Sep 27, 2021)
+### v1.1.0 (Sep 27, 2021)
 
 - Fix wishlist bugs and provide better hooks for wishlist features. [#64](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/64)
 - Lazy load Popover component. [#134](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/134)
@@ -182,6 +192,6 @@ The older versions below were published without the `@salesforce` namespace.
 - Security - `inquirer` package upgrade. [#121](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/121)
 - New quantity picker. [#102](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/102)
 
-## v1.0.0 (Sep 08, 2021)
+### v1.0.0 (Sep 08, 2021)
 
 - PWA Kit General Availability and open source. 🎉

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/forms/useAddressFields.jsx

@@ -10,6 +10,7 @@ import {
     stateOptions,
     provinceOptions
 } from '@salesforce/retail-react-app/app/components/forms/state-province-options'
+import {SHIPPING_COUNTRY_CODES} from '@salesforce/retail-react-app/app/constants'
 
 const messages = defineMessages({
     required: {defaultMessage: 'Required', id: 'use_address_fields.error.required'},
@@ -103,10 +104,7 @@ export default function useAddressFields({
             label: formatMessage(messages.country),
             defaultValue: 'US',
             type: 'select',
-            options: [
-                {value: 'CA', label: 'Canada'},
-                {value: 'US', label: 'United States'}
-            ],
+            options: SHIPPING_COUNTRY_CODES,
             rules: {
                 required: formatMessage({
                     defaultMessage: 'Please select your country.',

package/app/components/icons/index.jsx

@@ -84,7 +84,7 @@ VisaSymbol.viewBox = VisaSymbol.viewBox || '0 0 38 22'
  * @param {string} name - the filename of the imported svg (does not include extension)
  */
 /* istanbul ignore next */
-const icon = (name, passProps) => {
+export const icon = (name, passProps) => {
     const displayName = name
         .toLowerCase()
         .replace(/(?:^|[\s-/])\w/g, (match) => match.toUpperCase())

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/constants.js

@@ -107,3 +107,8 @@ export const EINSTEIN_RECOMMENDERS = {
     EMPTY_SEARCH_RESULTS_TOP_SELLERS: 'home-top-revenue-for-category',
     EMPTY_SEARCH_RESULTS_MOST_VIEWED: 'products-in-all-categories'
 }
+
+export const SHIPPING_COUNTRY_CODES = [
+    {value: 'CA', label: 'Canada'},
+    {value: 'US', label: 'United States'}
+]

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/page-designer/index.js

@@ -5,6 +5,6 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import {Page, pageType} from '@salesforce/retail-react-app/app/page-designer/core'
+import {Page, pageType} from '@salesforce/commerce-sdk-react/components'
 
 export {Page, pageType}

package/app/pages/checkout/partials/payment.jsx

@@ -24,6 +24,7 @@ import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-curre
 import {useCheckout} from '@salesforce/retail-react-app/app/pages/checkout/util/checkout-context'
 import {
     getPaymentInstrumentCardType,
+    getMaskCreditCardNumber,
     getCreditCardIcon
 } from '@salesforce/retail-react-app/app/utils/cc-utils'
 import {
@@ -84,7 +85,7 @@ const Payment = () => {
             paymentMethodId: 'CREDIT_CARD',
             paymentCard: {
                 holder: formValue.holder,
-                issueNumber: formValue.number.replace(/ /g, ''),
+                maskedNumber: getMaskCreditCardNumber(formValue.number),
                 cardType: getPaymentInstrumentCardType(formValue.cardType),
                 expirationMonth: parseInt(expirationMonth),
                 expirationYear: parseInt(`20${expirationYear}`)

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/cc-utils.js

@@ -83,6 +83,21 @@ export const getPaymentInstrumentCardType = (type) => {
     }[type]
 }
 
+/**
+ * Returns the masked credit card number by removing white spaces,
+ * replacing all digits except the last 4 using the '*' character.
+ * @param cardNumber - The card number unmasked
+ * @returns {string} - The masked card number
+ */
+export const getMaskCreditCardNumber = (cardNumber) => {
+    const trimmedCardNumber = cardNumber.replace(/\s/g, '')
+
+    const maskedDigits = trimmedCardNumber.slice(0, -4).replace(/\d/g, '*')
+    const lastFourDigits = trimmedCardNumber.slice(-4)
+
+    return maskedDigits + lastFourDigits
+}
+
 export const createCreditCardPaymentBodyFromForm = (paymentFormData) => {
     // Using destructuring to omit properties
     // eslint-disable-next-line @typescript-eslint/no-unused-vars

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": "1.1.0-preview.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.1-preview.0",
-    "@salesforce/pwa-kit-dev": "3.1.0-preview.4",
-    "@salesforce/pwa-kit-react-sdk": "3.1.0-preview.4",
-    "@salesforce/pwa-kit-runtime": "3.1.0-preview.4",
+    "@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": "8ef8310dabf77dfdc50b76fbe2464f771c6a69c0"
+  "gitHead": "0ce804a25eeb347d8b4d2fb74752907b20ce4031"
 }