@contentgrowth/content-emailing 0.7.8 → 0.8.0

package/dist/frontend/index.js

@@ -152,9 +152,10 @@ var TemplateTester = ({
   template,
   onSendTest,
   onCancel,
-  sending = false
+  sending = false,
+  defaultValues = {}
 }) => {
-  const [toEmail, setToEmail] = useState2("");
+  const [toEmail, setToEmail] = useState2(defaultValues.to || "");
   const [variables, setVariables] = useState2({});
   const [detectedVariables, setDetectedVariables] = useState2([]);
   const [error, setError] = useState2(null);
@@ -166,11 +167,18 @@ var TemplateTester = ({
     const uniqueVars = Array.from(/* @__PURE__ */ new Set([...subjectVars, ...bodyVars]));
     setDetectedVariables(uniqueVars);
     const initialValues = {};
+    const defaults = defaultValues.variables || {};
     uniqueVars.forEach((v) => {
-      initialValues[v] = "";
+      if (defaults[v]) {
+        initialValues[v] = defaults[v];
+      } else if (v === "email" && toEmail) {
+        initialValues[v] = toEmail;
+      } else {
+        initialValues[v] = "";
+      }
     });
     setVariables(initialValues);
-  }, [template]);
+  }, [template, defaultValues]);
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -178,7 +186,7 @@ var TemplateTester = ({
     try {
       await onSendTest({
         template_id: template.template_id,
-        to_email: toEmail,
+        to: toEmail,
         variables
       });
       setSuccess("Test email sent successfully!");
@@ -192,7 +200,13 @@ var TemplateTester = ({
       type: "email",
       required: true,
       value: toEmail,
-      onChange: (e) => setToEmail(e.target.value),
+      onChange: (e) => {
+        const val = e.target.value;
+        setToEmail(val);
+        if (variables["email"] !== void 0) {
+          setVariables((prev) => ({ ...prev, email: val }));
+        }
+      },
       className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
       placeholder: "recipient@example.com"
     }
@@ -245,8 +259,10 @@ var TemplateManager = ({
   onSendTestEmail,
   title = "Email Templates",
   description = "Manage system email templates",
-  templateTypes
+  templateTypes,
+  defaultTestValues
 }) => {
+  const props = { defaultTestValues };
   const [templates, setTemplates] = useState3([]);
   const [loading, setLoading] = useState3(true);
   const [error, setError] = useState3(null);
@@ -453,7 +469,8 @@ var TemplateManager = ({
       template: testingTemplate,
       onSendTest: handleTest,
       onCancel: () => setShowTester(false),
-      sending: saving
+      sending: saving,
+      defaultValues: props.defaultTestValues
     }
   ), deleteConfirm && /* @__PURE__ */ React3.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg shadow-xl max-w-sm w-full p-6" }, /* @__PURE__ */ React3.createElement("h3", { className: "text-lg font-semibold mb-2" }, "Delete Template?"), /* @__PURE__ */ React3.createElement("p", { className: "text-gray-600 mb-4" }, "This action cannot be undone."), /* @__PURE__ */ React3.createElement("div", { className: "flex justify-end gap-3" }, /* @__PURE__ */ React3.createElement(
     "button",
@@ -538,13 +555,22 @@ var EmailSettings = ({
   if (loading) {
     return /* @__PURE__ */ React4.createElement("div", { className: "flex items-center justify-center p-12" }, /* @__PURE__ */ React4.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }));
   }
-  return /* @__PURE__ */ React4.createElement("div", { className: "max-w-4xl p-6 space-y-8" }, /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, title), /* @__PURE__ */ React4.createElement("p", { className: "text-gray-500 mt-1" }, description)), /* @__PURE__ */ React4.createElement("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "px-6 py-4 border-b border-gray-100 bg-gray-50" }, /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-medium text-gray-900" }, "Global Configuration"), /* @__PURE__ */ React4.createElement("p", { className: "text-sm text-gray-500" }, "Default sender identity and delivery provider.")), /* @__PURE__ */ React4.createElement("div", { className: "p-6 space-y-6" }, /* @__PURE__ */ React4.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6" }, /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "From Name"), /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React4.createElement("div", { className: "max-w-4xl p-6 space-y-8" }, /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, title), /* @__PURE__ */ React4.createElement("p", { className: "text-gray-500 mt-1" }, description)), /* @__PURE__ */ React4.createElement("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "px-6 py-4 border-b border-gray-100 bg-gray-50" }, /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-medium text-gray-900" }, "Global Configuration"), /* @__PURE__ */ React4.createElement("p", { className: "text-sm text-gray-500" }, "Default sender identity and delivery provider.")), /* @__PURE__ */ React4.createElement("div", { className: "p-6 space-y-6" }, /* @__PURE__ */ React4.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6" }, /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "Brand Name"), /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      type: "text",
+      value: settings.brandName || "",
+      onChange: (e) => handleChange("brandName", e.target.value),
+      placeholder: "e.g. Content Growth",
+      className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+    }
+  ), /* @__PURE__ */ React4.createElement("p", { className: "text-xs text-gray-500" }, "Used in email templates as ", "{{brandName}}")), /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "From Name"), /* @__PURE__ */ React4.createElement(
     "input",
     {
       type: "text",
       value: settings.fromName,
       onChange: (e) => handleChange("fromName", e.target.value),
-      placeholder: "e.g. Acme System",
+      placeholder: "e.g. Support Team",
       className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
     }
   )), /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "From Address"), /* @__PURE__ */ React4.createElement(
@@ -553,18 +579,18 @@ var EmailSettings = ({
       type: "email",
       value: settings.fromAddress,
       onChange: (e) => handleChange("fromAddress", e.target.value),
-      placeholder: "e.g. noreply@acme.com",
+      placeholder: "e.g. noreply@example.com",
       className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
     }
-  ))), /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "Email Provider"), /* @__PURE__ */ React4.createElement(
+  ))), /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "Email Provider"), /* @__PURE__ */ React4.createElement("div", { className: "relative" }, /* @__PURE__ */ React4.createElement(
     "select",
     {
       value: settings.provider,
       onChange: (e) => handleChange("provider", e.target.value),
-      className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white"
+      className: "appearance-none w-full px-3 py-2 pr-10 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white text-gray-900"
     },
     PROVIDERS.map((p) => /* @__PURE__ */ React4.createElement("option", { key: p.value, value: p.value }, p.label))
-  ), /* @__PURE__ */ React4.createElement("p", { className: "text-xs text-gray-500 mt-1" }, settings.provider === "mailchannels" && "MailChannels is recommended for Cloudflare Workers (requires no API key for standard usage).", settings.provider === "resend" && "Modern email API, good for transactional data.")))), settings.provider !== "mailchannels" && /* @__PURE__ */ React4.createElement("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "px-6 py-4 border-b border-gray-100 bg-gray-50" }, /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-medium text-gray-900" }, PROVIDERS.find((p) => p.value === settings.provider)?.label, " Configuration")), /* @__PURE__ */ React4.createElement("div", { className: "p-6 space-y-6" }, settings.provider === "resend" && /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "API Key"), /* @__PURE__ */ React4.createElement(
+  ), /* @__PURE__ */ React4.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500" }, /* @__PURE__ */ React4.createElement("svg", { className: "h-5 w-5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, /* @__PURE__ */ React4.createElement("path", { fillRule: "evenodd", d: "M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z", clipRule: "evenodd" })))), /* @__PURE__ */ React4.createElement("p", { className: "text-xs text-gray-500 mt-1" }, settings.provider === "mailchannels" && "MailChannels is recommended for Cloudflare Workers (requires no API key for standard usage).", settings.provider === "resend" && "Modern email API, good for transactional data.")))), settings.provider !== "mailchannels" && /* @__PURE__ */ React4.createElement("div", { className: "bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "px-6 py-4 border-b border-gray-100 bg-gray-50" }, /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-medium text-gray-900" }, PROVIDERS.find((p) => p.value === settings.provider)?.label, " Configuration")), /* @__PURE__ */ React4.createElement("div", { className: "p-6 space-y-6" }, settings.provider === "resend" && /* @__PURE__ */ React4.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React4.createElement("label", { className: "block text-sm font-medium text-gray-700" }, "API Key"), /* @__PURE__ */ React4.createElement(
     "input",
     {
       type: "password",