react-editor-shopify/editor/components/landing/newsletter-cta.editor.tsx

import { ComponentConfig } from "@reacteditor/core";
import { useState } from "react";
import { Mail } from "lucide-react";
import { cn } from "~/editor/lib/utils";
import { Typography } from "~/editor/theme/Typography";

export type NewsletterCtaProps = {
  tagline: string;
  heading: string;
  subheading: string;
  buttonLabel: string;
  endpoint: string;
  imageUrl: string;
  layout: "split" | "stacked";
};

function NewsletterCta({
  tagline,
  heading,
  subheading,
  buttonLabel,
  endpoint,
  imageUrl,
  layout,
}: NewsletterCtaProps) {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!email) return;
    setSubmitting(true);
    try {
      if (endpoint) {
        await fetch(endpoint, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ email }),
        });
      }
      setSubmitted(true);
    } catch {
      setSubmitted(true);
    } finally {
      setSubmitting(false);
    }
  };

  const Form = (
    <form
      onSubmit={submit}
      className="flex w-full max-w-md items-center border-b border-foreground/30 focus-within:border-foreground"
    >
      <input
        type="email"
        required
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="you@example.com"
        className="flex-1 bg-transparent py-3 text-sm placeholder:text-muted-foreground focus:outline-none"
      />
      <button
        type="submit"
        disabled={submitting}
        className="ml-3 text-sm font-medium tracking-wide hover:opacity-70 disabled:opacity-40"
      >
        {submitting ? "…" : buttonLabel} →
      </button>
    </form>
  );

  if (layout === "split") {
    return (
      <section className="bg-background">
        <div className="container mx-auto max-w-7xl px-6 py-16 md:py-24">
          <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2">
            <div>
              {imageUrl ? (
                <img
                  src={imageUrl}
                  alt=""
                  className="aspect-[5/4] w-full rounded-md object-cover"
                />
              ) : null}
            </div>
            <div className="flex flex-col items-start">
              {tagline ? (
                <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
                  {tagline}
                </p>
              ) : null}
              <Typography variant="h2">{heading}</Typography>
              {subheading ? (
                <Typography variant="subtitle1" className="mt-3 max-w-md">
                  {subheading}
                </Typography>
              ) : null}
              <div className="mt-8 w-full">
                {submitted ? (
                  <p className="text-sm text-muted-foreground">
                    Thanks — we'll be in touch.
                  </p>
                ) : (
                  Form
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="bg-muted/40 py-20 md:py-28">
      <div className="container mx-auto max-w-2xl px-6 text-center">
        {tagline ? (
          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
            {tagline}
          </p>
        ) : null}
        <Typography variant="h2">{heading}</Typography>
        {subheading ? (
          <Typography variant="subtitle1" className="mt-3">
            {subheading}
          </Typography>
        ) : null}
        <div className={cn("mx-auto mt-10 flex w-full max-w-md justify-center")}>
          {submitted ? (
            <p className="text-sm text-muted-foreground">
              Thanks — we'll be in touch.
            </p>
          ) : (
            Form
          )}
        </div>
      </div>
    </section>
  );
}

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",
    endpoint: "",
    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 URL", type: "text" },
    layout: {
      label: "Layout",
      type: "radio",
      options: [
        { label: "Split (image + form)", value: "split" },
        { label: "Stacked (centered)", value: "stacked" },
      ],
    },
  },
  render: (props) => <NewsletterCta {...props} />,
};