frontend-shopify/react-editor-shopify
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update git commit and push

Browse Source
This commit is contained in:
Rami Bitar
2026-05-05 14:04:51 -04:00
parent fce386c518
commit 346fcb470e
4 changed files with 135 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
components/landing/newsletter-cta.editor.tsx
View File

@@ -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} />,
};