fragment-headless-sdk 1.0.3 → 1.0.5

package/dist/components/Announcement/AnnouncementButton.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { IAnnouncementContent } from "../../types";
-export default function AnnouncementButton({ content, }: {
+export default function AnnouncementButton({ content, buttonHref, }: {
     content: IAnnouncementContent;
-}): React.JSX.Element;
+    buttonHref?: string;
+}): React.JSX.Element | null;

package/dist/components/Announcement/AnnouncementButton.js

@@ -1,21 +1,26 @@
 import React from "react";
 import { ButtonType } from "../../constants";
-export default function AnnouncementButton({ content, }) {
-    return (React.createElement("a", { href: content.buttonLink || "#", className: "whitespace-nowrap rounded-md px-3 py-2 font-semibold text-sm no-underline text-white hover:cursor-pointer hover:opacity-70 py-2", style: {
-            ...(content.buttonType === ButtonType.Text
-                ? {
-                    textDecoration: "underline",
-                    color: content.textColor,
-                }
-                : {
-                    backgroundColor: content.buttonColor,
-                    color: content.buttonTextColor,
-                }),
-        }, ...(content.buttonLink
+export default function AnnouncementButton({ content, buttonHref, }) {
+    // Don’t render if no button or explicitly None
+    if (!content?.buttonText || content.buttonType === ButtonType.None)
+        return null;
+    // If we weren’t given a usable href, don’t render a broken link
+    if (!buttonHref)
+        return null;
+    // Decide if link should open in a new tab.
+    // If you already have a boolean like `content.buttonLink` meaning "open in new tab",
+    // keep using it; otherwise you can add one later.
+    const openInNewTab = Boolean(content.buttonLink);
+    const style = content.buttonType === ButtonType.Text
+        ? {
+            textDecoration: "underline",
+            color: content.textColor,
+        }
+        : {
+            backgroundColor: content.buttonColor,
+            color: content.buttonTextColor,
+        };
+    return (React.createElement("a", { href: buttonHref, className: "whitespace-nowrap rounded-md px-3 py-2 text-sm font-semibold no-underline hover:cursor-pointer hover:opacity-70", style: style, ...(openInNewTab
             ? { target: "_blank", rel: "noopener noreferrer" }
-            : {}), onClick: (e) => {
-            if (!content.buttonLink) {
-                e.preventDefault();
-            }
-        } }, content.buttonText));
+            : {}), "aria-label": content.buttonText }, content.buttonText));
 }

package/dist/components/Announcement/index.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { AnnouncementType } from "../../constants";
 import { IAnnouncementContent } from "../../types";
-export default function ({ content, type, handleClose, }: {
+export default function Announcement({ content, type, handleClose, }: {
     content: IAnnouncementContent;
     type: AnnouncementType;
     handleClose: () => void;
-}): React.JSX.Element;
+}): React.JSX.Element | null;

package/dist/components/Announcement/index.js

@@ -1,10 +1,22 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { AnnouncementType, ButtonType } from "../../constants";
+import { buildClickUrl, fireImpressionWhenVisible } from "../../utils";
 import AnnouncementButton from "./AnnouncementButton";
 import { AnnouncementStyles } from "./AnnouncementStyles";
 import CountdownTimer from "./CountdownTimer";
-export default function ({ content, type, handleClose, }) {
-    return (React.createElement("div", { className: "relative w-full", style: {
+export default function Announcement({ content, type, handleClose, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current && content.impressionUrl) {
+            fireImpressionWhenVisible(ref.current, content.impressionUrl);
+        }
+    }, [content?.impressionUrl]);
+    const signedButtonHref = content?.buttonLink && content?.clickUrlBase
+        ? buildClickUrl(content.clickUrlBase, content.buttonLink)
+        : undefined;
+    if (!content)
+        return null;
+    return (React.createElement("div", { ref: ref, className: "relative w-full", style: {
             backgroundColor: content.bgColor,
             color: content.textColor,
         } },
@@ -16,13 +28,13 @@ export default function ({ content, type, handleClose, }) {
                         React.createElement("div", { className: "inline-block max-w-none text-base", dangerouslySetInnerHTML: {
                                 __html: content.announcementHtml || "",
                             } }))),
-                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content })))) : (React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 w-full" },
+                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: signedButtonHref })))) : (React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 w-full" },
                 React.createElement("div", { className: "max-w-none text-base font-semibold" },
                     React.createElement("div", { dangerouslySetInnerHTML: {
                             __html: content.announcementHtml || "",
                         } })),
                 type === AnnouncementType.Countdown ? (React.createElement(CountdownTimer, { content: content })) : (content.buttonText &&
-                    content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content }))))),
+                    content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: signedButtonHref || content.buttonLink || "#" }))))),
             React.createElement("div", { onClick: handleClose, className: "absolute right-4 top-1/2 -translate-y-1/2 text-3xl leading-none cursor-pointer", style: {
                     color: content.textColor || "#000",
                 } }, "\u00D7"))));

package/dist/components/Hero/DesktopHero.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { IHeroContent } from "../../types";
-export default function DesktopHero({ content }: {
+export default function DesktopHero({ buttonHref, content, }: {
+    buttonHref?: string;
     content: IHeroContent;
 }): React.JSX.Element;

package/dist/components/Hero/DesktopHero.js

@@ -1,12 +1,12 @@
 import React from "react";
-export default function DesktopHero({ content }) {
+export default function DesktopHero({ buttonHref, content, }) {
     return (React.createElement("div", { className: "relative h-[400px] gap-4 w-full" },
         content?.imageUrl && (React.createElement("img", { src: content.imageUrl, alt: content.title || "Hero", className: "absolute inset-0 z-0 object-cover w-full h-full" })),
         React.createElement("div", { className: "relative z-10 mx-auto flex h-full max-w-screen-xl flex-col items-start justify-center px-10 text-left xl:px-4" },
             React.createElement("div", { className: "w-2/5" },
                 content?.title && (React.createElement("h1", { className: "text-5xl font-bold leading-tight drop-shadow-xl", style: { color: content.titleColor || "#ffffff" } }, content.title)),
                 content?.description && (React.createElement("div", { className: "mt-4 text-2xl drop-shadow-lg prose", style: { color: content.textColor || undefined }, dangerouslySetInnerHTML: { __html: content.description } })),
-                content?.buttonLink && content?.buttonText && (React.createElement("a", { href: content.buttonLink, target: "_blank", rel: "noopener noreferrer", className: "no-underline" },
+                content?.buttonLink && content?.buttonText && (React.createElement("a", { href: buttonHref, target: "_blank", rel: "noopener noreferrer", className: "no-underline" },
                     React.createElement("div", { className: "mt-6 rounded-md px-8 py-2 text-2xl font-semibold drop-shadow-lg transition-all duration-200 hover:bg-gray-800 inline-block", style: {
                             color: content.buttonTextColor ?? undefined,
                             backgroundColor: content.buttonColor ?? undefined,

package/dist/components/Hero/MobileHero.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { IHeroContent } from "../../types";
-export default function MobileHero({ content }: {
+export default function MobileHero({ buttonHref, content, }: {
+    buttonHref?: string;
     content: IHeroContent;
 }): React.JSX.Element;

package/dist/components/Hero/MobileHero.js

@@ -1,11 +1,11 @@
 import React from "react";
-export default function MobileHero({ content }) {
+export default function MobileHero({ buttonHref, content, }) {
     return (React.createElement("div", { className: "relative z-10 mx-auto gap-4 flex h-full max-w-screen-md flex-col items-center justify-center py-6 text-center" },
         content?.title && (React.createElement("h1", { className: "text-3xl font-bold drop-shadow-xl px-4", style: { color: content.titleColor || undefined } }, content.title)),
         (content?.mobileImageUrl || content?.imageUrl) && (React.createElement("div", { className: "w-full" },
             React.createElement("img", { src: content.mobileImageUrl || content.imageUrl || "", alt: content.title || "Hero", className: "h-full w-full object-cover" }))),
         content?.description && (React.createElement("div", { className: "px-4 text-2xl drop-shadow-lg prose", style: { color: content.textColor || undefined }, dangerouslySetInnerHTML: { __html: content.description } })),
-        content?.buttonLink && content?.buttonText && (React.createElement("a", { href: content.buttonLink, target: "_blank", rel: "noopener noreferrer", className: "no-underline" },
+        content?.buttonLink && content?.buttonText && (React.createElement("a", { href: buttonHref, target: "_blank", rel: "noopener noreferrer", className: "no-underline" },
             React.createElement("div", { className: "mb-2 rounded-md px-6 py-2 text-lg font-semibold drop-shadow-lg transition-all duration-200 hover:bg-gray-800", style: {
                     color: content.buttonTextColor ?? undefined,
                     backgroundColor: content.buttonColor ?? undefined,

package/dist/components/Hero/index.js

@@ -1,12 +1,22 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
+import { buildClickUrl, fireImpressionWhenVisible } from "../../utils";
 import DesktopHero from "./DesktopHero";
 import MobileHero from "./MobileHero";
 export default function Hero({ content }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current && content.impressionUrl) {
+            fireImpressionWhenVisible(ref.current, content.impressionUrl);
+        }
+    }, [content?.impressionUrl]);
+    const signedButtonHref = content?.buttonLink && content?.clickUrlBase
+        ? buildClickUrl(content.clickUrlBase, content.buttonLink)
+        : undefined;
     if (!content)
         return null;
-    return (React.createElement("div", { className: "bg-black" },
+    return (React.createElement("div", { className: "bg-black", ref: ref },
         React.createElement("div", { className: "hidden lg:block" },
-            React.createElement(DesktopHero, { content: content })),
+            React.createElement(DesktopHero, { content: content, buttonHref: signedButtonHref })),
         React.createElement("div", { className: "block lg:hidden" },
-            React.createElement(MobileHero, { content: content }))));
+            React.createElement(MobileHero, { content: content, buttonHref: signedButtonHref }))));
 }

package/dist/types/announcement.d.ts

@@ -15,6 +15,8 @@ export interface IAnnouncementContent {
     counterEndDate?: string;
     counterBgColor?: string;
     counterDigitColor?: string;
+    impressionUrl: string;
+    clickUrlBase: string;
 }
 export interface IAnnouncement {
     id: string;
@@ -25,4 +27,6 @@ export interface IAnnouncement {
     content: IAnnouncementContent | null;
     created_at: string;
     updated_at: string;
+    views_count: number;
+    clicks_count: number;
 }

package/dist/types/hero.d.ts

@@ -16,6 +16,8 @@ export interface IHeroContent {
     imageUrl: string;
     mobileImageUrl: string;
     videoUrl?: string;
+    impressionUrl: string;
+    clickUrlBase: string;
 }
 export interface IHero {
     id: string;
@@ -27,4 +29,6 @@ export interface IHero {
     content: IHeroContent | null;
     created_at: string;
     updated_at: string;
+    views_count: number;
+    clicks_count: number;
 }

package/dist/utils/fetch-resource.d.ts

@@ -2,10 +2,20 @@ export declare enum ResourceType {
     HeroBanners = "hero-banners",
     Announcements = "announcements"
 }
+export type ListParams = {
+    status?: "enabled" | "disabled";
+    page?: number;
+    limit?: number;
+    search?: string;
+    pageFilter?: string;
+};
 type FetchResourceParams = {
     baseUrl: string;
     apiKey: string;
     type: ResourceType;
+    params?: ListParams;
+    fetchImpl?: typeof fetch;
 };
-export declare function fetchResource<T>({ baseUrl, apiKey, type, }: FetchResourceParams): Promise<T[]>;
+/** Lists resources with optional filters (parity with client.list) */
+export declare function fetchResource<T>({ baseUrl, apiKey, type, params, fetchImpl, }: FetchResourceParams): Promise<T[]>;
 export {};

package/dist/utils/fetch-resource.js

@@ -3,15 +3,28 @@ export var ResourceType;
     ResourceType["HeroBanners"] = "hero-banners";
     ResourceType["Announcements"] = "announcements";
 })(ResourceType || (ResourceType = {}));
-export async function fetchResource({ baseUrl, apiKey, type, }) {
+/** Lists resources with optional filters (parity with client.list) */
+export async function fetchResource({ baseUrl, apiKey, type, params = {}, fetchImpl, }) {
     if (!baseUrl || !apiKey) {
         console.warn("❌ Missing EXTERNAL_API_URL or FRAGMENT_API_KEY");
         return [];
     }
     try {
-        // Build the endpoint URL for the specific resource type
-        const endpoint = `${baseUrl}/api/v1/${type}`;
-        const res = await fetch(endpoint, {
+        const f = fetchImpl ?? fetch;
+        const base = baseUrl.replace(/\/+$/, "");
+        const url = new URL(`/api/v1/${type}`, base);
+        // Apply filters/pagination (clamped)
+        const page = Math.max(1, params.page ?? 1);
+        const limit = Math.min(100, Math.max(1, params.limit ?? 25));
+        url.searchParams.set("pageNum", String(page));
+        url.searchParams.set("limit", String(limit));
+        if (params.status)
+            url.searchParams.set("status", params.status);
+        if (params.pageFilter)
+            url.searchParams.set("page", params.pageFilter);
+        if (params.search)
+            url.searchParams.set("search", params.search);
+        const res = await f(url.toString(), {
             method: "GET",
             headers: {
                 Authorization: `Bearer ${apiKey}`,
@@ -21,21 +34,21 @@ export async function fetchResource({ baseUrl, apiKey, type, }) {
         if (!res.ok) {
             throw new Error(`HTTP ${res.status}: ${res.statusText}`);
         }
-        const json = await res.json();
-        if (json.status === "success") {
-            // The API returns { status: "success", data: { items: [...], total, page, limit } }
-            if (json.data?.items && Array.isArray(json.data.items)) {
-                return json.data.items;
-            }
-            // Fallback for direct array response
-            if (Array.isArray(json.data)) {
-                return json.data;
-            }
+        const json = (await res.json());
+        if (json.status === "error") {
+            console.error(`❌ Failed to load ${type}:`, json.message);
+            return [];
         }
-        console.error(`❌ Failed to load ${type}:`, json.message || "Unknown error");
+        const data = json.data;
+        if (Array.isArray(data))
+            return data;
+        if (Array.isArray(data?.items))
+            return data.items;
+        // Fallback: unknown shape
+        return [];
     }
     catch (err) {
         console.error(`❌ Fetch error for ${type}:`, err);
+        return [];
     }
-    return [];
 }

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export * from "./fetch-resource";
+export * from "./metrics";

package/dist/utils/index.js

@@ -1 +1,2 @@
 export * from "./fetch-resource";
+export * from "./metrics";

package/dist/utils/metrics.d.ts

@@ -0,0 +1,3 @@
+export declare function toBase64Url(input: string): string;
+export declare function buildClickUrl(clickUrlBase: string, targetHref: string): string;
+export declare function fireImpressionWhenVisible(el: HTMLElement, pixelUrl: string): void;

package/dist/utils/metrics.js

@@ -0,0 +1,56 @@
+// --- Unicode-safe Base64URL ---
+export function toBase64Url(input) {
+    // Handles emojis & non-ASCII reliably:
+    const b64 = btoa(encodeURIComponent(input).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16))));
+    return b64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+// --- Robust query appender ---
+function appendQuery(url, key, value) {
+    const sep = url.includes("?") ? "&" : "?";
+    return `${url}${sep}${key}=${value}`;
+}
+// Build the final redirect URL the CTA should use
+export function buildClickUrl(clickUrlBase, targetHref) {
+    const u = encodeURIComponent(toBase64Url(targetHref));
+    return appendQuery(clickUrlBase, "u", u);
+}
+// --- View tracking (once per element) ---
+const seenEls = typeof WeakSet !== "undefined" ? new WeakSet() : null;
+export function fireImpressionWhenVisible(el, pixelUrl) {
+    if (typeof window === "undefined")
+        return; // SSR guard
+    if (!el || !pixelUrl)
+        return;
+    if (seenEls && seenEls.has(el))
+        return; // de-dupe by element
+    let fired = false;
+    const img = new Image();
+    const fire = () => {
+        if (fired)
+            return;
+        fired = true;
+        if (seenEls)
+            seenEls.add(el);
+        img.referrerPolicy = "strict-origin-when-cross-origin";
+        img.src = pixelUrl; // GET to your /api/v1/metrics/i?e=...&sig=...
+    };
+    // Fallback if IntersectionObserver is missing
+    const fallback = () => {
+        // delay a tick to avoid firing during hidden render
+        setTimeout(fire, 0);
+    };
+    if (!("IntersectionObserver" in window)) {
+        fallback();
+        return;
+    }
+    const io = new IntersectionObserver((entries) => {
+        for (const e of entries) {
+            if (e.isIntersecting && e.intersectionRatio >= 0.3) {
+                fire();
+                io.disconnect();
+                break;
+            }
+        }
+    }, { threshold: [0, 0.3] });
+    io.observe(el);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",