@phygitallabs/tapquest-core 6.7.7 → 6.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phygitallabs/tapquest-core",
-  "version": "6.7.7",
+  "version": "6.7.9",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/modules/data-tracking/GtagConsentSync.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { usePhygitalConsent } from "@phygitallabs/phygital-consent";
+import { useEffect } from "react";
+
+type GtagConsent = (
+  command: "consent",
+  action: "default" | "update",
+  params: Record<string, string>
+) => void;
+
+const GTAG_CONSENT_DENIED = {
+  analytics_storage: "denied",
+  ad_storage: "denied",
+} as const;
+
+const GTAG_CONSENT_GRANTED_ANALYTICS = {
+  analytics_storage: "granted",
+} as const;
+
+/**
+ * Sets gtag consent default to denied on mount and updates to granted
+ * when user has accepted analytics (must be under PhygitalConsentProvider).
+ * Renders nothing.
+ */
+export function GtagConsentSync() {
+  const consent = usePhygitalConsent();
+  const isAnalyticsAllowed = (consent as { isAnalyticsAllowed?: boolean }).isAnalyticsAllowed ?? false;
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const w = window as Window & { dataLayer?: unknown[]; gtag?: GtagConsent };
+    w.dataLayer = w.dataLayer || [];
+    const gtag = w.gtag;
+    if (typeof gtag === "function") {
+      gtag("consent", "default", { ...GTAG_CONSENT_DENIED });
+    } else {
+      w.dataLayer.push(["consent", "default", { ...GTAG_CONSENT_DENIED }]);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isAnalyticsAllowed || typeof window === "undefined") return;
+    const w = window as Window & { gtag?: GtagConsent; dataLayer?: unknown[] };
+    const gtag = w.gtag;
+    if (typeof gtag === "function") {
+      gtag("consent", "update", { ...GTAG_CONSENT_GRANTED_ANALYTICS });
+    } else if (Array.isArray(w.dataLayer)) {
+      w.dataLayer.push(["consent", "update", { ...GTAG_CONSENT_GRANTED_ANALYTICS }]);
+    }
+  }, [isAnalyticsAllowed]);
+
+  return null;
+}

package/src/modules/data-tracking/hooks/index.ts

@@ -1,9 +1,10 @@
+import { usePhygitalConsent } from "@phygitallabs/phygital-consent";
 import posthog from "posthog-js";
 import { useSessionReplay } from "../../../modules/session-replay";
 
 declare global {
     interface Window {
-        dataLayer: Record<string, any>[];
+        dataLayer: unknown[];
     }
 }
 
@@ -19,7 +20,7 @@ const pushEventToDataLayer = (event: string, data: Record<string, any>) => {
     try {
         window.dataLayer = window.dataLayer || [];
 
-        window.dataLayer.push({
+        (window.dataLayer as Record<string, unknown>[]).push({
             event,
             ...data,
         });
@@ -45,6 +46,8 @@ const pushEventToPosthog = (eventName: string, eventData: Record<string, any>) =
 
 function useDataTracking() {
     const { setUserId, setMetadata } = useSessionReplay();
+    const consent = usePhygitalConsent();
+    const isAnalyticsAllowed = (consent as { isAnalyticsAllowed?: boolean }).isAnalyticsAllowed ?? false;
 
     const trackEvent = (eventName: string, eventData: Record<string, any>, useTools?: ("gtm" | "ga" | "posthog")[]) => {
         console.log("trackEvent ", eventName, eventData);
@@ -54,7 +57,7 @@ function useDataTracking() {
         if (useTools.includes("gtm") && typeof window !== "undefined") {
             pushEventToDataLayer(eventName, eventData);
         }
-        if (useTools.includes("ga") && typeof gtag == "function") {
+        if (useTools.includes("ga") && isAnalyticsAllowed && typeof gtag == "function") {
             pushEventToGA(eventName, eventData);
         }
         if (useTools.includes("posthog") && typeof posthog == "function") {

package/src/modules/data-tracking/index.ts

@@ -1 +1,2 @@
+export * from "./GtagConsentSync";
 export * from "./hooks";

package/src/providers/ServicesProvider.tsx

@@ -5,6 +5,7 @@ import { RewardServiceProvider } from "@phygitallabs/reward";
 import { AchievementServiceProvider } from "@phygitallabs/achievement";
 import { GenerateCertificateServiceProvider } from "@phygitallabs/generate-certificate";
 import { PhygitalConsentProvider } from "@phygitallabs/phygital-consent";
+import { GtagConsentSync } from "../modules/data-tracking";
 
 import serviceApiUrl from "../constants/service";
 import { APIConfig, ServiceConfig } from "../types/service";
@@ -37,7 +38,7 @@ export const ServicesProvider: React.FC<ServicesProviderProps> = ({
     const { signOut, refreshToken } = useAuth();
     const { environment, version } = apiConfig;
     const [commonServiceConfig, setCommonServiceConfig] = useState<ServiceConfig | null>(null);
-    
+
     const [deviceUid, setDeviceUid] = useState<string>("");
 
     useEffect(() => {
@@ -142,14 +143,16 @@ export const ServicesProvider: React.FC<ServicesProviderProps> = ({
                         baseURL={`${serviceApiUrl[environment].API_GENERATE_CERTIFICATE_URL}/v1`}
                     >
                         <PhygitalConsentProvider
+                            {...commonServiceConfig}
                             deviceId={deviceUid}
-                            queryClient={commonServiceConfig.queryClient as any}
-                            axiosConfig={commonServiceConfig.axiosConfig}
-                            requestInterceptors={commonServiceConfig.requestInterceptors}
-                            responseInterceptors={commonServiceConfig.responseInterceptors}
                             baseURL={`${serviceApiUrl[environment].API_CONSENT_URL}/v1`}
-
+                            axiosConfig={{
+                                headers: {
+                                    "Content-Type": "application/json",
+                                }
+                            }}
                         >
+                            <GtagConsentSync />
                             {children}
                         </PhygitalConsentProvider>
                     </GenerateCertificateServiceProvider>