@odla-ai/chapter 0.22.1 → 0.24.0

package/dist/{chunk-4COPR4SY.js → chunk-GMGTJIY3.js}

@@ -1,3 +1,8 @@
+import {
+  formatChapterCopy,
+  useChapterCopy
+} from "./chunk-WGQO4WDJ.js";
+
 // src/ui/slot-picker.tsx
 import { useMemo, useState } from "preact/hooks";
 
@@ -103,7 +108,9 @@ import { useEffect, useState as useState3 } from "preact/hooks";
 import { useState as useState2 } from "preact/hooks";
 import { jsx as jsx2, jsxs as jsxs2 } from "preact/jsx-runtime";
 function Rescheduler(props) {
-  const { api, applicationId, timezone, onRescheduled, label = "Change your time" } = props;
+  const inheritedCopy = useChapterCopy();
+  const copy = props.copy ?? inheritedCopy.members.reschedule;
+  const { api, applicationId, timezone, onRescheduled, label = copy.changeTime } = props;
   const [open, setOpen] = useState2(false);
   const [slots, setSlots] = useState2(null);
   const [tz, setTz] = useState2(timezone);
@@ -117,14 +124,14 @@ function Rescheduler(props) {
       const r = await api("/api/schedule/slots");
       if (r.schedulingReady === false) {
         setSlots([]);
-        setMsg("Scheduling is briefly unavailable. We'll reach out by email to arrange your call.");
+        setMsg(copy.unavailable);
         return;
       }
       setSlots(r.slots ?? []);
       if (r.timezone) setTz(r.timezone);
     } catch {
       setSlots([]);
-      setMsg("Times are briefly unavailable. Please try again.");
+      setMsg(copy.loadFailed);
     }
   };
   const pick = async (slot) => {
@@ -135,7 +142,7 @@ function Rescheduler(props) {
       setOpen(false);
       await onRescheduled();
     } catch (e) {
-      setMsg(e instanceof Error ? e.message : "That time is no longer available. Please pick another.");
+      setMsg(e instanceof Error ? e.message : copy.slotGone);
     } finally {
       setBusy(false);
     }
@@ -154,7 +161,7 @@ function Rescheduler(props) {
     ) });
   }
   return /* @__PURE__ */ jsxs2("div", { className: "msched", children: [
-    slots === null ? /* @__PURE__ */ jsx2("p", { className: "meeting-note", children: "Loading available times\u2026" }) : slots.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "meeting-note", children: msg ?? "No open times right now. Please check back soon." }) : /* @__PURE__ */ jsx2(
+    slots === null ? /* @__PURE__ */ jsx2("p", { className: "meeting-note", children: copy.loading }) : slots.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "meeting-note", children: msg ?? copy.noTimes }) : /* @__PURE__ */ jsx2(
       SlotPicker,
       {
         slots,
@@ -163,7 +170,7 @@ function Rescheduler(props) {
         onPick: (s) => void pick(s)
       }
     ),
-    busy ? /* @__PURE__ */ jsx2("p", { className: "meeting-note", children: "Rescheduling\u2026" }) : null,
+    busy ? /* @__PURE__ */ jsx2("p", { className: "meeting-note", children: copy.rescheduling }) : null,
     msg && slots && slots.length > 0 ? /* @__PURE__ */ jsx2("p", { className: "meeting-note error", children: msg }) : null,
     /* @__PURE__ */ jsx2("p", { className: "meeting-note", children: /* @__PURE__ */ jsx2(
       "a",
@@ -173,7 +180,7 @@ function Rescheduler(props) {
           e.preventDefault();
           setOpen(false);
         },
-        children: "Keep my current time"
+        children: copy.keepTime
       }
     ) })
   ] });
@@ -181,9 +188,9 @@ function Rescheduler(props) {
 
 // src/ui/members.tsx
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "preact/jsx-runtime";
-function card(kicker, body) {
+function card(copy, kicker, body) {
   return /* @__PURE__ */ jsxs3("div", { className: "card", children: [
-    /* @__PURE__ */ jsx3("div", { className: "card-label", children: "Your Application" }),
+    /* @__PURE__ */ jsx3("div", { className: "card-label", children: copy.provisional.cardLabel }),
     /* @__PURE__ */ jsxs3("div", { className: "meeting-block", children: [
       /* @__PURE__ */ jsx3("div", { className: "meeting-kicker", children: kicker }),
       body
@@ -191,47 +198,78 @@ function card(kicker, body) {
   ] });
 }
 function ProvisionalCard(props) {
-  const { api, application, applyHref, onReschedule } = props;
+  const { api, application, applyHref, copy, onReschedule } = props;
   if (!application) {
     return card(
-      "One step remains",
+      copy,
+      copy.provisional.applicationNeeded,
       /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: "Your account is ready, and the application that completes it takes a few minutes." }),
-        /* @__PURE__ */ jsx3("a", { className: "apply-link", href: applyHref, children: "Apply for membership" })
+        /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: copy.provisional.applicationNeededBody }),
+        /* @__PURE__ */ jsx3("a", { className: "apply-link", href: applyHref, children: copy.provisional.apply })
       ] })
     );
   }
   if (application.status === "refunded") {
-    return card("Membership refunded", /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: "Your fee has been refunded in full and your membership is canceled." }));
+    return card(
+      copy,
+      copy.provisional.refunded,
+      /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: copy.provisional.refundedBody })
+    );
   }
-  const membership = application.paid ? /* @__PURE__ */ jsxs3("div", { className: "meeting-note", children: [
-    "Your membership is active",
-    application.renewalAt ? ` and renews ${fmtDate(application.renewalAt)}` : "",
-    "."
-  ] }) : null;
+  const membership = application.paid ? /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: application.renewalAt ? formatChapterCopy(copy.provisional.renews, { date: fmtDate(application.renewalAt) }) : copy.provisional.active }) : null;
   if (application.meetingAt) {
     return card(
-      "Your introduction call",
+      copy,
+      copy.provisional.introductionCall,
       /* @__PURE__ */ jsxs3(Fragment2, { children: [
         /* @__PURE__ */ jsx3("div", { className: "meeting-date", children: fullLabel(application.meetingAt, application.timezone) }),
-        /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: "A calendar invitation with the video call link is in your email." }),
-        application.meetUrl ? /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: /* @__PURE__ */ jsx3("a", { href: application.meetUrl, target: "_blank", rel: "noopener", children: "Join the video call" }) }) : null,
-        /* @__PURE__ */ jsx3(Rescheduler, { api, applicationId: application.id, timezone: application.timezone, onRescheduled: onReschedule }),
+        /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: copy.provisional.calendarInvite }),
+        application.meetUrl ? /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: /* @__PURE__ */ jsx3("a", { href: application.meetUrl, target: "_blank", rel: "noopener", children: copy.provisional.joinCall }) }) : null,
+        /* @__PURE__ */ jsx3(
+          Rescheduler,
+          {
+            api,
+            applicationId: application.id,
+            timezone: application.timezone,
+            copy: copy.reschedule,
+            onRescheduled: onReschedule
+          }
+        ),
         membership
       ] })
     );
   }
   return card(
-    "Book your introduction call",
+    copy,
+    copy.provisional.bookCall,
     /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: "Your application is in. Choose a time below, and a calendar invitation will reach your email." }),
-      /* @__PURE__ */ jsx3(Rescheduler, { api, applicationId: application.id, timezone: application.timezone, onRescheduled: onReschedule, label: "Choose a time" }),
+      /* @__PURE__ */ jsx3("div", { className: "meeting-note", children: copy.provisional.bookCallBody }),
+      /* @__PURE__ */ jsx3(
+        Rescheduler,
+        {
+          api,
+          applicationId: application.id,
+          timezone: application.timezone,
+          copy: copy.reschedule,
+          onRescheduled: onReschedule,
+          label: copy.provisional.chooseTime
+        }
+      ),
       membership
     ] })
   );
 }
 function MembersArea(props) {
-  const { api, signOut, adminHref = "/admin/", applyHref = "/join.html", memberContent } = props;
+  const inheritedCopy = useChapterCopy();
+  const {
+    api,
+    signOut,
+    adminHref = "/admin/",
+    applyHref = "/join.html",
+    memberContent,
+    renderProvisional
+  } = props;
+  const copy = props.copy ?? inheritedCopy.members;
   const [me, setMe] = useState3(null);
   const [error, setError] = useState3(false);
   const reload = async () => {
@@ -244,8 +282,8 @@ function MembersArea(props) {
   useEffect(() => {
     void reload();
   }, []);
-  if (error) return /* @__PURE__ */ jsx3("p", { className: "meeting-note", children: "Sign in is briefly unavailable. Please refresh." });
-  if (!me) return /* @__PURE__ */ jsx3("p", { className: "meeting-note", children: "Loading\u2026" });
+  if (error) return /* @__PURE__ */ jsx3("p", { className: "meeting-note", children: copy.loadFailed });
+  if (!me) return /* @__PURE__ */ jsx3("p", { className: "meeting-note", children: inheritedCopy.common.loading });
   const role = me.role || "provisional";
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsxs3("div", { className: "card", children: [
@@ -254,16 +292,34 @@ function MembersArea(props) {
         /* @__PURE__ */ jsx3("span", { className: "role-badge " + role, children: role })
       ] }),
       /* @__PURE__ */ jsxs3("div", { className: "account-actions", children: [
-        /* @__PURE__ */ jsx3("button", { className: "btn secondary mini", onClick: signOut, children: "Sign out" }),
-        role === "admin" ? /* @__PURE__ */ jsx3("a", { className: "admin-console-link", href: adminHref, children: "Admin console" }) : null
+        /* @__PURE__ */ jsx3("button", { className: "btn secondary mini", onClick: signOut, children: copy.account.signOut }),
+        role === "admin" ? /* @__PURE__ */ jsx3("a", { className: "admin-console-link", href: adminHref, children: copy.account.adminConsole }) : null
       ] })
     ] }),
-    role === "provisional" ? /* @__PURE__ */ jsx3(ProvisionalCard, { api, application: me.application, applyHref, onReschedule: reload }) : memberContent ?? /* @__PURE__ */ jsx3("div", { className: "card", children: /* @__PURE__ */ jsx3("div", { className: "card-label", children: "Welcome back." }) })
+    role === "provisional" ? (() => {
+      const defaultContent = /* @__PURE__ */ jsx3(
+        ProvisionalCard,
+        {
+          api,
+          application: me.application,
+          applyHref,
+          copy,
+          onReschedule: reload
+        }
+      );
+      return renderProvisional?.({
+        api,
+        application: me.application,
+        applyHref,
+        reload,
+        defaultContent
+      }) ?? defaultContent;
+    })() : memberContent ?? /* @__PURE__ */ jsx3("div", { className: "card", children: /* @__PURE__ */ jsx3("div", { className: "card-label", children: copy.full.welcome }) })
   ] });
 }
 
 // src/ui/join.tsx
-import { useEffect as useEffect2, useState as useState5 } from "preact/hooks";
+import { useEffect as useEffect3, useState as useState6 } from "preact/hooks";
 
 // src/ui/payment-step.tsx
 import { useRef, useState as useState4 } from "preact/hooks";
@@ -288,9 +344,20 @@ function loadStripe() {
   return loader;
 }
 function PaymentStep(props) {
-  const { applicationId, refundPolicyText, onPaid } = props;
+  const inheritedCopy = useChapterCopy();
+  const {
+    applicationId,
+    refundPolicyText,
+    onPaid,
+    appearance,
+    fonts,
+    renderPriceLines,
+    children
+  } = props;
+  const copy = props.copy ?? inheritedCopy.join.payment;
   const [status, setStatus] = useState4("idle");
   const [error, setError] = useState4(null);
+  const [lineItems, setLineItems] = useState4(null);
   const mountRef = useRef(null);
   const stripeRef = useRef(null);
   const elementsRef = useRef(null);
@@ -304,17 +371,22 @@ function PaymentStep(props) {
         body: JSON.stringify({ applicationId, refundPolicyAck: true })
       });
       const data = await res.json();
-      if (!res.ok || !data.clientSecret || !data.publishableKey) throw new Error("Payment could not be set up. Please try again.");
+      if (!res.ok || !data.clientSecret || !data.publishableKey) throw new Error(copy.setupFailed);
       const stripe = (await loadStripe())(data.publishableKey);
-      const elements = stripe.elements({ clientSecret: data.clientSecret });
+      const elements = stripe.elements({
+        clientSecret: data.clientSecret,
+        ...appearance ? { appearance } : {},
+        ...fonts ? { fonts } : {}
+      });
       const element = elements.create("payment");
       if (mountRef.current) element.mount(mountRef.current);
       stripeRef.current = stripe;
       elementsRef.current = elements;
+      setLineItems(data.lineItems ?? null);
       setStatus("ready");
     } catch (e) {
       setStatus("idle");
-      setError(e instanceof Error ? e.message : "Payment could not be set up. Please try again.");
+      setError(e instanceof Error ? e.message : copy.setupFailed);
     }
   };
   const pay = async () => {
@@ -323,45 +395,68 @@ function PaymentStep(props) {
     if (!stripe || !elements) return;
     setStatus("confirming");
     setError(null);
-    const returnUrl = typeof window !== "undefined" ? `${window.location.origin}${window.location.pathname}?redirect_status=succeeded` : void 0;
+    let returnUrl;
+    if (typeof window !== "undefined") {
+      const next = new URL(window.location.href);
+      next.searchParams.set("application", applicationId);
+      next.searchParams.set("redirect_status", "succeeded");
+      returnUrl = next.toString();
+    }
     const result = await stripe.confirmPayment({ elements, confirmParams: { return_url: returnUrl }, redirect: "if_required" });
     if (result.error) {
-      setError(result.error.message ?? "The payment could not be completed.");
+      setError(result.error.message ?? copy.incomplete);
       setStatus("ready");
       return;
     }
     const paid = result.paymentIntent?.status;
     if (paid === "succeeded" || paid === "processing") onPaid();
     else {
-      setError("The payment did not complete. Please try again.");
+      setError(copy.incomplete);
       setStatus("ready");
     }
   };
   return /* @__PURE__ */ jsxs4("div", { className: "join-pay", children: [
-    /* @__PURE__ */ jsxs4("label", { className: "compliance-box", children: [
-      /* @__PURE__ */ jsx4(
-        "input",
-        {
-          type: "checkbox",
-          disabled: status !== "idle",
-          onChange: (e) => {
-            if (e.currentTarget.checked) void begin();
+    /* @__PURE__ */ jsxs4("div", { className: "compliance-box", children: [
+      /* @__PURE__ */ jsx4("p", { className: "compliance-policy", children: refundPolicyText }),
+      /* @__PURE__ */ jsxs4("label", { className: "compliance-check", children: [
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type: "checkbox",
+            disabled: status !== "idle",
+            onChange: (e) => {
+              if (e.currentTarget.checked) void begin();
+            }
           }
-        }
-      ),
-      /* @__PURE__ */ jsx4("span", { children: refundPolicyText })
+        ),
+        copy.consent ? /* @__PURE__ */ jsx4("span", { children: copy.consent }) : null
+      ] })
     ] }),
-    status === "loading" ? /* @__PURE__ */ jsx4("p", { className: "pay-status", children: "Preparing secure payment\u2026" }) : null,
+    status === "loading" ? /* @__PURE__ */ jsx4("p", { className: "pay-status", children: copy.preparing }) : null,
+    lineItems && renderPriceLines ? renderPriceLines(lineItems) : null,
+    children,
     /* @__PURE__ */ jsx4("div", { ref: mountRef, hidden: status === "idle" || status === "loading" }),
-    status === "ready" || status === "confirming" ? /* @__PURE__ */ jsx4("button", { className: "submit-btn", disabled: status === "confirming", onClick: () => void pay(), children: status === "confirming" ? "Processing\u2026" : "Pay and continue" }) : null,
+    status === "ready" || status === "confirming" ? /* @__PURE__ */ jsx4("button", { className: "submit-btn", disabled: status === "confirming", onClick: () => void pay(), children: status === "confirming" ? copy.processing : copy.payAndContinue }) : null,
     error ? /* @__PURE__ */ jsx4("p", { className: "pay-error", children: error }) : null
   ] });
 }
 
-// src/ui/join.tsx
+// src/ui/form-fields.ts
+function collectFormFields(form) {
+  const fields = {};
+  for (const key of new Set(form.keys())) {
+    const values = form.getAll(key).filter((v) => typeof v === "string");
+    if (values.length === 0) continue;
+    fields[key] = values.length > 1 ? values : values[0];
+  }
+  return fields;
+}
+
+// src/ui/join-booking.tsx
+import { useEffect as useEffect2, useState as useState5 } from "preact/hooks";
 import { jsx as jsx5, jsxs as jsxs5 } from "preact/jsx-runtime";
 function JoinBooking(props) {
-  const { applicationId, onBooked } = props;
+  const { applicationId, copy, onBooked } = props;
   const [state, setState] = useState5(null);
   const [msg, setMsg] = useState5(null);
   const [busy, setBusy] = useState5(false);
@@ -373,12 +468,12 @@ function JoinBooking(props) {
       const data = await res.json();
       if (data.schedulingReady === false || !data.slots?.length) {
         setState(null);
-        setMsg("Scheduling is briefly unavailable \u2014 we'll reach out by email to arrange your call.");
+        setMsg(copy.unavailable);
         return;
       }
       setState({ slots: data.slots, timezone: data.timezone ?? "UTC" });
     } catch {
-      setMsg("Times are briefly unavailable. Please try again.");
+      setMsg(copy.loadFailed);
     }
   };
   useEffect2(() => {
@@ -397,19 +492,19 @@ function JoinBooking(props) {
       const data = await res.json();
       if (res.status === 409 && data.code === "calendar_slot_unavailable") {
         setSelected(null);
-        setMsg("That time was just taken. Here are the current openings.");
+        setMsg(copy.slotTaken);
         await load();
         return;
       }
-      if (!res.ok) throw new Error(data.error ?? "The booking could not be completed.");
+      if (!res.ok) throw new Error(data.error ?? copy.failed);
       onBooked({ startAt: data.startAt ?? selected.startAt, timezone: state?.timezone ?? "UTC" });
     } catch (e) {
-      setMsg(e instanceof Error ? e.message : "The booking could not be completed.");
+      setMsg(e instanceof Error ? e.message : copy.failed);
     } finally {
       setBusy(false);
     }
   };
-  if (!state) return /* @__PURE__ */ jsx5("p", { className: "slots-status", children: msg ?? "Loading available times\u2026" });
+  if (!state) return /* @__PURE__ */ jsx5("p", { className: "slots-status", children: msg ?? copy.loading });
   return /* @__PURE__ */ jsxs5("div", { className: "join-book", children: [
     /* @__PURE__ */ jsx5(
       SlotPicker,
@@ -422,25 +517,86 @@ function JoinBooking(props) {
       }
     ),
     /* @__PURE__ */ jsxs5("div", { className: "slot-confirm", hidden: !selected, children: [
-      /* @__PURE__ */ jsx5("button", { className: "submit-btn", disabled: busy, onClick: () => void book(), children: busy ? "Booking\u2026" : "Book this time" }),
+      /* @__PURE__ */ jsx5("button", { className: "submit-btn", disabled: busy, onClick: () => void book(), children: busy ? copy.booking : copy.book }),
       msg ? /* @__PURE__ */ jsx5("p", { className: "step2-note", children: msg }) : null
     ] })
   ] });
 }
+
+// src/ui/join.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "preact/jsx-runtime";
+async function loadJoinResume(applicationId, fetcher = fetch) {
+  const res = await fetcher(`/api/join/resume?application=${encodeURIComponent(applicationId)}`);
+  const data = await res.json();
+  if (!res.ok) throw new Error(data.error ?? "The application could not be resumed.");
+  if (data.state === "done" && data.booked) {
+    return { step: "done", applicationId: data.applicationId, booked: data.booked };
+  }
+  if (data.state === "paymentPending") {
+    return { step: "paymentPending", applicationId: data.applicationId };
+  }
+  if (data.state === "booking") {
+    return { step: "booking", applicationId: data.applicationId };
+  }
+  return { step: "payment", applicationId: data.applicationId };
+}
 function JoinIsland(props) {
-  const { config, children, membersHref = "/members/" } = props;
-  const [step, setStep] = useState5("form");
-  const [applicationId, setApplicationId] = useState5(null);
-  const [error, setError] = useState5(null);
-  const [submitting, setSubmitting] = useState5(false);
-  const [booked, setBooked] = useState5(null);
+  const inheritedCopy = useChapterCopy();
+  const {
+    config,
+    children,
+    membersHref = "/members/",
+    renderStepHeader,
+    renderDone,
+    renderSubmit
+  } = props;
+  const copy = props.copy ?? config.copy ?? inheritedCopy.join;
+  const [state, setState] = useState6(props.initialState ?? { step: "form" });
+  const [error, setError] = useState6(null);
+  const [submitting, setSubmitting] = useState6(false);
+  useEffect3(() => {
+    const resolver = props.loadResume ?? (() => {
+      if (typeof window === "undefined") return Promise.resolve(null);
+      const applicationId = new URL(window.location.href).searchParams.get("application");
+      return applicationId ? loadJoinResume(applicationId) : Promise.resolve(null);
+    });
+    let live = true;
+    void resolver().then((resumed) => {
+      if (live && resumed) setState(resumed);
+    }).catch(() => {
+      if (live) setError(copy.form.unexpectedFailure);
+    });
+    return () => {
+      live = false;
+    };
+  }, [props.loadResume]);
+  useEffect3(() => {
+    if (state.step !== "paymentPending") return;
+    let live = true;
+    let timer;
+    const poll = async () => {
+      try {
+        const resumed = props.loadResume ? await props.loadResume() : await loadJoinResume(state.applicationId);
+        if (!live || !resumed) return;
+        setState(resumed);
+        if (resumed.step === "paymentPending") timer = setTimeout(() => void poll(), 1500);
+      } catch {
+        if (live) timer = setTimeout(() => void poll(), 2500);
+      }
+    };
+    timer = setTimeout(() => void poll(), 1e3);
+    return () => {
+      live = false;
+      if (timer) clearTimeout(timer);
+    };
+  }, [state, props.loadResume]);
   const submit = async (e) => {
     e.preventDefault();
+    if (submitting || props.submitDisabled === true) return;
     setSubmitting(true);
     setError(null);
     try {
-      const fields = {};
-      for (const [k, v] of new FormData(e.currentTarget).entries()) fields[k] = v;
+      const fields = collectFormFields(new FormData(e.currentTarget));
       fields.submissionId = crypto.randomUUID();
       const res = await fetch("/api/applications", {
         method: "POST",
@@ -448,42 +604,80 @@ function JoinIsland(props) {
         body: JSON.stringify(fields)
       });
       const data = await res.json();
-      if (!res.ok || !data.id) throw new Error(data.error ?? "Your application could not be submitted.");
-      setApplicationId(data.id);
-      setStep(config.paymentsReady ? "pay" : "book");
+      if (!res.ok || !data.id) throw new Error(data.error ?? copy.form.submitFailed);
+      setState({
+        step: config.paymentsReady ? "payment" : "booking",
+        applicationId: data.id
+      });
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Something went wrong. Please try again.");
+      setError(err instanceof Error ? err.message : copy.form.unexpectedFailure);
     } finally {
       setSubmitting(false);
     }
   };
-  if (step === "done" && booked) {
-    return /* @__PURE__ */ jsxs5("div", { className: "join-done card", children: [
-      /* @__PURE__ */ jsx5("div", { className: "card-label", children: "You're booked" }),
-      /* @__PURE__ */ jsx5("p", { className: "meeting-date", children: fullLabel(booked.startAt, booked.timezone) }),
-      /* @__PURE__ */ jsx5("p", { className: "meeting-note", children: "A calendar invitation with the video call link is on its way to your email." }),
-      /* @__PURE__ */ jsx5("a", { className: "apply-link", href: membersHref, children: "Go to your member area" })
+  const header = renderStepHeader?.({
+    state,
+    ..."applicationId" in state ? { applicationId: state.applicationId } : {}
+  });
+  if (state.step === "done") {
+    const body = renderDone?.({ ...state, membersHref }) ?? /* @__PURE__ */ jsxs6("div", { className: "join-done card", children: [
+      /* @__PURE__ */ jsx6("div", { className: "card-label", children: copy.done.label }),
+      /* @__PURE__ */ jsx6("p", { className: "meeting-date", children: fullLabel(state.booked.startAt, state.booked.timezone) }),
+      /* @__PURE__ */ jsx6("p", { className: "meeting-note", children: copy.done.calendarInvite }),
+      /* @__PURE__ */ jsx6("a", { className: "apply-link", href: membersHref, children: copy.done.memberArea })
+    ] });
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      header,
+      body
     ] });
   }
-  if (step === "book" && applicationId) {
-    return /* @__PURE__ */ jsx5(
-      JoinBooking,
-      {
-        applicationId,
-        onBooked: (b) => {
-          setBooked(b);
-          setStep("done");
+  if (state.step === "booking") {
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      header,
+      /* @__PURE__ */ jsx6(
+        JoinBooking,
+        {
+          applicationId: state.applicationId,
+          copy: copy.booking,
+          onBooked: (booked) => {
+            setState({ step: "done", applicationId: state.applicationId, booked });
+          }
         }
-      }
-    );
+      )
+    ] });
+  }
+  if (state.step === "payment") {
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      header,
+      /* @__PURE__ */ jsx6(
+        PaymentStep,
+        {
+          applicationId: state.applicationId,
+          refundPolicyText: config.refundPolicyText ?? "",
+          copy: copy.payment,
+          appearance: props.payment?.appearance,
+          fonts: props.payment?.fonts,
+          renderPriceLines: props.payment?.renderPriceLines,
+          onPaid: () => setState({ step: "booking", applicationId: state.applicationId }),
+          children: props.payment?.children
+        }
+      )
+    ] });
   }
-  if (step === "pay" && applicationId) {
-    return /* @__PURE__ */ jsx5(PaymentStep, { applicationId, refundPolicyText: config.refundPolicyText ?? "", onPaid: () => setStep("book") });
+  if (state.step === "paymentPending") {
+    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+      header,
+      /* @__PURE__ */ jsx6("p", { className: "pay-status", role: "status", children: copy.payment.pending })
+    ] });
   }
-  return /* @__PURE__ */ jsxs5("form", { className: "join-form", onSubmit: (e) => void submit(e), children: [
-    children,
-    error ? /* @__PURE__ */ jsx5("p", { className: "join-error", children: error }) : null,
-    /* @__PURE__ */ jsx5("button", { className: "submit-btn", type: "submit", disabled: submitting, children: submitting ? "Submitting\u2026" : "Submit application" })
+  const submitDisabled = submitting || props.submitDisabled === true;
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    header,
+    /* @__PURE__ */ jsxs6("form", { className: "join-form", onSubmit: (e) => void submit(e), children: [
+      children,
+      error ? /* @__PURE__ */ jsx6("p", { className: "join-error", children: error }) : null,
+      renderSubmit?.({ submitting, disabled: submitDisabled }) ?? /* @__PURE__ */ jsx6("button", { className: "submit-btn", type: "submit", disabled: submitDisabled, children: submitting ? copy.form.submitting : copy.form.submit })
+    ] })
   ] });
 }
 
@@ -500,6 +694,7 @@ export {
   Rescheduler,
   MembersArea,
   PaymentStep,
+  loadJoinResume,
   JoinIsland
 };
-//# sourceMappingURL=chunk-4COPR4SY.js.map
+//# sourceMappingURL=chunk-GMGTJIY3.js.map