@resira/ui 0.4.0 → 0.4.2

package/dist/index.cjs

@@ -173,6 +173,7 @@ function ResiraProvider({
   resourceId,
   domain,
   config,
+  checkoutSessionToken,
   onClose,
   children
 }) {
@@ -262,9 +263,10 @@ function ResiraProvider({
       deeplinkGuest,
       onStepChange,
       onBookingComplete,
-      onError
+      onError,
+      checkoutSessionToken
     }),
-    [client, resourceId, activeResourceId, setActiveResourceId, catalogMode, allowMultiSelect, domain, theme, locale, domainConfig, stripePublishableKey, termsText, waiverText, showWaiver, showTerms, showRemainingSpots, depositPercent, refundPolicy, onClose, classNames, serviceLayout, visibleServiceCount, groupServicesByCategory, renderServiceCard, showStepIndicator, deeplink, deeplinkGuest, onStepChange, onBookingComplete, onError]
+    [client, resourceId, activeResourceId, setActiveResourceId, catalogMode, allowMultiSelect, domain, theme, locale, domainConfig, stripePublishableKey, termsText, waiverText, showWaiver, showTerms, showRemainingSpots, depositPercent, refundPolicy, onClose, classNames, serviceLayout, visibleServiceCount, groupServicesByCategory, renderServiceCard, showStepIndicator, deeplink, deeplinkGuest, onStepChange, onBookingComplete, onError, checkoutSessionToken]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ResiraContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-root", style: cssVars, children }) });
 }
@@ -596,6 +598,60 @@ function useDishes(enabled = true) {
   }, [client, enabled]);
   return { dishes, loading, error };
 }
+function useCheckoutSession(token) {
+  const { client } = useResira();
+  const [session, setSession] = react.useState(null);
+  const [loading, setLoading] = react.useState(!!token);
+  const [error, setError] = react.useState(null);
+  const [errorCode, setErrorCode] = react.useState(null);
+  react.useEffect(() => {
+    if (!token) {
+      setSession(null);
+      setLoading(false);
+      setError(null);
+      setErrorCode(null);
+      return;
+    }
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    setErrorCode(null);
+    async function fetchSession() {
+      try {
+        const data = await client.getCheckoutSession(token);
+        if (!cancelled) {
+          setSession(data.session);
+        }
+      } catch (err) {
+        if (cancelled) return;
+        const apiErr = err;
+        const message = apiErr.body?.error ?? (err instanceof Error ? err.message : "Failed to load checkout session");
+        if (apiErr.status === 404) {
+          setError("Invalid booking link");
+          setErrorCode("not_found");
+        } else if (message.toLowerCase().includes("consumed")) {
+          setError("This booking was already completed");
+          setErrorCode("consumed");
+        } else if (message.toLowerCase().includes("expired")) {
+          setError("Session expired \u2014 please start a new booking");
+          setErrorCode("expired");
+        } else {
+          setError(message);
+          setErrorCode("unknown");
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+    fetchSession();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, token]);
+  return { session, loading, error, errorCode };
+}
 var defaultSize = 20;
 function CalendarIcon({ size = defaultSize, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2677,7 +2733,8 @@ var STEP_LABELS = {
   details: "Details",
   terms: "Terms",
   payment: "Payment",
-  confirmation: "Done"
+  confirmation: "Done",
+  checkout: "Checkout"
 };
 function ResiraBookingWidget() {
   const {
@@ -2699,16 +2756,26 @@ function ResiraBookingWidget() {
     deeplinkGuest,
     onStepChange,
     onBookingComplete,
-    onError
+    onError,
+    checkoutSessionToken
   } = useResira();
   const isDateBased = domain === "rental";
   const isTimeBased = domain === "restaurant" || domain === "watersport" || domain === "service";
   const isServiceBased = domain === "watersport" || domain === "service";
   const hasPayment = !!stripePublishableKey;
-  const STEPS = react.useMemo(
-    () => buildSteps(domain, hasPayment, catalogMode),
-    [domain, hasPayment, catalogMode]
-  );
+  const isCheckoutMode = !!checkoutSessionToken;
+  const {
+    session: checkoutSession,
+    loading: checkoutSessionLoading,
+    error: checkoutSessionError,
+    errorCode: checkoutSessionErrorCode
+  } = useCheckoutSession(checkoutSessionToken);
+  const STEPS = react.useMemo(() => {
+    if (isCheckoutMode) {
+      return ["checkout", "payment", "confirmation"];
+    }
+    return buildSteps(domain, hasPayment, catalogMode);
+  }, [domain, hasPayment, catalogMode, isCheckoutMode]);
   const initialStep = STEPS[0];
   const [step, setStep] = react.useState(initialStep);
   const [selectedResourceIds, setSelectedResourceIds] = react.useState([]);
@@ -2789,6 +2856,16 @@ function ResiraBookingWidget() {
   const [paymentFormReady, setPaymentFormReady] = react.useState(false);
   const [paymentFormSubmitting, setPaymentFormSubmitting] = react.useState(false);
   const paymentPayload = react.useMemo(() => {
+    if (isCheckoutMode && checkoutSession) {
+      return {
+        checkoutSessionToken,
+        guestName: guest.guestName.trim() || checkoutSession.guestName || "",
+        guestEmail: guest.guestEmail.trim() || checkoutSession.guestEmail || void 0,
+        guestPhone: guest.guestPhone.trim() || void 0,
+        notes: guest.notes.trim() || void 0,
+        termsAccepted: termsAccepted || void 0
+      };
+    }
     const resourceId = activeResourceId ?? selectedProduct?.equipmentIds?.[0] ?? "";
     return {
       productId: selectedProduct?.id ?? "",
@@ -2805,7 +2882,7 @@ function ResiraBookingWidget() {
       promoCode: discountCode.trim() || void 0,
       termsAccepted: termsAccepted || void 0
     };
-  }, [activeResourceId, selectedProduct, selection, guest, discountCode, termsAccepted]);
+  }, [activeResourceId, selectedProduct, selection, guest, discountCode, termsAccepted, isCheckoutMode, checkoutSession, checkoutSessionToken]);
   const blockedDates = react.useMemo(() => {
     const dates = calendarData?.dates?.blockedDates ?? availability?.dates?.blockedDates ?? [];
     return new Set(dates);
@@ -2863,6 +2940,8 @@ function ResiraBookingWidget() {
         return locale.payment;
       case "confirmation":
         return locale.bookingConfirmed;
+      case "checkout":
+        return "Checkout";
     }
   }, [step, isDateBased, isServiceBased, locale, domain]);
   const stepSubtitle = react.useMemo(() => {
@@ -2881,8 +2960,10 @@ function ResiraBookingWidget() {
         return "Complete your booking securely";
       case "confirmation":
         return "";
+      case "checkout":
+        return checkoutSession?.productName ?? "Complete your booking";
     }
-  }, [step, domainConfig.label, locale, allowMultiSelect, isServiceBased, selectedProduct, domain]);
+  }, [step, domainConfig.label, locale, allowMultiSelect, isServiceBased, selectedProduct, domain, checkoutSession]);
   const canContinue = react.useMemo(() => {
     if (step === "resource") {
       if (isServiceBased) return !!selectedProduct;
@@ -3060,6 +3141,35 @@ function ResiraBookingWidget() {
   const handlePaymentError = react.useCallback((msg) => {
     onError?.("payment_error", msg);
   }, [onError]);
+  const handleCheckoutSubmit = react.useCallback(async () => {
+    const contactMode = "email-required";
+    const errors = validateGuestForm(guest, {
+      required: locale.required,
+      invalidEmail: locale.invalidEmail,
+      contactRequired: locale.contactRequired
+    }, contactMode);
+    if (Object.keys(errors).length > 0) {
+      setFormErrors(errors);
+      return;
+    }
+    setFormErrors({});
+    if (checkoutSession?.checkoutConfig.termsRequired && !termsAccepted) {
+      setTermsError(locale.termsRequired);
+      return;
+    }
+    setTermsError(null);
+    const result = await createPayment(paymentPayload);
+    if (!result) return;
+    if (result.amountNow === 0) {
+      if (result.reservationId) {
+        const confirmed = await confirmPayment(result.paymentIntentId, result.reservationId);
+        if (!confirmed) return;
+      }
+      setStep("confirmation");
+    } else {
+      setStep("payment");
+    }
+  }, [guest, locale, checkoutSession, termsAccepted, createPayment, paymentPayload, confirmPayment]);
   const handleSubmitNoPayment = react.useCallback(async () => {
     if (showTerms && !termsAccepted) {
       setTermsError(locale.termsRequired);
@@ -3090,6 +3200,17 @@ function ResiraBookingWidget() {
   const footerBusy = submitting || creatingPayment || confirmingPayment || paymentFormSubmitting;
   const paymentActionDisabled = !paymentIntent || !paymentFormReady || paymentFormSubmitting || confirmingPayment;
   const [deeplinkApplied, setDeeplinkApplied] = react.useState(false);
+  const [checkoutGuestFilled, setCheckoutGuestFilled] = react.useState(false);
+  react.useEffect(() => {
+    if (checkoutGuestFilled || !checkoutSession) return;
+    setGuest((prev) => ({
+      guestName: checkoutSession.guestName ?? prev.guestName,
+      guestEmail: checkoutSession.guestEmail ?? prev.guestEmail,
+      guestPhone: prev.guestPhone,
+      notes: prev.notes
+    }));
+    setCheckoutGuestFilled(true);
+  }, [checkoutSession, checkoutGuestFilled]);
   react.useEffect(() => {
     if (deeplinkApplied || !deeplink) return;
     if (deeplink.productId && products.length > 0 && !selectedProduct) {
@@ -3325,6 +3446,93 @@ function ResiraBookingWidget() {
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-error-message", children: paymentError })
         ] })
       ] }),
+      step === "checkout" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        checkoutSessionLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-loading", role: "status", "aria-live": "polite", "aria-busy": "true", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-loading-text", children: locale.loading })
+        ] }),
+        checkoutSessionError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-error", role: "alert", "aria-live": "assertive", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(AlertCircleIcon, { size: 24 }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-error-message", children: checkoutSessionError }),
+          (checkoutSessionErrorCode === "not_found" || checkoutSessionErrorCode === "expired") && onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "resira-btn resira-btn--secondary resira-error-retry",
+              onClick: onClose,
+              children: "Start a new booking"
+            }
+          )
+        ] }),
+        checkoutSession && !checkoutSessionError && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary", style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-label", children: "Service" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-value", children: checkoutSession.productName })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-label", children: "Date" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-value", children: (/* @__PURE__ */ new Date(checkoutSession.date + "T00:00:00")).toLocaleDateString("default", { weekday: "short", month: "short", day: "numeric" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-label", children: "Time" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-summary-value", children: [
+                new Date(checkoutSession.startTime).toLocaleTimeString("default", { hour: "2-digit", minute: "2-digit", hour12: false }),
+                " \u2013 ",
+                new Date(checkoutSession.endTime).toLocaleTimeString("default", { hour: "2-digit", minute: "2-digit", hour12: false })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-label", children: "Duration" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-summary-value", children: [
+                checkoutSession.durationMinutes,
+                " min"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-label", children: locale.guests }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-value", children: checkoutSession.partySize })
+            ] }),
+            checkoutSession.promoCode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-label", children: locale.discountCode }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-value", children: checkoutSession.promoCode })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-summary-divider" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-label resira-summary-total", children: locale.total }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-value resira-summary-total", children: formatPrice5(checkoutSession.priceCents, checkoutSession.currency) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            GuestForm,
+            {
+              values: guest,
+              onChange: setGuest,
+              errors: formErrors
+            }
+          ),
+          checkoutSession.checkoutConfig.termsRequired && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 14 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            WaiverConsent,
+            {
+              termsAccepted,
+              onTermsChange: setTermsAccepted,
+              waiverAccepted: false,
+              onWaiverChange: () => {
+              },
+              discountCode: "",
+              onDiscountCodeChange: () => {
+              },
+              onPromoValidated: () => {
+              },
+              error: termsError ?? void 0
+            }
+          ) }),
+          paymentError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-error", style: { padding: "12px 0" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(AlertCircleIcon, { size: 18 }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-error-message", children: paymentError })
+          ] })
+        ] })
+      ] }),
       step === "payment" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         paymentError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-error", children: [
           /* @__PURE__ */ jsxRuntime.jsx(AlertCircleIcon, { size: 24 }),
@@ -3410,31 +3618,45 @@ function ResiraBookingWidget() {
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-value resira-summary-total", children: formatPrice5(computedPrice.total, currency) })
             ] })
           ] })
-        ] }) }),
-        onClose && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "resira-btn resira-btn--primary",
-            style: { marginTop: 20, width: "100%" },
-            onClick: onClose,
-            children: locale.done
-          }
-        )
+        ] }) })
       ] })
     ] }),
-    step !== "confirmation" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `resira-widget-footer${currentIndex > 0 ? "" : " resira-widget-footer--single"}`, children: [
-      currentIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-widget-footer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
           className: "resira-btn resira-btn--secondary",
           onClick: handleBack,
-          disabled: footerBusy,
+          disabled: footerBusy || currentIndex === 0,
+          style: currentIndex === 0 || step === "confirmation" ? { visibility: "hidden" } : void 0,
+          "aria-hidden": currentIndex === 0 || step === "confirmation",
           children: locale.back
         }
       ),
-      (step === "resource" || step === "availability") && /* @__PURE__ */ jsxRuntime.jsx(
+      step === "confirmation" ? onClose ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "resira-btn resira-btn--primary",
+          onClick: onClose,
+          children: locale.done
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { visibility: "hidden" }, className: "resira-btn resira-btn--primary", children: locale.continue }) : step === "checkout" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "resira-btn resira-btn--primary",
+          onClick: () => {
+            void handleCheckoutSubmit();
+          },
+          disabled: footerBusy || checkoutSessionLoading || !!checkoutSessionError,
+          children: creatingPayment ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner", style: { width: 16, height: 16 } }),
+            locale.processingPayment
+          ] }) : checkoutSession ? `${locale.payNow} \u2014 ${formatPrice5(checkoutSession.priceCents, checkoutSession.currency)}` : locale.continue
+        }
+      ) : step === "resource" || step === "availability" ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -3445,8 +3667,7 @@ function ResiraBookingWidget() {
           disabled: !canContinue || footerBusy,
           children: locale.continue
         }
-      ),
-      step === "details" && /* @__PURE__ */ jsxRuntime.jsx(
+      ) : step === "details" ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -3458,8 +3679,7 @@ function ResiraBookingWidget() {
             locale.loading
           ] }) : domain === "restaurant" && !hasPayment ? locale.reserveTable : locale.continue
         }
-      ),
-      step === "terms" && /* @__PURE__ */ jsxRuntime.jsx(
+      ) : step === "terms" ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -3476,8 +3696,7 @@ function ResiraBookingWidget() {
             locale.loading
           ] }) : hasPayment ? locale.continue : locale.bookNow
         }
-      ),
-      step === "payment" && !paymentIntent && /* @__PURE__ */ jsxRuntime.jsx(
+      ) : step === "payment" && !paymentIntent ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -3491,8 +3710,7 @@ function ResiraBookingWidget() {
             locale.processingPayment
           ] }) : computedPrice ? `${locale.payNow} \u2014 ${formatPrice5(computedPrice.amountNow, currency)}` : locale.payNow
         }
-      ),
-      step === "payment" && paymentIntent?.amountNow != null && paymentIntent.amountNow > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      ) : step === "payment" && paymentIntent?.amountNow != null && paymentIntent.amountNow > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -3504,6 +3722,9 @@ function ResiraBookingWidget() {
             locale.processingPayment
           ] }) : `${locale.payNow} \u2014 ${formatPrice5(paymentIntent.amountNow, paymentIntent.currency)}`
         }
+      ) : (
+        /* Fallback placeholder to hold space (e.g. zero-amount payment auto-advancing) */
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { visibility: "hidden" }, className: "resira-btn resira-btn--primary", children: locale.continue })
       )
     ] })
   ] });
@@ -3513,6 +3734,7 @@ function BookingModal({
   domain,
   resourceId,
   config,
+  checkoutSessionToken,
   trigger,
   buttonLabel = "Book Now",
   buttonClassName,
@@ -3636,6 +3858,7 @@ function BookingModal({
                   domain,
                   resourceId,
                   config,
+                  checkoutSessionToken,
                   onClose: handleClose,
                   children: /* @__PURE__ */ jsxRuntime.jsx(ResiraBookingWidget, {})
                 }
@@ -4025,6 +4248,7 @@ exports.XIcon = XIcon;
 exports.resolveTheme = resolveTheme;
 exports.themeToCSS = themeToCSS;
 exports.useAvailability = useAvailability;
+exports.useCheckoutSession = useCheckoutSession;
 exports.useDish = useDish;
 exports.useDishes = useDishes;
 exports.usePaymentIntent = usePaymentIntent;