fragment-headless-sdk 2.1.8 → 2.1.9

package/dist/components/Announcement/AnnouncementButton.js

@@ -1,28 +1,23 @@
 import React from "react";
 import { ButtonType } from "../../constants";
-import { fireClickMetric, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
+import { fireClickMetric, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveAnnouncementColors, } from "../../utils";
 export default function AnnouncementButton({ content, buttonHref, clickHref, }) {
     // 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 we weren't given a usable href, don't render a broken link
     if (!buttonHref)
         return null;
     const styling = content.styling;
-    const baseTextColor = resolveTokenByCategory(styling, "colors", "text") ||
-        resolveToken(styling, "textColor");
-    const buttonBgColor = resolveTokenByCategory(styling, "colors", "button") ||
-        resolveToken(styling, "buttonColor");
-    const buttonTextColor = resolveTokenByCategory(styling, "colors", "buttonText") ||
-        resolveToken(styling, "buttonTextColor");
+    const colors = resolveAnnouncementColors(content);
     const baseStyle = content.buttonType === ButtonType.Text
         ? {
             textDecoration: "underline",
-            color: baseTextColor,
+            color: colors.text,
         }
         : {
-            backgroundColor: buttonBgColor,
-            color: buttonTextColor,
+            backgroundColor: colors.button,
+            color: colors.buttonText,
         };
     const style = mergeSlotStyles(baseStyle, styling, "announcementButton", "button");
     const className = mergeSlotClasses("whitespace-nowrap rounded-md px-3 py-2 text-sm font-semibold no-underline hover:cursor-pointer hover:opacity-70", styling, "announcementButton", "button");

package/dist/components/Announcement/CountdownTimer.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, } from "../../utils";
+import { mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveCountdownColors, } from "../../utils";
 export default function CountdownTimer({ content, }) {
     const [timeLeft, setTimeLeft] = useState({
         days: "00",
@@ -33,28 +33,25 @@ export default function CountdownTimer({ content, }) {
     const blockClass = mergeSlotClasses("flex flex-col items-center", styling, "countdownBlock");
     const blockStyle = mergeSlotStyles(undefined, styling, "countdownBlock");
     const blockAttributes = mergeSlotAttributes(styling, "countdownBlock");
-    const digitClass = mergeSlotClasses("text-white text-xl font-bold flex items-center justify-center leading-none rounded px-1", styling, "countdownDigit");
-    const digitTextColor = resolveToken(styling, "counterDigitColor", "#FFFFFF") || "#FFFFFF";
-    const digitBackgroundColor = resolveToken(styling, "counterDigitBackgroundColor", "#000000") ||
-        "#000000";
-    const counterTextColor = resolveToken(styling, "counterTextColor", digitTextColor);
+    const digitClass = mergeSlotClasses("text-lg font-bold flex items-center justify-center leading-tight rounded px-1", styling, "countdownDigit");
+    const colors = resolveCountdownColors(content);
     const digitStyle = mergeSlotStyles({
-        color: digitTextColor,
-        backgroundColor: digitBackgroundColor,
+        color: colors.digitColor,
+        backgroundColor: colors.digitBackgroundColor,
     }, styling, "countdownDigit");
     const digitAttributes = mergeSlotAttributes(styling, "countdownDigit");
     const labelClass = mergeSlotClasses("mt-0.5 text-[10px] leading-tight", styling, "countdownLabel");
     const labelStyle = mergeSlotStyles({
-        color: counterTextColor,
+        color: colors.textColor,
     }, styling, "countdownLabel");
     const labelAttributes = mergeSlotAttributes(styling, "countdownLabel");
     const separatorClass = mergeSlotClasses("text-xl font-semibold -mt-4", styling, "countdownSeparator");
     const separatorStyle = mergeSlotStyles({
-        color: counterTextColor,
+        color: colors.textColor,
     }, styling, "countdownSeparator");
     const separatorAttributes = mergeSlotAttributes(styling, "countdownSeparator");
     const renderBlock = (value, label) => (React.createElement("div", { className: blockClass, style: blockStyle, ...(blockAttributes ?? {}) },
-        React.createElement("div", { className: "flex" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
+        React.createElement("div", { className: "flex gap-1" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
         React.createElement("span", { className: labelClass, style: labelStyle, ...(labelAttributes ?? {}) }, label)));
     return (React.createElement("div", { className: containerClass, style: containerStyle, ...(containerAttributes ?? {}) },
         renderBlock(timeLeft.days, "Days"),

package/dist/components/Announcement/index.js

@@ -1,7 +1,7 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import React, { useEffect, useRef } from "react";
 import { AnnouncementType, ButtonType } from "../../constants";
-import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
+import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveAnnouncementColors, } from "../../utils";
 import AnnouncementButton from "./AnnouncementButton";
 import { AnnouncementStyles } from "./AnnouncementStyles";
 import CountdownTimer from "./CountdownTimer";
@@ -19,15 +19,12 @@ export default function Announcement({ content, type, handleClose, }) {
     if (!content)
         return null;
     const styling = content.styling;
-    const backgroundColor = resolveTokenByCategory(styling, "colors", "background") ||
-        resolveToken(styling, "bgColor");
-    const textColor = resolveTokenByCategory(styling, "colors", "text") ||
-        resolveToken(styling, "textColor");
+    const colors = resolveAnnouncementColors(content);
     const themeClasses = getThemeClasses(styling);
     const rootClass = mergeSlotClasses(`relative w-full ${themeClasses}`, styling, "root");
     const rootStyle = mergeSlotStyles({
-        backgroundColor,
-        color: textColor,
+        backgroundColor: colors.background,
+        color: colors.text,
     }, styling, "root");
     const rootAttributes = mergeSlotAttributes(styling, "root");
     const innerClass = mergeSlotClasses("relative mx-auto flex max-w-screen-xl flex-col md:flex-row items-center justify-center gap-4 px-10 md:px-4 py-2 md:py-0 text-center md:text-left min-h-[50px]", styling, "inner", "wrapper");
@@ -48,13 +45,11 @@ export default function Announcement({ content, type, handleClose, }) {
     const contentRowClass = mergeSlotClasses("flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 w-full", styling, "contentRow");
     const contentRowStyle = mergeSlotStyles(undefined, styling, "contentRow");
     const contentRowAttributes = mergeSlotAttributes(styling, "contentRow");
-    const announcementTextClass = mergeSlotClasses("max-w-none text-base font-semibold", styling, "announcementText");
+    const announcementTextClass = mergeSlotClasses("max-w-none text-based", styling, "announcementText");
     const announcementTextStyle = mergeSlotStyles(undefined, styling, "announcementText");
     const announcementTextAttributes = mergeSlotAttributes(styling, "announcementText");
     const closeButtonClass = mergeSlotClasses("absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer", styling, "closeButton");
-    const closeButtonColor = resolveTokenByCategory(styling, "colors", "closeButton") ||
-        (resolveToken(styling, "closeButtonColor", textColor ?? "#000") ?? "#000");
-    const closeButtonStyle = mergeSlotStyles({ color: closeButtonColor }, styling, "closeButton");
+    const closeButtonStyle = mergeSlotStyles({ color: colors.closeButton }, styling, "closeButton");
     const closeButtonAttributes = mergeSlotAttributes(styling, "closeButton");
     return (React.createElement("div", { ref: ref, className: rootClass, style: rootStyle, ...(rootAttributes ?? {}) },
         React.createElement(AnnouncementStyles, null),

package/dist/types/announcement.d.ts

@@ -21,8 +21,11 @@ export interface IAnnouncement {
     name: string;
     status: AnnouncementStatus;
     content: IAnnouncementContent | null;
+    active_duration_seconds: number | null;
     active_start_date: string | null;
     active_end_date: string | null;
+    last_activated_at: string | null;
+    last_deactivated_at: string | null;
     created_at: string | null;
     updated_at: string | null;
     views_count: number;

package/dist/types/hero.d.ts

@@ -25,7 +25,10 @@ export interface IHero {
     page: ShopPage["handle"] | null;
     status: HeroStatus;
     content: IHeroContent | null;
+    active_duration_seconds: number | null;
     active_start_date: string | null;
+    last_activated_at: string | null;
+    last_deactivated_at: string | null;
     active_end_date: string | null;
     created_at: string | null;
     updated_at: string | null;

package/dist/utils/announcement-resolvers.d.ts

@@ -0,0 +1,15 @@
+import { IAnnouncementContent } from "../types";
+export interface AnnouncementResolvedColors {
+    background: string;
+    text: string;
+    button: string;
+    buttonText: string;
+    closeButton: string;
+}
+export interface CountdownResolvedColors {
+    digitColor: string;
+    digitBackgroundColor: string;
+    textColor: string;
+}
+export declare function resolveAnnouncementColors(content: IAnnouncementContent): AnnouncementResolvedColors;
+export declare function resolveCountdownColors(content: IAnnouncementContent): CountdownResolvedColors;

package/dist/utils/announcement-resolvers.js

@@ -0,0 +1,45 @@
+import { resolveToken, resolveTokenByCategory } from "./styling";
+const DEFAULT_ANNOUNCEMENT_COLORS = {
+    background: "#000000",
+    text: "#ffffff",
+    button: "#ffffff",
+    buttonText: "#000000",
+    closeButton: "#ffffff",
+};
+const DEFAULT_COUNTDOWN_COLORS = {
+    digitColor: "#ffffff",
+    digitBackgroundColor: "#000000",
+    textColor: "#ffffff",
+};
+const fallbackColor = (value, fallback) => typeof value === "string" && value.trim().length > 0 ? value : fallback;
+export function resolveAnnouncementColors(content) {
+    const styling = content.styling;
+    const background = resolveTokenByCategory(styling, "colors", "background") ||
+        resolveToken(styling, "bgColor");
+    const text = resolveTokenByCategory(styling, "colors", "text") ||
+        resolveToken(styling, "textColor");
+    const button = resolveTokenByCategory(styling, "colors", "button") ||
+        resolveToken(styling, "buttonColor");
+    const buttonText = resolveTokenByCategory(styling, "colors", "buttonText") ||
+        resolveToken(styling, "buttonTextColor");
+    const closeButton = resolveTokenByCategory(styling, "colors", "closeButton") ||
+        resolveToken(styling, "closeButtonColor");
+    return {
+        background: fallbackColor(background, DEFAULT_ANNOUNCEMENT_COLORS.background),
+        text: fallbackColor(text, DEFAULT_ANNOUNCEMENT_COLORS.text),
+        button: fallbackColor(button, DEFAULT_ANNOUNCEMENT_COLORS.button),
+        buttonText: fallbackColor(buttonText, DEFAULT_ANNOUNCEMENT_COLORS.buttonText),
+        closeButton: fallbackColor(closeButton, fallbackColor(text, DEFAULT_ANNOUNCEMENT_COLORS.closeButton)),
+    };
+}
+export function resolveCountdownColors(content) {
+    const styling = content.styling;
+    const digitColor = resolveToken(styling, "counterDigitColor");
+    const digitBackgroundColor = resolveToken(styling, "counterDigitBackgroundColor");
+    const textColor = resolveToken(styling, "counterTextColor", digitColor);
+    return {
+        digitColor: fallbackColor(digitColor, DEFAULT_COUNTDOWN_COLORS.digitColor),
+        digitBackgroundColor: fallbackColor(digitBackgroundColor, DEFAULT_COUNTDOWN_COLORS.digitBackgroundColor),
+        textColor: fallbackColor(textColor, DEFAULT_COUNTDOWN_COLORS.textColor),
+    };
+}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./announcement-resolvers";
 export * from "./cache";
 export * from "./fetch-resource";
 export * from "./hero-resolvers";

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from "./announcement-resolvers";
 export * from "./cache";
 export * from "./fetch-resource";
 export * from "./hero-resolvers";

package/package.json

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