@churnkey/react 0.2.0 → 0.3.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/{chunk-ZEYUKGAR.cjs → chunk-2VQNWZWO.cjs} +33 -23
- package/dist/chunk-2VQNWZWO.cjs.map +1 -0
- package/dist/{chunk-YSNMTOAW.cjs → chunk-42SJA62X.cjs} +9 -7
- package/dist/chunk-42SJA62X.cjs.map +1 -0
- package/dist/{chunk-EHZJAQQ5.cjs → chunk-LVUDBCQ2.cjs} +20 -2
- package/dist/chunk-LVUDBCQ2.cjs.map +1 -0
- package/dist/{chunk-SXGORJOX.js → chunk-SQ35G4LA.js} +19 -3
- package/dist/chunk-SQ35G4LA.js.map +1 -0
- package/dist/{chunk-OL5HQUE4.js → chunk-UNSSI6KX.js} +33 -23
- package/dist/chunk-UNSSI6KX.js.map +1 -0
- package/dist/{chunk-CPCWJTSG.js → chunk-YZERGV7F.js} +6 -4
- package/dist/chunk-YZERGV7F.js.map +1 -0
- package/dist/core.cjs +20 -12
- package/dist/core.d.cts +14 -3
- package/dist/core.d.ts +14 -3
- package/dist/core.js +2 -2
- package/dist/headless.cjs +3 -3
- package/dist/headless.d.cts +5 -1
- package/dist/headless.d.ts +5 -1
- package/dist/headless.js +2 -2
- package/dist/index.cjs +166 -135
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -7
- package/dist/index.d.ts +7 -7
- package/dist/index.js +73 -50
- package/dist/index.js.map +1 -1
- package/dist/{step-graph-Cbi0DRHX.d.cts → step-graph-ChlSCUGk.d.cts} +39 -19
- package/dist/{step-graph-Cbi0DRHX.d.ts → step-graph-ChlSCUGk.d.ts} +39 -19
- package/dist/styles.css +50 -11
- package/package.json +10 -10
- package/dist/chunk-CPCWJTSG.js.map +0 -1
- package/dist/chunk-EHZJAQQ5.cjs.map +0 -1
- package/dist/chunk-OL5HQUE4.js.map +0 -1
- package/dist/chunk-SXGORJOX.js.map +0 -1
- package/dist/chunk-YSNMTOAW.cjs.map +0 -1
- package/dist/chunk-ZEYUKGAR.cjs.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
3
|
+
var chunk42SJA62X_cjs = require('./chunk-42SJA62X.cjs');
|
|
4
|
+
var chunkLVUDBCQ2_cjs = require('./chunk-LVUDBCQ2.cjs');
|
|
5
|
+
var chunk2VQNWZWO_cjs = require('./chunk-2VQNWZWO.cjs');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
|
|
@@ -20,28 +20,29 @@ function RichText({ html, as = "p", className }) {
|
|
|
20
20
|
function DefaultConfirm({
|
|
21
21
|
title,
|
|
22
22
|
description,
|
|
23
|
+
subscriptions,
|
|
23
24
|
losses,
|
|
24
25
|
lossesLabel,
|
|
25
26
|
confirmLabel,
|
|
26
27
|
goBackLabel,
|
|
27
|
-
periodEnd,
|
|
28
28
|
onConfirm,
|
|
29
29
|
onGoBack,
|
|
30
30
|
isProcessing,
|
|
31
31
|
classNames
|
|
32
32
|
}) {
|
|
33
33
|
const hasLosses = Array.isArray(losses) && losses.length > 0;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
/* @__PURE__ */ jsxRuntime.jsx("
|
|
40
|
-
|
|
34
|
+
const periodEnd = chunkLVUDBCQ2_cjs.formatPeriodEnd(subscriptions);
|
|
35
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-step ck-step-confirm", classNames?.root), children: [
|
|
36
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkLVUDBCQ2_cjs.cn("ck-step-title", classNames?.title), children: title }),
|
|
37
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: description, className: chunkLVUDBCQ2_cjs.cn("ck-step-description", classNames?.description) }),
|
|
38
|
+
hasLosses && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-loss-block", classNames?.lossList), children: [
|
|
39
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkLVUDBCQ2_cjs.cn("ck-loss-label", classNames?.lossLabel), children: lossesLabel ?? "You'll lose access to:" }),
|
|
40
|
+
/* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ck-loss-list", children: losses.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: chunkLVUDBCQ2_cjs.cn("ck-loss-item", classNames?.lossItem), children: [
|
|
41
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: chunkLVUDBCQ2_cjs.cn("ck-loss-bullet", classNames?.lossBullet), children: "\u25CF" }),
|
|
41
42
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: item })
|
|
42
43
|
] }, item)) })
|
|
43
44
|
] }),
|
|
44
|
-
periodEnd && /* @__PURE__ */ jsxRuntime.jsxs("p", { className:
|
|
45
|
+
periodEnd && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: chunkLVUDBCQ2_cjs.cn("ck-period-end", classNames?.periodEndNotice), children: [
|
|
45
46
|
"Your access continues until ",
|
|
46
47
|
periodEnd,
|
|
47
48
|
"."
|
|
@@ -50,13 +51,13 @@ function DefaultConfirm({
|
|
|
50
51
|
"button",
|
|
51
52
|
{
|
|
52
53
|
type: "button",
|
|
53
|
-
className:
|
|
54
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-button ck-button-danger", classNames?.confirmButton),
|
|
54
55
|
onClick: onConfirm,
|
|
55
56
|
disabled: isProcessing,
|
|
56
57
|
children: isProcessing ? "Processing..." : confirmLabel
|
|
57
58
|
}
|
|
58
59
|
),
|
|
59
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className:
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: chunkLVUDBCQ2_cjs.cn("ck-button-link", classNames?.goBackButton), onClick: onGoBack, children: goBackLabel })
|
|
60
61
|
] });
|
|
61
62
|
}
|
|
62
63
|
function DefaultFeedback({
|
|
@@ -75,13 +76,13 @@ function DefaultFeedback({
|
|
|
75
76
|
const isUnderMin = hasMin && value.length > 0 && value.length < minLength;
|
|
76
77
|
const isValid = !required || value.length >= minLength;
|
|
77
78
|
const placeholderText = placeholder ?? (hasMin ? `At least ${minLength} characters\u2026` : "Type your thoughts\u2026");
|
|
78
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
79
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className:
|
|
80
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: description, className:
|
|
79
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-step ck-step-feedback", classNames?.root), children: [
|
|
80
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkLVUDBCQ2_cjs.cn("ck-step-title", classNames?.title), children: title }),
|
|
81
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: description, className: chunkLVUDBCQ2_cjs.cn("ck-step-description", classNames?.description) }),
|
|
81
82
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
82
83
|
"div",
|
|
83
84
|
{
|
|
84
|
-
className:
|
|
85
|
+
className: chunkLVUDBCQ2_cjs.cn(
|
|
85
86
|
"ck-feedback-field",
|
|
86
87
|
focused && "ck-feedback-field--focused",
|
|
87
88
|
isUnderMin && "ck-feedback-field--invalid"
|
|
@@ -90,7 +91,7 @@ function DefaultFeedback({
|
|
|
90
91
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
91
92
|
"textarea",
|
|
92
93
|
{
|
|
93
|
-
className:
|
|
94
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-textarea", classNames?.textarea),
|
|
94
95
|
placeholder: placeholderText,
|
|
95
96
|
value,
|
|
96
97
|
onChange: (e) => onChange(e.target.value),
|
|
@@ -102,7 +103,7 @@ function DefaultFeedback({
|
|
|
102
103
|
hasMin && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
103
104
|
"div",
|
|
104
105
|
{
|
|
105
|
-
className:
|
|
106
|
+
className: chunkLVUDBCQ2_cjs.cn(
|
|
106
107
|
"ck-character-count",
|
|
107
108
|
isUnderMin && "ck-character-count--invalid",
|
|
108
109
|
classNames?.characterCount
|
|
@@ -121,7 +122,7 @@ function DefaultFeedback({
|
|
|
121
122
|
"button",
|
|
122
123
|
{
|
|
123
124
|
type: "button",
|
|
124
|
-
className:
|
|
125
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-button ck-button-primary", classNames?.submitButton),
|
|
125
126
|
onClick: onSubmit,
|
|
126
127
|
disabled: !isValid,
|
|
127
128
|
children: "Continue"
|
|
@@ -140,21 +141,21 @@ function DefaultContactOffer({
|
|
|
140
141
|
}) {
|
|
141
142
|
const headline = title ?? offer.copy.headline;
|
|
142
143
|
const body = description ?? offer.copy.body;
|
|
143
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
144
|
-
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className:
|
|
145
|
-
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className:
|
|
146
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
144
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-step ck-step-offer", classNames?.root), children: [
|
|
145
|
+
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkLVUDBCQ2_cjs.cn("ck-step-title", classNames?.title), children: headline }),
|
|
146
|
+
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className: chunkLVUDBCQ2_cjs.cn("ck-step-description", classNames?.description) }),
|
|
147
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-offer-card", classNames?.card), children: [
|
|
147
148
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
148
149
|
"button",
|
|
149
150
|
{
|
|
150
151
|
type: "button",
|
|
151
|
-
className:
|
|
152
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-button ck-button-primary", classNames?.acceptButton),
|
|
152
153
|
onClick: () => onAccept(),
|
|
153
154
|
disabled: isProcessing,
|
|
154
155
|
children: isProcessing ? "Processing..." : offer.copy.cta
|
|
155
156
|
}
|
|
156
157
|
),
|
|
157
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className:
|
|
158
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: chunkLVUDBCQ2_cjs.cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
|
|
158
159
|
] })
|
|
159
160
|
] });
|
|
160
161
|
}
|
|
@@ -170,11 +171,11 @@ function DefaultDiscountOffer({
|
|
|
170
171
|
const o = offer;
|
|
171
172
|
const headline = title ?? offer.copy.headline;
|
|
172
173
|
const body = description ?? offer.copy.body;
|
|
173
|
-
const phrase =
|
|
174
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
175
|
-
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className:
|
|
176
|
-
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className:
|
|
177
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
174
|
+
const phrase = chunkLVUDBCQ2_cjs.discountPhrase(o);
|
|
175
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-step ck-step-offer", classNames?.root), children: [
|
|
176
|
+
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkLVUDBCQ2_cjs.cn("ck-step-title", classNames?.title), children: headline }),
|
|
177
|
+
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className: chunkLVUDBCQ2_cjs.cn("ck-step-description", classNames?.description) }),
|
|
178
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-offer-card", classNames?.card), children: [
|
|
178
179
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ck-offer-details ck-offer-discount", children: [
|
|
179
180
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-offer-discount-eyebrow", children: "Limited-time offer" }),
|
|
180
181
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-offer-discount-phrase", children: phrase })
|
|
@@ -183,13 +184,13 @@ function DefaultDiscountOffer({
|
|
|
183
184
|
"button",
|
|
184
185
|
{
|
|
185
186
|
type: "button",
|
|
186
|
-
className:
|
|
187
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-button ck-button-primary", classNames?.acceptButton),
|
|
187
188
|
onClick: () => onAccept(),
|
|
188
189
|
disabled: isProcessing,
|
|
189
190
|
children: isProcessing ? "Processing..." : offer.copy.cta
|
|
190
191
|
}
|
|
191
192
|
),
|
|
192
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className:
|
|
193
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: chunkLVUDBCQ2_cjs.cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
|
|
193
194
|
] })
|
|
194
195
|
] });
|
|
195
196
|
}
|
|
@@ -209,19 +210,19 @@ function DefaultPauseOffer({
|
|
|
209
210
|
const body = description ?? offer.copy.body;
|
|
210
211
|
const resume = /* @__PURE__ */ new Date();
|
|
211
212
|
resume.setMonth(resume.getMonth() + months);
|
|
212
|
-
const resumeDate =
|
|
213
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
214
|
-
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className:
|
|
215
|
-
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className:
|
|
216
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
213
|
+
const resumeDate = chunkLVUDBCQ2_cjs.formatMonthDayLong(resume);
|
|
214
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-step ck-step-offer", classNames?.root), children: [
|
|
215
|
+
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkLVUDBCQ2_cjs.cn("ck-step-title", classNames?.title), children: headline }),
|
|
216
|
+
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className: chunkLVUDBCQ2_cjs.cn("ck-step-description", classNames?.description) }),
|
|
217
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-offer-card ck-pause-card", classNames?.card), children: [
|
|
217
218
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-pause-eyebrow", children: "We'll see you back on" }),
|
|
218
219
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-pause-date", children: resumeDate }),
|
|
219
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
220
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkLVUDBCQ2_cjs.cn("ck-pause-chips", classNames?.pauseSlider), children: Array.from({ length: max }, (_, i) => i + 1).map((m) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
220
221
|
"button",
|
|
221
222
|
{
|
|
222
223
|
type: "button",
|
|
223
224
|
onClick: () => setMonths(m),
|
|
224
|
-
className:
|
|
225
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-pause-chip", m === months && "ck-pause-chip--selected"),
|
|
225
226
|
"aria-pressed": m === months,
|
|
226
227
|
children: [
|
|
227
228
|
m,
|
|
@@ -236,13 +237,13 @@ function DefaultPauseOffer({
|
|
|
236
237
|
"button",
|
|
237
238
|
{
|
|
238
239
|
type: "button",
|
|
239
|
-
className:
|
|
240
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-button ck-button-primary", classNames?.acceptButton),
|
|
240
241
|
onClick: () => onAccept({ months }),
|
|
241
242
|
disabled: isProcessing,
|
|
242
243
|
children: isProcessing ? "Processing..." : offer.copy.cta
|
|
243
244
|
}
|
|
244
245
|
),
|
|
245
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className:
|
|
246
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: chunkLVUDBCQ2_cjs.cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
|
|
246
247
|
] });
|
|
247
248
|
}
|
|
248
249
|
function Checkmark({ color = "currentColor", size = 14 }) {
|
|
@@ -251,6 +252,7 @@ function Checkmark({ color = "currentColor", size = 14 }) {
|
|
|
251
252
|
function DefaultPlanChangeOffer({
|
|
252
253
|
title,
|
|
253
254
|
description,
|
|
255
|
+
subscriptions,
|
|
254
256
|
offer,
|
|
255
257
|
onAccept,
|
|
256
258
|
onDecline,
|
|
@@ -259,31 +261,42 @@ function DefaultPlanChangeOffer({
|
|
|
259
261
|
}) {
|
|
260
262
|
const o = offer;
|
|
261
263
|
const plans = o.plans ?? [];
|
|
262
|
-
const
|
|
264
|
+
const currentPlanId = subscriptions[0]?.items[0]?.price.id;
|
|
265
|
+
const initialPlanId = plans.find((p) => p.id !== currentPlanId)?.id ?? null;
|
|
266
|
+
const [selectedPlanId, setSelectedPlanId] = react.useState(initialPlanId);
|
|
263
267
|
const selectedPlan = plans.find((p) => p.id === selectedPlanId) ?? null;
|
|
264
268
|
const headline = title ?? offer.copy.headline;
|
|
265
269
|
const body = description ?? offer.copy.body;
|
|
266
270
|
const ctaLabel = isProcessing ? "Processing..." : selectedPlan?.name ? `Switch to ${selectedPlan.name}` : offer.copy.cta;
|
|
267
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
268
|
-
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className:
|
|
269
|
-
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className:
|
|
270
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
271
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-step ck-step-offer", classNames?.root), children: [
|
|
272
|
+
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkLVUDBCQ2_cjs.cn("ck-step-title", classNames?.title), children: headline }),
|
|
273
|
+
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className: chunkLVUDBCQ2_cjs.cn("ck-step-description", classNames?.description) }),
|
|
274
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-offer-card", classNames?.card), children: [
|
|
271
275
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-offer-details ck-plan-grid", children: plans.map((plan) => {
|
|
272
276
|
const interval = plan.duration?.interval ?? "month";
|
|
273
277
|
const currency = plan.amount.currency ?? "USD";
|
|
274
278
|
const isSelected = plan.id === selectedPlanId;
|
|
279
|
+
const isCurrent = plan.id === currentPlanId;
|
|
275
280
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
276
281
|
"button",
|
|
277
282
|
{
|
|
278
283
|
type: "button",
|
|
279
284
|
onClick: () => setSelectedPlanId(plan.id),
|
|
280
|
-
|
|
285
|
+
disabled: isCurrent,
|
|
286
|
+
className: chunkLVUDBCQ2_cjs.cn(
|
|
287
|
+
"ck-plan-card",
|
|
288
|
+
isSelected && "ck-plan-card--selected",
|
|
289
|
+
isCurrent && "ck-plan-card--current"
|
|
290
|
+
),
|
|
281
291
|
"aria-pressed": isSelected,
|
|
282
292
|
children: [
|
|
283
|
-
/* @__PURE__ */ jsxRuntime.
|
|
293
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ck-plan-name", children: [
|
|
294
|
+
plan.name ?? plan.id,
|
|
295
|
+
isCurrent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ck-plan-current-badge", children: "Current" })
|
|
296
|
+
] }),
|
|
284
297
|
plan.tagline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-plan-tagline", children: plan.tagline }),
|
|
285
298
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ck-plan-price-row", children: [
|
|
286
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ck-plan-amount", children:
|
|
299
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ck-plan-amount", children: chunkLVUDBCQ2_cjs.formatPriceFromMinor(plan.amount.value, currency) }),
|
|
287
300
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ck-plan-period", children: [
|
|
288
301
|
"/",
|
|
289
302
|
interval
|
|
@@ -303,13 +316,13 @@ function DefaultPlanChangeOffer({
|
|
|
303
316
|
"button",
|
|
304
317
|
{
|
|
305
318
|
type: "button",
|
|
306
|
-
className:
|
|
319
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-button ck-button-primary", classNames?.acceptButton),
|
|
307
320
|
onClick: () => selectedPlanId && onAccept({ planId: selectedPlanId }),
|
|
308
321
|
disabled: isProcessing || !selectedPlanId,
|
|
309
322
|
children: ctaLabel
|
|
310
323
|
}
|
|
311
324
|
),
|
|
312
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className:
|
|
325
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: chunkLVUDBCQ2_cjs.cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
|
|
313
326
|
] })
|
|
314
327
|
] });
|
|
315
328
|
}
|
|
@@ -317,15 +330,15 @@ function DefaultRedirectOffer({ title, description, offer, onDecline, classNames
|
|
|
317
330
|
const url = offer.url;
|
|
318
331
|
const headline = title ?? offer.copy.headline;
|
|
319
332
|
const body = description ?? offer.copy.body;
|
|
320
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
321
|
-
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className:
|
|
322
|
-
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className:
|
|
323
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
333
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-step ck-step-offer", classNames?.root), children: [
|
|
334
|
+
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkLVUDBCQ2_cjs.cn("ck-step-title", classNames?.title), children: headline }),
|
|
335
|
+
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className: chunkLVUDBCQ2_cjs.cn("ck-step-description", classNames?.description) }),
|
|
336
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-offer-card", classNames?.card), children: [
|
|
324
337
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-offer-details", children: /* @__PURE__ */ jsxRuntime.jsxs("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "ck-redirect-link", children: [
|
|
325
338
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: offer.copy.cta }),
|
|
326
339
|
/* @__PURE__ */ jsxRuntime.jsx(ExternalIcon, {})
|
|
327
340
|
] }) }),
|
|
328
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className:
|
|
341
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: chunkLVUDBCQ2_cjs.cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
|
|
329
342
|
] })
|
|
330
343
|
] });
|
|
331
344
|
}
|
|
@@ -365,11 +378,11 @@ function DefaultTrialExtensionOffer({
|
|
|
365
378
|
const body = description ?? offer.copy.body;
|
|
366
379
|
const end = /* @__PURE__ */ new Date();
|
|
367
380
|
end.setDate(end.getDate() + o.days);
|
|
368
|
-
const newEnd =
|
|
369
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
370
|
-
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className:
|
|
371
|
-
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className:
|
|
372
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
381
|
+
const newEnd = chunkLVUDBCQ2_cjs.formatMonthDay(end);
|
|
382
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-step ck-step-offer", classNames?.root), children: [
|
|
383
|
+
headline && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkLVUDBCQ2_cjs.cn("ck-step-title", classNames?.title), children: headline }),
|
|
384
|
+
body && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: body, className: chunkLVUDBCQ2_cjs.cn("ck-step-description", classNames?.description) }),
|
|
385
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-offer-card", classNames?.card), children: [
|
|
373
386
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ck-offer-details ck-trial-block", children: [
|
|
374
387
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ck-trial-badge", children: [
|
|
375
388
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ck-trial-days", children: [
|
|
@@ -387,13 +400,13 @@ function DefaultTrialExtensionOffer({
|
|
|
387
400
|
"button",
|
|
388
401
|
{
|
|
389
402
|
type: "button",
|
|
390
|
-
className:
|
|
403
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-button ck-button-primary", classNames?.acceptButton),
|
|
391
404
|
onClick: () => onAccept(),
|
|
392
405
|
disabled: isProcessing,
|
|
393
406
|
children: isProcessing ? "Processing..." : offer.copy.cta
|
|
394
407
|
}
|
|
395
408
|
),
|
|
396
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className:
|
|
409
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: chunkLVUDBCQ2_cjs.cn("ck-button-link", classNames?.declineButton), onClick: onDecline, children: offer.copy.declineCta })
|
|
397
410
|
] })
|
|
398
411
|
] });
|
|
399
412
|
}
|
|
@@ -428,11 +441,11 @@ function pickOfferComponent(type, components) {
|
|
|
428
441
|
}
|
|
429
442
|
}
|
|
430
443
|
function DefaultSuccess({ title, description, onClose, classNames }) {
|
|
431
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className:
|
|
432
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
433
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className:
|
|
434
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: description, className:
|
|
435
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-success-actions", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className:
|
|
444
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-step ck-step-success", classNames?.root), children: [
|
|
445
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkLVUDBCQ2_cjs.cn("ck-success-icon", classNames?.icon), children: /* @__PURE__ */ jsxRuntime.jsx(Checkmark, { color: "currentColor", size: 26 }) }),
|
|
446
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkLVUDBCQ2_cjs.cn("ck-step-title", classNames?.title), children: title }),
|
|
447
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: description, className: chunkLVUDBCQ2_cjs.cn("ck-step-description", classNames?.description) }),
|
|
448
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-success-actions", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: chunkLVUDBCQ2_cjs.cn("ck-button ck-button-primary", classNames?.closeButton), onClick: onClose, children: "Done" }) })
|
|
436
449
|
] });
|
|
437
450
|
}
|
|
438
451
|
function DefaultReasonButton({ reason, index, isSelected, onSelect }) {
|
|
@@ -443,9 +456,8 @@ function DefaultReasonButton({ reason, index, isSelected, onSelect }) {
|
|
|
443
456
|
type: "button",
|
|
444
457
|
role: "radio",
|
|
445
458
|
"aria-checked": isSelected,
|
|
446
|
-
tabIndex: isSelected ? 0 : -1,
|
|
447
459
|
onClick: () => onSelect(reason.id),
|
|
448
|
-
className:
|
|
460
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-reason-button", isSelected && "ck-reason-button--selected"),
|
|
449
461
|
children: [
|
|
450
462
|
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "ck-reason-badge", children: isSelected ? /* @__PURE__ */ jsxRuntime.jsx(Checkmark, { color: "#fff", size: 12 }) : letter }),
|
|
451
463
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "ck-reason-label", children: reason.label })
|
|
@@ -459,57 +471,44 @@ function DefaultSurvey({
|
|
|
459
471
|
reasons,
|
|
460
472
|
selectedReason,
|
|
461
473
|
onSelectReason,
|
|
474
|
+
followupResponse,
|
|
475
|
+
onFollowupResponseChange,
|
|
462
476
|
onNext,
|
|
463
477
|
classNames,
|
|
464
478
|
components
|
|
465
479
|
}) {
|
|
466
480
|
const ReasonButton = components?.ReasonButton ?? DefaultReasonButton;
|
|
467
|
-
const
|
|
468
|
-
const
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
if (e.key === "ArrowDown") {
|
|
475
|
-
nextIdx = currentIdx < reasons.length - 1 ? currentIdx + 1 : 0;
|
|
476
|
-
} else {
|
|
477
|
-
nextIdx = currentIdx > 0 ? currentIdx - 1 : reasons.length - 1;
|
|
478
|
-
}
|
|
479
|
-
onSelectReason(reasons[nextIdx].id);
|
|
480
|
-
const buttons = listRef.current?.querySelectorAll('[role="radio"]');
|
|
481
|
-
buttons?.[nextIdx]?.focus();
|
|
482
|
-
},
|
|
483
|
-
[reasons, selectedReason, onSelectReason]
|
|
484
|
-
);
|
|
485
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkEHZJAQQ5_cjs.cn("ck-step ck-step-survey", classNames?.root), children: [
|
|
486
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkEHZJAQQ5_cjs.cn("ck-step-title", classNames?.title), children: title }),
|
|
487
|
-
description && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: description, className: chunkEHZJAQQ5_cjs.cn("ck-step-description", classNames?.description) }),
|
|
488
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
489
|
-
"div",
|
|
481
|
+
const selected = reasons.find((r) => r.id === selectedReason);
|
|
482
|
+
const showFollowup = selected?.freeform === true;
|
|
483
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkLVUDBCQ2_cjs.cn("ck-step ck-step-survey", classNames?.root), children: [
|
|
484
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { className: chunkLVUDBCQ2_cjs.cn("ck-step-title", classNames?.title), children: title }),
|
|
485
|
+
description && /* @__PURE__ */ jsxRuntime.jsx(RichText, { html: description, className: chunkLVUDBCQ2_cjs.cn("ck-step-description", classNames?.description) }),
|
|
486
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkLVUDBCQ2_cjs.cn("ck-reason-list", classNames?.reasonList), role: "radiogroup", "aria-label": title, children: reasons.map((reason, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
487
|
+
ReasonButton,
|
|
490
488
|
{
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
))
|
|
489
|
+
reason,
|
|
490
|
+
index: i,
|
|
491
|
+
isSelected: selectedReason === reason.id,
|
|
492
|
+
onSelect: onSelectReason
|
|
493
|
+
},
|
|
494
|
+
reason.id
|
|
495
|
+
)) }),
|
|
496
|
+
showFollowup && /* @__PURE__ */ jsxRuntime.jsx(
|
|
497
|
+
"textarea",
|
|
498
|
+
{
|
|
499
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-reason-followup", classNames?.followupInput),
|
|
500
|
+
placeholder: "Tell us more (optional)",
|
|
501
|
+
rows: 3,
|
|
502
|
+
value: followupResponse,
|
|
503
|
+
onChange: (e) => onFollowupResponseChange(e.target.value),
|
|
504
|
+
"aria-label": "Additional detail"
|
|
506
505
|
}
|
|
507
506
|
),
|
|
508
507
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
509
508
|
"button",
|
|
510
509
|
{
|
|
511
510
|
type: "button",
|
|
512
|
-
className:
|
|
511
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-button ck-button-primary", classNames?.continueButton),
|
|
513
512
|
onClick: onNext,
|
|
514
513
|
disabled: !selectedReason,
|
|
515
514
|
children: "Continue"
|
|
@@ -518,7 +517,7 @@ function DefaultSurvey({
|
|
|
518
517
|
] });
|
|
519
518
|
}
|
|
520
519
|
function DefaultBackButton({ onBack, className }) {
|
|
521
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className:
|
|
520
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: chunkLVUDBCQ2_cjs.cn("ck-back-button", className), onClick: onBack, children: [
|
|
522
521
|
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
523
522
|
"path",
|
|
524
523
|
{
|
|
@@ -533,7 +532,7 @@ function DefaultBackButton({ onBack, className }) {
|
|
|
533
532
|
] });
|
|
534
533
|
}
|
|
535
534
|
function DefaultCloseButton({ onClose, className }) {
|
|
536
|
-
return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className:
|
|
535
|
+
return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: chunkLVUDBCQ2_cjs.cn("ck-close-button", className), onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) });
|
|
537
536
|
}
|
|
538
537
|
function trapFocus(container) {
|
|
539
538
|
const focusableSelector = [
|
|
@@ -563,7 +562,7 @@ function trapFocus(container) {
|
|
|
563
562
|
container.addEventListener("keydown", handleKeyDown);
|
|
564
563
|
return () => container.removeEventListener("keydown", handleKeyDown);
|
|
565
564
|
}
|
|
566
|
-
function DefaultModal({ open, onClose, children, className }) {
|
|
565
|
+
function DefaultModal({ open, onClose, children, className, overlayClassName }) {
|
|
567
566
|
const overlayRef = react.useRef(null);
|
|
568
567
|
const modalRef = react.useRef(null);
|
|
569
568
|
const previousFocusRef = react.useRef(null);
|
|
@@ -593,7 +592,7 @@ function DefaultModal({ open, onClose, children, className }) {
|
|
|
593
592
|
"div",
|
|
594
593
|
{
|
|
595
594
|
ref: overlayRef,
|
|
596
|
-
className: "ck-overlay",
|
|
595
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-overlay", overlayClassName),
|
|
597
596
|
onClick: (e) => {
|
|
598
597
|
if (e.target === overlayRef.current) onClose();
|
|
599
598
|
},
|
|
@@ -605,7 +604,7 @@ function DefaultModal({ open, onClose, children, className }) {
|
|
|
605
604
|
"aria-modal": "true",
|
|
606
605
|
"aria-labelledby": "ck-dialog-title",
|
|
607
606
|
tabIndex: -1,
|
|
608
|
-
className:
|
|
607
|
+
className: chunkLVUDBCQ2_cjs.cn("ck-modal", className),
|
|
609
608
|
children
|
|
610
609
|
}
|
|
611
610
|
)
|
|
@@ -631,7 +630,7 @@ function useColorScheme(preference) {
|
|
|
631
630
|
return system;
|
|
632
631
|
}
|
|
633
632
|
function CancelFlow(props) {
|
|
634
|
-
const { machine, state, isLoading, loadError, retry } =
|
|
633
|
+
const { machine, state, isLoading, loadError, retry } = chunk42SJA62X_cjs.useCancelFlowMachine(props);
|
|
635
634
|
if (isLoading || loadError) {
|
|
636
635
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
637
636
|
LoadStatus,
|
|
@@ -668,12 +667,12 @@ function LoadStatus({
|
|
|
668
667
|
onRetry
|
|
669
668
|
}) {
|
|
670
669
|
const scheme = useColorScheme(appearance?.colorScheme);
|
|
671
|
-
const appearanceStyle =
|
|
670
|
+
const appearanceStyle = chunkLVUDBCQ2_cjs.appearanceToStyle(appearance);
|
|
672
671
|
const Modal = components?.Modal ?? DefaultModal;
|
|
673
672
|
const CloseButton = components?.CloseButton ?? DefaultCloseButton;
|
|
674
673
|
const handleClose = onClose ?? (() => {
|
|
675
674
|
});
|
|
676
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-cancel-flow", "data-color-scheme": scheme, style: appearanceStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open: true, onClose: handleClose, className: classNames?.modal, children: [
|
|
675
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-cancel-flow", "data-color-scheme": scheme, style: appearanceStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open: true, onClose: handleClose, className: classNames?.modal, overlayClassName: classNames?.overlay, children: [
|
|
677
676
|
/* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClose: handleClose, className: classNames?.closeButton }),
|
|
678
677
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ck-content", children: [
|
|
679
678
|
isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ck-loading", style: { padding: "32px", textAlign: "center" }, children: [
|
|
@@ -721,11 +720,11 @@ function LoadStatus({
|
|
|
721
720
|
}
|
|
722
721
|
function FlowShell({ machine, state, appearance, classNames, components, customComponents }) {
|
|
723
722
|
const scheme = useColorScheme(appearance?.colorScheme);
|
|
724
|
-
const appearanceStyle =
|
|
723
|
+
const appearanceStyle = chunkLVUDBCQ2_cjs.appearanceToStyle(appearance);
|
|
725
724
|
const Modal = components?.Modal ?? DefaultModal;
|
|
726
725
|
const CloseButton = components?.CloseButton ?? DefaultCloseButton;
|
|
727
726
|
const BackButton = components?.BackButton ?? DefaultBackButton;
|
|
728
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-cancel-flow", "data-color-scheme": scheme, style: appearanceStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open: true, onClose: machine.close, className: classNames?.modal, children: [
|
|
727
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ck-cancel-flow", "data-color-scheme": scheme, style: appearanceStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open: true, onClose: machine.close, className: classNames?.modal, overlayClassName: classNames?.overlay, children: [
|
|
729
728
|
/* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClose: machine.close, className: classNames?.closeButton }),
|
|
730
729
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ck-content", children: [
|
|
731
730
|
machine.canGoBack && /* @__PURE__ */ jsxRuntime.jsx(BackButton, { onBack: machine.back, className: classNames?.backButton }),
|
|
@@ -748,11 +747,15 @@ function StepRenderer({
|
|
|
748
747
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
749
748
|
Survey,
|
|
750
749
|
{
|
|
751
|
-
title: config?.title ??
|
|
750
|
+
title: config?.title ?? chunkLVUDBCQ2_cjs.defaultTitles.survey,
|
|
752
751
|
description: config?.description,
|
|
752
|
+
customer: state.customer,
|
|
753
|
+
subscriptions: state.subscriptions,
|
|
753
754
|
reasons: machine.reasons,
|
|
754
755
|
selectedReason: state.selectedReason,
|
|
755
756
|
onSelectReason: machine.selectReason,
|
|
757
|
+
followupResponse: state.followupResponse,
|
|
758
|
+
onFollowupResponseChange: machine.setFollowupResponse,
|
|
756
759
|
onNext: machine.next,
|
|
757
760
|
classNames: config?.classNames,
|
|
758
761
|
components
|
|
@@ -769,12 +772,16 @@ function StepRenderer({
|
|
|
769
772
|
{
|
|
770
773
|
offer,
|
|
771
774
|
customer: state.customer,
|
|
775
|
+
subscriptions: state.subscriptions,
|
|
772
776
|
onAccept: machine.accept,
|
|
773
777
|
onDecline: machine.decline,
|
|
774
778
|
isProcessing: state.isProcessing
|
|
775
779
|
}
|
|
776
780
|
);
|
|
777
781
|
}
|
|
782
|
+
if (!chunkLVUDBCQ2_cjs.BUILT_IN_OFFER_TYPES.includes(offer.type)) {
|
|
783
|
+
return /* @__PURE__ */ jsxRuntime.jsx(UnregisteredOfferFallback, { offerType: offer.type, onSkip: machine.decline });
|
|
784
|
+
}
|
|
778
785
|
const Offer = components?.Offer ?? DefaultOffer;
|
|
779
786
|
const config = stepConfig;
|
|
780
787
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -782,6 +789,8 @@ function StepRenderer({
|
|
|
782
789
|
{
|
|
783
790
|
title: config?.title,
|
|
784
791
|
description: config?.description,
|
|
792
|
+
customer: state.customer,
|
|
793
|
+
subscriptions: state.subscriptions,
|
|
785
794
|
offer,
|
|
786
795
|
onAccept: machine.accept,
|
|
787
796
|
onDecline: machine.decline,
|
|
@@ -797,8 +806,10 @@ function StepRenderer({
|
|
|
797
806
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
798
807
|
Feedback,
|
|
799
808
|
{
|
|
800
|
-
title: config?.title ??
|
|
809
|
+
title: config?.title ?? chunkLVUDBCQ2_cjs.defaultTitles.feedback,
|
|
801
810
|
description: config?.description,
|
|
811
|
+
customer: state.customer,
|
|
812
|
+
subscriptions: state.subscriptions,
|
|
802
813
|
placeholder: config?.placeholder,
|
|
803
814
|
required: config?.required ?? false,
|
|
804
815
|
minLength: config?.minLength ?? 0,
|
|
@@ -815,8 +826,10 @@ function StepRenderer({
|
|
|
815
826
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
816
827
|
Confirm,
|
|
817
828
|
{
|
|
818
|
-
title: config?.title ??
|
|
829
|
+
title: config?.title ?? chunkLVUDBCQ2_cjs.defaultTitles.confirm,
|
|
819
830
|
description: config?.description,
|
|
831
|
+
customer: state.customer,
|
|
832
|
+
subscriptions: state.subscriptions,
|
|
820
833
|
losses: config?.losses,
|
|
821
834
|
lossesLabel: config?.lossesLabel,
|
|
822
835
|
confirmLabel: config?.confirmLabel ?? "Cancel subscription",
|
|
@@ -839,6 +852,8 @@ function StepRenderer({
|
|
|
839
852
|
offer: machine.currentOffer ?? void 0,
|
|
840
853
|
title: isSaved ? config?.savedTitle ?? "Welcome back!" : config?.cancelledTitle ?? "Subscription cancelled",
|
|
841
854
|
description: isSaved ? config?.savedDescription ?? "Your offer has been applied." : config?.cancelledDescription ?? "We're sorry to see you go.",
|
|
855
|
+
customer: state.customer,
|
|
856
|
+
subscriptions: state.subscriptions,
|
|
842
857
|
onClose: machine.close,
|
|
843
858
|
classNames: config?.classNames
|
|
844
859
|
}
|
|
@@ -860,6 +875,7 @@ function StepRenderer({
|
|
|
860
875
|
data: config?.data
|
|
861
876
|
},
|
|
862
877
|
customer: state.customer,
|
|
878
|
+
subscriptions: state.subscriptions,
|
|
863
879
|
onNext: machine.next,
|
|
864
880
|
onBack: machine.back
|
|
865
881
|
}
|
|
@@ -874,50 +890,65 @@ function UnregisteredStepFallback({ step, onSkip }) {
|
|
|
874
890
|
}, [step, onSkip]);
|
|
875
891
|
return null;
|
|
876
892
|
}
|
|
893
|
+
function UnregisteredOfferFallback({ offerType, onSkip }) {
|
|
894
|
+
react.useEffect(() => {
|
|
895
|
+
console.warn(`[churnkey] No component registered for offer type "${offerType}". Skipping.`);
|
|
896
|
+
onSkip();
|
|
897
|
+
}, [offerType, onSkip]);
|
|
898
|
+
return null;
|
|
899
|
+
}
|
|
877
900
|
|
|
878
901
|
Object.defineProperty(exports, "useCancelFlow", {
|
|
879
902
|
enumerable: true,
|
|
880
|
-
get: function () { return
|
|
903
|
+
get: function () { return chunk42SJA62X_cjs.useCancelFlow; }
|
|
904
|
+
});
|
|
905
|
+
Object.defineProperty(exports, "BUILT_IN_OFFER_TYPES", {
|
|
906
|
+
enumerable: true,
|
|
907
|
+
get: function () { return chunkLVUDBCQ2_cjs.BUILT_IN_OFFER_TYPES; }
|
|
881
908
|
});
|
|
882
909
|
Object.defineProperty(exports, "BUILT_IN_STEP_TYPES", {
|
|
883
910
|
enumerable: true,
|
|
884
|
-
get: function () { return
|
|
911
|
+
get: function () { return chunkLVUDBCQ2_cjs.BUILT_IN_STEP_TYPES; }
|
|
885
912
|
});
|
|
886
913
|
Object.defineProperty(exports, "appearanceToStyle", {
|
|
887
914
|
enumerable: true,
|
|
888
|
-
get: function () { return
|
|
915
|
+
get: function () { return chunkLVUDBCQ2_cjs.appearanceToStyle; }
|
|
889
916
|
});
|
|
890
917
|
Object.defineProperty(exports, "calculateDiscountedPrice", {
|
|
891
918
|
enumerable: true,
|
|
892
|
-
get: function () { return
|
|
919
|
+
get: function () { return chunkLVUDBCQ2_cjs.calculateDiscountedPrice; }
|
|
893
920
|
});
|
|
894
921
|
Object.defineProperty(exports, "cn", {
|
|
895
922
|
enumerable: true,
|
|
896
|
-
get: function () { return
|
|
923
|
+
get: function () { return chunkLVUDBCQ2_cjs.cn; }
|
|
897
924
|
});
|
|
898
925
|
Object.defineProperty(exports, "defaultTitles", {
|
|
899
926
|
enumerable: true,
|
|
900
|
-
get: function () { return
|
|
927
|
+
get: function () { return chunkLVUDBCQ2_cjs.defaultTitles; }
|
|
928
|
+
});
|
|
929
|
+
Object.defineProperty(exports, "formatPeriodEnd", {
|
|
930
|
+
enumerable: true,
|
|
931
|
+
get: function () { return chunkLVUDBCQ2_cjs.formatPeriodEnd; }
|
|
901
932
|
});
|
|
902
933
|
Object.defineProperty(exports, "formatPrice", {
|
|
903
934
|
enumerable: true,
|
|
904
|
-
get: function () { return
|
|
935
|
+
get: function () { return chunkLVUDBCQ2_cjs.formatPrice; }
|
|
905
936
|
});
|
|
906
937
|
Object.defineProperty(exports, "AnalyticsClient", {
|
|
907
938
|
enumerable: true,
|
|
908
|
-
get: function () { return
|
|
939
|
+
get: function () { return chunk2VQNWZWO_cjs.AnalyticsClient; }
|
|
909
940
|
});
|
|
910
941
|
Object.defineProperty(exports, "CancelFlowMachine", {
|
|
911
942
|
enumerable: true,
|
|
912
|
-
get: function () { return
|
|
943
|
+
get: function () { return chunk2VQNWZWO_cjs.CancelFlowMachine; }
|
|
913
944
|
});
|
|
914
945
|
Object.defineProperty(exports, "ChurnkeyApi", {
|
|
915
946
|
enumerable: true,
|
|
916
|
-
get: function () { return
|
|
947
|
+
get: function () { return chunk2VQNWZWO_cjs.ChurnkeyApi; }
|
|
917
948
|
});
|
|
918
949
|
Object.defineProperty(exports, "decodeSessionToken", {
|
|
919
950
|
enumerable: true,
|
|
920
|
-
get: function () { return
|
|
951
|
+
get: function () { return chunk2VQNWZWO_cjs.decodeSessionToken; }
|
|
921
952
|
});
|
|
922
953
|
exports.CancelFlow = CancelFlow;
|
|
923
954
|
exports.DefaultBackButton = DefaultBackButton;
|