@pelcro/react-pelcro-js 3.22.0-beta.20 → 3.22.0-beta.22

package/dist/index.cjs.js

@@ -3459,7 +3459,8 @@ var labels$14 = {
 	lastName: "Last name",
 	phone: "Phone",
 	freeItems: "Free Items",
-	email: "Email"
+	email: "Email",
+	password: "Password"
 };
 var checkoutForm_en = {
 	messages: messages$18,
@@ -4455,7 +4456,8 @@ var labels$K = {
 	lastName: "Nom de famille",
 	phone: "Téléphoner",
 	freeItems: "Articles gratuits",
-	email: "Courriel"
+	email: "Courriel",
+	password: "Créer un mot de passe"
 };
 var checkoutForm_fr = {
 	messages: messages$P,
@@ -5336,7 +5338,8 @@ var labels$u = {
 	lastName: "성",
 	phone: "핸드폰",
 	freeItems: "무료 아이템",
-	email: "이메일"
+	email: "이메일",
+	password: "비밀번호"
 };
 var checkoutForm_ko = {
 	messages: messages$x,
@@ -6322,7 +6325,8 @@ var labels$e = {
 	lastName: "Apellido",
 	phone: "Teléfono",
 	freeItems: "Artículos gratis",
-	email: "Correo"
+	email: "Correo",
+	password: "Contraseña"
 };
 var checkoutForm_es = {
 	messages: messages$f,
@@ -9146,17 +9150,6 @@ function notifyBugsnag(callback, startOptions) {
   callback();
 }
 
-//create a safe and strong password string with special characters
-function generatePassword() {
-  const length = 16;
-  const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+{}|:<>?`~";
-  let retVal = "";
-  for (let i = 0, n = charset.length; i < length; ++i) {
-    retVal += charset.charAt(Math.floor(Math.random() * n));
-  }
-  return retVal;
-}
-
 const resources = {
   en: {
     common: common_en,
@@ -14505,7 +14498,9 @@ class SelectModal extends React.Component {
       const userDidSelectProduct = Boolean(this.state.mode === "plan");
       const productsToShow = userDidSelectProduct ? [this.state.product] : this.state.productList;
       return productsToShow.map((product, index) => {
-        return this.renderOneProduct(product, index);
+        if (product.plans.filter(plan => plan.type === "regular").length > 0) {
+          return this.renderOneProduct(product, index);
+        }
       });
     });
     _defineProperty$3(this, "renderMatchingProductsFirst", () => {
@@ -14799,6 +14794,14 @@ class DonationModal extends React.Component {
         });
       }
     });
+    _defineProperty$3(this, "componentDidUpdate", (prevProps, prevState) => {
+      var _this$state$planList;
+      if (((_this$state$planList = this.state.planList) === null || _this$state$planList === void 0 ? void 0 : _this$state$planList.length) === 1 && this.state.plan !== this.state.planList[0]) {
+        this.setState({
+          plan: this.state.planList[0]
+        });
+      }
+    });
     _defineProperty$3(this, "componentWillUnmount", () => {
       document.removeEventListener("keydown", this.handleSubmit);
     });
@@ -14852,9 +14855,7 @@ class DonationModal extends React.Component {
         className: "plc-text-xs pelcro-select-product-description"
       }, product.description)), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "plc-flex plc-items-end plc-w-full plc-mt-3"
-      }, product.plans && /*#__PURE__*/React__default['default'].createElement("p", {
-        className: "plc-w-1/2 plc-text-xs pelcro-select-product-cost"
-      }, this.locale("labels.startingAt"), " ", this.countStartPrice(product.plans)), /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
+      }, /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
@@ -14985,13 +14986,15 @@ class DonationModal extends React.Component {
       for (const product of this.state.productList) {
         if (+product.id === +id) {
           var _this$state$plan;
+          const planList = product.plans.filter(plan => plan.type === "donation");
+          if (planList.length === 1) {
+            this.setState({
+              plan: planList[0]
+            });
+          }
           this.setState({
-            product: product
-          });
-          this.setState({
-            planList: product.plans.filter(plan => plan.type === "donation")
-          });
-          this.setState({
+            product: product,
+            planList: planList,
             mode: "plan"
           });
           const isSelectedPlanPartOfThisProduct = ((_this$state$plan = this.state.plan) === null || _this$state$plan === void 0 ? void 0 : _this$state$plan.product_id) === Number(product.id);
@@ -15030,7 +15033,7 @@ class DonationModal extends React.Component {
         mode: "product"
       });
     });
-    _defineProperty$3(this, "submitOption", signUpFirst => {
+    _defineProperty$3(this, "submitOption", () => {
       this.props.setProductAndPlan(this.state.product, this.state.plan, this.state.isGift, this.state.selectedDonationAmount, this.state.customDonationAmount);
       const {
         product,
@@ -15044,7 +15047,7 @@ class DonationModal extends React.Component {
         switchToAddressView,
         switchToPaymentView
       } = usePelcro.getStore();
-      if (!isAuthenticated && product.address_required || !isAuthenticated && signUpFirst) {
+      if (!isAuthenticated && product.address_required) {
         return setView("register");
       }
 
@@ -15076,7 +15079,7 @@ class DonationModal extends React.Component {
     this.closeButton = window.Pelcro.paywall.displayCloseButton();
   }
   render() {
-    var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r, _this$state$product;
+    var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r;
     this.props;
     if (this.state.mode === "product") {
       var _ReactGA$event;
@@ -15107,26 +15110,9 @@ class DonationModal extends React.Component {
       className: "pelcro-select-products-wrapper"
     }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
       className: "plc-overflow-y-scroll pelcro-select-plans-wrapper"
-    }, this.renderPlans()), !window.Pelcro.user.isAuthenticated() && (_this$state$product = this.state.product) !== null && _this$state$product !== void 0 && _this$state$product.address_required ? /*#__PURE__*/React__default['default'].createElement(Button, {
+    }, this.renderPlans()), /*#__PURE__*/React__default['default'].createElement(Button, {
       disabled: this.state.disabled,
-      onClick: () => this.submitOption(true),
-      id: "pelcro-submit",
-      className: "plc-w-full plc-mt-2"
-    }, this.locale("buttons.signupAndDonate")) : !window.Pelcro.user.isAuthenticated() ? /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "plc-flex plc-items-center plc-mt-2"
-    }, /*#__PURE__*/React__default['default'].createElement(Button, {
-      disabled: this.state.disabled,
-      onClick: () => this.submitOption(true),
-      id: "pelcro-submit",
-      className: "plc-flex-1 plc-mr-2"
-    }, this.locale("buttons.signupAndDonate")), /*#__PURE__*/React__default['default'].createElement(Button, {
-      disabled: this.state.disabled,
-      onClick: () => this.submitOption(false),
-      id: "pelcro-submit",
-      className: "plc-flex-1 pelcro-button-outline"
-    }, this.locale("buttons.donate"))) : /*#__PURE__*/React__default['default'].createElement(Button, {
-      disabled: this.state.disabled,
-      onClick: () => this.submitOption(false),
+      onClick: () => this.submitOption(),
       id: "pelcro-submit",
       className: "plc-w-full plc-mt-2"
     }, this.locale("buttons.donate"))))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null, /*#__PURE__*/React__default['default'].createElement(Authorship, null)));
@@ -17345,12 +17331,14 @@ const initialState$k = {
   lastName: "",
   phone: "",
   email: "",
+  password: "",
   firstNameError: null,
   lastNameError: null,
   phoneError: null,
   emailError: null,
   month: "",
   year: "",
+  passwordError: null,
   alert: {
     type: "error",
     content: ""
@@ -17386,7 +17374,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     couponCode,
     selectedDonationAmount,
     customDonationAmount,
-    isAuthenticated
+    isAuthenticated,
+    switchView
   } = usePelcro();
   const {
     whenUserReady
@@ -18884,7 +18873,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const sendRegisterRequest = (state, callback) => {
     window.Pelcro.user.register({
       email: state.email,
-      password: generatePassword()
+      password: state.password
     }, (err, res) => {
       if (err) {
         var _err$response, _err$response$data;
@@ -18895,11 +18884,20 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         err.response.data.errors = {
           ...errors
         };
+        let errorContent;
+        if (getErrorMessages(err) === "This email is already in use.") {
+          errorContent = /*#__PURE__*/React__default['default'].createElement("p", null, "This email is already in use.", " ", /*#__PURE__*/React__default['default'].createElement("button", {
+            className: "plc-font-bold plc-underline hover:plc-no-underline",
+            onClick: () => switchView("login")
+          }, "Login to continue"));
+        } else {
+          errorContent = getErrorMessages(err);
+        }
         dispatch({
           type: SHOW_ALERT,
           payload: {
             type: "error",
-            content: getErrorMessages(err)
+            content: errorContent
           }
         });
         dispatch({
@@ -19335,6 +19333,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           emailError: action.payload,
           email: ""
         });
+      case SET_PASSWORD_ERROR:
+        return lib_7({
+          ...state,
+          passwordError: action.payload,
+          password: ""
+        });
       case SHOW_ALERT:
         return lib_7({
           ...state,
@@ -19688,6 +19692,7 @@ const SubmitPaymentMethod = _ref => {
       lastNameError,
       phoneError,
       emailError,
+      passwordError,
       firstName,
       lastName,
       phone,
@@ -19698,12 +19703,6 @@ const SubmitPaymentMethod = _ref => {
   } = React.useContext(store$k);
   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?.currency,
-  //   getPageOrDefaultLanguage()
-  // );
-
   const priceFormatted = plan.type === "donation" && (selectedDonationAmount || customDonationAmount) ? getFormattedPriceByLocal(selectedDonationAmount ? selectedDonationAmount * (plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity2 = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity2 !== void 0 ? _plan$quantity2 : 1) : customDonationAmount * (plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity3 = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity3 !== void 0 ? _plan$quantity3 : 1), plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage()) : getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
   const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
   const isUserFirstName = Boolean(window.Pelcro.user.read().first_name);
@@ -19714,9 +19713,9 @@ const SubmitPaymentMethod = _ref => {
     if (supportsTap && isUserFirstName && isUserLastName && isUserPhone) {
       setDisabled(disableSubmit);
     } else {
-      setDisabled(disableSubmit || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length) || emailError);
+      setDisabled(disableSubmit || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length) || emailError || passwordError);
     }
-  }, [disableSubmit, firstNameError, lastNameError, phoneError, firstName, lastName, phone, emailError]);
+  }, [disableSubmit, firstNameError, lastNameError, phoneError, firstName, lastName, phone, emailError, passwordError]);
   return /*#__PURE__*/React__default['default'].createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
@@ -20355,6 +20354,10 @@ const DonationEmail = props => /*#__PURE__*/React__default['default'].createElem
   store: store$k
 }, props));
 
+const DonationPassword = props => /*#__PURE__*/React__default['default'].createElement(Password, Object.assign({
+  store: store$k
+}, props));
+
 /**
  *
  */
@@ -20435,13 +20438,18 @@ function PaymentMethodView(_ref) {
     errorId: "pelcro-input-phone-error",
     label: t("labels.phone"),
     required: true
-  })), !isAuthenticated() && (plan === null || plan === void 0 ? void 0 : plan.type) === "donation" && /*#__PURE__*/React__default['default'].createElement(DonationEmail, {
+  })), !isAuthenticated() && (plan === null || plan === void 0 ? void 0 : plan.type) === "donation" && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(DonationEmail, {
     id: "pelcro-input-email",
     errorId: "pelcro-input-email-error",
     label: t("labels.email"),
     required: true,
     autoFocus: true
-  }), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
+  }), /*#__PURE__*/React__default['default'].createElement(DonationPassword, {
+    id: "pelcro-input-password",
+    errorId: "pelcro-input-password-error",
+    label: t("labels.password"),
+    required: true
+  })), /*#__PURE__*/React__default['default'].createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
@@ -29047,6 +29055,7 @@ const DonationsMenu = _ref => {
     setSubscriptionToCancel
   } = usePelcro();
   const donations = getDonationSubs().sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
+    console.log("Sub", sub);
     // Cancel button click handlers
     const onCancelClick = () => {
       const isImmediateCancelationEnabled = window.Pelcro.site.read().cancel_settings.status;

package/dist/index.esm.js

@@ -3429,7 +3429,8 @@ var labels$14 = {
 	lastName: "Last name",
 	phone: "Phone",
 	freeItems: "Free Items",
-	email: "Email"
+	email: "Email",
+	password: "Password"
 };
 var checkoutForm_en = {
 	messages: messages$18,
@@ -4425,7 +4426,8 @@ var labels$K = {
 	lastName: "Nom de famille",
 	phone: "Téléphoner",
 	freeItems: "Articles gratuits",
-	email: "Courriel"
+	email: "Courriel",
+	password: "Créer un mot de passe"
 };
 var checkoutForm_fr = {
 	messages: messages$P,
@@ -5306,7 +5308,8 @@ var labels$u = {
 	lastName: "성",
 	phone: "핸드폰",
 	freeItems: "무료 아이템",
-	email: "이메일"
+	email: "이메일",
+	password: "비밀번호"
 };
 var checkoutForm_ko = {
 	messages: messages$x,
@@ -6292,7 +6295,8 @@ var labels$e = {
 	lastName: "Apellido",
 	phone: "Teléfono",
 	freeItems: "Artículos gratis",
-	email: "Correo"
+	email: "Correo",
+	password: "Contraseña"
 };
 var checkoutForm_es = {
 	messages: messages$f,
@@ -9116,17 +9120,6 @@ function notifyBugsnag(callback, startOptions) {
   callback();
 }
 
-//create a safe and strong password string with special characters
-function generatePassword() {
-  const length = 16;
-  const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+{}|:<>?`~";
-  let retVal = "";
-  for (let i = 0, n = charset.length; i < length; ++i) {
-    retVal += charset.charAt(Math.floor(Math.random() * n));
-  }
-  return retVal;
-}
-
 const resources = {
   en: {
     common: common_en,
@@ -14475,7 +14468,9 @@ class SelectModal extends Component {
       const userDidSelectProduct = Boolean(this.state.mode === "plan");
       const productsToShow = userDidSelectProduct ? [this.state.product] : this.state.productList;
       return productsToShow.map((product, index) => {
-        return this.renderOneProduct(product, index);
+        if (product.plans.filter(plan => plan.type === "regular").length > 0) {
+          return this.renderOneProduct(product, index);
+        }
       });
     });
     _defineProperty$3(this, "renderMatchingProductsFirst", () => {
@@ -14769,6 +14764,14 @@ class DonationModal extends Component {
         });
       }
     });
+    _defineProperty$3(this, "componentDidUpdate", (prevProps, prevState) => {
+      var _this$state$planList;
+      if (((_this$state$planList = this.state.planList) === null || _this$state$planList === void 0 ? void 0 : _this$state$planList.length) === 1 && this.state.plan !== this.state.planList[0]) {
+        this.setState({
+          plan: this.state.planList[0]
+        });
+      }
+    });
     _defineProperty$3(this, "componentWillUnmount", () => {
       document.removeEventListener("keydown", this.handleSubmit);
     });
@@ -14822,9 +14825,7 @@ class DonationModal extends Component {
         className: "plc-text-xs pelcro-select-product-description"
       }, product.description)), /*#__PURE__*/React__default.createElement("div", {
         className: "plc-flex plc-items-end plc-w-full plc-mt-3"
-      }, product.plans && /*#__PURE__*/React__default.createElement("p", {
-        className: "plc-w-1/2 plc-text-xs pelcro-select-product-cost"
-      }, this.locale("labels.startingAt"), " ", this.countStartPrice(product.plans)), /*#__PURE__*/React__default.createElement(Button, Object.assign({
+      }, /*#__PURE__*/React__default.createElement(Button, Object.assign({
         onClick: productButtonCallback,
         "data-key": product.id,
         id: "pelcro-select-product-back-button",
@@ -14955,13 +14956,15 @@ class DonationModal extends Component {
       for (const product of this.state.productList) {
         if (+product.id === +id) {
           var _this$state$plan;
+          const planList = product.plans.filter(plan => plan.type === "donation");
+          if (planList.length === 1) {
+            this.setState({
+              plan: planList[0]
+            });
+          }
           this.setState({
-            product: product
-          });
-          this.setState({
-            planList: product.plans.filter(plan => plan.type === "donation")
-          });
-          this.setState({
+            product: product,
+            planList: planList,
             mode: "plan"
           });
           const isSelectedPlanPartOfThisProduct = ((_this$state$plan = this.state.plan) === null || _this$state$plan === void 0 ? void 0 : _this$state$plan.product_id) === Number(product.id);
@@ -15000,7 +15003,7 @@ class DonationModal extends Component {
         mode: "product"
       });
     });
-    _defineProperty$3(this, "submitOption", signUpFirst => {
+    _defineProperty$3(this, "submitOption", () => {
       this.props.setProductAndPlan(this.state.product, this.state.plan, this.state.isGift, this.state.selectedDonationAmount, this.state.customDonationAmount);
       const {
         product,
@@ -15014,7 +15017,7 @@ class DonationModal extends Component {
         switchToAddressView,
         switchToPaymentView
       } = usePelcro.getStore();
-      if (!isAuthenticated && product.address_required || !isAuthenticated && signUpFirst) {
+      if (!isAuthenticated && product.address_required) {
         return setView("register");
       }
 
@@ -15046,7 +15049,7 @@ class DonationModal extends Component {
     this.closeButton = window.Pelcro.paywall.displayCloseButton();
   }
   render() {
-    var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r, _this$state$product;
+    var _window$Pelcro$produc2, _window$Pelcro$produc3, _window$Pelcro$site$r;
     this.props;
     if (this.state.mode === "product") {
       var _ReactGA$event;
@@ -15077,26 +15080,9 @@ class DonationModal extends Component {
       className: "pelcro-select-products-wrapper"
     }, (_window$Pelcro$site$r = window.Pelcro.site.read()) !== null && _window$Pelcro$site$r !== void 0 && _window$Pelcro$site$r.restrictive_paywall_metatags_enabled ? this.renderMatchingProductsFirst() : this.renderProducts()), this.state.mode === "plan" && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       className: "plc-overflow-y-scroll pelcro-select-plans-wrapper"
-    }, this.renderPlans()), !window.Pelcro.user.isAuthenticated() && (_this$state$product = this.state.product) !== null && _this$state$product !== void 0 && _this$state$product.address_required ? /*#__PURE__*/React__default.createElement(Button, {
+    }, this.renderPlans()), /*#__PURE__*/React__default.createElement(Button, {
       disabled: this.state.disabled,
-      onClick: () => this.submitOption(true),
-      id: "pelcro-submit",
-      className: "plc-w-full plc-mt-2"
-    }, this.locale("buttons.signupAndDonate")) : !window.Pelcro.user.isAuthenticated() ? /*#__PURE__*/React__default.createElement("div", {
-      className: "plc-flex plc-items-center plc-mt-2"
-    }, /*#__PURE__*/React__default.createElement(Button, {
-      disabled: this.state.disabled,
-      onClick: () => this.submitOption(true),
-      id: "pelcro-submit",
-      className: "plc-flex-1 plc-mr-2"
-    }, this.locale("buttons.signupAndDonate")), /*#__PURE__*/React__default.createElement(Button, {
-      disabled: this.state.disabled,
-      onClick: () => this.submitOption(false),
-      id: "pelcro-submit",
-      className: "plc-flex-1 pelcro-button-outline"
-    }, this.locale("buttons.donate"))) : /*#__PURE__*/React__default.createElement(Button, {
-      disabled: this.state.disabled,
-      onClick: () => this.submitOption(false),
+      onClick: () => this.submitOption(),
       id: "pelcro-submit",
       className: "plc-w-full plc-mt-2"
     }, this.locale("buttons.donate"))))), /*#__PURE__*/React__default.createElement(ModalFooter, null, /*#__PURE__*/React__default.createElement(Authorship, null)));
@@ -17315,12 +17301,14 @@ const initialState$k = {
   lastName: "",
   phone: "",
   email: "",
+  password: "",
   firstNameError: null,
   lastNameError: null,
   phoneError: null,
   emailError: null,
   month: "",
   year: "",
+  passwordError: null,
   alert: {
     type: "error",
     content: ""
@@ -17356,7 +17344,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     couponCode,
     selectedDonationAmount,
     customDonationAmount,
-    isAuthenticated
+    isAuthenticated,
+    switchView
   } = usePelcro();
   const {
     whenUserReady
@@ -18854,7 +18843,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const sendRegisterRequest = (state, callback) => {
     window.Pelcro.user.register({
       email: state.email,
-      password: generatePassword()
+      password: state.password
     }, (err, res) => {
       if (err) {
         var _err$response, _err$response$data;
@@ -18865,11 +18854,20 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         err.response.data.errors = {
           ...errors
         };
+        let errorContent;
+        if (getErrorMessages(err) === "This email is already in use.") {
+          errorContent = /*#__PURE__*/React__default.createElement("p", null, "This email is already in use.", " ", /*#__PURE__*/React__default.createElement("button", {
+            className: "plc-font-bold plc-underline hover:plc-no-underline",
+            onClick: () => switchView("login")
+          }, "Login to continue"));
+        } else {
+          errorContent = getErrorMessages(err);
+        }
         dispatch({
           type: SHOW_ALERT,
           payload: {
             type: "error",
-            content: getErrorMessages(err)
+            content: errorContent
           }
         });
         dispatch({
@@ -19305,6 +19303,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
           emailError: action.payload,
           email: ""
         });
+      case SET_PASSWORD_ERROR:
+        return lib_7({
+          ...state,
+          passwordError: action.payload,
+          password: ""
+        });
       case SHOW_ALERT:
         return lib_7({
           ...state,
@@ -19658,6 +19662,7 @@ const SubmitPaymentMethod = _ref => {
       lastNameError,
       phoneError,
       emailError,
+      passwordError,
       firstName,
       lastName,
       phone,
@@ -19668,12 +19673,6 @@ const SubmitPaymentMethod = _ref => {
   } = useContext(store$k);
   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?.currency,
-  //   getPageOrDefaultLanguage()
-  // );
-
   const priceFormatted = plan.type === "donation" && (selectedDonationAmount || customDonationAmount) ? getFormattedPriceByLocal(selectedDonationAmount ? selectedDonationAmount * (plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity2 = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity2 !== void 0 ? _plan$quantity2 : 1) : customDonationAmount * (plan === null || plan === void 0 ? void 0 : plan.amount) * ((_plan$quantity3 = plan === null || plan === void 0 ? void 0 : plan.quantity) !== null && _plan$quantity3 !== void 0 ? _plan$quantity3 : 1), plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage()) : getFormattedPriceByLocal(price * planQuantity, plan === null || plan === void 0 ? void 0 : plan.currency, getPageOrDefaultLanguage());
   const supportsTap = Boolean((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings);
   const isUserFirstName = Boolean(window.Pelcro.user.read().first_name);
@@ -19684,9 +19683,9 @@ const SubmitPaymentMethod = _ref => {
     if (supportsTap && isUserFirstName && isUserLastName && isUserPhone) {
       setDisabled(disableSubmit);
     } else {
-      setDisabled(disableSubmit || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length) || emailError);
+      setDisabled(disableSubmit || supportsTap && firstNameError || supportsTap && lastNameError || supportsTap && phoneError || supportsTap && !(firstName !== null && firstName !== void 0 && firstName.length) || supportsTap && !(lastName !== null && lastName !== void 0 && lastName.length) || supportsTap && !(phone !== null && phone !== void 0 && phone.length) || emailError || passwordError);
     }
-  }, [disableSubmit, firstNameError, lastNameError, phoneError, firstName, lastName, phone, emailError]);
+  }, [disableSubmit, firstNameError, lastNameError, phoneError, firstName, lastName, phone, emailError, passwordError]);
   return /*#__PURE__*/React__default.createElement(Button, Object.assign({
     role: "submit",
     className: "plc-w-full plc-py-3",
@@ -20325,6 +20324,10 @@ const DonationEmail = props => /*#__PURE__*/React__default.createElement(Email,
   store: store$k
 }, props));
 
+const DonationPassword = props => /*#__PURE__*/React__default.createElement(Password, Object.assign({
+  store: store$k
+}, props));
+
 /**
  *
  */
@@ -20405,13 +20408,18 @@ function PaymentMethodView(_ref) {
     errorId: "pelcro-input-phone-error",
     label: t("labels.phone"),
     required: true
-  })), !isAuthenticated() && (plan === null || plan === void 0 ? void 0 : plan.type) === "donation" && /*#__PURE__*/React__default.createElement(DonationEmail, {
+  })), !isAuthenticated() && (plan === null || plan === void 0 ? void 0 : plan.type) === "donation" && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DonationEmail, {
     id: "pelcro-input-email",
     errorId: "pelcro-input-email-error",
     label: t("labels.email"),
     required: true,
     autoFocus: true
-  }), /*#__PURE__*/React__default.createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement(DonationPassword, {
+    id: "pelcro-input-password",
+    errorId: "pelcro-input-password-error",
+    label: t("labels.password"),
+    required: true
+  })), /*#__PURE__*/React__default.createElement(CheckoutForm, null), showCoupon && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default.createElement(CouponCode, null), /*#__PURE__*/React__default.createElement(DiscountedPrice, null)), /*#__PURE__*/React__default.createElement(TaxAmount, null), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
@@ -29017,6 +29025,7 @@ const DonationsMenu = _ref => {
     setSubscriptionToCancel
   } = usePelcro();
   const donations = getDonationSubs().sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
+    console.log("Sub", sub);
     // Cancel button click handlers
     const onCancelClick = () => {
       const isImmediateCancelationEnabled = window.Pelcro.site.read().cancel_settings.status;

package/dist/pelcro.css

@@ -2922,6 +2922,10 @@ layer components {
   text-decoration: none;
 }
 
+.pelcro-root .hover\:plc-no-underline:hover {
+  text-decoration: none;
+}
+
 .pelcro-root .plc-tracking-wider {
   letter-spacing: 0.05em;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.22.0-beta.20",
+  "version": "3.22.0-beta.22",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",