@W-14629134@ Fix error component regression (#1609)

* pass intl object as prop instead of calling hook

* add proptypes

* add unit tests

* remove unused vars caught by linter

* Update packages/template-retail-react-app/app/components/_error/index.test.js

Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>
Signed-off-by: Joel Uong <88680517+joeluong-sfcc@users.noreply.github.com>

* update unit tests

* remove intl prop from LockIcon

---------

Signed-off-by: Joel Uong <88680517+joeluong-sfcc@users.noreply.github.com>
Co-authored-by: Will Harney <62956339+wjhsf@users.noreply.github.com>

Author: joeluong-sfcc

packages/template-retail-react-app/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()
 })

packages/template-retail-react-app/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
 }

packages/template-retail-react-app/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)
+})

packages/template-retail-react-app/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'

packages/template-retail-react-app/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,