@churnkey/react 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { useCancelFlowMachine } from './chunk-CPCWJTSG.js';
-export { useCancelFlow } from './chunk-CPCWJTSG.js';
-import { cn, discountPhrase, formatMonthDayLong, formatPriceFromMinor, formatMonthDay, appearanceToStyle, defaultTitles } from './chunk-SXGORJOX.js';
-export { BUILT_IN_STEP_TYPES, appearanceToStyle, calculateDiscountedPrice, cn, defaultTitles, formatPrice } from './chunk-SXGORJOX.js';
-export { AnalyticsClient, CancelFlowMachine, ChurnkeyApi, decodeSessionToken } from './chunk-OL5HQUE4.js';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useCancelFlowMachine } from './chunk-YZERGV7F.js';
+export { useCancelFlow } from './chunk-YZERGV7F.js';
+import { formatPeriodEnd, cn, discountPhrase, formatMonthDayLong, formatPriceFromMinor, formatMonthDay, appearanceToStyle, defaultTitles, BUILT_IN_OFFER_TYPES } from './chunk-SQ35G4LA.js';
+export { BUILT_IN_OFFER_TYPES, BUILT_IN_STEP_TYPES, appearanceToStyle, calculateDiscountedPrice, cn, defaultTitles, formatPeriodEnd, formatPrice } from './chunk-SQ35G4LA.js';
+export { AnalyticsClient, CancelFlowMachine, ChurnkeyApi, decodeSessionToken } from './chunk-UNSSI6KX.js';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function RichText({ html, as = "p", className }) {
@@ -20,17 +20,18 @@ function RichText({ html, as = "p", className }) {
 function DefaultConfirm({
   title,
   description,
+  subscriptions,
   losses,
   lossesLabel,
   confirmLabel,
   goBackLabel,
-  periodEnd,
   onConfirm,
   onGoBack,
   isProcessing,
   classNames
 }) {
   const hasLosses = Array.isArray(losses) && losses.length > 0;
+  const periodEnd = formatPeriodEnd(subscriptions);
   return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-confirm", classNames?.root), children: [
     /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: title }),
     description && /* @__PURE__ */ jsx(RichText, { html: description, className: cn("ck-step-description", classNames?.description) }),
@@ -251,6 +252,7 @@ function Checkmark({ color = "currentColor", size = 14 }) {
 function DefaultPlanChangeOffer({
   title,
   description,
+  subscriptions,
   offer,
   onAccept,
   onDecline,
@@ -259,7 +261,9 @@ function DefaultPlanChangeOffer({
 }) {
   const o = offer;
   const plans = o.plans ?? [];
-  const [selectedPlanId, setSelectedPlanId] = useState(plans[0]?.id ?? null);
+  const currentPlanId = subscriptions[0]?.items[0]?.price.id;
+  const initialPlanId = plans.find((p) => p.id !== currentPlanId)?.id ?? null;
+  const [selectedPlanId, setSelectedPlanId] = useState(initialPlanId);
   const selectedPlan = plans.find((p) => p.id === selectedPlanId) ?? null;
   const headline = title ?? offer.copy.headline;
   const body = description ?? offer.copy.body;
@@ -272,15 +276,24 @@ function DefaultPlanChangeOffer({
         const interval = plan.duration?.interval ?? "month";
         const currency = plan.amount.currency ?? "USD";
         const isSelected = plan.id === selectedPlanId;
+        const isCurrent = plan.id === currentPlanId;
         return /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
             onClick: () => setSelectedPlanId(plan.id),
-            className: cn("ck-plan-card", isSelected && "ck-plan-card--selected"),
+            disabled: isCurrent,
+            className: cn(
+              "ck-plan-card",
+              isSelected && "ck-plan-card--selected",
+              isCurrent && "ck-plan-card--current"
+            ),
             "aria-pressed": isSelected,
             children: [
-              /* @__PURE__ */ jsx("div", { className: "ck-plan-name", children: plan.name ?? plan.id }),
+              /* @__PURE__ */ jsxs("div", { className: "ck-plan-name", children: [
+                plan.name ?? plan.id,
+                isCurrent && /* @__PURE__ */ jsx("span", { className: "ck-plan-current-badge", children: "Current" })
+              ] }),
               plan.tagline && /* @__PURE__ */ jsx("div", { className: "ck-plan-tagline", children: plan.tagline }),
               /* @__PURE__ */ jsxs("div", { className: "ck-plan-price-row", children: [
                 /* @__PURE__ */ jsx("span", { className: "ck-plan-amount", children: formatPriceFromMinor(plan.amount.value, currency) }),
@@ -443,7 +456,6 @@ function DefaultReasonButton({ reason, index, isSelected, onSelect }) {
       type: "button",
       role: "radio",
       "aria-checked": isSelected,
-      tabIndex: isSelected ? 0 : -1,
       onClick: () => onSelect(reason.id),
       className: cn("ck-reason-button", isSelected && "ck-reason-button--selected"),
       children: [
@@ -459,50 +471,37 @@ function DefaultSurvey({
   reasons,
   selectedReason,
   onSelectReason,
+  followupResponse,
+  onFollowupResponseChange,
   onNext,
   classNames,
   components
 }) {
   const ReasonButton = components?.ReasonButton ?? DefaultReasonButton;
-  const listRef = useRef(null);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
-      e.preventDefault();
-      const currentIdx = reasons.findIndex((r) => r.id === selectedReason);
-      let nextIdx;
-      if (e.key === "ArrowDown") {
-        nextIdx = currentIdx < reasons.length - 1 ? currentIdx + 1 : 0;
-      } else {
-        nextIdx = currentIdx > 0 ? currentIdx - 1 : reasons.length - 1;
-      }
-      onSelectReason(reasons[nextIdx].id);
-      const buttons = listRef.current?.querySelectorAll('[role="radio"]');
-      buttons?.[nextIdx]?.focus();
-    },
-    [reasons, selectedReason, onSelectReason]
-  );
+  const selected = reasons.find((r) => r.id === selectedReason);
+  const showFollowup = selected?.freeform === true;
   return /* @__PURE__ */ jsxs("div", { className: cn("ck-step ck-step-survey", classNames?.root), children: [
     /* @__PURE__ */ jsx("h2", { className: cn("ck-step-title", classNames?.title), children: title }),
     description && /* @__PURE__ */ jsx(RichText, { html: description, className: cn("ck-step-description", classNames?.description) }),
-    /* @__PURE__ */ jsx(
-      "div",
+    /* @__PURE__ */ jsx("div", { className: cn("ck-reason-list", classNames?.reasonList), role: "radiogroup", "aria-label": title, children: reasons.map((reason, i) => /* @__PURE__ */ jsx(
+      ReasonButton,
       {
-        ref: listRef,
-        className: cn("ck-reason-list", classNames?.reasonList),
-        role: "radiogroup",
-        "aria-label": title,
-        onKeyDown: handleKeyDown,
-        children: reasons.map((reason, i) => /* @__PURE__ */ jsx(
-          ReasonButton,
-          {
-            reason,
-            index: i,
-            isSelected: selectedReason === reason.id,
-            onSelect: onSelectReason
-          },
-          reason.id
-        ))
+        reason,
+        index: i,
+        isSelected: selectedReason === reason.id,
+        onSelect: onSelectReason
+      },
+      reason.id
+    )) }),
+    showFollowup && /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn("ck-reason-followup", classNames?.followupInput),
+        placeholder: "Tell us more (optional)",
+        rows: 3,
+        value: followupResponse,
+        onChange: (e) => onFollowupResponseChange(e.target.value),
+        "aria-label": "Additional detail"
       }
     ),
     /* @__PURE__ */ jsx(
@@ -563,7 +562,7 @@ function trapFocus(container) {
   container.addEventListener("keydown", handleKeyDown);
   return () => container.removeEventListener("keydown", handleKeyDown);
 }
-function DefaultModal({ open, onClose, children, className }) {
+function DefaultModal({ open, onClose, children, className, overlayClassName }) {
   const overlayRef = useRef(null);
   const modalRef = useRef(null);
   const previousFocusRef = useRef(null);
@@ -593,7 +592,7 @@ function DefaultModal({ open, onClose, children, className }) {
     "div",
     {
       ref: overlayRef,
-      className: "ck-overlay",
+      className: cn("ck-overlay", overlayClassName),
       onClick: (e) => {
         if (e.target === overlayRef.current) onClose();
       },
@@ -673,7 +672,7 @@ function LoadStatus({
   const CloseButton = components?.CloseButton ?? DefaultCloseButton;
   const handleClose = onClose ?? (() => {
   });
-  return /* @__PURE__ */ jsx("div", { className: "ck-cancel-flow", "data-color-scheme": scheme, style: appearanceStyle, children: /* @__PURE__ */ jsxs(Modal, { open: true, onClose: handleClose, className: classNames?.modal, children: [
+  return /* @__PURE__ */ jsx("div", { className: "ck-cancel-flow", "data-color-scheme": scheme, style: appearanceStyle, children: /* @__PURE__ */ jsxs(Modal, { open: true, onClose: handleClose, className: classNames?.modal, overlayClassName: classNames?.overlay, children: [
     /* @__PURE__ */ jsx(CloseButton, { onClose: handleClose, className: classNames?.closeButton }),
     /* @__PURE__ */ jsxs("div", { className: "ck-content", children: [
       isLoading && /* @__PURE__ */ jsxs("div", { className: "ck-loading", style: { padding: "32px", textAlign: "center" }, children: [
@@ -725,7 +724,7 @@ function FlowShell({ machine, state, appearance, classNames, components, customC
   const Modal = components?.Modal ?? DefaultModal;
   const CloseButton = components?.CloseButton ?? DefaultCloseButton;
   const BackButton = components?.BackButton ?? DefaultBackButton;
-  return /* @__PURE__ */ jsx("div", { className: "ck-cancel-flow", "data-color-scheme": scheme, style: appearanceStyle, children: /* @__PURE__ */ jsxs(Modal, { open: true, onClose: machine.close, className: classNames?.modal, children: [
+  return /* @__PURE__ */ jsx("div", { className: "ck-cancel-flow", "data-color-scheme": scheme, style: appearanceStyle, children: /* @__PURE__ */ jsxs(Modal, { open: true, onClose: machine.close, className: classNames?.modal, overlayClassName: classNames?.overlay, children: [
     /* @__PURE__ */ jsx(CloseButton, { onClose: machine.close, className: classNames?.closeButton }),
     /* @__PURE__ */ jsxs("div", { className: "ck-content", children: [
       machine.canGoBack && /* @__PURE__ */ jsx(BackButton, { onBack: machine.back, className: classNames?.backButton }),
@@ -750,9 +749,13 @@ function StepRenderer({
         {
           title: config?.title ?? defaultTitles.survey,
           description: config?.description,
+          customer: state.customer,
+          subscriptions: state.subscriptions,
           reasons: machine.reasons,
           selectedReason: state.selectedReason,
           onSelectReason: machine.selectReason,
+          followupResponse: state.followupResponse,
+          onFollowupResponseChange: machine.setFollowupResponse,
           onNext: machine.next,
           classNames: config?.classNames,
           components
@@ -769,12 +772,16 @@ function StepRenderer({
           {
             offer,
             customer: state.customer,
+            subscriptions: state.subscriptions,
             onAccept: machine.accept,
             onDecline: machine.decline,
             isProcessing: state.isProcessing
           }
         );
       }
+      if (!BUILT_IN_OFFER_TYPES.includes(offer.type)) {
+        return /* @__PURE__ */ jsx(UnregisteredOfferFallback, { offerType: offer.type, onSkip: machine.decline });
+      }
       const Offer = components?.Offer ?? DefaultOffer;
       const config = stepConfig;
       return /* @__PURE__ */ jsx(
@@ -782,6 +789,8 @@ function StepRenderer({
         {
           title: config?.title,
           description: config?.description,
+          customer: state.customer,
+          subscriptions: state.subscriptions,
           offer,
           onAccept: machine.accept,
           onDecline: machine.decline,
@@ -799,6 +808,8 @@ function StepRenderer({
         {
           title: config?.title ?? defaultTitles.feedback,
           description: config?.description,
+          customer: state.customer,
+          subscriptions: state.subscriptions,
           placeholder: config?.placeholder,
           required: config?.required ?? false,
           minLength: config?.minLength ?? 0,
@@ -817,6 +828,8 @@ function StepRenderer({
         {
           title: config?.title ?? defaultTitles.confirm,
           description: config?.description,
+          customer: state.customer,
+          subscriptions: state.subscriptions,
           losses: config?.losses,
           lossesLabel: config?.lossesLabel,
           confirmLabel: config?.confirmLabel ?? "Cancel subscription",
@@ -839,6 +852,8 @@ function StepRenderer({
           offer: machine.currentOffer ?? void 0,
           title: isSaved ? config?.savedTitle ?? "Welcome back!" : config?.cancelledTitle ?? "Subscription cancelled",
           description: isSaved ? config?.savedDescription ?? "Your offer has been applied." : config?.cancelledDescription ?? "We're sorry to see you go.",
+          customer: state.customer,
+          subscriptions: state.subscriptions,
           onClose: machine.close,
           classNames: config?.classNames
         }
@@ -860,6 +875,7 @@ function StepRenderer({
             data: config?.data
           },
           customer: state.customer,
+          subscriptions: state.subscriptions,
           onNext: machine.next,
           onBack: machine.back
         }
@@ -874,6 +890,13 @@ function UnregisteredStepFallback({ step, onSkip }) {
   }, [step, onSkip]);
   return null;
 }
+function UnregisteredOfferFallback({ offerType, onSkip }) {
+  useEffect(() => {
+    console.warn(`[churnkey] No component registered for offer type "${offerType}". Skipping.`);
+    onSkip();
+  }, [offerType, onSkip]);
+  return null;
+}
 
 export { CancelFlow, DefaultBackButton, DefaultCloseButton, DefaultConfirm, DefaultContactOffer, DefaultDiscountOffer, DefaultFeedback, DefaultModal, DefaultOffer, DefaultPauseOffer, DefaultPlanChangeOffer, DefaultReasonButton, DefaultRedirectOffer, DefaultSuccess, DefaultSurvey, DefaultTrialExtensionOffer };
 //# sourceMappingURL=index.js.map