Provides a custom component to a BOS Custom cookie prompt to replace the iubenda plugin

src/components/vm/VmInitializer.tsx

@@ -36,7 +36,7 @@ import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import { useAuthStore } from '@/stores/auth';
 import { useIdosStore } from '@/stores/idosStore';
 import { useVmStore } from '@/stores/vm';
-import { recordHandledError, recordWalletConnect, reset as resetAnalytics } from '@/utils/analytics';
+import { optOut, recordHandledError, recordWalletConnect, reset as resetAnalytics } from '@/utils/analytics';
 import {
   commitModalBypassAuthorIds,
   commitModalBypassSources,
@@ -120,6 +120,11 @@ export default function VmInitializer() {
 
             return <Link {...cleanProps} />;
           },
+          AnalyticsCookieConsent: ({ all, onlyRequired }: { all: boolean; onlyRequired: boolean }) => {
+            localStorage.setItem('cookiesAcknowledged', all ? 'all' : ' only_required');
+            optOut();
+            return <></>;
+          },
         },
         features: {
           commitModalBypass: {

src/data/bos-components.ts

@@ -15,6 +15,7 @@ type NetworkComponents = {
   };
   image: string;
   nearOrg: {
+    cookiePrompt: string;
     cookiePolicy: string;
     ecosystemPage: string;
     ecosystemCommunityPage: string;
@@ -82,6 +83,7 @@ export const componentsByNetworkId = ((): Record<NetworkId, NetworkComponents |
       },
       image: 'eugenethedream/widget/Image',
       nearOrg: {
+        cookiePrompt: `${testnetTLA}/widget/NearOrg.CookiePrompt`,
         cookiePolicy: `${testnetTLA}/widget/NearOrg.CookiePolicy`,
         ecosystemPage: `${testnetTLA}/widget/NearOrg.EcosystemPage`,
         ecosystemCommunityPage: `${testnetTLA}/widget/NearOrg.Ecosystem.CommunityPage`,
@@ -142,6 +144,7 @@ export const componentsByNetworkId = ((): Record<NetworkId, NetworkComponents |
       },
       image: 'mob.near/widget/Image',
       nearOrg: {
+        cookiePrompt: 'near/widget/NearOrg.CookiePrompt',
         cookiePolicy: 'near/widget/NearOrg.CookiePolicy',
         ecosystemPage: 'near/widget/NearOrg.EcosystemPage',
         ecosystemCommunityPage: 'near/widget/NearOrg.Ecosystem.CommunityPage',

src/hooks/useCookiePreferences.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+
+export function useCookiePreferences() {
+  const [cookieData, setCookieData] = useState<boolean>();
+  useEffect(() => {
+    const cookiesAcknowledged = !!localStorage.getItem('cookiesAcknowledged') || false;
+    setCookieData(cookiesAcknowledged);
+  }, []);
+
+  return cookieData;
+}

src/pages/[...arbitrary].tsx

@@ -51,7 +51,10 @@ import type { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'ne
 
 import { useClearCurrentComponent } from '@/hooks/useClearCurrentComponent';
 import { useDefaultLayout } from '@/hooks/useLayout';
+import { useCookiePreferences } from '@/hooks/useCookiePreferences';
+import { useBosComponents } from '@/hooks/useBosComponents';
 import type { NextPageWithLayout } from '@/utils/types';
+import { VmComponent } from '@/components/vm/VmComponent';
 
 export const getStaticPaths: GetStaticPaths = async () => {
   return {
@@ -105,8 +108,14 @@ export const getStaticProps: GetStaticProps<StaticProps> = async (context) => {
 
 const IframePage: NextPageWithLayout = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
   useClearCurrentComponent();
-
-  return <IframeResizer src={props.url} style={{ width: '1px', minWidth: '100%' }} checkOrigin={false} />;
+  const cookieData = useCookiePreferences();
+  const components = useBosComponents();
+  return (
+    <>
+      <IframeResizer src={props.url} style={{ width: '1px', minWidth: '100%' }} checkOrigin={false} />
+      <VmComponent src={components.nearOrg.cookiePrompt} props={{ cookiesAcknowleged: cookieData }} />
+    </>
+  );
 };
 
 IframePage.getLayout = useDefaultLayout;

src/pages/[componentAccountId]/widget/[componentName].tsx

@@ -8,6 +8,7 @@ import { MetaTags } from '@/components/MetaTags';
 import { VmComponent } from '@/components/vm/VmComponent';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useDefaultLayout } from '@/hooks/useLayout';
+import { useCookiePreferences } from '@/hooks/useCookiePreferences';
 import { useAuthStore } from '@/stores/auth';
 import { useCurrentComponentStore } from '@/stores/current-component';
 import { privacyDomainName, termsDomainName } from '@/utils/config';
@@ -106,6 +107,7 @@ const ViewComponentPage: NextPageWithLayout = () => {
   const [componentProps, setComponentProps] = useState<Record<string, unknown>>({});
   const authStore = useAuthStore();
   const components = useBosComponents();
+  const cookieData = useCookiePreferences();
 
   useEffect(() => {
     setComponentSrc(componentSrc);
@@ -137,6 +139,7 @@ const ViewComponentPage: NextPageWithLayout = () => {
                 privacyDomainName,
               }}
             />
+            <VmComponent src={components.nearOrg.cookiePrompt} props={{ cookiesAcknowleged: cookieData }} />
           </div>
         </div>
       </div>

src/pages/_app.tsx

@@ -15,13 +15,16 @@ import { useEffect } from 'react';
 import { Toaster } from '@/components/lib/Toast';
 import { useBosLoaderInitializer } from '@/hooks/useBosLoaderInitializer';
 import { useClickTracking } from '@/hooks/useClickTracking';
+import { useCookiePreferences } from '@/hooks/useCookiePreferences';
+import { useBosComponents } from '@/hooks/useBosComponents';
 import { useHashUrlBackwardsCompatibility } from '@/hooks/useHashUrlBackwardsCompatibility';
 import { usePageAnalytics } from '@/hooks/usePageAnalytics';
 import { useAuthStore } from '@/stores/auth';
 import { init as initializeAnalytics } from '@/utils/analytics';
 import { setNotificationsLocalStorage } from '@/utils/notificationsLocalStorage';
 import type { NextPageWithLayout } from '@/utils/types';
 import { styleZendesk } from '@/utils/zendesk';
+import { VmComponent } from '@/components/vm/VmComponent';
 
 const VmInitializer = dynamic(() => import('../components/vm/VmInitializer'), {
   ssr: false,
@@ -41,6 +44,8 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
   const signedIn = useAuthStore((store) => store.signedIn);
   const accountId = useAuthStore((store) => store.accountId);
   const componentSrc = router.query;
+  const cookieData = useCookiePreferences();
+  const components = useBosComponents();
 
   useEffect(() => {
     // this check is needed to init localStorage for notifications after user signs in
@@ -138,6 +143,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
 
       <Toaster />
 
+      <VmComponent src={components.nearOrg.cookiePrompt} props={{ cookiesAcknowleged: cookieData }} />
       <div
         id="idos_container"
         style={

src/utils/analytics.ts

@@ -12,6 +12,7 @@ let userAgentDetail = '';
 let hashId = '';
 let anonymousUserIdCreatedAt = '';
 let pendingEvents: any = [];
+let cookieOptOut = false;
 
 declare global {
   interface Window {
@@ -57,6 +58,10 @@ function getUserAgent() {
   return userAgentDetail;
 }
 
+export function optOut() {
+  cookieOptOut = true;
+}
+
 export async function init() {
   getUserAgent();
 
@@ -97,6 +102,7 @@ function filterURL(url: string) {
 }
 
 export function recordPageView(pageName: string) {
+  if (cookieOptOut) return;
   if (!rudderAnalytics) {
     pendingEvents.push(() => {
       recordPageView(pageName);
@@ -129,14 +135,15 @@ export const recordMouseEnter = (e: UIEvent) => record('mouseover', e);
 export const recordTouchStart = (e: UIEvent | PointerEvent) => record('touchstart', e);
 
 export function recordWalletConnect(accountId: string) {
+  if (cookieOptOut) return;
   if (!localStorage.getItem('hashId')) {
     setAccountIdHash(accountId);
     recordEvent('wallet-connected');
   }
 }
 
 export function reset() {
-  if (!rudderAnalytics) return;
+  if (!rudderAnalytics || cookieOptOut) return;
   try {
     recordEvent('wallet-logout');
     localStorage.removeItem('hashId');
@@ -149,7 +156,7 @@ export function reset() {
 }
 
 export function recordEventWithProps(eventLabel: string, properties: Record<string, string>) {
-  if (!rudderAnalytics) return;
+  if (!rudderAnalytics || cookieOptOut) return;
   try {
     rudderAnalytics.track(eventLabel, {
       ...properties,
@@ -167,7 +174,7 @@ export function recordHandledError(props: Record<string, string>) {
 }
 
 export function recordEvent(eventLabel: string) {
-  if (!rudderAnalytics) return;
+  if (!rudderAnalytics || cookieOptOut) return;
   try {
     rudderAnalytics.track(eventLabel, {
       hashId: localStorage.getItem('hashId'),

src/utils/types.ts

@@ -33,7 +33,6 @@ type ProductionNetwork = {
 };
 
 export interface TosData {
-  showTos: boolean;
   agreementsForUser: UserTosAgreement[];
   latestTosVersion: number;
 }