From 27e39a81cc759235c817fc21f63faa97f8953476 Mon Sep 17 00:00:00 2001
From: Artem Alexeyenko <ala@sitecore.net>
Date: Tue, 22 Oct 2024 03:14:08 -0400
Subject: [PATCH] [angular][xmcloud] Init CloudSDK on browser (#1952)

* [angular][xmcloud] Init CloudSDK on browser

* PR followup

* fix events init

* correct cloudsdk package in nextjs
---
 CHANGELOG.md                                  |  4 +++
 .../templates/angular-xmcloud/package.json    |  2 ++
 .../scripts/cloud-sdk-init.component.ts       | 32 +++++++++++++++++++
 .../routing/scripts/scripts.component.html    |  1 +
 .../src/app/routing/scripts/scripts.module.ts |  3 +-
 5 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f56df35ec8..e65388658f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -64,6 +64,10 @@ Our versioning strategy is as follows:
 * `[sitecore-jss]` GenericFieldValue model is updated to accept Date type ([#1916](https://github.com/Sitecore/jss/pull/1916))
 * `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/healthz endpoint ([#1928](https://github.com/Sitecore/jss/pull/1928))
 * `[sitecore-jss]` `[sitecore-jss-angular]` Render field metdata chromes in editMode metadata - in edit mode metadata in Pages, angular package field directives will render wrapping `code` elements with field metadata required for editing; ([#1926](https://github.com/Sitecore/jss/pull/1926))
+* `[sitecore-jss-nextjs]` Expose MiddlewareBase class and MiddlewareBaseConfig type ([#1941](https://github.com/Sitecore/jss/pull/1941))
+* `[angular-xmcloud]``[sitecore-jss-angular]` Analytics and CloudSDK integration
+* `[angular-xmcloud]` Add CloudSDK initialization on client side ([#1952](https://github.com/Sitecore/jss/pull/1952))
+
 
 ### 🛠 Breaking Change
 
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json
index 2f01f8b4fd..c7ffff1bba 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json
@@ -8,6 +8,8 @@
     "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts"
   },
   "dependencies": {
+    "@sitecore-cloudsdk/core": "^0.4.0-rc.0",
+    "@sitecore-cloudsdk/events": "^0.4.0-rc.0",
     "font-awesome": "^4.7.0",
     "sass": "^1.52.3",
     "sass-alias": "^1.0.5"
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts
new file mode 100644
index 0000000000..8a99ae3c06
--- /dev/null
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/cloud-sdk-init.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
+import '@sitecore-cloudsdk/events/browser';
+import { environment } from '../../../environments/environment';
+import { isServer } from '@sitecore-jss/sitecore-jss-angular';
+
+/**
+ * Component to init CloudSDK logic - to allow events throughout the site
+ */
+@Component({
+  selector: 'app-cloud-sdk-init',
+  template: '',
+})
+export class CloudSdkInitComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {
+    if (!isServer) {
+      CloudSDK({
+        siteName: environment.sitecoreSiteName,
+        sitecoreEdgeUrl: environment.sitecoreEdgeUrl,
+        sitecoreEdgeContextId: environment.sitecoreEdgeContextId,
+        // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com"
+        cookieDomain: window.location.hostname.replace(/^www\./, ''),
+        // Cookie may be created in personalize middleware (server), but if not we should create it here
+        enableBrowserCookie: true,
+      })
+      .addEvents()
+      .initialize();
+    }
+  }
+}
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html
index b1dce244b8..c39b8b6e85 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html
@@ -1,3 +1,4 @@
 <ng-container>
   <sc-editing-scripts></sc-editing-scripts>
+  <app-cloud-sdk-init></app-cloud-sdk-init>
 </ng-container>
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts
index 0680d729fb..1b25306864 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts
@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { ScriptsComponent } from './scripts.component';
 import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { CloudSdkInitComponent } from './cloud-sdk-init.component';
 
 @NgModule({
   exports: [ScriptsComponent],
   imports: [JssModule],
-  declarations: [ScriptsComponent],
+  declarations: [ScriptsComponent, CloudSdkInitComponent],
 })
 export class ScriptsModule {}