4e: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"] 4f: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"] 50:T2677,import { Fragment } from "react"; import { Body, Container, Head as EmailHead, Html, Img, Preview, Tailwind, Text, Heading, Section, Row, Column, 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 CouponsWithCenteredTextVariant = | "impact" | "inline" | "impact-alt" | "impact-background"; export interface CouponsWithCenteredTextProps { theme?: EmailTheme; overline?: string; discount?: string; code?: string; expiry?: string; description?: string; backgroundImageSrc?: string; buttonLabel?: string; buttonHref?: string; arrowIconSrc?: string; pageBackgroundColor?: string; backgroundColor?: string; codeBackgroundColor?: string; headingColor?: string; textColor?: string; buttonBackgroundColor?: string; buttonColor?: string; variant?: CouponsWithCenteredTextVariant; } const fontFamily = 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'; const responsiveStyles = ` @media only screen and (max-width: 599px) { .coupon-centered-description { padding-left: 24px !important; padding-right: 24px !important; } .coupon-centered-impact { font-size: 60px !important; } .coupon-centered-inline { font-size: 36px !important; } .coupon-centered-code { margin-top: 16px !important; } } `; const defaults = { arrowIconSrc: emailAsset("icon-arrow-right.png"), backgroundColor: "#fffffe", backgroundImageSrc: emailAsset("coupons/pattern.png"), buttonBackgroundColor: "#4f46e5", buttonColor: "#fffffe", buttonHref: "https://example.com", buttonLabel: "Shop now", code: "WINTER20OFF", codeBackgroundColor: "#f3f4f6", description: "Use code: WINTER20OFF at checkout, or click the link below to automatically apply the discount to your order.", discount: "20% OFF", expiry: "until 31/10/2025", headingColor: "#030712", overline: "Our biggest sale of the year", pageBackgroundColor: "#f1f5f9", textColor: "#4b5563", }; type SectionProps = Omit; type ResolvedProps = typeof defaults & SectionProps; const Overline = ({ light, props, }: { light: boolean; props: ResolvedProps; }) => ( {props.overline === defaults.overline && !light ? ( <> Our biggest sale of the year ) : ( props.overline )} ); const ImpactHeading = ({ alt, light, props, }: { alt: boolean; light: boolean; props: ResolvedProps; }) => ( {alt && props.discount === defaults.discount ? ( <> 20%OFF ) : ( props.discount )} ); const Description = ({ light, props, }: { light: boolean; props: ResolvedProps; }) => (

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

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

{props.code}

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

{props.buttonLabel}

); export const CouponsWithCenteredTextSection = (props: SectionProps) => { const variant = props.variant ?? "impact"; const resolved = { ...defaults, ...props } as ResolvedProps; const background = variant === "impact-background"; const inline = variant === "inline"; const alt = variant === "impact-alt"; return (

‍

{(() => { if (inline) { return ( {resolved.discount === defaults.discount ? "An extra 20% OFF" : resolved.discount} ); } return ( ); })()} {alt ? ( {resolved.expiry} ) : null} {!inline && !alt && !background ? ( ) : null}

‍

{background ? (

‍

) : null} ‍

); }; export const CouponsWithCenteredText = ({ pageBackgroundColor = "#f1f5f9", theme = defaultTheme, variant = "impact", ...props }: CouponsWithCenteredTextProps) => (