4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T3bc6,import { Fragment } from "react"; import { Body, Container, Head as EmailHead, Html, Img, Preview, Tailwind, Section, Row, Column, Heading, Text, Link, } from "react-email"; import { DefaultFonts } from "@/components/email/font-default"; import { createEmailTailwindConfig } from "@/components/email/email-theme"; import type { EmailTheme } from "@/components/email/email-theme"; import { emailAsset } from "@/components/email/email-assets"; import { defaultTheme } from "@/components/email/theme-default"; export type CardCouponsVariant = | "with-name" | "with-pattern" | "with-overlay" | "with-background-image" | "background-image-header"; export interface CardCouponsProps { theme?: EmailTheme; heading?: string; recipient?: string; code?: string; description?: string; logoSrc?: string; logoAlt?: string; backgroundImageSrc?: string; buttonLabel?: string; buttonHref?: string; arrowIconSrc?: string; pageBackgroundColor?: string; backgroundColor?: string; cardBackgroundColor?: string; codeBackgroundColor?: string; headingColor?: string; textColor?: string; mutedTextColor?: string; buttonBackgroundColor?: string; buttonColor?: string; variant?: CardCouponsVariant; } const fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const responsiveStyles = ` @media only screen and (max-width: 599px) { .coupon-card-logo { width: 88px !important; } .coupon-card-heading { font-size: 20px !important; line-height: 28px !important; } .coupon-card-description { padding-left: 24px !important; padding-right: 24px !important; } .coupon-card-name-pad { padding-top: 32px !important; padding-bottom: 32px !important; } .coupon-card-edge-spacer { line-height: 16px !important; } } @media only screen and (max-width: 430px) { .coupon-card-shell { padding-left: 24px !important; padding-right: 24px !important; } } `; const sharedDefaults = { arrowIconSrc: emailAsset("icon-arrow-right.png"), backgroundColor: "#fffffe", buttonBackgroundColor: "#4f46e5", buttonColor: "#fffffe", buttonHref: "https://example.com", buttonLabel: "Shop now", cardBackgroundColor: "#1f2937", code: "WINTER20OFF", codeBackgroundColor: "#f3f4f6", description: "Use code: WINTER20OFF at checkout, or click the link below to automatically apply the discount to your order.", headingColor: "#fffffe", logoAlt: "emailcn", mutedTextColor: "#9ca3af", pageBackgroundColor: "#f1f5f9", recipient: "Jenna Adams", textColor: "#4b5563", }; const variantDefaults: Record> = { "background-image-header": { backgroundImageSrc: emailAsset("coupons/bg-image-3.jpg"), code: "JFY20OFF", heading: "Just for you - 20% OFF", logoSrc: emailAsset("emailcn-insignia-mono-light.png"), }, "with-background-image": { backgroundImageSrc: emailAsset("coupons/bg-image-2.jpg"), heading: "An extra 20% OFF", logoSrc: emailAsset("emailcn-insignia-mono-light.png"), }, "with-name": { cardBackgroundColor: "#030712", heading: "Just for you - 20% OFF", logoSrc: emailAsset("emailcn-insignia-mono-light.png"), }, "with-overlay": { backgroundImageSrc: emailAsset("coupons/bg-image-1.jpg"), cardBackgroundColor: "#030712", heading: "An extra 20% OFF", logoSrc: emailAsset("emailcn-insignia-mono-light.png"), }, "with-pattern": { backgroundImageSrc: emailAsset("coupons/pattern.png"), heading: "An extra 20% OFF", logoSrc: emailAsset("emailcn-insignia-mono-light.png"), }, }; type SectionProps = Omit; type ResolvedProps = typeof sharedDefaults & SectionProps; const Logo = ({ props, width = 100, }: { props: ResolvedProps; width?: number; }) => ( {props.logoAlt}

); const getCodeBackgroundColor = ({ dark, props, white, }: { dark: boolean; props: ResolvedProps; white: boolean; }) => { if (white) { return "#fffffe"; } if (dark) { return props.cardBackgroundColor; } return props.codeBackgroundColor; }; const CodeBox = ({ dark = false, props, white = false, }: { dark?: boolean; props: ResolvedProps; white?: boolean; }) => (

{props.code}

); const OfferHeading = ({ props }: { props: ResolvedProps }) => ( {props.heading} ); const StandardCardContent = ({ codeStyle, props, }: { codeStyle: "dark" | "white"; props: ResolvedProps; }) => ( <>

‍

); const CouponCard = ({ props, variant, }: { props: ResolvedProps; variant: CardCouponsVariant; }) => { if (variant === "with-name") { return (

{props.recipient}

); } if (variant === "background-image-header") { return (

‍

{props.recipient}

{props.heading}

‍

); } const card = ( {(() => { if (variant === "with-overlay") { return (

); } return ( ); })()} ); return (

{card}

); }; const Description = ({ props }: { props: ResolvedProps }) => (

Use code: {props.code} at checkout, or click the link below to automatically apply the discount to your order.

); const CouponButton = ({ props }: { props: ResolvedProps }) => (

{props.buttonLabel}

); export const CardCouponsSection = (props: SectionProps) => { const variant = props.variant ?? "with-overlay"; const resolved = { ...sharedDefaults, ...variantDefaults[variant], ...props, } as ResolvedProps; const showDescription = variant === "with-name" || variant === "with-pattern" || variant === "with-overlay"; return (

‍

{showDescription ? ( <>

‍

) : null} {variant === "with-name" ? ( <>

‍

) : null}

‍

); }; export const CardCoupons = ({ pageBackgroundColor = "#f1f5f9", theme = defaultTheme, variant = "with-overlay", ...props }: CardCouponsProps) => (