@pradip1995/segment-newsletter 0.2.0

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@pradip1995/segment-newsletter",
+  "version": "0.2.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "src/segment.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./manifest": "./src/manifest.ts"
+  },
+  "peerDependencies": {
+    "@pradip1995/commerce-core": "^4.0.0",
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "next": ">=15"
+  },
+  "dependencies": {
+    "@pradip1995/segment-primitives": "0.3.0",
+    "@pradip1995/segment-tokens": "0.3.2"
+  },
+  "devDependencies": {
+    "@pradip1995/plugin-sdk": "^0.2.0",
+    "@types/react": "^19",
+    "react": "19.0.3",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./segment"
+export { default as manifest } from "./manifest"

package/src/manifest.ts

@@ -0,0 +1,11 @@
+import type { SegmentManifest } from "@pradip1995/plugin-sdk"
+
+const manifest: SegmentManifest = {
+  id: "newsletter",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "newsletter",
+}
+
+export default manifest

package/src/segment.css

@@ -0,0 +1,110 @@
+.newsletter-section {
+  width: 100%;
+  padding: 2rem 0 4rem;
+}
+
+.newsletter-section__inner {
+  max-width: var(--container-max);
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.newsletter-section__card {
+  display: grid;
+  grid-template-columns: 1fr;
+  border-radius: 2rem;
+  overflow: hidden;
+  background: linear-gradient(to right, var(--color-surface-muted), var(--color-surface));
+  box-shadow: var(--shadow-card);
+}
+
+@media (min-width: 1025px) {
+  .newsletter-section__card {
+    grid-template-columns: 1fr 1fr;
+    border-radius: 3rem;
+  }
+}
+
+.newsletter-section__media {
+  position: relative;
+  min-height: 18rem;
+  background: var(--color-brand-accent-muted);
+}
+
+.newsletter-section__media-fallback {
+  width: 100%;
+  height: 100%;
+  min-height: 18rem;
+  background: var(--color-brand-accent-muted);
+}
+
+.newsletter-section__form-panel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 1.5rem;
+  background: var(--color-surface-muted);
+}
+
+.newsletter-section__tagline {
+  text-align: center;
+  font-style: italic;
+  margin-bottom: 1.5rem;
+  color: var(--color-text-heading);
+}
+
+.newsletter-section__form {
+  width: 100%;
+  max-width: 28rem;
+  display: grid;
+  gap: 1rem;
+}
+
+.newsletter-section__field {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.newsletter-section__label {
+  width: 4rem;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-heading);
+}
+
+.newsletter-section__input {
+  flex: 1;
+  border: none;
+  border-radius: 9999px;
+  padding: 0.75rem 1rem;
+  background: var(--color-brand-accent);
+  color: var(--color-text-inverse);
+}
+
+.newsletter-section__actions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding-top: 1rem;
+}
+
+.newsletter-section__submit {
+  min-width: 12rem;
+  border-radius: 1.125rem;
+  padding: 0.875rem 1.5rem;
+  background: var(--color-brand-accent-muted);
+  color: var(--color-text-heading);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.newsletter-section__status--success {
+  color: #059669;
+}
+
+.newsletter-section__status--error {
+  color: #e11d48;
+}

package/src/segment.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import "./segment.css"
+import { FormEvent, useState } from "react"
+import Image from "next/image"
+import { subscribeNewsletter } from "./subscribe-newsletter"
+
+export default function Newsletter({
+  imageUrl,
+  tagline = "Join our family & receive exclusive offers!",
+  submitLabel = "Join us",
+}: {
+  imageUrl?: string | null
+  tagline?: string
+  submitLabel?: string
+}) {
+  const [name, setName] = useState("")
+  const [email, setEmail] = useState("")
+  const [submitStatus, setSubmitStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
+  const [submitMessage, setSubmitMessage] = useState("")
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (submitStatus === "loading") return
+
+    const sanitizedEmail = email.trim()
+    const sanitizedName = name.trim()
+
+    if (!sanitizedEmail) {
+      setSubmitStatus("error")
+      setSubmitMessage("Please provide an email address to join the list.")
+      return
+    }
+
+    setSubmitStatus("loading")
+    setSubmitMessage("")
+
+    const result = await subscribeNewsletter({
+      email: sanitizedEmail,
+      name: sanitizedName || undefined,
+    })
+
+    if (result.success) {
+      setSubmitStatus("success")
+      setSubmitMessage("You're in! Expect curated updates in your inbox soon.")
+      setName("")
+      setEmail("")
+    } else {
+      setSubmitStatus("error")
+      setSubmitMessage(result.error || "Something went wrong while subscribing. Please try again.")
+    }
+  }
+
+  return (
+    <section className="newsletter-section" aria-label="Newsletter signup">
+      <div className="newsletter-section__inner">
+        <div className="newsletter-section__card">
+          <div className="newsletter-section__media">
+            {imageUrl ? (
+              <Image
+                src={imageUrl}
+                alt=""
+                fill
+                className="newsletter-section__image object-cover"
+                sizes="(max-width: 1024px) 100vw, 50vw"
+                unoptimized
+              />
+            ) : (
+              <div className="newsletter-section__media-fallback" aria-hidden />
+            )}
+          </div>
+
+          <div className="newsletter-section__form-panel">
+            <p className="newsletter-section__tagline">{tagline}</p>
+            <form onSubmit={handleSubmit} className="newsletter-section__form">
+              <label className="newsletter-section__field">
+                <span className="newsletter-section__label">Name</span>
+                <input
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className="newsletter-section__input"
+                  required
+                />
+              </label>
+              <label className="newsletter-section__field">
+                <span className="newsletter-section__label">Email</span>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="newsletter-section__input"
+                  required
+                />
+              </label>
+              <div className="newsletter-section__actions">
+                <button
+                  type="submit"
+                  disabled={submitStatus === "loading"}
+                  className="newsletter-section__submit"
+                >
+                  {submitStatus === "loading" ? "Sending…" : submitLabel}
+                </button>
+                {submitStatus !== "idle" && (
+                  <p
+                    role="status"
+                    aria-live="polite"
+                    className={`newsletter-section__status newsletter-section__status--${submitStatus}`}
+                  >
+                    {submitMessage}
+                  </p>
+                )}
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/subscribe-newsletter.ts

@@ -0,0 +1,50 @@
+import { loaderBus } from "@pradip1995/commerce-core/util/loader-bus"
+
+export async function subscribeNewsletter({
+  email,
+  name,
+  source = "newsletter",
+}: {
+  email: string
+  name?: string
+  source?: string
+}): Promise<{ success: boolean; error?: string }> {
+  const publishableKey = process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY
+  const baseUrl =
+    process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL || process.env.MEDUSA_BACKEND_URL || "http://localhost:9000"
+
+  if (!publishableKey) {
+    return { success: false, error: "Configuration error: Publishable API key is missing." }
+  }
+
+  try {
+    loaderBus.begin()
+    const response = await fetch(`${baseUrl}/store/contact-email-subscriptions`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-publishable-api-key": publishableKey,
+      },
+      body: JSON.stringify({
+        email,
+        status: "subscribed",
+        source,
+        ...(name ? { name } : {}),
+      }),
+    })
+
+    if (!response.ok) {
+      const error = await response.text().catch(() => "Unknown error")
+      return { success: false, error: error || `HTTP ${response.status}: Failed to subscribe` }
+    }
+
+    return { success: true }
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "An error occurred while subscribing",
+    }
+  } finally {
+    loaderBus.end()
+  }
+}