update git commit and push

components/landing/newsletter-cta.editor.tsx

@@ -1,9 +1,34 @@
-import { ComponentConfig } from "@reacteditor/core";
+import { ComponentConfig, Fields } from "@reacteditor/core";
 import { imageField } from "@reacteditor/plugin-media/field";
 import { Mail } from "lucide-react";
 import { NewsletterCta, type NewsletterCtaProps } from "@/components/landing/newsletter-cta";
 import { frontendAiMediaAdapter } from "@/services/media-adapter";
 
+const baseFields: Fields<NewsletterCtaProps> = {
+  tagline: { label: "Tagline", type: "text", contentEditable: true },
+  heading: { label: "Heading", type: "text", contentEditable: true },
+  subheading: { label: "Subheading", type: "textarea", contentEditable: true },
+  buttonLabel: { label: "Button label", type: "text", contentEditable: true },
+  emailProvider: {
+    label: "Email provider",
+    type: "select",
+    options: [
+      { label: "None (custom endpoint)", value: "none" },
+      { label: "Mailchimp", value: "mailchimp" },
+      { label: "Klaviyo", value: "klaviyo" },
+    ],
+  },
+  imageUrl: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
+  layout: {
+    label: "Layout",
+    type: "radio",
+    options: [
+      { label: "Split (image + form)", value: "split" },
+      { label: "Stacked (centered)", value: "stacked" },
+    ],
+  },
+};
+
 export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
   label: "Newsletter",
   icon: <Mail size={16} />,
@@ -14,26 +39,42 @@ export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
     subheading:
       "New collections, mill stories, and the occasional invitation to in-person events. Twice a month.",
     buttonLabel: "Subscribe",
+    emailProvider: "none",
     endpoint: "",
+    mailchimpApiKey: "",
+    mailchimpServerPrefix: "",
+    mailchimpAudienceId: "",
+    klaviyoCompanyId: "",
+    klaviyoListId: "",
     imageUrl:
       "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1800&q=80",
     layout: "split",
   },
-  fields: {
-    tagline: { label: "Tagline", type: "text", contentEditable: true },
-    heading: { label: "Heading", type: "text", contentEditable: true },
-    subheading: { label: "Subheading", type: "textarea", contentEditable: true },
-    buttonLabel: { label: "Button label", type: "text", contentEditable: true },
-    endpoint: { label: "Submit endpoint", type: "text" },
-    imageUrl: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
-    layout: {
-      label: "Layout",
-      type: "radio",
-      options: [
-        { label: "Split (image + form)", value: "split" },
-        { label: "Stacked (centered)", value: "stacked" },
-      ],
-    },
+  fields: baseFields,
+  resolveFields: (data) => {
+    const provider = data.props.emailProvider;
+    if (provider === "mailchimp") {
+      return {
+        ...baseFields,
+        mailchimpApiKey: { label: "Mailchimp API key", type: "text" },
+        mailchimpServerPrefix: {
+          label: "Server prefix (e.g. us21)",
+          type: "text",
+        },
+        mailchimpAudienceId: { label: "Audience ID", type: "text" },
+      };
+    }
+    if (provider === "klaviyo") {
+      return {
+        ...baseFields,
+        klaviyoCompanyId: { label: "Company ID (public API key)", type: "text" },
+        klaviyoListId: { label: "List ID", type: "text" },
+      };
+    }
+    return {
+      ...baseFields,
+      endpoint: { label: "Submit endpoint", type: "text" },
+    };
   },
   render: (props) => <NewsletterCta {...props} />,
 };

components/landing/newsletter-cta.tsx

@@ -2,12 +2,20 @@ import { useState } from "react";
 import { cn } from "@/lib/utils";
 import { Typography } from "@/components/Typography";
 
+export type EmailProvider = "none" | "mailchimp" | "klaviyo";
+
 export type NewsletterCtaProps = {
   tagline: string;
   heading: string;
   subheading: string;
   buttonLabel: string;
-  endpoint: string;
+  emailProvider: EmailProvider;
+  endpoint?: string;
+  mailchimpApiKey?: string;
+  mailchimpServerPrefix?: string;
+  mailchimpAudienceId?: string;
+  klaviyoCompanyId?: string;
+  klaviyoListId?: string;
   imageUrl: string;
   layout: "split" | "stacked";
 };
@@ -17,7 +25,13 @@ export function NewsletterCta({
   heading,
   subheading,
   buttonLabel,
+  emailProvider,
   endpoint,
+  mailchimpApiKey,
+  mailchimpServerPrefix,
+  mailchimpAudienceId,
+  klaviyoCompanyId,
+  klaviyoListId,
   imageUrl,
   layout,
 }: NewsletterCtaProps) {
@@ -30,7 +44,53 @@ export function NewsletterCta({
     if (!email) return;
     setSubmitting(true);
     try {
-      if (endpoint) {
+      if (emailProvider === "mailchimp") {
+        if (mailchimpServerPrefix && mailchimpAudienceId && mailchimpApiKey) {
+          await fetch(
+            `https://${mailchimpServerPrefix}.api.mailchimp.com/3.0/lists/${mailchimpAudienceId}/members`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                Authorization: `Bearer ${mailchimpApiKey}`,
+              },
+              body: JSON.stringify({
+                email_address: email,
+                status: "subscribed",
+              }),
+            },
+          );
+        }
+      } else if (emailProvider === "klaviyo") {
+        if (klaviyoCompanyId && klaviyoListId) {
+          await fetch(
+            `https://a.klaviyo.com/client/subscriptions/?company_id=${klaviyoCompanyId}`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+                revision: "2024-10-15",
+              },
+              body: JSON.stringify({
+                data: {
+                  type: "subscription",
+                  attributes: {
+                    profile: {
+                      data: {
+                        type: "profile",
+                        attributes: { email },
+                      },
+                    },
+                  },
+                  relationships: {
+                    list: { data: { type: "list", id: klaviyoListId } },
+                  },
+                },
+              }),
+            },
+          );
+        }
+      } else if (endpoint) {
         await fetch(endpoint, {
           method: "POST",
           headers: { "Content-Type": "application/json" },