@lockerverse/react 0.2.41 → 0.2.43
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 +73 -18
- package/dist/index.d.ts +20 -57
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/styles.css +220 -177
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# `@lockerverse/react`
|
|
2
2
|
|
|
3
|
-
React payment UI
|
|
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
|
-
|
|
28
|
-
|
|
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
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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
|
-
|
|
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 {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
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?: (
|
|
42
|
-
|
|
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
|
-
|
|
50
|
+
stripeLoader?: LockerverseStripeLoader;
|
|
45
51
|
style?: LockerversePaymentStyle;
|
|
46
52
|
theme?: LockerversePaymentTheme;
|
|
47
|
-
tipCents?: number;
|
|
48
53
|
};
|
|
49
54
|
//#endregion
|
|
50
|
-
//#region src/
|
|
51
|
-
|
|
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 {
|
|
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
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/types.ts","../src/
|
|
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;;;;iBC4rCI,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 V=[`XS`,`S`,`M`,`L`,`XL`,`XXL`,`XXXL`],H=[`15`,`12`,`10`,`5`],U=[...H,`custom`];function re({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=U.indexOf(t),r;switch(e.key){case`ArrowDown`:case`ArrowRight`:r=(n+1)%U.length;break;case`ArrowLeft`:case`ArrowUp`:r=(n-1+U.length)%U.length;break;case`Home`:r=0;break;case`End`:r=U.length-1;break;default:return}e.preventDefault();let i=U[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:[H.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 ie({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 ae({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:V.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(se,{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 oe({amountCents:e,enabled:t,onChange:n,values:r}){return t?_(ie,{checked:r.includeServiceFee,name:`includeServiceFee`,onChange:e=>n({...r,includeServiceFee:e}),children:[`Add `,ue(e),` to help cover processing fees`]}):null}function se({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(ce,{controlId:o,error:e,errorId:s,field:t,name:a,onChange:r,value:i});case`select`:case`multi_select`:return g(le,{controlId:o,error:e,errorId:s,field:t,name:a,onChange:r,value:i});case`radio`:case`checkboxes`:return g(G,{controlId:o,error:e,errorId:s,field:t,name:a,onChange:r,value:i});default:return null}}function W({error:e,id:t}){return e?g(`p`,{className:`lockerverse-payment__field-message`,id:t,children:e}):null}function ce({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(W,{error:t,id:n})]})}function le({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(W,{error:t,id:n})]})}function G({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(W,{error:t,id:n})]})}function ue(e){return new Intl.NumberFormat(`en-US`,{currency:`USD`,style:`currency`}).format(e/100)}const K=[`amountCents`,`discountableSubtotalCents`,`discountCents`,`serviceFeeCents`,`subtotalCents`,`tipCents`,`totalCents`],q=[`discountableSubtotalCents`,`discountCents`,`subtotalCents`];function J(e,t,n){return(n===t.totalCents?q:K).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 Y(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 de(e,t,n){if(t.checkoutStatus!==`action_required`)return Y(t);if(t.clientSecret)try{await n.handleNextAction({clientSecret:t.clientSecret})}catch{}try{return Y(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 de(e,r,n)}async function pe(e,t,n){try{return de(e,await e.getPaymentStatus(t),n)}catch{return{kind:`unresolved`,paymentReference:t,reason:`recovery_failed`}}}const me=D(j(),M(),w()),he=D(T(),ee(),C(1)),X=D(b(N([A({amountCents:he,productSlug:me}),A({productSlug:me,quantity:he})])),S(1)),Z=D(j(),M(),O(/^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/,`Enter a valid tip amount.`));function ge(e){let t=k(Z,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 _e(e){let t=k(X,e);return t.success?{success:!0,value:t.output}:{message:`Lockerverse payment configuration is invalid.`,success:!1}}const ve=D(j(),M(),w(`Email is required.`),x(`Enter a valid email address.`)),ye=D(j(),M(),w(`Phone is required.`),O(/^\+[1-9]\d{6,14}$/,`Enter a valid phone number.`));function Q(e){return e.trim().replace(/[().\s-]/g,``)}function be(e,t){let n=t?{...e,phone:Q(e.phone)}:e,r=E(t?{email:ve,phone:ye}:{email:ve}),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 Se(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 Ce(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 we(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 Ce(n,t)})}function Te(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 Ee(e,t,n){return e?.configuration===t&&e.selectionKey===n}function De({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=_e(s),g=h.success?JSON.stringify(h.value):`invalid-selection`,_=u(()=>h.success?JSON.parse(g):[],[h.success,g]),[v,b]=d(Se,{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`||Ee(S.current,m,g)||Ee(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(Te(m,e=>C.current?.(e))),r=await n.load(),i=we(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,Ee(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 Oe(e){return new Intl.NumberFormat(`en-US`,{currency:`USD`,style:`currency`}).format(e/100)}function ke(e,t){return t.tipPercent===`custom`?ge(t.customTip):{cents:Math.round(e*Number(t.tipPercent)/100),success:!0}}const Ae=[{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 je(e,t){return e.trim().startsWith(`+`)?e:`${Ae.find(e=>e.value===t)?.callingCode??`+1`}${e}`}function Me(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 Ne(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 Pe(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 Fe(e,t,n,r){if(e.widget.fields.shipping)return n.shippingMatchesBilling?r:Pe(t,`shipping`)}function Ie({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 Le({catalog:e,confirmationToken:t,email:n,fieldValues:r,metadata:i,phone:a}){return{confirmationToken:t,customFieldAnswers:Me(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 Re({catalog:e,checkoutItems:t,client:n,elements:r,email:i,fieldValues:a,locallyPreviewedTotalCents:o,metadata:s,onPaymentRecoveryChange:c,phone:l,quote:u,stripe:d}){let f=i.trim().toLowerCase(),p=Q(l),m=ke(u.subtotalCents,a);if(!m.success)throw Error(m.message);let h=Ne(e,a,f,m.cents),g=await n.calculateTotal({...h,items:t});if(await r.update({amount:g.totalCents}),J(u,g,o))return{kind:`quote_changed`,quote:g};let _=await r.submit();if(_.error)throw Error(_.error.message);let v=await Pe(r,`billing`),y=await Fe(e,r,a,v),b=await d.createConfirmationToken({elements:r,params:Ie({billingAddress:v,catalog:e,email:f,phone:p,shippingAddress:y})});if(b.error)throw Error(b.error.message);$(c,{connectedAccountId:g.payment.connectedAccountId,paymentReference:g.paymentReference});let x=await fe(n,{checkout:g,submission:Le({catalog:e,confirmationToken:b.confirmationToken.id,email:f,fieldValues:a,metadata:s,phone:p})},d);return x.kind===`failed`?{kind:`payment_failed`,message:`Payment was declined. Check your payment details and try again.`}:x.kind===`unresolved`?{kind:`payment_unresolved`,paymentReference:x.paymentReference,reason:x.reason}:{kind:`payment`,payment:x.payment,quote:g}}function ze({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(qe,{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 Be({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 Ve({onError:e,onReady:t,ready:r}){return _(`div`,{className:`lockerverse-payment__stripe-element`,"data-ready":r,children:[r?null:g(Be,{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 He({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(Be,{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 Ue({message:e}){return e?g(`p`,{className:`lockerverse-payment__field-message`,role:`alert`,children:e}):null}function $(e,t){try{e?.(t)}catch{}}function We({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 Ge({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 ${Oe(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 Ke({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:Ae,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 qe({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,V]=p(!1),[H,U]=p({customFields:{},customTip:``,includeServiceFee:e.widget.fields.serviceFee,memberId:``,merchSize:`M`,promoCode:``,shippingMatchesBilling:!0,tipPercent:`10`}),[se,W]=p(h.totalCents),ce=f(null),le=f(null),G=f(null),ue=f(!1),K=r(),q=i(),J=`lockerverse-${l()}`,Y=`${J}-email`,de=`${Y}-error`,fe=`${J}-phone`,me=`${fe}-error`,he=`${J}-tip-error`,X=e.widget.fields.tipping?ke(h.subtotalCents,H):{cents:0,success:!0},Z=X.success?X.cents:null,ge=Z??0,_e=se-ge,ve=!e.widget.fields.shipping||H.shippingMatchesBilling||B;c(()=>{if(Z===null)return;let t=e.widget.fields.serviceFee&&H.includeServiceFee?h.serviceFeeCents||Math.round(h.subtotalCents*e.pricingPolicy.serviceFeeRateBasisPoints/1e4):0,n=h.totalCents-h.serviceFeeCents-h.tipCents+t+Z;W(n),K?.update({amount:n})},[e.widget.fields.serviceFee,e.widget.fields.tipping,K,H.includeServiceFee,H.tipPercent,H.customTip,Z,h.serviceFeeCents,h.tipCents,h.totalCents]),c(()=>{M&&G.current?.focus()},[M]),c(()=>{!(v&&q)||ue.current||(ue.current=!0,m(`submitting`),pe(n,v.paymentReference,q).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,q]);function ye(e){E(t=>{let n={...t};return delete n[e],n})}function Q(e){U(e),k({}),j(void 0)}function Se(e){O(e),m(`error`)}async function Ce(r){r.preventDefault();let i=be({email:y,phone:je(x,C)},e.widget.fields.phone),c=xe(e.widget.customFields,H.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(()=>{We({customFieldErrors:c,emailRef:ce,form:e,parsedTipSuccess:X.success,phoneRef:le,validationErrors:i.errors})});return}if(E({}),k({}),!(K&&q)){O(`Payment form is still loading.`),m(`error`);return}O(void 0),N(!0),m(`submitting`);try{Ge({onPaymentComplete:o,onPaymentRecoveryChange:s,onPaymentUncertain:u,onQuoteChange:d,onStateChange:m,result:await Re({catalog:e,checkoutItems:t,client:n,elements:K,email:y,fieldValues:H,locallyPreviewedTotalCents:se,metadata:a,onPaymentRecoveryChange:s,phone:je(x,C),quote:h,stripe:q}),setDisplayedTotalCents:W,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:G,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(re,{enabled:e.widget.fields.tipping,error:A,errorId:he,onChange:Q,values:H}),g(Ke,{email:y,emailErrorId:de,emailId:Y,emailRef:ce,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:fe,phoneRef:le}),g(Ve,{onError:Se,onReady:()=>ne(!0),ready:L}),g(He,{label:`Billing address`,mode:`billing`,onError:Se,onReady:()=>z(!0),ready:R}),e.widget.fields.shipping?_(`div`,{className:`lockerverse-payment__shipping`,children:[g(ie,{checked:H.shippingMatchesBilling,name:`shippingMatchesBilling`,onChange:e=>{Q({...H,shippingMatchesBilling:e}),e||V(!1)},children:`Shipping is same as billing information`}),H.shippingMatchesBilling?null:g(He,{label:`Shipping address`,mode:`shipping`,onError:Se,onReady:()=>V(!0),ready:B})]}):null,g(ae,{customFields:e.widget.customFields,errors:ee,fields:e.widget.fields,idPrefix:J,onChange:Q,values:H}),_(`div`,{className:`lockerverse-payment__actions`,children:[g(oe,{amountCents:h.serviceFeeCents||Math.round(h.subtotalCents*e.pricingPolicy.serviceFeeRateBasisPoints/1e4),enabled:e.widget.fields.serviceFee,onChange:Q,values:H}),g(`button`,{"aria-busy":M,"aria-label":`Process payment for ${Oe(se)} total`,disabled:M||!(L&&R&&ve),type:`submit`,children:M?`Processing…`:`Process Payment (${Oe(_e)})${ge>0?` + ${Oe(ge)} tip`:``}`})]})]})}),M?g(`p`,{className:`lockerverse-payment__payment-status`,ref:G,role:`status`,tabIndex:-1,children:`Processing payment…`}):null,g(Ue,{message:D})]})}function Je(){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 Ye(){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(Je,{}),g(Je,{}),_(`div`,{className:`lockerverse-payment__skeleton-actions`,children:[g(`span`,{className:`lockerverse-payment__skeleton-check-line`}),g(`span`,{className:`lockerverse-payment__skeleton-button`})]})]})]})}function Xe({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}=De({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(Ye,{})});let{catalog:z,checkoutItems:B,client:V,preparedCheckout:H}=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(ze,{accentColor:x?.[`--lockerverse-accent`]??F?.accentColor??`#38d77a`,catalog:z,checkoutItems:B,client:V,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:H,resumePayment:E,stripeLoader:S,theme:C,visualStyle:R})})]})}export{Xe as LockerversePayment};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|