/* global React, ScreenFrame, SummaryTitle, SummarySelectors, SetTotal, SquareStill, ScrubSequence, GiftLine, KeraiGlassHeader, KERAI_HEAD_H, KeraiMark, Display, Eyebrow, Body, PrimaryButton, themeTokens, useTheme, useReducedMotion, Sheet, QrCode, WhatsAppGlyph, TYPE, SERIF, typeName */
const { useState: useStateD, useEffect: useEffectD } = React;
/* ------------------------------------------------------------------ */
/* 07. PAYMENT AND COLLECTION */
/* One quiet shell for every payment, dispensing and recovery state. */
/* The screen follows the checkout controller; the kiosk itself never */
/* handles card details — the card reader below the screen does. */
/* ------------------------------------------------------------------ */
const KCD = window.KeraiCommerce;
function useCheckoutState(controller) {
const [state, setState] = useStateD(() => controller.getState());
useEffectD(() => {
setState(controller.getState());
return controller.subscribe(setState);
}, [controller]);
return state;
}
/* Indeterminate loader — a slow turning arc. */
function PayLoader({ reduced }) {
const t = themeTokens(useTheme());
return (
);
}
/* Dispensing ring — fills from when the machine accepted the vend. It
only completes when the machine is expected to be ready on time. */
function DispenseRing({ state, script, size = 280, strong = false, settled = false, hidden = false }) {
const t = themeTokens(useTheme());
const reduced = useReducedMotion();
const [progress, setProgress] = useStateD(() => KCD.dispenseProgress(state, Date.now(), script) || 0);
useEffectD(() => {
let raf;
const tick = () => {
const p = KCD.dispenseProgress(state, Date.now(), script);
if (p != null) setProgress(p);
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [state, script]);
const R = size / 2 - 20;
const C = 2 * Math.PI * R;
const mid = size / 2;
return (
);
}
/* Points the customer at hardware below the screen: an arrow in a ring,
easing gently downwards. */
function CardCue({ reduced }) {
const t = themeTokens(useTheme());
return (
);
}
const PAY_BOX = window.KERAI_PAY_BOX || { top: 600, setTop: 400, setGap: 24 };
// One entry per piece. A set's pieces carry no price of their own; the
// set total is shown beneath them.
function purchasePieces(snap) {
const stock = KCD.baseStock();
// Gold colour and carat are already on the selectors, so the specs
// beneath carry the other six of the eight short rows.
const piece = (product, variant) => ({
key: variant.sku,
product,
metals: KCD.metalOptions(product, stock),
metal: variant.metal,
carats: KCD.caratOptions(product, variant.metal, stock),
caratId: variant.caratId,
specs: KCD.shortSpecRows(product, variant).filter((r) => r.id !== "colour" && r.id !== "carat"),
});
if (snap.kind === "set") {
return KCD.setParts(KCD.SET_BY_ID[snap.setId]).map(({ product, variant, still }) => ({
...piece(product, variant),
priceMinor: variant.amountMinor,
showPrice: true,
label: typeName(product),
still,
}));
}
const variant = KCD.VARIANT_BY_SKU[snap.vendSku];
return [{ ...piece(KCD.PRODUCT_BY_ID[snap.productId], variant), priceMinor: snap.amountMinor, showPrice: true }];
}
/* The purchase, boxed. Its right-hand side is the product page's own
title and selectors with just the chosen options, so the block carries
straight over; the square video then opens out to its left and the
details draw together beside it. A set's pieces arrive with their
square already showing the packshot (`still`), and the video fades in
over it. */
// The box opens to make room, the rule draws across, then the rows drift
// in one after another.
const SPEC_EASE = "cubic-bezier(.22,.7,.2,1)";
function PurchaseSpecs({ rows, compact, reduced, delay }) {
const t = themeTokens(useTheme());
const [open, setOpen] = useStateD(reduced);
useEffectD(() => {
if (reduced) return;
const id = setTimeout(() => setOpen(true), delay * 1000);
return () => clearTimeout(id);
}, []);
const row = (i) => (reduced ? {} : {
opacity: open ? 1 : 0,
transform: open ? "translateY(0)" : "translateY(14px)",
filter: open ? "blur(0)" : "blur(8px)",
transition: `opacity 0.9s ease ${0.25 + i * 0.07}s, transform 1.1s ${SPEC_EASE} ${0.25 + i * 0.07}s, filter 0.9s ease ${0.25 + i * 0.07}s`,
});
const rule = (
);
const brief = { purity: (v) => v.replace(/ \(.*\)$/, ""), type: () => "Lab-grown", shape: (v) => v.replace(/,? Excellent( cut)?$/, "") };
return (
);
}
/* One circle for every vend screen. The ring, the piece and the mark
crossfade in place, so a change of state does not slide the screen. */
function VendCircle({ mode, state, script, reduced }) {
const t = themeTokens(useTheme());
const snap = state.snapshot;
const parts = snap.kind === "set"
? KCD.setParts(KCD.SET_BY_ID[snap.setId])
: [{ product: KCD.PRODUCT_BY_ID[snap.productId], variant: KCD.VARIANT_BY_SKU[snap.vendSku] }];
const shots = parts.map((x) => KCD.packshot(x.product, x.variant.metal, x.variant.caratId).src);
const piece = mode === "ring" || mode === "delayed";
const fade = reduced ? "none" : "opacity 0.7s ease";
const mark = (shown, children) => (
);
}
/* Headline that steps through a few lines, each rising in from a blur
and lifting away as the next arrives. Holds on the last line, unless
`loop` is set, in which case it keeps going. */
function CyclingTitle({ lines, size = 68, interval = 3300, reduced, loop = false, calm = false }) {
const [idx, setIdx] = useStateD(0);
const [leaving, setLeaving] = useStateD(-1);
useEffectD(() => {
if (reduced || (!loop && idx >= lines.length - 1)) return;
const id = setTimeout(() => {
setLeaving(idx);
setIdx((idx + 1) % lines.length);
}, interval);
return () => clearTimeout(id);
}, [idx, reduced, loop, lines.length]);
return (
{lines.map((line, k) => {
const entering = k === idx;
const exiting = k === leaving && k !== idx;
if (!entering && !exiting) return null;
return (
{line}
);
})}
);
}
const DISPENSE_LINES = [
"Your jewellery is on its way",
"Your box is being prepared",
"Almost ready for you",
];
function SupportSheet({ open, onClose, orderRef }) {
const t = themeTokens(useTheme());
return (
Message us on WhatsApp about a piece, your order, a return or an exchange.
Point your phone's camera at the code.
{orderRef &&
Your order reference is {orderRef}
}
);
}
/* ------------------------------------------------------------------ */
/* Test outcomes — for demonstrations and acceptance testing only. A */
/* faint control in the corner opens them; choosing one restarts this */
/* payment and plays it through, card and all. */
/* ------------------------------------------------------------------ */
function OutcomeTrigger({ onOpen }) {
const t = themeTokens(useTheme());
return (
);
}
function OutcomeSheet({ open, onClose, activeId, onPick }) {
const t = themeTokens(useTheme());
const groups = [
{ id: "payment", title: "Payment" },
{ id: "vend", title: "Dispensing" },
];
return (
Restarts this payment and runs the card for you. For demonstrations only.
{groups.map((g) => (
))}
);
}
/* The receipt, handed to the guest's phone. */
function ReceiptQr({ snap }) {
const [link] = useStateD(() => KCD.receiptLink(snap, Date.now()));
return ;
}
const DELAY_LINES = [
"Taking a little longer",
"Still on its way",
"Nearly with you",
];
const CIRCLE = 380;
const TITLE_SIZE = 60;
// Matches the gap beneath the heading.
const PAY_GAP = 55;
// The heading and gift line sit this far above the purchase box.
const HEAD_ABOVE_BOX = 164;
const HEAD_H = 58;
const CIRCLE_GAP = 80;
const FAILURE_VIEWS = ["failure", "refunding", "refunded", "refund-pending", "auth-cancelled"];
function ScreenPay({ theme, controller, onLeave, outcomeId = null, onOutcome }) {
const t = themeTokens(theme);
const reduced = useReducedMotion();
const state = useCheckoutState(controller);
const screen = KCD.screenFor(state);
const snap = state.snapshot;
const logos = KCD.MACHINE.cardSchemes.filter((s) => s.enabled && s.asset);
// PIN, card removal and an unknown result stay on the two payment
// lines. The terminal below the screen carries those prompts.
const raw = screen === "insert" || screen === "pin" ? "ready"
: screen === "checking" ? "processing"
: screen === "remove" ? state.phase
: screen === "thanks" || (screen === "closed" && state.collected) ? "thanks"
: screen;
const view = FAILURE_VIEWS.includes(raw) ? "failure" : raw;
const isSet = snap.kind === "set";
const [sequence] = useStateD(() => {
const s = window.__keraiPaySequence || null;
window.__keraiPaySequence = null;
return s;
});
const pieces = React.useMemo(
() => purchasePieces(snap).map((p) => (sequence && !isSet ? { ...p, sequence } : p)),
[snap, sequence]
);
const boxTop = isSet ? PAY_BOX.setTop : PAY_BOX.top;
const [supportOpen, setSupportOpen] = useStateD(false);
const [outcomesOpen, setOutcomesOpen] = useStateD(false);
const [fromPdp] = useStateD(() => {
const v = !!window.__keraiPayFromPdp;
window.__keraiPayFromPdp = false;
return v;
});
// What each state shows: the product tile while paying, or the circle
// in its place once the machine is vending; the headline, supporting
// lines, a cue beneath them, and the actions that are safe at that moment.
let circle = null;
let title = "";
let lines = [];
let cue = null;
let actions = null;
const leave = () => (onLeave ? onLeave() : controller.close());
const support = (doneLabel) => (
setSupportOpen(true)}>Talk to us
{doneLabel}
);
const refLine = `Order reference ${snap.ref}`;
switch (view) {
case "ready":
title = "Please insert your card below";
// A set's two boxes leave room for the cue but not this line.
lines = isSet ? [] : ["Follow the instructions on the payment device"];
cue = ;
if (state.phase === "ready") {
actions = controller.cancel()}>Cancel;
}
break;
case "processing":
title = "Processing your payment";
cue = ;
break;
case "declined":
circle = "alert";
title = "Your payment didn't go through";
lines = ["You haven't been charged"];
actions = (
<>
controller.retry()}>Try another card controller.close()}>Cancel
);
break;
case "dispensing":
circle = "ring";
title = ;
break;
case "delayed":
circle = "delayed";
title = ;
break;
case "collect":
circle = "tick";
title = "Collect your item below";
cue = ;
break;
case "thanks":
circle = "receipt";
title = "Scan for your receipt";
lines = ["Add your email on your phone and we'll send it to you.", "Unworn pieces can be returned or exchanged within 30 days."];
actions = support("Done");
break;
case "failure":
circle = "alert";
title = `We couldn't dispense your ${isSet ? "set" : "piece"}`;
if (state.phase === "refund-pending") {
lines = ["Your refund hasn't gone through yet. Please message us and we'll sort it.", refLine];
} else if (state.phase === "auth-cancelled") {
lines = ["The payment has been cancelled, so you haven't been charged.", refLine];
} else {
lines = ["We're refunding you in full. It can take up to 5 working days to show.", refLine];
}
actions = support("Return home");
break;
default:
break;
}
const showTile = !circle;
const heading = {
declined: "Let's try again",
dispensing: "Payment approved",
delayed: "Payment approved",
collect: "Ready for you",
thanks: "Thank you",
failure: "Our apologies",
}[view] || "Your purchase";
// The circle keeps its last face while it fades away, so going back to
// the tile (another card after a decline) doesn't flash a new state.
const lastCircle = React.useRef(circle);
if (circle) lastCircle.current = circle;
// The headline sits as far below the tile as the heading sits above
// it, and the circle is centred on the tile, so neither moves when the
// tile gives way to the circle.
const stackRef = React.useRef(null);
const [stackH, setStackH] = useStateD(0);
React.useLayoutEffect(() => {
const el = stackRef.current;
const measure = () => setStackH(el.offsetHeight);
measure();
const ro = new ResizeObserver(measure);
ro.observe(el);
return () => ro.disconnect();
}, []);
const [glide, setGlide] = useStateD(false);
useEffectD(() => {
const id = requestAnimationFrame(() => setGlide(true));
return () => cancelAnimationFrame(id);
}, []);
// Once the tile gives way, the circle sits a fixed step under the
// heading and the headline closes up beneath it, however tall the tile was.
// A set's heading starts higher to fit two boxes; once vending, both
// settle in the same place.
const vendHeadTop = PAY_BOX.top - HEAD_ABOVE_BOX;
const headTop = circle ? vendHeadTop : boxTop - HEAD_ABOVE_BOX;
const circleTop = vendHeadTop + HEAD_H + CIRCLE_GAP;
const payTextTop = boxTop + stackH + PAY_GAP;
const textTop = circle ? Math.min(payTextTop, circleTop + CIRCLE + 50) : payTextTop;
const swap = "cubic-bezier(.22,.7,.2,1)";
return (
))}