81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
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} />,
|
|
category: "content",
|
|
defaultProps: {
|
|
tagline: "Stay in the loop",
|
|
heading: "Letters from the studio",
|
|
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: 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} />,
|
|
};
|