tf-checkout-react 2.0.0-beta.0 → 2.0.0-beta.1

package/dist/index.d.mts

@@ -152,6 +152,14 @@ interface TfProfile {
     hasDashboardAccess: boolean;
     ticketHolders: TfTicketHolder[];
     linkedCryptoWallets: string[];
+    /**
+     * Calendar date as `YYYY-MM-DD`, or null when none is on file. The profile
+     * endpoint has always returned this; it simply wasn't declared here, so the
+     * checkout couldn't prefill it. Only populated for buyers who have been
+     * through an age-gated checkout, RN registration or SSO, so treat it as
+     * best-effort.
+     */
+    dateOfBirth?: string | null;
 }
 interface TfCountry {
     id: string | number;
@@ -1916,6 +1924,14 @@ interface CheckoutEngine {
     /** Run ID verification for a NEED_ID_VERIFICATION order. */
     runIdVerification: (orderHash: string, options?: RunIdVerificationOptions) => Promise<IdVerificationStatus | undefined>;
     reset: () => void;
+    /**
+     * Move the cart to the terminal 'expired' state. Until now this only happened
+     * reactively, when the backend rejected a call with an expired-cart 422 — so a
+     * reservation that simply ran out on screen left the buyer editing a form that
+     * could no longer be paid for. Consumers driving the countdown call this when
+     * it reaches zero.
+     */
+    expireCart: () => void;
 }
 /**
  * Binds the orchestration to a store + a platform's ports. In React, wrap this

package/dist/index.d.ts

@@ -152,6 +152,14 @@ interface TfProfile {
     hasDashboardAccess: boolean;
     ticketHolders: TfTicketHolder[];
     linkedCryptoWallets: string[];
+    /**
+     * Calendar date as `YYYY-MM-DD`, or null when none is on file. The profile
+     * endpoint has always returned this; it simply wasn't declared here, so the
+     * checkout couldn't prefill it. Only populated for buyers who have been
+     * through an age-gated checkout, RN registration or SSO, so treat it as
+     * best-effort.
+     */
+    dateOfBirth?: string | null;
 }
 interface TfCountry {
     id: string | number;
@@ -1916,6 +1924,14 @@ interface CheckoutEngine {
     /** Run ID verification for a NEED_ID_VERIFICATION order. */
     runIdVerification: (orderHash: string, options?: RunIdVerificationOptions) => Promise<IdVerificationStatus | undefined>;
     reset: () => void;
+    /**
+     * Move the cart to the terminal 'expired' state. Until now this only happened
+     * reactively, when the backend rejected a call with an expired-cart 422 — so a
+     * reservation that simply ran out on screen left the buyer editing a form that
+     * could no longer be paid for. Consumers driving the countdown call this when
+     * it reaches zero.
+     */
+    expireCart: () => void;
 }
 /**
  * Binds the orchestration to a store + a platform's ports. In React, wrap this

package/dist/index.esm.js

@@ -2461,22 +2461,29 @@ var getOrderReview = async (orderHash) => {
   };
 };
 var mapProfileToBilling = (profile) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const str = (v) => v == null || v === "" ? void 0 : String(v);
   const idStr = (v) => {
     const s = str(v);
     return s === void 0 || s === "0" || s === "-1" ? void 0 : s;
   };
+  const dobParts = /^(\d{4})-(\d{2})-(\d{2})/.exec((_a = profile.dateOfBirth) != null ? _a : "");
+  const dob = dobParts && Number(dobParts[1]) > 1900 ? {
+    dobYear: Number(dobParts[1]),
+    dobMonth: Number(dobParts[2]),
+    dobDay: Number(dobParts[3])
+  } : {};
   return {
-    firstName: (_a = profile.firstName) != null ? _a : "",
-    lastName: (_b = profile.lastName) != null ? _b : "",
-    email: (_c = profile.email) != null ? _c : "",
+    firstName: (_b = profile.firstName) != null ? _b : "",
+    lastName: (_c = profile.lastName) != null ? _c : "",
+    email: (_d = profile.email) != null ? _d : "",
     phone: str(profile.phone),
     streetAddress: str(profile.streetAddress),
     city: str(profile.city),
     zip: str(profile.zipCode),
     countryId: idStr(profile.countryId),
-    stateId: idStr(profile.stateId)
+    stateId: idStr(profile.stateId),
+    ...dob
   };
 };
 var completeFreeRegistration = async (orderHash) => {
@@ -3401,6 +3408,10 @@ var createEngine = (config) => {
     reset: () => {
       clearCartGuestToken();
       store.reset();
+    },
+    expireCart: () => {
+      clearCartGuestToken();
+      store.expireCart();
     }
   };
 };
@@ -3907,6 +3918,12 @@ var useCheckout = (config) => {
     return () => clearInterval(t);
   }, [snapshot.expiresAt]);
   const secondsLeft = snapshot.expiresAt != null ? Math.max(0, Math.round((snapshot.expiresAt - now) / 1e3)) : void 0;
+  useEffect(() => {
+    if (secondsLeft !== 0) return;
+    if (snapshot.status === "placing" || snapshot.status === "succeeded") return;
+    if (snapshot.status === "expired") return;
+    engine.expireCart();
+  }, [engine, secondsLeft, snapshot.status]);
   const missingRequiredAddonNames = missingRequiredAddOns(
     snapshot.requiredAddOns,
     snapshot.addOns
@@ -6173,6 +6190,8 @@ var AuthModal = ({
   const previouslyFocused = useRef4(null);
   const submittingRef = useRef4(auth.isSubmitting);
   submittingRef.current = auth.isSubmitting;
+  const onCloseRef = useRef4(onClose);
+  onCloseRef.current = onClose;
   useEffect7(() => {
     var _a, _b, _c;
     if (!open) return;
@@ -6193,7 +6212,7 @@ var AuthModal = ({
     initialFocus == null ? void 0 : initialFocus.focus();
     const onKeyDown = (event) => {
       var _a2;
-      if (event.key === "Escape" && !submittingRef.current) onClose();
+      if (event.key === "Escape" && !submittingRef.current) onCloseRef.current();
       if (event.key !== "Tab") return;
       const elements = focusable();
       if (elements.length === 0) {
@@ -6218,7 +6237,7 @@ var AuthModal = ({
       document.body.style.overflow = previousOverflow;
       (_a2 = previouslyFocused.current) == null ? void 0 : _a2.focus();
     };
-  }, [onClose, open]);
+  }, [open]);
   if (!open) return null;
   const closeFromBackdrop = (event) => {
     if (event.target === event.currentTarget && !auth.isSubmitting) onClose();
@@ -7389,6 +7408,19 @@ var BuyerField = ({
   ));
 };
 
+// src/sections/billing/fieldRules.ts
+var isBlankPhone = (phone) => !phone || /^\+?\d{0,4}$/.test(phone.trim());
+var DOB_MIN = "1900-01-01";
+var todayISO = () => {
+  const now = /* @__PURE__ */ new Date();
+  return [
+    now.getFullYear(),
+    String(now.getMonth() + 1).padStart(2, "0"),
+    String(now.getDate()).padStart(2, "0")
+  ].join("-");
+};
+var toDateInputValue = (year, month, day) => year && month && day ? `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}` : void 0;
+
 // src/sections/billing/TicketHoldersCard.tsx
 import React27 from "react";
 import { PhoneInput as PhoneInput2 } from "react-international-phone";
@@ -7471,6 +7503,8 @@ var TicketHoldersCard = ({
         className: "tf-checkout-phone",
         inputClassName: `tf-checkout-input tf-checkout-phone__input${fieldError(phoneKey) ? " tf-checkout-input--invalid" : ""}`,
         defaultCountry: phoneCountry,
+        disableDialCodeAndPrefix: true,
+        showDisabledDialCodeAndPrefix: true,
         disableDialCodePrefill: true,
         value: holder.phone,
         required: true,
@@ -7593,7 +7627,7 @@ var BillingInfo = ({
         lastName: prev.lastName || profileBilling.lastName || "",
         email: prev.email || profileBilling.email || "",
         confirmEmail: prev.confirmEmail || (checkout.isLoggedIn ? profileBilling.email : "") || "",
-        phone: prev.phone || profileBilling.phone,
+        phone: (isBlankPhone(prev.phone) ? void 0 : prev.phone) || profileBilling.phone,
         streetAddress: prev.streetAddress || profileBilling.streetAddress,
         city: prev.city || profileBilling.city,
         zip: prev.zip || profileBilling.zip,
@@ -7603,6 +7637,12 @@ var BillingInfo = ({
       const keys = Object.keys(next);
       return keys.every((k) => next[k] === prev[k]) ? prev : next;
     });
+    setDob((prev) => {
+      var _a2;
+      if (prev) return prev;
+      const { dobYear: dobYear2, dobMonth: dobMonth2, dobDay: dobDay2 } = profileBilling;
+      return (_a2 = toDateInputValue(dobYear2, dobMonth2, dobDay2)) != null ? _a2 : prev;
+    });
   }, [profile.data, checkout.isLoggedIn]);
   useEffect11(() => {
     setHolders(
@@ -7684,6 +7724,7 @@ var BillingInfo = ({
     countryDefaultApplied.current = true;
     setBilling((current2) => {
       var _a3;
+      if (current2.countryId) return current2;
       return {
         ...current2,
         countryId: String(preferred.id),
@@ -7724,24 +7765,30 @@ var BillingInfo = ({
   }, [billing.stateId, billing.stateCode, states]);
   const setB = (k) => (e) => setBilling((b) => ({ ...b, [k]: e.target.value }));
   const patchHolder = (i, patch2) => setHolders((hs) => hs.map((h, j) => j === i ? { ...h, ...patch2 } : h));
+  const dobMax = useMemo5(todayISO, []);
   const [dobYear, dobMonth, dobDay] = dob ? dob.split("-").map(Number) : [];
+  const buyerPhone = isBlankPhone(billing.phone) ? void 0 : billing.phone;
   const committedBilling = {
     ...checkout.billing,
     ...billing,
+    phone: buyerPhone,
     stateRequired: gates.showAddress && Boolean(billing.countryId) && states.length > 0,
     dataCapture,
     dobDay,
     dobMonth,
     dobYear
   };
-  const committedHolders = holders.map((holder) => ({
-    firstName: holderNamesRequired ? holder.firstName : holder.firstName || billing.firstName,
-    lastName: holderNamesRequired ? holder.lastName : holder.lastName || billing.lastName,
-    email: showHolders && collectHolderContact ? holder.email : holder.email || billing.email,
-    phone: showHolders && collectHolderContact ? holder.phone : holder.phone || billing.phone,
-    ticketTypeId: holder.ticketTypeId,
-    ticketDataCapture: holder.ticketDataCapture
-  }));
+  const committedHolders = holders.map((holder) => {
+    const holderPhone = isBlankPhone(holder.phone) ? "" : holder.phone;
+    return {
+      firstName: holderNamesRequired ? holder.firstName : holder.firstName || billing.firstName,
+      lastName: holderNamesRequired ? holder.lastName : holder.lastName || billing.lastName,
+      email: showHolders && collectHolderContact ? holder.email : holder.email || billing.email,
+      phone: showHolders && collectHolderContact ? holderPhone : holderPhone || buyerPhone || "",
+      ticketTypeId: holder.ticketTypeId,
+      ticketDataCapture: holder.ticketDataCapture
+    };
+  });
   const missingDetails = missingCheckoutDetails(
     {
       billing: committedBilling,
@@ -7910,6 +7957,8 @@ var BillingInfo = ({
         className: "tf-checkout-phone",
         inputClassName: `tf-checkout-input tf-checkout-phone__input${fieldError("Valid phone number") ? " tf-checkout-input--invalid" : ""}`,
         defaultCountry: phoneCountry,
+        disableDialCodeAndPrefix: true,
+        showDisabledDialCodeAndPrefix: true,
         disableDialCodePrefill: true,
         value: (_D = billing.phone) != null ? _D : "",
         required: gates.phoneRequired,
@@ -7935,6 +7984,8 @@ var BillingInfo = ({
         type: "date",
         value: dob,
         required: true,
+        min: DOB_MIN,
+        max: dobMax,
         invalid: Boolean(dobError),
         "aria-invalid": Boolean(dobError),
         onChange: (e) => setDob(e.target.value)
@@ -8101,7 +8152,7 @@ var Payment = ({
   showTestCardHint = false,
   className
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const checkout = useCheckoutContext();
   const validation = useCheckoutValidation();
   const [error, setError] = useState16("");
@@ -8123,8 +8174,10 @@ var Payment = ({
   const bd = checkout.breakdown;
   const isFree = bd != null && Number(bd.total) === 0;
   const isXendit = checkout.gateway === "xendit";
+  const serverMethodTypes = (_a = checkout.stripeElementsConfig) == null ? void 0 : _a.paymentMethodTypes;
+  const offersOxxo = Array.isArray(serverMethodTypes) && serverMethodTypes.includes("oxxo");
   const options = useMemo6(() => {
-    var _a2, _b2, _c2, _d2;
+    var _a2, _b2, _c2;
     if (isFree || !methods) return [];
     const out = [];
     if (isXendit) {
@@ -8156,7 +8209,7 @@ var Payment = ({
           value: "paymentPlan",
           label: "Payment plan"
         });
-      if (((_d2 = checkout.breakdown) == null ? void 0 : _d2.currencyCode) === "MXN")
+      if (offersOxxo)
         out.push({ id: { kind: "oxxo" }, value: "oxxo", label: "OXXO (pay in cash)" });
     }
     if (methods.paypal)
@@ -8169,7 +8222,7 @@ var Payment = ({
     checkout.gateway,
     checkout.redirectPaymentMethods,
     checkout.paymentPlan,
-    checkout.breakdown
+    offersOxxo
   ]);
   useEffect12(() => {
     if (options.length && !options.some((o) => o.value === selected))
@@ -8179,14 +8232,14 @@ var Payment = ({
   const selectedOption = options.find((o) => o.value === selected);
   const isCardSelected = selected === cardValue;
   const isPlanSelected = (selectedOption == null ? void 0 : selectedOption.id.kind) === "paymentPlan";
-  const savedLast4 = (_a = checkout.paymentPlan) == null ? void 0 : _a.savedCardLast4;
+  const savedLast4 = (_b = checkout.paymentPlan) == null ? void 0 : _b.savedCardLast4;
   const reuseSavedCard = Boolean(savedLast4) && useSavedCard;
   const usesCardDetails = !isFree && (isCardSelected || isPlanSelected && !reuseSavedCard);
   const cardWidgetReportsItsOwnError = usesCardDetails && !isXendit;
   const hasWallets = Boolean(
-    ((_b = checkout.walletAvailability) == null ? void 0 : _b.applePay) || ((_c = checkout.walletAvailability) == null ? void 0 : _c.googlePay)
+    ((_c = checkout.walletAvailability) == null ? void 0 : _c.applePay) || ((_d = checkout.walletAvailability) == null ? void 0 : _d.googlePay)
   );
-  const useWalletElement = !isXendit && !isPlanSelected && hasWallets && ((_d = checkout.breakdown) == null ? void 0 : _d.currencyCode) !== "MXN" && Boolean((_e = checkout.stripeElementsConfig) == null ? void 0 : _e.mode);
+  const useWalletElement = !isXendit && !isPlanSelected && hasWallets && ((_e = checkout.breakdown) == null ? void 0 : _e.currencyCode) !== "MXN" && Boolean((_f = checkout.stripeElementsConfig) == null ? void 0 : _f.mode);
   const onlyOption = options.length === 1 ? options[0] : void 0;
   const singleCard = (onlyOption == null ? void 0 : onlyOption.id.kind) === "card" || (onlyOption == null ? void 0 : onlyOption.id.kind) === "xenditCard";
   const b = checkout.billing;
@@ -8203,7 +8256,7 @@ var Payment = ({
     { requireEmailConfirmation, collectTicketHolders, requireHolderContact }
   );
   const billingReady = missingDetails.length === 0;
-  const conditions = [...(_f = checkout.conditions) != null ? _f : [], ...additionalConditions];
+  const conditions = [...(_g = checkout.conditions) != null ? _g : [], ...additionalConditions];
   const requiredConditions = conditions.filter((c) => c.isRequired);
   const conditionsOk = requiredConditions.every(
     (c) => {
@@ -8212,10 +8265,10 @@ var Payment = ({
     }
   );
   const extra = selectedOption == null ? void 0 : selectedOption.extra;
-  const extrasOk = !extra || (extra === "cashtag" ? Boolean((_h = (_g = extras[selected]) == null ? void 0 : _g.cashtag) == null ? void 0 : _h.trim()) : Boolean((_j = (_i = extras[selected]) == null ? void 0 : _i.phoneNumber) == null ? void 0 : _j.trim()));
+  const extrasOk = !extra || (extra === "cashtag" ? Boolean((_i = (_h = extras[selected]) == null ? void 0 : _h.cashtag) == null ? void 0 : _i.trim()) : Boolean((_k = (_j = extras[selected]) == null ? void 0 : _j.phoneNumber) == null ? void 0 : _k.trim()));
   const privacyOk = !requirePrivacyPolicy || checkout.consent.ttfOptIn;
-  const payLabel = isFree ? "Complete Registration" : isPlanSelected ? planConfirmLabel((_k = checkout.paymentPlan) == null ? void 0 : _k.configuration) : "Submit Payment";
-  const planTerms = paymentPlanTerms((_l = checkout.paymentPlan) == null ? void 0 : _l.configuration);
+  const payLabel = isFree ? "Complete Registration" : isPlanSelected ? planConfirmLabel((_l = checkout.paymentPlan) == null ? void 0 : _l.configuration) : "Submit Payment";
+  const planTerms = paymentPlanTerms((_m = checkout.paymentPlan) == null ? void 0 : _m.configuration);
   const finalizing = checkout.status === "placing" || checkout.status === "succeeded";
   const pay = () => {
     setError("");