@pelcro/react-pelcro-js 3.10.1-beta.2 → 3.10.1-beta.21

package/dist/index.cjs.js

@@ -10531,35 +10531,38 @@ const showInvoiceDetailsFromUrl = () => {
     isAuthenticated,
     setInvoice,
     whenUserReady,
+    whenSiteReady,
     switchView
   } = usePelcro.getStore();
-  whenUserReady(() => {
-    const invoiceId = window.Pelcro.helpers.getURLParameter("id");
-    const wasSetSuccessfully = setInvoice(invoiceId);
-
-    if (!wasSetSuccessfully) {
-      const errorMessage = i18next.t("messages:invalidInvoice", {
-        returnObjects: true
-      });
-      return notify.error(errorMessage);
-    }
-
+  whenSiteReady(() => {
     if (!isAuthenticated()) {
       return switchView("login");
     }
 
-    const {
-      invoice
-    } = usePelcro.getStore();
+    whenUserReady(() => {
+      const invoiceId = window.Pelcro.helpers.getURLParameter("id");
+      const wasSetSuccessfully = setInvoice(invoiceId);
 
-    if (invoice.total === 0) {
-      const errorMessage = i18next.t("messages:zeroTotalInvoice", {
-        returnObjects: true
-      });
-      return notify.error(errorMessage);
-    }
+      if (!wasSetSuccessfully) {
+        const errorMessage = i18next.t("messages:invalidInvoice", {
+          returnObjects: true
+        });
+        return notify.error(errorMessage);
+      }
+
+      const {
+        invoice
+      } = usePelcro.getStore();
+
+      if (invoice.total === 0) {
+        const errorMessage = i18next.t("messages:zeroTotalInvoice", {
+          returnObjects: true
+        });
+        return notify.error(errorMessage);
+      }
 
-    return switchView("invoice-details");
+      return switchView("invoice-details");
+    });
   });
 };
 
@@ -12239,17 +12242,18 @@ function LoginModal({
   const onSuccess = res => {
     var _props$onSuccess;
 
-    (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res); // If this is an invoice
-
-    if (invoice) {
-      switchView("invoice-details");
-    }
+    (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
 
     if (window.Pelcro.paywall.isArticleRestricted()) {
       initPaywalls();
     }
 
     resetView();
+    const viewFromURL = getStableViewID(window.Pelcro.helpers.getURLParameter("view"));
+
+    if (viewFromURL === "invoice-details") {
+      initViewFromURL();
+    }
   };
 
   const onCreateAccountClick = () => {
@@ -15401,6 +15405,9 @@ const PaymentMethodContainerWithoutStripe = ({
     selectedPaymentMethodId,
     couponCode
   } = usePelcro();
+  const {
+    whenUserReady
+  } = usePelcro.getStore();
   const product = (_props$product = props.product) !== null && _props$product !== void 0 ? _props$product : pelcroStore.product;
   const plan = (_props$plan = props.plan) !== null && _props$plan !== void 0 ? _props$plan : pelcroStore.plan;
   const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
@@ -15409,6 +15416,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
   const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
   const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
+  const cardProcessor = getSiteCardProcessor();
   React.useEffect(() => {
     if (window.Pelcro.coupon.getFromUrl()) {
       dispatch({
@@ -15682,6 +15690,52 @@ const PaymentMethodContainerWithoutStripe = ({
       }
     }
   }
+
+  const initTapScript = () => {
+    var _window$Pelcro$site$r;
+
+    const tapKey = window.Tapjsli((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings.publishable_key);
+    let elements = tapKey.elements({});
+    let style = {
+      base: {
+        color: "#535353",
+        lineHeight: "18px",
+        fontFamily: "sans-serif",
+        fontSmoothing: "antialiased",
+        fontSize: "16px",
+        "::placeholder": {
+          color: "rgba(0, 0, 0, 0.26)",
+          fontSize: "15px"
+        }
+      },
+      invalid: {
+        color: "red"
+      }
+    }; // input labels/placeholders
+
+    let labels = {
+      cardNumber: "Card Number",
+      expirationDate: "MM/YY",
+      cvv: "CVV",
+      cardHolder: "Card Holder Name"
+    }; //payment options
+
+    let paymentOptions = {
+      labels: labels,
+      TextDirection: "ltr"
+    }; //create element, pass style and payment options
+
+    let card = elements.create("card", {
+      style: style
+    }, paymentOptions); //mount element
+
+    card.mount("#tapPaymentIframe"); //card change event listener
+
+    card.addEventListener("change", function (event) {//If needed
+    });
+    tapInstanceRef.current = tapKey;
+    tapInstanceCard.current = card;
+  };
   /*====== End Tap integration ========*/
 
 
@@ -15864,13 +15918,11 @@ const PaymentMethodContainerWithoutStripe = ({
   const tapInstanceRef = React__default['default'].useRef(null);
   const tapInstanceCard = React__default['default'].useRef(null);
   React.useEffect(() => {
-    const cardProcessor = getSiteCardProcessor();
-
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+      var _window$Pelcro$site$r2, _window$Pelcro$site$r3;
 
-      const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings.pay_page_id;
-      const reportGroup = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.report_group;
+      const payPageId = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.pay_page_id;
+      const reportGroup = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.vantiv_gateway_settings.report_group;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -15892,72 +15944,21 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
+  }, [selectedPaymentMethodId]);
+  React.useEffect(() => {
+    whenUserReady(() => {
+      if (cardProcessor === "tap" && !window.Tapjsli) {
+        window.Pelcro.helpers.loadSDK("https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js", "tap-bluebird");
+        window.Pelcro.helpers.loadSDK("https://secure.gosell.io/js/sdk/tap.min.js", "tap-sdk");
+        document.querySelector('script[src="https://secure.gosell.io/js/sdk/tap.min.js"]').addEventListener("load", () => {
+          initTapScript();
+        });
+      }
 
-    if (cardProcessor === "tap" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r3;
-
-      const tapKey = Tapjsli((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.tap_gateway_settings.publishable_key);
-      let elements = tapKey.elements({});
-      let style = {
-        base: {
-          color: "#535353",
-          lineHeight: "18px",
-          fontFamily: "sans-serif",
-          fontSmoothing: "antialiased",
-          fontSize: "16px",
-          "::placeholder": {
-            color: "rgba(0, 0, 0, 0.26)",
-            fontSize: "15px"
-          }
-        },
-        invalid: {
-          color: "red"
-        }
-      }; // input labels/placeholders
-
-      let labels = {
-        cardNumber: "Card Number",
-        expirationDate: "MM/YY",
-        cvv: "CVV",
-        cardHolder: "Card Holder Name"
-      }; //payment options
-
-      let paymentOptions = {
-        labels: labels,
-        TextDirection: "ltr"
-      }; //create element, pass style and payment options
-
-      let card = elements.create("card", {
-        style: style
-      }, paymentOptions); //mount element
-
-      card.mount("#tapPaymentIframe"); //card change event listener
-
-      card.addEventListener("change", function (event) {// if (event.error_interactive) {
-        //   onFailure(event.error_interactive);
-        //   return dispatch({
-        //     type: SHOW_ALERT,
-        //     payload: {
-        //       type: "error",
-        //       content: getErrorMessages(event.error_interactive)
-        //     }
-        //   });
-        // } else {
-        //   dispatch({
-        //     type: SHOW_ALERT,
-        //     payload: { type: "error", content: "" }
-        //   });
-        // }
-        // let displayError = document.getElementById("error-handler");
-        // if (event.error) {
-        //   displayError.textContent = event.error.message;
-        // } else {
-        //   displayError.textContent = "";
-        // }
-      });
-      tapInstanceRef.current = tapKey;
-      tapInstanceCard.current = card;
-    }
+      if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
+        initTapScript();
+      }
+    });
   }, [selectedPaymentMethodId]);
 
   const initPaymentRequest = (state, dispatch) => {
@@ -16079,7 +16080,6 @@ const PaymentMethodContainerWithoutStripe = ({
 
       if (err) {
         onFailure(err);
-        console.error(err);
         dispatch({
           type: SET_COUPON_ERROR,
           payload: getErrorMessages(err)
@@ -17081,12 +17081,17 @@ const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
 
 const PaymentMethodContainer = props => {
   const [isStripeLoaded, setIsStripeLoaded] = React.useState(Boolean(window.Stripe));
+  const {
+    whenUserReady
+  } = usePelcro.getStore();
   React.useEffect(() => {
-    if (!window.Stripe) {
-      document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
-        setIsStripeLoaded(true);
-      });
-    }
+    whenUserReady(() => {
+      if (!window.Stripe) {
+        document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
+          setIsStripeLoaded(true);
+        });
+      }
+    });
   }, []);
 
   if (isStripeLoaded) {

package/dist/index.esm.js

@@ -10501,35 +10501,38 @@ const showInvoiceDetailsFromUrl = () => {
     isAuthenticated,
     setInvoice,
     whenUserReady,
+    whenSiteReady,
     switchView
   } = usePelcro.getStore();
-  whenUserReady(() => {
-    const invoiceId = window.Pelcro.helpers.getURLParameter("id");
-    const wasSetSuccessfully = setInvoice(invoiceId);
-
-    if (!wasSetSuccessfully) {
-      const errorMessage = i18next.t("messages:invalidInvoice", {
-        returnObjects: true
-      });
-      return notify.error(errorMessage);
-    }
-
+  whenSiteReady(() => {
     if (!isAuthenticated()) {
       return switchView("login");
     }
 
-    const {
-      invoice
-    } = usePelcro.getStore();
+    whenUserReady(() => {
+      const invoiceId = window.Pelcro.helpers.getURLParameter("id");
+      const wasSetSuccessfully = setInvoice(invoiceId);
 
-    if (invoice.total === 0) {
-      const errorMessage = i18next.t("messages:zeroTotalInvoice", {
-        returnObjects: true
-      });
-      return notify.error(errorMessage);
-    }
+      if (!wasSetSuccessfully) {
+        const errorMessage = i18next.t("messages:invalidInvoice", {
+          returnObjects: true
+        });
+        return notify.error(errorMessage);
+      }
+
+      const {
+        invoice
+      } = usePelcro.getStore();
+
+      if (invoice.total === 0) {
+        const errorMessage = i18next.t("messages:zeroTotalInvoice", {
+          returnObjects: true
+        });
+        return notify.error(errorMessage);
+      }
 
-    return switchView("invoice-details");
+      return switchView("invoice-details");
+    });
   });
 };
 
@@ -12209,17 +12212,18 @@ function LoginModal({
   const onSuccess = res => {
     var _props$onSuccess;
 
-    (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res); // If this is an invoice
-
-    if (invoice) {
-      switchView("invoice-details");
-    }
+    (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, res);
 
     if (window.Pelcro.paywall.isArticleRestricted()) {
       initPaywalls();
     }
 
     resetView();
+    const viewFromURL = getStableViewID(window.Pelcro.helpers.getURLParameter("view"));
+
+    if (viewFromURL === "invoice-details") {
+      initViewFromURL();
+    }
   };
 
   const onCreateAccountClick = () => {
@@ -15371,6 +15375,9 @@ const PaymentMethodContainerWithoutStripe = ({
     selectedPaymentMethodId,
     couponCode
   } = usePelcro();
+  const {
+    whenUserReady
+  } = usePelcro.getStore();
   const product = (_props$product = props.product) !== null && _props$product !== void 0 ? _props$product : pelcroStore.product;
   const plan = (_props$plan = props.plan) !== null && _props$plan !== void 0 ? _props$plan : pelcroStore.plan;
   const subscriptionIdToRenew = (_props$subscriptionId = props.subscriptionIdToRenew) !== null && _props$subscriptionId !== void 0 ? _props$subscriptionId : pelcroStore.subscriptionIdToRenew;
@@ -15379,6 +15386,7 @@ const PaymentMethodContainerWithoutStripe = ({
   const isGift = (_props$isGift = props.isGift) !== null && _props$isGift !== void 0 ? _props$isGift : pelcroStore.isGift;
   const isRenewingGift = (_props$isRenewingGift = props.isRenewingGift) !== null && _props$isRenewingGift !== void 0 ? _props$isRenewingGift : pelcroStore.isRenewingGift;
   const invoice = (_props$invoice = props.invoice) !== null && _props$invoice !== void 0 ? _props$invoice : pelcroStore.invoice;
+  const cardProcessor = getSiteCardProcessor();
   useEffect(() => {
     if (window.Pelcro.coupon.getFromUrl()) {
       dispatch({
@@ -15652,6 +15660,52 @@ const PaymentMethodContainerWithoutStripe = ({
       }
     }
   }
+
+  const initTapScript = () => {
+    var _window$Pelcro$site$r;
+
+    const tapKey = window.Tapjsli((_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.tap_gateway_settings.publishable_key);
+    let elements = tapKey.elements({});
+    let style = {
+      base: {
+        color: "#535353",
+        lineHeight: "18px",
+        fontFamily: "sans-serif",
+        fontSmoothing: "antialiased",
+        fontSize: "16px",
+        "::placeholder": {
+          color: "rgba(0, 0, 0, 0.26)",
+          fontSize: "15px"
+        }
+      },
+      invalid: {
+        color: "red"
+      }
+    }; // input labels/placeholders
+
+    let labels = {
+      cardNumber: "Card Number",
+      expirationDate: "MM/YY",
+      cvv: "CVV",
+      cardHolder: "Card Holder Name"
+    }; //payment options
+
+    let paymentOptions = {
+      labels: labels,
+      TextDirection: "ltr"
+    }; //create element, pass style and payment options
+
+    let card = elements.create("card", {
+      style: style
+    }, paymentOptions); //mount element
+
+    card.mount("#tapPaymentIframe"); //card change event listener
+
+    card.addEventListener("change", function (event) {//If needed
+    });
+    tapInstanceRef.current = tapKey;
+    tapInstanceCard.current = card;
+  };
   /*====== End Tap integration ========*/
 
 
@@ -15834,13 +15888,11 @@ const PaymentMethodContainerWithoutStripe = ({
   const tapInstanceRef = React__default.useRef(null);
   const tapInstanceCard = React__default.useRef(null);
   useEffect(() => {
-    const cardProcessor = getSiteCardProcessor();
-
     if (cardProcessor === "vantiv" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r, _window$Pelcro$site$r2;
+      var _window$Pelcro$site$r2, _window$Pelcro$site$r3;
 
-      const payPageId = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings.pay_page_id;
-      const reportGroup = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.report_group;
+      const payPageId = (_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.vantiv_gateway_settings.pay_page_id;
+      const reportGroup = (_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.vantiv_gateway_settings.report_group;
       vantivInstanceRef.current = new window.EprotectIframeClient({
         paypageId: payPageId,
         reportGroup: reportGroup,
@@ -15862,72 +15914,21 @@ const PaymentMethodContainerWithoutStripe = ({
         }
       });
     }
+  }, [selectedPaymentMethodId]);
+  useEffect(() => {
+    whenUserReady(() => {
+      if (cardProcessor === "tap" && !window.Tapjsli) {
+        window.Pelcro.helpers.loadSDK("https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js", "tap-bluebird");
+        window.Pelcro.helpers.loadSDK("https://secure.gosell.io/js/sdk/tap.min.js", "tap-sdk");
+        document.querySelector('script[src="https://secure.gosell.io/js/sdk/tap.min.js"]').addEventListener("load", () => {
+          initTapScript();
+        });
+      }
 
-    if (cardProcessor === "tap" && !selectedPaymentMethodId) {
-      var _window$Pelcro$site$r3;
-
-      const tapKey = Tapjsli((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.tap_gateway_settings.publishable_key);
-      let elements = tapKey.elements({});
-      let style = {
-        base: {
-          color: "#535353",
-          lineHeight: "18px",
-          fontFamily: "sans-serif",
-          fontSmoothing: "antialiased",
-          fontSize: "16px",
-          "::placeholder": {
-            color: "rgba(0, 0, 0, 0.26)",
-            fontSize: "15px"
-          }
-        },
-        invalid: {
-          color: "red"
-        }
-      }; // input labels/placeholders
-
-      let labels = {
-        cardNumber: "Card Number",
-        expirationDate: "MM/YY",
-        cvv: "CVV",
-        cardHolder: "Card Holder Name"
-      }; //payment options
-
-      let paymentOptions = {
-        labels: labels,
-        TextDirection: "ltr"
-      }; //create element, pass style and payment options
-
-      let card = elements.create("card", {
-        style: style
-      }, paymentOptions); //mount element
-
-      card.mount("#tapPaymentIframe"); //card change event listener
-
-      card.addEventListener("change", function (event) {// if (event.error_interactive) {
-        //   onFailure(event.error_interactive);
-        //   return dispatch({
-        //     type: SHOW_ALERT,
-        //     payload: {
-        //       type: "error",
-        //       content: getErrorMessages(event.error_interactive)
-        //     }
-        //   });
-        // } else {
-        //   dispatch({
-        //     type: SHOW_ALERT,
-        //     payload: { type: "error", content: "" }
-        //   });
-        // }
-        // let displayError = document.getElementById("error-handler");
-        // if (event.error) {
-        //   displayError.textContent = event.error.message;
-        // } else {
-        //   displayError.textContent = "";
-        // }
-      });
-      tapInstanceRef.current = tapKey;
-      tapInstanceCard.current = card;
-    }
+      if (cardProcessor === "tap" && !selectedPaymentMethodId && window.Tapjsli) {
+        initTapScript();
+      }
+    });
   }, [selectedPaymentMethodId]);
 
   const initPaymentRequest = (state, dispatch) => {
@@ -16049,7 +16050,6 @@ const PaymentMethodContainerWithoutStripe = ({
 
       if (err) {
         onFailure(err);
-        console.error(err);
         dispatch({
           type: SET_COUPON_ERROR,
           payload: getErrorMessages(err)
@@ -17051,12 +17051,17 @@ const UnwrappedForm = es_12(PaymentMethodContainerWithoutStripe);
 
 const PaymentMethodContainer = props => {
   const [isStripeLoaded, setIsStripeLoaded] = useState(Boolean(window.Stripe));
+  const {
+    whenUserReady
+  } = usePelcro.getStore();
   useEffect(() => {
-    if (!window.Stripe) {
-      document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
-        setIsStripeLoaded(true);
-      });
-    }
+    whenUserReady(() => {
+      if (!window.Stripe) {
+        document.querySelector('script[src="https://js.stripe.com/v3"]').addEventListener("load", () => {
+          setIsStripeLoaded(true);
+        });
+      }
+    });
   }, []);
 
   if (isStripeLoaded) {

package/package.json

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