merge next branch into feature branch to resolve merge conflict in packages/template-chakra-storefront/src/components/product-view/index.jsx

packages/pwa-kit-create-app/CHANGELOG.md

@@ -3,6 +3,7 @@
 - Deprecate V3 Extensibility and experimental V4 Extensibility (#2573)
 - Move extensibility logic to generator (#2573)
 - Apply prettier to trimmed files (#2688)
+- Add Wishlist feature extension flag [#3046](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3046)
 - Convert Social Login feature into an extension [#3017](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3017)
 
 ## v3.10.0 (Feb 18, 2025)

packages/pwa-kit-create-app/assets/plugin-config.js

@@ -19,6 +19,9 @@ module.exports = {
         // },
         SFDC_EXT_SOCIAL_LOGIN: {
             description: 'Social login Extension'
+        },
+        SFDC_EXT_WISHLIST: {
+            description: 'Wishlist Extension'
         }
     }
 }

packages/pwa-kit-create-app/scripts/create-mobify-app.js

@@ -279,7 +279,8 @@ const PRESETS = [
             'project.dataCloud.appSourceId': '7ae070a6-f4ec-4def-a383-d9cacc3f20a1',
             'project.dataCloud.tenantId': 'g82wgnrvm-ywk9dggrrw8mtggy.pc-rnd',
             'project.demo.enableDemoSettings': false,
-            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false,
+            'project.selectedPlugins.SFDC_EXT_WISHLIST': false
         },
         assets: ['translations'],
         private: false
@@ -315,7 +316,8 @@ const PRESETS = [
             ['project.dataCloud.appSourceId']: 'fb81edab-24c6-4b40-8684-b67334dfdf32',
             ['project.dataCloud.tenantId']: 'mmyw8zrxhfsg09lfmzrd1zjqmg',
             ['project.demo.enableDemoSettings']: true, // True only for presets deployed to demo environments like pwa-kit.mobify-storefront.com
-            ['project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN']: false
+            ['project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN']: false,
+            ['project.selectedPlugins.SFDC_EXT_WISHLIST']: false
         },
         assets: ['translations'],
         private: true
@@ -342,7 +344,8 @@ const PRESETS = [
             'project.dataCloud.appSourceId': 'fb81edab-24c6-4b40-8684-b67334dfdf32',
             'project.dataCloud.tenantId': 'mmyw8zrxhfsg09lfmzrd1zjqmg',
             'project.demo.enableDemoSettings': false,
-            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': true
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': true,
+            'project.selectedPlugins.SFDC_EXT_WISHLIST': true
         },
         assets: ['translations'],
         private: true
@@ -369,7 +372,8 @@ const PRESETS = [
             'project.dataCloud.appSourceId': 'fb81edab-24c6-4b40-8684-b67334dfdf32',
             'project.dataCloud.tenantId': 'mmyw8zrxhfsg09lfmzrd1zjqmg',
             'project.demo.enableDemoSettings': false,
-            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false,
+            'project.selectedPlugins.SFDC_EXT_WISHLIST': false
         },
         assets: ['translations'],
         private: true
@@ -396,7 +400,8 @@ const PRESETS = [
             'project.dataCloud.tenantId': 'mmyw8zrxhfsg09lfmzrd1zjqmg',
             'project.commerce.isSlasPrivate': true,
             'project.demo.enableDemoSettings': false,
-            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false,
+            'project.selectedPlugins.SFDC_EXT_WISHLIST': false
         },
         assets: ['translations'],
         private: true
@@ -423,7 +428,8 @@ const PRESETS = [
             'project.dataCloud.appSourceId': 'fb81edab-24c6-4b40-8684-b67334dfdf32',
             'project.dataCloud.tenantId': 'mmyw8zrxhfsg09lfmzrd1zjqmg',
             'project.demo.enableDemoSettings': false,
-            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false,
+            'project.selectedPlugins.SFDC_EXT_WISHLIST': false
         },
         assets: ['translations'],
         private: true
@@ -450,7 +456,8 @@ const PRESETS = [
             'project.dataCloud.appSourceId': 'fb81edab-24c6-4b40-8684-b67334dfdf32',
             'project.dataCloud.tenantId': 'mmyw8zrxhfsg09lfmzrd1zjqmg',
             'project.demo.enableDemoSettings': false,
-            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false,
+            'project.selectedPlugins.SFDC_EXT_WISHLIST': false
         },
         assets: ['translations'],
         private: true
@@ -920,6 +927,7 @@ const main = async (opts) => {
             answers: expandObject(answers)
         })
     }
+
     // load plugin selected answer from context object to selectedPlugins (which used for code trimming process)
     Object.entries(context.answers?.project?.selectedPlugins || {}).forEach(
         ([pluginKey, enabled]) => {

packages/template-chakra-storefront/CHANGELOG.md

@@ -8,6 +8,7 @@
 - Migrate directory structure from `app/*` to `src/*` [#2693](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2693)
 - Upgrade to Chakra UI v3 and Decomposition on Cart, PLP, PDP and Cart [2839](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2839), [#2872](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2872), [#2878](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2878), [#2924](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2924)
 - Create a safe version of `<Portal>` that won't break the SSR rendering [#2785](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2785)
+- Convert Wishlist feature into an extension [#3046](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3046)
 - Convert Social Login feature into an extension [#3017](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3017)
 
 

packages/template-chakra-storefront/config/constants.js

@@ -58,6 +58,7 @@ export const urlPartPositions = {
 // definitions to a common location (here), so that each message is only defined
 // once.
 
+//@sfdc-extension-block-start SFDC_EXT_WISHLIST
 export const TOAST_MESSAGE_ADDED_TO_WISHLIST = defineMessage({
     id: 'global.info.added_to_wishlist',
     defaultMessage: '{quantity} {quantity, plural, one {item} other {items}} added to wishlist'
@@ -68,11 +69,6 @@ export const TOAST_MESSAGE_ALREADY_IN_WISHLIST = defineMessage({
     defaultMessage: 'Item is already in wishlist'
 })
 
-export const TOAST_MESSAGE_REMOVED_ITEM_FROM_CART = defineMessage({
-    defaultMessage: 'Item removed from cart',
-    id: 'cart.info.removed_from_cart'
-})
-
 export const TOAST_ACTION_VIEW_WISHLIST = defineMessage({
     defaultMessage: 'View',
     id: 'global.link.added_to_wishlist.view_wishlist'
@@ -82,6 +78,11 @@ export const TOAST_MESSAGE_REMOVED_FROM_WISHLIST = defineMessage({
     id: 'global.info.removed_from_wishlist',
     defaultMessage: 'Item removed from wishlist'
 })
+//@sfdc-extension-block-end SFDC_EXT_WISHLIST
+export const TOAST_MESSAGE_REMOVED_ITEM_FROM_CART = defineMessage({
+    defaultMessage: 'Item removed from cart',
+    id: 'cart.info.removed_from_cart'
+})
 
 // Einstein recommender constants used in <RecommendedProducts/>
 export const EINSTEIN_RECOMMENDERS = {

packages/template-chakra-storefront/src/components/_app/hooks/use-app-navigation.js

@@ -37,16 +37,19 @@ export const useAppNavigation = () => {
         history?.push(path)
     }, [buildUrl, history])
 
+    //@sfdc-extension-block-start SFDC_EXT_WISHLIST
     const onWishlistClick = useCallback(() => {
         // Link to wishlist page if registered; Header component will show auth modal for guest users
         const path = buildUrl('/account/wishlist')
         history?.push(path)
     }, [buildUrl, history])
+    //@sfdc-extension-block-end SFDC_EXT_WISHLIST
 
     return {
         onLogoClick,
         onCartClick,
         onAccountClick,
+        //@sfdc-extension-line SFDC_EXT_WISHLIST
         onWishlistClick
     }
 }

packages/template-chakra-storefront/src/components/_app/hooks/use-app-navigation.test.js

@@ -59,6 +59,7 @@ describe('useAppNavigation', () => {
         expect(result.current.onLogoClick).toEqual(expect.any(Function))
         expect(result.current.onCartClick).toEqual(expect.any(Function))
         expect(result.current.onAccountClick).toEqual(expect.any(Function))
+        //@sfdc-extension-line SFDC_EXT_WISHLIST
         expect(result.current.onWishlistClick).toEqual(expect.any(Function))
     })
 
@@ -89,6 +90,7 @@ describe('useAppNavigation', () => {
         expect(mockHistory.push).toHaveBeenCalledWith('/account')
     })
 
+    //@sfdc-extension-block-start SFDC_EXT_WISHLIST
     test('handles wishlist click navigation', () => {
         const {result} = renderHook(() => useAppNavigation())
 
@@ -97,6 +99,7 @@ describe('useAppNavigation', () => {
         expect(mockLocalization.buildUrl).toHaveBeenCalledWith('/account/wishlist')
         expect(mockHistory.push).toHaveBeenCalledWith('/account/wishlist')
     })
+    //@sfdc-extension-block-end SFDC_EXT_WISHLIST
 
     test('handles multiple navigation calls', () => {
         const {result} = renderHook(() => useAppNavigation())

packages/template-chakra-storefront/src/components/_app/index.jsx

@@ -47,7 +47,13 @@ const App = (props) => {
     const {getTokenWhenReady, authModal} = useAppAuth()
     const {targetLocale, messages, site, locale, buildUrl, currency, appOrigin} =
         useAppLocalization()
-    const {onLogoClick, onCartClick, onAccountClick, onWishlistClick} = useAppNavigation()
+    const {
+        onLogoClick,
+        onCartClick,
+        onAccountClick,
+        //@sfdc-extension-line SFDC_EXT_WISHLIST
+        onWishlistClick
+    } = useAppNavigation()
     const {
         isDrawerMenuOpen,
         onDrawerMenuOpen,
@@ -81,6 +87,7 @@ const App = (props) => {
         onLogoClick,
         onMyCartClick: onCartClick,
         onMyAccountClick: onAccountClick,
+        //@sfdc-extension-line SFDC_EXT_WISHLIST
         onWishlistClick,
         // TODO: Will be enabled when store locator feature is ready
         // onStoreLocatorClick: onOpenStoreLocator,

packages/template-chakra-storefront/src/components/_app/index.test.jsx

@@ -41,6 +41,7 @@ jest.mock('./hooks', () => ({
         onLogoClick: jest.fn(),
         onCartClick: jest.fn(),
         onAccountClick: jest.fn(),
+        //@sfdc-extension-line SFDC_EXT_WISHLIST
         onWishlistClick: jest.fn()
     })),
     useAppModals: jest.fn(() => ({

packages/template-chakra-storefront/src/components/_app/partials/app-header.jsx

@@ -23,6 +23,7 @@ const AppHeader = ({
     onLogoClick,
     onMyCartClick,
     onMyAccountClick,
+    //@sfdc-extension-line SFDC_EXT_WISHLIST
     onWishlistClick,
     onStoreLocatorClick,
     mobileNavigationProps
@@ -36,6 +37,7 @@ const AppHeader = ({
                         onLogoClick={onLogoClick}
                         onMyCartClick={onMyCartClick}
                         onMyAccountClick={onMyAccountClick}
+                        //@sfdc-extension-line SFDC_EXT_WISHLIST
                         onWishlistClick={onWishlistClick}
                         onStoreLocatorClick={onStoreLocatorClick}
                     >
@@ -56,6 +58,7 @@ AppHeader.propTypes = {
     onLogoClick: PropTypes.func.isRequired,
     onMyCartClick: PropTypes.func.isRequired,
     onMyAccountClick: PropTypes.func.isRequired,
+    //@sfdc-extension-line SFDC_EXT_WISHLIST
     onWishlistClick: PropTypes.func.isRequired,
     onStoreLocatorClick: PropTypes.func.isRequired,
     mobileNavigationProps: PropTypes.object.isRequired

packages/template-chakra-storefront/src/components/_app/partials/app-header.test.jsx

@@ -24,8 +24,10 @@ jest.mock('../../header', () => {
                 typeof props.onMyCartClick === 'function' ? 'function' : props.onMyCartClick,
             onMyAccountClick:
                 typeof props.onMyAccountClick === 'function' ? 'function' : props.onMyAccountClick,
+            //@sfdc-extension-block-start SFDC_EXT_WISHLIST
             onWishlistClick:
                 typeof props.onWishlistClick === 'function' ? 'function' : props.onWishlistClick,
+            //@sfdc-extension-block-end SFDC_EXT_WISHLIST
             onStoreLocatorClick:
                 typeof props.onStoreLocatorClick === 'function'
                     ? 'function'
@@ -91,6 +93,7 @@ describe('AppHeader', () => {
         onLogoClick: jest.fn(),
         onMyCartClick: jest.fn(),
         onMyAccountClick: jest.fn(),
+        //@sfdc-extension-line SFDC_EXT_WISHLIST
         onWishlistClick: jest.fn(),
         onStoreLocatorClick: jest.fn(),
         mobileNavigationProps: {
@@ -134,6 +137,7 @@ describe('AppHeader', () => {
         expect(headerProps.onLogoClick).toBe('function')
         expect(headerProps.onMyCartClick).toBe('function')
         expect(headerProps.onMyAccountClick).toBe('function')
+        //@sfdc-extension-line SFDC_EXT_WISHLIST
         expect(headerProps.onWishlistClick).toBe('function')
     })
 

packages/template-chakra-storefront/src/components/header/index.jsx

@@ -98,6 +98,7 @@ const SearchBar = (props) => {
  * @param   {object} props.searchInputRef reference of the search input
  * @param   {func} props.onMyAccountClick click event handler for my account button
  * @param   {func} props.onMyCartClick click event handler for my cart button
+ //@sfdc-extension-line SFDC_EXT_WISHLIST
  * @param   {func} props.onWishlistClick click event handler for wish list button
  * @param   {func} props.onStoreLocatorClick click event handler for store locator button
  * @param   {React.ReactElement} props.children - React Node to be rendered inside Header
@@ -109,6 +110,7 @@ const Header = ({
     onMyAccountClick = noop,
     onLogoClick = noop,
     onMyCartClick = noop,
+    //@sfdc-extension-line SFDC_EXT_WISHLIST
     onWishlistClick = noop,
     onStoreLocatorClick = noop,
     ...props
@@ -168,10 +170,12 @@ const Header = ({
                 defaultMessage: 'Log out',
                 id: 'header.popover.action.log_out'
             }),
+            //@sfdc-extension-block-start SFDC_EXT_WISHLIST
             wishlist: formatMessage({
                 defaultMessage: 'Wishlist',
                 id: 'header.button.assistive_msg.wishlist'
             }),
+            //@sfdc-extension-block-end SFDC_EXT_WISHLIST
             storeLocator: formatMessage({
                 defaultMessage: 'Store Locator',
                 id: 'header.button.assistive_msg.store_locator'
@@ -319,6 +323,7 @@ const Header = ({
                             </Popover.Positioner>
                         </Popover.Root>
                     )}
+                    {/* @sfdc-extension-block-start SFDC_EXT_WISHLIST */}
                     <IconButtonWithRegistration
                         aria-label={headerMessages.wishlist}
                         variant="unstyled"
@@ -327,6 +332,7 @@ const Header = ({
                     >
                         <HeartIcon boxSize="6" />
                     </IconButtonWithRegistration>
+                    {/* @sfdc-extension-block-end SFDC_EXT_WISHLIST */}
                     {isStoreLocatorEnabled && (
                         <IconButton
                             aria-label={headerMessages.storeLocator}
@@ -367,6 +373,7 @@ Header.propTypes = {
     onMenuClick: PropTypes.func,
     onLogoClick: PropTypes.func,
     onMyAccountClick: PropTypes.func,
+    //@sfdc-extension-line SFDC_EXT_WISHLIST
     onWishlistClick: PropTypes.func,
     onMyCartClick: PropTypes.func,
     onStoreLocatorClick: PropTypes.func,

packages/template-chakra-storefront/src/components/header/index.test.js

@@ -25,12 +25,18 @@ const MockedComponent = ({history}) => {
     const onAccountClick = () => {
         history.push(createPathWithDefaults('/account'))
     }
+    //@sfdc-extension-block-start SFDC_EXT_WISHLIST
     const onWishlistClick = () => {
         history.push(createPathWithDefaults('/account/wishlist'))
     }
+    //@sfdc-extension-block-end SFDC_EXT_WISHLIST
     return (
         <div>
-            <Header onMyAccountClick={onAccountClick} onWishlistClick={onWishlistClick} />
+            <Header
+                onMyAccountClick={onAccountClick}
+                //@sfdc-extension-line SFDC_EXT_WISHLIST
+                onWishlistClick={onWishlistClick}
+            />
         </div>
     )
 }
@@ -66,7 +72,7 @@ test('renders Header', async () => {
         expect(logo).toBeInTheDocument()
         expect(account).toBeInTheDocument()
         expect(cart).toBeInTheDocument()
-        // Note: Wishlist button is currently commented out in the header component
+        //@sfdc-extension-line SFDC_EXT_WISHLIST
         // expect(wishlist).toBeInTheDocument()
         expect(searchInput).toBeInTheDocument()
     })
@@ -176,6 +182,7 @@ test('route to account page when an authenticated users click on account icon',
     })
 })
 
+//@sfdc-extension-block-start SFDC_EXT_WISHLIST
 test('route to wishlist page when an authenticated users click on wishlist icon', async () => {
     const history = createMemoryHistory()
     // mock push function
@@ -196,3 +203,4 @@ test('route to wishlist page when an authenticated users click on wishlist icon'
         expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account/wishlist'))
     })
 })
+//@sfdc-extension-block-end SFDC_EXT_WISHLIST

packages/template-chakra-storefront/src/components/item-variant/data.mock.js

@@ -428,6 +428,7 @@ export const cartVariant = {
     isProductUnavailable: false
 }
 
+//@sfdc-extension-block-start SFDC_EXT_WISHLIST
 export const wishlistVariant = {
     currency: 'GBP',
     id: '701643563814M',
@@ -762,3 +763,4 @@ export const wishlistVariant = {
     c_width: 'Z',
     quantity: 5
 }
+//@sfdc-extension-block-end SFDC_EXT_WISHLIST

packages/template-chakra-storefront/src/components/item-variant/index.test.js

@@ -10,7 +10,11 @@ import PropTypes from 'prop-types'
 import {renderWithProviders} from '../../utils/test-utils'
 import ItemVariantProvider from './index'
 import ItemPrice from './item-price'
-import {cartVariant, wishlistVariant} from './data.mock'
+import {
+    cartVariant,
+    //@sfdc-extension-line SFDC_EXT_WISHLIST
+    wishlistVariant
+} from './data.mock'
 import {within} from '@testing-library/react'
 import {useMediaQuery} from '@chakra-ui/react'
 
@@ -62,6 +66,7 @@ describe('ItemPrice', function () {
         expect(getByText(/^£0\.00$/i)).toBeInTheDocument()
     })
 
+    //@sfdc-extension-block-start SFDC_EXT_WISHLIST
     test('should display product prices if variant is for wishlist page on desktop', () => {
         useMediaQuery.mockReturnValue([true])
         const {getByText, container, getAllByText} = renderWithProviders(
@@ -95,4 +100,5 @@ describe('ItemPrice', function () {
         const strikethroughPriceTag = container.querySelector('s')
         expect(within(strikethroughPriceTag).getByText(/£476\.80/i)).toBeInTheDocument()
     })
+    //@sfdc-extension-block-end SFDC_EXT_WISHLIST
 })