@pelcro/react-pelcro-js 4.0.0-alpha.14 → 4.0.0-alpha.16

package/dist/SubscriptionCancelView-2bdb2b25.js

@@ -0,0 +1,248 @@
+import React__default, { createContext, useContext } from 'react';
+import { u as useTranslation, a as useReducerWithSideEffects, S as SET_CANCEL_SUBSCRIPTION_REASON, l as lib_7, T as TextArea, R as ReactGA4, b as ReactGA1, c as usePelcro, B as Button, n as notify, d as SvgSubscription } from './components-0f4ebe18.js';
+import 'react-dom';
+import 'prop-types';
+
+const initialState = {
+  cancelationReason: ""
+};
+const store = /*#__PURE__*/createContext(initialState);
+const {
+  Provider
+} = store;
+
+const SubscriptionCancelContainer = ({
+  style,
+  className = "",
+  onSuccess = () => {},
+  onFailure = () => {},
+  children,
+  ...props
+}) => {
+  useTranslation("verifyEmail");
+  const [state, dispatch] = useReducerWithSideEffects((state, action) => {
+    switch (action.type) {
+      case SET_CANCEL_SUBSCRIPTION_REASON:
+        return lib_7({ ...state,
+          cancelationReason: action.payload
+        });
+
+      default:
+        return state;
+    }
+  }, initialState);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-subscription-cancel-container ${className}`
+  }, /*#__PURE__*/React__default.createElement(Provider, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
+    store,
+    key: i
+  })) : /*#__PURE__*/React__default.cloneElement(children, {
+    store
+  })));
+};
+
+const SubscriptionCancelReason = props => {
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+  const {
+    dispatch,
+    state
+  } = useContext(store);
+
+  const handleOnTextAreaBlur = e => {
+    dispatch({
+      type: SET_CANCEL_SUBSCRIPTION_REASON,
+      payload: e.target.value.trim()
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(TextArea, Object.assign({
+    label: t("labels.cancelReason"),
+    onBlur: e => handleOnTextAreaBlur(e)
+  }, props));
+};
+
+var _window$1, _window$Pelcro$1, _window$Pelcro$uiSett$1;
+const ReactGA$1 = (_window$1 = window) !== null && _window$1 !== void 0 && (_window$Pelcro$1 = _window$1.Pelcro) !== null && _window$Pelcro$1 !== void 0 && (_window$Pelcro$uiSett$1 = _window$Pelcro$1.uiSettings) !== null && _window$Pelcro$uiSett$1 !== void 0 && _window$Pelcro$uiSett$1.enableReactGA4 ? ReactGA4 : ReactGA1;
+const SubscriptionCancelNowButton = ({
+  subscription,
+  onClick,
+  className
+}) => {
+  const {
+    switchView
+  } = usePelcro();
+  const {
+    state: {
+      cancelationReason
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+
+  const cancelSubscription = (payload, onSuccess, onFailure) => {
+    window.Pelcro.subscription.cancel({
+      auth_token: window.Pelcro.user.read().auth_token,
+      subscription_id: payload.subscription_id,
+      mode: payload.mode,
+      ...(payload.reason && {
+        reason: payload.reason
+      })
+    }, (err, res) => {
+      var _ReactGA$event;
+
+      if (err) {
+        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+      }
+
+      ReactGA$1 === null || ReactGA$1 === void 0 ? void 0 : (_ReactGA$event = ReactGA$1.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA$1, {
+        category: "ACTIONS",
+        action: "Canceled",
+        nonInteraction: true
+      });
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+    });
+  };
+
+  const handleCancelNowClick = () => {
+    const payload = {
+      subscription_id: subscription.id,
+      mode: "now",
+      ...(cancelationReason && {
+        reason: cancelationReason
+      })
+    };
+    onClick === null || onClick === void 0 ? void 0 : onClick(); //Close the modal
+
+    switchView(null); //Show confirmation alert after closing the modal
+
+    notify.confirm((onSuccess, onFailure) => {
+      cancelSubscription(payload, onSuccess, onFailure);
+    }, {
+      confirmMessage: t("messages.subCancellation.isSureToCancelNow"),
+      loadingMessage: t("messages.subCancellation.loading"),
+      successMessage: t("messages.subCancellation.success"),
+      errorMessage: t("messages.subCancellation.error")
+    }, {
+      closeButtonLabel: t("labels.subCancellation.goBack")
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(Button, {
+    onClick: handleCancelNowClick,
+    className: `${className}`
+  }, t("messages.cancelNow"));
+};
+
+var _window, _window$Pelcro, _window$Pelcro$uiSett;
+const ReactGA = (_window = window) !== null && _window !== void 0 && (_window$Pelcro = _window.Pelcro) !== null && _window$Pelcro !== void 0 && (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) !== null && _window$Pelcro$uiSett !== void 0 && _window$Pelcro$uiSett.enableReactGA4 ? ReactGA4 : ReactGA1;
+const SubscriptionCancelLaterButton = ({
+  subscription,
+  onClick,
+  className
+}) => {
+  const {
+    switchView
+  } = usePelcro();
+  const {
+    state: {
+      cancelationReason
+    },
+    dispatch
+  } = useContext(store);
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+
+  const cancelSubscription = (payload, onSuccess, onFailure) => {
+    window.Pelcro.subscription.cancel({
+      auth_token: window.Pelcro.user.read().auth_token,
+      subscription_id: payload.subscription_id,
+      mode: payload.mode,
+      ...(payload.reason && {
+        reason: payload.reason
+      })
+    }, (err, res) => {
+      var _ReactGA$event;
+
+      if (err) {
+        return onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+      }
+
+      ReactGA === null || ReactGA === void 0 ? void 0 : (_ReactGA$event = ReactGA.event) === null || _ReactGA$event === void 0 ? void 0 : _ReactGA$event.call(ReactGA, {
+        category: "ACTIONS",
+        action: "Canceled",
+        nonInteraction: true
+      });
+      onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(res);
+    });
+  };
+
+  const handleCancelNowClick = () => {
+    const payload = {
+      subscription_id: subscription.id,
+      mode: "period_end",
+      ...(cancelationReason && {
+        reason: cancelationReason
+      })
+    };
+    onClick === null || onClick === void 0 ? void 0 : onClick(); //Close the modal
+
+    switchView(null); //Show confirmation alert after closing the modal
+
+    notify.confirm((onSuccess, onFailure) => {
+      cancelSubscription(payload, onSuccess, onFailure);
+    }, {
+      confirmMessage: t("messages.subCancellation.isSureToCancel"),
+      loadingMessage: t("messages.subCancellation.loading"),
+      successMessage: t("messages.subCancellation.success"),
+      errorMessage: t("messages.subCancellation.error")
+    }, {
+      closeButtonLabel: t("labels.subCancellation.goBack")
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(Button, {
+    onClick: handleCancelNowClick,
+    className: `${className}`
+  }, t("messages.cancelLater"));
+};
+
+const SubscriptionCancelView = props => {
+  const {
+    subscriptionToCancel
+  } = usePelcro();
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+  return /*#__PURE__*/React__default.createElement("div", {
+    id: "pelcro-subscription-cancel-view"
+  }, /*#__PURE__*/React__default.createElement(SubscriptionCancelContainer, props, /*#__PURE__*/React__default.createElement("div", {
+    className: "plc-flex plc-flex-col plc-items-center plc-justify-center plc-mt-4"
+  }, /*#__PURE__*/React__default.createElement(SvgSubscription, {
+    className: "plc-w-32 plc-h-32"
+  }), /*#__PURE__*/React__default.createElement("p", {
+    className: "plc-mb-3 plc-text-gray-900 plc-text-center plc-whitespace-pre-line"
+  }, t("messages.subscriptionEnd"), " ", new Date(subscriptionToCancel === null || subscriptionToCancel === void 0 ? void 0 : subscriptionToCancel.current_period_end).toLocaleDateString("en-CA", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }), "."), /*#__PURE__*/React__default.createElement(SubscriptionCancelReason, null), /*#__PURE__*/React__default.createElement(SubscriptionCancelNowButton, {
+    className: "plc-mb-2",
+    subscription: subscriptionToCancel
+  }), subscriptionToCancel.cancel_at_period_end === 0 && /*#__PURE__*/React__default.createElement(SubscriptionCancelLaterButton, {
+    subscription: subscriptionToCancel
+  }))));
+};
+
+export { SubscriptionCancelView };