Fix conflict css, translate title, Consent Mode 2.0 fix

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:
 ```

src/AnalyticsNext/index.tsx

@@ -28,7 +28,9 @@ 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);
   useEffect(() => {

src/AnalyticsReact/index.tsx

@@ -22,7 +22,9 @@ 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);
   useEffect(() => {

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 (

src/Components/ConsentCustom.tsx

@@ -195,12 +195,12 @@ const ConsentComponentCustomApp = (props: any) => {
   const revoke = sessionStorage.getItem('aesirx-analytics-revoke');
   // Metamask
   const { address, connector } =
-    (layout === 'simple-consent-mode' || layout === 'simple-web-2' || level === 1) &&
+    (layout === 'simple-consent-mode' || level === 1) &&
     (!revoke || revoke === '0' || revoke === '1')
       ? { address: '', connector: '' }
       : useAccount();
   const { signMessage }: any =
-    (layout === 'simple-consent-mode' || layout === 'simple-web-2' || level === 1) &&
+    (layout === 'simple-consent-mode' || level === 1) &&
     (!revoke || revoke === '0' || revoke === '1')
       ? { signMessage: {} }
       : useSignMessage({
@@ -703,9 +703,12 @@ const ConsentComponentCustomApp = (props: any) => {
     ) {
       window.funcAfterConsent && window.funcAfterConsent();
     }
-    (gtagId || gtmId) && loadConsentDefault(gtagId, gtmId);
   }, []);
 
+  useEffect(() => {
+    (gtagId || gtmId) && loadConsentDefault(gtagId, gtmId);
+  }, [layout]);
+
   useEffect(() => {
     if (
       showExpandRevoke &&
@@ -745,7 +748,7 @@ const ConsentComponentCustomApp = (props: any) => {
       </div>
     );
   };
-  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
@@ -755,25 +758,45 @@ const ConsentComponentCustomApp = (props: any) => {
       // 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 !== '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 (layout === 'advance-consent-mode') {
-      gtagId && loadGtagScript(gtagId);
-      gtmId && loadGtmScript(gtmId);
+    if (layout !== 'simple-consent-mode' && sessionStorage.getItem('consentGranted') !== 'true') {
       gtag('set', 'url_passthrough', true);
       gtag('set', 'ads_data_redaction', true);
+      gtag('consent', 'default', {
+        ad_user_data: 'denied',
+        ad_personalization: 'denied',
+        ad_storage: 'denied',
+        analytics_storage: 'denied',
+        wait_for_update: 500,
+      });
+    }
+    if (sessionStorage.getItem('consentGranted') === 'true') {
+      gtag('consent', 'update', {
+        ad_user_data: 'granted',
+        ad_personalization: 'granted',
+        ad_storage: 'granted',
+        analytics_storage: 'granted',
+      });
     }
   };
   const paymentRevoke = sessionStorage.getItem('aesirx-analytics-opt-payment');
@@ -1163,7 +1186,7 @@ const ConsentComponentCustomApp = (props: any) => {
                                   level === 4 && !account && !address ? '' : 'd-none'
                                 }`}
                               >
-                                {layout !== 'simple-consent-mode' && layout !== 'simple-web-2' && (
+                                {layout !== 'simple-consent-mode' && (
                                   <Suspense
                                     fallback={
                                       <div className="d-flex h-100 justify-content-center align-items-center">
@@ -1262,7 +1285,7 @@ const ConsentComponentCustomApp = (props: any) => {
                                       {t('txt_yes_i_consent')}
                                     </Button>
                                   )}
-                                  {layout === 'simple-consent-mode' || layout === 'simple-web-2' ? (
+                                  {layout === 'simple-consent-mode' ? (
                                     <></>
                                   ) : (
                                     <>
@@ -1341,7 +1364,7 @@ const ConsentComponentCustomApp = (props: any) => {
                                       {t('txt_yes_i_consent')}
                                     </Button>
                                   )}
-                                  {layout === 'simple-consent-mode' || layout === 'simple-web-2' ? (
+                                  {layout === 'simple-consent-mode' ? (
                                     <></>
                                   ) : (
                                     <>

src/Components/Ethereum/index.tsx

@@ -119,7 +119,7 @@ const SSOEthereumProvider = ({ children, layout, level }: any) => {
   ]);
   const revoke = sessionStorage.getItem('aesirx-analytics-revoke');
   const wagmiConfig: any =
-    (layout === 'simple-consent-mode' || layout === 'simple-web-2' || level === 1) &&
+    (layout === 'simple-consent-mode' || level === 1) &&
     (!revoke || revoke === '0' || revoke === '1')
       ? {}
       : createConfig({
@@ -132,7 +132,7 @@ const SSOEthereumProvider = ({ children, layout, level }: any) => {
   const ethereumClient = new EthereumClient(wagmiConfig, chains);
   return (
     <>
-      {(layout === 'simple-consent-mode' || layout === 'simple-web-2' || level === 1) &&
+      {(layout === 'simple-consent-mode' || level === 1) &&
       (!revoke || revoke === '0' || revoke === '1') ? (
         <>{children}</>
       ) : (

src/Components/Terms.tsx

@@ -139,7 +139,7 @@ const TermsComponent = ({
                     >
                       <Tab
                         eventKey="consent"
-                        title="Consent Management"
+                        title={t('txt_consent_nanagement')}
                         className="w-auto px-2 px-lg-4"
                       >
                         {isRejectedLayout ? (
@@ -240,7 +240,7 @@ const TermsComponent = ({
                           </>
                         )}
                       </Tab>
-                      <Tab eventKey="detail" title="Details" className="px-2 px-lg-4">
+                      <Tab eventKey="detail" title={t('txt_details')} className="px-2 px-lg-4">
                         <div className={`about_section`}>
                           <p className="mt-0 mb-1 mb-lg-2 text-black fw-semibold">
                             {t('txt_manage_your_consent')}
@@ -350,7 +350,7 @@ const TermsComponent = ({
                           </div>
                         </div>
                       </Tab>
-                      <Tab eventKey="about" title="About" className="px-2 px-lg-4">
+                      <Tab eventKey="about" title={t('txt_about')} className="px-2 px-lg-4">
                         <div className="mb-1 mb-lg-3">
                           <p className="mb-1 mb-lg-2 text-black fw-semibold">
                             {t('txt_our_commitment_in_action')}

src/Hooks/useConsentStatus.ts

@@ -84,7 +84,7 @@ const useConsentStatus = (endpoint?: string, layout?: string, props?: WalletConn
   const rpc = useGrpcClient(network);
 
   useEffect(() => {
-    if (rpc && layout !== 'simple-consent-mode' && layout !== 'simple-web-2' && level !== 1) {
+    if (rpc && layout !== 'simple-consent-mode' && level !== 1) {
       setRpcGenesisHash(undefined);
       rpc
         .getConsensusStatus()
@@ -134,7 +134,7 @@ const useConsentStatus = (endpoint?: string, layout?: string, props?: WalletConn
 
   const handleLevel = useCallback(
     async (_level: number) => {
-      if (layout !== 'simple-consent-mode' && layout !== 'simple-web-2') {
+      if (layout !== 'simple-consent-mode') {
         setLevel(_level);
         if (_level > 3 && isDesktop && !connection && window['concordium']) {
           setActiveConnectorType(BROWSER_WALLET);

src/analytics.tsx

@@ -27,7 +27,7 @@ declare global {
 }
 const ConsentPopup = ({ visitor_uuid, event_uuid }: any) => {
   window.process = { env: '' };
-  const [layout, setLayout] = useState(window['consentLayout'] ?? 'simple-web-2');
+  const [layout, setLayout] = useState(window['consentLayout'] ?? 'simple-consent-mode');
   const [gtagId, setGtagId] = useState(window['analyticsGtagId']);
   const [gtmId, setGtmId] = useState(window['analyticsGtmId']);
   useEffect(() => {

src/styles/style.scss

@@ -537,4 +537,19 @@ body {
     }
   }
 }
+
+.aesirxsso,
+.aesirxconsent {
+  .fade,
+  &.fade {
+    opacity: 1;
+  }
+  &.modal.fade .modal-dialog {
+    transform: none;
+  }
+  .btn {
+    text-transform: unset;
+    white-space: normal;
+  }
+}
 @import './color-mode.scss';

src/translations/dk/common.json

@@ -125,5 +125,7 @@
   "txt_payment_1": "Denne tjeneste vil sætte cookies og indsamle data for at understøtte betalingsgateway-behandling.",
   "txt_payment_2": "For at fuldføre dit køb vil <span class='fw-semibold'>ordre- & brugerdata</span> blive delt med <span class='fw-semibold'>Sellix & Stripe</span> som vores <span class='fw-semibold'>betalingsbehandlere.</span> (*<span class='fw-semibold'>Google reCaptcha</span> bruges af <span class='fw-semibold'>betalingsbehandlerne</span> af <span class='fw-semibold'>sikkerhedsmæssige</span> årsager.)",
   "txt_payment_3": "Hvis du ikke giver samtykke til denne dataudveksling, vil du ikke kunne fuldføre betalingen.",
-  "txt_payment_4": "For mere information, henvises til vores <a target='_blank' rel='noopener noreferrer' href='https://aesirx.io/privacy-policy' class='text-success fw-semibold'>privatlivspolitik.</a>."
+  "txt_payment_4": "For mere information, henvises til vores <a target='_blank' rel='noopener noreferrer' href='https://aesirx.io/privacy-policy' class='text-success fw-semibold'>privatlivspolitik.</a>.",
+  "txt_consent_nanagement": "Samtykkestyring",
+  "txt_details": "Detaljer"
 }

src/translations/en/common.json

@@ -125,5 +125,7 @@
   "txt_payment_1": "This service will set cookies & collect data to support payment gateway processing.",
   "txt_payment_2": "To complete your purchase, <span class='fw-semibold'>order & user data</span> will be shared with <span class='fw-semibold'>Sellix & Stripe</span> as our <span class='fw-semibold'>payment processors.</span> (*<span class='fw-semibold'>Google reCaptcha</span> is used by the <span class='fw-semibold'>payment processors</span> for <span class='fw-semibold'>security</span> purposes.)",
   "txt_payment_3": "If you do not consent to this data sharing, you will not be able to complete the payment.",
-  "txt_payment_4": "For more information, please refer to our <a target='_blank' rel='noopener noreferrer' href='https://aesirx.io/privacy-policy' class='text-success fw-semibold'>privacy policy</a>."
+  "txt_payment_4": "For more information, please refer to our <a target='_blank' rel='noopener noreferrer' href='https://aesirx.io/privacy-policy' class='text-success fw-semibold'>privacy policy</a>.",
+  "txt_consent_nanagement": "Consent Management",
+  "txt_details": "Details"
 }

src/translations/es/common.json

@@ -125,5 +125,7 @@
   "txt_payment_1": "Este servicio establecerá cookies y recopilará datos para respaldar el procesamiento de la pasarela de pagos.",
   "txt_payment_2": "Para completar su compra, los <span class='fw-semibold'>datos del pedido & del usuario</span> se compartirán con <span class='fw-semibold'>Sellix & Stripe</span> como nuestros <span class='fw-semibold'>procesadores de pagos.</span> (*<span class='fw-semibold'>Google reCaptcha</span> es utilizado por los <span class='fw-semibold'>procesadores de pagos</span> por razones de <span class='fw-semibold'>seguridad</span>.)",
   "txt_payment_3": "Si no consiente compartir estos datos, no podrá completar el pago.",
-  "txt_payment_4": "Para más información, por favor consulte nuestra <a target='_blank' rel='noopener noreferrer' href='https://aesirx.io/privacy-policy' class='text-success fw-semibold'>política de privacidad</a>."
+  "txt_payment_4": "Para más información, por favor consulte nuestra <a target='_blank' rel='noopener noreferrer' href='https://aesirx.io/privacy-policy' class='text-success fw-semibold'>política de privacidad</a>.",
+  "txt_consent_nanagement": "Gestión del consentimiento",
+  "txt_details": "Detalles"
 }

src/translations/fr/common.json

@@ -125,5 +125,7 @@
   "txt_payment_1": "Ce service installera des cookies et collectera des données pour prendre en charge le traitement de la passerelle de paiement.",
   "txt_payment_2": "Pour finaliser votre achat, les <span class='fw-semibold'>données de commande & d'utilisateur</span> seront partagées avec <span class='fw-semibold'>Sellix & Stripe</span> nos <span class='fw-semibold'>processeurs de paiement.</span> (*<span class='fw-semibold'>Google reCaptcha</span> est utilisé par les <span class='fw-semibold'>processeurs de paiement</span> pour des raisons de <span class='fw-semibold'>sécurité</span>.)",
   "txt_payment_3": "Si vous ne consentez pas à ce partage de données, vous ne pourrez pas finaliser le paiement.",
-  "txt_payment_4": "Pour plus d'informations, veuillez consulter notre <a target='_blank' rel='noopener noreferrer' href='https://aesirx.io/privacy-policy' class='text-success fw-semibold'>politique de confidentialité</a>."
+  "txt_payment_4": "Pour plus d'informations, veuillez consulter notre <a target='_blank' rel='noopener noreferrer' href='https://aesirx.io/privacy-policy' class='text-success fw-semibold'>politique de confidentialité</a>.",
+  "txt_consent_nanagement": "Gestion du consentement",
+  "txt_details": "Détails"
 }

src/translations/hr/common.json

@@ -125,5 +125,7 @@
   "txt_payment_1": "Ova usluga postavit će kolačiće i prikupljati podatke za podršku obradi platnog prolaza.",
   "txt_payment_2": "Za dovršetak kupnje, <span class='fw-semibold'>podaci o narudžbi & korisniku</span> će biti podijeljeni s <span class='fw-semibold'>Sellix & Stripe</span> kao našim <span class='fw-semibold'>procesorima plaćanja.</span> (*<span class='fw-semibold'>Google reCaptcha</span> koristi se od strane <span class='fw-semibold'>procesora plaćanja</span> iz <span class='fw-semibold'>sigurnosnih</span> razloga.)",
   "txt_payment_3": "Ako ne pristanete na ovo dijeljenje podataka, nećete moći dovršiti plaćanje.",
-  "txt_payment_4": "Za više informacija, molimo pogledajte našu <a target='_blank' rel='noopener noreferrer' href='https://aesirx.io/privacy-policy' class='text-success fw-semibold'>politiku privatnosti</a>."
+  "txt_payment_4": "Za više informacija, molimo pogledajte našu <a target='_blank' rel='noopener noreferrer' href='https://aesirx.io/privacy-policy' class='text-success fw-semibold'>politiku privatnosti</a>.",
+  "txt_consent_nanagement": "Upravljanje pristankom",
+  "txt_details": "Detalji"
 }