@pelcro/react-pelcro-js 2.7.0-beta.11 → 2.7.0-beta.14

package/dist/index.cjs.js

@@ -4603,13 +4603,13 @@ var notification_fr = {
 };
 
 var labels$1 = {
-	title: "Verify your e-mail",
-	instructions: "To complete creating your account, you need to verify your e-mail address by opening the verification link we've sent to your email:",
-	resend: "Resend message"
+	title: "Verify your email",
+	instructions: "You're on your way!\nLet's confirm your email address.\nClick on the verification link we've sent to your email:",
+	resend: "Resend email"
 };
 var messages$1 = {
 	resent: "Resent successfully",
-	success: "E-mail verified successfully"
+	success: "Email verified successfully!"
 };
 var verifyEmail_en = {
 	labels: labels$1,
@@ -4617,13 +4617,13 @@ var verifyEmail_en = {
 };
 
 var labels = {
-	title: "Verify your e-mail",
-	instructions: "To complete creating your account, you need to verify your e-mail address by opening the verification link we've sent to your email:",
-	resend: "Resend message"
+	title: "Vérifiez votre e-mail",
+	instructions: "Vous êtes en route!\nConfirmons votre adresse e-mail.\nCliquez sur le lien de vérification que nous vous avons envoyé par e-mail:",
+	resend: "Ré-envoyer l'email"
 };
 var messages = {
-	resent: "Resent successfully",
-	success: "E-mail verified successfully"
+	resent: "Renvoyé avec succès",
+	success: "Email vérifié avec succès!"
 };
 var verifyEmail_fr = {
 	labels: labels,
@@ -5984,13 +5984,8 @@ class PelcroActions {
     });
 
     _defineProperty$3(this, "switchView", view => {
-      var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$user$r, _window$Pelcro$user$r2;
-
-      const isEmailVerificationEnabled = (_window$Pelcro$site$r = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.email_verify_enabled) !== null && _window$Pelcro$site$r !== void 0 ? _window$Pelcro$site$r : false;
-      const isUserEmailVerified = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.email_confirm) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : false;
-      const userMustVerifyEmail = this.get().isAuthenticated() && isEmailVerificationEnabled && !isUserEmailVerified; // view switching guards
-
-      if (userMustVerifyEmail && !["dashboard", "meter", "login", null].includes(view)) {
+      // view switching guards
+      if (userMustVerifyEmail() && !["dashboard", "meter", "login", null].includes(view)) {
         return this.set({
           view: "email-verify"
         });
@@ -6656,6 +6651,13 @@ function getDateWithoutTime(dateObject) {
   date.setHours(0, 0, 0, 0);
   return date;
 }
+function userMustVerifyEmail() {
+  var _window$Pelcro$site$r3, _window$Pelcro$site$r4, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
+
+  const isEmailVerificationEnabled = (_window$Pelcro$site$r3 = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.email_verify_enabled) !== null && _window$Pelcro$site$r3 !== void 0 ? _window$Pelcro$site$r3 : false;
+  const isUserEmailVerified = (_window$Pelcro$user$r9 = (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.email_confirm) !== null && _window$Pelcro$user$r9 !== void 0 ? _window$Pelcro$user$r9 : false;
+  return window.Pelcro.user.isAuthenticated() && isEmailVerificationEnabled && !isUserEmailVerified;
+}
 
 const resources = {
   en: {
@@ -6859,11 +6861,18 @@ class SaveToMetadataButtonClass {
 
         const button = event.currentTarget;
         const user = window.Pelcro.user.read();
+        const {
+          switchView
+        } = usePelcro.getStore();
         const {
           key,
           ...buttonMetadata
         } = button.dataset;
 
+        if (userMustVerifyEmail()) {
+          return switchView("email-verify");
+        }
+
         if (_classPrivateFieldGet(this, _isAlreadySaved).call(this, button)) {
           _classPrivateFieldGet(this, _removeMetaData).call(this, event);
 
@@ -8973,7 +8982,7 @@ const verifyEmailTokenFromUrl = () => {
   var _window$Pelcro$site$r5, _window$Pelcro$site$r6;
 
   const {
-    whenUserReady
+    whenSiteReady
   } = usePelcro.getStore();
   const translations = i18next.t("verifyEmail:messages", {
     returnObjects: true
@@ -8981,14 +8990,7 @@ const verifyEmailTokenFromUrl = () => {
   const emailToken = window.Pelcro.helpers.getURLParameter("token");
   const isEmailVerificationEnabled = (_window$Pelcro$site$r5 = (_window$Pelcro$site$r6 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r6 === void 0 ? void 0 : _window$Pelcro$site$r6.email_verify_enabled) !== null && _window$Pelcro$site$r5 !== void 0 ? _window$Pelcro$site$r5 : false;
   if (!emailToken || !isEmailVerificationEnabled) return;
-  /*   
-  using whenUserReady means that the verification link needs to be
-  opened on the same device that was used for registeration to guarantee
-  that the user is authenticated. if that's not the case, nothing would show up,
-  this is a limitation caused by the SDK and it's events
-  */
-
-  whenUserReady(() => {
+  whenSiteReady(() => {
     window.Pelcro.user.verifyEmailToken({
       token: emailToken
     }, (err, res) => {
@@ -10285,20 +10287,16 @@ const Auth0LoginButton = ({
   labelClassName = "",
   iconClassName = ""
 }) => {
-  if (!window.auth0 && window.Pelcro.site.read().auth0_client_id && window.Pelcro.site.read().auth0_base_url) {
-    console.error("Auth0 sdk script wasn't loaded, you need to load auth0 sdk before rendering the Auth0LoginButton");
-  }
-
-  const auth0Enabled = Boolean(window.Pelcro.site.read().auth0_client_id && window.Pelcro.site.read().auth0_base_url && window.auth0);
+  const auth0Enabled = Boolean(window.Pelcro.site.read().auth0_client_id && window.Pelcro.site.read().auth0_base_url);
   const auth0InstanceRef = React__default['default'].useRef(null);
   React__default['default'].useEffect(() => {
-    if (auth0Enabled) {
+    if (auth0Enabled && window.auth0 && auth0InstanceRef.current === null) {
       auth0InstanceRef.current = new window.auth0.WebAuth({
         domain: window.Pelcro.site.read().auth0_base_url,
         clientID: window.Pelcro.site.read().auth0_client_id
       });
     }
-  }, []);
+  }, [auth0Enabled, window.auth0]);
   const {
     dispatch: loginDispatch
   } = React.useContext(store$g);
@@ -10309,6 +10307,10 @@ const Auth0LoginButton = ({
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
 
+    if (!window.auth0) {
+      return console.error("Auth0 sdk script wasn't loaded, you need to load auth0 sdk before rendering the Auth0LoginButton");
+    }
+
     (_auth0InstanceRef$cur = auth0InstanceRef.current) === null || _auth0InstanceRef$cur === void 0 ? void 0 : (_auth0InstanceRef$cur2 = _auth0InstanceRef$cur.popup) === null || _auth0InstanceRef$cur2 === void 0 ? void 0 : (_auth0InstanceRef$cur3 = _auth0InstanceRef$cur2.authorize) === null || _auth0InstanceRef$cur3 === void 0 ? void 0 : _auth0InstanceRef$cur3.call(_auth0InstanceRef$cur2, {
       responseType: "token id_token",
       owp: true // close popup when finished
@@ -10948,15 +10950,21 @@ function RegisterModal(props) {
   };
 
   const handleAfterRegistrationLogic = () => {
-    var _ReactGA$event;
+    var _ReactGA$event, _window$Pelcro$site$r, _window$Pelcro$site$r2;
 
     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: "Registered",
       nonInteraction: true
-    }); // If product and plan are not selected
+    });
+    const isEmailVerificationEnabled = (_window$Pelcro$site$r = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.email_verify_enabled) !== null && _window$Pelcro$site$r !== void 0 ? _window$Pelcro$site$r : false;
+
+    if (isEmailVerificationEnabled) {
+      return switchView("email-verify");
+    }
 
     if (!product && !order && !giftCode) {
+      // If product and plan are not selected
       return resetView();
     } // If this is a redeem gift
 
@@ -21457,12 +21465,20 @@ const SubscriptionsItems = ({
   const {
     t
   } = useTranslation("dashboard");
+  const {
+    switchView,
+    isAuthenticated
+  } = usePelcro();
   const subs = getNonDonationSubs();
   if (subs.length === 0) return null;
   return subs.sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
     const isActive = activeMenu === sub.id; // Cancel button click handlers
 
     const onCancelClick = () => {
+      if (userMustVerifyEmail()) {
+        return switchView("email-verify");
+      }
+
       onClose === null || onClose === void 0 ? void 0 : onClose();
       notify.confirm((onSuccess, onFailure) => {
         cancelSubscription(sub.id, onSuccess, onFailure);
@@ -21478,6 +21494,10 @@ const SubscriptionsItems = ({
 
 
     const onReactivateClick = () => {
+      if (userMustVerifyEmail()) {
+        return switchView("email-verify");
+      }
+
       reactivateSubscription(sub.id);
     }; // Renew click
 
@@ -24348,7 +24368,7 @@ const EmailVerifyContainer = ({
   } = useTranslation("verifyEmail");
 
   const submit = () => {
-    window.Pelcro.user.resendEmailVerificationToken((err, res) => {
+    window.Pelcro.user.resendEmailVerification((err, res) => {
       dispatch({
         type: LOADING,
         payload: false
@@ -24475,7 +24495,7 @@ const EmailVerifyView = props => {
   }, /*#__PURE__*/React__default['default'].createElement(SvgEmailVerify, {
     className: "plc-w-32 plc-h-32"
   }), /*#__PURE__*/React__default['default'].createElement("p", {
-    className: "plc-mb-1 plc-text-gray-900"
+    className: "plc-mb-1 plc-text-gray-900 plc-text-center plc-whitespace-pre-line"
   }, t("labels.instructions"), " ", /*#__PURE__*/React__default['default'].createElement("span", {
     className: "plc-font-bold"
   }, (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email))), /*#__PURE__*/React__default['default'].createElement(EmailVerifyResendButton, {

package/dist/index.esm.js

@@ -4573,13 +4573,13 @@ var notification_fr = {
 };
 
 var labels$1 = {
-	title: "Verify your e-mail",
-	instructions: "To complete creating your account, you need to verify your e-mail address by opening the verification link we've sent to your email:",
-	resend: "Resend message"
+	title: "Verify your email",
+	instructions: "You're on your way!\nLet's confirm your email address.\nClick on the verification link we've sent to your email:",
+	resend: "Resend email"
 };
 var messages$1 = {
 	resent: "Resent successfully",
-	success: "E-mail verified successfully"
+	success: "Email verified successfully!"
 };
 var verifyEmail_en = {
 	labels: labels$1,
@@ -4587,13 +4587,13 @@ var verifyEmail_en = {
 };
 
 var labels = {
-	title: "Verify your e-mail",
-	instructions: "To complete creating your account, you need to verify your e-mail address by opening the verification link we've sent to your email:",
-	resend: "Resend message"
+	title: "Vérifiez votre e-mail",
+	instructions: "Vous êtes en route!\nConfirmons votre adresse e-mail.\nCliquez sur le lien de vérification que nous vous avons envoyé par e-mail:",
+	resend: "Ré-envoyer l'email"
 };
 var messages = {
-	resent: "Resent successfully",
-	success: "E-mail verified successfully"
+	resent: "Renvoyé avec succès",
+	success: "Email vérifié avec succès!"
 };
 var verifyEmail_fr = {
 	labels: labels,
@@ -5954,13 +5954,8 @@ class PelcroActions {
     });
 
     _defineProperty$3(this, "switchView", view => {
-      var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$user$r, _window$Pelcro$user$r2;
-
-      const isEmailVerificationEnabled = (_window$Pelcro$site$r = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.email_verify_enabled) !== null && _window$Pelcro$site$r !== void 0 ? _window$Pelcro$site$r : false;
-      const isUserEmailVerified = (_window$Pelcro$user$r = (_window$Pelcro$user$r2 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r2 === void 0 ? void 0 : _window$Pelcro$user$r2.email_confirm) !== null && _window$Pelcro$user$r !== void 0 ? _window$Pelcro$user$r : false;
-      const userMustVerifyEmail = this.get().isAuthenticated() && isEmailVerificationEnabled && !isUserEmailVerified; // view switching guards
-
-      if (userMustVerifyEmail && !["dashboard", "meter", "login", null].includes(view)) {
+      // view switching guards
+      if (userMustVerifyEmail() && !["dashboard", "meter", "login", null].includes(view)) {
         return this.set({
           view: "email-verify"
         });
@@ -6626,6 +6621,13 @@ function getDateWithoutTime(dateObject) {
   date.setHours(0, 0, 0, 0);
   return date;
 }
+function userMustVerifyEmail() {
+  var _window$Pelcro$site$r3, _window$Pelcro$site$r4, _window$Pelcro$user$r9, _window$Pelcro$user$r10;
+
+  const isEmailVerificationEnabled = (_window$Pelcro$site$r3 = (_window$Pelcro$site$r4 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r4 === void 0 ? void 0 : _window$Pelcro$site$r4.email_verify_enabled) !== null && _window$Pelcro$site$r3 !== void 0 ? _window$Pelcro$site$r3 : false;
+  const isUserEmailVerified = (_window$Pelcro$user$r9 = (_window$Pelcro$user$r10 = window.Pelcro.user.read()) === null || _window$Pelcro$user$r10 === void 0 ? void 0 : _window$Pelcro$user$r10.email_confirm) !== null && _window$Pelcro$user$r9 !== void 0 ? _window$Pelcro$user$r9 : false;
+  return window.Pelcro.user.isAuthenticated() && isEmailVerificationEnabled && !isUserEmailVerified;
+}
 
 const resources = {
   en: {
@@ -6829,11 +6831,18 @@ class SaveToMetadataButtonClass {
 
         const button = event.currentTarget;
         const user = window.Pelcro.user.read();
+        const {
+          switchView
+        } = usePelcro.getStore();
         const {
           key,
           ...buttonMetadata
         } = button.dataset;
 
+        if (userMustVerifyEmail()) {
+          return switchView("email-verify");
+        }
+
         if (_classPrivateFieldGet(this, _isAlreadySaved).call(this, button)) {
           _classPrivateFieldGet(this, _removeMetaData).call(this, event);
 
@@ -8943,7 +8952,7 @@ const verifyEmailTokenFromUrl = () => {
   var _window$Pelcro$site$r5, _window$Pelcro$site$r6;
 
   const {
-    whenUserReady
+    whenSiteReady
   } = usePelcro.getStore();
   const translations = i18next.t("verifyEmail:messages", {
     returnObjects: true
@@ -8951,14 +8960,7 @@ const verifyEmailTokenFromUrl = () => {
   const emailToken = window.Pelcro.helpers.getURLParameter("token");
   const isEmailVerificationEnabled = (_window$Pelcro$site$r5 = (_window$Pelcro$site$r6 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r6 === void 0 ? void 0 : _window$Pelcro$site$r6.email_verify_enabled) !== null && _window$Pelcro$site$r5 !== void 0 ? _window$Pelcro$site$r5 : false;
   if (!emailToken || !isEmailVerificationEnabled) return;
-  /*   
-  using whenUserReady means that the verification link needs to be
-  opened on the same device that was used for registeration to guarantee
-  that the user is authenticated. if that's not the case, nothing would show up,
-  this is a limitation caused by the SDK and it's events
-  */
-
-  whenUserReady(() => {
+  whenSiteReady(() => {
     window.Pelcro.user.verifyEmailToken({
       token: emailToken
     }, (err, res) => {
@@ -10255,20 +10257,16 @@ const Auth0LoginButton = ({
   labelClassName = "",
   iconClassName = ""
 }) => {
-  if (!window.auth0 && window.Pelcro.site.read().auth0_client_id && window.Pelcro.site.read().auth0_base_url) {
-    console.error("Auth0 sdk script wasn't loaded, you need to load auth0 sdk before rendering the Auth0LoginButton");
-  }
-
-  const auth0Enabled = Boolean(window.Pelcro.site.read().auth0_client_id && window.Pelcro.site.read().auth0_base_url && window.auth0);
+  const auth0Enabled = Boolean(window.Pelcro.site.read().auth0_client_id && window.Pelcro.site.read().auth0_base_url);
   const auth0InstanceRef = React__default.useRef(null);
   React__default.useEffect(() => {
-    if (auth0Enabled) {
+    if (auth0Enabled && window.auth0 && auth0InstanceRef.current === null) {
       auth0InstanceRef.current = new window.auth0.WebAuth({
         domain: window.Pelcro.site.read().auth0_base_url,
         clientID: window.Pelcro.site.read().auth0_client_id
       });
     }
-  }, []);
+  }, [auth0Enabled, window.auth0]);
   const {
     dispatch: loginDispatch
   } = useContext(store$g);
@@ -10279,6 +10277,10 @@ const Auth0LoginButton = ({
   function handleClick() {
     var _auth0InstanceRef$cur, _auth0InstanceRef$cur2, _auth0InstanceRef$cur3;
 
+    if (!window.auth0) {
+      return console.error("Auth0 sdk script wasn't loaded, you need to load auth0 sdk before rendering the Auth0LoginButton");
+    }
+
     (_auth0InstanceRef$cur = auth0InstanceRef.current) === null || _auth0InstanceRef$cur === void 0 ? void 0 : (_auth0InstanceRef$cur2 = _auth0InstanceRef$cur.popup) === null || _auth0InstanceRef$cur2 === void 0 ? void 0 : (_auth0InstanceRef$cur3 = _auth0InstanceRef$cur2.authorize) === null || _auth0InstanceRef$cur3 === void 0 ? void 0 : _auth0InstanceRef$cur3.call(_auth0InstanceRef$cur2, {
       responseType: "token id_token",
       owp: true // close popup when finished
@@ -10918,15 +10920,21 @@ function RegisterModal(props) {
   };
 
   const handleAfterRegistrationLogic = () => {
-    var _ReactGA$event;
+    var _ReactGA$event, _window$Pelcro$site$r, _window$Pelcro$site$r2;
 
     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: "Registered",
       nonInteraction: true
-    }); // If product and plan are not selected
+    });
+    const isEmailVerificationEnabled = (_window$Pelcro$site$r = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.email_verify_enabled) !== null && _window$Pelcro$site$r !== void 0 ? _window$Pelcro$site$r : false;
+
+    if (isEmailVerificationEnabled) {
+      return switchView("email-verify");
+    }
 
     if (!product && !order && !giftCode) {
+      // If product and plan are not selected
       return resetView();
     } // If this is a redeem gift
 
@@ -21427,12 +21435,20 @@ const SubscriptionsItems = ({
   const {
     t
   } = useTranslation("dashboard");
+  const {
+    switchView,
+    isAuthenticated
+  } = usePelcro();
   const subs = getNonDonationSubs();
   if (subs.length === 0) return null;
   return subs.sort((a, b) => a.expires_at - b.expires_at).sort((a, b) => a.renews_at - b.renews_at).map(sub => {
     const isActive = activeMenu === sub.id; // Cancel button click handlers
 
     const onCancelClick = () => {
+      if (userMustVerifyEmail()) {
+        return switchView("email-verify");
+      }
+
       onClose === null || onClose === void 0 ? void 0 : onClose();
       notify.confirm((onSuccess, onFailure) => {
         cancelSubscription(sub.id, onSuccess, onFailure);
@@ -21448,6 +21464,10 @@ const SubscriptionsItems = ({
 
 
     const onReactivateClick = () => {
+      if (userMustVerifyEmail()) {
+        return switchView("email-verify");
+      }
+
       reactivateSubscription(sub.id);
     }; // Renew click
 
@@ -24318,7 +24338,7 @@ const EmailVerifyContainer = ({
   } = useTranslation("verifyEmail");
 
   const submit = () => {
-    window.Pelcro.user.resendEmailVerificationToken((err, res) => {
+    window.Pelcro.user.resendEmailVerification((err, res) => {
       dispatch({
         type: LOADING,
         payload: false
@@ -24445,7 +24465,7 @@ const EmailVerifyView = props => {
   }, /*#__PURE__*/React__default.createElement(SvgEmailVerify, {
     className: "plc-w-32 plc-h-32"
   }), /*#__PURE__*/React__default.createElement("p", {
-    className: "plc-mb-1 plc-text-gray-900"
+    className: "plc-mb-1 plc-text-gray-900 plc-text-center plc-whitespace-pre-line"
   }, t("labels.instructions"), " ", /*#__PURE__*/React__default.createElement("span", {
     className: "plc-font-bold"
   }, (_window$Pelcro$user$r = window.Pelcro.user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.email))), /*#__PURE__*/React__default.createElement(EmailVerifyResendButton, {

package/dist/pelcro.css

@@ -2759,6 +2759,10 @@ in order to scope selectors under pelcro-root
   vertical-align: middle;
 }
 
+.pelcro-root .plc-whitespace-pre-line {
+  white-space: pre-line;
+}
+
 .pelcro-root .plc-break-words {
   overflow-wrap: break-word;
 }

package/package.json

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