@W-17405592 - DataCloud Events in PWA

package.json

@@ -38,4 +38,4 @@
   "dependencies": {
     "node-fetch": "^2.6.9"
   }
-}
+}

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

@@ -1,6 +1,7 @@
 ## v3.9.0-dev (Oct 29, 2024)
 - Support Node 22 [#2218](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2218)
 - Update `default.js` template to include new login configurations [#2079] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2079)
+- Add Data Cloud API configuration to `default.js`. [#2229] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2229)
 
 ## v3.8.0 (Oct 28, 2024)
 

packages/pwa-kit-create-app/assets/bootstrap/js/config/default.js.hbs

@@ -44,6 +44,11 @@ module.exports = {
             // By setting this to true, the Einstein activities generated by the environment will appear
             // in production environment reports
             isProduction: false
+        },
+        // Datacloud api config
+        dataCloudAPI: {
+            appSourceId: '{{answers.project.dataCloud.appSourceId}}',
+            tenantId: '{{answers.project.dataCloud.tenantId}}'
         }
     },
     // This list contains server-side only libraries that you don't want to be compiled by webpack

packages/pwa-kit-create-app/assets/bootstrap/js/overrides/app/ssr.js.hbs

@@ -68,7 +68,8 @@ const {handler} = runtime.createHandler(options, (app) => {
                     ],
                     'connect-src': [
                         // Connect to Einstein APIs
-                        'api.cquotient.com'
+                        'api.cquotient.com',
+                        '*.c360a.salesforce.com'
                     ]
                 }
             }

packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/app/ssr.js.hbs

@@ -68,7 +68,8 @@ const {handler} = runtime.createHandler(options, (app) => {
                     ],
                     'connect-src': [
                         // Connect to Einstein APIs
-                        'api.cquotient.com'
+                        'api.cquotient.com',
+                        '*.c360a.salesforce.com'
                     ]
                 }
             }

packages/pwa-kit-create-app/assets/templates/@salesforce/retail-react-app/config/default.js.hbs

@@ -73,6 +73,11 @@ module.exports = {
             // By setting this to true, the Einstein activities generated by the environment will appear
             // in production environment reports
             isProduction: false
+        },
+        // Datacloud api config
+        dataCloudAPI: {
+            appSourceId: '{{answers.project.dataCloud.appSourceId}}',
+            tenantId: '{{answers.project.dataCloud.tenantId}}'
         }
     },
     // This list contains server-side only libraries that you don't want to be compiled by webpack

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

@@ -219,7 +219,7 @@ const RETAIL_REACT_APP_QUESTIONS = [
     }
 ]
 
-// Project dictionary describing details and how the gerator should ask questions etc.
+// Project dictionary describing details and how the generator should ask questions etc.
 const PRESETS = [
     {
         id: 'retail-react-app',
@@ -265,7 +265,9 @@ const PRESETS = [
             ['project.commerce.shortCode']: 'kv7kzm78',
             ['project.commerce.isSlasPrivate']: false,
             ['project.einstein.clientId']: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
-            ['project.einstein.siteId']: 'aaij-MobileFirst'
+            ['project.einstein.siteId']: 'aaij-MobileFirst',
+            ['project.dataCloud.appSourceId']: '10a761d0-5d19-41fa-8681-0591d5884e27',
+            ['project.dataCloud.tenantId']: 'g43g8zrvh1ytcztdmmzg8m3dh1'
         },
         assets: ['translations'],
         private: false
@@ -290,7 +292,9 @@ const PRESETS = [
             ['project.commerce.shortCode']: 'kv7kzm78',
             ['project.commerce.isSlasPrivate']: false,
             ['project.einstein.clientId']: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
-            ['project.einstein.siteId']: 'aaij-MobileFirst'
+            ['project.einstein.siteId']: 'aaij-MobileFirst',
+            ['project.dataCloud.appSourceId']: '10a761d0-5d19-41fa-8681-0591d5884e27',
+            ['project.dataCloud.tenantId']: 'g43g8zrvh1ytcztdmmzg8m3dh1'
         },
         assets: ['translations'],
         private: true
@@ -315,7 +319,9 @@ const PRESETS = [
             ['project.commerce.shortCode']: 'kv7kzm78',
             ['project.commerce.isSlasPrivate']: true,
             ['project.einstein.clientId']: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
-            ['project.einstein.siteId']: 'aaij-MobileFirst'
+            ['project.einstein.siteId']: 'aaij-MobileFirst',
+            ['project.dataCloud.appSourceId']: '10a761d0-5d19-41fa-8681-0591d5884e27',
+            ['project.dataCloud.tenantId']: 'g43g8zrvh1ytcztdmmzg8m3dh1'
         },
         assets: ['translations'],
         private: true
@@ -340,7 +346,9 @@ const PRESETS = [
             ['project.commerce.shortCode']: 'xitgmcd3',
             ['project.einstein.clientId']: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
             ['project.einstein.siteId']: 'aaij-MobileFirst',
-            ['project.commerce.isSlasPrivate']: true
+            ['project.commerce.isSlasPrivate']: true,
+            ['project.dataCloud.appSourceId']: '10a761d0-5d19-41fa-8681-0591d5884e27',
+            ['project.dataCloud.tenantId']: 'g43g8zrvh1ytcztdmmzg8m3dh1'
         },
         assets: ['translations'],
         private: true
@@ -365,7 +373,9 @@ const PRESETS = [
             ['project.commerce.shortCode']: 'performance-001',
             ['project.einstein.clientId']: '1ea06c6e-c936-4324-bcf0-fada93f83bb1',
             ['project.einstein.siteId']: 'aaij-MobileFirst',
-            ['project.commerce.isSlasPrivate']: false
+            ['project.commerce.isSlasPrivate']: false,
+            ['project.dataCloud.appSourceId']: '10a761d0-5d19-41fa-8681-0591d5884e27',
+            ['project.dataCloud.tenantId']: 'g43g8zrvh1ytcztdmmzg8m3dh1'
         },
         assets: ['translations'],
         private: true

packages/template-retail-react-app/CHANGELOG.md

@@ -1,3 +1,6 @@
+## v6.1.0-dev
+- Send PWA Kit events to Data Cloud [#2229] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2229)
+
 ## v6.0.0
 - DNT Consent Banner: [#2203](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2203)
 - Implemented opt-in Social & Passwordless Login features and fixed the Reset Password flow which now leverages SLAS APIs [#2079] (https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2079)

packages/template-retail-react-app/app/components/recommended-products/index.jsx

@@ -11,6 +11,7 @@ import {useIntl} from 'react-intl'
 import {Button} from '@salesforce/retail-react-app/app/components/shared/ui'
 import ProductScroller from '@salesforce/retail-react-app/app/components/product-scroller'
 import useEinstein from '@salesforce/retail-react-app/app/hooks/use-einstein'
+import useDatacloud from '@salesforce/retail-react-app/app/hooks/use-datacloud'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
 import useIntersectionObserver from '@salesforce/retail-react-app/app/hooks/use-intersection-observer'
 import {useWishList} from '@salesforce/retail-react-app/app/hooks/use-wish-list'
@@ -41,6 +42,7 @@ const RecommendedProducts = ({zone, recommender, products, title, shouldFetch, .
     const {data: customer} = useCurrentCustomer()
     const {customerId} = customer
     const {data: wishlist} = useWishList()
+    const datacloud = useDatacloud()
 
     const createCustomerProductListItem = useShopperCustomersMutation(
         'createCustomerProductListItem'
@@ -98,6 +100,13 @@ const RecommendedProducts = ({zone, recommender, products, title, shouldFetch, .
                 },
                 recommendations.recs.map((rec) => ({id: rec.id}))
             )
+            datacloud.sendViewRecommendations(
+                {
+                    recommenderName: recommendations.recommenderName,
+                    __recoUUID: recommendations.recoUUID
+                },
+                recommendations.recs.map((rec) => ({id: rec.id}))
+            )
         }
     }, [isOnScreen, recommendations])