@pradip1995/segment-jewelry-subscribe 0.1.2

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@pradip1995/segment-jewelry-subscribe",
+  "version": "0.1.2",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "src/segment.css"
+  ],
+  "files": [
+    "src",
+    "public"
+  ],
+  "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-analytics": "^0.2.4",
+    "@pradip1995/segment-primitives": "^0.4.0",
+    "@pradip1995/segment-tokens": "^0.3.7"
+  },
+  "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: "jewelry-subscribe",
+  type: "segment",
+  version: "0.1.0",
+  compatibleFramework: ["^1.0.0"],
+  dataKey: "jewelrySubscribe",
+}
+
+export default manifest

package/src/segment.css

@@ -0,0 +1,260 @@
+.jewelry-subscribe {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: var(--jewelry-subscribe-bg, #d8c8dc);
+}
+
+.jewelry-subscribe__background {
+  position: absolute;
+  inset: 0;
+}
+
+.jewelry-subscribe__background::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(
+    --jewelry-subscribe-scrim,
+    linear-gradient(
+      180deg,
+      rgba(216, 200, 220, 0.35) 0%,
+      rgba(216, 200, 220, 0.55) 45%,
+      rgba(216, 200, 220, 0.4) 100%
+    )
+  );
+  pointer-events: none;
+}
+
+.jewelry-subscribe__background-image {
+  object-fit: cover;
+  object-position: center center;
+}
+
+.jewelry-subscribe__background-image--mobile {
+  display: none;
+}
+
+.jewelry-subscribe__inner {
+  position: relative;
+  z-index: 1;
+  max-width: var(--container-max, 1200px);
+  margin: 0 auto;
+  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
+  box-sizing: border-box;
+}
+
+.jewelry-subscribe__content {
+  max-width: 34rem;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.jewelry-subscribe__eyebrow {
+  margin: 0 0 0.75rem;
+  font-family: var(--font-heading, Georgia, "Times New Roman", serif);
+  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--jewelry-subscribe-eyebrow, #1a1a1a);
+}
+
+.jewelry-subscribe__title {
+  margin: 0 0 1rem;
+  font-family: var(--font-heading, Georgia, "Times New Roman", serif);
+  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
+  font-weight: 400;
+  line-height: 1.12;
+  color: var(--jewelry-subscribe-title, #111111);
+}
+
+.jewelry-subscribe__description {
+  margin: 0 0 1.75rem;
+  font-family: var(--font-body, system-ui, sans-serif);
+  font-size: clamp(0.875rem, 1.5vw, 1rem);
+  line-height: 1.65;
+  color: var(--jewelry-subscribe-description, #3a3a3a);
+}
+
+.jewelry-subscribe__form {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  gap: 0;
+  width: 100%;
+  max-width: 32rem;
+  margin: 0 auto;
+}
+
+.jewelry-subscribe__field {
+  flex: 1;
+  min-width: 0;
+}
+
+.jewelry-subscribe__input {
+  width: 100%;
+  height: 100%;
+  min-height: 3rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid rgba(26, 26, 26, 0.35);
+  border-right: 0;
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--jewelry-subscribe-input-text, #1a1a1a);
+  font-family: var(--font-body, system-ui, sans-serif);
+  font-size: 0.875rem;
+  line-height: 1.4;
+  box-sizing: border-box;
+}
+
+.jewelry-subscribe__input::placeholder {
+  color: rgba(26, 26, 26, 0.55);
+}
+
+.jewelry-subscribe__input:focus {
+  outline: 2px solid rgba(26, 42, 68, 0.35);
+  outline-offset: -2px;
+}
+
+.jewelry-subscribe__submit {
+  flex-shrink: 0;
+  min-width: 7.5rem;
+  padding: 0.875rem 1.5rem;
+  border: 0;
+  background: var(--jewelry-subscribe-cta-bg, #1a2744);
+  color: #ffffff;
+  font-family: var(--font-body, system-ui, sans-serif);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.jewelry-subscribe__submit:hover,
+.jewelry-subscribe__submit:focus-visible {
+  background: var(--jewelry-subscribe-cta-bg-hover, #121b30);
+}
+
+.jewelry-subscribe__submit:disabled {
+  opacity: 0.72;
+  cursor: wait;
+}
+
+.jewelry-subscribe__privacy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  margin: 1rem 0 0;
+  max-width: 100%;
+  padding: 0 0.25rem;
+  font-family: var(--font-body, system-ui, sans-serif);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--jewelry-subscribe-privacy, #4a4a4a);
+}
+
+.jewelry-subscribe__privacy-icon {
+  flex-shrink: 0;
+  font-size: 0.8125rem;
+  line-height: 1;
+}
+
+.jewelry-subscribe__status {
+  margin: 0.875rem 0 0;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+}
+
+.jewelry-subscribe__status--success {
+  color: #1f6b3f;
+}
+
+.jewelry-subscribe__status--error {
+  color: #9b2c2c;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 640px) {
+  .jewelry-subscribe__background-image--desktop {
+    display: none;
+  }
+
+  .jewelry-subscribe__background-image--mobile {
+    display: block;
+    object-position: center center;
+  }
+
+  .jewelry-subscribe__background-image--single {
+    display: block;
+    object-position: center center;
+  }
+
+  .jewelry-subscribe__inner {
+    padding: 2.25rem 1rem 2.5rem;
+  }
+
+  .jewelry-subscribe__content {
+    max-width: 100%;
+  }
+
+  .jewelry-subscribe__eyebrow {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .jewelry-subscribe__title {
+    font-size: clamp(1.625rem, 8vw, 2.125rem);
+    margin-bottom: 0.75rem;
+  }
+
+  .jewelry-subscribe__description {
+    margin-bottom: 1.25rem;
+    font-size: 0.875rem;
+  }
+
+  .jewelry-subscribe__form {
+    flex-direction: column;
+    gap: 0.75rem;
+    max-width: 100%;
+  }
+
+  .jewelry-subscribe__input {
+    border-right: 1px solid rgba(26, 26, 26, 0.35);
+    min-height: 3.125rem;
+  }
+
+  .jewelry-subscribe__submit {
+    width: 100%;
+    min-width: 0;
+    min-height: 3.125rem;
+  }
+
+  .jewelry-subscribe__privacy {
+    flex-wrap: wrap;
+    font-size: 0.6875rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .jewelry-subscribe__inner {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .jewelry-subscribe__background::after {
+    background: transparent;
+  }
+}

package/src/segment.tsx

@@ -0,0 +1,150 @@
+"use client"
+
+import "./segment.css"
+import Image from "next/image"
+import { FormEvent, useState } from "react"
+import { trackFormSubmit } from "@pradip1995/segment-analytics/form-events"
+import { subscribeNewsletter } from "./subscribe-newsletter"
+
+/**
+ * Newsletter banner. Background images must be decorative jewelry/texture only —
+ * do not bake title/form into the image (that doubles content on mobile).
+ * When `mobileBackgroundImageUrl` is omitted, the desktop image is reused.
+ */
+export default function JewelrySubscribe({
+  eyebrow = "Join Our Journey",
+  title = "Be the First to Know",
+  description = "Exclusive Launch, early access & Styling Inspiration for Our Indus Crown.",
+  emailPlaceholder = "Enter your email...",
+  submitLabel = "Sign Up",
+  privacyText = "We Respect your Privacy, Unsubscribe at any time",
+  backgroundImageUrl = "/images/subscribe/subscribe-bg-desktop.png",
+  mobileBackgroundImageUrl,
+}: {
+  eyebrow?: string
+  title?: string
+  description?: string
+  emailPlaceholder?: string
+  submitLabel?: string
+  privacyText?: string
+  backgroundImageUrl?: string
+  /** Optional. Jewelry/texture only — no baked-in copy or form. Falls back to desktop. */
+  mobileBackgroundImageUrl?: string
+}) {
+  const [email, setEmail] = useState("")
+  const [submitStatus, setSubmitStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
+  const [submitMessage, setSubmitMessage] = useState("")
+
+  const desktopBg = backgroundImageUrl?.trim() || mobileBackgroundImageUrl?.trim() || ""
+  const mobileBg = mobileBackgroundImageUrl?.trim() || desktopBg
+  const hasSeparateMobileBg = Boolean(mobileBg && mobileBg !== desktopBg)
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (submitStatus === "loading") return
+
+    const sanitizedEmail = email.trim()
+    if (!sanitizedEmail) {
+      setSubmitStatus("error")
+      setSubmitMessage("Please enter your email address.")
+      return
+    }
+
+    setSubmitStatus("loading")
+    setSubmitMessage("")
+
+    const result = await subscribeNewsletter({ email: sanitizedEmail })
+
+    if (result.success) {
+      trackFormSubmit({ form_type: "jewelry_subscribe" })
+      setSubmitStatus("success")
+      setSubmitMessage("You're subscribed. Watch your inbox for exclusive updates.")
+      setEmail("")
+    } else {
+      setSubmitStatus("error")
+      setSubmitMessage(result.error || "Something went wrong. Please try again.")
+    }
+  }
+
+  if (!desktopBg) return null
+
+  return (
+    <section className="jewelry-subscribe" aria-labelledby="jewelry-subscribe-title">
+      <div className="jewelry-subscribe__background" aria-hidden="true">
+        <Image
+          src={desktopBg}
+          alt=""
+          fill
+          className={
+            hasSeparateMobileBg
+              ? "jewelry-subscribe__background-image jewelry-subscribe__background-image--desktop"
+              : "jewelry-subscribe__background-image jewelry-subscribe__background-image--single"
+          }
+          sizes="100vw"
+          unoptimized
+        />
+        {hasSeparateMobileBg ? (
+          <Image
+            src={mobileBg}
+            alt=""
+            fill
+            className="jewelry-subscribe__background-image jewelry-subscribe__background-image--mobile"
+            sizes="100vw"
+            unoptimized
+          />
+        ) : null}
+      </div>
+
+      <div className="jewelry-subscribe__inner">
+        <div className="jewelry-subscribe__content">
+          {eyebrow ? <p className="jewelry-subscribe__eyebrow">{eyebrow}</p> : null}
+          <h2 id="jewelry-subscribe-title" className="jewelry-subscribe__title">
+            {title}
+          </h2>
+          {description ? <p className="jewelry-subscribe__description">{description}</p> : null}
+
+          <form onSubmit={handleSubmit} className="jewelry-subscribe__form">
+            <label className="jewelry-subscribe__field">
+              <span className="sr-only">Email</span>
+              <input
+                type="email"
+                value={email}
+                onChange={(event) => setEmail(event.target.value)}
+                placeholder={emailPlaceholder}
+                className="jewelry-subscribe__input"
+                required
+                autoComplete="email"
+              />
+            </label>
+            <button
+              type="submit"
+              disabled={submitStatus === "loading"}
+              className="jewelry-subscribe__submit"
+            >
+              {submitStatus === "loading" ? "Signing up..." : submitLabel}
+            </button>
+          </form>
+
+          {privacyText ? (
+            <p className="jewelry-subscribe__privacy">
+              <span className="jewelry-subscribe__privacy-icon" aria-hidden="true">
+                🔒
+              </span>
+              {privacyText}
+            </p>
+          ) : null}
+
+          {submitStatus !== "idle" ? (
+            <p
+              role="status"
+              aria-live="polite"
+              className={`jewelry-subscribe__status jewelry-subscribe__status--${submitStatus}`}
+            >
+              {submitMessage}
+            </p>
+          ) : null}
+        </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 = "jewelry-subscribe",
+}: {
+  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()
+  }
+}