From 0b4e744d21315fbe5abfdebf98a34bcfe8604a4d Mon Sep 17 00:00:00 2001
From: Viet <viet@r-digital.tech>
Date: Fri, 15 Mar 2024 10:13:47 +0700
Subject: [PATCH 01/12] Add ref

---
 src/Components/ConsentCustom.tsx       | 1 +
 src/analytics.tsx                      | 1 +
 src/utils/AnalyticsContextProvider.tsx | 6 +++++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/Components/ConsentCustom.tsx b/src/Components/ConsentCustom.tsx
index f3de5d9..defdb1c 100644
--- a/src/Components/ConsentCustom.tsx
+++ b/src/Components/ConsentCustom.tsx
@@ -741,6 +741,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                   />
                   <div
                     className="minimize-shield"
+                    ref={analyticsContext?.ref}
                     onClick={() => {
                       setShowExpandConsent(true);
                       sessionStorage.removeItem('aesirx-analytics-rejected');
diff --git a/src/analytics.tsx b/src/analytics.tsx
index 5417632..eeb981c 100644
--- a/src/analytics.tsx
+++ b/src/analytics.tsx
@@ -31,6 +31,7 @@ const ConsentPopup = ({ visitor_uuid, event_uuid }: any) => {
         visitor_uuid: visitor_uuid,
         setEventID: undefined,
         setUUID: undefined,
+        ref: undefined,
       }}
     >
       <AesirXI18nextProvider appLanguages={appLanguages}>
diff --git a/src/utils/AnalyticsContextProvider.tsx b/src/utils/AnalyticsContextProvider.tsx
index cf4a2f7..b52c103 100644
--- a/src/utils/AnalyticsContextProvider.tsx
+++ b/src/utils/AnalyticsContextProvider.tsx
@@ -3,7 +3,7 @@
  * @license     GNU General Public License version 3, see LICENSE.
  */
 
-import React, { Dispatch, ReactNode, SetStateAction, useState } from 'react';
+import React, { Dispatch, ReactNode, SetStateAction, useRef, useState } from 'react';
 import { appLanguages } from '../translations';
 import { AesirXI18nextProvider } from './I18nextProvider';
 
@@ -16,6 +16,7 @@ interface AnalyticsContextType {
   visitor_uuid: string;
   setEventID: Dispatch<SetStateAction<string>>;
   setUUID: Dispatch<SetStateAction<string>>;
+  ref: any;
 }
 
 export const AnalyticsContext = React.createContext<AnalyticsContextType>({
@@ -23,11 +24,13 @@ export const AnalyticsContext = React.createContext<AnalyticsContextType>({
   visitor_uuid: undefined,
   setEventID: undefined,
   setUUID: undefined,
+  ref: undefined,
 });
 
 const AnalyticsContextProvider: React.FC<Props> = ({ children }) => {
   const [eventID, setEventID] = useState();
   const [UUID, setUUID] = useState();
+  const ref = useRef();
   return (
     <AnalyticsContext.Provider
       value={{
@@ -35,6 +38,7 @@ const AnalyticsContextProvider: React.FC<Props> = ({ children }) => {
         visitor_uuid: UUID,
         setEventID: setEventID,
         setUUID: setUUID,
+        ref: ref,
       }}
     >
       <AesirXI18nextProvider appLanguages={appLanguages}>{children}</AesirXI18nextProvider>

From 1af4088bdf7a5080802947ab09433c011843b99c Mon Sep 17 00:00:00 2001
From: Viet <viet@r-digital.tech>
Date: Tue, 2 Apr 2024 10:40:50 +0700
Subject: [PATCH 02/12] Fix layout responsive

---
 src/Components/ConsentCustom.tsx | 10 +++++-----
 src/Components/Terms.tsx         | 16 ++++++++--------
 src/styles/style.scss            | 10 ++++++++++
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/Components/ConsentCustom.tsx b/src/Components/ConsentCustom.tsx
index defdb1c..2bdeb9d 100644
--- a/src/Components/ConsentCustom.tsx
+++ b/src/Components/ConsentCustom.tsx
@@ -761,7 +761,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                         <div className="bg-white rounded p-3 w-100">
                           {loading === 'done' ? (
                             <>
-                              <p className="mb-3">{t('txt_upgrade_consent_text')}</p>
+                              <p className="mb-2 mb-lg-3">{t('txt_upgrade_consent_text')}</p>
                               <p className="fw-semibold text-dark">{t('txt_your_current_level')}</p>
                               <ConsentLevelUprade
                                 level={level}
@@ -890,14 +890,14 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                                     onClick={() => {
                                       setUpgradeLayout(true);
                                     }}
-                                    className="d-flex align-items-center justify-content-center fs-14 w-100 me-3 mb-2 mb-lg-0 rounded-pill py-3 text-dark"
+                                    className="d-flex align-items-center justify-content-center fs-14 w-100 me-3 mb-2 mb-lg-0 rounded-pill py-2 py-lg-3 text-dark"
                                   >
                                     {t('txt_change_consent')}
                                   </Button>{' '}
                                   <Button
                                     variant="outline-success"
                                     onClick={handleNotAllow}
-                                    className="d-flex align-items-center justify-content-center fs-14 w-100 me-3 mb-2 mb-lg-0 rounded-pill py-3 text-dark"
+                                    className="d-flex align-items-center justify-content-center fs-14 w-100 me-3 mb-2 mb-lg-0 rounded-pill py-2 py-lg-3 text-dark"
                                   >
                                     {t('txt_reject_consent')}
                                   </Button>
@@ -909,7 +909,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                                     }`}
                                   >
                                     <SSOButton
-                                      className="btn btn-success text-white d-flex align-items-center justify-content-center loginSSO rounded-pill py-3 w-100"
+                                      className="btn btn-success text-white d-flex align-items-center justify-content-center loginSSO rounded-pill py-2 py-lg-3 w-100"
                                       text={
                                         <>
                                           <img src={yes} className="me-1" />
@@ -927,7 +927,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                                     <Button
                                       variant="success"
                                       onClick={handleAgree}
-                                      className="w-100 me-3 text-white d-flex align-items-center justify-content-center fs-14 rounded-pill py-3"
+                                      className="w-100 me-3 text-white d-flex align-items-center justify-content-center fs-14 rounded-pill py-2 py-lg-3"
                                     >
                                       {loadingCheckAccount ? (
                                         <span
diff --git a/src/Components/Terms.tsx b/src/Components/Terms.tsx
index 21255e7..d835f28 100644
--- a/src/Components/Terms.tsx
+++ b/src/Components/Terms.tsx
@@ -77,8 +77,8 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
           term.level === level && (
             <Fragment key={key}>
               <div
-                className={`rounded-top d-flex align-items-center justify-content-between p-3 fw-medium flex-wrap  ${
-                  isCustom ? 'py-3 px-4' : 'p-3 border-bottom bg-white'
+                className={`rounded-top d-flex align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap  ${
+                  isCustom ? 'py-2 py-lg-3 px-4' : 'p-2 p-lg-3 border-bottom bg-white'
                 }`}
                 style={{
                   ...(isCustom && {
@@ -123,10 +123,10 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                       id="consent_info_tab"
                       activeKey={activeTab}
                       onSelect={(k) => setActiveTab(k)}
-                      className="mb-3 w-100 flex-nowrap consent_info_tab"
+                      className="mb-2 mb-lg-3 w-100 flex-nowrap consent_info_tab"
                     >
                       <Tab eventKey="consent" title="Consent" className="w-100">
-                        <p className="mb-3">{t('txt_consent_to_data')}</p>
+                        <p className="mb-2 mb-lg-3">{t('txt_consent_to_data')}</p>
                         <div className="d-flex align-items-center flex-wrap">
                           <div className="me-10px">{t('txt_ethical_compliant')}</div>
                           <div className="d-flex align-items-center">
@@ -140,7 +140,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                             </div>
                           </div>
                         </div>
-                        <div className="fw-semibold mt-3 mb-0 text-dark">
+                        <div className="fw-semibold mt-2 mt-lg-3 mb-0 text-dark">
                           {t('txt_your_current_level')}
                         </div>
                         <ConsentLevel
@@ -331,7 +331,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
               </div>
               {isCustom ? (
                 <div className="rounded-bottom position-relative overflow-hidden text-white bg-white">
-                  <div className="position-relative p-3">
+                  <div className="position-relative pt-2 pt-lg-3 p-3">
                     <div className="d-flex align-items-center justify-content-between flex-wrap">
                       {children}
                     </div>
@@ -344,7 +344,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                     className="position-absolute h-100 w-100 object-fit-cover lightning flash-effect"
                     src={bg}
                   />
-                  <div className="position-relative p-3">
+                  <div className="position-relative pt-2 pt-lg-3 p-3">
                     {showReadmore && (
                       <>
                         <div className="mb-3">
@@ -372,7 +372,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
 
 const ConsentLevel = ({ level, tier, levelname, term_custom, content_custom }: any) => {
   return (
-    <div className="consent_level mt-3">
+    <div className="consent_level mt-2 mt-lg-3">
       <div className="d-flex align-items-center justify-content-between flex-wrap mb-2">
         <div className="d-flex align-items-center">
           <div className={`status-tier tier-${level} rounded-circle`}></div>
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 4fb4051..2c8ddfd 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -96,6 +96,11 @@ $dark: #222328;
   .btn-success:hover {
     color: var(--#{$prefix}white);
   }
+  .nav {
+    @include media-breakpoint-down(lg) {
+      --aesirxconsent-nav-link-padding-y: 5px;
+    }
+  }
   .toast {
     --#{$prefix}toast-zindex: 1049;
     --#{$prefix}toast-font-size: 16px;
@@ -105,6 +110,11 @@ $dark: #222328;
       border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
       box-shadow: var(--#{$prefix}toast-box-shadow);
       border-radius: var(--#{$prefix}toast-border-radius);
+      max-height: 100vh;
+      overflow-y: auto;
+      @include media-breakpoint-down(lg) {
+        font-size: 14px;
+      }
       button {
         @include media-breakpoint-down(lg) {
           font-size: 14px;

From 1962eb58d7bf0a58af54523bd37c076e72225e5f Mon Sep 17 00:00:00 2001
From: Viet <viet@r-digital.tech>
Date: Tue, 2 Apr 2024 10:44:01 +0700
Subject: [PATCH 03/12] Update node

---
 .github/workflows/release.yml | 2 +-
 .github/workflows/test.yml    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index c7a41e3..f4e6d22 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 18
       - run: yarn install
       - run: yarn run lint
       - run: CI=false yarn run build
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 013755c..97a9ade 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 18.x
 
       - name: Install dependencies
         run: yarn install

From e4a2d513c204fa5ddc18788b49fc5180ea5740fa Mon Sep 17 00:00:00 2001
From: Viet <viet@r-digital.tech>
Date: Tue, 2 Apr 2024 13:40:53 +0700
Subject: [PATCH 04/12] Remove detect wallet when reject

---
 src/Hooks/useConsentStatus.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/Hooks/useConsentStatus.ts b/src/Hooks/useConsentStatus.ts
index 631375f..0b2f621 100644
--- a/src/Hooks/useConsentStatus.ts
+++ b/src/Hooks/useConsentStatus.ts
@@ -61,10 +61,10 @@ const useConsentStatus = (endpoint?: string, props?: WalletConnectionProps) => {
                 const revokeTier = !consent?.consent_uuid
                   ? ''
                   : consent?.web3id && consent?.address
-                  ? '4'
-                  : consent?.address && !consent?.web3id
-                  ? '3'
-                  : '2';
+                    ? '4'
+                    : consent?.address && !consent?.web3id
+                      ? '3'
+                      : '2';
                 revokeTier ? handleRevoke(true, revokeTier) : setShow(true);
               }
             }
@@ -120,7 +120,8 @@ const useConsentStatus = (endpoint?: string, props?: WalletConnectionProps) => {
       if (
         isDesktop &&
         sessionStorage.getItem('aesirx-analytics-revoke') !== '1' &&
-        sessionStorage.getItem('aesirx-analytics-revoke') !== '2'
+        sessionStorage.getItem('aesirx-analytics-revoke') !== '2' &&
+        sessionStorage.getItem('aesirx-analytics-rejected') !== 'true'
       ) {
         if (window['concordium']) {
           const address = (await window['concordium']?.requestAccounts()) ?? [];

From 1c0b2c7cb6c33f2ea452e28660d0d0353a6e8490 Mon Sep 17 00:00:00 2001
From: Viet <viet@r-digital.tech>
Date: Wed, 3 Apr 2024 14:39:54 +0700
Subject: [PATCH 05/12] Fix prettier

---
 src/Hooks/useConsentStatus.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Hooks/useConsentStatus.ts b/src/Hooks/useConsentStatus.ts
index 0b2f621..d9e1e3a 100644
--- a/src/Hooks/useConsentStatus.ts
+++ b/src/Hooks/useConsentStatus.ts
@@ -61,10 +61,10 @@ const useConsentStatus = (endpoint?: string, props?: WalletConnectionProps) => {
                 const revokeTier = !consent?.consent_uuid
                   ? ''
                   : consent?.web3id && consent?.address
-                    ? '4'
-                    : consent?.address && !consent?.web3id
-                      ? '3'
-                      : '2';
+                  ? '4'
+                  : consent?.address && !consent?.web3id
+                  ? '3'
+                  : '2';
                 revokeTier ? handleRevoke(true, revokeTier) : setShow(true);
               }
             }

From 164976977d220ff4935ca612cb70fd36778ca264 Mon Sep 17 00:00:00 2001
From: Viet <viet@r-digital.tech>
Date: Fri, 5 Apr 2024 10:55:03 +0700
Subject: [PATCH 06/12] Login app

---
 src/AnalyticsNext/index.tsx      | 11 ++++++++++-
 src/Components/Consent.tsx       | 13 +++++++++++--
 src/Components/ConsentCustom.tsx |  7 ++++++-
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/AnalyticsNext/index.tsx b/src/AnalyticsNext/index.tsx
index 7ff1516..bb30972 100644
--- a/src/AnalyticsNext/index.tsx
+++ b/src/AnalyticsNext/index.tsx
@@ -12,10 +12,17 @@ interface AnalyticsNext {
   router: NextRouter;
   attributes: any;
   customLayout?: boolean;
+  loginApp?: any;
   children?: ReactNode;
 }
 
-const AnalyticsNext = ({ router, attributes, customLayout = false, children }: AnalyticsNext) => {
+const AnalyticsNext = ({
+  router,
+  attributes,
+  customLayout = false,
+  loginApp,
+  children,
+}: AnalyticsNext) => {
   return (
     <>
       <AnalyticsContextProvider>
@@ -28,12 +35,14 @@ const AnalyticsNext = ({ router, attributes, customLayout = false, children }: A
                   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}
                 />
               ) : (
                 <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}
                 />
               )}
             </>
diff --git a/src/Components/Consent.tsx b/src/Components/Consent.tsx
index cdc2770..3e37869 100644
--- a/src/Components/Consent.tsx
+++ b/src/Components/Consent.tsx
@@ -48,14 +48,20 @@ interface WalletConnectionPropsExtends extends WalletConnectionProps {
   endpoint: string;
   aesirXEndpoint: string;
   networkEnv?: string;
+  loginApp?: any;
 }
-const ConsentComponent = ({ endpoint, aesirXEndpoint, networkEnv }: any) => {
+const ConsentComponent = ({ endpoint, aesirXEndpoint, networkEnv, loginApp }: any) => {
   return (
     <WithWalletConnector network={networkEnv === 'testnet' ? TESTNET : MAINNET}>
       {(props) => (
         <div className="aesirxconsent">
           <SSOEthereumProvider>
-            <ConsentComponentApp {...props} endpoint={endpoint} aesirXEndpoint={aesirXEndpoint} />
+            <ConsentComponentApp
+              {...props}
+              endpoint={endpoint}
+              aesirXEndpoint={aesirXEndpoint}
+              loginApp={loginApp}
+            />
           </SSOEthereumProvider>
         </div>
       )}
@@ -66,6 +72,7 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
   const {
     endpoint,
     aesirXEndpoint,
+    loginApp,
     activeConnectorType,
     activeConnector,
     activeConnectorError,
@@ -227,6 +234,7 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
                     );
                     sessionStorage.setItem('aesirx-analytics-jwt', data?.jwt);
                     jwt = data?.jwt;
+                    loginApp && loginApp(data);
                     setLoadingCheckAccount(false);
                   }
                 } else {
@@ -398,6 +406,7 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
           setLoading('done');
         }
       }
+      loginApp && loginApp(response);
     } catch (error) {
       console.log(error);
       setShow(false);
diff --git a/src/Components/ConsentCustom.tsx b/src/Components/ConsentCustom.tsx
index 2bdeb9d..337a92c 100644
--- a/src/Components/ConsentCustom.tsx
+++ b/src/Components/ConsentCustom.tsx
@@ -50,8 +50,9 @@ interface WalletConnectionPropsExtends extends WalletConnectionProps {
   endpoint: string;
   aesirXEndpoint: string;
   networkEnv?: string;
+  loginApp?: any;
 }
-const ConsentComponentCustom = ({ endpoint, aesirXEndpoint, networkEnv }: any) => {
+const ConsentComponentCustom = ({ endpoint, aesirXEndpoint, networkEnv, loginApp }: any) => {
   return (
     <WithWalletConnector network={networkEnv === 'testnet' ? TESTNET : MAINNET}>
       {(props) => (
@@ -61,6 +62,7 @@ const ConsentComponentCustom = ({ endpoint, aesirXEndpoint, networkEnv }: any) =
               {...props}
               endpoint={endpoint}
               aesirXEndpoint={aesirXEndpoint}
+              loginApp={loginApp}
             />
           </SSOEthereumProvider>
         </div>
@@ -72,6 +74,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
   const {
     endpoint,
     aesirXEndpoint,
+    loginApp,
     activeConnectorType,
     activeConnector,
     activeConnectorError,
@@ -236,6 +239,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                     );
                     sessionStorage.setItem('aesirx-analytics-jwt', data?.jwt);
                     jwt = data?.jwt;
+                    loginApp && loginApp(data);
                     setLoadingCheckAccount(false);
                   }
                 } else {
@@ -407,6 +411,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
           setLoading('done');
         }
       }
+      loginApp && loginApp(response);
     } catch (error) {
       console.log(error);
       setShow(false);

From 5b24436fa3c9bbd4df3c4ea74f971e8ed7ed4400 Mon Sep 17 00:00:00 2001
From: Viet <viet@r-digital.tech>
Date: Fri, 5 Apr 2024 11:13:53 +0700
Subject: [PATCH 07/12] Update

---
 src/AnalyticsNext/index.tsx      |  4 ++++
 src/Components/Consent.tsx       |  9 ++++++---
 src/Components/ConsentCustom.tsx | 15 ++++++++++++---
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/AnalyticsNext/index.tsx b/src/AnalyticsNext/index.tsx
index bb30972..b8a4d5a 100644
--- a/src/AnalyticsNext/index.tsx
+++ b/src/AnalyticsNext/index.tsx
@@ -13,6 +13,7 @@ interface AnalyticsNext {
   attributes: any;
   customLayout?: boolean;
   loginApp?: any;
+  isLoggedApp?: boolean;
   children?: ReactNode;
 }
 
@@ -21,6 +22,7 @@ const AnalyticsNext = ({
   attributes,
   customLayout = false,
   loginApp,
+  isLoggedApp,
   children,
 }: AnalyticsNext) => {
   return (
@@ -36,6 +38,7 @@ const AnalyticsNext = ({
                   networkEnv={process.env.NEXT_PUBLIC_CONCORDIUM_NETWORK}
                   aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}
                   loginApp={loginApp}
+                  isLoggedApp={isLoggedApp}
                 />
               ) : (
                 <ConsentComponent
@@ -43,6 +46,7 @@ const AnalyticsNext = ({
                   networkEnv={process.env.NEXT_PUBLIC_CONCORDIUM_NETWORK}
                   aesirXEndpoint={process.env.NEXT_PUBLIC_ENDPOINT_URL ?? 'https://api.aesirx.io'}
                   loginApp={loginApp}
+                  isLoggedApp={isLoggedApp}
                 />
               )}
             </>
diff --git a/src/Components/Consent.tsx b/src/Components/Consent.tsx
index 3e37869..2f0bb35 100644
--- a/src/Components/Consent.tsx
+++ b/src/Components/Consent.tsx
@@ -49,8 +49,9 @@ interface WalletConnectionPropsExtends extends WalletConnectionProps {
   aesirXEndpoint: string;
   networkEnv?: string;
   loginApp?: any;
+  isLoggedApp?: boolean;
 }
-const ConsentComponent = ({ endpoint, aesirXEndpoint, networkEnv, loginApp }: any) => {
+const ConsentComponent = ({ endpoint, aesirXEndpoint, networkEnv, loginApp, isLoggedApp }: any) => {
   return (
     <WithWalletConnector network={networkEnv === 'testnet' ? TESTNET : MAINNET}>
       {(props) => (
@@ -61,6 +62,7 @@ const ConsentComponent = ({ endpoint, aesirXEndpoint, networkEnv, loginApp }: an
               endpoint={endpoint}
               aesirXEndpoint={aesirXEndpoint}
               loginApp={loginApp}
+              isLoggedApp={isLoggedApp}
             />
           </SSOEthereumProvider>
         </div>
@@ -73,6 +75,7 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
     endpoint,
     aesirXEndpoint,
     loginApp,
+    isLoggedApp,
     activeConnectorType,
     activeConnector,
     activeConnectorError,
@@ -234,7 +237,7 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
                     );
                     sessionStorage.setItem('aesirx-analytics-jwt', data?.jwt);
                     jwt = data?.jwt;
-                    loginApp && loginApp(data);
+                    loginApp && !isLoggedApp && loginApp(data);
                     setLoadingCheckAccount(false);
                   }
                 } else {
@@ -406,7 +409,7 @@ const ConsentComponentApp = (props: WalletConnectionPropsExtends) => {
           setLoading('done');
         }
       }
-      loginApp && loginApp(response);
+      loginApp && !isLoggedApp && loginApp(response);
     } catch (error) {
       console.log(error);
       setShow(false);
diff --git a/src/Components/ConsentCustom.tsx b/src/Components/ConsentCustom.tsx
index 337a92c..438d2ee 100644
--- a/src/Components/ConsentCustom.tsx
+++ b/src/Components/ConsentCustom.tsx
@@ -51,8 +51,15 @@ interface WalletConnectionPropsExtends extends WalletConnectionProps {
   aesirXEndpoint: string;
   networkEnv?: string;
   loginApp?: any;
+  isLoggedApp: boolean;
 }
-const ConsentComponentCustom = ({ endpoint, aesirXEndpoint, networkEnv, loginApp }: any) => {
+const ConsentComponentCustom = ({
+  endpoint,
+  aesirXEndpoint,
+  networkEnv,
+  loginApp,
+  isLoggedApp,
+}: any) => {
   return (
     <WithWalletConnector network={networkEnv === 'testnet' ? TESTNET : MAINNET}>
       {(props) => (
@@ -63,6 +70,7 @@ const ConsentComponentCustom = ({ endpoint, aesirXEndpoint, networkEnv, loginApp
               endpoint={endpoint}
               aesirXEndpoint={aesirXEndpoint}
               loginApp={loginApp}
+              isLoggedApp={isLoggedApp}
             />
           </SSOEthereumProvider>
         </div>
@@ -75,6 +83,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
     endpoint,
     aesirXEndpoint,
     loginApp,
+    isLoggedApp,
     activeConnectorType,
     activeConnector,
     activeConnectorError,
@@ -239,7 +248,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
                     );
                     sessionStorage.setItem('aesirx-analytics-jwt', data?.jwt);
                     jwt = data?.jwt;
-                    loginApp && loginApp(data);
+                    loginApp && !isLoggedApp && loginApp(data);
                     setLoadingCheckAccount(false);
                   }
                 } else {
@@ -411,7 +420,7 @@ const ConsentComponentCustomApp = (props: WalletConnectionPropsExtends) => {
           setLoading('done');
         }
       }
-      loginApp && loginApp(response);
+      loginApp && !isLoggedApp && loginApp(response);
     } catch (error) {
       console.log(error);
       setShow(false);

From e22056277fcf2716df32bb0e8fcbe88361a1faeb Mon Sep 17 00:00:00 2001
From: Viet <viet@r-digital.tech>
Date: Tue, 9 Apr 2024 10:59:49 +0700
Subject: [PATCH 08/12] Default Layout change

---
 src/AnalyticsNext/index.tsx  | 10 +++++-----
 src/AnalyticsReact/index.tsx | 22 ++++++++++++++++------
 src/analytics.tsx            |  6 +++---
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/AnalyticsNext/index.tsx b/src/AnalyticsNext/index.tsx
index b8a4d5a..acf7d3a 100644
--- a/src/AnalyticsNext/index.tsx
+++ b/src/AnalyticsNext/index.tsx
@@ -11,7 +11,7 @@ const ConsentComponentCustom = dynamic(() => import('../Components/ConsentCustom
 interface AnalyticsNext {
   router: NextRouter;
   attributes: any;
-  customLayout?: boolean;
+  oldLayout?: boolean;
   loginApp?: any;
   isLoggedApp?: boolean;
   children?: ReactNode;
@@ -20,7 +20,7 @@ interface AnalyticsNext {
 const AnalyticsNext = ({
   router,
   attributes,
-  customLayout = false,
+  oldLayout = false,
   loginApp,
   isLoggedApp,
   children,
@@ -32,8 +32,8 @@ const AnalyticsNext = ({
           {children}
           {process.env.NEXT_PUBLIC_DISABLE_ANALYTICS_CONSENT !== 'true' && (
             <>
-              {customLayout ? (
-                <ConsentComponentCustom
+              {oldLayout ? (
+                <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'}
@@ -41,7 +41,7 @@ const AnalyticsNext = ({
                   isLoggedApp={isLoggedApp}
                 />
               ) : (
-                <ConsentComponent
+                <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'}
diff --git a/src/AnalyticsReact/index.tsx b/src/AnalyticsReact/index.tsx
index bee4e34..c96663c 100644
--- a/src/AnalyticsReact/index.tsx
+++ b/src/AnalyticsReact/index.tsx
@@ -4,25 +4,35 @@ import AnalyticsContextProvider from '../utils/AnalyticsContextProvider';
 import AnalyticsHandle from './handle';
 
 const ConsentComponent = React.lazy(() => import('../Components/Consent'));
+const ConsentComponentCustom = React.lazy(() => import('../Components/ConsentCustom'));
 
 interface AnalyticsReact {
   location: { search: string; pathname: string };
   history: { replace: (_: object) => void };
   children?: ReactNode;
+  oldLayout?: boolean;
 }
 
-const AnalyticsReact = ({ location, history, children }: AnalyticsReact) => {
+const AnalyticsReact = ({ location, history, oldLayout = false, children }: AnalyticsReact) => {
   return (
     <AnalyticsContextProvider>
       <AnalyticsHandle location={location} history={history}>
         {children}
         {process.env.REACT_APP_DISABLE_ANALYTICS_CONSENT !== 'true' && (
           <Suspense fallback={<></>}>
-            <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'}
-            />
+            {oldLayout ? (
+              <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'}
+              />
+            ) : (
+              <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'}
+              />
+            )}
           </Suspense>
         )}
       </AnalyticsHandle>
diff --git a/src/analytics.tsx b/src/analytics.tsx
index eeb981c..48c9419 100644
--- a/src/analytics.tsx
+++ b/src/analytics.tsx
@@ -35,14 +35,14 @@ const ConsentPopup = ({ visitor_uuid, event_uuid }: any) => {
       }}
     >
       <AesirXI18nextProvider appLanguages={appLanguages}>
-        {window['customLayoutConsent'] === 'true' ? (
-          <ConsentComponentCustom
+        {window['oldLayoutConsent'] === 'true' ? (
+          <ConsentComponent
             endpoint={window['aesirx1stparty'] ?? ''}
             networkEnv={window['concordiumNetwork'] ?? ''}
             aesirXEndpoint={window['aesirxEndpoint'] ?? 'https://api.aesirx.io'}
           />
         ) : (
-          <ConsentComponent
+          <ConsentComponentCustom
             endpoint={window['aesirx1stparty'] ?? ''}
             networkEnv={window['concordiumNetwork'] ?? ''}
             aesirXEndpoint={window['aesirxEndpoint'] ?? 'https://api.aesirx.io'}

From 8adb3a7ada0ebc530fd0f7339d281e6dde1485d0 Mon Sep 17 00:00:00 2001
From: Viet <viet@r-digital.tech>
Date: Wed, 10 Apr 2024 14:45:51 +0700
Subject: [PATCH 09/12] Fix autodetect, dark mode

---
 src/Components/Terms.tsx      |  7 +++----
 src/Hooks/useConsentStatus.ts | 10 +++++-----
 src/styles/color-mode.scss    |  9 +++++++++
 src/styles/style.scss         |  3 +++
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/Components/Terms.tsx b/src/Components/Terms.tsx
index d835f28..d4d1caf 100644
--- a/src/Components/Terms.tsx
+++ b/src/Components/Terms.tsx
@@ -78,12 +78,11 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
             <Fragment key={key}>
               <div
                 className={`rounded-top d-flex align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap  ${
-                  isCustom ? 'py-2 py-lg-3 px-4' : 'p-2 p-lg-3 border-bottom bg-white'
+                  isCustom
+                    ? 'py-2 py-lg-3 px-4 header-consent-bg'
+                    : 'p-2 p-lg-3 border-bottom bg-white'
                 }`}
                 style={{
-                  ...(isCustom && {
-                    backgroundColor: '#F8F9FD',
-                  }),
                   ...(isCustom && {
                     borderBottom: '1px solid #DEDEDE',
                   }),
diff --git a/src/Hooks/useConsentStatus.ts b/src/Hooks/useConsentStatus.ts
index d9e1e3a..783a9dc 100644
--- a/src/Hooks/useConsentStatus.ts
+++ b/src/Hooks/useConsentStatus.ts
@@ -61,10 +61,10 @@ const useConsentStatus = (endpoint?: string, props?: WalletConnectionProps) => {
                 const revokeTier = !consent?.consent_uuid
                   ? ''
                   : consent?.web3id && consent?.address
-                  ? '4'
-                  : consent?.address && !consent?.web3id
-                  ? '3'
-                  : '2';
+                    ? '4'
+                    : consent?.address && !consent?.web3id
+                      ? '3'
+                      : '2';
                 revokeTier ? handleRevoke(true, revokeTier) : setShow(true);
               }
             }
@@ -139,7 +139,7 @@ const useConsentStatus = (endpoint?: string, props?: WalletConnectionProps) => {
       }
     };
     initConnector();
-  }, []);
+  }, [window['concordium']]);
 
   useEffect(() => {
     if (activeConnector) {
diff --git a/src/styles/color-mode.scss b/src/styles/color-mode.scss
index f98edb3..414240d 100644
--- a/src/styles/color-mode.scss
+++ b/src/styles/color-mode.scss
@@ -36,5 +36,14 @@
         color: $white;
       }
     }
+    .header-consent-bg {
+      background-color: var(--#{$prefix}light-bg-subtle);
+    }
+    .toast.custom .consent_info_tab .nav-item button.active {
+      color: $white;
+    }
+    .item_compliant {
+      background-color: #101529;
+    }
   }
 }
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 2c8ddfd..54f7009 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -407,6 +407,9 @@ $dark: #222328;
       opacity: 0;
     }
   }
+  .header-consent-bg {
+    background-color: #f8f9fd;
+  }
 }
 body.modal-open,
 body.modal-sso-open {

From 5e3992bd8ea1f5ac468cb66c260ddea2b65c518d Mon Sep 17 00:00:00 2001
From: Viet <viet@r-digital.tech>
Date: Wed, 10 Apr 2024 14:49:55 +0700
Subject: [PATCH 10/12] Fix prettier

---
 src/Hooks/useConsentStatus.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Hooks/useConsentStatus.ts b/src/Hooks/useConsentStatus.ts
index 783a9dc..59dec25 100644
--- a/src/Hooks/useConsentStatus.ts
+++ b/src/Hooks/useConsentStatus.ts
@@ -61,10 +61,10 @@ const useConsentStatus = (endpoint?: string, props?: WalletConnectionProps) => {
                 const revokeTier = !consent?.consent_uuid
                   ? ''
                   : consent?.web3id && consent?.address
-                    ? '4'
-                    : consent?.address && !consent?.web3id
-                      ? '3'
-                      : '2';
+                  ? '4'
+                  : consent?.address && !consent?.web3id
+                  ? '3'
+                  : '2';
                 revokeTier ? handleRevoke(true, revokeTier) : setShow(true);
               }
             }

From 2cb52a7e17d337e798dc6d18b2a815a82fac4c55 Mon Sep 17 00:00:00 2001
From: lamanhvu62 <103493256+lamanhvu62@users.noreply.github.com>
Date: Fri, 12 Apr 2024 11:23:18 +0700
Subject: [PATCH 11/12] fix pop-up style

---
 src/Components/Terms.tsx   | 21 ++++++++++-----------
 src/styles/color-mode.scss |  7 +++++--
 src/styles/style.scss      |  8 ++++----
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/Components/Terms.tsx b/src/Components/Terms.tsx
index d4d1caf..94763ae 100644
--- a/src/Components/Terms.tsx
+++ b/src/Components/Terms.tsx
@@ -77,11 +77,10 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
           term.level === level && (
             <Fragment key={key}>
               <div
-                className={`rounded-top d-flex align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap  ${
-                  isCustom
+                className={`rounded-top d-flex align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap  ${isCustom
                     ? 'py-2 py-lg-3 px-4 header-consent-bg'
                     : 'p-2 p-lg-3 border-bottom bg-white'
-                }`}
+                  }`}
                 style={{
                   ...(isCustom && {
                     borderBottom: '1px solid #DEDEDE',
@@ -115,7 +114,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                   )}
                 </div>
               </div>
-              <div className={`p-3 ${isCustom ? 'pt-0' : ''} bg-white`}>
+              <div className={`pb-3 ${isCustom ? 'pt-0' : ''} bg-white`}>
                 {isCustom ? (
                   <>
                     <Tabs
@@ -124,16 +123,16 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                       onSelect={(k) => setActiveTab(k)}
                       className="mb-2 mb-lg-3 w-100 flex-nowrap consent_info_tab"
                     >
-                      <Tab eventKey="consent" title="Consent" className="w-100">
+                      <Tab eventKey="consent" title="Consent" className="w-100 px-3">
                         <p className="mb-2 mb-lg-3">{t('txt_consent_to_data')}</p>
                         <div className="d-flex align-items-center flex-wrap">
                           <div className="me-10px">{t('txt_ethical_compliant')}</div>
                           <div className="d-flex align-items-center">
-                            <div className="item_compliant fw-semibold d-flex align-items-center text-dark">
+                            <div className="item_compliant fw-semibold d-flex align-items-center">
                               <img src={check_line} width={24} height={24} />
                               GDPR
                             </div>
-                            <div className="item_compliant fw-semibold d-flex align-items-center text-dark ms-10px">
+                            <div className="item_compliant fw-semibold d-flex align-items-center ms-10px">
                               <img src={check_line} width={24} height={24} />
                               CCPA
                             </div>
@@ -150,7 +149,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                           content_custom={t(term.content_custom)}
                         />
                       </Tab>
-                      <Tab eventKey="detail" title="Detail">
+                      <Tab eventKey="detail" title="Detail" className='px-3'>
                         <div className="about_section">
                           <div className="d-flex align-items-start">
                             <span>
@@ -228,7 +227,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                           />
                         </div>
                       </Tab>
-                      <Tab eventKey="about" title="About">
+                      <Tab eventKey="about" title="About" className='px-3'>
                         <div className="d-flex align-items-start">
                           <span>
                             <img src={check_circle} width={'14px'} height={'15px'} />
@@ -288,11 +287,11 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                         <div className="d-flex align-items-center mt-3 flex-wrap">
                           <div className="me-10px">{t('txt_ethical_compliant')}</div>
                           <div className="d-flex align-items-center">
-                            <div className="item_compliant fw-semibold d-flex align-items-center text-dark">
+                            <div className="item_compliant fw-semibold d-flex align-items-center">
                               <img src={check_line} width={24} height={24} />
                               GDPR
                             </div>
-                            <div className="item_compliant fw-semibold d-flex align-items-center text-dark ms-10px">
+                            <div className="item_compliant fw-semibold d-flex align-items-center ms-10px">
                               <img src={check_line} width={24} height={24} />
                               CCPA
                             </div>
diff --git a/src/styles/color-mode.scss b/src/styles/color-mode.scss
index 414240d..a2b25e0 100644
--- a/src/styles/color-mode.scss
+++ b/src/styles/color-mode.scss
@@ -18,7 +18,8 @@
       background-color: var(--#{$prefix}dark-bg-subtle);
     }
     .bg-white {
-      background-color: var(--#{$prefix}light-bg-subtle);
+      // background-color: #1B233F !important;
+      background-color: var(--#{$prefix}dark) !important;
     }
     .bg-light {
       background-color: var(--#{$prefix}light-bg-subtle);
@@ -41,9 +42,11 @@
     }
     .toast.custom .consent_info_tab .nav-item button.active {
       color: $white;
+      background-color: #1B233F;
     }
     .item_compliant {
-      background-color: #101529;
+      background-color: #F0F3FB;
+      color: #222328;
     }
   }
 }
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 54f7009..081e3c9 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -160,16 +160,16 @@ $dark: #222328;
       }
       .status-tier {
         &.tier-1 {
-          background-color: #c8192e;
+          background-color: #F1C40F;
         }
         &.tier-2 {
-          background-color: #e67e22;
+          background-color: #E67E22;
         }
         &.tier-3 {
-          background-color: #ffc700;
+          background-color: #9B59B6;
         }
         &.tier-4 {
-          background-color: #1c9678;
+          background-color: #C8192E;
         }
       }
     }

From e708e098097f79e7a75aa5b1b374ed929aaafee7 Mon Sep 17 00:00:00 2001
From: lamanhvu62 <103493256+lamanhvu62@users.noreply.github.com>
Date: Fri, 12 Apr 2024 11:27:14 +0700
Subject: [PATCH 12/12] fix format

---
 src/Components/Terms.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Components/Terms.tsx b/src/Components/Terms.tsx
index 94763ae..c9315bf 100644
--- a/src/Components/Terms.tsx
+++ b/src/Components/Terms.tsx
@@ -77,10 +77,11 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
           term.level === level && (
             <Fragment key={key}>
               <div
-                className={`rounded-top d-flex align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap  ${isCustom
+                className={`rounded-top d-flex align-items-center justify-content-between p-2 p-lg-3 fw-medium flex-wrap  ${
+                  isCustom
                     ? 'py-2 py-lg-3 px-4 header-consent-bg'
                     : 'p-2 p-lg-3 border-bottom bg-white'
-                  }`}
+                }`}
                 style={{
                   ...(isCustom && {
                     borderBottom: '1px solid #DEDEDE',
@@ -149,7 +150,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                           content_custom={t(term.content_custom)}
                         />
                       </Tab>
-                      <Tab eventKey="detail" title="Detail" className='px-3'>
+                      <Tab eventKey="detail" title="Detail" className="px-3">
                         <div className="about_section">
                           <div className="d-flex align-items-start">
                             <span>
@@ -227,7 +228,7 @@ const TermsComponent = ({ children, level, handleLevel, isCustom = false }: any)
                           />
                         </div>
                       </Tab>
-                      <Tab eventKey="about" title="About" className='px-3'>
+                      <Tab eventKey="about" title="About" className="px-3">
                         <div className="d-flex align-items-start">
                           <span>
                             <img src={check_circle} width={'14px'} height={'15px'} />