Add template, Consent Mode V2

README.md

@@ -22,6 +22,7 @@ Follow the instructions in: [https://github.com/aesirxio/analytics-1stparty](htt
 <script>
   window.aesirx1stparty = "https://example.com"
   window.aesirxClientID="[REPLACE THIS WITH THE PROVIDED CLIENT_ID]"
+  window.aesirxClientSecret="[REPLACE THIS WITH THE PROVIDED CLIENT_SECRET]"
 </script>
 <script async defer src="YOUR_PROJECT_PATH/analytics.js"></script>
 ```
@@ -46,9 +47,11 @@ Follow the instructions in: [https://github.com/aesirxio/analytics-1stparty](htt
 ```
 REACT_APP_ENDPOINT_ANALYTICS_URL=https://example.com
 REACT_APP_SSO_CLIENT_ID=[REPLACE THIS WITH THE PROVIDED CLIENT_ID]
+REACT_APP_SSO_CLIENT_SECRET=[REPLACE THIS WITH THE PROVIDED CLIENT_SECRET]
 
 (https://example.com is the link to your 1st party server)
 `CLIENT_ID` replace this with the provided `CLIENT_ID` from https://dapp.shield.aesirx.io/
+`CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` fromhttps://dapp.shield.aesirx.io/
 ```
 
 ##### Disable Consent Popup:
@@ -87,9 +90,11 @@ export default AnalyticsContainer;
 ```
 NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL=https://example.com
 NEXT_PUBLIC_SSO_CLIENT_ID=[REPLACE THIS WITH THE PROVIDED CLIENT_ID]
+NEXT_PUBLIC_SSO_CLIENT_SECRET=[REPLACE THIS WITH THE PROVIDED CLIENT_SECRET]
 
 (https://example.com is the link to your 1st party server)
 `CLIENT_ID` replace this with the provided `CLIENT_ID` from https://dapp.shield.aesirx.io/
+`CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` fromhttps://dapp.shield.aesirx.io/
 ```
 
 ##### Disable Consent Popup:
@@ -274,4 +279,37 @@ Please follow below CSS example:
   [data-bs-theme=dark] .aesirxconsent {
     color: #fff;
   }
+```
+
+
+## Choose template for Consent modal
+
+There is 5 template for Consent modal
+1. original
+2. default (recommend)
+3. simple-consent-mode
+   1. Support Basic Consent Mode v2
+4. advance-consent-mode
+   1. Support Advance Consent Mode v2
+5. simple-web-2
+
+#### Usage in SSR site:
+```
+<script>
+  window.consentLayout = "default"
+</script>
+```
+
+#### In ReactJS:
+
+add this environment variable to `.env`
+```
+REACT_APP_CONSENT_LAYOUT=default
+```
+
+#### In NextJS:
+
+add this environment variable to `.env`
+```
+NEXT_PUBLIC_CONSENT_LAYOUT=default
 ```

src/AnalyticsNext/index.tsx

@@ -1,9 +1,10 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 
 import AnalyticsContextProvider from '../utils/AnalyticsContextProvider';
 import AnalyticsHandle from './handle';
 import { NextRouter } from 'next/router';
 import dynamic from 'next/dynamic';
+import { getConsentTemplate } from '../utils/consent';
 
 const ConsentComponent = dynamic(() => import('../Components/Consent'), { ssr: false });
 const ConsentComponentCustom = dynamic(() => import('../Components/ConsentCustom'), { ssr: false });
@@ -25,20 +26,34 @@ const AnalyticsNext = ({
   isLoggedApp,
   children,
 }: AnalyticsNext) => {
+  const [layout, setLayout] = useState(process.env.NEXT_PUBLIC_CONSENT_LAYOUT);
+  const [gtagId, setGtagId] = useState(process.env.NEXT_PUBLIC_ANALYTICS_GTAG_ID);
+  const [gtmId, setGtmId] = useState(process.env.NEXT_PUBLIC_ANALYTICS_GTM_ID);
+  useEffect(() => {
+    const init = async () => {
+      const data: any = await getConsentTemplate(window.location.host);
+      setLayout(data?.data?.template ?? process.env.NEXT_PUBLIC_CONSENT_LAYOUT);
+      setGtagId(data?.data?.gtag_id ?? process.env.NEXT_PUBLIC_ANALYTICS_GTAG_ID);
+      setGtmId(data?.data?.gtm_id ?? process.env.NEXT_PUBLIC_ANALYTICS_GTM_ID);
+    };
+    init();
+  }, []);
   return (
     <>
       <AnalyticsContextProvider>
         <AnalyticsHandle router={router} attributes={attributes}>
           {children}
           {process.env.NEXT_PUBLIC_DISABLE_ANALYTICS_CONSENT !== 'true' && (
             <>
-              {oldLayout ? (
+              {oldLayout || layout === 'original' ? (
                 <ConsentComponent
                   endpoint={process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL}
                   networkEnv={process.env.NEXT_PUBLIC_CONCORDIUM_NETWORK}
                   aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}
                   loginApp={loginApp}
                   isLoggedApp={isLoggedApp}
+                  gtagId={gtagId}
+                  gtmId={gtmId}
                 />
               ) : (
                 <ConsentComponentCustom
@@ -47,6 +62,9 @@ const AnalyticsNext = ({
                   aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}
                   loginApp={loginApp}
                   isLoggedApp={isLoggedApp}
+                  gtagId={gtagId}
+                  gtmId={gtmId}
+                  layout={layout}
                 />
               )}
             </>

src/AnalyticsReact/index.tsx

@@ -1,7 +1,8 @@
-import React, { ReactNode, Suspense } from 'react';
+import React, { ReactNode, Suspense, useEffect, useState } from 'react';
 
 import AnalyticsContextProvider from '../utils/AnalyticsContextProvider';
 import AnalyticsHandle from './handle';
+import { getConsentTemplate } from '../utils/consent';
 
 const ConsentComponent = React.lazy(() => import('../Components/Consent'));
 const ConsentComponentCustom = React.lazy(() => import('../Components/ConsentCustom'));
@@ -14,23 +15,40 @@ interface AnalyticsReact {
 }
 
 const AnalyticsReact = ({ location, history, oldLayout = false, children }: AnalyticsReact) => {
+  const [layout, setLayout] = useState(process.env.REACT_APP_CONSENT_LAYOUT);
+  const [gtagId, setGtagId] = useState(process.env.REACT_APP_ANALYTICS_GTAG_ID);
+  const [gtmId, setGtmId] = useState(process.env.REACT_APP_ANALYTICS_GTM_ID);
+  useEffect(() => {
+    const init = async () => {
+      const data: any = await getConsentTemplate(window.location.host);
+      setLayout(data?.data?.template ?? process.env.REACT_APP_CONSENT_LAYOUT);
+      setGtagId(data?.data?.gtag_id ?? process.env.REACT_APP_ANALYTICS_GTAG_ID);
+      setGtmId(data?.data?.gtm_id ?? process.env.REACT_APP_ANALYTICS_GTM_ID);
+    };
+    init();
+  }, []);
   return (
     <AnalyticsContextProvider>
       <AnalyticsHandle location={location} history={history}>
         {children}
         {process.env.REACT_APP_DISABLE_ANALYTICS_CONSENT !== 'true' && (
           <Suspense fallback={<></>}>
-            {oldLayout ? (
+            {oldLayout || layout === 'original' ? (
               <ConsentComponent
                 endpoint={process.env.REACT_APP_ENDPOINT_ANALYTICS_URL}
                 networkEnv={process.env.REACT_APP_CONCORDIUM_NETWORK}
                 aesirXEndpoint={process.env.REACT_APP_ENDPOINT_URL ?? 'https://api.aesirx.io'}
+                gtagId={gtagId}
+                gtmId={gtmId}
               />
             ) : (
               <ConsentComponentCustom
-                endpoint={process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL}
-                networkEnv={process.env.NEXT_PUBLIC_CONCORDIUM_NETWORK}
-                aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}
+                endpoint={process.env.REACT_APP_ENDPOINT_ANALYTICS_URL}
+                networkEnv={process.env.REACT_APP_CONCORDIUM_NETWORK}
+                aesirXEndpoint={process.env.REACT_APP_ENDPOINT_URL ?? 'https://api.aesirx.io'}
+                gtagId={gtagId}
+                gtmId={gtmId}
+                layout={layout}
               />
             )}
           </Suspense>