@go-mailer/easy-email-extensions 5.0.7 → 5.0.9

package/lib/GoMailerLayout/CountdownBlock/index.d.ts

@@ -1,5 +1,6 @@
 import { IBlockData } from '@go-mailer/easy-email-core';
 export declare const CountdownBlockType = "go-mailer-countdown";
+export declare const COUNTDOWN_API_URL = "http://localhost:4010/images/countdown";
 export type ICountdownBlock = IBlockData<{
     endDate: string;
     timezone: string;
@@ -11,7 +12,9 @@ export type ICountdownBlock = IBlockData<{
     height: string;
     link: string;
     'container-background-color': string;
+    /** Cached GIF URL returned by the countdown API — used in the render. */
+    gifUrl: string;
 }, Record<string, never>>;
-/** Build the Sendtric animated GIF URL from block attributes. */
-export declare function buildCountdownUrl(attrs: ICountdownBlock['attributes']): string;
+/** POST to the countdown API and return the GIF URL. */
+export declare function fetchCountdownGif(endDate: string): Promise<string>;
 export declare const CountdownBlock: import("@go-mailer/easy-email-core").IBlock<ICountdownBlock>;

package/lib/index2.js

@@ -34390,6 +34390,8 @@ function ImageUploader(props) {
   const [isUploading, setIsUploading] = useState(false);
   const uploadHandlerRef = useRef(props.uploadHandler);
   const onChange = props.onChange;
+  const valueRef = useRef(props.value);
+  valueRef.current = props.value;
   const onUpload = useCallback(() => {
     if (isUploading) {
       return Message$1.warning(t("Uploading..."));
@@ -34417,12 +34419,12 @@ function ImageUploader(props) {
     if (!props.autoTrigger || !uploadHandlerRef.current)
       return;
     const handler = () => {
-      if (!props.value)
+      if (!valueRef.current)
         onUpload();
     };
     EventManager.on(EventType.BLOCK_CLICK, handler);
     return () => EventManager.off(EventType.BLOCK_CLICK, handler);
-  }, [props.autoTrigger, props.value, onUpload]);
+  }, [props.autoTrigger, onUpload]);
   const onPaste = useCallback(
     (e2) => __async(this, null, function* () {
       if (!uploadHandlerRef.current)
@@ -39418,9 +39420,19 @@ const fullWidthOnMobileAdapter = {
     return "true";
   }
 };
-function Image$3() {
+function Image$2() {
+  var _a2;
   const { focusIdx: focusIdx2 } = useFocusIdx();
   const { onUploadImage } = useEditorProps();
+  const { focusBlock: focusBlock2, change } = useBlock();
+  const src = (_a2 = focusBlock2 == null ? void 0 : focusBlock2.attributes) == null ? void 0 : _a2.src;
+  const prevSrcRef = React__default.useRef(src);
+  React__default.useEffect(() => {
+    if (src && src !== prevSrcRef.current) {
+      change(`${focusIdx2}.attributes.height`, "auto");
+    }
+    prevSrcRef.current = src;
+  }, [src, focusIdx2, change]);
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
     style: { padding: 0 }
   }, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
@@ -40472,7 +40484,7 @@ const blocks = {
   [BasicType.SECTION]: Section,
   [BasicType.COLUMN]: Column,
   [BasicType.TEXT]: Text,
-  [BasicType.IMAGE]: Image$3,
+  [BasicType.IMAGE]: Image$2,
   [BasicType.GROUP]: Group,
   [BasicType.BUTTON]: Button,
   [BasicType.DIVIDER]: Divider,
@@ -40489,7 +40501,7 @@ const blocks = {
   [BasicType.SOCIAL]: Social,
   [BasicType.TABLE]: Table,
   [AdvancedType.TEXT]: Text,
-  [AdvancedType.IMAGE]: Image$3,
+  [AdvancedType.IMAGE]: Image$2,
   [AdvancedType.BUTTON]: Button,
   [AdvancedType.DIVIDER]: Divider,
   [AdvancedType.SPACER]: Spacer,
@@ -42715,7 +42727,7 @@ function getDirectionFormDropPosition(position) {
     return "bottom";
   return "";
 }
-const { Image: Image$2 } = components;
+const { Image: Image$1 } = components;
 const VideoBlockType = "go-mailer-video";
 const VIDEO_PLACEHOLDER_SRC = `data:image/svg+xml,${encodeURIComponent(
   `<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100">
@@ -42750,7 +42762,7 @@ const VideoBlock = createCustomBlock({
   render: ({ data, idx, mode }) => {
     const { src, href, width, height } = data.attributes;
     const effectiveSrc = mode === "testing" && !src ? VIDEO_PLACEHOLDER_SRC : src;
-    return /* @__PURE__ */ React__default.createElement(Image$2, {
+    return /* @__PURE__ */ React__default.createElement(Image$1, {
       "css-class": mode === "testing" ? getPreviewClassName(idx, data.type) : "",
       src: effectiveSrc,
       href: href || void 0,
@@ -42763,88 +42775,6 @@ const VideoBlock = createCustomBlock({
     });
   }
 });
-const { Image: Image$1 } = components;
-const CountdownBlockType = "go-mailer-countdown";
-function buildCountdownUrl(attrs) {
-  const { endDate, timezone, backgroundColor, textColor, fontSize, format } = attrs;
-  if (!endDate)
-    return "";
-  const d2 = new Date(endDate);
-  if (isNaN(d2.getTime()))
-    return "";
-  const params = new URLSearchParams({
-    language: "en",
-    timezone,
-    year: String(d2.getFullYear()),
-    month: String(d2.getMonth() + 1),
-    day: String(d2.getDate()),
-    hour: String(d2.getHours()),
-    minute: String(d2.getMinutes()),
-    second: String(d2.getSeconds()),
-    textcolor: textColor.replace("#", ""),
-    bg: backgroundColor.replace("#", ""),
-    size: String(fontSize),
-    format
-  });
-  return `https://www.sendtric.com/countdown/image?${params.toString()}`;
-}
-function defaultEndDate() {
-  const d2 = new Date();
-  d2.setDate(d2.getDate() + 7);
-  d2.setSeconds(0, 0);
-  return d2.toISOString().slice(0, 16);
-}
-const COUNTDOWN_PLACEHOLDER_SRC = `data:image/svg+xml,${encodeURIComponent(
-  `<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100">
-    <rect width="600" height="100" fill="#f4f2ef"/>
-    <rect x="1" y="1" width="598" height="98" rx="4" fill="none" stroke="#dedad6" stroke-width="1.5" stroke-dasharray="8 4"/>
-    <g transform="translate(278,26)">
-      <rect width="44" height="32" rx="3" fill="none" stroke="#c8c4c0" stroke-width="1.5"/>
-      <text x="22" y="21" text-anchor="middle" font-family="Inter,sans-serif" font-size="13" font-weight="700" fill="#c8c4c0">00</text>
-    </g>
-    <text x="300" y="72" text-anchor="middle" font-family="Inter,sans-serif" font-size="11" font-weight="500" fill="#b5b1ac">Set a deadline to activate countdown</text>
-  </svg>`
-)}`;
-const CountdownBlock = createCustomBlock({
-  name: "Countdown",
-  type: CountdownBlockType,
-  validParentType: [BasicType.COLUMN, "advanced_column"],
-  create: (payload) => {
-    const defaultData = {
-      type: CountdownBlockType,
-      data: { value: {} },
-      attributes: {
-        endDate: defaultEndDate(),
-        timezone: "UTC",
-        backgroundColor: "ffffff",
-        textColor: "333333",
-        fontSize: "30",
-        format: "DHMS",
-        width: "600px",
-        height: "100px",
-        link: "",
-        "container-background-color": "#ffffff"
-      },
-      children: []
-    };
-    return mergeBlock(defaultData, payload);
-  },
-  render: ({ data, idx, mode }) => {
-    const attrs = data.attributes;
-    const effectiveSrc = mode === "testing" ? COUNTDOWN_PLACEHOLDER_SRC : buildCountdownUrl(attrs) || "";
-    return /* @__PURE__ */ React__default.createElement(Image$1, {
-      "css-class": mode === "testing" ? getPreviewClassName(idx, data.type) : "",
-      src: effectiveSrc,
-      href: attrs.link || void 0,
-      target: "_blank",
-      width: attrs.width,
-      height: attrs.height || void 0,
-      padding: "0px",
-      align: "center",
-      "container-background-color": attrs["container-background-color"]
-    });
-  }
-});
 let iconsMap = {
   [BasicType.TEXT]: "icon-text",
   [BasicType.SECTION]: "icon-section",
@@ -42875,8 +42805,7 @@ let iconsMap = {
   [AdvancedType.COLUMN]: "icon-column",
   [AdvancedType.GROUP]: "icon-group",
   [AdvancedType.HERO]: "icon-hero",
-  [VideoBlockType]: "icon-img",
-  [CountdownBlockType]: "icon-number"
+  [VideoBlockType]: "icon-img"
 };
 function getIconNameByBlockType(type) {
   return lodash.exports.get(iconsMap, type) || "icon-number";
@@ -47072,29 +47001,6 @@ const SvgAccordion = () => /* @__PURE__ */ React__default.createElement("svg", {
   strokeLinecap: "round",
   strokeLinejoin: "round"
 }));
-const SvgCountdown = () => /* @__PURE__ */ React__default.createElement("svg", {
-  width: "18",
-  height: "18",
-  viewBox: "0 0 18 18",
-  fill: "none"
-}, /* @__PURE__ */ React__default.createElement("circle", {
-  cx: "9",
-  cy: "10",
-  r: "6.5",
-  stroke: "currentColor",
-  strokeWidth: "1.4"
-}), /* @__PURE__ */ React__default.createElement("path", {
-  d: "M9 7v3.5l2.5 1.5",
-  stroke: "currentColor",
-  strokeWidth: "1.4",
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-}), /* @__PURE__ */ React__default.createElement("path", {
-  d: "M6.5 2.5h5",
-  stroke: "currentColor",
-  strokeWidth: "1.4",
-  strokeLinecap: "round"
-}));
 const SvgVideo = () => /* @__PURE__ */ React__default.createElement("svg", {
   width: "18",
   height: "18",
@@ -47168,8 +47074,7 @@ const SVG_ICON_MAP = {
   [AdvancedType.ACCORDION]: SvgAccordion,
   [BasicType.SECTION]: SvgSection,
   [AdvancedType.SECTION]: SvgSection,
-  "go-mailer-video": SvgVideo,
-  "go-mailer-countdown": SvgCountdown
+  "go-mailer-video": SvgVideo
 };
 function BlockSvgIcon({ type }) {
   var _a2;
@@ -53357,8 +53262,18 @@ const presetBlocks = [
   })
 ];
 function VideoPanel() {
+  var _a2;
   const { focusIdx: focusIdx2 } = useFocusIdx();
   const { onUploadImage } = useEditorProps();
+  const { focusBlock: focusBlock2, change } = useBlock();
+  const src = (_a2 = focusBlock2 == null ? void 0 : focusBlock2.attributes) == null ? void 0 : _a2.src;
+  const prevSrcRef = React__default.useRef(src);
+  React__default.useEffect(() => {
+    if (src && src !== prevSrcRef.current) {
+      change(`${focusIdx2}.attributes.height`, "auto");
+    }
+    prevSrcRef.current = src;
+  }, [src, focusIdx2, change]);
   return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
     style: { padding: 0 }
   }, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
@@ -53402,109 +53317,9 @@ function VideoPanel() {
     )
   })))));
 }
-const TIMEZONE_OPTIONS = [
-  "UTC",
-  "America/New_York",
-  "America/Chicago",
-  "America/Denver",
-  "America/Los_Angeles",
-  "America/Toronto",
-  "America/Vancouver",
-  "America/Sao_Paulo",
-  "Europe/London",
-  "Europe/Paris",
-  "Europe/Berlin",
-  "Europe/Moscow",
-  "Asia/Dubai",
-  "Asia/Kolkata",
-  "Asia/Singapore",
-  "Asia/Tokyo",
-  "Asia/Shanghai",
-  "Australia/Sydney"
-].map((tz) => ({ label: tz, value: tz }));
-const FORMAT_OPTIONS = [
-  { label: "Days \xB7 Hours \xB7 Minutes \xB7 Seconds", value: "DHMS" },
-  { label: "Hours \xB7 Minutes \xB7 Seconds", value: "HMS" },
-  { label: "Minutes \xB7 Seconds", value: "MS" }
-];
-function DateTimeField({ name: name2 }) {
-  const { input: input2 } = useField(name2, { parse: (v2) => v2 });
-  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement("label", {
-    style: { fontSize: 11, fontWeight: 500, color: "#6b6660", display: "block", marginBottom: 3 }
-  }, "End date & time"), /* @__PURE__ */ React__default.createElement("input", {
-    type: "datetime-local",
-    value: input2.value || "",
-    onChange: (e2) => input2.onChange(e2.target.value),
-    style: {
-      width: "100%",
-      height: 32,
-      padding: "0 8px",
-      border: "1px solid rgba(26,24,20,0.14)",
-      borderRadius: 7,
-      fontSize: 13,
-      background: "#f7f5f2",
-      color: "#1a1814",
-      boxSizing: "border-box",
-      outline: "none"
-    }
-  }));
-}
-function CountdownPanel() {
-  const { focusIdx: focusIdx2 } = useFocusIdx();
-  return /* @__PURE__ */ React__default.createElement(AttributesPanelWrapper, {
-    style: { padding: 0 }
-  }, /* @__PURE__ */ React__default.createElement(CollapseWrapper, {
-    defaultActiveKey: ["schedule", "style", "dimension", "link"]
-  }, /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "schedule",
-    header: t("Schedule")
-  }, /* @__PURE__ */ React__default.createElement(Space$1, {
-    direction: "vertical"
-  }, /* @__PURE__ */ React__default.createElement(DateTimeField, {
-    name: `${focusIdx2}.attributes.endDate`
-  }), /* @__PURE__ */ React__default.createElement(SelectField, {
-    label: t("Timezone"),
-    name: `${focusIdx2}.attributes.timezone`,
-    options: TIMEZONE_OPTIONS
-  }), /* @__PURE__ */ React__default.createElement(SelectField, {
-    label: t("Format"),
-    name: `${focusIdx2}.attributes.format`,
-    options: FORMAT_OPTIONS
-  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "style",
-    header: t("Style")
-  }, /* @__PURE__ */ React__default.createElement(Space$1, {
-    direction: "vertical"
-  }, /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: t("Background"),
-    name: `${focusIdx2}.attributes.backgroundColor`
-  }), /* @__PURE__ */ React__default.createElement(ColorPickerField, {
-    label: t("Text color"),
-    name: `${focusIdx2}.attributes.textColor`
-  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "dimension",
-    header: t("Dimension")
-  }, /* @__PURE__ */ React__default.createElement(Space$1, {
-    direction: "vertical"
-  }, /* @__PURE__ */ React__default.createElement(Width, {
-    pixelMode: true
-  }), /* @__PURE__ */ React__default.createElement(Height, null), /* @__PURE__ */ React__default.createElement(Padding, {
-    showResetAll: true
-  }))), /* @__PURE__ */ React__default.createElement(Collapse$1.Item, {
-    name: "link",
-    header: t("Link")
-  }, /* @__PURE__ */ React__default.createElement(TextField, {
-    label: t("Click URL"),
-    name: `${focusIdx2}.attributes.link`,
-    placeholder: "https://",
-    helpText: t("Where to send recipients when they click the countdown.")
-  }))));
-}
 const FONT = "'Inter', 'DM Sans', -apple-system, sans-serif";
 BlockManager.registerBlocks({ [VideoBlockType]: VideoBlock });
 BlockAttributeConfigurationManager.add({ [VideoBlockType]: VideoPanel });
-BlockManager.registerBlocks({ [CountdownBlockType]: CountdownBlock });
-BlockAttributeConfigurationManager.add({ [CountdownBlockType]: CountdownPanel });
 const IcoEdit = () => /* @__PURE__ */ React__default.createElement("svg", {
   width: "14",
   height: "14",
@@ -53611,8 +53426,7 @@ const defaultCategories = [
       { type: AdvancedType.WRAPPER },
       { type: AdvancedType.NAVBAR },
       { type: AdvancedType.ACCORDION },
-      { type: VideoBlockType },
-      { type: CountdownBlockType }
+      { type: VideoBlockType }
     ]
   },
   {