@mission-studio/puck 1.0.0 → 1.0.2

package/dist/{chunk-ZZF2BIMW.mjs → chunk-RVOG4KFI.mjs}

@@ -158,6 +158,75 @@ function Paragraph({
   return /* @__PURE__ */ jsx2("p", { id, style, children: resolvedText });
 }
 
+// hooks/useGtmEvent.ts
+function useGtmEvent() {
+  return (eventName, data) => {
+    if (typeof window === "undefined") return;
+    if (typeof window.gtag !== "function") {
+      console.warn("GTM not initialized. Make sure @next/third-parties/google GoogleTagManager is added to your layout.");
+      return;
+    }
+    const eventData = {
+      event: eventName,
+      ...data && { value: data }
+    };
+    window.gtag("event", eventName, data || {});
+  };
+}
+
+// hooks/useUtmParams.ts
+import { useEffect, useState } from "react";
+function useUtmParams() {
+  const [utmParams, setUtmParams] = useState({});
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const urlParams = new URLSearchParams(window.location.search);
+    const source = urlParams.get("utm_source");
+    const medium = urlParams.get("utm_medium");
+    const campaign = urlParams.get("utm_campaign");
+    const content = urlParams.get("utm_content");
+    const term = urlParams.get("utm_term");
+    const params = {};
+    if (source) {
+      params.source = source;
+      sessionStorage.setItem("utm_source", source);
+    } else {
+      const stored = sessionStorage.getItem("utm_source");
+      if (stored) params.source = stored;
+    }
+    if (medium) {
+      params.medium = medium;
+      sessionStorage.setItem("utm_medium", medium);
+    } else {
+      const stored = sessionStorage.getItem("utm_medium");
+      if (stored) params.medium = stored;
+    }
+    if (campaign) {
+      params.campaign = campaign;
+      sessionStorage.setItem("utm_campaign", campaign);
+    } else {
+      const stored = sessionStorage.getItem("utm_campaign");
+      if (stored) params.campaign = stored;
+    }
+    if (content) {
+      params.content = content;
+      sessionStorage.setItem("utm_content", content);
+    } else {
+      const stored = sessionStorage.getItem("utm_content");
+      if (stored) params.content = stored;
+    }
+    if (term) {
+      params.term = term;
+      sessionStorage.setItem("utm_term", term);
+    } else {
+      const stored = sessionStorage.getItem("utm_term");
+      if (stored) params.term = stored;
+    }
+    setUtmParams(params);
+  }, []);
+  return utmParams;
+}
+
 // components/page/Button.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var sizeStyles = {
@@ -194,6 +263,8 @@ function Button({
 }) {
   const { resolveColor: resolveColor2 } = useTheme();
   const { getEntryValue } = useEntries();
+  const sendEvent = useGtmEvent();
+  const utm = useUtmParams();
   const resolvedText = (() => {
     if (!text) return "Button";
     if (typeof text === "string") return text;
@@ -205,6 +276,14 @@ function Button({
     }
     return "Button";
   })();
+  const handleClick = () => {
+    sendEvent("button_click", {
+      text: resolvedText,
+      href: href || void 0,
+      variant,
+      ...utm
+    });
+  };
   const resolvedColor = (() => {
     if (!color) return resolveColor2("primary");
     if (typeof color === "string") return { color, opacity: 100 };
@@ -278,11 +357,12 @@ function Button({
         target,
         style,
         rel: target === "_blank" ? "noopener noreferrer" : void 0,
+        onClick: handleClick,
         children: resolvedText
       }
     ) });
   }
-  return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3("button", { id, type: "button", style, children: resolvedText }) });
+  return /* @__PURE__ */ jsx3("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx3("button", { id, type: "button", style, onClick: handleClick, children: resolvedText }) });
 }
 
 // components/page/Image.tsx
@@ -415,7 +495,7 @@ function Image({
 }
 
 // components/page/ImageCarousel.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var aspectRatioMap2 = {
   "16:9": "16 / 9",
@@ -442,8 +522,10 @@ function ImageCarousel({
   dotColor,
   id
 }) {
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState2(0);
   const { resolveColor: resolveColor2 } = useTheme();
+  const sendEvent = useGtmEvent();
+  const utm = useUtmParams();
   const resolvedArrowColor = (() => {
     if (!arrowColor) return { color: "#FFFFFF", opacity: 100 };
     if (typeof arrowColor === "string")
@@ -464,13 +546,33 @@ function ImageCarousel({
     return resolveColor2("primary");
   })();
   const goToPrevious = () => {
-    setCurrentIndex((prev) => prev === 0 ? images.length - 1 : prev - 1);
+    const newIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
+    setCurrentIndex(newIndex);
+    sendEvent("carousel_navigate", {
+      direction: "previous",
+      slideIndex: newIndex,
+      totalSlides: images.length,
+      ...utm
+    });
   };
   const goToNext = () => {
-    setCurrentIndex((prev) => prev === images.length - 1 ? 0 : prev + 1);
+    const newIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(newIndex);
+    sendEvent("carousel_navigate", {
+      direction: "next",
+      slideIndex: newIndex,
+      totalSlides: images.length,
+      ...utm
+    });
   };
   const goToSlide = (index) => {
     setCurrentIndex(index);
+    sendEvent("carousel_navigate", {
+      direction: "direct",
+      slideIndex: index,
+      totalSlides: images.length,
+      ...utm
+    });
   };
   if (images.length === 0) {
     return /* @__PURE__ */ jsx5(
@@ -1575,11 +1677,27 @@ function Footer({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
+  const sendEvent = useGtmEvent();
+  const utm = useUtmParams();
+  const getSocialPlatform = (url) => {
+    if (url.includes("facebook")) return "facebook";
+    if (url.includes("instagram")) return "instagram";
+    if (url.includes("twitter")) return "twitter";
+    return "social";
+  };
+  const handleSocialClick = (url) => {
+    const platform = getSocialPlatform(url);
+    sendEvent("social_click", {
+      platform,
+      url,
+      ...utm
+    });
+  };
   const socialLinks = [
     { url: facebookUrl, Icon: Facebook },
     { url: instagramUrl, Icon: Instagram },
     { url: twitterUrl, Icon: Twitter }
-  ].filter((link) => link.url);
+  ].filter((link) => !!link.url);
   return /* @__PURE__ */ jsx18(
     "footer",
     {
@@ -1595,6 +1713,7 @@ function Footer({
             target: "_blank",
             rel: "noopener noreferrer",
             className: "transition-opacity hover:opacity-80",
+            onClick: () => handleSocialClick(url),
             children: /* @__PURE__ */ jsx18(Icon3, { size: 24, style: { color: textColor } })
           },
           index
@@ -1606,7 +1725,7 @@ function Footer({
 }
 
 // components/page/Topbar.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import Link from "next/link";
 import { Menu, X } from "lucide-react";
 import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -1620,7 +1739,25 @@ function Topbar({
   puck
 }) {
   const DropZone = puck?.renderDropZone;
-  const [mobileMenuOpen, setMobileMenuOpen] = useState2(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState3(false);
+  const sendEvent = useGtmEvent();
+  const utm = useUtmParams();
+  const handleNavClick = (item) => {
+    sendEvent("nav_click", {
+      name: item.name,
+      url: item.url,
+      linkType: item.linkType || "internal",
+      ...utm
+    });
+  };
+  const handleMobileMenuToggle = () => {
+    const newState = !mobileMenuOpen;
+    setMobileMenuOpen(newState);
+    sendEvent("mobile_menu_toggle", {
+      open: newState,
+      ...utm
+    });
+  };
   const renderLink = (item, index) => {
     const className = "hover:opacity-80 transition-opacity";
     if (item.linkType === "external") {
@@ -1631,15 +1768,34 @@ function Topbar({
           target: "_blank",
           rel: "noopener noreferrer",
           className,
+          onClick: () => handleNavClick(item),
           children: item.name
         },
         index
       );
     }
     if (item.linkType === "scrollTo") {
-      return /* @__PURE__ */ jsx19("a", { href: item.url, className, children: item.name }, index);
+      return /* @__PURE__ */ jsx19(
+        "a",
+        {
+          href: item.url,
+          className,
+          onClick: () => handleNavClick(item),
+          children: item.name
+        },
+        index
+      );
     }
-    return /* @__PURE__ */ jsx19(Link, { href: item.url, className, children: item.name }, index);
+    return /* @__PURE__ */ jsx19(
+      Link,
+      {
+        href: item.url,
+        className,
+        onClick: () => handleNavClick(item),
+        children: item.name
+      },
+      index
+    );
   };
   return /* @__PURE__ */ jsxs8(
     "nav",
@@ -1653,19 +1809,25 @@ function Topbar({
             className: "mx-auto flex items-center justify-between",
             style: { maxWidth },
             children: [
-              /* @__PURE__ */ jsx19(Link, { href: logoUrl, className: "flex-shrink-0", children: logo ? /* @__PURE__ */ jsx19("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ jsx19("span", { className: "text-xl font-bold", children: "Logo" }) }),
+              /* @__PURE__ */ jsx19(
+                Link,
+                {
+                  href: logoUrl,
+                  className: "flex-shrink-0",
+                  onClick: () => sendEvent("nav_click", {
+                    name: "logo",
+                    url: logoUrl,
+                    linkType: "internal",
+                    ...utm
+                  }),
+                  children: logo ? /* @__PURE__ */ jsx19("img", { src: logo, alt: "Logo", className: "h-8" }) : /* @__PURE__ */ jsx19("span", { className: "text-xl font-bold", children: "Logo" })
+                }
+              ),
               /* @__PURE__ */ jsxs8("div", { className: "hidden items-center gap-8 md:flex", children: [
                 navItems.map(renderLink),
                 DropZone && /* @__PURE__ */ jsx19(DropZone, { zone: "cta" })
               ] }),
-              /* @__PURE__ */ jsx19(
-                "button",
-                {
-                  className: "md:hidden",
-                  onClick: () => setMobileMenuOpen(!mobileMenuOpen),
-                  children: mobileMenuOpen ? /* @__PURE__ */ jsx19(X, { size: 24 }) : /* @__PURE__ */ jsx19(Menu, { size: 24 })
-                }
-              )
+              /* @__PURE__ */ jsx19("button", { className: "md:hidden", onClick: handleMobileMenuToggle, children: mobileMenuOpen ? /* @__PURE__ */ jsx19(X, { size: 24 }) : /* @__PURE__ */ jsx19(Menu, { size: 24 }) })
             ]
           }
         ),
@@ -1686,7 +1848,7 @@ function Topbar({
 }
 
 // components/page/Popup.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { icons as icons4, X as X2 } from "lucide-react";
 import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 function Icon2({ name, ...props }) {
@@ -1716,11 +1878,25 @@ function Popup({
   textLink = false,
   puck
 }) {
-  const [isOpen, setIsOpen] = useState3(false);
+  const [isOpen, setIsOpen] = useState4(false);
+  const sendEvent = useGtmEvent();
+  const utm = useUtmParams();
+  const handleOpen = () => {
+    setIsOpen(true);
+    sendEvent("popup_open", {
+      ctaText,
+      type: textLink ? "link" : "button",
+      ...utm
+    });
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    sendEvent("popup_close", { ctaText, ...utm });
+  };
   const trigger = textLink ? /* @__PURE__ */ jsx20(
     "button",
     {
-      onClick: () => setIsOpen(true),
+      onClick: handleOpen,
       className: "underline hover:opacity-80",
       style: { color: buttonColor },
       children: ctaText
@@ -1728,7 +1904,7 @@ function Popup({
   ) : /* @__PURE__ */ jsxs9(
     "button",
     {
-      onClick: () => setIsOpen(true),
+      onClick: handleOpen,
       className: cn(
         "flex items-center gap-2 rounded-full font-medium",
         sizeMap8[size]
@@ -1747,7 +1923,7 @@ function Popup({
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-        onClick: () => setIsOpen(false),
+        onClick: handleClose,
         children: /* @__PURE__ */ jsxs9(
           "div",
           {
@@ -1760,7 +1936,7 @@ function Popup({
               /* @__PURE__ */ jsx20(
                 "button",
                 {
-                  onClick: () => setIsOpen(false),
+                  onClick: handleClose,
                   className: "absolute top-4 right-4 text-gray-500 hover:text-gray-700",
                   children: /* @__PURE__ */ jsx20(X2, { size: 24 })
                 }