Merge branch 'feature/manual-bonus-products-v4' into t/cc-sharks/W-19168138/add-new-modal/main

merge conflict in packages/template-chakra-storefront/src/hooks/index.js where the recently added line "export {useManualBonusProducts} from './use-manual-bonus-products'" was not being used as the file doesn't exist. I removed it

Author: sf-shikhar-prasoon

.github/workflows/test.yml

@@ -393,4 +393,4 @@ jobs:
         uses: "./.github/actions/bundle_size_test"
         with:
           cwd: ${{ env.PROJECT_DIR }}
-          config: '{"build/main.js": "10kB", "build/vendor.js": "390kB"}'
+          config: '{"build/main.js": "59kB", "build/vendor.js": "390kB"}'

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)
+- Convert Social Login feature into an extension [#3017](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3017)
 
 ## v3.10.0 (Feb 18, 2025)
 - Add Data Cloud API configuration to `default.js`. [#2318] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2229)

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

@@ -17,5 +17,8 @@ module.exports = {
         // SFDC_EXT_HELLO_WORLD_ENABLED: {
         //     description: 'The Hello World Extension'
         // },
+        SFDC_EXT_SOCIAL_LOGIN: {
+            description: 'Social login Extension'
+        }
     }
 }

packages/pwa-kit-create-app/assets/templates/chakra-storefront/config/default.js.hbs

@@ -91,14 +91,16 @@ module.exports = {
     login: {
         passwordless: {
             enabled: {{#if answers.project.demo.enableDemoSettings}}true{{else}}false{{/if}},
-            callbackURI: process.env.PASSWORDLESS_LOGIN_CALLBACK_URI || '/passwordless-login-callback',
+            callbackURI:
+                process.env.PASSWORDLESS_LOGIN_CALLBACK_URI || '/passwordless-login-callback',
             landingPath: '/passwordless-login-landing'
         },
+        {{#if selectedPlugins.SFDC_EXT_SOCIAL_LOGIN}}
         social: {
-            enabled: {{#if answers.project.demo.enableDemoSettings}}true{{else}}false{{/if}},
             idps: ['google', 'apple'],
             redirectURI: process.env.SOCIAL_LOGIN_REDIRECT_URI || '/social-callback'
         },
+        {{/if}}
         resetPassword: {
             callbackURI: process.env.RESET_PASSWORD_CALLBACK_URI || '/reset-password-callback',
             landingPath: '/reset-password-landing'
@@ -188,13 +190,7 @@ module.exports = {
     ],
     ssrEnabled: true,
     ssrOnly: ['ssr.js', 'ssr.js.map', 'node_modules/**/*.*'],
-    ssrShared: [
-        'static/favicon.ico',
-        'static/robots.txt',
-        '**/*.js',
-        '**/*.js.map',
-        '**/*.json'
-    ],
+    ssrShared: ['static/favicon.ico', 'static/robots.txt', '**/*.js', '**/*.js.map', '**/*.json'],
     ssrParameters: {
         ssrFunctionNodeVersion: '22.x',
         proxyConfigs: [

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

@@ -278,7 +278,8 @@ const PRESETS = [
             'project.einstein.siteId': 'aaij-MobileFirst',
             'project.dataCloud.appSourceId': '7ae070a6-f4ec-4def-a383-d9cacc3f20a1',
             'project.dataCloud.tenantId': 'g82wgnrvm-ywk9dggrrw8mtggy.pc-rnd',
-            'project.demo.enableDemoSettings': false
+            'project.demo.enableDemoSettings': false,
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false
         },
         assets: ['translations'],
         private: false
@@ -313,7 +314,8 @@ const PRESETS = [
             ['project.einstein.siteId']: 'aaij-MobileFirst',
             ['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.demo.enableDemoSettings']: true, // True only for presets deployed to demo environments like pwa-kit.mobify-storefront.com
+            ['project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN']: false
         },
         assets: ['translations'],
         private: true
@@ -324,7 +326,7 @@ const PRESETS = [
         description: '',
         templateSource: {
             type: TEMPLATE_SOURCE_BUNDLE,
-            id: 'typescript-minimal'
+            id: 'chakra-storefront'
         },
         answers: {
             'project.hybrid': false,
@@ -339,7 +341,8 @@ const PRESETS = [
             'project.einstein.siteId': 'aaij-MobileFirst',
             'project.dataCloud.appSourceId': 'fb81edab-24c6-4b40-8684-b67334dfdf32',
             'project.dataCloud.tenantId': 'mmyw8zrxhfsg09lfmzrd1zjqmg',
-            'project.demo.enableDemoSettings': false
+            'project.demo.enableDemoSettings': false,
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': true
         },
         assets: ['translations'],
         private: true
@@ -365,7 +368,8 @@ const PRESETS = [
             'project.einstein.siteId': 'aaij-MobileFirst',
             'project.dataCloud.appSourceId': 'fb81edab-24c6-4b40-8684-b67334dfdf32',
             'project.dataCloud.tenantId': 'mmyw8zrxhfsg09lfmzrd1zjqmg',
-            'project.demo.enableDemoSettings': false
+            'project.demo.enableDemoSettings': false,
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false
         },
         assets: ['translations'],
         private: true
@@ -391,7 +395,8 @@ const PRESETS = [
             'project.dataCloud.appSourceId': 'fb81edab-24c6-4b40-8684-b67334dfdf32',
             'project.dataCloud.tenantId': 'mmyw8zrxhfsg09lfmzrd1zjqmg',
             'project.commerce.isSlasPrivate': true,
-            'project.demo.enableDemoSettings': false
+            'project.demo.enableDemoSettings': false,
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false
         },
         assets: ['translations'],
         private: true
@@ -417,7 +422,8 @@ const PRESETS = [
             'project.commerce.isSlasPrivate': true,
             'project.dataCloud.appSourceId': 'fb81edab-24c6-4b40-8684-b67334dfdf32',
             'project.dataCloud.tenantId': 'mmyw8zrxhfsg09lfmzrd1zjqmg',
-            'project.demo.enableDemoSettings': false
+            'project.demo.enableDemoSettings': false,
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false
         },
         assets: ['translations'],
         private: true
@@ -443,7 +449,8 @@ const PRESETS = [
             'project.commerce.isSlasPrivate': false,
             'project.dataCloud.appSourceId': 'fb81edab-24c6-4b40-8684-b67334dfdf32',
             'project.dataCloud.tenantId': 'mmyw8zrxhfsg09lfmzrd1zjqmg',
-            'project.demo.enableDemoSettings': false
+            'project.demo.enableDemoSettings': false,
+            'project.selectedPlugins.SFDC_EXT_SOCIAL_LOGIN': false
         },
         assets: ['translations'],
         private: true
@@ -660,7 +667,7 @@ const expandKey = (key, value) =>
  * const expandedObj = expand({'coolthings.babynames': 'Preseley', 'coolthings.cars': 'bmws'})
  * console.log(expandedObj) // {coolthings: { babynames: 'Presley', cars: 'bmws'}}
  *
- * @param {Object} answers
+ * @param {Object} answer
  * @returns {Object} The expanded object.
  *
  */
@@ -884,6 +891,27 @@ const main = async (opts) => {
     if (interactive) {
         const questions = getQuestions ? getQuestions() : []
         const projectAnswers = await prompt(questions, answers)
+        // Only prompt for plugin selection on interactive presets
+        if (Object.keys(pluginConfig?.plugins || {}).length > 0) {
+            const pluginChoices = Object.entries(pluginConfig.plugins).map(([key, config]) => ({
+                name: config.description,
+                value: key
+            }))
+
+            const pluginAnswers = await inquirer.prompt([
+                {
+                    type: 'checkbox',
+                    name: 'selectedPlugins',
+                    message: 'Which extensions would you like to enable?',
+                    choices: pluginChoices
+                }
+            ])
+
+            // Convert selected plugins array to object with true values
+            pluginAnswers.selectedPlugins.forEach((plugin) => {
+                selectedPlugins[plugin] = true
+            })
+        }
         context = merge(context, {
             answers: expandObject(projectAnswers)
         })
@@ -892,28 +920,14 @@ const main = async (opts) => {
             answers: expandObject(answers)
         })
     }
-
-    // Prompt user for plugin selection
-    if (Object.keys(pluginConfig?.plugins || {}).length > 0) {
-        const pluginChoices = Object.entries(pluginConfig.plugins).map(([key, config]) => ({
-            name: config.description,
-            value: key
-        }))
-
-        const pluginAnswers = await inquirer.prompt([
-            {
-                type: 'checkbox',
-                name: 'selectedPlugins',
-                message: 'Which extensions would you like to enable?',
-                choices: pluginChoices
+    // load plugin selected answer from context object to selectedPlugins (which used for code trimming process)
+    Object.entries(context.answers?.project?.selectedPlugins || {}).forEach(
+        ([pluginKey, enabled]) => {
+            if (pluginConfig?.plugins?.[pluginKey]) {
+                selectedPlugins[pluginKey] = enabled
             }
-        ])
-
-        // Convert selected plugins array to object with true values
-        pluginAnswers.selectedPlugins.forEach((plugin) => {
-            selectedPlugins[plugin] = true
-        })
-    }
+        }
+    )
 
     if (!OUTPUT_DIR_FLAG_ACTIVE) {
         // For extension projects, use the extension name as the output directory

packages/template-chakra-storefront/CHANGELOG.md

@@ -1,12 +1,15 @@
 ## 0.1.1
 - Show button "Select Bonus Products" when a product is added, that qualifies the cart for a manual selection bonus product. Also show the corresponding promotional message with the button [#2917](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2917)
+- Implemented the "Bonus Product View Modal" [#3043](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3043)
 
 ## 0.1.0-extensibility-preview.5
 - Fix failing tests in pages folder [#2872](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2872)
 - Fix component tests in storefront template [#2878](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2878)
 - 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 Social Login feature into an extension [#3017](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/3017)
+
 
 ## 0.1.0-extensibility-preview.4
 - Fix hreflang alternate links [#2269](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2269)

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

@@ -95,11 +95,12 @@ module.exports = {
                 process.env.PASSWORDLESS_LOGIN_CALLBACK_URI || '/passwordless-login-callback',
             landingPath: '/passwordless-login-landing'
         },
+        //@sfdc-extension-block-start SFDC_EXT_SOCIAL_LOGIN
         social: {
-            enabled: false,
             idps: ['google', 'apple'],
             redirectURI: process.env.SOCIAL_LOGIN_REDIRECT_URI || '/social-callback'
         },
+        //@sfdc-extension-block-end SFDC_EXT_SOCIAL_LOGIN
         resetPassword: {
             callbackURI: process.env.RESET_PASSWORD_CALLBACK_URI || '/reset-password-callback',
             landingPath: '/reset-password-landing'

packages/template-chakra-storefront/src/components/bonus-product-view-modal/index.jsx

@@ -0,0 +1,144 @@
+/*
+ * 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, {useMemo, useCallback} from 'react'
+import PropTypes from 'prop-types'
+import {Dialog, CloseButton, Button} from '@chakra-ui/react'
+import Link from '../link'
+import ProductView from '../../components/product-view'
+import {useProductViewModal} from '../../hooks/use-product-view-modal'
+import SafePortal from '../safe-portal'
+import {useIntl} from 'react-intl'
+import {productViewModalTheme} from '../../theme/components/project/product-view-modal'
+import {useShopperBasketsMutationHelper} from '@salesforce/commerce-sdk-react'
+
+/**
+ * A Dialog that contains Bonus Product View using product-view-modal theme
+ */
+const BonusProductViewModal = ({
+    product,
+    isOpen,
+    onClose,
+    bonusDiscountLineItemId,
+    promotionId,
+    ...props
+}) => {
+    const productViewModalData = useProductViewModal(product)
+    const {addItemToNewOrExistingBasket} = useShopperBasketsMutationHelper()
+
+    const intl = useIntl()
+    const {formatMessage} = intl
+
+    const messages = useMemo(
+        () => ({
+            modalLabel: formatMessage(
+                {
+                    id: 'bonus_product_view_modal.modal_label',
+                    defaultMessage: 'Bonus product selection modal for {productName}'
+                },
+                {productName: productViewModalData?.product?.name}
+            ),
+            viewCart: formatMessage({
+                id: 'bonus_product_view_modal.button.view_cart',
+                defaultMessage: 'View Cart'
+            })
+        }),
+        [intl]
+    )
+
+    // Custom addToCart handler for bonus products that includes bonusDiscountLineItemId
+    const handleAddToCart = useCallback(
+        async (variant, quantity) => {
+            const productItems = [
+                {
+                    productId: variant?.productId || product?.id,
+                    price: variant?.price || product?.price,
+                    quantity: quantity,
+                    bonusDiscountLineItemId: bonusDiscountLineItemId
+                }
+            ]
+
+            const result = await addItemToNewOrExistingBasket(productItems)
+            return result
+        },
+        [addItemToNewOrExistingBasket, product, bonusDiscountLineItemId]
+    )
+
+    // Custom buttons for the ProductView
+    const customButtons = useMemo(
+        () => [
+            <Button key="view-cart" asChild variant="outline" onClick={onClose}>
+                <Link to="/cart">{messages.viewCart}</Link>
+            </Button>
+        ],
+        [messages.viewCart, onClose]
+    )
+
+    return (
+        <Dialog.Root
+            lazyMount
+            open={isOpen}
+            onOpenChange={() => onClose()}
+            size={productViewModalTheme.modal.size}
+            scrollBehavior={productViewModalTheme.modal.scrollBehavior}
+            placement={productViewModalTheme.modal.placement}
+            closeOnInteractOutside={productViewModalTheme.modal.closeOnInteractOutside}
+        >
+            <SafePortal>
+                <Dialog.Backdrop />
+                <Dialog.Positioner>
+                    <Dialog.Content
+                        data-testid="bonus-product-view-modal"
+                        aria-label={messages.modalLabel}
+                        margin={productViewModalTheme.layout.content.margin}
+                        borderRadius={productViewModalTheme.layout.content.borderRadius}
+                        bgColor={productViewModalTheme.colors.background}
+                        maxHeight={productViewModalTheme.layout.content.maxHeight}
+                        overflowY={productViewModalTheme.layout.content.overflowY}
+                    >
+                        <Dialog.Body
+                            bg={productViewModalTheme.layout.body.background}
+                            padding={productViewModalTheme.layout.body.padding}
+                            paddingBottom={productViewModalTheme.layout.body.paddingBottom}
+                            marginTop={productViewModalTheme.layout.body.marginTop}
+                        >
+                            <ProductView
+                                showFullLink={false}
+                                imageSize={productViewModalTheme.productView.imageSize}
+                                showImageGallery={
+                                    productViewModalTheme.productView.showImageGallery
+                                }
+                                product={productViewModalData.product}
+                                isLoading={productViewModalData.isFetching}
+                                addToCart={handleAddToCart}
+                                isProductLoading={productViewModalData.isFetching}
+                                customButtons={customButtons}
+                                promotionId={promotionId}
+                                {...props}
+                            />
+                        </Dialog.Body>
+                        <Dialog.CloseTrigger asChild>
+                            <CloseButton size="sm" />
+                        </Dialog.CloseTrigger>
+                    </Dialog.Content>
+                </Dialog.Positioner>
+            </SafePortal>
+        </Dialog.Root>
+    )
+}
+
+BonusProductViewModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onOpen: PropTypes.func,
+    onClose: PropTypes.func.isRequired,
+    product: PropTypes.object,
+    isLoading: PropTypes.bool,
+    bonusDiscountLineItemId: PropTypes.string, // The 'id' from bonusDiscountLineItems
+    promotionId: PropTypes.string // The promotion ID to filter promotions in PromoCallout
+}
+
+export default BonusProductViewModal