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

package/dist/index.js

@@ -2643,22 +2643,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) => {
@@ -3583,6 +3590,10 @@ var createEngine = (config) => {
     reset: () => {
       clearCartGuestToken();
       store.reset();
+    },
+    expireCart: () => {
+      clearCartGuestToken();
+      store.expireCart();
     }
   };
 };
@@ -4089,6 +4100,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;
+  (0, import_react3.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
@@ -6344,6 +6361,8 @@ var AuthModal = ({
   const previouslyFocused = (0, import_react23.useRef)(null);
   const submittingRef = (0, import_react23.useRef)(auth.isSubmitting);
   submittingRef.current = auth.isSubmitting;
+  const onCloseRef = (0, import_react23.useRef)(onClose);
+  onCloseRef.current = onClose;
   (0, import_react23.useEffect)(() => {
     var _a, _b, _c;
     if (!open) return;
@@ -6364,7 +6383,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) {
@@ -6389,7 +6408,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();
@@ -7544,6 +7563,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
 var import_react30 = __toESM(require("react"));
 var import_react_international_phone2 = require("react-international-phone");
@@ -7626,6 +7658,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,
@@ -7748,7 +7782,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,
@@ -7758,6 +7792,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]);
   (0, import_react31.useEffect)(() => {
     setHolders(
@@ -7839,6 +7879,7 @@ var BillingInfo = ({
     countryDefaultApplied.current = true;
     setBilling((current2) => {
       var _a3;
+      if (current2.countryId) return current2;
       return {
         ...current2,
         countryId: String(preferred.id),
@@ -7879,24 +7920,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 = (0, import_react31.useMemo)(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,
@@ -8065,6 +8112,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,
@@ -8090,6 +8139,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)
@@ -8256,7 +8307,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] = (0, import_react33.useState)("");
@@ -8278,8 +8329,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 = (0, import_react33.useMemo)(() => {
-    var _a2, _b2, _c2, _d2;
+    var _a2, _b2, _c2;
     if (isFree || !methods) return [];
     const out = [];
     if (isXendit) {
@@ -8311,7 +8364,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)
@@ -8324,7 +8377,7 @@ var Payment = ({
     checkout.gateway,
     checkout.redirectPaymentMethods,
     checkout.paymentPlan,
-    checkout.breakdown
+    offersOxxo
   ]);
   (0, import_react33.useEffect)(() => {
     if (options.length && !options.some((o) => o.value === selected))
@@ -8334,14 +8387,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;
@@ -8358,7 +8411,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) => {
@@ -8367,10 +8420,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("");