@lockerverse/react 0.2.41 → 0.2.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,7 +1,6 @@
1
1
  # `@lockerverse/react`
2
2
 
3
- React payment UI powered by Stripe Custom Checkout Sessions. The host owns
4
- Product selection; this package renders and completes the payment step.
3
+ React payment UI for Lockerverse checkout. The host owns product selection; this package renders and completes the payment step with Stripe Elements.
5
4
 
6
5
  ## Install
7
6
 
@@ -18,14 +17,13 @@ import "@lockerverse/react/styles.css";
18
17
  export function Checkout() {
19
18
  return (
20
19
  <LockerversePayment
21
- branding={{
22
- accentColor: "#38d77a",
23
- imageUrl: "https://cdn.example.com/community.png",
24
- name: "Auburn Community",
25
- }}
26
20
  communitySlug="auburn"
27
- onPaymentComplete={(result) => {
28
- console.info("Checkout complete", result.paymentReference);
21
+ metadata={{ source: "community-site" }}
22
+ onPaymentComplete={(payment) => {
23
+ console.info("Payment complete", payment.checkoutId);
24
+ }}
25
+ onPaymentUncertain={({ paymentReference, reason }) => {
26
+ console.info("Payment needs status recovery", paymentReference, reason);
29
27
  }}
30
28
  selection={[{ productSlug: "adult", quantity: 1 }]}
31
29
  theme="dark"
@@ -35,13 +33,70 @@ export function Checkout() {
35
33
  }
36
34
  ```
37
35
 
38
- For development, provide both `environment="development"` and `apiBaseUrl`.
39
- The component supports dark and light themes, an accent color, CSS variables,
40
- and host CSS. It intentionally does not render Product selection. When enabled
41
- by the widget, customers can change the tip and service-fee contribution in the
42
- payment form; the displayed total is updated by the Lockerverse backend and
43
- Stripe Checkout before confirmation.
36
+ For a development backend, provide both `environment="development"` and `apiBaseUrl`.
37
+
38
+ ```tsx
39
+ <LockerversePayment
40
+ apiBaseUrl="https://portal-dev.lockerverse.com/api"
41
+ communitySlug="luis-c"
42
+ environment="development"
43
+ selection={[{ productSlug: "adult", quantity: 1 }]}
44
+ widgetSlug="new-payment-widget"
45
+ />
46
+ ```
47
+
48
+ ## Styling
49
+
50
+ Use `theme="dark"` or `theme="light"`. Lockerverse applies the community branding returned by the widget API. Override it with `branding`, or override individual CSS variables through `style` or a scoped stylesheet.
51
+
52
+ ```tsx
53
+ <LockerversePayment
54
+ // ...checkout props
55
+ style={{
56
+ "--lockerverse-accent": "#ff6b35",
57
+ "--lockerverse-radius": "14px",
58
+ }}
59
+ />
60
+ ```
61
+
62
+ The package keeps React, React DOM, and Stripe's React libraries as peer dependencies so it does not ship duplicate framework code. It does not render product selectors or depend on Lockerverse's Next.js application components.
63
+
64
+ ## Payment outcomes
65
+
66
+ `onPaymentComplete` runs only after Lockerverse reports `success`. A successful payment is terminal, even if the host callback throws.
67
+
68
+ If the authoritative total, discount, currency, line items, or connected Stripe account changes, the component displays the new quote before creating a Stripe token. The customer must explicitly submit again.
69
+
70
+ An authoritative `failed` result is retryable and the next submit receives a new payment reference. `pending`, unresolved `action_required`, and failed same-reference recovery stay locked so the customer cannot accidentally create a second payment. The optional `onPaymentUncertain` callback receives the retained `paymentReference` and one of these reasons:
71
+
72
+ - `pending`
73
+ - `action_required`
74
+ - `recovery_failed`
75
+
76
+ To abandon a locked attempt and intentionally start a new checkout, the host must remount `LockerversePayment` with a new React `key` after resolving the payment status through its own workflow.
77
+
78
+ Persist `onPaymentRecoveryChange` synchronously before navigation and pass the saved value back through `resumePayment` after a refresh. The recovery value contains a Lockerverse reference and public connected-account ID, never a Stripe secret.
79
+
80
+ ```tsx
81
+ import type { LockerversePaymentRecovery } from "@lockerverse/react";
82
+
83
+ const recoveryKey = "lockerverse:tailgate-party:payment";
84
+ const savedRecovery = sessionStorage.getItem(recoveryKey);
85
+ const recovery = savedRecovery
86
+ ? (JSON.parse(savedRecovery) as LockerversePaymentRecovery)
87
+ : null;
88
+
89
+ <LockerversePayment
90
+ // ...checkout props
91
+ resumePayment={recovery}
92
+ onPaymentRecoveryChange={(nextRecovery) => {
93
+ if (nextRecovery) {
94
+ sessionStorage.setItem(recoveryKey, JSON.stringify(nextRecovery));
95
+ } else {
96
+ sessionStorage.removeItem(recoveryKey);
97
+ }
98
+ }}
99
+ />
100
+ ```
44
101
 
45
- The package uses Stripe's React Checkout Elements directly. React, React DOM,
46
- and Stripe libraries are peer dependencies, so consuming applications do not
47
- receive duplicate framework copies.
102
+ Malformed host selections and invalid custom tips render customer-safe validation messages and do not call the Lockerverse API. Product selection remains owned by the host application.
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { CreateLockerverseWidgetOptions, LockerverseCatalog, LockerverseCheckoutSessionPricing, LockerverseCustomFieldAnswer } from "@lockerverse/sdk/checkout";
2
- import { loadStripe } from "@stripe/stripe-js/pure/index.js";
3
- import { CSSProperties, ComponentPropsWithoutRef, PropsWithChildren } from "react";
1
+ import { CSSProperties, ComponentPropsWithoutRef } from "react";
2
+ import { CreateLockerverseWidgetOptions, LockerversePaymentResult } from "@lockerverse/sdk/checkout";
3
+ import { loadStripe } from "@stripe/stripe-js";
4
4
  //#region src/types.d.ts
5
5
  type LockerversePaymentSelectionItem = {
6
6
  amountCents: number;
@@ -15,10 +15,6 @@ type LockerversePaymentBranding = {
15
15
  imageUrl?: string | null;
16
16
  name: string;
17
17
  };
18
- type LockerversePaymentCompletion = {
19
- paymentReference: string;
20
- sessionId: string;
21
- };
22
18
  type LockerversePaymentStyle = CSSProperties & {
23
19
  "--lockerverse-accent"?: string;
24
20
  "--lockerverse-accent-contrast"?: string;
@@ -34,63 +30,30 @@ type LockerversePaymentStyle = CSSProperties & {
34
30
  "--lockerverse-subtle"?: string;
35
31
  "--lockerverse-text"?: string;
36
32
  };
33
+ type LockerversePaymentUncertain = {
34
+ paymentReference: string;
35
+ reason: "action_required" | "pending" | "recovery_failed";
36
+ };
37
+ type LockerversePaymentRecovery = {
38
+ connectedAccountId: string | null;
39
+ paymentReference: string;
40
+ };
41
+ type LockerverseStripeLoader = (...args: Parameters<typeof loadStripe>) => ReturnType<typeof loadStripe>;
37
42
  type LockerversePaymentProps = CreateLockerverseWidgetOptions & Omit<ComponentPropsWithoutRef<"section">, "children" | "onError"> & {
38
43
  branding?: LockerversePaymentBranding;
39
- includeServiceFee?: boolean;
40
44
  metadata?: Record<string, string>;
41
- onPaymentComplete?: (result: LockerversePaymentCompletion) => void;
42
- returnUrl?: string;
45
+ onPaymentComplete?: (payment: LockerversePaymentResult) => void;
46
+ onPaymentRecoveryChange?: (recovery: LockerversePaymentRecovery | null) => void;
47
+ onPaymentUncertain?: (payment: LockerversePaymentUncertain) => void;
48
+ resumePayment?: LockerversePaymentRecovery | null;
43
49
  selection: LockerversePaymentSelectionItem[];
44
- unstable_stripeLoader?: typeof loadStripe;
50
+ stripeLoader?: LockerverseStripeLoader;
45
51
  style?: LockerversePaymentStyle;
46
52
  theme?: LockerversePaymentTheme;
47
- tipCents?: number;
48
53
  };
49
54
  //#endregion
50
- //#region src/checkout-session-payment.d.ts
51
- type CheckoutSessionStripeLoader = typeof loadStripe;
52
- type LockerverseCheckoutSessionProviderProps = CreateLockerverseWidgetOptions & PropsWithChildren<{
53
- accentColor?: string;
54
- email?: string;
55
- includeServiceFee?: boolean;
56
- metadata?: Record<string, string>;
57
- returnUrl: string;
58
- selection: LockerversePaymentSelectionItem[];
59
- unstable_stripeLoader?: CheckoutSessionStripeLoader;
60
- theme?: "dark" | "light";
61
- tipCents?: number;
62
- }>;
63
- type CheckoutContextValue = {
64
- applyPromoCode: (promoCode: string) => Promise<string | null>;
65
- catalog: LockerverseCatalog;
66
- confirm: (contact: {
67
- customFieldAnswers?: LockerverseCustomFieldAnswer[];
68
- email: string;
69
- memberId?: string;
70
- merchSize?: "XS" | "S" | "M" | "L" | "XL" | "XXL" | "XXXL";
71
- phone?: string;
72
- shippingMatchesBilling?: boolean;
73
- }) => Promise<LockerversePaymentCompletion>;
74
- paymentReference: string;
75
- pricing: {
76
- includeServiceFee: boolean;
77
- serviceFeeAmountCents: number;
78
- subtotalCents: number;
79
- tipCents: number;
80
- };
81
- totalCents: number;
82
- updatePricing: (input: {
83
- includeServiceFee: boolean;
84
- tipCents: number;
85
- }) => Promise<LockerverseCheckoutSessionPricing>;
86
- };
87
- declare function LockerverseCheckoutSessionProvider(props: LockerverseCheckoutSessionProviderProps): import("react").JSX.Element;
88
- declare function useLockerverseCheckoutSession(): CheckoutContextValue;
89
- declare function LockerverseCheckoutSessionPaymentForm({ branding, onComplete }: {
90
- branding?: LockerversePaymentBranding;
91
- onComplete?: (result: LockerversePaymentCompletion) => void;
92
- }): import("react").JSX.Element;
93
- declare function LockerversePayment(props: LockerversePaymentProps): import("react").JSX.Element;
55
+ //#region src/lockerverse-payment.d.ts
56
+ declare function LockerversePayment({ apiBaseUrl, branding, className, communitySlug, environment, fetch, metadata, onError, onPaymentComplete, onPaymentRecoveryChange, onPaymentUncertain, requestTimeoutMs, resumePayment, selection, sentryDsn, style, stripeLoader, theme, widgetSlug, ...sectionProps }: LockerversePaymentProps): import("react").JSX.Element;
94
57
  //#endregion
95
- export { LockerverseCheckoutSessionPaymentForm, LockerverseCheckoutSessionProvider, type LockerverseCheckoutSessionProviderProps, LockerversePayment, type LockerversePaymentBranding, type LockerversePaymentCompletion, type LockerversePaymentProps, type LockerversePaymentSelectionItem, type LockerversePaymentStyle, type LockerversePaymentTheme, useLockerverseCheckoutSession };
58
+ export { LockerversePayment, type LockerversePaymentBranding, type LockerversePaymentProps, type LockerversePaymentRecovery, type LockerversePaymentSelectionItem, type LockerversePaymentStyle, type LockerversePaymentTheme, type LockerversePaymentUncertain, type LockerverseStripeLoader };
96
59
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/checkout-session-payment.tsx"],"mappings":";;;;KAIY;EACN;EAAqB;;EACrB;EAAqB;;KAEf;KAEA;EACV;EACA;EACA;;KAGU;EACV;EACA;;KAGU,0BAA0B;EACpC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;KAGU,0BAA0B,iCACpC,KAAK;EACH,WAAW;EACX;EACA,WAAW;EACX,qBAAqB,QAAQ;EAC7B;EACA,WAAW;EACX,+BAA+B;EAC/B,QAAQ;EACR,QAAQ;EACR;;;;KCHC,qCAAqC;KAE9B,0CACV,iCACE;EACE;EACA;EACA;EACA,WAAW;EACX;EACA,WAAW;EACX,wBAAwB;EACxB;EACA;;KAuBD;EACH,iBAAiB,sBAAsB;EACvC,SAAS;EACT,UAAU;IACR,qBAAqB;IACrB;IACA;IACA;IACA;IACA;QACI,QAAQ;EACd;EACA;IACE;IACA;IACA;IACA;;EAEF;EACA,gBAAgB;IACd;IACA;QACI,QAAQ;;iBAwRA,mCACd,OAAO,0DAAuC,IAAA;iBA6HhC,iCAA6B;iBA6G7B,wCACd,UACA;EAEA,WAAW;EACX,cAAc,QAAQ;oBACvB,IAAA;iBAwSe,mBAAmB,OAAO,0CAAuB,IAAA"}
1
+ {"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/lockerverse-payment.tsx"],"mappings":";;;;KAOY;EACN;EAAqB;;EACrB;EAAqB;;KAEf;KAEA;EACV;EACA;EACA;;KAGU,0BAA0B;EACpC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;KAGU;EACV;EACA;;KAGU;EACV;EACA;;KAGU,8BACP,MAAM,kBAAkB,gBACxB,kBAAkB;KAEX,0BAA0B,iCACpC,KAAK;EACH,WAAW;EACX,WAAW;EACX,qBAAqB,SAAS;EAC9B,2BACE,UAAU;EAEZ,sBAAsB,SAAS;EAC/B,gBAAgB;EAChB,WAAW;EACX,eAAe;EACf,QAAQ;EACR,QAAQ;;;;iBCyrCI,qBACd,YACA,UACA,WACA,eACA,aACA,OACA,UACA,SACA,mBACA,yBACA,oBACA,kBACA,eACA,WACA,WACA,OACA,cACA,OACA,eACG,gBACF,0CAAuB,IAAA"}
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{createLockerverseCheckoutClient as e}from"@lockerverse/sdk/checkout";import{BillingAddressElement as t,CheckoutElementsProvider as n,PaymentElement as r,ShippingAddressElement as i,useCheckoutElements as a}from"@stripe/react-stripe-js/checkout";import{loadStripe as o}from"@stripe/stripe-js/pure/index.js";import{createContext as s,useContext as c,useEffect as l,useMemo as u,useRef as d,useState as f}from"react";import{pipe as p,regex as m,safeParse as h,string as g}from"valibot";import{Select as _}from"@base-ui/react/select";import{Fragment as v,jsx as y,jsxs as b}from"react/jsx-runtime";const x=/^#([\da-f]{3}|[\da-f]{6})$/i;function S(e){let t=x.exec(e.trim());if(!t)return;let[,n]=t;if(!n)return;let r=n.length===3?Array.from(n,e=>`${e}${e}`).join(``):n;return[0,2,4].map(e=>Number.parseInt(r.slice(e,e+2),16))}function C([e,t,n]){let[r=0,i=0,a=0]=[e,t,n].map((e=0)=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4});return .2126*r+.7152*i+.0722*a}function w(e){let t=S(e);if(!t)return;let n=C(t);return(n+.05)/.05>=1.05/(n+.05)?`#000`:`#fff`}const T=s(void 0);function E({children:e,container:t}){return y(T.Provider,{value:t,children:e})}function D(){return y(`svg`,{"aria-hidden":`true`,fill:`none`,viewBox:`0 0 16 16`,children:y(`path`,{d:`m4 6 4 4 4-4`})})}function O(){return y(`svg`,{"aria-hidden":`true`,fill:`none`,viewBox:`0 0 16 16`,children:y(`path`,{d:`m3 8 3 3 7-7`})})}function k({ariaDescribedBy:e,ariaLabel:t,ariaLabelledBy:n,className:r,id:i,invalid:a=!1,name:o,onValueChange:s,options:l,required:u=!1,value:d}){let f=c(T),p=[`lockerverse-payment__select`,r].filter(Boolean).join(` `);return y(`div`,{className:p,children:b(_.Root,{id:i,items:l,name:o,onValueChange:e=>{e!==null&&s(e)},required:u,value:d,children:[b(_.Trigger,{"aria-describedby":e,"aria-invalid":a||void 0,"aria-label":t,"aria-labelledby":n,className:`lockerverse-payment__select-trigger`,children:[y(_.Value,{}),y(_.Icon,{"aria-hidden":`true`,className:`lockerverse-payment__select-icon`,children:y(D,{})})]}),y(_.Portal,{container:f,children:y(_.Positioner,{alignItemWithTrigger:!1,className:`lockerverse-payment__select-positioner`,sideOffset:6,children:y(_.Popup,{className:`lockerverse-payment__select-popup`,children:y(_.List,{className:`lockerverse-payment__select-list`,children:l.map(e=>b(_.Item,{className:`lockerverse-payment__select-item`,value:e.value,children:[y(_.ItemText,{children:e.label}),y(_.ItemIndicator,{"aria-hidden":`true`,className:`lockerverse-payment__select-item-indicator`,children:y(O,{})})]},e.value))})})})})]})})}const A=[{callingCode:`+1`,label:`🇺🇸 +1`,value:`US`},{callingCode:`+52`,label:`🇲🇽 +52`,value:`MX`},{callingCode:`+380`,label:`🇺🇦 +380`,value:`UA`},{callingCode:`+48`,label:`🇵🇱 +48`,value:`PL`},{callingCode:`+1`,label:`🇨🇦 +1`,value:`CA`},{callingCode:`+49`,label:`🇩🇪 +49`,value:`DE`},{callingCode:`+44`,label:`🇬🇧 +44`,value:`GB`},{callingCode:`+46`,label:`🇸🇪 +46`,value:`SE`},{callingCode:`+358`,label:`🇫🇮 +358`,value:`FI`},{callingCode:`+1`,label:`🇵🇷 +1`,value:`PR`}],j=[{label:`15%`,percent:15,value:`15`},{label:`12%`,percent:12,value:`12`},{label:`10%`,percent:10,value:`10`},{label:`5%`,percent:5,value:`5`},{label:`Other`,percent:null,value:`custom`}];function M({label:e}){return b(`div`,{className:`lockerverse-payment__stripe-loader`,role:`status`,children:[y(`p`,{children:e}),b(`div`,{"aria-hidden":`true`,children:[y(`span`,{}),y(`span`,{}),y(`span`,{})]})]})}function ee({fields:e,onChange:t,values:n}){return e.map(e=>{let r=n[e.id]??(e.type.includes(`multi`)||e.type===`checkboxes`?[]:``);if(e.type===`textarea`)return b(`label`,{children:[y(`span`,{children:e.label}),y(`textarea`,{name:e.id,onChange:n=>t(e.id,n.currentTarget.value),required:e.required,value:String(r)})]},e.id);if(e.type===`select`){let n=`lockerverse-custom-${e.id}-label`;return b(`div`,{className:`lockerverse-payment__field`,children:[y(`span`,{id:n,children:e.label}),y(k,{ariaLabelledBy:n,name:e.id,onValueChange:n=>t(e.id,n),options:[{label:`Select…`,value:``},...e.options.map(e=>({label:e.label,value:e.id}))],required:e.required,value:String(r)})]},e.id)}if(e.type===`radio`||e.type===`checkboxes`||e.type===`multi_select`){let n=Array.isArray(r)?r:[r];return b(`fieldset`,{children:[y(`legend`,{children:e.label}),e.options.map(r=>{let i=n.includes(r.id);return b(`label`,{className:`lockerverse-payment__choice`,children:[y(`input`,{checked:i,name:e.id,onChange:()=>{if(e.type===`radio`){t(e.id,r.id);return}t(e.id,i?n.filter(e=>e!==r.id):[...n,r.id])},required:e.required&&n.length===0,type:e.type===`radio`?`radio`:`checkbox`,value:r.id}),y(`span`,{children:r.label})]},r.id)})]},e.id)}return b(`label`,{children:[y(`span`,{children:e.label}),y(`input`,{name:e.id,onChange:n=>t(e.id,n.currentTarget.value),required:e.required,type:`text`,value:String(r)})]},e.id)})}function te({busy:e,enabled:t,onCustomTipBlur:n,onCustomTipChange:r,onSelect:i,tipInput:a,tipOption:o}){return t?b(`div`,{className:`lockerverse-payment__tip`,children:[y(`strong`,{children:`Add a tip to support the Lockerverse platform`}),y(`div`,{"aria-label":`Tip amount`,role:`radiogroup`,children:j.map(t=>y(`button`,{"aria-pressed":o===t.value,disabled:e,onClick:()=>i(t),type:`button`,children:t.label},t.value))}),o===`custom`?b(`label`,{children:[y(`span`,{children:`Custom tip`}),b(`div`,{className:`lockerverse-payment__money-input`,children:[y(`span`,{"aria-hidden":`true`,children:`$`}),y(`input`,{inputMode:`decimal`,name:`customTip`,onBlur:n,onChange:e=>r(e.currentTarget.value),placeholder:`0.00`,value:a})]})]}):null]}):null}function ne({email:e,fields:t,onEmailChange:n,onPhoneChange:r,onPhoneCountryChange:i,phone:a,phoneCountry:o}){return b(`div`,{className:`lockerverse-payment__contact`,children:[b(`label`,{children:[y(`span`,{children:`Email`}),y(`input`,{autoComplete:`email`,inputMode:`email`,name:`email`,onChange:e=>n(e.currentTarget.value),placeholder:`name@example.com`,required:!0,type:`email`,value:e})]}),t.phone?b(`label`,{children:[y(`span`,{children:`Phone`}),b(`div`,{className:`lockerverse-payment__phone-control`,children:[y(k,{ariaLabel:`Phone country`,className:`lockerverse-payment__select--phone-country`,name:`phoneCountry`,onValueChange:i,options:A,value:o}),y(`input`,{autoComplete:`tel`,inputMode:`tel`,name:`phone`,onChange:e=>r(e.currentTarget.value),placeholder:`(201) 555-0123`,required:!0,type:`tel`,value:a})]})]}):null]})}function re({fields:e,isBillingAddressReady:n,isPaymentReady:a,isShippingAddressReady:o,onBillingAddressReady:s,onPaymentReady:c,onShippingAddressReady:l,onShippingMatchesBillingChange:u,shippingMatchesBilling:d,totalCents:f}){return b(v,{children:[b(`div`,{className:`lockerverse-payment__stripe-element`,"data-ready":a,hidden:f===0,children:[a?null:y(M,{label:`Loading payment form...`}),y(`div`,{className:`lockerverse-payment__stripe-mount`,children:y(r,{onReady:c,options:{fields:{billingDetails:{address:`never`,email:`never`,name:`never`,phone:`never`}},layout:`tabs`,paymentMethodOrder:[`card`,`apple_pay`,`paypal`],terms:{applePay:`auto`,card:`always`,googlePay:`never`,paypal:`auto`,usBankAccount:`never`},wallets:{applePay:`auto`,googlePay:`never`}}})})]}),b(`div`,{className:`lockerverse-payment__address`,children:[y(`h2`,{children:`Billing address`}),b(`div`,{className:`lockerverse-payment__stripe-element lockerverse-payment__stripe-element--address`,"data-ready":n,children:[n?null:y(M,{label:`Loading billing address...`}),y(`div`,{className:`lockerverse-payment__stripe-mount`,children:y(t,{onReady:s})})]})]}),e.shipping?b(`div`,{className:`lockerverse-payment__shipping`,children:[b(`label`,{className:`lockerverse-payment__check-row`,children:[y(`input`,{checked:d,name:`shippingMatchesBilling`,onChange:e=>u(e.currentTarget.checked),type:`checkbox`}),y(`span`,{children:`Shipping is same as billing information`})]}),d?null:b(`div`,{className:`lockerverse-payment__address`,children:[y(`h2`,{children:`Shipping address`}),b(`div`,{className:`lockerverse-payment__stripe-element lockerverse-payment__stripe-element--address`,"data-ready":o,children:[o?null:y(M,{label:`Loading shipping address...`}),y(`div`,{className:`lockerverse-payment__stripe-mount`,children:y(i,{onReady:l})})]})]})]}):null]})}function ie({fields:e,memberId:t,merchSize:n,onMemberIdChange:r,onMerchSizeChange:i}){return b(v,{children:[e.memberId?b(`label`,{children:[y(`span`,{children:`Member ID`}),y(`input`,{name:`memberId`,onChange:e=>r(e.currentTarget.value),required:!0,type:`text`,value:t})]}):null,e.merchSize?b(`div`,{className:`lockerverse-payment__field`,children:[y(`span`,{id:`lockerverse-merch-size-label`,children:`Size`}),y(k,{ariaLabelledBy:`lockerverse-merch-size-label`,name:`merchSize`,onValueChange:i,options:[`XS`,`S`,`M`,`L`,`XL`,`XXL`,`XXXL`].map(e=>({label:e,value:e})),required:!0,value:n})]}):null]})}function N(){return b(`div`,{className:`lockerverse-payment__skeleton-loader-block`,children:[y(`span`,{className:`lockerverse-payment__skeleton-loader-label`}),b(`div`,{className:`lockerverse-payment__skeleton-loader-content`,children:[y(`span`,{className:`lockerverse-payment__skeleton-loader-full`}),b(`div`,{className:`lockerverse-payment__skeleton-loader-grid`,children:[y(`span`,{className:`lockerverse-payment__skeleton-loader-half`}),y(`span`,{className:`lockerverse-payment__skeleton-loader-half`})]})]})]})}function P({catalog:e}){return b(`div`,{className:`lockerverse-payment__loading`,children:[y(`span`,{className:`lockerverse-payment__sr-only`,role:`status`,children:`Preparing secure checkout…`}),b(`div`,{"aria-hidden":`true`,className:`lockerverse-payment__skeleton`,children:[e?b(`header`,{children:[e.widget.showCommunityBranding&&e.community?b(`div`,{className:`lockerverse-payment__branding`,children:[e.community.imageUrl?y(`img`,{alt:``,height:`48`,src:e.community.imageUrl,width:`48`}):null,y(`strong`,{children:e.community.name})]}):null,y(`h1`,{children:e.widget.title??e.widget.name}),e.widget.description?y(`p`,{children:e.widget.description}):null]}):b(`div`,{className:`lockerverse-payment__skeleton-branding`,children:[y(`span`,{className:`lockerverse-payment__skeleton-avatar`}),y(`span`,{className:`lockerverse-payment__skeleton-community`})]}),b(`div`,{className:`lockerverse-payment__skeleton-contact`,children:[b(`div`,{className:`lockerverse-payment__skeleton-field`,children:[y(`span`,{className:`lockerverse-payment__skeleton-label`}),y(`span`,{className:`lockerverse-payment__skeleton-input`})]}),b(`div`,{className:`lockerverse-payment__skeleton-field`,children:[y(`span`,{className:`lockerverse-payment__skeleton-label`}),y(`span`,{className:`lockerverse-payment__skeleton-input`})]})]}),y(N,{}),y(N,{}),b(`div`,{className:`lockerverse-payment__skeleton-actions`,children:[y(`span`,{className:`lockerverse-payment__skeleton-check-line`}),y(`span`,{className:`lockerverse-payment__skeleton-button`})]})]})]})}const F=s(null),I=p(g(),m(/^\d+(?:\.\d{1,2})?$/));function L(e){let t=e.trim();if(!t)return 0;let n=h(I,t);if(!n.success)return null;let[r=`0`,i=``]=n.output.split(`.`),a=BigInt(r)*100n+BigInt(i.padEnd(2,`0`));return a<=BigInt(2**53-1)?Number(a):null}function ae(e){return new Intl.NumberFormat(`en-US`,{currency:`USD`,style:`currency`}).format(e/100)}function R(e,t){let n=e.trim(),r=n.replace(/\D/g,``);return n.startsWith(`+`)?`+${r}`:`${A.find(e=>e.value===t)?.callingCode??`+1`}${r}`}function z(e){let t={communitySlug:e.communitySlug,...e.fetch?{fetch:e.fetch}:{},...e.onError?{onError:e.onError}:{},...e.requestTimeoutMs===void 0?{}:{requestTimeoutMs:e.requestTimeoutMs},...e.sentryDsn===void 0?{}:{sentryDsn:e.sentryDsn},widgetSlug:e.widgetSlug};return e.apiBaseUrl?{...t,apiBaseUrl:e.apiBaseUrl,environment:e.environment}:{...t,environment:`production`}}function B(e){return e?{metadata:e}:{}}async function V(e,t){if(!t.selection.length)throw Error(`Select at least one Product before opening checkout.`);let n=await e.createSession({...t.email?{email:t.email}:{},...t.includeServiceFee===void 0?{}:{includeServiceFee:t.includeServiceFee},items:t.selection,...B(t.metadata),requestKey:t.requestKey,returnUrl:t.returnUrl,...t.tipCents===void 0?{}:{tipCents:t.tipCents}}),{catalog:r}=n;return{catalog:r,client:e,includeServiceFee:n.pricing.includeServiceFee,returnUrl:t.returnUrl,session:n,subtotalCents:n.pricing.subtotalCents,tipCents:n.pricing.tipCents}}function H(e,t,n){if(!e)return null;let r=t??`#38d77a`,i=n===`light`;return{clientSecret:e.session.clientSecret,elementsOptions:{appearance:{rules:{".Input:focus":{borderColor:r,boxShadow:`0 0 0 1px ${r}`,outline:`none`}},theme:i?`stripe`:`night`,variables:{borderRadius:`10px`,colorBackground:i?`#f5f6f7`:`#121212`,colorDanger:i?`#c52b3e`:`#f08a98`,colorPrimary:r,colorText:i?`#121416`:`#ffffff`,colorTextPlaceholder:i?`#72767d`:`#6b6b6b`,colorTextSecondary:i?`#62666d`:`#a1a1aa`,focusBoxShadow:`none`,focusOutline:`none`,fontSizeBase:`16px`}},syncAddressCheckbox:`none`}}}function U({children:e,loaded:t}){let n=a();return n.type===`loading`?y(P,{catalog:t.catalog}):n.type===`error`?y(`div`,{role:`alert`,children:n.error.message}):y(G,{checkout:n.checkout,loaded:t,children:e})}function W(e){return{includeServiceFee:e.includeServiceFee,serviceFeeAmountCents:Math.round(e.subtotalCents*e.catalog.pricingPolicy.serviceFeeRateBasisPoints/1e4),subtotalCents:e.subtotalCents,tipCents:e.tipCents}}function G({checkout:e,children:t,loaded:n}){let[r,i]=f(()=>W(n));l(()=>{i(W(n))},[n]);let a={async applyPromoCode(t){let r=await e.runServerUpdate(()=>n.client.updateSessionDiscount({paymentReference:n.session.paymentReference,...t.trim()?{promoCode:t.trim()}:{}}));return r.type===`error`?r.error.message:null},catalog:n.catalog,async confirm(t){let r=await e.runServerUpdate(()=>n.client.updateSessionDetails({...t.customFieldAnswers?{customFieldAnswers:t.customFieldAnswers}:{},email:t.email,...t.memberId?{memberId:t.memberId}:{},...t.merchSize?{merchSize:t.merchSize}:{},paymentReference:n.session.paymentReference,...t.phone?{phone:t.phone}:{}}));if(r.type===`error`)throw Error(r.error.message);let i=await J(e,t.email,e.total.total.minorUnitsAmount>0);if(`error`in i)throw Error(i.error);if(t.shippingMatchesBilling){let t=e.getBillingAddressElement();if(!t)throw Error(`Billing address is required.`);let n=await t.getValue();if(!n.complete)throw Error(`Billing address is required.`);let r=await e.updateShippingAddress(n.value);if(r.type===`error`)throw Error(r.error.message)}let a=await e.confirm({email:i.email,redirect:`if_required`});if(a.type===`error`)throw Error(a.error.message);return{paymentReference:n.session.paymentReference,sessionId:n.session.sessionId}},paymentReference:n.session.paymentReference,pricing:r,totalCents:e.total.total.minorUnitsAmount,async updatePricing(t){let r,a=await e.runServerUpdate(()=>n.client.updateSessionPricing({...t,paymentReference:n.session.paymentReference}).then(e=>(r=e,e)));if(a.type===`error`)throw Error(a.error.message);if(!r)throw Error(`Lockerverse returned no updated pricing.`);let o=r;return i(e=>({...e,includeServiceFee:o.includeServiceFee,tipCents:o.tipCents})),o}};return y(F.Provider,{value:a,children:t})}function K(t){let[r,i]=f(null),[a,s]=f(null),[c,p]=f(0),m=d(null),h=JSON.stringify({email:t.email,includeServiceFee:t.includeServiceFee,metadata:t.metadata,returnUrl:t.returnUrl,selection:t.selection,tipCents:t.tipCents}),g=d({email:t.email,includeServiceFee:t.includeServiceFee,key:h,metadata:t.metadata,requestKey:globalThis.crypto.randomUUID(),returnUrl:t.returnUrl,selection:t.selection,tipCents:t.tipCents}),_=u(()=>z(t),[t.apiBaseUrl,t.communitySlug,t.environment,t.fetch,t.onError,t.requestTimeoutMs,t.sentryDsn,t.widgetSlug]),v=u(()=>e(_),[_]);l(()=>{let e=!0;if(m.current?.client!==v||c>0){let e=g.current;m.current={client:v,promise:V(v,e)}}return i(null),s(null),m.current.promise.then(t=>{e&&i(t)}).catch(t=>{e&&s(t instanceof Error?t.message:`Unable to load checkout.`)}),()=>{e=!1}},[v,c]);let x=r?.session.connectedAccountId??void 0,S=t.unstable_stripeLoader??o,C=u(()=>S(v.stripePublishableKey,{betas:[`custom_checkout_server_updates_1`],...x?{stripeAccount:x}:{}}),[v.stripePublishableKey,x,S]),w=u(()=>H(r,t.accentColor??r?.catalog.community?.accentColor??void 0,t.theme),[r,t.accentColor,t.theme]);return h===g.current.key?a?b(`div`,{className:`lockerverse-payment__payment-status`,role:`alert`,children:[y(`p`,{children:a}),y(`button`,{onClick:()=>p(e=>e+1),type:`button`,children:`Try again`})]}):r&&w?y(n,{options:w,stripe:C,children:y(U,{loaded:r,children:t.children})}):y(P,{}):y(`div`,{className:`lockerverse-payment__payment-status`,role:`alert`,children:`Checkout selection changed. Remount this payment component for the new selection.`})}function q(){let e=c(F);if(!e)throw Error(`useLockerverseCheckoutSession must be used inside LockerverseCheckoutSessionProvider.`);return e}async function J(e,t,n){let r=t.trim().toLowerCase();if(!r)return{error:`Email is required.`};let i=await e.updateEmail(r);if(i.type===`error`)return{error:i.error.message};if(n){let t=await e.validateElements();return t.type===`error`?{error:t.error.message}:{email:r}}return{email:r}}function oe(e,t){return e===0?`Complete free order`:t>0?`Process Payment ($${((e-t)/100).toFixed(2)}) + $${(t/100).toFixed(2)} tip`:`Process Payment ($${(e/100).toFixed(2)})`}function se({committedTipCents:e,subtotalCents:t,tipInput:n,tipOption:r}){if(r===`custom`)return L(n)??e;let i=j.find(e=>e.value===r)?.percent??0;return Math.round(t*i/100)}function ce({catalog:e,customFieldValues:t,email:n,memberId:r,merchSize:i,phone:a,phoneCountry:o,shippingMatchesBilling:s}){return{customFieldAnswers:e.widget.customFields.map(e=>({fieldId:e.id,value:t[e.id]??null})),email:n,...r?{memberId:r}:{},...i?{merchSize:i}:{},...a?{phone:R(a,o)}:{},...e.widget.fields.shipping?{shippingMatchesBilling:s}:{}}}function Y({branding:e,onComplete:t}){let{applyPromoCode:n,catalog:r,confirm:i,pricing:a,totalCents:o,updatePricing:s}=q(),c=r.community?{accentColor:r.community.accentColor??void 0,imageUrl:r.community.imageUrl,name:r.community.name,...e}:e,[u,p]=f(``),[m,h]=f(``),[g,_]=f(`US`),[v,x]=f(``),[S,C]=f(`M`),[w,T]=f({}),[E,D]=f(``),[O,k]=f(null),[A,M]=f(!1),[N,P]=f(!1),[F,I]=f(!1),[R,z]=f(!1),[B,V]=f(!1),[H,U]=f(!0),W=j.find(e=>e.percent!==null&&Math.round(a.subtotalCents*e.percent/100)===a.tipCents)?.value??`custom`,[G,K]=f(W),[J,Y]=f(W===`custom`&&a.tipCents>0?(a.tipCents/100).toFixed(2):``),X=d({includeServiceFee:a.includeServiceFee,tipCents:a.tipCents}),Z=d(Promise.resolve(!0));l(()=>{X.current={includeServiceFee:a.includeServiceFee,tipCents:a.tipCents}},[a.includeServiceFee,a.tipCents]);function Q(e){let t=(async()=>{P(!0),k(null);try{let t=await s(e);return X.current={includeServiceFee:t.includeServiceFee,tipCents:t.tipCents},!0}catch(e){return k(e instanceof Error?e.message:`Unable to update checkout.`),!1}finally{P(!1)}})();return Z.current=t,t}let $=se({committedTipCents:a.tipCents,subtotalCents:a.subtotalCents,tipInput:J,tipOption:G}),le=o-a.tipCents+$;function ue(e){K(e.value),k(null),e.percent!==null&&Y(``)}function de(){if(L(J)===null){k(`Enter a valid tip with no more than two decimal places.`);return}k(null)}async function fe(e){await Q({includeServiceFee:e,tipCents:$})}async function pe(){M(!0),k(null);try{k(await n(E))}catch(e){k(e instanceof Error?e.message:`Unable to update checkout.`)}finally{M(!1)}}async function me(){if(!await Z.current)return!1;let e=G===`custom`?L(J):$;return e===null?(k(`Enter a valid tip with no more than two decimal places.`),!1):e===X.current.tipCents||Q({includeServiceFee:X.current.includeServiceFee,tipCents:e})}async function he(e){e.preventDefault(),M(!0),k(null);try{if(!await me())return;let e=await i(ce({catalog:r,customFieldValues:w,email:u,memberId:v,merchSize:S,phone:m,phoneCountry:g,shippingMatchesBilling:H}));t?.(e)}catch(e){k(e instanceof Error?e.message:`Unable to complete checkout.`)}finally{M(!1)}}return b(`form`,{className:`lockerverse-payment__form`,onSubmit:he,children:[b(`header`,{children:[r.widget.showCommunityBranding&&c?b(`div`,{className:`lockerverse-payment__branding`,children:[c.imageUrl?y(`img`,{alt:c.name,height:`48`,src:c.imageUrl,width:`48`}):null,y(`strong`,{children:c.name})]}):null,y(`h1`,{children:r.widget.title??r.widget.name}),r.widget.description?y(`p`,{children:r.widget.description}):null]}),y(te,{busy:A,enabled:r.widget.fields.tipping,onCustomTipBlur:de,onCustomTipChange:Y,onSelect:ue,tipInput:J,tipOption:G}),y(ne,{email:u,fields:r.widget.fields,onEmailChange:p,onPhoneChange:h,onPhoneCountryChange:_,phone:m,phoneCountry:g}),y(re,{fields:r.widget.fields,isBillingAddressReady:F,isPaymentReady:R,isShippingAddressReady:B,onBillingAddressReady:()=>I(!0),onPaymentReady:()=>z(!0),onShippingAddressReady:()=>V(!0),onShippingMatchesBillingChange:e=>{U(e),e||V(!1)},shippingMatchesBilling:H,totalCents:o}),y(ie,{fields:r.widget.fields,memberId:v,merchSize:S,onMemberIdChange:x,onMerchSizeChange:C}),r.widget.fields.promoCode?b(`div`,{className:`lockerverse-payment__additional-fields`,children:[b(`label`,{children:[y(`span`,{children:`Promo code`}),y(`input`,{name:`promoCode`,onChange:e=>D(e.currentTarget.value),placeholder:`Optional`,value:E})]}),y(`button`,{disabled:A,onClick:pe,type:`button`,children:E.trim()?`Apply code`:`Remove code`})]}):null,r.widget.customFields.length?y(`div`,{className:`lockerverse-payment__custom-fields`,children:y(ee,{fields:r.widget.customFields,onChange:(e,t)=>T(n=>({...n,[e]:t})),values:w})}):null,O?y(`div`,{role:`alert`,children:O}):null,b(`div`,{className:`lockerverse-payment__actions`,children:[r.widget.fields.serviceFee?b(`label`,{className:`lockerverse-payment__check-row`,children:[y(`input`,{checked:a.includeServiceFee,disabled:A||N,name:`includeServiceFee`,onChange:e=>fe(e.currentTarget.checked),type:`checkbox`}),b(`span`,{children:[`Add `,ae(a.serviceFeeAmountCents),` to help cover processing fees`]})]}):null,y(`button`,{disabled:A,type:`submit`,children:oe(le,$)})]})]})}function X(e){let t=d(null),{apiBaseUrl:n,branding:r,className:i,communitySlug:a,environment:o,fetch:s,includeServiceFee:c,metadata:l,onError:u,onPaymentComplete:f,requestTimeoutMs:p,returnUrl:m,selection:h,sentryDsn:g,unstable_stripeLoader:_,style:v,theme:b=`dark`,tipCents:x,widgetSlug:S,...C}=e,T=m??(globalThis.location===void 0?`https://lockerverse.com`:globalThis.location.href),D=[`lockerverse-payment`,i].filter(Boolean).join(` `),O=n?{apiBaseUrl:n,communitySlug:a,environment:o,widgetSlug:S}:{communitySlug:a,environment:`production`,widgetSlug:S},k=v?.[`--lockerverse-accent`]??r?.accentColor,A=k?{...v,"--lockerverse-accent":k,"--lockerverse-accent-contrast":v?.[`--lockerverse-accent-contrast`]??w(k)??`#08110c`}:v;return y(`section`,{...C,className:D,"data-lockerverse-theme":b,ref:t,style:A,children:y(E,{container:t,children:y(K,{...O,...k?{accentColor:k}:{},...s?{fetch:s}:{},...c===void 0?{}:{includeServiceFee:c},...l?{metadata:l}:{},...u?{onError:u}:{},...p===void 0?{}:{requestTimeoutMs:p},returnUrl:T,selection:h,...g===void 0?{}:{sentryDsn:g},..._?{unstable_stripeLoader:_}:{},theme:b,...x===void 0?{}:{tipCents:x},children:y(Y,{...r?{branding:r}:{},...f?{onComplete:f}:{}})})})})}export{Y as LockerverseCheckoutSessionPaymentForm,K as LockerverseCheckoutSessionProvider,X as LockerversePayment,q as useLockerverseCheckoutSession};
1
+ import{AddressElement as e,Elements as t,PaymentElement as n,useElements as r,useStripe as i}from"@stripe/react-stripe-js";import{loadStripe as a}from"@stripe/stripe-js/pure/index.js";import{createContext as o,useContext as s,useEffect as c,useId as l,useMemo as u,useReducer as d,useRef as f,useState as p}from"react";import{Select as m}from"@base-ui/react/select";import{Fragment as h,jsx as g,jsxs as _}from"react/jsx-runtime";import{LockerverseSdkError as v,createLockerverseCheckoutClient as y}from"@lockerverse/sdk/checkout";import{array as b,email as x,minLength as S,minValue as C,nonEmpty as w,number as T,object as E,pipe as D,regex as O,safeInteger as ee,safeParse as k,strictObject as A,string as j,trim as M,union as N}from"valibot";const te=/^#([\da-f]{3}|[\da-f]{6})$/i;function P(e){let t=te.exec(e.trim());if(!t)return;let[,n]=t;if(!n)return;let r=n.length===3?Array.from(n,e=>`${e}${e}`).join(``):n;return[0,2,4].map(e=>Number.parseInt(r.slice(e,e+2),16))}function F([e,t,n]){let[r=0,i=0,a=0]=[e,t,n].map((e=0)=>{let t=e/255;return t<=.04045?t/12.92:((t+.055)/1.055)**2.4});return .2126*r+.7152*i+.0722*a}function I(e){let t=P(e);if(!t)return;let n=F(t);return(n+.05)/.05>=1.05/(n+.05)?`#000`:`#fff`}const L=o(void 0);function ne({children:e,container:t}){return g(L.Provider,{value:t,children:e})}function R(){return g(`svg`,{"aria-hidden":`true`,fill:`none`,viewBox:`0 0 16 16`,children:g(`path`,{d:`m4 6 4 4 4-4`})})}function z(){return g(`svg`,{"aria-hidden":`true`,fill:`none`,viewBox:`0 0 16 16`,children:g(`path`,{d:`m3 8 3 3 7-7`})})}function B({ariaDescribedBy:e,ariaLabel:t,ariaLabelledBy:n,className:r,id:i,invalid:a=!1,name:o,onValueChange:c,options:l,value:u}){let d=s(L),f=[`lockerverse-payment__select`,r].filter(Boolean).join(` `);return g(`div`,{className:f,children:_(m.Root,{id:i,items:l,name:o,onValueChange:e=>{e!==null&&c(e)},value:u,children:[_(m.Trigger,{"aria-describedby":e,"aria-invalid":a||void 0,"aria-label":t,"aria-labelledby":n,className:`lockerverse-payment__select-trigger`,children:[g(m.Value,{}),g(m.Icon,{"aria-hidden":`true`,className:`lockerverse-payment__select-icon`,children:g(R,{})})]}),g(m.Portal,{container:d,children:g(m.Positioner,{alignItemWithTrigger:!1,className:`lockerverse-payment__select-positioner`,sideOffset:6,children:g(m.Popup,{className:`lockerverse-payment__select-popup`,children:g(m.List,{className:`lockerverse-payment__select-list`,children:l.map(e=>_(m.Item,{className:`lockerverse-payment__select-item`,value:e.value,children:[g(m.ItemText,{children:e.label}),g(m.ItemIndicator,{"aria-hidden":`true`,className:`lockerverse-payment__select-item-indicator`,children:g(z,{})})]},e.value))})})})})]})})}const re=[`XS`,`S`,`M`,`L`,`XL`,`XXL`,`XXXL`],V=[`15`,`12`,`10`,`5`],H=[...V,`custom`];function ie({enabled:e,error:t,errorId:n,onChange:r,values:i}){if(!e)return null;let a=e=>r({...i,...e}),o=(e,t)=>{let n=H.indexOf(t),r;switch(e.key){case`ArrowDown`:case`ArrowRight`:r=(n+1)%H.length;break;case`ArrowLeft`:case`ArrowUp`:r=(n-1+H.length)%H.length;break;case`Home`:r=0;break;case`End`:r=H.length-1;break;default:return}e.preventDefault();let i=H[r];i&&((e.currentTarget.closest(`[role="radiogroup"]`)?.querySelectorAll(`input[type="radio"]`))?.[r]?.focus(),a({tipPercent:i}))};return _(`div`,{className:`lockerverse-payment__tip-box`,children:[g(`p`,{children:`Add a tip to support the Lockerverse platform`}),_(`div`,{"aria-label":`Tip amount`,role:`radiogroup`,children:[V.map(e=>_(`label`,{className:`lockerverse-payment__tip-choice`,children:[g(`input`,{checked:i.tipPercent===e,name:`tipPercent`,onChange:()=>a({tipPercent:e}),onKeyDown:t=>o(t,e),tabIndex:i.tipPercent===e?0:-1,type:`radio`,value:e}),_(`span`,{children:[e,`%`]})]},e)),_(`label`,{className:`lockerverse-payment__tip-choice`,children:[g(`input`,{checked:i.tipPercent===`custom`,name:`tipPercent`,onChange:()=>a({tipPercent:`custom`}),onKeyDown:e=>o(e,`custom`),tabIndex:i.tipPercent===`custom`?0:-1,type:`radio`,value:`custom`}),g(`span`,{children:`Other`})]})]}),i.tipPercent===`custom`?_(`label`,{children:[g(`span`,{children:`Custom tip`}),_(`span`,{className:`lockerverse-payment__money-input`,children:[g(`span`,{"aria-hidden":`true`,children:`$`}),g(`input`,{"aria-describedby":t?n:void 0,"aria-invalid":t?`true`:void 0,inputMode:`decimal`,name:`tip`,onChange:e=>a({customTip:e.currentTarget.value}),placeholder:`0.00`,value:i.customTip})]}),t?g(`span`,{className:`lockerverse-payment__field-message`,id:n,children:t}):null]}):g(`input`,{name:`tip`,type:`hidden`,value:i.tipPercent})]})}function ae({checked:e,children:t,name:n,onChange:r}){return _(`label`,{className:`lockerverse-payment__check-row`,children:[g(`input`,{checked:e,name:n,onChange:e=>r(e.currentTarget.checked),type:`checkbox`}),g(`span`,{children:t})]})}function oe({customFields:e,errors:t,fields:n,idPrefix:r,onChange:i,values:a}){let o=e=>i({...a,...e});return _(`div`,{className:`lockerverse-payment__additional-fields`,children:[n.memberId?_(`label`,{children:[g(`span`,{children:`Member ID`}),g(`input`,{name:`memberId`,onChange:e=>o({memberId:e.currentTarget.value}),placeholder:`Optional`,value:a.memberId})]}):null,n.merchSize?_(`div`,{className:`lockerverse-payment__field`,children:[g(`span`,{id:`${r}-merch-size-label`,children:`Size`}),g(B,{ariaLabelledBy:`${r}-merch-size-label`,name:`merchSize`,onValueChange:e=>o({merchSize:e}),options:re.map(e=>({label:e,value:e})),value:a.merchSize})]}):null,n.promoCode?_(`label`,{children:[g(`span`,{children:`Promo code`}),g(`input`,{name:`promoCode`,onChange:e=>o({promoCode:e.currentTarget.value}),placeholder:`Optional`,value:a.promoCode})]}):null,e.map(e=>g(ce,{error:t[e.id],field:e,idPrefix:r,onChange:t=>o({customFields:{...a.customFields,[e.id]:t}}),value:a.customFields[e.id]},e.id))]})}function se({amountCents:e,enabled:t,onChange:n,values:r}){return t?_(ae,{checked:r.includeServiceFee,name:`includeServiceFee`,onChange:e=>n({...r,includeServiceFee:e}),children:[`Add `,de(e),` to help cover processing fees`]}):null}function ce({error:e,field:t,idPrefix:n,onChange:r,value:i}){let a=`custom:${t.id}`,o=`${n}-custom-${t.id}`,s=`${o}-error`;switch(t.type){case`text`:case`textarea`:return g(le,{controlId:o,error:e,errorId:s,field:t,name:a,onChange:r,value:i});case`select`:case`multi_select`:return g(ue,{controlId:o,error:e,errorId:s,field:t,name:a,onChange:r,value:i});case`radio`:case`checkboxes`:return g(W,{controlId:o,error:e,errorId:s,field:t,name:a,onChange:r,value:i});default:return null}}function U({error:e,id:t}){return e?g(`p`,{className:`lockerverse-payment__field-message`,id:t,children:e}):null}function le({controlId:e,error:t,errorId:n,field:r,name:i,onChange:a,value:o}){let s={"aria-describedby":t?n:void 0,"aria-invalid":t?`true`:void 0,id:e,name:i,onChange:e=>a(e.currentTarget.value),required:r.required,value:typeof o==`string`?o:``};return _(`label`,{htmlFor:e,children:[g(`span`,{children:r.label}),r.type===`textarea`?g(`textarea`,{...s}):g(`input`,{...s}),g(U,{error:t,id:n})]})}function ue({controlId:e,error:t,errorId:n,field:r,name:i,onChange:a,value:o}){return _(`label`,{htmlFor:e,children:[g(`span`,{children:r.label}),_(`select`,{"aria-describedby":t?n:void 0,"aria-invalid":t?`true`:void 0,id:e,multiple:r.type===`multi_select`,name:i,onChange:e=>a(r.type===`multi_select`?[...e.currentTarget.selectedOptions].map(e=>e.value):e.currentTarget.value),required:r.required,value:o??(r.type===`multi_select`?[]:``),children:[r.type===`select`?g(`option`,{value:``,children:`Select…`}):null,r.options.map(e=>g(`option`,{value:e.id,children:e.label},e.id))]}),g(U,{error:t,id:n})]})}function W({controlId:e,error:t,errorId:n,field:r,name:i,onChange:a,value:o}){return _(`fieldset`,{"aria-describedby":t?n:void 0,"aria-invalid":t?`true`:void 0,children:[g(`legend`,{children:r.label}),r.options.map((t,n)=>{let s=Array.isArray(o)?o.includes(t.id):o===t.id;return _(`label`,{className:`lockerverse-payment__check-row`,children:[g(`input`,{checked:s,id:`${e}-${n}`,name:i,onChange:e=>{if(r.type===`radio`){a(t.id);return}let n=Array.isArray(o)?o:[];a(e.currentTarget.checked?[...n,t.id]:n.filter(e=>e!==t.id))},required:r.required,type:r.type===`radio`?`radio`:`checkbox`,value:t.id}),g(`span`,{children:t.label})]},t.id)}),g(U,{error:t,id:n})]})}function de(e){return new Intl.NumberFormat(`en-US`,{currency:`USD`,style:`currency`}).format(e/100)}const G=[`amountCents`,`discountableSubtotalCents`,`discountCents`,`serviceFeeCents`,`subtotalCents`,`tipCents`,`totalCents`];function K(e,t){return G.some(n=>e[n]!==t[n])||e.payment.connectedAccountId!==t.payment.connectedAccountId||e.payment.currency!==t.payment.currency||JSON.stringify(e.appliedDiscount)!==JSON.stringify(t.appliedDiscount)||JSON.stringify(e.lineItems)!==JSON.stringify(t.lineItems)}function q(e){return e.checkoutStatus===`success`?{kind:`success`,payment:e}:e.checkoutStatus===`failed`?{kind:`failed`,payment:e}:{kind:`unresolved`,paymentReference:e.paymentReference,reason:e.checkoutStatus===`action_required`?`action_required`:`pending`}}async function J(e,t,n){if(t.checkoutStatus!==`action_required`)return q(t);if(t.clientSecret)try{await n.handleNextAction({clientSecret:t.clientSecret})}catch{}try{return q(await e.getPaymentStatus(t.paymentReference))}catch{return{kind:`unresolved`,paymentReference:t.paymentReference,reason:`action_required`}}}async function fe(e,t,n){let r;try{r=await e.submitPayment(t)}catch(n){if(!(n instanceof v&&n.recoveryRecommended))throw n;try{r=await e.getPaymentStatus(t.checkout.paymentReference)}catch{return{kind:`unresolved`,paymentReference:t.checkout.paymentReference,reason:`recovery_failed`}}}return J(e,r,n)}async function pe(e,t,n){try{return J(e,await e.getPaymentStatus(t),n)}catch{return{kind:`unresolved`,paymentReference:t,reason:`recovery_failed`}}}const Y=D(j(),M(),w()),me=D(T(),ee(),C(1)),he=D(b(N([A({amountCents:me,productSlug:Y}),A({productSlug:Y,quantity:me})])),S(1)),X=D(j(),M(),O(/^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/,`Enter a valid tip amount.`));function Z(e){let t=k(X,e);if(!t.success)return{message:t.issues[0]?.message??`Enter a valid tip amount.`,success:!1};let[n=`0`,r=``]=t.output.split(`.`),i=BigInt(n)*100n+BigInt(r.padEnd(2,`0`));return i>BigInt(2**53-1)?{message:`Enter a valid tip amount.`,success:!1}:{cents:Number(i),success:!0}}function ge(e){let t=k(he,e);return t.success?{success:!0,value:t.output}:{message:`Lockerverse payment configuration is invalid.`,success:!1}}const _e=D(j(),M(),w(`Email is required.`),x(`Enter a valid email address.`)),ve=D(j(),M(),w(`Phone is required.`),O(/^\+[1-9]\d{6,14}$/,`Enter a valid phone number.`));function ye(e){return e.trim().replace(/[().\s-]/g,``)}function be(e,t){let n=t?{...e,phone:ye(e.phone)}:e,r=E(t?{email:_e,phone:ve}:{email:_e}),i=k(r,n);if(i.success)return{errors:{},value:i.output};let a={};for(let e of i.issues){let t=e.path?.[0]?.key;(t===`email`||t===`phone`)&&!a[t]&&(a[t]=e.message)}return{errors:a,value:null}}function xe(e,t){let n={};for(let r of e){if(!r.required)continue;let e=`${r.label} is required.`,i=t[r.id],a=r.type===`checkboxes`||r.type===`multi_select`?k(D(b(j()),S(1,e)),i??[]):k(D(j(),M(),w(e)),typeof i==`string`?i:``);a.success||(n[r.id]=a.issues[0]?.message??e)}return n}function Q(e,t){switch(t.type){case`loading`:return{configuration:t.configuration,phase:`loading`,revision:e.revision,selectionKey:t.selectionKey};case`ready`:return{catalog:t.catalog,checkoutItems:t.checkoutItems,client:t.client,configuration:t.configuration,phase:`ready`,preparedCheckout:t.preparedCheckout,revision:e.revision+1,selectionKey:t.selectionKey};case`error`:return{configuration:t.configuration,failure:t.failure,phase:`error`,revision:e.revision,selectionKey:t.selectionKey};case`checkout`:return e.phase===`ready`?{...e,preparedCheckout:t.preparedCheckout}:e;case`retry`:return{phase:`idle`,revision:e.revision+1};default:return e}}function Se(e,t){if(`amountCents`in t){if(e.pricingMode!==`custom`)throw TypeError(`Fixed-price Products do not accept custom amounts.`);if(e.minimumAmountCents!==null&&t.amountCents<e.minimumAmountCents)throw TypeError(`Product amount must be at least ${e.minimumAmountCents} cents.`);return{amountCents:t.amountCents,productId:e.id}}if(e.pricingMode!==`fixed`)throw TypeError(`Custom-amount Products do not accept quantities.`);if(e.minimumQuantity!==null&&t.quantity<e.minimumQuantity)throw TypeError(`Product quantity must be at least ${e.minimumQuantity}.`);if(e.maximumQuantity!==null&&t.quantity>e.maximumQuantity)throw TypeError(`Product quantity must not exceed ${e.maximumQuantity}.`);if(e.inventoryQuantity!==null&&t.quantity>e.inventoryQuantity)throw TypeError(`Requested Product quantity is unavailable.`);return{productId:e.id,quantity:t.quantity}}function Ce(e,t){if(t.length===0)throw TypeError(`Lockerverse payment requires at least one Product.`);return t.map(t=>{let n=e.products.find(e=>e.slug===t.productSlug);if(!n)throw TypeError(`Product ${t.productSlug} is not available.`);return Se(n,t)})}function we(e,t){let{apiBaseUrl:n,communitySlug:r,environment:i,fetch:a,requestTimeoutMs:o,sentryDsn:s,widgetSlug:c}=e,l={communitySlug:r,widgetSlug:c,...a?{fetch:a}:{},...t?{onError:t}:{},...o===void 0?{}:{requestTimeoutMs:o},...s===void 0?{}:{sentryDsn:s}};if(n===void 0){if(i===`development`)throw TypeError(`Lockerverse development checkout requires an API base URL.`);return{...l,...i===`production`?{environment:i}:{}}}if(!i)throw TypeError(`Lockerverse development checkout requires an environment.`);return{...l,apiBaseUrl:n,environment:i}}function Te(e,t,n){return e?.configuration===t&&e.selectionKey===n}function Ee({apiBaseUrl:e,communitySlug:t,environment:n,fetch:r,onError:i,paymentState:a,requestTimeoutMs:o,selection:s,sentryDsn:l,widgetSlug:p}){let m=u(()=>({apiBaseUrl:e,communitySlug:t,environment:n,fetch:r,requestTimeoutMs:o,sentryDsn:l,widgetSlug:p}),[e,t,n,r,o,l,p]),h=ge(s),g=h.success?JSON.stringify(h.value):`invalid-selection`,_=u(()=>h.success?JSON.parse(g):[],[h.success,g]),[v,b]=d(Q,{phase:`idle`,revision:0}),x=f(void 0),S=f(void 0),C=f(i);return C.current=i,c(()=>{if(!h.success||a===`submitting`||a===`success`||a===`unresolved`||Te(S.current,m,g)||Te(x.current,m,g))return;let e=!0,t={configuration:m,selectionKey:g};x.current=t,b({configuration:m,selectionKey:g,type:`loading`});async function n(){try{let n=y(we(m,e=>C.current?.(e))),r=await n.load(),i=Ce(r,_),a=await n.calculateTotal({...r.widget.fields.serviceFee?{includeServiceFee:!0}:{},items:i});e&&(x.current=void 0,S.current=t,b({catalog:r,checkoutItems:i,client:n,configuration:m,preparedCheckout:a,selectionKey:g,type:`ready`}))}catch(n){e&&(x.current=void 0,S.current=t,b({configuration:m,failure:n instanceof Error?n.message:`Lockerverse payment could not load.`,selectionKey:g,type:`error`}))}}return n(),()=>{e=!1,Te(x.current,m,g)&&(x.current=void 0)}},[m,h.success,a,g,v.revision,_]),{retryCheckout:()=>{x.current=void 0,S.current=void 0,b({type:`retry`})},selectionError:h.success?void 0:h.message,session:v,updateCheckout:e=>b({preparedCheckout:e,type:`checkout`})}}function De(e){return new Intl.NumberFormat(`en-US`,{currency:`USD`,style:`currency`}).format(e/100)}function Oe(e,t){return t.tipPercent===`custom`?Z(t.customTip):{cents:Math.round(e*Number(t.tipPercent)/100),success:!0}}const ke=[{callingCode:`+1`,label:`🇺🇸 +1`,value:`US`},{callingCode:`+52`,label:`🇲🇽 +52`,value:`MX`},{callingCode:`+380`,label:`🇺🇦 +380`,value:`UA`},{callingCode:`+48`,label:`🇵🇱 +48`,value:`PL`},{callingCode:`+1`,label:`🇨🇦 +1`,value:`CA`},{callingCode:`+49`,label:`🇩🇪 +49`,value:`DE`},{callingCode:`+44`,label:`🇬🇧 +44`,value:`GB`},{callingCode:`+46`,label:`🇸🇪 +46`,value:`SE`},{callingCode:`+358`,label:`🇫🇮 +358`,value:`FI`},{callingCode:`+1`,label:`🇵🇷 +1`,value:`PR`}];function Ae(e,t){return e.trim().startsWith(`+`)?e:`${ke.find(e=>e.value===t)?.callingCode??`+1`}${e}`}function je(e,t){return e.map(e=>{let n=t[e.id];return e.type===`checkboxes`||e.type===`multi_select`?{fieldId:e.id,value:Array.isArray(n)?n:[]}:{fieldId:e.id,value:typeof n==`string`?n:``}})}function Me(e,t,n,r){return{email:n,...e.widget.fields.serviceFee?{includeServiceFee:t.includeServiceFee}:{},...e.widget.fields.promoCode&&t.promoCode.trim()?{promoCode:t.promoCode.trim()}:{},...e.widget.fields.tipping?{tipCents:r}:{}}}async function Ne(e,t){let n=e.getElement(`address`,{mode:t}),r=t===`billing`?`Billing`:`Shipping`;if(!n)throw Error(`${r} address is still loading.`);let i=await n.getValue();if(!i.complete)throw Error(`${r} address is required.`);return i.value}function Pe(e,t,n,r){if(e.widget.fields.shipping)return n.shippingMatchesBilling?r:Ne(t,`shipping`)}function Fe({billingAddress:e,catalog:t,email:n,phone:r,shippingAddress:i}){return{payment_method_data:{billing_details:{address:e.address,email:n,name:e.name,...t.widget.fields.phone?{phone:r}:{}}},...i?{shipping:{address:i.address,name:i.name,phone:t.widget.fields.phone?r:i.phone??null}}:{}}}function Ie({catalog:e,confirmationToken:t,email:n,fieldValues:r,metadata:i,phone:a}){return{confirmationToken:t,customFieldAnswers:je(e.widget.customFields,r.customFields),email:n,...i?{metadata:i}:{},...e.widget.fields.memberId&&r.memberId.trim()?{memberId:r.memberId.trim()}:{},...e.widget.fields.merchSize?{merchSize:r.merchSize}:{},...e.widget.fields.phone?{phone:a}:{}}}async function Le({catalog:e,checkoutItems:t,client:n,elements:r,email:i,fieldValues:a,metadata:o,onPaymentRecoveryChange:s,phone:c,quote:l,stripe:u}){let d=i.trim().toLowerCase(),f=ye(c),p=Oe(l.subtotalCents,a);if(!p.success)throw Error(p.message);let m=Me(e,a,d,p.cents),h=await n.calculateTotal({...m,items:t});if(await r.update({amount:h.totalCents}),K(l,h))return{kind:`quote_changed`,quote:h};let g=await r.submit();if(g.error)throw Error(g.error.message);let _=await Ne(r,`billing`),v=await Pe(e,r,a,_),y=await u.createConfirmationToken({elements:r,params:Fe({billingAddress:_,catalog:e,email:d,phone:f,shippingAddress:v})});if(y.error)throw Error(y.error.message);$(s,{connectedAccountId:h.payment.connectedAccountId,paymentReference:h.paymentReference});let b=await fe(n,{checkout:h,submission:Ie({catalog:e,confirmationToken:y.confirmationToken.id,email:d,fieldValues:a,metadata:o,phone:f})},u);return b.kind===`failed`?{kind:`payment_failed`,message:`Payment was declined. Check your payment details and try again.`}:b.kind===`unresolved`?{kind:`payment_unresolved`,paymentReference:b.paymentReference,reason:b.reason}:{kind:`payment`,payment:b.payment,quote:h}}function Re({accentColor:e,catalog:n,checkoutItems:r,client:i,fontFamily:a,metadata:o,onPaymentComplete:s,onPaymentRecoveryChange:c,onPaymentUncertain:l,onQuoteChange:d,quote:f,resumePayment:p,onStateChange:m,stripeLoader:h,theme:_,visualStyle:v}){let y=p?p.connectedAccountId:f.payment.connectedAccountId,b=u(()=>h(n.payment.publishableKey,y?{stripeAccount:y}:void 0),[n.payment.publishableKey,y,h]);return g(t,{options:{amount:f.totalCents,appearance:{rules:{".Input:focus":{borderColor:e,boxShadow:`0 0 0 1px ${e}`,outline:`none`}},theme:_===`light`?`stripe`:`night`,variables:{borderRadius:v?.[`--lockerverse-radius`]??`10px`,colorBackground:v?.[`--lockerverse-control`]??(_===`light`?`#f5f6f7`:`#121212`),colorDanger:v?.[`--lockerverse-danger`]??(_===`light`?`#c52b3e`:`#f08a98`),colorPrimary:e,colorText:v?.[`--lockerverse-text`]??(_===`light`?`#121416`:`#ffffff`),colorTextPlaceholder:v?.[`--lockerverse-placeholder`]??(_===`light`?`#72767d`:`#6b6b6b`),colorTextSecondary:v?.[`--lockerverse-muted`]??(_===`light`?`#62666d`:`#a1a1aa`),focusBoxShadow:`none`,focusOutline:`none`,fontFamily:a,fontSizeBase:`16px`}},currency:f.payment.currency,excludedPaymentMethodTypes:[`us_bank_account`],mode:`payment`,syncAddressCheckbox:`none`},stripe:b,children:g(Ke,{catalog:n,checkoutItems:r,client:i,metadata:o,onPaymentComplete:s,onPaymentRecoveryChange:c,onPaymentUncertain:l,onQuoteChange:d,onStateChange:m,quote:f,resumePayment:p})},`${n.payment.publishableKey}:${y??`platform`}`)}function ze({label:e}){return _(`div`,{className:`lockerverse-payment__stripe-loader`,role:`status`,children:[g(`p`,{children:e}),_(`div`,{"aria-hidden":`true`,children:[g(`span`,{}),g(`span`,{}),g(`span`,{})]})]})}function Be({onError:e,onReady:t,ready:r}){return _(`div`,{className:`lockerverse-payment__stripe-element`,"data-ready":r,children:[r?null:g(ze,{label:`Loading payment form...`}),g(`div`,{className:`lockerverse-payment__stripe-mount`,children:g(n,{onLoadError:({error:t})=>e(t.message??`Payment form failed to load.`),onReady:t,options:{business:{name:`Lockerverse`},fields:{billingDetails:{address:`never`,email:`never`,name:`never`,phone:`never`}},layout:`tabs`,terms:{applePay:`auto`,auBecsDebit:`never`,bancontact:`never`,card:`always`,cashapp:`never`,googlePay:`never`,ideal:`never`,paypal:`auto`,sepaDebit:`never`,sofort:`never`,usBankAccount:`never`},wallets:{applePay:`auto`,googlePay:`never`}}})})]})}function Ve({label:t,mode:n,onError:r,onReady:i,ready:a}){return _(`div`,{className:`lockerverse-payment__address`,children:[g(`h2`,{children:t}),_(`div`,{className:`lockerverse-payment__stripe-element lockerverse-payment__stripe-element--address`,"data-ready":a,children:[a?null:g(ze,{label:`Loading ${t.toLowerCase()}...`}),g(`div`,{className:`lockerverse-payment__stripe-mount`,children:g(e,{onLoadError:({error:e})=>r(e.message??`${t} failed to load.`),onReady:i,options:{autocomplete:{mode:`automatic`},mode:n}})})]})]})}function He({message:e}){return e?g(`p`,{className:`lockerverse-payment__field-message`,role:`alert`,children:e}):null}function $(e,t){try{e?.(t)}catch{}}function Ue({customFieldErrors:e,emailRef:t,form:n,parsedTipSuccess:r,phoneRef:i,validationErrors:a}){if(a.email){t.current?.focus();return}if(a.phone){i.current?.focus();return}if(!r){n.querySelector(`[name="tip"]`)?.focus();return}let[o]=Object.keys(e);o&&n.querySelector(`[name="custom:${o}"]`)?.focus()}function We({onPaymentComplete:e,onPaymentRecoveryChange:t,onPaymentUncertain:n,onQuoteChange:r,onStateChange:i,result:a,setDisplayedTotalCents:o,setPaymentError:s,setTerminalState:c}){if(a.kind===`quote_changed`){let e=`The total changed to ${De(a.quote.totalCents)}. Review it and pay again.`;r(a.quote,e),o(a.quote.totalCents),i(`idle`);return}if(a.kind===`payment_failed`){$(t,null),s(a.message),i(`error`);return}if(a.kind===`payment_unresolved`){c({kind:`unresolved`,message:`Payment is still processing. Do not submit it again.`}),i(`unresolved`);try{n?.({paymentReference:a.paymentReference,reason:a.reason})}catch{}return}r(a.quote),$(t,null),c({kind:`success`,message:`Payment completed successfully.`}),i(`success`);try{e?.(a.payment)}catch{}}function Ge({email:e,emailErrorId:t,emailId:n,emailRef:r,errors:i,onEmailChange:a,onPhoneChange:o,onPhoneCountryChange:s,phone:c,phoneCountry:l,phoneEnabled:u,phoneErrorId:d,phoneId:f,phoneRef:p}){return _(`div`,{className:`lockerverse-payment__contact`,children:[g(`label`,{htmlFor:n,children:`Email`}),g(`input`,{"aria-describedby":i.email?t:void 0,"aria-invalid":i.email?`true`:void 0,autoComplete:`email`,id:n,name:`email`,onChange:e=>a(e.currentTarget.value),placeholder:`name@example.com`,ref:r,type:`email`,value:e}),i.email?g(`p`,{className:`lockerverse-payment__field-message`,id:t,children:i.email}):null,u?_(h,{children:[g(`label`,{htmlFor:f,children:`Phone`}),_(`div`,{className:`lockerverse-payment__phone-control`,children:[g(B,{ariaLabel:`Phone number country`,className:`lockerverse-payment__select--phone-country`,name:`phoneCountry`,onValueChange:s,options:ke,value:l}),g(`input`,{"aria-describedby":i.phone?d:void 0,"aria-invalid":i.phone?`true`:void 0,autoComplete:`tel`,id:f,inputMode:`tel`,name:`phone`,onChange:e=>o(e.currentTarget.value),placeholder:`(201) 555-0123`,ref:p,type:`tel`,value:c})]}),i.phone?g(`p`,{className:`lockerverse-payment__field-message`,id:d,children:i.phone}):null]}):null]})}function Ke({catalog:e,checkoutItems:t,client:n,metadata:a,onPaymentComplete:o,onPaymentRecoveryChange:s,onPaymentUncertain:u,onQuoteChange:d,onStateChange:m,quote:h,resumePayment:v}){let[y,b]=p(``),[x,S]=p(``),[C,w]=p(`US`),[T,E]=p({}),[D,O]=p(),[ee,k]=p({}),[A,j]=p(),[M,N]=p(!1),[te,P]=p(!!v),[F,I]=p(),[L,ne]=p(!1),[R,z]=p(!1),[B,re]=p(!1),[V,H]=p({customFields:{},customTip:``,includeServiceFee:e.widget.fields.serviceFee,memberId:``,merchSize:`M`,promoCode:``,shippingMatchesBilling:!0,tipPercent:`10`}),[ce,U]=p(h.totalCents),le=f(null),ue=f(null),W=f(null),de=f(!1),G=r(),K=i(),q=`lockerverse-${l()}`,J=`${q}-email`,fe=`${J}-error`,Y=`${q}-phone`,me=`${Y}-error`,he=`${q}-tip-error`,X=e.widget.fields.tipping?Oe(h.subtotalCents,V):{cents:0,success:!0},Z=X.success?X.cents:null,ge=Z??0,_e=ce-ge,ve=!e.widget.fields.shipping||V.shippingMatchesBilling||B;c(()=>{if(Z===null)return;let t=e.widget.fields.serviceFee&&V.includeServiceFee?h.serviceFeeCents||Math.round(h.subtotalCents*e.pricingPolicy.serviceFeeRateBasisPoints/1e4):0,n=h.totalCents-h.serviceFeeCents-h.tipCents+t+Z;U(n),G?.update({amount:n})},[e.widget.fields.serviceFee,e.widget.fields.tipping,G,V.includeServiceFee,V.tipPercent,V.customTip,Z,h.serviceFeeCents,h.tipCents,h.totalCents]),c(()=>{M&&W.current?.focus()},[M]),c(()=>{!(v&&K)||de.current||(de.current=!0,m(`submitting`),pe(n,v.paymentReference,K).then(e=>{if(e.kind===`failed`){$(s,null),O(`The previous payment failed. Check your details and try again.`),P(!1),m(`error`);return}if(e.kind===`unresolved`){I({kind:`unresolved`,message:`Payment is still processing. Do not submit it again.`}),m(`unresolved`);try{u?.({paymentReference:e.paymentReference,reason:e.reason})}catch{}return}$(s,null),I({kind:`success`,message:`Payment completed successfully.`}),m(`success`);try{o?.(e.payment)}catch{}}))},[n,o,s,u,m,v,K]);function ye(e){E(t=>{let n={...t};return delete n[e],n})}function Q(e){H(e),k({}),j(void 0)}function Se(e){O(e),m(`error`)}async function Ce(r){r.preventDefault();let i=be({email:y,phone:Ae(x,C)},e.widget.fields.phone),c=xe(e.widget.customFields,V.customFields);if(!(i.value&&X.success)||Object.keys(c).length>0){E(i.errors),k(c),j(X.success?void 0:X.message),m(`invalid`);let e=r.currentTarget;queueMicrotask(()=>{Ue({customFieldErrors:c,emailRef:le,form:e,parsedTipSuccess:X.success,phoneRef:ue,validationErrors:i.errors})});return}if(E({}),k({}),!(G&&K)){O(`Payment form is still loading.`),m(`error`);return}O(void 0),N(!0),m(`submitting`);try{We({onPaymentComplete:o,onPaymentRecoveryChange:s,onPaymentUncertain:u,onQuoteChange:d,onStateChange:m,result:await Le({catalog:e,checkoutItems:t,client:n,elements:G,email:y,fieldValues:V,metadata:a,onPaymentRecoveryChange:s,phone:Ae(x,C),quote:h,stripe:K}),setDisplayedTotalCents:U,setPaymentError:O,setTerminalState:I})}catch(e){$(s,null),O(e instanceof Error?e.message:`Payment could not be completed.`),m(`error`)}finally{N(!1)}}return F?g(`p`,{className:`lockerverse-payment__payment-status`,ref:W,role:`status`,tabIndex:-1,children:F.message}):te?g(`p`,{className:`lockerverse-payment__payment-status`,role:`status`,children:`Recovering payment…`}):_(`form`,{"aria-busy":M,className:`lockerverse-payment__form`,noValidate:!0,onSubmit:Ce,children:[g(`div`,{"data-lockerverse-input-region":``,inert:M?!0:void 0,children:_(`fieldset`,{className:`lockerverse-payment__input-fieldset`,disabled:M,children:[g(ie,{enabled:e.widget.fields.tipping,error:A,errorId:he,onChange:Q,values:V}),g(Ge,{email:y,emailErrorId:fe,emailId:J,emailRef:le,errors:T,onEmailChange:e=>{b(e),ye(`email`)},onPhoneChange:e=>{S(e),ye(`phone`)},onPhoneCountryChange:w,phone:x,phoneCountry:C,phoneEnabled:e.widget.fields.phone,phoneErrorId:me,phoneId:Y,phoneRef:ue}),g(Be,{onError:Se,onReady:()=>ne(!0),ready:L}),g(Ve,{label:`Billing address`,mode:`billing`,onError:Se,onReady:()=>z(!0),ready:R}),e.widget.fields.shipping?_(`div`,{className:`lockerverse-payment__shipping`,children:[g(ae,{checked:V.shippingMatchesBilling,name:`shippingMatchesBilling`,onChange:e=>{Q({...V,shippingMatchesBilling:e}),e||re(!1)},children:`Shipping is same as billing information`}),V.shippingMatchesBilling?null:g(Ve,{label:`Shipping address`,mode:`shipping`,onError:Se,onReady:()=>re(!0),ready:B})]}):null,g(oe,{customFields:e.widget.customFields,errors:ee,fields:e.widget.fields,idPrefix:q,onChange:Q,values:V}),_(`div`,{className:`lockerverse-payment__actions`,children:[g(se,{amountCents:h.serviceFeeCents||Math.round(h.subtotalCents*e.pricingPolicy.serviceFeeRateBasisPoints/1e4),enabled:e.widget.fields.serviceFee,onChange:Q,values:V}),g(`button`,{"aria-busy":M,"aria-label":`Process payment for ${De(ce)} total`,disabled:M||!(L&&R&&ve),type:`submit`,children:M?`Processing…`:`Process Payment (${De(_e)})${ge>0?` + ${De(ge)} tip`:``}`})]})]})}),M?g(`p`,{className:`lockerverse-payment__payment-status`,ref:W,role:`status`,tabIndex:-1,children:`Processing payment…`}):null,g(He,{message:D})]})}function qe(){return _(`div`,{className:`lockerverse-payment__skeleton-loader-block`,children:[g(`span`,{className:`lockerverse-payment__skeleton-loader-label`}),_(`div`,{className:`lockerverse-payment__skeleton-loader-content`,children:[g(`span`,{className:`lockerverse-payment__skeleton-loader-full`}),_(`div`,{className:`lockerverse-payment__skeleton-loader-grid`,children:[g(`span`,{className:`lockerverse-payment__skeleton-loader-half`}),g(`span`,{className:`lockerverse-payment__skeleton-loader-half`})]})]})]})}function Je(){return _(`div`,{className:`lockerverse-payment__loading`,children:[g(`span`,{"aria-live":`polite`,className:`lockerverse-payment__sr-only`,role:`status`,children:`Loading payment…`}),_(`div`,{"aria-hidden":`true`,className:`lockerverse-payment__skeleton`,children:[_(`div`,{className:`lockerverse-payment__skeleton-branding`,children:[g(`span`,{className:`lockerverse-payment__skeleton-avatar`}),g(`span`,{className:`lockerverse-payment__skeleton-community`})]}),_(`div`,{className:`lockerverse-payment__skeleton-contact`,children:[_(`div`,{className:`lockerverse-payment__skeleton-field`,children:[g(`span`,{className:`lockerverse-payment__skeleton-label`}),g(`span`,{className:`lockerverse-payment__skeleton-input`})]}),_(`div`,{className:`lockerverse-payment__skeleton-field`,children:[g(`span`,{className:`lockerverse-payment__skeleton-label`}),g(`span`,{className:`lockerverse-payment__skeleton-input`})]})]}),g(qe,{}),g(qe,{}),_(`div`,{className:`lockerverse-payment__skeleton-actions`,children:[g(`span`,{className:`lockerverse-payment__skeleton-check-line`}),g(`span`,{className:`lockerverse-payment__skeleton-button`})]})]})]})}function Ye({apiBaseUrl:e,branding:t,className:n,communitySlug:r,environment:i,fetch:o,metadata:s,onError:l,onPaymentComplete:u,onPaymentRecoveryChange:d,onPaymentUncertain:m,requestTimeoutMs:h,resumePayment:v,selection:y,sentryDsn:b,style:x,stripeLoader:S=a,theme:C=`dark`,widgetSlug:w,...T}){let E=f(v).current,D=f(null),[O,ee]=p(),[k,A]=p(`idle`),{retryCheckout:j,selectionError:M,session:N,updateCheckout:te}=Ee({apiBaseUrl:e,communitySlug:r,environment:i,fetch:o,onError:l,paymentState:k,requestTimeoutMs:h,selection:y,sentryDsn:b,widgetSlug:w});c(()=>{N.phase===`loading`&&ee(void 0)},[N.phase]),c(()=>{N.phase===`ready`&&A(e=>e===`success`||e===`unresolved`?e:`idle`)},[N.phase,N.revision]);let P=[`lockerverse-payment`,n].filter(Boolean).join(` `),F=t??(N.phase===`ready`?N.catalog.community:null),L=I(x?.[`--lockerverse-accent`]??F?.accentColor??`#38d77a`),R={...x,...F?.accentColor&&x?.[`--lockerverse-accent`]===void 0?{"--lockerverse-accent":F.accentColor}:{},...L&&x?.[`--lockerverse-accent-contrast`]===void 0?{"--lockerverse-accent-contrast":L}:{}};if(M)return g(`section`,{...T,className:P,"data-lockerverse-theme":C,role:`alert`,style:R,children:M});if(N.phase===`error`)return _(`section`,{...T,className:P,"data-lockerverse-theme":C,style:R,children:[g(`p`,{role:`alert`,children:N.failure}),g(`button`,{onClick:j,type:`button`,children:`Retry`})]});if(N.phase!==`ready`)return g(`section`,{...T,"aria-busy":`true`,"aria-label":`Payment`,className:P,"data-lockerverse-theme":C,style:R,children:g(Je,{})});let{catalog:z,checkoutItems:B,client:re,preparedCheckout:V}=N;return _(`section`,{...T,"aria-label":`Payment`,className:P,"data-lockerverse-theme":C,"data-payment-state":k,ref:D,style:R,children:[_(`header`,{children:[z.widget.showCommunityBranding&&F?_(`div`,{className:`lockerverse-payment__branding`,children:[F.imageUrl?g(`img`,{alt:F.name,height:`48`,src:F.imageUrl,width:`48`}):null,g(`strong`,{children:F.name})]}):null,g(`h1`,{children:z.widget.title??z.widget.name}),z.widget.description?g(`p`,{children:z.widget.description}):null]}),O?g(`p`,{className:`lockerverse-payment__payment-status`,role:`status`,children:O}):null,g(ne,{container:D,children:g(Re,{accentColor:x?.[`--lockerverse-accent`]??F?.accentColor??`#38d77a`,catalog:z,checkoutItems:B,client:re,fontFamily:x?.[`--lockerverse-font-family`]??`ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`,metadata:s,onPaymentComplete:u,onPaymentRecoveryChange:d,onPaymentUncertain:m,onQuoteChange:(e,t)=>{ee(t),te(e)},onStateChange:A,quote:V,resumePayment:E,stripeLoader:S,theme:C,visualStyle:R})})]})}export{Ye as LockerversePayment};
2
2
  //# sourceMappingURL=index.js.map