create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/src/components/overlays/PromoPopup.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useId, useRef, useState } from 'react'
+import type { NovaImage } from '@tanqory/theme-kit'
+import { NewsletterForm } from '../forms/NewsletterForm'
+import { RichText } from '../content/RichText'
+import { Button } from '../base/Button'
+import { IconButton } from '../base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { usePageHidden } from '../../styles/motion'
+import { PHONE_QUERY, useMediaQuery } from '../../styles/viewport'
+import { TEXT_FIELD, inertWhen, useDialog } from './use-dialog'
+import './PromoPopup.css'
+
+export type PopupPreset = 'popup-newsletter' | 'popup-offer' | 'popup-announce'
+
+export interface PromoPopupProps {
+  open: boolean
+  /** Close, Esc, the scrim and "No thanks" all dismiss. */
+  onDismiss: () => void
+  preset: PopupPreset
+  placement: 'center' | 'side'
+  scheme: 'surface' | 'primary'
+  image?: NovaImage | null
+  heading: string
+  body?: string
+  ctaLabel?: string
+  ctaLink?: string
+  dismissLabel?: string
+  /** The newsletter form renders only with an endpoint (12G rule); ctaLink is then ignored. */
+  endpoint?: string
+  onSubscribe?: (email: string, consent: boolean) => Promise<unknown> | void
+}
+
+/**
+ * Nova 13 · 9 promotion popup — three honest presets, always closable:
+ * newsletter (image + sign-up form), offer (text + one CTA), announce (a
+ * quiet side card). Close is always visible; Esc and the scrim close; "No
+ * thanks" is plain text, never shaming copy. Every popup is a bottom sheet
+ * ≤ 70% on phone. The side card is non-modal on desktop.
+ */
+export function PromoPopup({ open, onDismiss, preset, placement, scheme, image, heading, body, ctaLabel, ctaLink, dismissLabel = 'No thanks', endpoint, onSubscribe }: PromoPopupProps): JSX.Element {
+  const { strings } = useNova()
+  const phone = useMediaQuery(PHONE_QUERY)
+  const panel = useRef<HTMLDivElement>(null)
+  const titleId = useId()
+  const side = placement === 'side' && !phone
+  // Modal (centre, and every phone sheet): focus trap + Esc. The desktop side card is non-modal: Esc still closes.
+  useDialog(open && !side, onDismiss, panel, () => panel.current?.querySelector<HTMLElement>(TEXT_FIELD) ?? panel.current?.querySelector<HTMLElement>('[data-dialog-title]'))
+  useEffect(() => {
+    if (!open || !side) return
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onDismiss()
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, side, onDismiss])
+  const form = preset === 'popup-newsletter' && Boolean(endpoint)
+  const withImage = preset === 'popup-newsletter' && image && !phone
+  const action = form ? (
+    <NewsletterForm action={endpoint!} buttonLabel={ctaLabel || undefined} onSubscribe={onSubscribe} size={phone ? 'lg' : 'md'} />
+  ) : ctaLabel?.trim() && ctaLink?.trim() ? (
+    <Button href={ctaLink} variant={preset === 'popup-announce' ? 'secondary' : 'primary'} block={preset !== 'popup-announce'}>
+      <bdi>{ctaLabel}</bdi>
+    </Button>
+  ) : null
+  const card = (
+    <div
+      ref={panel}
+      className="nv-popup"
+      data-preset={preset}
+      data-placement={side ? 'side' : 'center'}
+      data-image={withImage ? '' : undefined}
+      data-nv-surface={scheme === 'primary' ? 'inverse' : undefined}
+      data-scheme={scheme}
+      role="dialog"
+      aria-modal={side ? undefined : 'true'}
+      aria-labelledby={titleId}
+      tabIndex={-1}
+    >
+      <span className="nv-popup__grabber" aria-hidden />
+      {withImage && (
+        <div className="nv-popup__media">
+          <img src={image!.src} alt={image!.alt ?? ''} width={image!.width} height={image!.height} />
+        </div>
+      )}
+      <div className="nv-popup__content">
+        <IconButton icon="close" label={fmt(strings.closeNamed, { name: heading || strings.promotion })} onClick={onDismiss} className="nv-popup__close" />
+        <h2 className="nv-popup__title" id={titleId} tabIndex={-1} data-dialog-title="">
+          <bdi>{heading}</bdi>
+        </h2>
+        {body && <RichText html={body} className="nv-popup__body" />}
+        {action && <div className="nv-popup__action">{action}</div>}
+        {preset !== 'popup-announce' && dismissLabel.trim() && (
+          <button type="button" className="nv-popup__dismiss" onClick={onDismiss}>
+            {dismissLabel}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+  if (side) return <div className="nv-popup-side" data-open={open ? '' : undefined} {...inertWhen(!open)} aria-hidden={open ? undefined : true}>{card}</div>
+  return (
+    <div className="nv-overlay nv-popup-layer" data-open={open ? '' : undefined} {...inertWhen(!open)} aria-hidden={open ? undefined : true}>
+      <div className="nv-overlay__scrim" onClick={onDismiss} aria-hidden />
+      {card}
+    </div>
+  )
+}
+
+/* ── Behaviour: when a popup may open (kept apart from how it looks). ─────── */
+
+export interface PopupScheduleInput {
+  enabled: boolean
+  /** The cookie banner has been answered (a popup never covers or precedes consent). */
+  consentAnswered: boolean
+  pageType: string
+  shownThisSession: boolean
+  /** Last dismissal (ms), readable only when Preferences consent allows local storage. */
+  lastDismissed?: number | null
+  frequency: 'session' | '7d' | '30d'
+  now: number
+}
+
+const DAY = 86_400_000
+
+/** Never before consent, never twice in a session, never on cart / checkout; then the frequency window. */
+export function mayShowPopup(i: PopupScheduleInput): boolean {
+  if (!i.enabled || !i.consentAnswered || i.shownThisSession) return false
+  if (/^(cart|checkout)/.test(i.pageType)) return false
+  if (i.frequency === 'session' || i.lastDismissed == null) return true
+  return i.now - i.lastDismissed >= (i.frequency === '7d' ? 7 : 30) * DAY
+}
+
+const SESSION_KEY = 'nova:popup-shown'
+const LOCAL_KEY = 'nova:popup-dismissed'
+
+export interface PopupScheduleOptions {
+  enabled: boolean
+  consentAnswered: boolean
+  pageType: string
+  delay: '10s' | '30s' | 'exit-intent'
+  frequency: 'session' | '7d' | '30d'
+  /** Preferences consent: only then is the dismissal remembered across visits (DATA REQUIREMENT). */
+  storageAllowed?: boolean
+}
+
+/**
+ * Opens the popup after its delay (paused while the tab is hidden) or on
+ * exit intent (desktop pointer leaving the top edge; phones have no exit
+ * intent, so it never opens there), once the rules allow it.
+ */
+export function usePopupSchedule(o: PopupScheduleOptions): { open: boolean; dismiss: () => void } {
+  const [open, setOpen] = useState(false)
+  const hidden = usePageHidden()
+  const read = (store: 'session' | 'local', key: string) => {
+    try {
+      return (store === 'session' ? sessionStorage : localStorage).getItem(key)
+    } catch {
+      return null
+    }
+  }
+  const allowed = mayShowPopup({
+    enabled: o.enabled,
+    consentAnswered: o.consentAnswered,
+    pageType: o.pageType,
+    shownThisSession: read('session', SESSION_KEY) === '1',
+    lastDismissed: o.storageAllowed ? Number(read('local', LOCAL_KEY)) || null : null,
+    frequency: o.frequency,
+    now: Date.now(),
+  })
+  useEffect(() => {
+    if (!allowed || open || hidden) return
+    const show = () => {
+      setOpen(true)
+      try {
+        sessionStorage.setItem(SESSION_KEY, '1')
+      } catch {
+        /* storage blocked: at worst it shows again next page */
+      }
+    }
+    if (o.delay === 'exit-intent') {
+      const onOut = (e: MouseEvent) => !e.relatedTarget && e.clientY <= 0 && show()
+      document.addEventListener('mouseout', onOut)
+      return () => document.removeEventListener('mouseout', onOut)
+    }
+    const t = window.setTimeout(show, o.delay === '10s' ? 10_000 : 30_000)
+    return () => window.clearTimeout(t)
+  }, [allowed, open, hidden, o.delay])
+  const dismiss = () => {
+    setOpen(false)
+    if (o.storageAllowed) {
+      try {
+        localStorage.setItem(LOCAL_KEY, String(Date.now()))
+      } catch {
+        /* not remembered */
+      }
+    }
+  }
+  return { open, dismiss }
+}

package/templates/nova/src/components/overlays/QuickView.css

@@ -0,0 +1,31 @@
+/* Nova 13 · 6 quick view — media ½ · buy box ½ in dialog L; a sheet at 390. */
+.nv-quick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 480px; max-height: calc(100svh - 2 * var(--space-5)); }
+.nv-quick__media { position: relative; background: var(--color-media-bg); }
+.nv-quick__strip { position: relative; display: flex; height: 100%; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
+.nv-quick__strip li { flex: 0 0 100%; scroll-snap-align: start; }
+.nv-quick__strip img { width: 100%; height: 100%; object-fit: cover; }
+.nv-quick__dots { position: absolute; inset-block-end: var(--space-4); inset-inline: 0; display: flex; justify-content: center; gap: 6px; }
+.nv-quick__dots span { width: 6px; height: 6px; border-radius: 3px; background: rgba(17, 17, 17, 0.3); }
+.nv-quick__dots span[data-on] { width: 16px; background: var(--color-fg); }
+.nv-quick__info { display: grid; gap: var(--space-4); align-content: start; overflow-y: auto; padding: var(--space-6) var(--space-6) var(--space-6); }
+.nv-quick__head { display: flex; gap: var(--space-3); padding-inline-end: var(--space-7); }
+.nv-quick__thumb { display: none; }
+.nv-quick__vendor { color: var(--color-fg-muted); font-size: var(--type-caption); }
+.nv-quick__title { margin-block: var(--space-1); font-size: 1.5rem; line-height: 1.2; font-weight: var(--weight-heading); }
+.nv-quick__stock { display: flex; align-items: center; gap: var(--space-2); color: var(--color-warning-ink); font-size: var(--type-caption); }
+.nv-quick__stock span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
+.nv-quick__full { display: inline-flex; align-items: center; gap: var(--space-1); justify-self: start; min-height: 32px; color: var(--color-fg); font-size: 0.875rem; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset); }
+.nv-quick__error { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-7) var(--space-6); }
+.nv-quick__error a { color: var(--color-fg); text-decoration: underline; }
+.nv-quick__sk { display: block; border-radius: var(--radius-sm); background: var(--color-bg-muted); }
+.nv-quick__media.nv-quick__sk { border-radius: 0; }
+@media (max-width: 639.98px) {
+  .nv-quick { grid-template-columns: minmax(0, 1fr); min-height: 0; max-height: none; }
+  .nv-quick > .nv-quick__media { display: none; }
+  .nv-quick__info { padding: var(--space-3) var(--space-4) var(--space-5); }
+  .nv-quick__head { align-items: center; padding-inline-end: var(--space-7); }
+  .nv-quick__thumb { display: block; flex: none; width: 88px; height: 88px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-media-bg); }
+  .nv-quick__thumb img { width: 100%; height: 100%; object-fit: cover; }
+  .nv-quick__title { font-size: 1.0625rem; }
+  .nv-quick__full { justify-self: center; }
+}

package/templates/nova/src/components/overlays/QuickView.tsx

@@ -0,0 +1,127 @@
+import { sx, sxJoin } from '@tanqory/theme-kit'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import type { Product, ProductVariant } from '@tanqory/theme-kit'
+import { AddToCart } from '../commerce/AddToCart'
+import { Price } from '../commerce/Price'
+import { VariantPicker, findVariant, initialSelection, unavailableReason } from '../commerce/VariantPicker'
+import { Icon } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { useScrollRegion } from '../../styles/scroll'
+import { Modal } from './Modal'
+import './QuickView.css'
+
+export interface QuickViewProps {
+  open: boolean
+  onClose: () => void
+  /** null while loading or when it failed. */
+  product: Product | null
+  loading?: boolean
+  error?: boolean
+  /** The full product page (the error state links to it). */
+  productUrl?: string
+  onAdd?: (variant: ProductVariant, quantity: number) => Promise<unknown> | void
+}
+
+/** Low stock is named at or below this (12C threshold default). */
+const LOW = 5
+
+/**
+ * Nova 13 · 6 quick view (NEW) — opened from a product card's quick add on
+ * multi-variant products (12C). Dialog L 800 on desktop, a bottom sheet on
+ * phone: media, title, price, options, stock, Add to cart and a link to the
+ * full page — no tabs, reviews or recommendations. Loading opens at the
+ * final size with a skeleton; an error offers the full page. Not for
+ * single-variant products, bundles or gift cards.
+ */
+export function QuickView({ open, onClose, product: p, loading, error, productUrl, onAdd }: QuickViewProps): JSX.Element {
+  const { strings } = useNova()
+  const [selected, setSelected] = useState<Record<string, string>>({})
+  const [image, setImage] = useState(0)
+  const strip = useRef<HTMLUListElement>(null)
+  const region = useScrollRegion(strip, strings.productImages, [p?.id], { list: true })
+  useEffect(() => {
+    if (p) setSelected(initialSelection(p))
+    setImage(0)
+  }, [p])
+  const variant = useMemo(() => (p ? findVariant(p, selected) : undefined), [p, selected])
+  const title = p?.title ?? strings.quickView
+  const url = p?.url ?? productUrl
+
+  let body
+  if (p) {
+    const soldOut = !p.available
+    const reason = !soldOut && !variant?.available ? unavailableReason(p, selected, strings.combinationUnavailable) : undefined
+    const qty = variant?.quantityAvailable
+    const images = p.images.length ? p.images : p.featuredImage ? [p.featuredImage] : []
+    body = (
+      <div className="nv-quick">
+        <div className="nv-quick__media">
+          <ul ref={strip} className="nv-quick__strip" {...region} onScroll={(e) => setImage(Math.round(e.currentTarget.scrollLeft / Math.max(1, e.currentTarget.clientWidth)))}>
+            {images.map((img, i) => (
+              <li key={i}>
+                <img src={img.src} alt={img.alt ?? ''} width={img.width} height={img.height} loading={i ? 'lazy' : 'eager'} decoding="async" />
+              </li>
+            ))}
+          </ul>
+          {images.length > 1 && (
+            <p className="nv-quick__dots" aria-hidden>
+              {images.map((_, i) => (
+                <span key={i} data-on={i === Math.abs(image) ? '' : undefined} />
+              ))}
+            </p>
+          )}
+        </div>
+        <div className="nv-quick__info">
+          <div className="nv-quick__head">
+            <span className="nv-quick__thumb">{images[0] && <img src={images[0].src} alt="" width={images[0].width} height={images[0].height} />}</span>
+            <div>
+              {p.vendor && <p className="nv-quick__vendor"><bdi>{p.vendor}</bdi></p>}
+              <p className="nv-quick__title" aria-hidden>
+                <bdi>{p.title}</bdi>
+              </p>
+              <Price price={variant?.price ?? p.priceRange.min} compareAt={variant?.compareAtPrice ?? null} soldOut={soldOut} size="pdp" />
+            </div>
+          </div>
+          <VariantPicker product={p} selected={selected} onChange={(o, v) => setSelected((s) => ({ ...s, [o]: v }))} />
+          {variant?.available && qty != null && qty <= LOW && (
+            <p className="nv-quick__stock">
+              <span aria-hidden />
+              {fmt(strings.onlyLeft, { count: qty })}
+            </p>
+          )}
+          <AddToCart soldOut={soldOut} unavailableReason={reason} onAdd={variant ? () => onAdd?.(variant, 1) : undefined} />
+          <a className="nv-quick__full" href={p.url}>
+            {strings.viewFullDetails}
+            <Icon name="arrow-right" size="sm" />
+          </a>
+        </div>
+      </div>
+    )
+  } else if (error) {
+    body = (
+      <div className="nv-quick__error" role="alert">
+        <p>{strings.productLoadFailed}</p>
+        {url && <a href={url}>{strings.viewFullPage}</a>}
+      </div>
+    )
+  } else {
+    body = (
+      <div className="nv-quick" data-loading={loading ? '' : undefined} aria-busy="true">
+        <div className="nv-quick__media nv-quick__sk" />
+        <div className="nv-quick__info">
+          <span className={sxJoin("nv-quick__sk", sx({ width: '40%', height: 12 }))} />
+          <span className={sxJoin("nv-quick__sk", sx({ width: '80%', height: 24 }))} />
+          <span className={sxJoin("nv-quick__sk", sx({ width: '30%', height: 20 }))} />
+          <span className={sxJoin("nv-quick__sk", sx({ height: 44 }))} />
+          <span className={sxJoin("nv-quick__sk", sx({ height: 52 }))} />
+        </div>
+      </div>
+    )
+  }
+  return (
+    <Modal open={open} onClose={onClose} title={title} size="lg" bare className="nv-quick-modal">
+      {body}
+    </Modal>
+  )
+}

package/templates/nova/src/components/overlays/ReferralPanel.css

@@ -0,0 +1,16 @@
+.nv-referral { display: grid; gap: var(--space-5); padding-block: var(--space-4); }
+.nv-referral p { margin: 0; }
+.nv-referral__share { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
+.nv-referral__target { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding-inline: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-fg); font-size: 0.875rem; font-weight: var(--weight-medium); text-decoration: none; }
+.nv-referral__target:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
+.nv-referral__email, .nv-referral__invite { display: grid; gap: var(--space-2); justify-items: start; }
+.nv-referral__invite { justify-items: stretch; }
+.nv-referral__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
+.nv-referral__stats dd { margin: 0; font-size: 1.25rem; font-weight: var(--weight-medium); }
+/* The friend offer a ?ref= visit shows: a small card on the reading-end edge, a bottom card at phone width. */
+.nv-friend-offer { position: fixed; inset-block-end: var(--space-5); inset-inline-end: var(--space-5); z-index: var(--z-sticky); display: grid; gap: var(--space-3); width: min(360px, calc(100vw - 2 * var(--space-4))); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-fg); box-shadow: var(--shadow-floating); }
+.nv-friend-offer h2 { margin: 0; padding-inline-end: var(--touch-target); font-size: 1rem; font-weight: var(--weight-medium); }
+.nv-friend-offer p { margin: 0; }
+.nv-friend-offer__close { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); }
+.nv-friend-offer form { display: grid; gap: var(--space-2); }
+@media (max-width: 599px) { .nv-friend-offer { inset-inline: var(--space-3); inset-block-end: var(--space-3); width: auto; } }

package/templates/nova/src/components/overlays/ReferralPanel.tsx

@@ -0,0 +1,138 @@
+import { useState, type FormEvent } from 'react'
+import { shareTargets, useReferrals } from '@tanqory/theme-kit'
+import type { ReferralOffer, ReferralReward, ReferralState } from '@tanqory/theme-kit'
+import { Button } from '../base/Button'
+import { Input } from '../base/Input'
+import { FormField } from '../forms/FormField'
+import { formatMoney } from '../commerce/money'
+import { Icon, type IconName } from '../../styles/Icon'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt, type NovaStrings } from '../../styles/strings'
+import './ReferralPanel.css'
+
+/** The launcher's Referral tab (army #7751), the whole panel with loyalty off: the offer and reward, the link with
+ *  Copy, one tap to LINE, WhatsApp, Messenger and X (each carries the link), an email invite and the stats. */
+export function ReferralPanel({ state }: { state: ReferralState }): JSX.Element {
+  const { strings, locale } = useNova()
+  const n = (v: number) => new Intl.NumberFormat(locale).format(v)
+  const offer = offerAmount(state.offer, locale)
+  const labels: Record<string, [string, IconName]> = {
+    line: [strings.referralShareLine, 'chat'],
+    whatsapp: [strings.referralShareWhatsapp, 'chat'],
+    messenger: [strings.referralShareMessenger, 'facebook'],
+    x: [strings.referralShareX, 'x'],
+  }
+  const stats: [string, number][] = [
+    [strings.referralStatClicks, state.stats.clicks],
+    [strings.referralStatOrders, state.stats.friendOrders],
+    [strings.referralStatPending, state.stats.pending],
+    [strings.referralStatRewarded, state.stats.rewarded],
+  ]
+  return (
+    <div className="nv-referral">
+      <section className="nv-rewards__card">
+        <p>{fmt(strings.referralFriendOffer, { offer })}</p>
+        <p className="nv-rewards__meta">{fmt(strings.referralAdvocateReward, { reward: rewardText(state.reward, strings, locale) })}</p>
+        <FormField label={strings.referralLink}>
+          <Input type="text" readOnly value={state.shareUrl} onFocus={(e) => e.currentTarget.select()} />
+        </FormField>
+        <CopyLink url={state.shareUrl} />
+      </section>
+      <section className="nv-rewards__group" aria-label={strings.referralShareTitle}>
+        <h3 className="nv-rewards__heading">{strings.referralShareTitle}</h3>
+        <ul className="nv-referral__share">
+          {shareTargets(state.shareUrl, fmt(strings.referralShareText, { offer })).map((s) => (
+            <li key={s.id}>
+              <a className="nv-referral__target" href={s.href} target="_blank" rel="noopener noreferrer" data-share={s.id}>
+                <Icon name={labels[s.id][1]} size="sm" />
+                {labels[s.id][0]}
+              </a>
+            </li>
+          ))}
+        </ul>
+        <EmailInvite />
+      </section>
+      <section className="nv-rewards__group" aria-label={strings.referralStats}>
+        <h3 className="nv-rewards__heading">{strings.referralStats}</h3>
+        <dl className="nv-referral__stats">
+          {stats.map(([label, value]) => (
+            <div key={label}>
+              <dt className="nv-rewards__meta">{label}</dt>
+              <dd className="nv-tabular">{n(value)}</dd>
+            </div>
+          ))}
+        </dl>
+      </section>
+    </div>
+  )
+}
+
+/** "15%" or "฿100": the friend offer's amount. */
+export function offerAmount(offer: ReferralOffer, locale: string): string {
+  if (offer.type === 'PERCENTAGE') return `${new Intl.NumberFormat(locale).format(Number(offer.value))}%`
+  return formatMoney({ amount: Number(offer.value), currencyCode: offer.currency ?? 'USD' }, locale)
+}
+
+function rewardText(reward: ReferralReward, strings: NovaStrings, locale: string): string {
+  if (reward.type === 'POINTS') return fmt(strings.referralRewardPoints, { points: new Intl.NumberFormat(locale).format(reward.points) })
+  if (reward.type === 'PERCENTAGE_CODE') return fmt(strings.referralRewardPercentCode, { percent: new Intl.NumberFormat(locale).format(Number(reward.value)) })
+  const amount = formatMoney({ amount: Number(reward.value), currencyCode: reward.currency ?? 'USD' }, locale)
+  return fmt(reward.type === 'STORE_CREDIT' ? strings.referralRewardStoreCredit : strings.referralRewardAmountCode, { amount })
+}
+
+function CopyLink({ url }: { url: string }): JSX.Element {
+  const { strings } = useNova()
+  const [copied, setCopied] = useState(false)
+  // "Copied" is announced, then cleared so a second copy is announced again.
+  const onCopy = () =>
+    navigator.clipboard.writeText(url).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }, () => setCopied(false))
+  return (
+    <div className="nv-rewards__actions">
+      <Button size="sm" variant="secondary" onClick={() => void onCopy()}>
+        <Icon name={copied ? 'check' : 'link'} size="sm" />
+        {strings.copyLink}
+      </Button>
+      <span className="nv-rewards__meta" aria-live="polite">{copied ? strings.linkCopied : ''}</span>
+    </div>
+  )
+}
+
+/** "Share by email": a disclosure with the friend's email, sent through the store's invite email. */
+function EmailInvite(): JSX.Element {
+  const { strings } = useNova()
+  const { invite } = useReferrals()
+  const [open, setOpen] = useState(false)
+  const [email, setEmail] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [result, setResult] = useState<{ ok: boolean; email: string } | null>(null)
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setBusy(true)
+    setResult(null)
+    const ok = await invite(email)
+    setBusy(false)
+    setResult({ ok, email: email.trim() })
+    if (ok) setEmail('')
+  }
+  return (
+    <div className="nv-referral__email">
+      <Button size="sm" variant="secondary" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
+        <Icon name="mail" size="sm" />
+        {strings.referralShareEmail}
+      </Button>
+      {open && (
+        <form className="nv-referral__invite" onSubmit={(e) => void onSubmit(e)} aria-label={strings.referralShareEmail}>
+          <FormField label={strings.referralInviteLabel} required>
+            <Input type="email" autoComplete="off" value={email} onChange={(e) => setEmail(e.currentTarget.value)} />
+          </FormField>
+          <Button type="submit" size="sm" loading={busy}>{strings.referralInviteSend}</Button>
+        </form>
+      )}
+      <p className="nv-rewards__status" role="status">{result?.ok ? fmt(strings.referralInviteSent, { email: result.email }) : ''}</p>
+      {result && !result.ok && <p className="nv-rewards__error" role="alert">{strings.referralInviteFailed}</p>}
+    </div>
+  )
+}

package/templates/nova/src/components/overlays/RewardsLauncher.css

@@ -0,0 +1,22 @@
+/* Floating, on the reading-start edge so it never covers the cart or the toasts (inline-end). */
+.nv-rewards-launcher { position: fixed; inset-block-end: var(--space-5); inset-inline-start: var(--space-5); z-index: var(--z-sticky); display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding-inline: var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--color-fg); color: var(--color-bg); box-shadow: var(--shadow-floating); font: inherit; font-size: 0.875rem; font-weight: var(--weight-medium); cursor: pointer; }
+.nv-rewards-launcher:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 3px; }
+.nv-rewards__panel { display: grid; gap: var(--space-5); padding-block: var(--space-4); }
+.nv-rewards__card { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
+.nv-rewards__title, .nv-rewards__heading { margin: 0; font-size: 1rem; font-weight: var(--weight-medium); }
+.nv-rewards__big { margin: 0; font-size: 1.5rem; font-weight: var(--weight-medium); }
+.nv-rewards__meta { display: block; color: var(--color-fg-muted); font-size: var(--type-caption); }
+.nv-rewards__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+.nv-rewards__tier { display: grid; gap: var(--space-2); margin-block-start: var(--space-2); }
+.nv-rewards__tier p { margin: 0; }
+.nv-rewards__bar { display: block; height: 6px; border-radius: 3px; background: var(--color-bg-muted); overflow: hidden; }
+.nv-rewards__bar span { display: block; height: 100%; background: var(--color-fg); }
+.nv-rewards__status:empty { padding: 0; }
+.nv-rewards__status, .nv-rewards__error { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-muted); font-size: 0.875rem; }
+.nv-rewards__error { color: var(--color-danger); }
+.nv-rewards__group { display: grid; gap: var(--space-2); }
+.nv-rewards__list { list-style: none; margin: 0; padding: 0; }
+.nv-rewards__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-block: var(--space-3); border-block-end: 1px solid var(--color-border); }
+.nv-rewards__code code { display: block; font-size: 0.875rem; }
+.nv-rewards__done { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-success); font-size: var(--type-caption); }
+.nv-rewards__more { justify-self: center; display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--color-fg); font-size: 0.875rem; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: var(--underline-offset); }