@arkyn/components 1.3.145 → 1.3.147

package/src/components/GoogleTagManager/googleTagManager.ts

@@ -0,0 +1,100 @@
+import { appendToDataLayer } from "./snippets/appendToDataLayer";
+import { generateGTMElements } from "./snippets/generateGTMElements";
+
+type InitializeDataLayerProps = {
+  dataLayerName: string;
+  dataLayer: Record<string, string>;
+};
+
+type InitializeGTMProps = {
+  id: string;
+  events: Record<string, string>;
+  dataLayer: Record<string, string>;
+  dataLayerName: string;
+  preview: string;
+  auth: string;
+};
+
+type InitializeProps = {
+  gtmId: string;
+  events: Record<string, string>;
+  dataLayer: Record<string, string>;
+  dataLayerName: string;
+  auth: string;
+  preview: string;
+};
+
+interface Window {
+  [key: string]: any;
+}
+
+declare var window: Window;
+
+class GoogleTagManager {
+  private initializeDataScript(dataLayer: string) {
+    const script = document.createElement("script");
+    script.innerHTML = dataLayer;
+    return script;
+  }
+
+  private initializeGTMElements(props: InitializeGTMProps) {
+    const snippets = generateGTMElements(props);
+
+    const noScript = () => {
+      const noscript = document.createElement("noscript");
+      noscript.innerHTML = snippets.iframe;
+      return noscript;
+    };
+
+    const script = () => {
+      const script = document.createElement("script");
+      script.innerHTML = snippets.script;
+      return script;
+    };
+
+    const dataScript = this.initializeDataScript(snippets.dataLayerVar);
+
+    return {
+      noScript,
+      script,
+      dataScript,
+    };
+  }
+
+  initializeDataLayer(props: InitializeDataLayerProps) {
+    const { dataLayer, dataLayerName } = props;
+
+    if (window[dataLayerName]) return window[dataLayerName].push(dataLayer);
+
+    const snippets = appendToDataLayer({ dataLayer, dataLayerName });
+    const dataScript = this.initializeDataScript(snippets);
+
+    document.head.insertBefore(dataScript, document.head.childNodes[0]);
+  }
+
+  initialize(props: InitializeProps) {
+    const {
+      events,
+      gtmId,
+      dataLayer,
+      auth = "",
+      preview = "",
+      dataLayerName = "dataLayer",
+    } = props;
+
+    const gtm = this.initializeGTMElements({
+      id: gtmId,
+      events: events,
+      dataLayer: dataLayer || undefined,
+      dataLayerName: dataLayerName,
+      auth,
+      preview,
+    });
+
+    if (dataLayer) document.head.appendChild(gtm.dataScript);
+    document.head.insertBefore(gtm.script(), document.head.childNodes[0]);
+    document.body.insertBefore(gtm.noScript(), document.body.childNodes[0]);
+  }
+}
+
+export { GoogleTagManager };

package/src/components/GoogleTagManager/index.tsx

@@ -0,0 +1,39 @@
+import { ClientOnly } from "../../components/ClientOnly";
+import { GoogleTagManagerClient } from "./GoogleTagManager.client";
+
+type GoogleTagManagerProps = {
+  gtmId: string;
+  events?: Record<string, string>;
+  dataLayer?: Record<string, string>;
+  dataLayerName?: string;
+  auth?: string;
+  preview?: string;
+};
+
+function GoogleTagManager(props: GoogleTagManagerProps) {
+  const {
+    gtmId,
+    auth = "",
+    preview = "",
+    dataLayerName = "dataLayer",
+    events = {},
+    dataLayer = {},
+  } = props;
+
+  return (
+    <ClientOnly>
+      {() => (
+        <GoogleTagManagerClient
+          auth={auth}
+          dataLayer={dataLayer}
+          dataLayerName={dataLayerName}
+          events={events}
+          gtmId={gtmId}
+          preview={preview}
+        />
+      )}
+    </ClientOnly>
+  );
+}
+
+export { GoogleTagManager };

package/src/components/GoogleTagManager/snippets/appendToDataLayer.ts

@@ -0,0 +1,14 @@
+type AppendToDataLayer = {
+  dataLayer: Record<string, string>;
+  dataLayerName: string;
+};
+
+function appendToDataLayer(props: AppendToDataLayer) {
+  const { dataLayer, dataLayerName } = props;
+
+  return `
+  window.${dataLayerName} = window.${dataLayerName} || [];
+  window.${dataLayerName}.push(${JSON.stringify(dataLayer)})`;
+}
+
+export { appendToDataLayer };

package/src/components/GoogleTagManager/snippets/generateGTMElements.ts

@@ -0,0 +1,43 @@
+import { appendToDataLayer } from "./appendToDataLayer";
+
+type GenerateGTMElementsProps = {
+  id: string;
+  events: Record<string, string>;
+  dataLayer: Record<string, string>;
+  dataLayerName: string;
+  preview: string;
+  auth: string;
+};
+
+function generateGTMElements(props: GenerateGTMElementsProps) {
+  const { id, events, dataLayer, dataLayerName, preview, auth } = props;
+
+  const gtmAuth = `&gtm_auth=${auth}`;
+  const gtmPreview = `&gtm_preview=${preview}`;
+
+  if (!id) console.warn("GTM Id is required");
+
+  const iframe = `
+    <iframe src="https://www.googletagmanager.com/ns.html?id=${id}${gtmAuth}${gtmPreview}&gtm_cookies_win=x"
+      height="0" width="0" style="display:none;visibility:hidden" id="tag-manager"></iframe>`;
+
+  const script = `
+    (function(w,d,s,l,i){w[l]=w[l]||[];
+      w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js', ${JSON.stringify(
+        events
+      ).slice(1, -1)}});
+      var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
+      j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+'${gtmAuth}${gtmPreview}&gtm_cookies_win=x';
+      f.parentNode.insertBefore(j,f);
+    })(window,document,'script','${dataLayerName}','${id}');`;
+
+  const dataLayerVar = appendToDataLayer({ dataLayer, dataLayerName });
+
+  return {
+    iframe,
+    script,
+    dataLayerVar,
+  };
+}
+
+export { generateGTMElements };

package/src/hooks/useHydrated.ts

@@ -0,0 +1,15 @@
+import { useSyncExternalStore } from "react";
+
+function subscribe() {
+  return () => {};
+}
+
+function useHydrated() {
+  return useSyncExternalStore(
+    subscribe,
+    () => true,
+    () => false
+  );
+}
+
+export { useHydrated };

package/src/index.ts

@@ -9,7 +9,6 @@ export {
 export { Badge } from "./components/Badge";
 export { Card } from "./components/Card";
 export { Divider } from "./components/Divider";
-export { GoogleMap } from "./components/GoogleMap";
 export { Skeleton } from "./components/Skeleton";
 export {
   TableBody,
@@ -49,6 +48,7 @@ export { Tooltip } from "./components/Tooltip";
 export { useAutomation } from "./hooks/useAutomation";
 export { useDrawer } from "./hooks/useDrawer";
 export { useFieldErrors } from "./hooks/useFieldErrors";
+export { useHydrated } from "./hooks/useHydrated";
 export { useModal } from "./hooks/useModal";
 export { useScopedParams } from "./hooks/useScopedParams";
 export { useToast } from "./hooks/useToast";
@@ -58,3 +58,8 @@ export { DrawerProvider } from "./provider/DrawerProvider";
 export { GoogleProvider } from "./provider/GoogleProvider";
 export { ModalProvider } from "./provider/ModalProvider";
 export { ToastProvider } from "./provider/ToastProvider";
+
+// Others
+export { ClientOnly } from "./components/ClientOnly";
+export { GoogleMap } from "./components/GoogleMap";
+export { GoogleTagManager } from "./components/GoogleTagManager";

package/src/provider/ToastProvider.tsx

@@ -7,9 +7,33 @@ function ToastProvider({ children }: ToastProviderProps) {
   function showToast(props: ToastProps) {
     switch (props.type) {
       case "success":
-        return toast.success(props.message);
+        return toast.success(props.message, {
+          style: {
+            background: "#10B981",
+            color: "#ffffff",
+            padding: "12px 16px",
+            fontSize: "14px",
+            fontWeight: 600,
+          },
+          iconTheme: {
+            primary: "#059669",
+            secondary: "#ffffff",
+          },
+        });
       case "danger":
-        return toast.error(props.message);
+        return toast.error(props.message, {
+          style: {
+            background: "#E11D48",
+            color: "#ffffff",
+            padding: "12px 16px",
+            fontSize: "14px",
+            fontWeight: 600,
+          },
+          iconTheme: {
+            primary: "#BE123C",
+            secondary: "#ffffff",
+          },
+        });
     }
   }