aesirxio · NguyenBao10 · Aug 20, 2024 · Aug 9, 2024 · Aug 9, 2024 · Aug 12, 2024
diff --git a/README.md b/README.md
@@ -286,13 +286,10 @@ Please follow below CSS example:
 ## 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. default (recommend)
    1. Support Advance Consent Mode v2
-5. simple-web-2
+2. simple-consent-mode
+   1. Support Basic Consent Mode v2
 
 #### Usage in SSR site:
 ```
@@ -325,7 +322,10 @@ NEXT_PUBLIC_CONSENT_LAYOUT=default
         "title":"payment",
         "content":"<div>YOUR_CONTENT_INPUT_HERE</div>"
       }
-    ]`
+    ]`;
+
+    //trigger open optIn consent with Javascript
+    document.querySelector('.opt-in-consent.payment').classList.add('show');
 </script>
 ```
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "aesirx-analytics",
-  "version": "2.2.15",
+  "version": "2.2.17",
   "license": "GPL-3.0-only",
   "author": "AesirX",
   "repository": "https://gitlab.redweb.dk/aesirx/analytics",
@@ -14,7 +14,7 @@
     "@concordium/web-sdk": "^7.0.4-rc.3",
     "@web3modal/ethereum": "^2.7.0",
     "@web3modal/react": "^2.7.0",
-    "aesirx-sso": "^1.4.13",
+    "aesirx-sso": "^1.4.15",
     "axios": "^1.6.0",
     "bootstrap": "^5.3.2",
     "bowser": "^2.11.0",

diff --git a/src/AnalyticsNext/index.tsx b/src/AnalyticsNext/index.tsx
@@ -28,9 +28,14 @@ const AnalyticsNext = ({
   isOptInReplaceAnalytics = false,
   children,
 }: AnalyticsNext) => {
-  const [layout, setLayout] = useState(process.env.NEXT_PUBLIC_CONSENT_LAYOUT ?? 'simple-web-2');
+  const [layout, setLayout] = useState(
+    process.env.NEXT_PUBLIC_CONSENT_LAYOUT ?? 'simple-consent-mode'
+  );
   const [gtagId, setGtagId] = useState(process.env.NEXT_PUBLIC_ANALYTICS_GTAG_ID);
   const [gtmId, setGtmId] = useState(process.env.NEXT_PUBLIC_ANALYTICS_GTM_ID);
+  const [customConsentText, setCustomConsentText] = useState(
+    process.env.NEXT_PUBLIC_ANALYTICS_CONSENT_TEXT
+  );
   useEffect(() => {
     const init = async () => {
       const data: any = await getConsentTemplate(
@@ -40,6 +45,9 @@ const AnalyticsNext = ({
       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);
+      setCustomConsentText(
+        data?.data?.consent_text ?? process.env.NEXT_PUBLIC_ANALYTICS_CONSENT_TEXT
+      );
     };
     init();
   }, []);
@@ -59,6 +67,7 @@ const AnalyticsNext = ({
                   isLoggedApp={isLoggedApp}
                   gtagId={gtagId}
                   gtmId={gtmId}
+                  customConsentText={customConsentText}
                 />
               ) : (
                 <ConsentComponentCustom
@@ -69,6 +78,7 @@ const AnalyticsNext = ({
                   isLoggedApp={isLoggedApp}
                   gtagId={gtagId}
                   gtmId={gtmId}
+                  customConsentText={customConsentText}
                   layout={layout}
                   isOptInReplaceAnalytics={isOptInReplaceAnalytics}
                 />

diff --git a/src/AnalyticsReact/index.tsx b/src/AnalyticsReact/index.tsx
@@ -22,9 +22,14 @@ const AnalyticsReact = ({
   isOptInReplaceAnalytics = false,
   children,
 }: AnalyticsReact) => {
-  const [layout, setLayout] = useState(process.env.REACT_APP_CONSENT_LAYOUT ?? 'simple-web-2');
+  const [layout, setLayout] = useState(
+    process.env.REACT_APP_CONSENT_LAYOUT ?? 'simple-consent-mode'
+  );
   const [gtagId, setGtagId] = useState(process.env.REACT_APP_ANALYTICS_GTAG_ID);
   const [gtmId, setGtmId] = useState(process.env.REACT_APP_ANALYTICS_GTM_ID);
+  const [customConsentText, setCustomConsentText] = useState(
+    process.env.REACT_APP_ANALYTICS_CONSENT_TEXT
+  );
   useEffect(() => {
     const init = async () => {
       const data: any = await getConsentTemplate(
@@ -34,6 +39,9 @@ const AnalyticsReact = ({
       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);
+      setCustomConsentText(
+        data?.data?.consent_text ?? process.env.REACT_APP_ANALYTICS_CONSENT_TEXT
+      );
     };
     init();
   }, []);
@@ -50,6 +58,7 @@ const AnalyticsReact = ({
                 aesirXEndpoint={process.env.REACT_APP_ENDPOINT_URL ?? 'https://api.aesirx.io'}
                 gtagId={gtagId}
                 gtmId={gtmId}
+                customConsentText={customConsentText}
               />
             ) : (
               <ConsentComponentCustom
@@ -58,6 +67,7 @@ const AnalyticsReact = ({
                 aesirXEndpoint={process.env.REACT_APP_ENDPOINT_URL ?? 'https://api.aesirx.io'}
                 gtagId={gtagId}
                 gtmId={gtmId}
+                customConsentText={customConsentText}
                 layout={layout}
                 isOptInReplaceAnalytics={isOptInReplaceAnalytics}
               />

diff --git a/src/Components/Connect.tsx b/src/Components/Connect.tsx
@@ -1,6 +1,6 @@
 import React, { Suspense, useState } from 'react';
 import { Modal } from 'react-bootstrap';
-import { isMobile, isDesktop } from 'react-device-detect';
+import { isMobile, isDesktop, OsTypes, osName } from 'react-device-detect';
 import { BROWSER_WALLET, WALLET_CONNECT } from '../Hooks/config';
 import concordium_logo from '../Assets/concordium_logo.png';
 import { useTranslation } from 'react-i18next';
@@ -65,31 +65,36 @@ const ConnectModal = ({
                     )}
                   </button>
                 )}
-
-                <button
-                  className="btn btn-primary btn-concordium flex-grow-1 fw-medium py-2 px-4 lh-sm text-white d-flex align-items-center justify-content-start text-start"
-                  onClick={() => handleOnConnect(WALLET_CONNECT)}
-                >
-                  {!activeConnectorError && activeConnectorType && !activeConnector ? (
-                    <span
-                      className="spinner-border spinner-border-sm me-1"
-                      role="status"
-                      aria-hidden="true"
-                    ></span>
-                  ) : (
-                    <>
-                      {' '}
-                      <img
-                        src={concordium_logo}
-                        className="me-3 align-text-bottom"
-                        alt="Concordium"
-                      />
-                      {isMobile
-                        ? 'Concordium or CryptoX'
-                        : 'QR Code (Concordium Mobile or CryptoX Mobile)'}
-                    </>
-                  )}
-                </button>
+                {osName !== OsTypes?.IOS ? (
+                  <>
+                    <button
+                      className="btn btn-primary btn-concordium flex-grow-1 fw-medium py-2 px-4 lh-sm text-white d-flex align-items-center justify-content-start text-start"
+                      onClick={() => handleOnConnect(WALLET_CONNECT)}
+                    >
+                      {!activeConnectorError && activeConnectorType && !activeConnector ? (
+                        <span
+                          className="spinner-border spinner-border-sm me-1"
+                          role="status"
+                          aria-hidden="true"
+                        ></span>
+                      ) : (
+                        <>
+                          {' '}
+                          <img
+                            src={concordium_logo}
+                            className="me-3 align-text-bottom"
+                            alt="Concordium"
+                          />
+                          {isMobile
+                            ? 'Concordium or CryptoX'
+                            : 'QR Code (Concordium Mobile or CryptoX Mobile)'}
+                        </>
+                      )}
+                    </button>
+                  </>
+                ) : (
+                  <></>
+                )}
               </div>{' '}
             </div>
           </div>

diff --git a/src/Components/Consent.tsx b/src/Components/Consent.tsx
@@ -608,7 +608,7 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
     element.click();
   };
 
-  const loadConsentDefault = (gtagId: any, gtmId: any) => {
+  const loadConsentDefault = async (gtagId: any, gtmId: any) => {
     window.dataLayer = window.dataLayer || [];
     function gtag( // eslint-disable-next-line @typescript-eslint/no-unused-vars
       p0: string, // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -618,26 +618,47 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
       // eslint-disable-next-line prefer-rest-params
       dataLayer.push(arguments);
     }
-    gtag('consent', 'default', {
-      ad_user_data: 'denied',
-      ad_personalization: 'denied',
-      ad_storage: 'denied',
-      analytics_storage: 'denied',
-      wait_for_update: 500,
-    });
-    if (gtagId) {
-      gtag('js', new Date());
-      gtag('config', `${gtagId}`);
-    }
-    if (gtmId) {
-      dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
-    }
-    if (layout === 'advance-consent-mode') {
-      gtagId && loadGtagScript(gtagId);
-      gtmId && loadGtmScript(gtmId);
+    if (layout !== 'simple-consent-mode' && sessionStorage.getItem('consentGranted') !== 'true') {
+      gtag('consent', 'default', {
+        ad_user_data: 'denied',
+        ad_personalization: 'denied',
+        ad_storage: 'denied',
+        analytics_storage: 'denied',
+        wait_for_update: 500,
+      });
       gtag('set', 'url_passthrough', true);
       gtag('set', 'ads_data_redaction', true);
     }
+    if (
+      (layout !== 'simple-consent-mode' || sessionStorage.getItem('consentGranted') === 'true') &&
+      ((gtmId &&
+        !document.querySelector(
+          `script[src="https://www.googletagmanager.com/gtm.js?id=${gtmId}"]`
+        )) ||
+        (gtagId &&
+          !document.querySelector(
+            `script[src="https://www.googletagmanager.com/gtag/js?id=${gtagId}"]`
+          )))
+    ) {
+      gtagId && (await loadGtagScript(gtagId));
+      gtmId && (await loadGtmScript(gtmId));
+      if (gtagId) {
+        gtag('js', new Date());
+        gtag('config', `${gtagId}`);
+      }
+      if (gtmId) {
+        dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+      }
+    }
+
+    if (sessionStorage.getItem('consentGranted') === 'true') {
+      gtag('consent', 'update', {
+        ad_user_data: 'granted',
+        ad_personalization: 'granted',
+        ad_storage: 'granted',
+        analytics_storage: 'granted',
+      });
+    }
   };
 
   useEffect(() => {
@@ -651,9 +672,12 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
       setShowBackdrop(false);
       setShowExpandConsent(false);
     }
-    (gtagId || gtmId) && loadConsentDefault(gtagId, gtmId);
   }, []);
 
+  useEffect(() => {
+    (gtagId || gtmId) && loadConsentDefault(gtagId, gtmId);
+  }, [layout]);
+
   console.log('level', uuid, level, web3ID, account, loading);
 
   return (