chore: add cookieconsent-script & full-story / UG integration (#2904)

* chore: add cookieconsent-script & full-story integration

* chore: fix script tags

* chore: fix script type to enable proper autoblocking

* chore: add UserGuiding integration

* chore: add UserGuiding env variable to code

* chore: add comment to each integration

* chore: fix type & add comment for type=text/plain exception

storybook/.storybook/main.ts

@@ -3,6 +3,14 @@ import react from '@vitejs/plugin-react-swc';
 import ViteYaml from '@modyfi/vite-plugin-yaml';
 import remarkGfm from 'remark-gfm';
 import { join, dirname, resolve } from 'path';
+import { readFileSync } from 'fs';
+import { prepareManagerHeadFile } from './../scripts/prepare-manager-head-file';
+
+const isProduction = process.env.NODE_ENV === 'production';
+const prodHead = readFileSync(
+  join(__dirname, './manager-head.prod.html'),
+  'utf8'
+);
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -18,6 +26,11 @@ const config: StorybookConfig = {
     '../../packages/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
     '../../packages/components/**/*.mdx',
   ],
+  // head = the manager-header.html file contents
+  managerHead: (head) => `
+    ${head}
+    ${isProduction ? prepareManagerHeadFile(prodHead) : ''}
+  `,
   addons: [
     //getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
     getAbsolutePath('@storybook/addon-links'),

storybook/.storybook/manager-head.prod.html

@@ -0,0 +1,32 @@
+<!-- Cookie Consent -->
+<script type="text/javascript" src="https://cdn.cookielaw.org/consent/{{COOKIELAW_ORG}}/OtAutoBlock.js"></script>
+<script type="text/javascript" src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" data-domain-script="{{COOKIELAW_ORG}}"></script>
+<!-- FullStory -->
+<!--
+type="text/plain" is used to prevent the script from being executed by the browser.
+@see https://my.onetrust.com/s/article/UUID-518074a1-a6da-81c3-be52-bae7685d9c94?language=en_US#idm45260969021504
+-->
+<script type="text/plain" class="optanon-category-C0002">
+window['_fs_host'] = '{{FS_HOST}}';
+window['_fs_script'] = '{{FS_SCRIPT}}';
+window['_fs_org'] = '{{FS_ORG}}';
+window['_fs_namespace'] = 'FS';
+!function(m,n,e,t,l,o,g,y){var s,f,a=function(h){
+return!(h in m)||(m.console&&m.console.log&&m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'),!1)}(e)
+;function p(b){var h,d=[];function j(){h&&(d.forEach((function(b){var d;try{d=b[h[0]]&&bh[0]}catch(h){return void(b[3]&&b3)}
+d&&d.then?d.then(b[2],b[3]):b[2]&&b2})),d.length=0)}function r(b){return function(d){h||(h=[b,d],j())}}return b(r(0),r(1)),{
+then:function(b,h){return p((function(r,i){d.push([b,h,r,i]),j()}))}}}a&&(g=m[e]=function(){var b=function(b,d,j,r){function i(i,c){
+h(b,d,j,i,c,r)}r=r||2;var c,u=/Async$/;return u.test(b)?(b=b.replace(u,""),"function"==typeof Promise?new Promise(i):p(i)):h(b,d,j,c,c,r)}
+;function h(h,d,j,r,i,c){return b._api?b._api(h,d,j,r,i,c):(b.q&&b.q.push([h,d,j,r,i,c]),null)}return b.q=[],b}(),y=function(b){function h(h){
+"function"==typeof h[4]&&h[4](new Error(b))}var d=g.q;if(d){for(var j=0;j<d.length;j++)h(d[j]);d.length=0,d.push=h}},function(){
+(o=n.createElement(t)).async=!0,o.crossOrigin="anonymous",o.src="https://"+l,o.onerror=function(){y("Error loading "+l)}
+;var b=n.getElementsByTagName(t)[0];b&&b.parentNode?b.parentNode.insertBefore(o,b):n.head.appendChild(o)}(),function(){function b(){}
+function h(b,h,d){g(b,h,d,1)}function d(b,d,j){h("setProperties",{type:b,properties:d},j)}function j(b,h){d("user",b,h)}function r(b,h,d){j({
+uid:b},d),h&&j(h,d)}g.identify=r,g.setUserVars=j,g.identifyAccount=b,g.clearUserCookie=b,g.setVars=d,g.event=function(b,d,j){h("trackEvent",{
+name:b,properties:d},j)},g.anonymize=function(){r(!1)},g.shutdown=function(){h("shutdown")},g.restart=function(){h("restart")},
+g.log=function(b,d){h("log",{level:b,msg:d})},g.consent=function(b){h("setIdentity",{consent:!arguments.length||b})}}(),s="fetch",
+f="XMLHttpRequest",g._w={},g._w[f]=m[f],g._w[s]=m[s],m[s]&&(m[s]=function(){return g._w[s].apply(this,arguments)}),g._v="2.0.0")
+}(window,document,window._fs_namespace,"script",window._fs_script);
+</script>
+<!-- UserGuiding -->
+<script type="text/plain" class="optanon-category-C0002">(function(g,u,i,d,e,s){g[e]=g[e]||[];var f=u.getElementsByTagName(i)[0];var k=u.createElement(i);k.async=true;k.src='https://eu-static.userguiding.com/media/user-guiding-'+s+'-embedded.js';f.parentNode.insertBefore(k,f);if(g[d])return;var ug=g[d]={q:[]};ug.c=function(n){return function(){ug.q.push([n,arguments])};};var m=['previewGuide','finishPreview','track','identify','hideChecklist','launchChecklist'];for(var j=0;j<m.length;j+=1){ug[m[j]]=ug.c(m[j]);}})(window,document,'script','userGuiding','userGuidingLayer','{{USERGUIDING_ORG}}');</script>

storybook/scripts/prepare-manager-head-file.ts

@@ -0,0 +1,20 @@
+const envVars: Record<string, string | undefined> = {
+  /** ENV's needed for CookieConsent script integration */
+  COOKIELAW_ORG: process.env.COOKIELAW_ORG,
+  /** ENV's needed for FullStory integration */
+  FS_HOST: process.env.FS_HOST,
+  FS_SCRIPT: process.env.FS_SCRIPT,
+  FS_ORG: process.env.FS_ORG,
+  /** ENV's needed for UserGuiding integration */
+  USERGUIDING_ORG: process.env.USERGUIDING_ORG,
+};
+
+// this function replaces {{VARIABLE_NAME}} variables in the given string
+export const prepareManagerHeadFile = (html: string) => {
+  return html.replace(/{{(.*?)}}/g, (_, varName): string => {
+    // Trim any extra spaces in the variable name
+    varName = varName.trim();
+    // If the variable exists in the object, replace it. Otherwise, return an empty string
+    return envVars[varName] || '';
+  });
+};