@cimplify/sdk 0.7.14 → 0.8.0
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/dist/advanced.d.mts +1 -1
- package/dist/advanced.d.ts +1 -1
- package/dist/advanced.js +47 -35
- package/dist/advanced.mjs +47 -35
- package/dist/{client-CVqmSTNq.d.mts → client-I-utsHva.d.mts} +14 -3
- package/dist/{client-Dkinq9Oz.d.ts → client-tMD3aBuM.d.ts} +14 -3
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +47 -35
- package/dist/index.mjs +47 -35
- package/dist/react.d.mts +1 -1
- package/dist/react.d.ts +1 -1
- package/dist/react.js +62 -106
- package/dist/react.mjs +62 -106
- package/package.json +1 -1
package/dist/react.js
CHANGED
|
@@ -9,7 +9,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
9
9
|
var ELEMENT_TYPES = {
|
|
10
10
|
AUTH: "auth",
|
|
11
11
|
ADDRESS: "address",
|
|
12
|
-
PAYMENT: "payment"
|
|
12
|
+
PAYMENT: "payment",
|
|
13
|
+
CHECKOUT: "checkout"
|
|
13
14
|
};
|
|
14
15
|
var MESSAGE_TYPES = {
|
|
15
16
|
// Parent → Iframe
|
|
@@ -31,14 +32,17 @@ var MESSAGE_TYPES = {
|
|
|
31
32
|
LOGOUT_COMPLETE: "logout_complete",
|
|
32
33
|
CONTACT_PROVIDED: "contact_provided",
|
|
33
34
|
CHECKOUT_STATUS: "checkout_status",
|
|
34
|
-
CHECKOUT_COMPLETE: "checkout_complete"
|
|
35
|
+
CHECKOUT_COMPLETE: "checkout_complete",
|
|
36
|
+
ORDER_TYPE_CHANGED: "order_type_changed"
|
|
35
37
|
};
|
|
36
38
|
var EVENT_TYPES = {
|
|
37
39
|
READY: "ready",
|
|
38
40
|
AUTHENTICATED: "authenticated",
|
|
39
41
|
REQUIRES_OTP: "requires_otp",
|
|
40
42
|
ERROR: "error",
|
|
41
|
-
CHANGE: "change"
|
|
43
|
+
CHANGE: "change",
|
|
44
|
+
ORDER_TYPE_CHANGED: "order_type_changed"
|
|
45
|
+
};
|
|
42
46
|
|
|
43
47
|
// src/ads/identity.ts
|
|
44
48
|
var COOKIE_NAME = "_cimplify_uid";
|
|
@@ -351,15 +355,6 @@ function shellColors(isDark, primaryColor) {
|
|
|
351
355
|
primary: primaryColor
|
|
352
356
|
};
|
|
353
357
|
}
|
|
354
|
-
function labelForOrderType(orderType) {
|
|
355
|
-
if (orderType === "dine_in") {
|
|
356
|
-
return "Dine In";
|
|
357
|
-
}
|
|
358
|
-
if (orderType === "pickup") {
|
|
359
|
-
return "Pickup";
|
|
360
|
-
}
|
|
361
|
-
return "Delivery";
|
|
362
|
-
}
|
|
363
358
|
function statusToLabel(status) {
|
|
364
359
|
if (!status) {
|
|
365
360
|
return "";
|
|
@@ -414,8 +409,7 @@ function CimplifyCheckout({
|
|
|
414
409
|
const [errorMessage, setErrorMessage] = react.useState(null);
|
|
415
410
|
const [resolvedBusinessId, setResolvedBusinessId] = react.useState(businessId ?? null);
|
|
416
411
|
const [resolvedCartId, setResolvedCartId] = react.useState(cartId ?? null);
|
|
417
|
-
const
|
|
418
|
-
const paymentMountRef = react.useRef(null);
|
|
412
|
+
const checkoutMountRef = react.useRef(null);
|
|
419
413
|
const elementsRef = react.useRef(null);
|
|
420
414
|
const activeCheckoutRef = react.useRef(null);
|
|
421
415
|
const initialAppearanceRef = react.useRef(appearance);
|
|
@@ -542,14 +536,19 @@ function CimplifyCheckout({
|
|
|
542
536
|
linkUrl
|
|
543
537
|
});
|
|
544
538
|
elementsRef.current = elements;
|
|
545
|
-
const
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
payment.mount(paymentMountRef.current);
|
|
539
|
+
const checkout = elements.create("checkout", {
|
|
540
|
+
orderTypes: resolvedOrderTypes,
|
|
541
|
+
defaultOrderType: resolvedOrderTypes[0]
|
|
542
|
+
});
|
|
543
|
+
if (checkoutMountRef.current) {
|
|
544
|
+
checkout.mount(checkoutMountRef.current);
|
|
552
545
|
}
|
|
546
|
+
checkout.on("order_type_changed", (data) => {
|
|
547
|
+
const typed = data;
|
|
548
|
+
if (typed.orderType) {
|
|
549
|
+
setOrderType(typed.orderType);
|
|
550
|
+
}
|
|
551
|
+
});
|
|
553
552
|
return () => {
|
|
554
553
|
activeCheckoutRef.current?.abort();
|
|
555
554
|
activeCheckoutRef.current = null;
|
|
@@ -668,59 +667,7 @@ function CimplifyCheckout({
|
|
|
668
667
|
children: "Test mode - no real charges"
|
|
669
668
|
}
|
|
670
669
|
),
|
|
671
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "
|
|
672
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-section": "order-type", style: { marginTop: SPACE.xl }, children: [
|
|
673
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 13, fontWeight: 500, color: colors.textMuted, marginBottom: SPACE.sm }, children: "Order type" }),
|
|
674
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
675
|
-
"div",
|
|
676
|
-
{
|
|
677
|
-
role: "group",
|
|
678
|
-
"aria-label": "Order type",
|
|
679
|
-
style: {
|
|
680
|
-
display: "inline-flex",
|
|
681
|
-
border: `1px solid ${colors.border}`,
|
|
682
|
-
borderRadius: 8,
|
|
683
|
-
padding: 3,
|
|
684
|
-
background: colors.surface
|
|
685
|
-
},
|
|
686
|
-
children: resolvedOrderTypes.map((type) => {
|
|
687
|
-
const active = orderType === type;
|
|
688
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
689
|
-
"button",
|
|
690
|
-
{
|
|
691
|
-
type: "button",
|
|
692
|
-
onClick: () => setOrderType(type),
|
|
693
|
-
disabled: isSubmitting,
|
|
694
|
-
"data-selected": active ? "true" : "false",
|
|
695
|
-
style: {
|
|
696
|
-
padding: `${SPACE.sm}px ${SPACE.lg}px`,
|
|
697
|
-
borderRadius: 6,
|
|
698
|
-
border: "none",
|
|
699
|
-
background: active ? primaryColor : "transparent",
|
|
700
|
-
color: active ? "#ffffff" : colors.textSecondary,
|
|
701
|
-
cursor: isSubmitting ? "not-allowed" : "pointer",
|
|
702
|
-
opacity: isSubmitting ? 0.6 : 1,
|
|
703
|
-
fontSize: 14,
|
|
704
|
-
fontWeight: 500,
|
|
705
|
-
transition: "all 150ms ease",
|
|
706
|
-
WebkitTapHighlightColor: "transparent"
|
|
707
|
-
},
|
|
708
|
-
children: labelForOrderType(type)
|
|
709
|
-
},
|
|
710
|
-
type
|
|
711
|
-
);
|
|
712
|
-
})
|
|
713
|
-
}
|
|
714
|
-
)
|
|
715
|
-
] }),
|
|
716
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
717
|
-
"div",
|
|
718
|
-
{
|
|
719
|
-
"data-cimplify-section": "address",
|
|
720
|
-
style: { marginTop: SPACE.lg, display: orderType === "delivery" ? "block" : "none" },
|
|
721
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
|
|
722
|
-
}
|
|
723
|
-
),
|
|
670
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-section": "checkout", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: isDemoCheckout ? void 0 : checkoutMountRef }) }),
|
|
724
671
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: SPACE.xl }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
725
672
|
"button",
|
|
726
673
|
{
|
|
@@ -3042,40 +2989,43 @@ var CimplifyElements = class {
|
|
|
3042
2989
|
false
|
|
3043
2990
|
);
|
|
3044
2991
|
}
|
|
3045
|
-
const
|
|
3046
|
-
if (!
|
|
3047
|
-
console.debug("[cimplify:checkout] BLOCKED: no
|
|
2992
|
+
const checkoutElement = this.elements.get(ELEMENT_TYPES.CHECKOUT) || this.elements.get(ELEMENT_TYPES.PAYMENT);
|
|
2993
|
+
if (!checkoutElement) {
|
|
2994
|
+
console.debug("[cimplify:checkout] BLOCKED: no checkout element");
|
|
3048
2995
|
return toCheckoutError(
|
|
3049
2996
|
"NO_PAYMENT_ELEMENT",
|
|
3050
|
-
"
|
|
2997
|
+
"Checkout element must be mounted before checkout.",
|
|
3051
2998
|
false
|
|
3052
2999
|
);
|
|
3053
3000
|
}
|
|
3054
|
-
if (!
|
|
3055
|
-
console.debug("[cimplify:checkout] BLOCKED:
|
|
3001
|
+
if (!checkoutElement.isMounted()) {
|
|
3002
|
+
console.debug("[cimplify:checkout] BLOCKED: checkout element not mounted");
|
|
3056
3003
|
return toCheckoutError(
|
|
3057
3004
|
"PAYMENT_NOT_MOUNTED",
|
|
3058
|
-
"
|
|
3005
|
+
"Checkout element must be mounted before checkout.",
|
|
3059
3006
|
false
|
|
3060
3007
|
);
|
|
3061
3008
|
}
|
|
3062
|
-
const
|
|
3063
|
-
if (
|
|
3064
|
-
|
|
3065
|
-
|
|
3066
|
-
"
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3009
|
+
const isUnifiedCheckout = this.elements.has(ELEMENT_TYPES.CHECKOUT);
|
|
3010
|
+
if (!isUnifiedCheckout) {
|
|
3011
|
+
const authElement = this.elements.get(ELEMENT_TYPES.AUTH);
|
|
3012
|
+
if (authElement && !this.accessToken) {
|
|
3013
|
+
console.debug("[cimplify:checkout] BLOCKED: auth incomplete");
|
|
3014
|
+
return toCheckoutError(
|
|
3015
|
+
"AUTH_INCOMPLETE",
|
|
3016
|
+
"Authentication must complete before checkout can start.",
|
|
3017
|
+
true
|
|
3018
|
+
);
|
|
3019
|
+
}
|
|
3020
|
+
const addressElement = this.elements.get(ELEMENT_TYPES.ADDRESS);
|
|
3021
|
+
if (addressElement) {
|
|
3022
|
+
console.debug("[cimplify:checkout] getting address data...");
|
|
3023
|
+
await addressElement.getData();
|
|
3024
|
+
console.debug("[cimplify:checkout] address data resolved", this.addressData);
|
|
3025
|
+
}
|
|
3026
|
+
await this.hydrateCustomerData();
|
|
3076
3027
|
}
|
|
3077
|
-
|
|
3078
|
-
console.debug("[cimplify:checkout] customer data hydrated", { customerData: this.customerData, accountId: this.accountId });
|
|
3028
|
+
console.debug("[cimplify:checkout] customer data hydrated", { customerData: this.customerData, accountId: this.accountId, isUnifiedCheckout });
|
|
3079
3029
|
const processMessage = {
|
|
3080
3030
|
type: MESSAGE_TYPES.PROCESS_CHECKOUT,
|
|
3081
3031
|
cart_id: options.cart_id,
|
|
@@ -3086,8 +3036,9 @@ var CimplifyElements = class {
|
|
|
3086
3036
|
tip_amount: options.tip_amount,
|
|
3087
3037
|
pay_currency: options.pay_currency,
|
|
3088
3038
|
enroll_in_link: options.enroll_in_link ?? true,
|
|
3089
|
-
address
|
|
3090
|
-
|
|
3039
|
+
// Unified checkout has its own address/customer state; only pass if available externally
|
|
3040
|
+
address: isUnifiedCheckout ? void 0 : this.addressData ?? void 0,
|
|
3041
|
+
customer: isUnifiedCheckout ? void 0 : this.customerData ? {
|
|
3091
3042
|
name: this.customerData.name,
|
|
3092
3043
|
email: this.customerData.email,
|
|
3093
3044
|
phone: this.customerData.phone
|
|
@@ -3096,7 +3047,7 @@ var CimplifyElements = class {
|
|
|
3096
3047
|
customer_id: this.customerId ?? void 0
|
|
3097
3048
|
};
|
|
3098
3049
|
const timeoutMs = options.timeout_ms ?? 18e4;
|
|
3099
|
-
const paymentWindow =
|
|
3050
|
+
const paymentWindow = checkoutElement.getContentWindow();
|
|
3100
3051
|
this.checkoutInProgress = true;
|
|
3101
3052
|
return new Promise((resolve) => {
|
|
3102
3053
|
let settled = false;
|
|
@@ -3134,7 +3085,7 @@ var CimplifyElements = class {
|
|
|
3134
3085
|
return;
|
|
3135
3086
|
}
|
|
3136
3087
|
if (message.type === MESSAGE_TYPES.LOGOUT_COMPLETE) {
|
|
3137
|
-
|
|
3088
|
+
checkoutElement.sendMessage({ type: MESSAGE_TYPES.ABORT_CHECKOUT });
|
|
3138
3089
|
settle(
|
|
3139
3090
|
toCheckoutError(
|
|
3140
3091
|
"AUTH_LOST",
|
|
@@ -3165,7 +3116,7 @@ var CimplifyElements = class {
|
|
|
3165
3116
|
window.addEventListener("message", handleCheckoutMessage);
|
|
3166
3117
|
}
|
|
3167
3118
|
abortFn = () => {
|
|
3168
|
-
|
|
3119
|
+
checkoutElement.sendMessage({ type: MESSAGE_TYPES.ABORT_CHECKOUT });
|
|
3169
3120
|
settle(
|
|
3170
3121
|
toCheckoutError(
|
|
3171
3122
|
"CANCELLED",
|
|
@@ -3175,8 +3126,8 @@ var CimplifyElements = class {
|
|
|
3175
3126
|
);
|
|
3176
3127
|
};
|
|
3177
3128
|
this.activeCheckoutAbort = abortFn;
|
|
3178
|
-
console.debug("[cimplify:checkout] sending process_checkout to
|
|
3179
|
-
|
|
3129
|
+
console.debug("[cimplify:checkout] sending process_checkout to checkout iframe", { cart_id: processMessage.cart_id, order_type: processMessage.order_type, hasCustomer: !!processMessage.customer, hasAddress: !!processMessage.address, isUnifiedCheckout });
|
|
3130
|
+
checkoutElement.sendMessage(processMessage);
|
|
3180
3131
|
console.debug("[cimplify:checkout] postMessage sent, waiting for checkout_complete...");
|
|
3181
3132
|
});
|
|
3182
3133
|
})();
|
|
@@ -3255,7 +3206,7 @@ var CimplifyElements = class {
|
|
|
3255
3206
|
this.customerData = customer;
|
|
3256
3207
|
this.client.setAccessToken(message.token);
|
|
3257
3208
|
this.elements.forEach((element, type) => {
|
|
3258
|
-
if (type !== ELEMENT_TYPES.AUTH) {
|
|
3209
|
+
if (type !== ELEMENT_TYPES.AUTH && type !== ELEMENT_TYPES.CHECKOUT) {
|
|
3259
3210
|
element.sendMessage({ type: MESSAGE_TYPES.SET_TOKEN, token: message.token });
|
|
3260
3211
|
}
|
|
3261
3212
|
});
|
|
@@ -3445,7 +3396,9 @@ var CimplifyElement = class {
|
|
|
3445
3396
|
publicKey,
|
|
3446
3397
|
demoMode: publicKey.length === 0,
|
|
3447
3398
|
prefillEmail: this.options.prefillEmail,
|
|
3448
|
-
appearance: this.parent.getAppearance()
|
|
3399
|
+
appearance: this.parent.getAppearance(),
|
|
3400
|
+
orderTypes: this.options.orderTypes,
|
|
3401
|
+
defaultOrderType: this.options.defaultOrderType
|
|
3449
3402
|
});
|
|
3450
3403
|
const token = this.parent.getAccessToken();
|
|
3451
3404
|
if (token && this.type !== ELEMENT_TYPES.AUTH) {
|
|
@@ -3509,6 +3462,9 @@ var CimplifyElement = class {
|
|
|
3509
3462
|
case MESSAGE_TYPES.CONTACT_PROVIDED:
|
|
3510
3463
|
this.parent._setGuestContact(message.contact, message.contactType);
|
|
3511
3464
|
break;
|
|
3465
|
+
case MESSAGE_TYPES.ORDER_TYPE_CHANGED:
|
|
3466
|
+
this.emit(EVENT_TYPES.ORDER_TYPE_CHANGED, { orderType: message.orderType });
|
|
3467
|
+
break;
|
|
3512
3468
|
}
|
|
3513
3469
|
}
|
|
3514
3470
|
emit(event, data) {
|
package/dist/react.mjs
CHANGED
|
@@ -7,7 +7,8 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
|
7
7
|
var ELEMENT_TYPES = {
|
|
8
8
|
AUTH: "auth",
|
|
9
9
|
ADDRESS: "address",
|
|
10
|
-
PAYMENT: "payment"
|
|
10
|
+
PAYMENT: "payment",
|
|
11
|
+
CHECKOUT: "checkout"
|
|
11
12
|
};
|
|
12
13
|
var MESSAGE_TYPES = {
|
|
13
14
|
// Parent → Iframe
|
|
@@ -29,14 +30,17 @@ var MESSAGE_TYPES = {
|
|
|
29
30
|
LOGOUT_COMPLETE: "logout_complete",
|
|
30
31
|
CONTACT_PROVIDED: "contact_provided",
|
|
31
32
|
CHECKOUT_STATUS: "checkout_status",
|
|
32
|
-
CHECKOUT_COMPLETE: "checkout_complete"
|
|
33
|
+
CHECKOUT_COMPLETE: "checkout_complete",
|
|
34
|
+
ORDER_TYPE_CHANGED: "order_type_changed"
|
|
33
35
|
};
|
|
34
36
|
var EVENT_TYPES = {
|
|
35
37
|
READY: "ready",
|
|
36
38
|
AUTHENTICATED: "authenticated",
|
|
37
39
|
REQUIRES_OTP: "requires_otp",
|
|
38
40
|
ERROR: "error",
|
|
39
|
-
CHANGE: "change"
|
|
41
|
+
CHANGE: "change",
|
|
42
|
+
ORDER_TYPE_CHANGED: "order_type_changed"
|
|
43
|
+
};
|
|
40
44
|
|
|
41
45
|
// src/ads/identity.ts
|
|
42
46
|
var COOKIE_NAME = "_cimplify_uid";
|
|
@@ -349,15 +353,6 @@ function shellColors(isDark, primaryColor) {
|
|
|
349
353
|
primary: primaryColor
|
|
350
354
|
};
|
|
351
355
|
}
|
|
352
|
-
function labelForOrderType(orderType) {
|
|
353
|
-
if (orderType === "dine_in") {
|
|
354
|
-
return "Dine In";
|
|
355
|
-
}
|
|
356
|
-
if (orderType === "pickup") {
|
|
357
|
-
return "Pickup";
|
|
358
|
-
}
|
|
359
|
-
return "Delivery";
|
|
360
|
-
}
|
|
361
356
|
function statusToLabel(status) {
|
|
362
357
|
if (!status) {
|
|
363
358
|
return "";
|
|
@@ -412,8 +407,7 @@ function CimplifyCheckout({
|
|
|
412
407
|
const [errorMessage, setErrorMessage] = useState(null);
|
|
413
408
|
const [resolvedBusinessId, setResolvedBusinessId] = useState(businessId ?? null);
|
|
414
409
|
const [resolvedCartId, setResolvedCartId] = useState(cartId ?? null);
|
|
415
|
-
const
|
|
416
|
-
const paymentMountRef = useRef(null);
|
|
410
|
+
const checkoutMountRef = useRef(null);
|
|
417
411
|
const elementsRef = useRef(null);
|
|
418
412
|
const activeCheckoutRef = useRef(null);
|
|
419
413
|
const initialAppearanceRef = useRef(appearance);
|
|
@@ -540,14 +534,19 @@ function CimplifyCheckout({
|
|
|
540
534
|
linkUrl
|
|
541
535
|
});
|
|
542
536
|
elementsRef.current = elements;
|
|
543
|
-
const
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
payment.mount(paymentMountRef.current);
|
|
537
|
+
const checkout = elements.create("checkout", {
|
|
538
|
+
orderTypes: resolvedOrderTypes,
|
|
539
|
+
defaultOrderType: resolvedOrderTypes[0]
|
|
540
|
+
});
|
|
541
|
+
if (checkoutMountRef.current) {
|
|
542
|
+
checkout.mount(checkoutMountRef.current);
|
|
550
543
|
}
|
|
544
|
+
checkout.on("order_type_changed", (data) => {
|
|
545
|
+
const typed = data;
|
|
546
|
+
if (typed.orderType) {
|
|
547
|
+
setOrderType(typed.orderType);
|
|
548
|
+
}
|
|
549
|
+
});
|
|
551
550
|
return () => {
|
|
552
551
|
activeCheckoutRef.current?.abort();
|
|
553
552
|
activeCheckoutRef.current = null;
|
|
@@ -666,59 +665,7 @@ function CimplifyCheckout({
|
|
|
666
665
|
children: "Test mode - no real charges"
|
|
667
666
|
}
|
|
668
667
|
),
|
|
669
|
-
/* @__PURE__ */ jsx("div", { "data-cimplify-section": "
|
|
670
|
-
/* @__PURE__ */ jsxs("div", { "data-cimplify-section": "order-type", style: { marginTop: SPACE.xl }, children: [
|
|
671
|
-
/* @__PURE__ */ jsx("p", { style: { fontSize: 13, fontWeight: 500, color: colors.textMuted, marginBottom: SPACE.sm }, children: "Order type" }),
|
|
672
|
-
/* @__PURE__ */ jsx(
|
|
673
|
-
"div",
|
|
674
|
-
{
|
|
675
|
-
role: "group",
|
|
676
|
-
"aria-label": "Order type",
|
|
677
|
-
style: {
|
|
678
|
-
display: "inline-flex",
|
|
679
|
-
border: `1px solid ${colors.border}`,
|
|
680
|
-
borderRadius: 8,
|
|
681
|
-
padding: 3,
|
|
682
|
-
background: colors.surface
|
|
683
|
-
},
|
|
684
|
-
children: resolvedOrderTypes.map((type) => {
|
|
685
|
-
const active = orderType === type;
|
|
686
|
-
return /* @__PURE__ */ jsx(
|
|
687
|
-
"button",
|
|
688
|
-
{
|
|
689
|
-
type: "button",
|
|
690
|
-
onClick: () => setOrderType(type),
|
|
691
|
-
disabled: isSubmitting,
|
|
692
|
-
"data-selected": active ? "true" : "false",
|
|
693
|
-
style: {
|
|
694
|
-
padding: `${SPACE.sm}px ${SPACE.lg}px`,
|
|
695
|
-
borderRadius: 6,
|
|
696
|
-
border: "none",
|
|
697
|
-
background: active ? primaryColor : "transparent",
|
|
698
|
-
color: active ? "#ffffff" : colors.textSecondary,
|
|
699
|
-
cursor: isSubmitting ? "not-allowed" : "pointer",
|
|
700
|
-
opacity: isSubmitting ? 0.6 : 1,
|
|
701
|
-
fontSize: 14,
|
|
702
|
-
fontWeight: 500,
|
|
703
|
-
transition: "all 150ms ease",
|
|
704
|
-
WebkitTapHighlightColor: "transparent"
|
|
705
|
-
},
|
|
706
|
-
children: labelForOrderType(type)
|
|
707
|
-
},
|
|
708
|
-
type
|
|
709
|
-
);
|
|
710
|
-
})
|
|
711
|
-
}
|
|
712
|
-
)
|
|
713
|
-
] }),
|
|
714
|
-
/* @__PURE__ */ jsx(
|
|
715
|
-
"div",
|
|
716
|
-
{
|
|
717
|
-
"data-cimplify-section": "address",
|
|
718
|
-
style: { marginTop: SPACE.lg, display: orderType === "delivery" ? "block" : "none" },
|
|
719
|
-
children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : addressMountRef })
|
|
720
|
-
}
|
|
721
|
-
),
|
|
668
|
+
/* @__PURE__ */ jsx("div", { "data-cimplify-section": "checkout", children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : checkoutMountRef }) }),
|
|
722
669
|
/* @__PURE__ */ jsx("div", { style: { marginTop: SPACE.xl }, children: /* @__PURE__ */ jsx(
|
|
723
670
|
"button",
|
|
724
671
|
{
|
|
@@ -3040,40 +2987,43 @@ var CimplifyElements = class {
|
|
|
3040
2987
|
false
|
|
3041
2988
|
);
|
|
3042
2989
|
}
|
|
3043
|
-
const
|
|
3044
|
-
if (!
|
|
3045
|
-
console.debug("[cimplify:checkout] BLOCKED: no
|
|
2990
|
+
const checkoutElement = this.elements.get(ELEMENT_TYPES.CHECKOUT) || this.elements.get(ELEMENT_TYPES.PAYMENT);
|
|
2991
|
+
if (!checkoutElement) {
|
|
2992
|
+
console.debug("[cimplify:checkout] BLOCKED: no checkout element");
|
|
3046
2993
|
return toCheckoutError(
|
|
3047
2994
|
"NO_PAYMENT_ELEMENT",
|
|
3048
|
-
"
|
|
2995
|
+
"Checkout element must be mounted before checkout.",
|
|
3049
2996
|
false
|
|
3050
2997
|
);
|
|
3051
2998
|
}
|
|
3052
|
-
if (!
|
|
3053
|
-
console.debug("[cimplify:checkout] BLOCKED:
|
|
2999
|
+
if (!checkoutElement.isMounted()) {
|
|
3000
|
+
console.debug("[cimplify:checkout] BLOCKED: checkout element not mounted");
|
|
3054
3001
|
return toCheckoutError(
|
|
3055
3002
|
"PAYMENT_NOT_MOUNTED",
|
|
3056
|
-
"
|
|
3003
|
+
"Checkout element must be mounted before checkout.",
|
|
3057
3004
|
false
|
|
3058
3005
|
);
|
|
3059
3006
|
}
|
|
3060
|
-
const
|
|
3061
|
-
if (
|
|
3062
|
-
|
|
3063
|
-
|
|
3064
|
-
"
|
|
3065
|
-
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
|
|
3069
|
-
|
|
3070
|
-
|
|
3071
|
-
|
|
3072
|
-
|
|
3073
|
-
|
|
3007
|
+
const isUnifiedCheckout = this.elements.has(ELEMENT_TYPES.CHECKOUT);
|
|
3008
|
+
if (!isUnifiedCheckout) {
|
|
3009
|
+
const authElement = this.elements.get(ELEMENT_TYPES.AUTH);
|
|
3010
|
+
if (authElement && !this.accessToken) {
|
|
3011
|
+
console.debug("[cimplify:checkout] BLOCKED: auth incomplete");
|
|
3012
|
+
return toCheckoutError(
|
|
3013
|
+
"AUTH_INCOMPLETE",
|
|
3014
|
+
"Authentication must complete before checkout can start.",
|
|
3015
|
+
true
|
|
3016
|
+
);
|
|
3017
|
+
}
|
|
3018
|
+
const addressElement = this.elements.get(ELEMENT_TYPES.ADDRESS);
|
|
3019
|
+
if (addressElement) {
|
|
3020
|
+
console.debug("[cimplify:checkout] getting address data...");
|
|
3021
|
+
await addressElement.getData();
|
|
3022
|
+
console.debug("[cimplify:checkout] address data resolved", this.addressData);
|
|
3023
|
+
}
|
|
3024
|
+
await this.hydrateCustomerData();
|
|
3074
3025
|
}
|
|
3075
|
-
|
|
3076
|
-
console.debug("[cimplify:checkout] customer data hydrated", { customerData: this.customerData, accountId: this.accountId });
|
|
3026
|
+
console.debug("[cimplify:checkout] customer data hydrated", { customerData: this.customerData, accountId: this.accountId, isUnifiedCheckout });
|
|
3077
3027
|
const processMessage = {
|
|
3078
3028
|
type: MESSAGE_TYPES.PROCESS_CHECKOUT,
|
|
3079
3029
|
cart_id: options.cart_id,
|
|
@@ -3084,8 +3034,9 @@ var CimplifyElements = class {
|
|
|
3084
3034
|
tip_amount: options.tip_amount,
|
|
3085
3035
|
pay_currency: options.pay_currency,
|
|
3086
3036
|
enroll_in_link: options.enroll_in_link ?? true,
|
|
3087
|
-
address
|
|
3088
|
-
|
|
3037
|
+
// Unified checkout has its own address/customer state; only pass if available externally
|
|
3038
|
+
address: isUnifiedCheckout ? void 0 : this.addressData ?? void 0,
|
|
3039
|
+
customer: isUnifiedCheckout ? void 0 : this.customerData ? {
|
|
3089
3040
|
name: this.customerData.name,
|
|
3090
3041
|
email: this.customerData.email,
|
|
3091
3042
|
phone: this.customerData.phone
|
|
@@ -3094,7 +3045,7 @@ var CimplifyElements = class {
|
|
|
3094
3045
|
customer_id: this.customerId ?? void 0
|
|
3095
3046
|
};
|
|
3096
3047
|
const timeoutMs = options.timeout_ms ?? 18e4;
|
|
3097
|
-
const paymentWindow =
|
|
3048
|
+
const paymentWindow = checkoutElement.getContentWindow();
|
|
3098
3049
|
this.checkoutInProgress = true;
|
|
3099
3050
|
return new Promise((resolve) => {
|
|
3100
3051
|
let settled = false;
|
|
@@ -3132,7 +3083,7 @@ var CimplifyElements = class {
|
|
|
3132
3083
|
return;
|
|
3133
3084
|
}
|
|
3134
3085
|
if (message.type === MESSAGE_TYPES.LOGOUT_COMPLETE) {
|
|
3135
|
-
|
|
3086
|
+
checkoutElement.sendMessage({ type: MESSAGE_TYPES.ABORT_CHECKOUT });
|
|
3136
3087
|
settle(
|
|
3137
3088
|
toCheckoutError(
|
|
3138
3089
|
"AUTH_LOST",
|
|
@@ -3163,7 +3114,7 @@ var CimplifyElements = class {
|
|
|
3163
3114
|
window.addEventListener("message", handleCheckoutMessage);
|
|
3164
3115
|
}
|
|
3165
3116
|
abortFn = () => {
|
|
3166
|
-
|
|
3117
|
+
checkoutElement.sendMessage({ type: MESSAGE_TYPES.ABORT_CHECKOUT });
|
|
3167
3118
|
settle(
|
|
3168
3119
|
toCheckoutError(
|
|
3169
3120
|
"CANCELLED",
|
|
@@ -3173,8 +3124,8 @@ var CimplifyElements = class {
|
|
|
3173
3124
|
);
|
|
3174
3125
|
};
|
|
3175
3126
|
this.activeCheckoutAbort = abortFn;
|
|
3176
|
-
console.debug("[cimplify:checkout] sending process_checkout to
|
|
3177
|
-
|
|
3127
|
+
console.debug("[cimplify:checkout] sending process_checkout to checkout iframe", { cart_id: processMessage.cart_id, order_type: processMessage.order_type, hasCustomer: !!processMessage.customer, hasAddress: !!processMessage.address, isUnifiedCheckout });
|
|
3128
|
+
checkoutElement.sendMessage(processMessage);
|
|
3178
3129
|
console.debug("[cimplify:checkout] postMessage sent, waiting for checkout_complete...");
|
|
3179
3130
|
});
|
|
3180
3131
|
})();
|
|
@@ -3253,7 +3204,7 @@ var CimplifyElements = class {
|
|
|
3253
3204
|
this.customerData = customer;
|
|
3254
3205
|
this.client.setAccessToken(message.token);
|
|
3255
3206
|
this.elements.forEach((element, type) => {
|
|
3256
|
-
if (type !== ELEMENT_TYPES.AUTH) {
|
|
3207
|
+
if (type !== ELEMENT_TYPES.AUTH && type !== ELEMENT_TYPES.CHECKOUT) {
|
|
3257
3208
|
element.sendMessage({ type: MESSAGE_TYPES.SET_TOKEN, token: message.token });
|
|
3258
3209
|
}
|
|
3259
3210
|
});
|
|
@@ -3443,7 +3394,9 @@ var CimplifyElement = class {
|
|
|
3443
3394
|
publicKey,
|
|
3444
3395
|
demoMode: publicKey.length === 0,
|
|
3445
3396
|
prefillEmail: this.options.prefillEmail,
|
|
3446
|
-
appearance: this.parent.getAppearance()
|
|
3397
|
+
appearance: this.parent.getAppearance(),
|
|
3398
|
+
orderTypes: this.options.orderTypes,
|
|
3399
|
+
defaultOrderType: this.options.defaultOrderType
|
|
3447
3400
|
});
|
|
3448
3401
|
const token = this.parent.getAccessToken();
|
|
3449
3402
|
if (token && this.type !== ELEMENT_TYPES.AUTH) {
|
|
@@ -3507,6 +3460,9 @@ var CimplifyElement = class {
|
|
|
3507
3460
|
case MESSAGE_TYPES.CONTACT_PROVIDED:
|
|
3508
3461
|
this.parent._setGuestContact(message.contact, message.contactType);
|
|
3509
3462
|
break;
|
|
3463
|
+
case MESSAGE_TYPES.ORDER_TYPE_CHANGED:
|
|
3464
|
+
this.emit(EVENT_TYPES.ORDER_TYPE_CHANGED, { orderType: message.orderType });
|
|
3465
|
+
break;
|
|
3510
3466
|
}
|
|
3511
3467
|
}
|
|
3512
3468
|
emit(event, data) {
|