@pelcro/react-pelcro-js 3.2.0-beta.34 → 3.2.0-beta.35

package/dist/index.cjs.js

@@ -6975,7 +6975,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$k;
+      } = initialState$l;
       this.set(otherStateFields);
     });
 
@@ -7311,7 +7311,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$k = {
+const initialState$l = {
   // View
   view: null,
   // Plans
@@ -7341,7 +7341,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$k,
+    ...initialState$l,
     // State actions
     ...actions,
     // Callbacks
@@ -10537,8 +10537,9 @@ const GET_NEWSLETTERS_FETCH = "GET_NEWSLETTERS_FETCH";
 const GET_NEWSLETTERS_SUCCESS = "GET_NEWSLETTERS_SUCCESS";
 const SWITCH_TO_UPDATE = "SWITCH_TO_UPDATE";
 const LINK_TOKEN_VERIFY = "LINK_TOKEN_VERIFY";
+const SET_CANCEL_SUBSCRIPTION_REASON = "SET_CANCEL_SUBSCRIPTION_REASON";
 
-const initialState$j = {
+const initialState$k = {
   email: "",
   password: "",
   emailError: null,
@@ -10549,10 +10550,10 @@ const initialState$j = {
     content: ""
   }
 };
-const store$j = /*#__PURE__*/React.createContext(initialState$j);
+const store$k = /*#__PURE__*/React.createContext(initialState$k);
 const {
-  Provider: Provider$j
-} = store$j;
+  Provider: Provider$k
+} = store$k;
 
 const LoginContainer = ({
   style,
@@ -10659,7 +10660,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$j;
+        return initialState$k;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -10677,12 +10678,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$j);
+  }, initialState$k);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$j, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$k, {
     value: {
       state,
       dispatch
@@ -10690,12 +10691,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$j,
+        store: store$k,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$j
+    store: store$k
   })));
 };
 
@@ -10953,7 +10954,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$j);
+  } = React.useContext(store$k);
   const {
     t
   } = useTranslation("login");
@@ -11011,11 +11012,11 @@ const LoginRequestLoginToken = ({
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$j
+  store: store$k
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$j
+  store: store$k
 }, props));
 
 var _path$q;
@@ -11092,7 +11093,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$i = {
+const initialState$j = {
   email: "",
   password: "",
   emailError: null,
@@ -11109,10 +11110,10 @@ const initialState$i = {
     content: ""
   }
 };
-const store$i = /*#__PURE__*/React.createContext(initialState$i);
+const store$j = /*#__PURE__*/React.createContext(initialState$j);
 const {
-  Provider: Provider$i
-} = store$i;
+  Provider: Provider$j
+} = store$j;
 
 const RegisterContainer = ({
   style,
@@ -11295,7 +11296,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$i;
+        return initialState$j;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -11313,12 +11314,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$i);
+  }, initialState$j);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$i, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$j, {
     value: {
       state,
       dispatch
@@ -11326,12 +11327,12 @@ const RegisterContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default['default'].cloneElement(child, {
-        store: store$i,
+        store: store$j,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$i
+    store: store$j
   })));
 };
 /**
@@ -11371,10 +11372,10 @@ const FacebookLoginButton = ({
   const facebookLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.facebook_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$j);
+  } = React.useContext(store$k);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$i);
+  } = React.useContext(store$j);
 
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
@@ -11461,10 +11462,10 @@ const GoogleLoginButton = ({
   const googleLoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.google_app_id;
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$j);
+  } = React.useContext(store$k);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$i);
+  } = React.useContext(store$j);
 
   const onSuccess = response => {
     var _response$getAuthResp, _profile$getEmail, _profile$getGivenName, _profile$getFamilyNam, _profile$getEmail2, _profile$getGivenName2, _profile$getFamilyNam2;
@@ -11560,10 +11561,10 @@ const Auth0LoginButton = ({
   }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = React.useContext(store$j);
+  } = React.useContext(store$k);
   const {
     dispatch: registerDispatch
-  } = React.useContext(store$i);
+  } = React.useContext(store$j);
 
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
@@ -11860,11 +11861,11 @@ function LoginModal({
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default['default'].createElement(Email, Object.assign({
-  store: store$i
+  store: store$j
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
-  store: store$i
+  store: store$j
 }, props));
 
 const RegisterButton = ({
@@ -11884,7 +11885,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = React.useContext(store$i);
+  } = React.useContext(store$j);
   const {
     t
   } = useTranslation("register");
@@ -12022,7 +12023,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default['default'].createElement(FirstName, Object.assign({
-  store: store$i
+  store: store$j
 }, props));
 
 function LastName({
@@ -12053,7 +12054,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default['default'].createElement(LastName, Object.assign({
-  store: store$i
+  store: store$j
 }, props));
 
 /**
@@ -12177,7 +12178,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default['default'].createElement(TextInput, Object.assign({}, props, {
-    store: store$i
+    store: store$j
   }));
 };
 
@@ -14521,7 +14522,7 @@ class VantivGateway {
 
 /** @type {PaymentStateType} */
 
-const initialState$h = {
+const initialState$i = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -14540,10 +14541,10 @@ const initialState$h = {
     content: ""
   }
 };
-const store$h = /*#__PURE__*/React.createContext(initialState$h);
+const store$i = /*#__PURE__*/React.createContext(initialState$i);
 const {
-  Provider: Provider$h
-} = store$h;
+  Provider: Provider$i
+} = store$i;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -15795,21 +15796,21 @@ const PaymentMethodContainerWithoutStripe = ({
       default:
         return state;
     }
-  }, initialState$h);
+  }, initialState$i);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement(Provider$h, {
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$i, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
-    store: store$h,
+    store: store$i,
     key: i
   })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
-    store: store$h
+    store: store$i
   })));
 };
 
@@ -15831,7 +15832,7 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default['default'].createElement(es_11, null, /*#__PURE__*/React__default['default'].createElement(UnwrappedForm, Object.assign({
-      store: store$h
+      store: store$i
     }, props))));
   }
 
@@ -15884,7 +15885,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -15960,7 +15961,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     order,
     plan
@@ -16010,7 +16011,7 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const planQuantity = (_plan$quantity = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity !== void 0 ? _plan$quantity : 1;
   const price = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : plan === null || plan === void 0 ? void 0 : plan.amount;
   const priceFormatted = getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
@@ -16060,7 +16061,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -16094,7 +16095,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -16150,7 +16151,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -16407,7 +16408,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     product,
     plan,
@@ -16540,7 +16541,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     switchView,
     selectedPaymentMethodId
@@ -16582,7 +16583,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = React.useContext(store$h);
+  } = React.useContext(store$i);
   const {
     plan
   } = usePelcro();
@@ -16746,12 +16747,363 @@ function SubscriptionRenewModal({
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
+const initialState$h = {
+  cancelationReason: ""
+};
+const store$h = /*#__PURE__*/React.createContext(initialState$h);
+const {
+  Provider: Provider$h
+} = store$h;
+
+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$h);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-subscription-cancel-container ${className}`
+  }, /*#__PURE__*/React__default['default'].createElement(Provider$h, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default['default'].cloneElement(child, {
+    store: store$h,
+    key: i
+  })) : /*#__PURE__*/React__default['default'].cloneElement(children, {
+    store: store$h
+  })));
+};
+
 var _path$i;
 
 function _extends$k() { _extends$k = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$k.apply(this, arguments); }
 
-function SvgGift(props) {
+function SvgInfoCircle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$k({
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "plc-w-5 plc-h-5",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+  })));
+}
+
+/**
+ *
+ */
+
+const Tooltip = ({
+  value,
+  className
+}) => {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: `plc-flex pelcro-tooltip-container plc-text-gray-600 ${className}`
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "pelcro-tooltip-icon"
+  }, /*#__PURE__*/React__default['default'].createElement(SvgInfoCircle, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-p-1 plc--mt-8 plc-text-sm plc-bg-gray-100 plc-border plc-rounded-md plc-shadow-lg pelcro-tooltip"
+  }, value));
+};
+
+/**
+ *
+ */
+
+function TextArea({
+  label = "",
+  tooltipText,
+  required,
+  id,
+  errorId,
+  error,
+  className = "",
+  labelClassName = "",
+  errorClassName = "",
+  wrapperClassName = "",
+  ...otherProps
+}) {
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: `pelcro-input-wrapper ${wrapperClassName}`
+  }, /*#__PURE__*/React__default['default'].createElement("label", {
+    htmlFor: id,
+    className: `pelcro-input-label plc-flex plc-items-center ${labelClassName}`
+  }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+    value: tooltipText,
+    className: "plc-ml-1"
+  })), /*#__PURE__*/React__default['default'].createElement("textarea", Object.assign({
+    type: "text",
+    id: id,
+    className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
+    "aria-describedby": errorId,
+    "aria-invalid": Boolean(error)
+  }, otherProps)), error && /*#__PURE__*/React__default['default'].createElement("p", {
+    id: errorId,
+    "aria-live": "assertive",
+    className: `pelcro-input-error ${errorClassName}`
+  }, error));
+}
+
+const SubscriptionCancelReason = props => {
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+  const {
+    dispatch,
+    state
+  } = React.useContext(store$h);
+
+  const handleOnTextAreaBlur = e => {
+    dispatch({
+      type: SET_CANCEL_SUBSCRIPTION_REASON,
+      payload: e.target.value.trim()
+    });
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(TextArea, Object.assign({
+    label: t("labels.cancelReason"),
+    onBlur: e => handleOnTextAreaBlur(e)
+  }, props));
+};
+
+var _switch;
+
+function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+
+function SvgSubscription(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 100 125",
+    fill: "currentColor"
+  }, props), _switch || (_switch = /*#__PURE__*/React__namespace.createElement("switch", null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2c0 1.8.7 3.6 2 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5c1.3-1.3 2-3.1 2-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"
+  }), /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M90.4 58.6c0-4.4-3.6-7.9-8-7.9-1.3 0-2.5.3-3.6.9-1.4-2.5-4-4-6.9-4-1.3 0-2.5.3-3.6.9-1.4-2.5-4-4-6.9-4-.9 0-1.8.1-2.6.4v-4.6h6c4.8 0 8.6-3.9 8.6-8.7V11.2c0-4.8-3.9-8.7-8.6-8.7H18.2c-4.8 0-8.6 3.9-8.6 8.7v20.3c0 4.8 3.9 8.7 8.6 8.7h24.6V64l-3.3-3.3c-2.7-2.7-7-3.1-10.2-1-1.9 1.3-3.1 3.3-3.5 5.5-.3 2.2.3 4.5 1.8 6.3L42 88.9c4.5 5.5 11.2 8.6 18.2 8.6h9c5.6 0 10.9-2.2 14.9-6.2s6.2-9.3 6.2-14.9l.1-17.8zm-21 33.5h-9c-5.5 0-10.6-2.4-14.1-6.6L31.9 68.1c-.5-.6-.7-1.3-.6-2.1.1-.8.5-1.4 1.1-1.8.4-.3 1-.5 1.5-.5.7 0 1.4.3 1.9.8l5.8 5.8c1.1 1.1 2.8 1.4 4.3.8 1.5-.6 2.4-2 2.4-3.6V30.1c0-1.4 1.2-2.6 2.6-2.6.7 0 1.3.3 1.8.8s.8 1.1.8 1.8v25.7c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6V59c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6v6.7c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6v17.8c0 4.2-1.6 8.1-4.6 11.1-3.2 2.9-7.2 4.5-11.3 4.5zM18.2 34.2c-1.5 0-2.6-1.2-2.6-2.7V11.2c0-1.5 1.2-2.7 2.6-2.7h46.5c1.5 0 2.6 1.2 2.6 2.7v20.3c0 1.5-1.2 2.7-2.6 2.7h-6v-4c0-2.1-.8-4.1-2.3-5.6-1.5-1.5-3.5-2.3-5.6-2.3-4.4 0-7.9 3.6-7.9 8v4H18.2z"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M35.5 15.5L30 21.4l-1.9-2.1c-1-1.1-2.7-1.2-3.8-.1-1.1 1-1.2 2.7-.1 3.8l3.9 4.2c.5.6 1.2.9 2 .9s1.5-.3 2-.9l7.5-8c1-1.1 1-2.8-.1-3.8s-3-1-4 .1z"
+  }))))));
+}
+
+const SubscriptionCancelNowButton = ({
+  subscription,
+  onClick,
+  className
+}) => {
+  const {
+    switchView
+  } = usePelcro();
+  const {
+    state: {
+      cancelationReason
+    },
+    dispatch
+  } = React.useContext(store$h);
+  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: "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['default'].createElement(Button, {
+    onClick: handleCancelNowClick,
+    className: `${className}`
+  }, t("messages.cancelNow"));
+};
+
+const SubscriptionCancelLaterButton = ({
+  subscription,
+  onClick,
+  className
+}) => {
+  const {
+    switchView
+  } = usePelcro();
+  const {
+    state: {
+      cancelationReason
+    },
+    dispatch
+  } = React.useContext(store$h);
+  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: "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.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['default'].createElement(Button, {
+    onClick: handleCancelNowClick,
+    className: `${className}`
+  }, t("messages.cancelLater"));
+};
+
+const SubscriptionCancelView = props => {
+  const {
+    subscriptionToCancel
+  } = usePelcro();
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "pelcro-subscription-cancel-view"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default['default'].createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold"
+  }, t("labels.title"), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "plc-text-gray-400 plc-text-base plc-block"
+  }, "(", subscriptionToCancel.plan.nickname, ")"))), /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelContainer, props, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "plc-flex plc-flex-col plc-items-center plc-justify-center plc-mt-4"
+  }, /*#__PURE__*/React__default['default'].createElement(SvgSubscription, {
+    className: "plc-w-32 plc-h-32"
+  }), /*#__PURE__*/React__default['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['default'].createElement(SubscriptionCancelReason, null), /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelNowButton, {
+    className: "plc-mb-2",
+    subscription: subscriptionToCancel
+  }), /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelLaterButton, {
+    subscription: subscriptionToCancel
+  }))));
+};
+
+const SubscriptionCancelModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  return /*#__PURE__*/React__default['default'].createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-subscription-cancel-modal"
+  }, /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(SubscriptionCancelView, otherProps)), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
+};
+SubscriptionCancelModal.viewId = "subscription-cancel";
+
+var _path$h;
+
+function _extends$i() { _extends$i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
+
+function SvgGift(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -16760,7 +17112,7 @@ function SvgGift(props) {
     strokeWidth: 2,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"
   })));
 }
@@ -17715,17 +18067,17 @@ const UserUpdateContainer = ({
   })));
 };
 
-var _path$h;
+var _path$g;
 
-function _extends$j() { _extends$j = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$j.apply(this, arguments); }
+function _extends$h() { _extends$h = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
 
 function SvgEdit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$h({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zm-2.207 2.207L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
   })));
 }
@@ -21134,42 +21486,6 @@ const GiftCreateLastName = props => /*#__PURE__*/React__default['default'].creat
   store: store$7
 }, props));
 
-var _path$g;
-
-function _extends$i() { _extends$i = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$i.apply(this, arguments); }
-
-function SvgInfoCircle(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$i({
-    xmlns: "http://www.w3.org/2000/svg",
-    className: "plc-w-5 plc-h-5",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  }, props), _path$g || (_path$g = /*#__PURE__*/React__namespace.createElement("path", {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-  })));
-}
-
-/**
- *
- */
-
-const Tooltip = ({
-  value,
-  className
-}) => {
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: `plc-flex pelcro-tooltip-container plc-text-gray-600 ${className}`
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "pelcro-tooltip-icon"
-  }, /*#__PURE__*/React__default['default'].createElement(SvgInfoCircle, null)), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "plc-p-1 plc--mt-8 plc-text-sm plc-bg-gray-100 plc-border plc-rounded-md plc-shadow-lg pelcro-tooltip"
-  }, value));
-};
-
 function DatePicker({
   label = "",
   tooltipText,
@@ -21238,44 +21554,6 @@ const GiftCreateStartDate = props => {
   }, props));
 };
 
-/**
- *
- */
-
-function TextArea({
-  label = "",
-  tooltipText,
-  required,
-  id,
-  errorId,
-  error,
-  className = "",
-  labelClassName = "",
-  errorClassName = "",
-  wrapperClassName = "",
-  ...otherProps
-}) {
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: `pelcro-input-wrapper ${wrapperClassName}`
-  }, /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: id,
-    className: `pelcro-input-label plc-flex plc-items-center ${labelClassName}`
-  }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-    value: tooltipText,
-    className: "plc-ml-1"
-  })), /*#__PURE__*/React__default['default'].createElement("textarea", Object.assign({
-    type: "text",
-    id: id,
-    className: `pelcro-input-field ${className} ${error ? "pelcro-input-invalid" : ""}`,
-    "aria-describedby": errorId,
-    "aria-invalid": Boolean(error)
-  }, otherProps)), error && /*#__PURE__*/React__default['default'].createElement("p", {
-    id: errorId,
-    "aria-live": "assertive",
-    className: `pelcro-input-error ${errorClassName}`
-  }, error));
-}
-
 /**
  *
  */
@@ -22157,8 +22435,8 @@ const PaymentMethodSelectModal = ({
 };
 PaymentMethodSelectModal.viewId = "payment-method-select";
 
-function _extends$h() {
-  _extends$h = Object.assign || function (target) {
+function _extends$g() {
+  _extends$g = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -22172,7 +22450,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$g.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -22356,7 +22634,7 @@ function render(props, propsBag, defaultTag, features, visible) {
     return match(strategy, (_match = {}, _match[RenderStrategy.Unmount] = function () {
       return null;
     }, _match[RenderStrategy.Hidden] = function () {
-      return _render(_extends$h({}, _rest, {
+      return _render(_extends$g({}, _rest, {
         hidden: true,
         style: {
           display: 'none'
@@ -22884,7 +23162,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__default['default'].createElement(NestingContext.Provider, {
     value: nesting
-  }, render(_extends$h({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
+  }, render(_extends$g({}, passthroughProps, propsWeControl), propsBag, DEFAULT_TRANSITION_CHILD_TAG, TransitionChildRenderFeatures, state === TreeStates.Visible));
 }
 
 function Transition(props) {
@@ -22928,7 +23206,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default['default'].createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$h({}, sharedProps, {
+  }, render(_extends$g({}, sharedProps, {
     as: React.Fragment,
     children: React__default['default'].createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, React.Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -23055,12 +23333,12 @@ var ActionTypes;
 })(ActionTypes || (ActionTypes = {}));
 
 (_reducers = {}, _reducers[ActionTypes.CloseMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     activeItemIndex: null,
     menuState: MenuStates.Closed
   });
 }, _reducers[ActionTypes.OpenMenu] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     menuState: MenuStates.Open
   });
 }, _reducers[ActionTypes.GoToItem] = function (state, action) {
@@ -23079,7 +23357,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -23090,19 +23368,19 @@ var ActionTypes;
 
     return ((_item$dataRef$current = item.dataRef.current.textValue) == null ? void 0 : _item$dataRef$current.startsWith(searchQuery)) && !item.dataRef.current.disabled;
   });
-  if (match === -1 || match === state.activeItemIndex) return _extends$h({}, state, {
+  if (match === -1 || match === state.activeItemIndex) return _extends$g({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     searchQuery: searchQuery,
     activeItemIndex: match
   });
 }, _reducers[ActionTypes.ClearSearch] = function (state) {
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     searchQuery: ''
   });
 }, _reducers[ActionTypes.RegisterItem] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     items: [].concat(state.items, [{
       id: action.id,
       dataRef: action.dataRef
@@ -23115,7 +23393,7 @@ var ActionTypes;
     return a.id === action.id;
   });
   if (idx !== -1) nextItems.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     items: nextItems,
     activeItemIndex: function () {
       if (idx === state.activeItemIndex) return null;
@@ -23154,19 +23432,19 @@ var ActionTypes$1;
 (_reducers$1 = {}, _reducers$1[ActionTypes$1.CloseListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     activeOptionIndex: null,
     listboxState: ListboxStates.Closed
   });
 }, _reducers$1[ActionTypes$1.OpenListbox] = function (state) {
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Open) return state;
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     listboxState: ListboxStates.Open
   });
 }, _reducers$1[ActionTypes$1.SetDisabled] = function (state, action) {
   if (state.disabled === action.disabled) return state;
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     disabled: action.disabled
   });
 }, _reducers$1[ActionTypes$1.GoToOption] = function (state, action) {
@@ -23187,7 +23465,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -23200,10 +23478,10 @@ var ActionTypes$1;
 
     return !option.dataRef.current.disabled && ((_option$dataRef$curre = option.dataRef.current.textValue) == null ? void 0 : _option$dataRef$curre.startsWith(searchQuery));
   });
-  if (match === -1 || match === state.activeOptionIndex) return _extends$h({}, state, {
+  if (match === -1 || match === state.activeOptionIndex) return _extends$g({}, state, {
     searchQuery: searchQuery
   });
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     searchQuery: searchQuery,
     activeOptionIndex: match
   });
@@ -23211,11 +23489,11 @@ var ActionTypes$1;
   if (state.disabled) return state;
   if (state.listboxState === ListboxStates.Closed) return state;
   if (state.searchQuery === '') return state;
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     searchQuery: ''
   });
 }, _reducers$1[ActionTypes$1.RegisterOption] = function (state, action) {
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     options: [].concat(state.options, [{
       id: action.id,
       dataRef: action.dataRef
@@ -23228,7 +23506,7 @@ var ActionTypes$1;
     return a.id === action.id;
   });
   if (idx !== -1) nextOptions.splice(idx, 1);
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     options: nextOptions,
     activeOptionIndex: function () {
       if (idx === state.activeOptionIndex) return null;
@@ -23291,10 +23569,10 @@ const getPaymentCardIcon = name => {
 
 var _path$f;
 
-function _extends$g() { _extends$g = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$g.apply(this, arguments); }
+function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
 
 function SvgChevronRight(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$g({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23518,10 +23796,10 @@ const SavedItems = ({
 
 var _path$e;
 
-function _extends$f() { _extends$f = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$f.apply(this, arguments); }
+function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
 
 function SvgRefresh(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$f({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23537,10 +23815,10 @@ function SvgRefresh(props) {
 
 var _path$d;
 
-function _extends$e() { _extends$e = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$e.apply(this, arguments); }
+function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
 
 function SvgCalendar(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$e({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-4 plc-w-4 plc-mr-1",
     viewBox: "0 0 20 20",
@@ -23554,10 +23832,10 @@ function SvgCalendar(props) {
 
 var _path$c;
 
-function _extends$d() { _extends$d = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$d.apply(this, arguments); }
+function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
 
 function SvgPlus(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$d({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
     className: "plc-w-5 plc-h-5",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23573,10 +23851,10 @@ function SvgPlus(props) {
 
 var _path$b;
 
-function _extends$c() { _extends$c = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$c.apply(this, arguments); }
+function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
 
 function SvgCheckMark(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$c({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
@@ -23886,10 +24164,10 @@ Accordion.item = function AccordionItem({
 
 var _path$a;
 
-function _extends$b() { _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$b.apply(this, arguments); }
+function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
 
 function SvgExit(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$b({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23905,10 +24183,10 @@ function SvgExit(props) {
 
 var _path$9;
 
-function _extends$a() { _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$a.apply(this, arguments); }
+function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$a({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -23923,10 +24201,10 @@ function SvgUser(props) {
 
 var _path$8;
 
-function _extends$9() { _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
+function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 
 function SvgNewsletter(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$9({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-5 plc-w-5",
     fill: "none",
@@ -23942,10 +24220,10 @@ function SvgNewsletter(props) {
 
 var _path$7;
 
-function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
+function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 
 function SvgDocument(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$8({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-6 plc-w-6 plc-mr-2",
     fill: "none",
@@ -23961,10 +24239,10 @@ function SvgDocument(props) {
 
 var _path$6;
 
-function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 
 function SvgPaymentCard(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$7({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23980,10 +24258,10 @@ function SvgPaymentCard(props) {
 
 var _path$5, _path2;
 
-function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
 
 function SvgLocationPin(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -24002,26 +24280,6 @@ function SvgLocationPin(props) {
   })));
 }
 
-var _switch;
-
-function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
-
-function SvgSubscription(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 100 125",
-    fill: "currentColor"
-  }, props), _switch || (_switch = /*#__PURE__*/React__namespace.createElement("switch", null, /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M5273.1 2400.1v-2c0-2.8-5-4-9.7-4s-9.7 1.3-9.7 4v2c0 1.8.7 3.6 2 4.9l5 4.9c.3.3.4.6.4 1v6.4c0 .4.2.7.6.8l2.9.9c.5.1 1-.2 1-.8v-7.2c0-.4.2-.7.4-1l5.1-5c1.3-1.3 2-3.1 2-4.9zm-9.7-.1c-4.8 0-7.4-1.3-7.5-1.8.1-.5 2.7-1.8 7.5-1.8s7.3 1.3 7.5 1.8c-.2.5-2.7 1.8-7.5 1.8z"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M5268.4 2410.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1h-4.3zM5272.7 2413.7h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1s-.4-1-1-1zM5272.7 2417h-4.3c-.6 0-1 .4-1 1s.4 1 1 1h4.3c.6 0 1-.4 1-1 0-.5-.4-1-1-1z"
-  }), /*#__PURE__*/React__namespace.createElement("g", null, /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M90.4 58.6c0-4.4-3.6-7.9-8-7.9-1.3 0-2.5.3-3.6.9-1.4-2.5-4-4-6.9-4-1.3 0-2.5.3-3.6.9-1.4-2.5-4-4-6.9-4-.9 0-1.8.1-2.6.4v-4.6h6c4.8 0 8.6-3.9 8.6-8.7V11.2c0-4.8-3.9-8.7-8.6-8.7H18.2c-4.8 0-8.6 3.9-8.6 8.7v20.3c0 4.8 3.9 8.7 8.6 8.7h24.6V64l-3.3-3.3c-2.7-2.7-7-3.1-10.2-1-1.9 1.3-3.1 3.3-3.5 5.5-.3 2.2.3 4.5 1.8 6.3L42 88.9c4.5 5.5 11.2 8.6 18.2 8.6h9c5.6 0 10.9-2.2 14.9-6.2s6.2-9.3 6.2-14.9l.1-17.8zm-21 33.5h-9c-5.5 0-10.6-2.4-14.1-6.6L31.9 68.1c-.5-.6-.7-1.3-.6-2.1.1-.8.5-1.4 1.1-1.8.4-.3 1-.5 1.5-.5.7 0 1.4.3 1.9.8l5.8 5.8c1.1 1.1 2.8 1.4 4.3.8 1.5-.6 2.4-2 2.4-3.6V30.1c0-1.4 1.2-2.6 2.6-2.6.7 0 1.3.3 1.8.8s.8 1.1.8 1.8v25.7c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6V59c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6v6.7c0 1.5 1.2 2.7 2.7 2.7 1.5 0 2.7-1.2 2.7-2.7v-3.5c0-1.4 1.2-2.6 2.6-2.6 1.4 0 2.6 1.2 2.6 2.6v17.8c0 4.2-1.6 8.1-4.6 11.1-3.2 2.9-7.2 4.5-11.3 4.5zM18.2 34.2c-1.5 0-2.6-1.2-2.6-2.7V11.2c0-1.5 1.2-2.7 2.6-2.7h46.5c1.5 0 2.6 1.2 2.6 2.7v20.3c0 1.5-1.2 2.7-2.6 2.7h-6v-4c0-2.1-.8-4.1-2.3-5.6-1.5-1.5-3.5-2.3-5.6-2.3-4.4 0-7.9 3.6-7.9 8v4H18.2z"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M35.5 15.5L30 21.4l-1.9-2.1c-1-1.1-2.7-1.2-3.8-.1-1.1 1-1.2 2.7-.1 3.8l3.9 4.2c.5.6 1.2.9 2 .9s1.5-.3 2-.9l7.5-8c1-1.1 1-2.8-.1-3.8s-3-1-4 .1z"
-  }))))));
-}
-
 var _path$4;
 
 function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
@@ -27434,6 +27692,7 @@ exports.ShopPurchaseButton = ShopPurchaseButton;
 exports.ShopSelectProductButton = ShopSelectProductButton;
 exports.ShopView = ShopView;
 exports.SubmitPaymentMethod = SubmitPaymentMethod;
+exports.SubscriptionCancelModal = SubscriptionCancelModal;
 exports.SubscriptionCreateContainer = SubscriptionCreateContainer;
 exports.SubscriptionCreateModal = SubscriptionCreateModal;
 exports.SubscriptionCreateView = SubscriptionCreateView;