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

package/dist/index.esm.js

@@ -6945,7 +6945,7 @@ class PelcroActions {
         view,
         cartItems,
         ...otherStateFields
-      } = initialState$k;
+      } = initialState$l;
       this.set(otherStateFields);
     });
 
@@ -7281,7 +7281,7 @@ class PelcroCallbacks {
 
 }
 
-const initialState$k = {
+const initialState$l = {
   // View
   view: null,
   // Plans
@@ -7311,7 +7311,7 @@ const createPelcroStore = () => createStore(middleware_3((set, get) => {
   return {
     // Store setter
     set,
-    ...initialState$k,
+    ...initialState$l,
     // State actions
     ...actions,
     // Callbacks
@@ -10507,8 +10507,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,
@@ -10519,10 +10520,10 @@ const initialState$j = {
     content: ""
   }
 };
-const store$j = /*#__PURE__*/createContext(initialState$j);
+const store$k = /*#__PURE__*/createContext(initialState$k);
 const {
-  Provider: Provider$j
-} = store$j;
+  Provider: Provider$k
+} = store$k;
 
 const LoginContainer = ({
   style,
@@ -10629,7 +10630,7 @@ const LoginContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$j;
+        return initialState$k;
 
       case DISABLE_LOGIN_BUTTON:
         return lib_7({ ...state,
@@ -10647,12 +10648,12 @@ const LoginContainer = ({
       default:
         return state;
     }
-  }, initialState$j);
+  }, initialState$k);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-login-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$j, {
+  }, /*#__PURE__*/React__default.createElement(Provider$k, {
     value: {
       state,
       dispatch
@@ -10660,12 +10661,12 @@ const LoginContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$j,
+        store: store$k,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$j
+    store: store$k
   })));
 };
 
@@ -10923,7 +10924,7 @@ const LoginButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$j);
+  } = useContext(store$k);
   const {
     t
   } = useTranslation("login");
@@ -10981,11 +10982,11 @@ const LoginRequestLoginToken = ({
 };
 
 const LoginEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$j
+  store: store$k
 }, props));
 
 const LoginPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$j
+  store: store$k
 }, props));
 
 var _path$q;
@@ -11062,7 +11063,7 @@ var facebookLoginRenderProps = createCommonjsModule(function (module, exports) {
 var FacebookLogin = unwrapExports(facebookLoginRenderProps);
 facebookLoginRenderProps.FacebookLogin;
 
-const initialState$i = {
+const initialState$j = {
   email: "",
   password: "",
   emailError: null,
@@ -11079,10 +11080,10 @@ const initialState$i = {
     content: ""
   }
 };
-const store$i = /*#__PURE__*/createContext(initialState$i);
+const store$j = /*#__PURE__*/createContext(initialState$j);
 const {
-  Provider: Provider$i
-} = store$i;
+  Provider: Provider$j
+} = store$j;
 
 const RegisterContainer = ({
   style,
@@ -11265,7 +11266,7 @@ const RegisterContainer = ({
         });
 
       case RESET_LOGIN_FORM:
-        return initialState$i;
+        return initialState$j;
 
       case DISABLE_REGISTRATION_BUTTON:
         return lib_7({ ...state,
@@ -11283,12 +11284,12 @@ const RegisterContainer = ({
       default:
         return state;
     }
-  }, initialState$i);
+  }, initialState$j);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-register-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$i, {
+  }, /*#__PURE__*/React__default.createElement(Provider$j, {
     value: {
       state,
       dispatch
@@ -11296,12 +11297,12 @@ const RegisterContainer = ({
   }, children.length ? children.map((child, i) => {
     if (child) {
       return /*#__PURE__*/React__default.cloneElement(child, {
-        store: store$i,
+        store: store$j,
         key: i
       });
     }
   }) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$i
+    store: store$j
   })));
 };
 /**
@@ -11341,10 +11342,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
-  } = useContext(store$j);
+  } = useContext(store$k);
   const {
     dispatch: registerDispatch
-  } = useContext(store$i);
+  } = useContext(store$j);
 
   const onSuccess = facebookUser => {
     loginDispatch === null || loginDispatch === void 0 ? void 0 : loginDispatch({
@@ -11431,10 +11432,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
-  } = useContext(store$j);
+  } = useContext(store$k);
   const {
     dispatch: registerDispatch
-  } = useContext(store$i);
+  } = useContext(store$j);
 
   const onSuccess = response => {
     var _response$getAuthResp, _profile$getEmail, _profile$getGivenName, _profile$getFamilyNam, _profile$getEmail2, _profile$getGivenName2, _profile$getFamilyNam2;
@@ -11530,10 +11531,10 @@ const Auth0LoginButton = ({
   }, [auth0Enabled, auth0Loaded]);
   const {
     dispatch: loginDispatch
-  } = useContext(store$j);
+  } = useContext(store$k);
   const {
     dispatch: registerDispatch
-  } = useContext(store$i);
+  } = useContext(store$j);
 
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
@@ -11830,11 +11831,11 @@ function LoginModal({
 LoginModal.viewId = "login";
 
 const RegisterEmail = props => /*#__PURE__*/React__default.createElement(Email, Object.assign({
-  store: store$i
+  store: store$j
 }, props));
 
 const RegisterPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
-  store: store$i
+  store: store$j
 }, props));
 
 const RegisterButton = ({
@@ -11854,7 +11855,7 @@ const RegisterButton = ({
       buttonDisabled
     },
     dispatch
-  } = useContext(store$i);
+  } = useContext(store$j);
   const {
     t
   } = useTranslation("register");
@@ -11992,7 +11993,7 @@ function FirstName({
 }
 
 const RegisterFirstName = props => /*#__PURE__*/React__default.createElement(FirstName, Object.assign({
-  store: store$i
+  store: store$j
 }, props));
 
 function LastName({
@@ -12023,7 +12024,7 @@ function LastName({
 }
 
 const RegisterLastName = props => /*#__PURE__*/React__default.createElement(LastName, Object.assign({
-  store: store$i
+  store: store$j
 }, props));
 
 /**
@@ -12147,7 +12148,7 @@ function TextInput({
 
 const RegisterTextInput = props => {
   return /*#__PURE__*/React__default.createElement(TextInput, Object.assign({}, props, {
-    store: store$i
+    store: store$j
   }));
 };
 
@@ -14491,7 +14492,7 @@ class VantivGateway {
 
 /** @type {PaymentStateType} */
 
-const initialState$h = {
+const initialState$i = {
   disableSubmit: false,
   isLoading: false,
   disableCouponButton: false,
@@ -14510,10 +14511,10 @@ const initialState$h = {
     content: ""
   }
 };
-const store$h = /*#__PURE__*/createContext(initialState$h);
+const store$i = /*#__PURE__*/createContext(initialState$i);
 const {
-  Provider: Provider$h
-} = store$h;
+  Provider: Provider$i
+} = store$i;
 
 const PaymentMethodContainerWithoutStripe = ({
   style,
@@ -15765,21 +15766,21 @@ const PaymentMethodContainerWithoutStripe = ({
       default:
         return state;
     }
-  }, initialState$h);
+  }, initialState$i);
   return /*#__PURE__*/React__default.createElement("div", {
     style: { ...style
     },
     className: `pelcro-container pelcro-payment-container ${className}`
-  }, /*#__PURE__*/React__default.createElement(Provider$h, {
+  }, /*#__PURE__*/React__default.createElement(Provider$i, {
     value: {
       state,
       dispatch
     }
   }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
-    store: store$h,
+    store: store$i,
     key: i
   })) : /*#__PURE__*/React__default.cloneElement(children, {
-    store: store$h
+    store: store$i
   })));
 };
 
@@ -15801,7 +15802,7 @@ const PaymentMethodContainer = props => {
       stripeAccount: window.Pelcro.site.read().account_id,
       locale: getPageOrDefaultLanguage()
     }, /*#__PURE__*/React__default.createElement(es_11, null, /*#__PURE__*/React__default.createElement(UnwrappedForm, Object.assign({
-      store: store$h
+      store: store$i
     }, props))));
   }
 
@@ -15854,7 +15855,7 @@ const PelcroPaymentRequestButton = props => {
       currentPlan,
       updatedPrice
     }
-  } = useContext(store$h);
+  } = useContext(store$i);
 
   const updatePaymentRequest = () => {
     // Make sure payment request is up to date, eg. user added a coupon code.
@@ -15930,7 +15931,7 @@ const DiscountedPrice = props => {
       taxAmount,
       percentOff
     }
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     order,
     plan
@@ -15980,7 +15981,7 @@ const SubmitPaymentMethod = ({
       isLoading,
       updatedPrice
     }
-  } = useContext(store$h);
+  } = 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());
@@ -16030,7 +16031,7 @@ const ApplyCouponButton = ({
       disableCouponButton
     },
     dispatch
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -16064,7 +16065,7 @@ const CouponCodeField = props => {
       couponCode,
       couponError
     }
-  } = useContext(store$h);
+  } = useContext(store$i);
 
   const onCouponCodeChange = e => {
     dispatch({
@@ -16120,7 +16121,7 @@ const CouponCode = ({
     state: {
       enableCouponField
     }
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     t
   } = useTranslation("checkoutForm");
@@ -16377,7 +16378,7 @@ const PaypalSubscribeButton = props => {
   const {
     dispatch,
     state
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     product,
     plan,
@@ -16510,7 +16511,7 @@ const SelectedPaymentMethod = () => {
     state: {
       isLoading
     }
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     switchView,
     selectedPaymentMethodId
@@ -16552,7 +16553,7 @@ const TaxAmount = () => {
     state: {
       taxAmount
     }
-  } = useContext(store$h);
+  } = useContext(store$i);
   const {
     plan
   } = usePelcro();
@@ -16716,12 +16717,363 @@ function SubscriptionRenewModal({
 }
 SubscriptionRenewModal.viewId = "subscription-renew";
 
+const initialState$h = {
+  cancelationReason: ""
+};
+const store$h = /*#__PURE__*/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.createElement("div", {
+    style: { ...style
+    },
+    className: `pelcro-container pelcro-subscription-cancel-container ${className}`
+  }, /*#__PURE__*/React__default.createElement(Provider$h, {
+    value: {
+      state,
+      dispatch
+    }
+  }, children.length ? children.map((child, i) => /*#__PURE__*/React__default.cloneElement(child, {
+    store: store$h,
+    key: i
+  })) : /*#__PURE__*/React__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.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.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.createElement("div", {
+    className: `plc-flex pelcro-tooltip-container plc-text-gray-600 ${className}`
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "pelcro-tooltip-icon"
+  }, /*#__PURE__*/React__default.createElement(SvgInfoCircle, null)), /*#__PURE__*/React__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.createElement("div", {
+    className: `pelcro-input-wrapper ${wrapperClassName}`
+  }, /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: `pelcro-input-label plc-flex plc-items-center ${labelClassName}`
+  }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default.createElement(Tooltip, {
+    value: tooltipText,
+    className: "plc-ml-1"
+  })), /*#__PURE__*/React__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.createElement("p", {
+    id: errorId,
+    "aria-live": "assertive",
+    className: `pelcro-input-error ${errorClassName}`
+  }, error));
+}
+
+const SubscriptionCancelReason = props => {
+  const {
+    t
+  } = useTranslation("subscriptionCancel");
+  const {
+    dispatch,
+    state
+  } = useContext(store$h);
+
+  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 _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.createElement("svg", _extends$j({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 100 125",
+    fill: "currentColor"
+  }, props), _switch || (_switch = /*#__PURE__*/React.createElement("switch", null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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.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.createElement("g", null, /*#__PURE__*/React.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.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
+  } = 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.createElement(Button, {
+    onClick: handleCancelNowClick,
+    className: `${className}`
+  }, t("messages.cancelNow"));
+};
+
+const SubscriptionCancelLaterButton = ({
+  subscription,
+  onClick,
+  className
+}) => {
+  const {
+    switchView
+  } = usePelcro();
+  const {
+    state: {
+      cancelationReason
+    },
+    dispatch
+  } = 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.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("div", {
+    className: "plc-mb-6 plc-text-center plc-text-gray-900 pelcro-title-wrapper"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "plc-text-2xl plc-font-semibold"
+  }, t("labels.title"), /*#__PURE__*/React__default.createElement("span", {
+    className: "plc-text-gray-400 plc-text-base plc-block"
+  }, "(", subscriptionToCancel.plan.nickname, ")"))), /*#__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
+  }), /*#__PURE__*/React__default.createElement(SubscriptionCancelLaterButton, {
+    subscription: subscriptionToCancel
+  }))));
+};
+
+const SubscriptionCancelModal = ({
+  onDisplay,
+  onClose,
+  ...otherProps
+}) => {
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    onDisplay: onDisplay,
+    onClose: onClose,
+    id: "pelcro-subscription-cancel-modal"
+  }, /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(SubscriptionCancelView, otherProps)), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__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.createElement("svg", _extends$i({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     fill: "none",
     stroke: "currentColor",
@@ -16730,7 +17082,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.createElement("path", {
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.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"
   })));
 }
@@ -17685,17 +18037,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.createElement("svg", _extends$j({
+  return /*#__PURE__*/React.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.createElement("path", {
+  }, props), _path$g || (_path$g = /*#__PURE__*/React.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"
   })));
 }
@@ -21104,42 +21456,6 @@ const GiftCreateLastName = props => /*#__PURE__*/React__default.createElement(La
   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.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.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.createElement("div", {
-    className: `plc-flex pelcro-tooltip-container plc-text-gray-600 ${className}`
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "pelcro-tooltip-icon"
-  }, /*#__PURE__*/React__default.createElement(SvgInfoCircle, null)), /*#__PURE__*/React__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,
@@ -21208,44 +21524,6 @@ const GiftCreateStartDate = props => {
   }, props));
 };
 
-/**
- *
- */
-
-function TextArea({
-  label = "",
-  tooltipText,
-  required,
-  id,
-  errorId,
-  error,
-  className = "",
-  labelClassName = "",
-  errorClassName = "",
-  wrapperClassName = "",
-  ...otherProps
-}) {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: `pelcro-input-wrapper ${wrapperClassName}`
-  }, /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: id,
-    className: `pelcro-input-label plc-flex plc-items-center ${labelClassName}`
-  }, `${label}${required ? "*" : ""}`, tooltipText && /*#__PURE__*/React__default.createElement(Tooltip, {
-    value: tooltipText,
-    className: "plc-ml-1"
-  })), /*#__PURE__*/React__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.createElement("p", {
-    id: errorId,
-    "aria-live": "assertive",
-    className: `pelcro-input-error ${errorClassName}`
-  }, error));
-}
-
 /**
  *
  */
@@ -22127,8 +22405,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];
 
@@ -22142,7 +22420,7 @@ function _extends$h() {
     return target;
   };
 
-  return _extends$h.apply(this, arguments);
+  return _extends$g.apply(this, arguments);
 }
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -22326,7 +22604,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'
@@ -22854,7 +23132,7 @@ function TransitionChild(props) {
   var passthroughProps = rest;
   return React__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) {
@@ -22898,7 +23176,7 @@ function Transition(props) {
     value: nestingBag
   }, React__default.createElement(TransitionContext.Provider, {
     value: transitionBag
-  }, render(_extends$h({}, sharedProps, {
+  }, render(_extends$g({}, sharedProps, {
     as: Fragment,
     children: React__default.createElement(TransitionChild, Object.assign({}, sharedProps, passthroughProps))
   }), propsBag, Fragment, TransitionChildRenderFeatures, state === TreeStates.Visible)));
@@ -23025,12 +23303,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) {
@@ -23049,7 +23327,7 @@ var ActionTypes;
     }
   });
   if (state.searchQuery === '' && state.activeItemIndex === activeItemIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     searchQuery: '',
     activeItemIndex: activeItemIndex
   });
@@ -23060,19 +23338,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
@@ -23085,7 +23363,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;
@@ -23124,19 +23402,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) {
@@ -23157,7 +23435,7 @@ var ActionTypes$1;
     }
   });
   if (state.searchQuery === '' && state.activeOptionIndex === activeOptionIndex) return state;
-  return _extends$h({}, state, {
+  return _extends$g({}, state, {
     searchQuery: '',
     activeOptionIndex: activeOptionIndex
   });
@@ -23170,10 +23448,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
   });
@@ -23181,11 +23459,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
@@ -23198,7 +23476,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;
@@ -23261,10 +23539,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.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23488,10 +23766,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.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     className: "plc-w-4 plc-h-4 plc-mr-1",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23507,10 +23785,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.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.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",
@@ -23524,10 +23802,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.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     className: "plc-w-5 plc-h-5",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23543,10 +23821,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.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.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",
@@ -23856,10 +24134,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.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     className: "plc-w-6 plc-h-6",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23875,10 +24153,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.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -23893,10 +24171,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.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-5 plc-w-5",
     fill: "none",
@@ -23912,10 +24190,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.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     className: "plc-h-6 plc-w-6 plc-mr-2",
     fill: "none",
@@ -23931,10 +24209,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.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23950,10 +24228,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.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     className: "plc-w-6 plc-h-6 plc-mr-2",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
@@ -23972,26 +24250,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.createElement("svg", _extends$5({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 100 125",
-    fill: "currentColor"
-  }, props), _switch || (_switch = /*#__PURE__*/React.createElement("switch", null, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.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.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.createElement("g", null, /*#__PURE__*/React.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.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); }
@@ -27224,4 +27482,4 @@ const InvoiceDetailsModal = ({
 };
 InvoiceDetailsModal.viewId = "invoice-details";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, TaxAmount, TextArea, Tooltip, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify, unauthenticatedButtons, usePelcro };