@salesforce/retail-react-app 2.2.0-preview.0 → 2.2.0

package/CHANGELOG.md

@@ -1,8 +1,9 @@
-## v2.2.0-dev (Nov 3, 2023)
+## v2.2.0 (Nov 8, 2023)
 
 ### Accessibility Improvements
 
 <!-- Order by Pull Request ID! -->
+- Ensure the ListMenuTrigger component applies ARIA attributes to the correct element for the trigger icon [#1600](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1600)
 - Ensure form fields and icons have accessible labels [#1526](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1526)
 - Ensure active user interface components have sufficient contrast [#1534](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1534)
 - Fix outline on keyboard focus [#1536](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1536/files)
@@ -11,6 +12,7 @@
 - Make security code tooltip receive keyboard focus [#1551](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1551)
 - Improve accessibility of quantity picker [#1552](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1552)
 - Improve keyboard accessibility of product scroller [#1559](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1559)
+- Fix focus indicator for hero features links on homepage [#1561](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1561)
 - Ensure color is not the sole means of communicating information [#1570](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1570)
 
 ### Other Features
@@ -18,11 +20,15 @@
 - Add [Active Data](https://help.salesforce.com/s/articleView?id=cc.b2c_active_data_attributes.htm&type=5) files, update pages (app index.jsx, product list and product details pages) to trigger events on product category and product detail views [#1555](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1555)
 - Replace max-age with s-maxage to only cache shared caches [#1564](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1564)
 - Implement gift option for basket [#1546](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1546)
+- Update `extract-default-messages` script to support multiple locales [#1574](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1574)
+- Update engine compatibility to include npm 10 [#1597](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1597)
+- Add support for localization in icon component [#1609](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1609)
 
 ### Bug Fixes
 
 - Remove internal linter rule that is missing in generated projects [#1554](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1554)
 - Fix bug where you can add duplicates of the same item to the wishlist. Also fixes bug where skeleton appears when removing last item from the wishlist. [#1560](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1560)
+- Replace max-age with s-maxage to only cache shared caches [#1564](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1564)
 - Fix PLP filters for mobile [#1565](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1565)
 
 ## v2.1.1 (Nov 7, 2023)

package/app/components/_error/index.test.js

@@ -5,21 +5,24 @@
  * 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} from '@testing-library/react'
-import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import Error from '@salesforce/retail-react-app/app/components/_error/index'
+// !!! ----- WARNING ----- WARNING ----- WARNING ----- !!!
+// Tests use render instead of renderWithProviders because
+// error component is rendered outside provider tree
+// !!! ----------------------------------------------- !!!
+import {screen, render} from '@testing-library/react'
 
 test('Error renders without errors', () => {
-    expect(renderWithProviders(<Error />)).toBeDefined()
+    expect(render(<Error />)).toBeDefined()
 })
 
 test('Error status 500', () => {
-    renderWithProviders(<Error status={500} />)
+    render(<Error status={500} />)
     expect(screen.getByRole('heading', {level: 2})).toHaveTextContent("This page isn't working")
 })
 
 test('Error status 500 with stack trace', () => {
-    renderWithProviders(<Error status={500} stack={'Stack trace error message'} />)
+    render(<Error status={500} stack={'Stack trace error message'} />)
     expect(screen.getByRole('heading', {level: 2})).toHaveTextContent("This page isn't working")
     expect(screen.getByText(/stack trace error message/i)).toBeInTheDocument()
 })

package/app/components/icons/index.jsx

@@ -4,8 +4,9 @@
  * 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, {forwardRef} from 'react'
-import {useIntl, defineMessage} from 'react-intl'
+import React, {forwardRef, useContext} from 'react'
+import {defineMessage, IntlContext} from 'react-intl'
+import PropTypes from 'prop-types'
 import {Icon, useTheme} from '@salesforce/retail-react-app/app/components/shared/ui'
 
 // Our own SVG imports. These will be extracted to a single sprite sheet by the
@@ -85,7 +86,9 @@ VisaSymbol.viewBox = VisaSymbol.viewBox || '0 0 38 22'
  * @param {string} name - the filename of the imported svg (does not include extension)
  * @param {Object} passProps - props that will be passed onto the underlying Icon component
  * @param {Object} localizationAttributes - attributes with localized values that will be passed
- *      onto the underlying Icon component, use `defineMessage` to create localized string
+ *      onto the underlying Icon component, use `defineMessage` to create localized string.
+ *      Additionally, if the icon is rendered outside the provider tree, you'll also need to
+ *      pass an intl object from react-intl as a prop to translate the messages.
  */
 /* istanbul ignore next */
 export const icon = (name, passProps, localizationAttributes) => {
@@ -95,8 +98,21 @@ export const icon = (name, passProps, localizationAttributes) => {
         .replace(/-/g, '')
     const component = forwardRef((props, ref) => {
         const theme = useTheme()
-        const intl = useIntl()
+        // NOTE: We want to avoid `useIntl` here because that throws when <IntlProvider> is not in
+        // the component ancestry, but we only enforce `intl` if we have `localizationAttributes`.
+        let intl = useContext(IntlContext)
         if (localizationAttributes) {
+            if (props?.intl) {
+                const {intl: intlProp, ...otherProps} = props
+                // Allow `props.intl` to take precedence over the intl we found
+                intl = intlProp
+                props = otherProps
+            }
+            if (!intl) {
+                throw new Error(
+                    'To localize messages, you must either have <IntlProvider> in the component ancestry or provide `intl` as a prop'
+                )
+            }
             Object.keys(localizationAttributes).forEach((key) => {
                 passProps[key] = intl.formatMessage(localizationAttributes[key])
             })
@@ -108,6 +124,11 @@ export const icon = (name, passProps, localizationAttributes) => {
             </Icon>
         )
     })
+
+    component.propTypes = {
+        intl: PropTypes.object
+    }
+
     component.displayName = `${displayName}Icon`
     return component
 }

package/app/components/icons/index.test.js

@@ -5,10 +5,21 @@
  * 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 {useIntl} from 'react-intl'
 import {within} from '@testing-library/dom'
+import {render} from '@testing-library/react'
 import {renderWithProviders} from '@salesforce/retail-react-app/app/utils/test-utils'
 import * as Icons from '@salesforce/retail-react-app/app/components/icons/index'
 
+jest.mock('react-intl', () => ({
+    ...jest.requireActual('react-intl'),
+    useIntl: jest.fn()
+}))
+
+beforeEach(() => {
+    jest.clearAllMocks()
+})
+
 test('renders svg icons with Chakra Icon component', () => {
     renderWithProviders(<Icons.CheckIcon />)
     const svg = document.querySelector('.chakra-icon')
@@ -18,3 +29,30 @@ test('renders svg icons with Chakra Icon component', () => {
     expect(svg).toHaveAttribute('viewBox', '0 0 24 24')
     expect(use).toHaveAttribute('xlink:href', '#check')
 })
+
+test('uses intl from context when rendered with providers', () => {
+    renderWithProviders(<Icons.LockIcon />)
+    expect(useIntl).toHaveBeenCalled()
+})
+
+// the icon component can exist outside the provider tree via the error component
+// therefore we cannot use the useIntl hook because the <IntlProvider> component
+// will not exist in the component tree, so we pass the intl object as a prop
+test('uses intl from props when rendered outside provider tree', () => {
+    const mockIntl = {
+        formatMessage: jest.fn()
+    }
+
+    // render without providers
+    render(<Icons.LockIcon intl={mockIntl} />)
+
+    expect(mockIntl.formatMessage).toHaveBeenCalled()
+    expect(useIntl).not.toHaveBeenCalled()
+})
+
+test('throws error when rendered outside provider tree and no intl prop is passed', async () => {
+    const errorMsg =
+        'To localize messages, you must either have <IntlProvider> in the component ancestry or provide `intl` as a prop'
+    // render without providers
+    expect(() => render(<Icons.LockIcon />)).toThrow(errorMsg)
+})

package/app/components/list-menu/index.jsx

@@ -69,21 +69,21 @@ const ListMenuTrigger = ({item, name, isOpen, onOpen, onClose, hasItems}) => {
                 {name}
             </Link>
 
-            <Link
-                as={RouteLink}
-                to={'#'}
-                onMouseOver={onOpen}
-                onKeyDown={(e) => {
-                    keyMap[e.key]?.(e)
-                }}
-                {...baseStyle.listMenuTriggerLinkIcon}
-            >
-                <PopoverTrigger>
+            <PopoverTrigger>
+                <Link
+                    as={RouteLink}
+                    to={'#'}
+                    onMouseOver={onOpen}
+                    onKeyDown={(e) => {
+                        keyMap[e.key]?.(e)
+                    }}
+                    {...baseStyle.listMenuTriggerLinkIcon}
+                >
                     <Fade in={hasItems}>
                         <ChevronIconTrigger {...baseStyle.selectedButtonIcon} />
                     </Fade>
-                </PopoverTrigger>
-            </Link>
+                </Link>
+            </PopoverTrigger>
         </Box>
     )
 }

package/app/components/promo-popover/index.jsx

@@ -16,7 +16,6 @@ import {
     PopoverContent,
     PopoverHeader,
     PopoverTrigger,
-    Portal,
     Text
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import {InfoIcon} from '@salesforce/retail-react-app/app/components/icons'

package/app/pages/cart/partials/cart-secondary-button-group.jsx

@@ -7,7 +7,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {
-    Box,
     Button,
     ButtonGroup,
     Checkbox,

package/app/pages/home/index.jsx

@@ -130,13 +130,12 @@ const Home = () => {
                     {heroFeatures.map((feature, index) => {
                         const featureMessage = feature.message
                         return (
-                            <Box
-                                key={index}
-                                background={'white'}
-                                boxShadow={'0px 2px 2px rgba(0, 0, 0, 0.1)'}
-                                borderRadius={'4px'}
-                            >
-                                <Link target="_blank" href={feature.href}>
+                            <Link key={index} target="_blank" href={feature.href}>
+                                <Box
+                                    background={'white'}
+                                    boxShadow="0px 2px 2px rgba(0, 0, 0, 0.1)"
+                                    borderRadius={'4px'}
+                                >
                                     <HStack>
                                         <Flex
                                             paddingLeft={6}
@@ -150,8 +149,8 @@ const Home = () => {
                                             {intl.formatMessage(featureMessage.title)}
                                         </Text>
                                     </HStack>
-                                </Link>
-                            </Box>
+                                </Box>
+                            </Link>
                         )
                     })}
                 </SimpleGrid>

package/app/static/translations/compiled/en-GB.json

@@ -1339,6 +1339,12 @@
       "value": " added to wishlist"
     }
   ],
+  "global.info.already_in_wishlist": [
+    {
+      "type": 0,
+      "value": "Item is already in wishlist"
+    }
+  ],
   "global.info.removed_from_wishlist": [
     {
       "type": 0,
@@ -2327,7 +2333,7 @@
       "value": " to wishlist"
     }
   ],
-  "product_tile.assistive_msg.remove_from wishlist": [
+  "product_tile.assistive_msg.remove_from_wishlist": [
     {
       "type": 0,
       "value": "Remove "

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "2.2.0-preview.0",
+  "version": "2.2.0",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -14,7 +14,7 @@
     "build-translations": "npm run extract-default-translations && npm run compile-translations && npm run compile-translations:pseudo",
     "compile-translations": "node ./scripts/translations/compile-folder.js translations",
     "compile-translations:pseudo": "node ./scripts/translations/compile-pseudo.js translations/en-US.json",
-    "extract-default-translations": "node ./scripts/translations/extract-default-messages.js en-US",
+    "extract-default-translations": "node ./scripts/translations/extract-default-messages.js en-US en-GB",
     "format": "pwa-kit-dev format \"**/*.{js,jsx}\"",
     "lint": "pwa-kit-dev lint \"**/*.{js,jsx}\"",
     "lint:fix": "npm run lint -- --fix",
@@ -45,10 +45,10 @@
     "@lhci/cli": "^0.11.0",
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
-    "@salesforce/commerce-sdk-react": "1.2.0-preview.0",
-    "@salesforce/pwa-kit-dev": "3.3.0-preview.0",
-    "@salesforce/pwa-kit-react-sdk": "3.3.0-preview.0",
-    "@salesforce/pwa-kit-runtime": "3.3.0-preview.0",
+    "@salesforce/commerce-sdk-react": "1.2.0",
+    "@salesforce/pwa-kit-dev": "3.3.0",
+    "@salesforce/pwa-kit-react-sdk": "3.3.0",
+    "@salesforce/pwa-kit-runtime": "3.3.0",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
     "@testing-library/dom": "^9.0.1",
@@ -88,7 +88,7 @@
   },
   "engines": {
     "node": "^16.11.0 || ^18.0.0",
-    "npm": "^8.0.0 || ^9.0.0"
+    "npm": "^8.0.0 || ^9.0.0 || ^10.0.0"
   },
   "bundlesize": [
     {
@@ -100,5 +100,5 @@
       "maxSize": "320 kB"
     }
   ],
-  "gitHead": "e96474c4e78bf0ab74c44fc6647f5614db71d769"
+  "gitHead": "93894bb7d823f3510e10affdb1eb8e6750b25822"
 }

package/scripts/translations/extract-default-messages.js

@@ -16,77 +16,68 @@ const fs = require('fs')
 const path = require('path')
 const packagePath = path.join(process.cwd(), 'package.json')
 const pkgJSON = JSON.parse(fs.readFileSync(packagePath))
-const locale = process.argv[2]
 
 const getAllFilesByExtensions = (dirPath, arrayOfFiles = [], extensions = []) => {
-    const files = fs.readdirSync(dirPath)
+    const files = fs.readdirSync(dirPath, {withFileTypes: true})
 
     files.forEach(function (file) {
-        if (fs.statSync(path.join(dirPath, file)).isDirectory()) {
-            arrayOfFiles = getAllFilesByExtensions(
-                path.join(dirPath, file),
-                arrayOfFiles,
-                extensions
-            )
-        } else {
-            arrayOfFiles.push(path.join(dirPath, file))
+        const filePath = path.join(dirPath, file.name)
+        if (file.isDirectory()) {
+            arrayOfFiles = getAllFilesByExtensions(filePath, arrayOfFiles, extensions)
+        } else if (extensions.length === 0 || extensions.includes(path.extname(filePath))) {
+            arrayOfFiles.push(filePath)
         }
     })
-    if (extensions.length) {
-        return arrayOfFiles.filter((filePath) => {
-            const getExtension = path.extname(filePath).replace('.', '')
-            return extensions.includes(getExtension)
-        })
-    }
 
     return arrayOfFiles
 }
 
-try {
-    const overridesDir = pkgJSON.ccExtensibility?.overridesDir
+function extract(locale) {
+    // `extends` is a reserved word (`class A extends B {}`)
+    const {extends: extendsPkg, overridesDir} = pkgJSON.ccExtensibility || {}
     if (!overridesDir) {
-        const command = `formatjs extract "app/**/*.{js,jsx,ts,tsx}" --out-file translations/${locale}.json --id-interpolation-pattern [sha512:contenthash:base64:6]`
+        const command = [
+            'formatjs extract "app/**/*.{js,jsx,ts,tsx}"',
+            `--out-file translations/${locale}.json`,
+            '--id-interpolation-pattern [sha512:contenthash:base64:6]'
+        ].join(' ')
         exec(command, (err) => {
             if (err) {
                 console.error(err)
             }
         })
     } else {
-        const overridesPath = path.join(process.cwd(), pkgJSON.ccExtensibility?.overridesDir)
+        const overridesPath = path.join(process.cwd(), overridesDir)
         // get all the files in extended app
         const files = getAllFilesByExtensions(
             path.join(overridesPath, 'app'),
             [],
-            ['js', 'jsx', 'ts', 'tsx']
+            ['.js', '.jsx', '.ts', '.tsx']
         )
         // get the file names that are overridden in base template
         const overriddenFiles = files
-            .map((path) => {
-                const replacedPath = path.replace(
-                    overridesDir,
-                    `node_modules/${pkgJSON.ccExtensibility?.extends}`
-                )
-                // check if this file does exist in base template
-                const isFileExist = fs.existsSync(replacedPath)
-                return isFileExist ? replacedPath : ''
-            })
-            .filter(Boolean)
-        // rename the files needs to ignore to have .ignore extensions so it won't be recognized by formatjs
-        overriddenFiles.forEach((filePath) => {
-            fs.rename(filePath, `${filePath}.ignore`, (err) => err && console.error(err))
-        })
-
-        const extractCommand = `formatjs extract "./node_modules/${pkgJSON.ccExtensibility?.extends}/app/**/*.{js,jsx,ts,tsx}" "${pkgJSON.ccExtensibility?.overridesDir}/app/**/*.{js,jsx,ts,tsx}" --out-file translations/${locale}.json --id-interpolation-pattern [sha512:contenthash:base64:6]`
+            .map((path) => path.replace(overridesDir, `node_modules/${extendsPkg}`))
+            .filter((file) => fs.existsSync(file))
+        const extractCommand = [
+            'formatjs extract',
+            '"./node_modules/${extendsPkg}/app/**/*.{js,jsx,ts,tsx}"',
+            '"${overridesDir}/app/**/*.{js,jsx,ts,tsx}"',
+            `--out-file translations/${locale}.json`,
+            '--id-interpolation-pattern [sha512:contenthash:base64:6]',
+            '--ignore',
+            ...overriddenFiles.map((file) => `'${file}'`)
+        ].join(' ')
         exec(extractCommand, (err) => {
             if (err) {
                 console.error(err)
             }
-            // restore file names
-            overriddenFiles.forEach((filePath) => {
-                fs.rename(`${filePath}.ignore`, filePath, (err) => err && console.error(err))
-            })
         })
     }
+}
+
+try {
+    // example usage: node ./scripts/translations/extract-default-messages en-US en-GB
+    process.argv.slice(2).forEach(extract)
 } catch (error) {
     console.error(error)
 }

package/translations/en-GB.json

@@ -543,6 +543,9 @@
   "global.info.added_to_wishlist": {
     "defaultMessage": "{quantity} {quantity, plural, one {item} other {items}} added to wishlist"
   },
+  "global.info.already_in_wishlist": {
+    "defaultMessage": "Item is already in wishlist"
+  },
   "global.info.removed_from_wishlist": {
     "defaultMessage": "Item removed from wishlist"
   },
@@ -1005,7 +1008,7 @@
   "product_tile.assistive_msg.add_to_wishlist": {
     "defaultMessage": "Add {product} to wishlist"
   },
-  "product_tile.assistive_msg.remove_from wishlist": {
+  "product_tile.assistive_msg.remove_from_wishlist": {
     "defaultMessage": "Remove {product} from wishlist"
   },
   "product_tile.label.starting_at_price": {