From fe8cb90a1ca635e6cd75b3006f7c3721e71e5400 Mon Sep 17 00:00:00 2001
From: Vinh <vinh@vinh.tech>
Date: Fri, 22 May 2020 00:27:27 +0200
Subject: [PATCH] [CORL-1086] Support `bodyClassName` in embed (#2969)

* feat: support embed config `bodyClassName`

* chore: add comment
---
 src/core/client/embed/Coral.ts                      |  3 +++
 src/core/client/embed/StreamEmbed.ts                |  2 ++
 src/core/client/embed/decorators/withConfig.spec.ts |  2 +-
 src/core/client/framework/lib/externalConfig.ts     |  1 +
 src/core/client/stream/local/initLocalState.ts      | 10 ++++++++--
 5 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/core/client/embed/Coral.ts b/src/core/client/embed/Coral.ts
index 934ece801..c713bac47 100644
--- a/src/core/client/embed/Coral.ts
+++ b/src/core/client/embed/Coral.ts
@@ -16,6 +16,8 @@ export interface Config {
   events?: (eventEmitter: EventEmitter2) => void;
   accessToken?: string;
   enableDeprecatedEvents?: boolean;
+  /** Allow setting className of body tag inside iframe */
+  bodyClassName?: string;
 }
 
 export function createStreamEmbed(config: Config): StreamEmbed {
@@ -37,6 +39,7 @@ export function createStreamEmbed(config: Config): StreamEmbed {
     autoRender: config.autoRender,
     eventEmitter,
     accessToken: config.accessToken,
+    bodyClassName: config.bodyClassName,
     enableDeprecatedEvents: config.enableDeprecatedEvents,
   });
 }
diff --git a/src/core/client/embed/StreamEmbed.ts b/src/core/client/embed/StreamEmbed.ts
index 0b665fc37..3229eb4ae 100644
--- a/src/core/client/embed/StreamEmbed.ts
+++ b/src/core/client/embed/StreamEmbed.ts
@@ -33,6 +33,7 @@ export interface StreamEmbedConfig {
   id: string;
   rootURL: string;
   accessToken?: string;
+  bodyClassName?: string;
   enableDeprecatedEvents?: boolean;
 }
 
@@ -131,6 +132,7 @@ export class StreamEmbed {
 
     const externalConfig: ExternalConfig = {
       accessToken: this.config.accessToken,
+      bodyClassName: this.config.bodyClassName,
     };
 
     const streamDecorators: ReadonlyArray<Decorator> = [
diff --git a/src/core/client/embed/decorators/withConfig.spec.ts b/src/core/client/embed/decorators/withConfig.spec.ts
index b43dcf2f0..6b27c39ac 100644
--- a/src/core/client/embed/decorators/withConfig.spec.ts
+++ b/src/core/client/embed/decorators/withConfig.spec.ts
@@ -3,7 +3,7 @@ import sinon from "sinon";
 import withConfig from "./withConfig";
 
 it("should emit events from pym to Config", () => {
-  const config = { accessToken: "token" };
+  const config = { accessToken: "token", bodyClassName: "custom" };
   const fakePym = {
     onMessage: (type: string, callback: () => void) => {
       expect(type).toBe("getConfig");
diff --git a/src/core/client/framework/lib/externalConfig.ts b/src/core/client/framework/lib/externalConfig.ts
index 97e339b80..53a62bbe5 100644
--- a/src/core/client/framework/lib/externalConfig.ts
+++ b/src/core/client/framework/lib/externalConfig.ts
@@ -4,6 +4,7 @@ import { areWeInIframe } from "coral-framework/utils";
 
 export interface ExternalConfig {
   accessToken?: string;
+  bodyClassName?: string;
 }
 
 export function getExternalConfig(
diff --git a/src/core/client/stream/local/initLocalState.ts b/src/core/client/stream/local/initLocalState.ts
index 5100b3ef1..dae8465d0 100644
--- a/src/core/client/stream/local/initLocalState.ts
+++ b/src/core/client/stream/local/initLocalState.ts
@@ -18,8 +18,14 @@ export default async function initLocalState(
   auth?: AuthState
 ) {
   const config = await getExternalConfig(context.pym);
-  if (config && config.accessToken) {
-    auth = storeAccessToken(config.accessToken);
+  if (config) {
+    if (config.accessToken) {
+      auth = storeAccessToken(config.accessToken);
+    }
+    // append body class name if set in config.
+    if (config.bodyClassName) {
+      document.body.classList.add(config.bodyClassName);
+    }
   }
 
   initLocalBaseState(environment, context, auth);