aesirx-analytics 2.2.15 → 2.2.17

package/README.md

@@ -313,4 +313,146 @@ REACT_APP_CONSENT_LAYOUT=default
 add this environment variable to `.env`
 ```
 NEXT_PUBLIC_CONSENT_LAYOUT=default
+```
+
+## Opt-in Consent
+
+#### Usage in SSR site:
+```
+<script>
+   window.optInConsentData = `[
+      {
+        "title":"payment",
+        "content":"<div>YOUR_CONTENT_INPUT_HERE</div>"
+      }
+    ]`
+</script>
+```
+
+(We also provive option `replaceAnalyticsConsent` to replace Analytics Consent with Opt-in Consent)
+```
+<script>
+   window.optInConsentData = `[
+      {
+        "title":"payment",
+        "content":"<div>YOUR_CONTENT_INPUT_HERE</div>",
+        "replaceAnalyticsConsent": "true"
+      }
+    ]`
+</script>
+```
+
+#### In ReactJS:
+```
+const OptInConsent = React.lazy(
+  () => import('./OptInConsent').then(module => ({ default: module.OptInConsent }))
+);
+const ConsentComponent = () => {
+  const [showModal, setShowModal] = useState(false);
+  const handleOpen = () => {
+    setShowModal(true);
+  };
+   const handleConsent = () => {
+    setShowModal(false);
+  };
+  const handleReject = () => {
+    setShowModal(false);
+  };
+  return (
+    <>
+      <OptInConsent
+        optInConsentData={[
+          {
+            title: 'payment',
+            content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
+            show: showModal,
+            handleConsent: handleConsent,
+            handleReject: handleReject
+          },
+        ]}
+      />
+    </>
+  );
+};
+```
+(We also provive option `replaceAnalyticsConsent` to replace Analytics Consent with Opt-in Consent)
+To use this in ReactJS please add `isOptInReplaceAnalytics` to our provider first
+```
+<AnalyticsReact location={location} history={history} isOptInReplaceAnalytics={true}>
+  {children}
+</AnalyticsReact>
+```
+```
+<OptInConsent
+  optInConsentData={[
+    {
+      title: 'payment',
+      content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
+      show: showModal,
+      handleConsent: handleConsent,
+      handleReject: handleReject,
+      replaceAnalyticsConsent: "true"
+    },
+  ]}
+/>
+```
+#### In NextJS:
+```
+import dynamic from "next/dynamic";
+const OptInConsent = dynamic(
+  () => import("aesirx-analytics").then((module) => module.OptInConsent),
+  {
+    loading: () => <div>Loading...</div>,
+    ssr: false,
+  }
+);
+
+const ConsentComponent = () => {
+  const [showModal, setShowModal] = useState(false);
+  const handleOpen = () => {
+    setShowModal(true);
+  };
+  const handleConsent = () => {
+    setShowModal(false);
+  };
+  const handleReject = () => {
+    setShowModal(false);
+  };
+  return (
+    <>
+      <OptInConsent
+        optInConsentData={[
+          {
+            title: 'payment',
+            content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
+            show: showModal,
+            handleConsent: handleConsent,
+            handleReject: handleReject
+          },
+        ]}
+      />
+    </>
+  );
+};
+```
+(We also provive option `replaceAnalyticsConsent` to replace Analytics Consent with Opt-in Consent)
+To use this in NextJS please add `isOptInReplaceAnalytics` to our provider first
+```
+<AnalyticsNext router={useRouter()} isOptInReplaceAnalytics={true}>
+  <[YOUR-COMPONENT]/>
+</AnalyticsNext>
+```
+```
+<OptInConsent
+  optInConsentData={[
+    {
+      title: 'payment',
+      content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
+      show: showModal,
+      handleConsent: handleConsent,
+      handleReject: handleReject,
+      replaceAnalyticsConsent: "true"
+    },
+  ]}
+/>
 ```

package/dist/{Consent-7KAMDZ4V.js → Consent-LAJMH5O6.js}

@@ -6,9 +6,8 @@ import {
   TermsComponent,
   WALLET_CONNECT,
   getWeb3ID,
-  no_default,
   useConsentStatus_default
-} from "./chunk-YM52A2TI.js";
+} from "./chunk-PGOKXH35.js";
 import {
   AnalyticsContext,
   agreeConsents,
@@ -20,11 +19,12 @@ import {
   getWalletNonce,
   loadGtagScript,
   loadGtmScript,
+  no_default,
   privacy_default,
   revokeConsents,
   useTranslation,
   verifySignature
-} from "./chunk-SBBLINO2.js";
+} from "./chunk-P35CM6LS.js";
 
 // src/Components/Consent.tsx
 import React, { Suspense, useContext, useEffect, useState } from "react";
@@ -161,7 +161,7 @@ var ConsentComponentApp = (props) => {
         const nonce = await getNonce(
           endpoint,
           address,
-          "Give consent Tier 4:{nonce} {domain} {time}",
+          "Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}",
           "metamask"
         );
         signMessage({ message: `${nonce}` });
@@ -254,7 +254,7 @@ var ConsentComponentApp = (props) => {
             endpoint,
             account,
             connection,
-            level === 3 ? "Give consent:{nonce} {domain} {time}" : "Give consent Tier 4:{nonce} {domain} {time}"
+            level === 3 ? "Decentralized Consent:{nonce} {domain} {time}" : "Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}"
           );
           setLoading("saving");
           await agreeConsents(
@@ -277,7 +277,7 @@ var ConsentComponentApp = (props) => {
             const nonce = await getNonce(
               endpoint,
               address,
-              level === 3 ? "Give consent:{nonce} {domain} {time}" : "Give consent Tier 4:{nonce} {domain} {time}",
+              level === 3 ? "Decentralized Consent:{nonce} {domain} {time}" : "Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}",
               "metamask"
             );
             signMessage({ message: `${nonce}` });
@@ -368,7 +368,7 @@ var ConsentComponentApp = (props) => {
           endpoint,
           account,
           connection,
-          "Give consent Tier 4:{nonce} {domain} {time}"
+          "Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}"
         );
         await agreeConsents(
           endpoint,
@@ -392,7 +392,7 @@ var ConsentComponentApp = (props) => {
         const nonce = await getNonce(
           endpoint,
           address,
-          "Give consent Tier 4:{nonce} {domain} {time}",
+          "Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}",
           "metamask"
         );
         signMessage({ message: `${nonce}` });

package/dist/{ConsentCustom-BWBSRP5V.js → ConsentCustom-FMWN7JO6.js}

@@ -10,9 +10,8 @@ import {
   WALLET_CONNECT,
   check_circle_default,
   getWeb3ID,
-  no_default,
   useConsentStatus_default
-} from "./chunk-YM52A2TI.js";
+} from "./chunk-PGOKXH35.js";
 import {
   AnalyticsContext,
   agreeConsents,
@@ -24,11 +23,12 @@ import {
   getWalletNonce,
   loadGtagScript,
   loadGtmScript,
+  no_default,
   privacy_default,
   revokeConsents,
   useTranslation,
   verifySignature
-} from "./chunk-SBBLINO2.js";
+} from "./chunk-P35CM6LS.js";
 
 // src/Components/ConsentCustom.tsx
 import React, { Suspense, useContext, useEffect, useState } from "react";
@@ -71,9 +71,10 @@ var ConsentComponentCustom = ({
   isLoggedApp,
   gtagId,
   gtmId,
-  layout
+  layout,
+  isOptInReplaceAnalytics
 }) => {
-  return /* @__PURE__ */ React.createElement(WithWalletConnector, { network: networkEnv === "testnet" ? TESTNET : MAINNET }, (props) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isOptInReplaceAnalytics ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(WithWalletConnector, { network: networkEnv === "testnet" ? TESTNET : MAINNET }, (props) => /* @__PURE__ */ React.createElement(
     ConsentComponentCustomWrapper,
     {
       ...props,
@@ -85,7 +86,7 @@ var ConsentComponentCustom = ({
       gtmId,
       layout
     }
-  ));
+  ))) : /* @__PURE__ */ React.createElement(React.Fragment, null));
 };
 var ConsentComponentCustomWrapper = (props) => {
   const [
@@ -215,7 +216,7 @@ var ConsentComponentCustomApp = (props) => {
         const nonce = await getNonce(
           endpoint,
           address,
-          "Give consent Tier 4:{nonce} {domain} {time}",
+          "Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}",
           "metamask"
         );
         signMessage({ message: `${nonce}` });
@@ -308,7 +309,7 @@ var ConsentComponentCustomApp = (props) => {
             endpoint,
             account,
             connection,
-            level === 3 ? "Give consent:{nonce} {domain} {time}" : "Give consent Tier 4:{nonce} {domain} {time}"
+            level === 3 ? "Decentralized Consent:{nonce} {domain} {time}" : "Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}"
           );
           setLoading("saving");
           await agreeConsents(
@@ -332,7 +333,7 @@ var ConsentComponentCustomApp = (props) => {
             const nonce = await getNonce(
               endpoint,
               address,
-              level === 3 ? "Give consent:{nonce} {domain} {time}" : "Give consent Tier 4:{nonce} {domain} {time}",
+              level === 3 ? "Decentralized Consent:{nonce} {domain} {time}" : "Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}",
               "metamask"
             );
             signMessage({ message: `${nonce}` });
@@ -425,7 +426,7 @@ var ConsentComponentCustomApp = (props) => {
           endpoint,
           account,
           connection,
-          "Give consent Tier 4:{nonce} {domain} {time}"
+          "Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}"
         );
         await agreeConsents(
           endpoint,
@@ -450,7 +451,7 @@ var ConsentComponentCustomApp = (props) => {
         const nonce = await getNonce(
           endpoint,
           address,
-          "Give consent Tier 4:{nonce} {domain} {time}",
+          "Decentralized Consent + Shield of Privacy:{nonce} {domain} {time}",
           "metamask"
         );
         signMessage({ message: `${nonce}` });
@@ -510,17 +511,17 @@ var ConsentComponentCustomApp = (props) => {
       toast.error(error?.response?.data?.error ?? error.message);
     }
   };
-  const handleNotAllow = () => {
+  const handleNotAllow = async () => {
     sessionStorage.setItem("aesirx-analytics-uuid", uuid);
-    sessionStorage.setItem("aesirx-analytics-rejected", "true");
     setShowExpandConsent(false);
     setShowBackdrop(false);
     const hostUrl = endpoint ? endpoint : "";
     const root = hostUrl ? hostUrl.replace(/\/$/, "") : "";
-    trackEvent(root, "", {
+    await trackEvent(root, "", {
       event_name: "Reject consent",
       event_type: "reject-consent"
     });
+    sessionStorage.setItem("aesirx-analytics-rejected", "true");
     window.funcAfterReject && window.funcAfterReject();
   };
   const handleRevokeBtn = async () => {
@@ -692,9 +693,8 @@ var ConsentComponentCustomApp = (props) => {
       gtag("set", "ads_data_redaction", true);
     }
   };
-  const paymentRevoke = sessionStorage.getItem("aesirx-analytics-payment");
-  const advisorRevoke = sessionStorage.getItem("aesirx-analytics-advisor");
-  console.log("loading", loading);
+  const paymentRevoke = sessionStorage.getItem("aesirx-analytics-opt-payment");
+  const optInRevokes = Object.keys(sessionStorage).filter((key) => key.startsWith("aesirx-analytics-optin")).map((key) => key);
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ToastContainer, null), /* @__PURE__ */ React.createElement("div", { className: `offcanvas-backdrop fade ${showBackdrop && show ? "show" : "d-none"}` }), /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -767,31 +767,7 @@ var ConsentComponentCustomApp = (props) => {
             }
           },
           /* @__PURE__ */ React.createElement("img", { src: no_default })
-        ), /* @__PURE__ */ React.createElement("div", { className: "p-3 bg-white" }, paymentRevoke ? t("txt_you_can_revoke_on_the_site") : t("txt_you_can_revoke")), /* @__PURE__ */ React.createElement(Form, { className: "mb-0 w-100 bg-white px-3" }, paymentRevoke ? /* @__PURE__ */ React.createElement(
-          Form.Check,
-          {
-            id: `option-revoke-payment`,
-            checked: revokeConsentOption === "payment",
-            type: "checkbox",
-            label: t("txt_revoke_opt_in"),
-            value: "payment",
-            onChange: ({ target: { value } }) => {
-              setRevokeConsentOption(value);
-            }
-          }
-        ) : /* @__PURE__ */ React.createElement(React.Fragment, null), advisorRevoke ? /* @__PURE__ */ React.createElement(
-          Form.Check,
-          {
-            id: `option-revoke-advisor`,
-            checked: revokeConsentOption === "advisor",
-            type: "checkbox",
-            label: t("txt_revoke_opt_in_advisor"),
-            value: "advisor",
-            onChange: ({ target: { value } }) => {
-              setRevokeConsentOption(value);
-            }
-          }
-        ) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement(
+        ), /* @__PURE__ */ React.createElement("div", { className: "p-3 bg-white" }, paymentRevoke ? t("txt_you_can_revoke_on_the_site") : t("txt_you_can_revoke")), /* @__PURE__ */ React.createElement(Form, { className: "mb-0 w-100 bg-white px-3" }, /* @__PURE__ */ React.createElement(
           Form.Check,
           {
             id: `option-revoke-consent`,
@@ -803,7 +779,22 @@ var ConsentComponentCustomApp = (props) => {
               setRevokeConsentOption(value);
             }
           }
-        )), /* @__PURE__ */ React.createElement("div", { className: "rounded-bottom position-relative overflow-hidden bg-white" }, /* @__PURE__ */ React.createElement("div", { className: "position-relative p-3" }, /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-center flex-wrap" }, /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-center w-100 justify-content-end" }, /* @__PURE__ */ React.createElement(
+        ), optInRevokes?.map((item, key) => {
+          return /* @__PURE__ */ React.createElement(
+            Form.Check,
+            {
+              key,
+              id: `option-revoke-${item}`,
+              checked: revokeConsentOption === item,
+              type: "checkbox",
+              label: item === "aesirx-analytics-optin-default" ? t("txt_revoke_opt_in") : item === "aesirx-analytics-optin-payment" ? t("txt_revoke_opt_in_payment") : item === "aesirx-analytics-optin-advisor" ? t("txt_revoke_opt_in_advisor") : t("txt_revoke_opt_in") + " " + item?.replace("aesirx-analytics-optin-", ""),
+              value: item,
+              onChange: ({ target: { value } }) => {
+                setRevokeConsentOption(value);
+              }
+            }
+          );
+        })), /* @__PURE__ */ React.createElement("div", { className: "rounded-bottom position-relative overflow-hidden bg-white" }, /* @__PURE__ */ React.createElement("div", { className: "position-relative p-3" }, /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-center flex-wrap" }, /* @__PURE__ */ React.createElement("div", { className: "d-flex align-items-center w-100 justify-content-end" }, /* @__PURE__ */ React.createElement(
           "a",
           {
             className: "manage-consent fs-14 btn btn-outline-success rounded-pill py-2 py-lg-3 d-flex align-items-center justify-content-center w-100 w-lg-35",
@@ -817,27 +808,20 @@ var ConsentComponentCustomApp = (props) => {
           {
             variant: "outline-success",
             onClick: async () => {
-              if (revokeConsentOption === "payment") {
-                sessionStorage.removeItem("aesirx-analytics-payment");
-                setShowExpandRevoke(false);
-                setRevokeConsentOption("consent");
-                setTimeout(() => {
-                  window.location.reload();
-                }, 1e3);
-              } else if (revokeConsentOption === "advisor") {
-                sessionStorage.removeItem("aesirx-analytics-advisor");
-                setShowExpandRevoke(false);
-                setRevokeConsentOption("consent");
-                setTimeout(() => {
-                  window.location.reload();
-                }, 1e3);
-              } else {
+              if (revokeConsentOption === "consent") {
                 await handleRevokeBtn();
                 if (level > 1) {
                   setTimeout(() => {
                     window.location.reload();
                   }, 1e3);
                 }
+              } else {
+                sessionStorage.removeItem(revokeConsentOption);
+                setShowExpandRevoke(false);
+                setRevokeConsentOption("consent");
+                setTimeout(() => {
+                  window.location.reload();
+                }, 1e3);
               }
             },
             className: "d-flex align-items-center justify-content-center w-100 w-lg-35 revoke-btn fs-14 rounded-pill py-2 py-lg-3"