@phygitallabs/tapquest-core 6.7.8 → 6.7.10

package/package.json

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

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

@@ -0,0 +1,62 @@
+"use client";
+
+import { usePhygitalConsent } from "@phygitallabs/phygital-consent";
+import { useEffect } from "react";
+
+type GtagConsent = (
+  command: "consent",
+  action: "default" | "update",
+  params: Record<string, string>
+) => void;
+
+/** Consent Mode v2: block analytics and ad tags until user accepts. */
+const GTAG_CONSENT_DENIED = {
+  analytics_storage: "denied",
+  ad_storage: "denied",
+  ad_user_data: "denied",
+  ad_personalization: "denied",
+} as const;
+
+const GTAG_CONSENT_GRANTED_ANALYTICS = {
+  analytics_storage: "granted",
+} as const;
+
+/**
+ * Sets gtag/GTM consent default to denied on mount and updates to granted
+ * when user has accepted analytics (must be under PhygitalConsentProvider).
+ *
+ * When using GTM: add the script from getGtmConsentDefaultSnippet() in your
+ * HTML before the GTM container script (gtm.js) so consent is denied before
+ * any tags run. This component then pushes consent update when the user accepts.
+ * 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,92 +1,97 @@
+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>[];
-    }
+  interface Window {
+    dataLayer: unknown[];
+  }
 }
 
 declare function gtag(
-    command: "event",
-    eventName: string,
-    eventParameters: Record<string, any>
+  command: "event",
+  eventName: string,
+  eventParameters: Record<string, any>
 ): void;
 
-
 // GTM
 const pushEventToDataLayer = (event: string, data: Record<string, any>) => {
-    try {
-        window.dataLayer = window.dataLayer || [];
-
-        window.dataLayer.push({
-            event,
-            ...data,
-        });
-
-    } catch (error) {
-        console.error(error);
-    }
+  try {
+    window.dataLayer = window.dataLayer || [];
+
+    (window.dataLayer as Record<string, unknown>[]).push({
+      event,
+      ...data,
+    });
+  } catch (error) {
+    console.error(error);
+  }
 };
 
 // GA
 const pushEventToGA = (eventName: string, eventData: Record<string, any>) => {
-    if (typeof gtag != "function") {
-        console.error("gtag is not a function");
-        return;
-    }
-    gtag("event", eventName, eventData);
+  if (typeof gtag != "function") {
+    console.error("gtag is not a function");
+    return;
+  }
+  gtag("event", eventName, eventData);
 };
 
 // Posthog
 const pushEventToPosthog = (eventName: string, eventData: Record<string, any>) => {
-    posthog.capture(eventName, eventData);
+  posthog.capture(eventName, eventData);
 };
 
 function useDataTracking() {
-    const { setUserId, setMetadata } = useSessionReplay();
-
-    const trackEvent = (eventName: string, eventData: Record<string, any>, useTools?: ("gtm" | "ga" | "posthog")[]) => {
-        console.log("trackEvent ", eventName, eventData);
-        
-        useTools = useTools || ["gtm"];
-
-        if (useTools.includes("gtm") && typeof window !== "undefined") {
-            pushEventToDataLayer(eventName, eventData);
-        }
-        if (useTools.includes("ga") && typeof gtag == "function") {
-            pushEventToGA(eventName, eventData);
-        }
-        if (useTools.includes("posthog") && typeof posthog == "function") {
-            pushEventToPosthog(eventName, eventData);
-        }
-    };
-
-    const trackUserIdentify = (userInfo: Record<string, any>) => {
-        posthog.identify(userInfo.email, {
-            email: userInfo.email,
-            name: userInfo.name,
-            avatar: userInfo.avatar,
-            uid: userInfo.uid,
-          });
-
-        setUserId(userInfo.id);
-
-        setMetadata({
-            user_email: userInfo.email
-        })
-    }
+  const { setUserId, setMetadata } = useSessionReplay();
+  const consent = usePhygitalConsent();
+  const isAnalyticsAllowed =
+    (consent as { isAnalyticsAllowed?: boolean }).isAnalyticsAllowed ?? false;
 
-    const trackLogoutEvent = () => {
-        posthog.capture("user_signed_out");
-    }
+  const trackEvent = (
+    eventName: string,
+    eventData: Record<string, any>,
+    useTools?: ("gtm" | "ga" | "posthog")[]
+  ) => {
+    console.log("trackEvent ", eventName, eventData);
 
-    return {
-        trackEvent,
-        trackUserIdentify,
-        trackLogoutEvent
-    };
+    useTools = useTools || ["gtm"];
+
+    if (useTools.includes("gtm") && typeof window !== "undefined") {
+      pushEventToDataLayer(eventName, eventData);
+    }
+    if (useTools.includes("ga") && isAnalyticsAllowed && typeof gtag == "function") {
+      pushEventToGA(eventName, eventData);
+    }
+    if (useTools.includes("posthog") && typeof posthog == "function") {
+      pushEventToPosthog(eventName, eventData);
+    }
+  };
+
+  const trackUserIdentify = (userInfo: Record<string, any>) => {
+    posthog.identify(userInfo.email, {
+      email: userInfo.email,
+      name: userInfo.name,
+      avatar: userInfo.avatar,
+      uid: userInfo.uid,
+    });
+
+    setUserId(userInfo.id);
+
+    setMetadata({
+      user_email: userInfo.email,
+    });
+  };
+
+  const trackLogoutEvent = () => {
+    posthog.capture("user_signed_out");
+  };
+
+  return {
+    trackEvent,
+    trackUserIdentify,
+    trackLogoutEvent,
+  };
 }
 
 export { useDataTracking };
-

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

@@ -1 +1,2 @@
-export * from "./hooks";
+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";
@@ -20,142 +21,142 @@ import { tokenStorage } from "@phygitallabs/authentication";
 import axios from "axios";
 
 interface ServicesProviderProps {
-    children: React.ReactNode;
-    queryClient: QueryClient;
-    apiConfig: APIConfig;
-    firebaseConfig?: any;
+  children: React.ReactNode;
+  queryClient: QueryClient;
+  apiConfig: APIConfig;
+  firebaseConfig?: any;
 }
 
 export const ServicesProvider: React.FC<ServicesProviderProps> = ({
-    children,
-    queryClient,
-    apiConfig = {
-        environment: "dev",
-        version: "v1"
-    },
+  children,
+  queryClient,
+  apiConfig = {
+    environment: "dev",
+    version: "v1",
+  },
 }) => {
-    const { signOut, refreshToken } = useAuth();
-    const { environment, version } = apiConfig;
-    const [commonServiceConfig, setCommonServiceConfig] = useState<ServiceConfig | null>(null);
-
-    const [deviceUid, setDeviceUid] = useState<string>("");
-
-    useEffect(() => {
-        const initDeviceUid = async () => {
-            const deviceUid = await checkDeviceUid();
-            setDeviceUid(deviceUid);
-        }
-        initDeviceUid();
-    }, []);
-
-    // Init client
-    useEffect(() => {
-        const initClient = async () => {
-            try {
-                const deviceUid = await checkDeviceUid();
-
-                const responseInterceptors = ({
-                    onFulfilled: (response: any) => response,
-                    onRejected: async (error: any) => {
-                        const originalRequest = error.config;
-                        const token = tokenStorage.getAuthToken();
-
-                        if (error.response?.status === 401 && !originalRequest._retry) {
-                            const retryAttempts = parseInt(getFromLS(retryAttemptsRefreshToken) || "0", 10);
-                            if (retryAttempts >= httpMaxRetries) {
-                                await signOut();
-                                setToLS(retryAttemptsRefreshToken, 0);
-                                return Promise.reject(error);
-                            }
-
-                            setToLS(retryAttemptsRefreshToken, `${retryAttempts + 1}`);
-                            originalRequest._retry = true;
-
-                            if (token) {
-                                try {
-                                    const result = await refreshToken();
-                                    if (result?.data?.idToken) {
-                                        originalRequest.headers.Authorization = `Bearer ${result?.data?.idToken}`;
-                                        return axios(originalRequest);
-                                    }
-                                } catch (refreshError) {
-                                    console.error("Failed to refresh token:", refreshError);
-                                    await signOut();
-                                    return Promise.reject(refreshError);
-                                }
-                            }
-                        }
-                    }
-                })
-
-                const requestInterceptors = ({
-                    onFulfilled: (config: any) => config,
-                    onRejected: (error: any) => Promise.reject(error),
-                })
-
-                const axiosConfig = {
-                    headers: {
-                        "Content-Type": "application/json",
-                        "Device-UID": deviceUid,
-                    }
+  const { signOut, refreshToken } = useAuth();
+  const { environment, version } = apiConfig;
+  const [commonServiceConfig, setCommonServiceConfig] = useState<ServiceConfig | null>(null);
+
+  const [deviceUid, setDeviceUid] = useState<string>("");
+
+  useEffect(() => {
+    const initDeviceUid = async () => {
+      const deviceUid = await checkDeviceUid();
+      setDeviceUid(deviceUid);
+    };
+    initDeviceUid();
+  }, []);
+
+  // Init client
+  useEffect(() => {
+    const initClient = async () => {
+      try {
+        const deviceUid = await checkDeviceUid();
+
+        const responseInterceptors = {
+          onFulfilled: (response: any) => response,
+          onRejected: async (error: any) => {
+            const originalRequest = error.config;
+            const token = tokenStorage.getAuthToken();
+
+            if (error.response?.status === 401 && !originalRequest._retry) {
+              const retryAttempts = parseInt(getFromLS(retryAttemptsRefreshToken) || "0", 10);
+              if (retryAttempts >= httpMaxRetries) {
+                await signOut();
+                setToLS(retryAttemptsRefreshToken, 0);
+                return Promise.reject(error);
+              }
+
+              setToLS(retryAttemptsRefreshToken, `${retryAttempts + 1}`);
+              originalRequest._retry = true;
+
+              if (token) {
+                try {
+                  const result = await refreshToken();
+                  if (result?.data?.idToken) {
+                    originalRequest.headers.Authorization = `Bearer ${result?.data?.idToken}`;
+                    return axios(originalRequest);
+                  }
+                } catch (refreshError) {
+                  console.error("Failed to refresh token:", refreshError);
+                  await signOut();
+                  return Promise.reject(refreshError);
                 }
-
-                const config: ServiceConfig = {
-                    queryClient,
-                    axiosConfig,
-                    responseInterceptors,
-                    requestInterceptors,
-                    useDevTool: true,
-                };
-
-                setCommonServiceConfig(config);
-
-            } catch (error) {
-                console.error(error);
+              }
             }
-        }
-
-        initClient();
-    }, [queryClient]);
-
-    if (!commonServiceConfig) {
-        return <></>
-    }
-
-    return (
-        <PGLCoreServiceProvider
-            {...commonServiceConfig}
-            baseURL={`${serviceApiUrl[environment].API_BASE_URL}/${version}`}
-            baseCoreURL={`${serviceApiUrl[environment].API_BASE_CORE_URL}/${version}`}
+          },
+        };
+
+        const requestInterceptors = {
+          onFulfilled: (config: any) => config,
+          onRejected: (error: any) => Promise.reject(error),
+        };
+
+        const axiosConfig = {
+          headers: {
+            "Content-Type": "application/json",
+            "Device-UID": deviceUid,
+          },
+        };
+
+        const config: ServiceConfig = {
+          queryClient,
+          axiosConfig,
+          responseInterceptors,
+          requestInterceptors,
+          useDevTool: true,
+        };
+
+        setCommonServiceConfig(config);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    initClient();
+  }, [queryClient]);
+
+  if (!commonServiceConfig) {
+    return <></>;
+  }
+
+  return (
+    <PGLCoreServiceProvider
+      {...commonServiceConfig}
+      baseURL={`${serviceApiUrl[environment].API_BASE_URL}/${version}`}
+      baseCoreURL={`${serviceApiUrl[environment].API_BASE_CORE_URL}/${version}`}
+    >
+      <RewardServiceProvider
+        {...commonServiceConfig}
+        // baseURL={`${serviceApiUrl[environment].API_REWARD_URL}/${version}`}
+        baseURL={`${serviceApiUrl[environment].API_REWARD_URL}/v1`} // todo: using v1 until backend fully migrate
+      >
+        <AchievementServiceProvider
+          {...commonServiceConfig}
+          baseURL={`${serviceApiUrl[environment].API_ACHIEVEMENT_URL}/${version}`}
         >
-            <RewardServiceProvider
-                {...commonServiceConfig}
-                // baseURL={`${serviceApiUrl[environment].API_REWARD_URL}/${version}`}
-                baseURL={`${serviceApiUrl[environment].API_REWARD_URL}/v1`} // todo: using v1 until backend fully migrate
+          <GenerateCertificateServiceProvider
+            {...commonServiceConfig}
+            baseURL={`${serviceApiUrl[environment].API_GENERATE_CERTIFICATE_URL}/v1`}
+          >
+            <PhygitalConsentProvider
+              {...commonServiceConfig}
+              deviceId={deviceUid}
+              baseURL={`${serviceApiUrl[environment].API_CONSENT_URL}/v1`}
+              axiosConfig={{
+                headers: {
+                  "Content-Type": "application/json",
+                },
+              }}
             >
-                <AchievementServiceProvider
-                    {...commonServiceConfig}
-                    baseURL={`${serviceApiUrl[environment].API_ACHIEVEMENT_URL}/${version}`}
-                >
-                    <GenerateCertificateServiceProvider
-                        {...commonServiceConfig}
-                        baseURL={`${serviceApiUrl[environment].API_GENERATE_CERTIFICATE_URL}/v1`}
-                    >
-                        <PhygitalConsentProvider
-                            {...commonServiceConfig}
-                            deviceId={deviceUid}
-                            baseURL={`${serviceApiUrl[environment].API_CONSENT_URL}/v1`}
-                            axiosConfig={{
-                                headers: {
-                                    "Content-Type": "application/json",
-                                }
-                            }}
-                        >
-                            {children}
-                        </PhygitalConsentProvider>
-                    </GenerateCertificateServiceProvider>
-                </AchievementServiceProvider>
-            </RewardServiceProvider>
-        </PGLCoreServiceProvider>
-    );
-};
+              <GtagConsentSync />
+              {children}
+            </PhygitalConsentProvider>
+          </GenerateCertificateServiceProvider>
+        </AchievementServiceProvider>
+      </RewardServiceProvider>
+    </PGLCoreServiceProvider>
+  );
+};