@pelcro/react-pelcro-js 3.21.1 → 3.21.3

package/dist/index.cjs.js

@@ -14002,12 +14002,9 @@ class SelectModal extends React.Component {
         const userCurrency = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : _window$Pelcro$user.read().currency;
         const userCountry = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : _window$Pelcro2$user.location.countryCode;
         const userLanguage = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$user = _window$Pelcro3.user) === null || _window$Pelcro3$user === void 0 ? void 0 : _window$Pelcro3$user.read().language;
-        const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.map(product => {
+        const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.filter(product => {
           const filteredPlans = product.plans.filter(plan => plan.currency === userCurrency || !userCurrency);
-          return {
-            ...product,
-            plans: filteredPlans
-          };
+          if (filteredPlans.length) return filteredPlans;
         });
         const productsMatchingUserCountry = productsMatchingUserCurrency.filter(product => {
           const filteredPlans = product.plans.filter(plan => {
@@ -14018,7 +14015,7 @@ class SelectModal extends React.Component {
         });
         notifyBugsnag(() => {
           Bugsnag.notify("SelectModal - No data viewed", event => {
-            var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe;
+            var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe, _window$Pelcro10, _window$Pelcro10$site;
             event.addMetadata("MetaData", {
               site: (_window$Pelcro5 = window.Pelcro) === null || _window$Pelcro5 === void 0 ? void 0 : (_window$Pelcro5$site = _window$Pelcro5.site) === null || _window$Pelcro5$site === void 0 ? void 0 : _window$Pelcro5$site.read(),
               user: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : _window$Pelcro6$user.read(),
@@ -14035,9 +14032,10 @@ class SelectModal extends React.Component {
               userCountry: userCountry,
               userLanguage: userLanguage,
               siteLanguage: (_window$Pelcro9 = window.Pelcro) === null || _window$Pelcro9 === void 0 ? void 0 : (_window$Pelcro9$helpe = _window$Pelcro9.helpers) === null || _window$Pelcro9$helpe === void 0 ? void 0 : _window$Pelcro9$helpe.getHtmlLanguageAttribute(),
-              currency_mismatch: productsMatchingUserCurrency.length === 0,
-              country_restrictions: productsMatchingUserCountry.length === 0,
-              language_mismatch: productsMatchingUserCountry.filter(product => product.plans.length).filter(productMatchPageLanguage).length === 0
+              products: (_window$Pelcro10 = window.Pelcro) === null || _window$Pelcro10 === void 0 ? void 0 : (_window$Pelcro10$site = _window$Pelcro10.site) === null || _window$Pelcro10$site === void 0 ? void 0 : _window$Pelcro10$site.read().products.length,
+              currency_matching_filter: `${productsMatchingUserCurrency.length} Products Passed`,
+              country_matching_filter: `${productsMatchingUserCountry.length} Products Passed`,
+              language_matching_filter: `${productsMatchingUserCountry.filter(productMatchPageLanguage).length} Products Passed`
             });
           });
         });
@@ -16317,6 +16315,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     onFailure = () => {},
     ...props
   } = _ref;
+  const [vantivPaymentRequest, setVantivPaymentRequest] = React.useState(null);
+  const [updatedCouponCode, setUpdatedCouponCode] = React.useState("");
   const {
     t
   } = useTranslation("payment");
@@ -16359,7 +16359,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   }, []);
 
   /*====== Start Tap integration ========*/
-  const submitUsingTap = () => {
+  const submitUsingTap = state => {
     var _ref2, _ref3, _ref4, _state$updatedPrice;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
@@ -16454,7 +16454,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                       content: null
                     }
                   });
-                  handleTapPayment(tapID);
+                  handleTapPayment(tapID, state);
                 }
               };
 
@@ -16467,7 +16467,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
     });
   };
-  function handleTapPayment(paymentRequest) {
+  function handleTapPayment(paymentRequest, state) {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (type === "createPayment") {
       handleTapSubscription();
@@ -16645,7 +16645,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   };
   /*====== End Tap integration ========*/
 
-  const submitUsingVantiv = () => {
+  const submitUsingVantiv = state => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
       // no need to create a new source using vantiv
@@ -16663,7 +16663,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       orderId: orderId
     });
   };
-  function handleVantivPayment(paymentRequest) {
+  function handleVantivPayment(paymentRequest, couponCode) {
     if (paymentRequest) {
       const SUCCESS_STATUS = "870";
       if (paymentRequest.response !== SUCCESS_STATUS) {
@@ -16729,7 +16729,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       const renewSubscription = !isGift && subscriptionIdToRenew;
       const giftSubscriprition = isGift && !subscriptionIdToRenew;
       const renewGift = isRenewingGift;
-      const couponCode = state.couponCode || window.Pelcro.coupon.getFromUrl() || "";
       if (renewGift) {
         return payment.execute({
           type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
@@ -16815,7 +16814,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         height: "245",
         timeout: 50000,
         div: "eProtectiframe",
-        callback: handleVantivPayment,
+        callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
         showCvv: true,
         numYears: 8,
         placeholderText: {
@@ -16830,6 +16829,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
     }
   }, [selectedPaymentMethodId]);
+
+  //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
+  React.useEffect(() => {
+    if (vantivPaymentRequest) {
+      handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
+    }
+  }, [vantivPaymentRequest]);
   React.useEffect(() => {
     whenUserReady(() => {
       if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
@@ -16958,6 +16964,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
       if (err) {
         onFailure(err);
+
+        //reset the coupon code in local state
+        setUpdatedCouponCode("");
         dispatch({
           type: SET_COUPON_ERROR,
           payload: getErrorMessages(err)
@@ -17016,6 +17025,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         type: SET_COUPON,
         payload: res.data.coupon
       });
+
+      //set the coupon code in local state to be able to use with Vantiv
+      setUpdatedCouponCode(res.data.coupon.code);
       dispatch({
         type: SET_PERCENT_OFF,
         payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
@@ -17086,6 +17098,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const debouncedApplyCouponCode = React.useRef(debounce(onApplyCouponCode, 1000)).current;
   const removeAppliedCoupon = state => {
     state.couponCode = "";
+
+    //reset the coupon code in local state
+    setUpdatedCouponCode("");
     dispatch({
       type: SET_COUPON_ERROR,
       payload: ""
@@ -17747,7 +17762,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             return submitUsingVantiv();
           }
           if (getSiteCardProcessor() === "tap") {
-            return submitUsingTap();
+            return submitUsingTap(state);
           }
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already

package/dist/index.esm.js

@@ -13972,12 +13972,9 @@ class SelectModal extends Component {
         const userCurrency = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : _window$Pelcro$user.read().currency;
         const userCountry = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : _window$Pelcro2$user.location.countryCode;
         const userLanguage = (_window$Pelcro3 = window.Pelcro) === null || _window$Pelcro3 === void 0 ? void 0 : (_window$Pelcro3$user = _window$Pelcro3.user) === null || _window$Pelcro3$user === void 0 ? void 0 : _window$Pelcro3$user.read().language;
-        const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.map(product => {
+        const productsMatchingUserCurrency = (_window$Pelcro4 = window.Pelcro) === null || _window$Pelcro4 === void 0 ? void 0 : (_window$Pelcro4$site = _window$Pelcro4.site) === null || _window$Pelcro4$site === void 0 ? void 0 : _window$Pelcro4$site.read().products.filter(product => {
           const filteredPlans = product.plans.filter(plan => plan.currency === userCurrency || !userCurrency);
-          return {
-            ...product,
-            plans: filteredPlans
-          };
+          if (filteredPlans.length) return filteredPlans;
         });
         const productsMatchingUserCountry = productsMatchingUserCurrency.filter(product => {
           const filteredPlans = product.plans.filter(plan => {
@@ -13988,7 +13985,7 @@ class SelectModal extends Component {
         });
         notifyBugsnag(() => {
           Bugsnag.notify("SelectModal - No data viewed", event => {
-            var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe;
+            var _window$Pelcro5, _window$Pelcro5$site, _window$Pelcro6, _window$Pelcro6$user, _window$Pelcro7, _window$Pelcro7$uiSet, _window$Pelcro8, _this$props, _window$Pelcro9, _window$Pelcro9$helpe, _window$Pelcro10, _window$Pelcro10$site;
             event.addMetadata("MetaData", {
               site: (_window$Pelcro5 = window.Pelcro) === null || _window$Pelcro5 === void 0 ? void 0 : (_window$Pelcro5$site = _window$Pelcro5.site) === null || _window$Pelcro5$site === void 0 ? void 0 : _window$Pelcro5$site.read(),
               user: (_window$Pelcro6 = window.Pelcro) === null || _window$Pelcro6 === void 0 ? void 0 : (_window$Pelcro6$user = _window$Pelcro6.user) === null || _window$Pelcro6$user === void 0 ? void 0 : _window$Pelcro6$user.read(),
@@ -14005,9 +14002,10 @@ class SelectModal extends Component {
               userCountry: userCountry,
               userLanguage: userLanguage,
               siteLanguage: (_window$Pelcro9 = window.Pelcro) === null || _window$Pelcro9 === void 0 ? void 0 : (_window$Pelcro9$helpe = _window$Pelcro9.helpers) === null || _window$Pelcro9$helpe === void 0 ? void 0 : _window$Pelcro9$helpe.getHtmlLanguageAttribute(),
-              currency_mismatch: productsMatchingUserCurrency.length === 0,
-              country_restrictions: productsMatchingUserCountry.length === 0,
-              language_mismatch: productsMatchingUserCountry.filter(product => product.plans.length).filter(productMatchPageLanguage).length === 0
+              products: (_window$Pelcro10 = window.Pelcro) === null || _window$Pelcro10 === void 0 ? void 0 : (_window$Pelcro10$site = _window$Pelcro10.site) === null || _window$Pelcro10$site === void 0 ? void 0 : _window$Pelcro10$site.read().products.length,
+              currency_matching_filter: `${productsMatchingUserCurrency.length} Products Passed`,
+              country_matching_filter: `${productsMatchingUserCountry.length} Products Passed`,
+              language_matching_filter: `${productsMatchingUserCountry.filter(productMatchPageLanguage).length} Products Passed`
             });
           });
         });
@@ -16287,6 +16285,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     onFailure = () => {},
     ...props
   } = _ref;
+  const [vantivPaymentRequest, setVantivPaymentRequest] = useState(null);
+  const [updatedCouponCode, setUpdatedCouponCode] = useState("");
   const {
     t
   } = useTranslation("payment");
@@ -16329,7 +16329,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   }, []);
 
   /*====== Start Tap integration ========*/
-  const submitUsingTap = () => {
+  const submitUsingTap = state => {
     var _ref2, _ref3, _ref4, _state$updatedPrice;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
@@ -16424,7 +16424,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
                       content: null
                     }
                   });
-                  handleTapPayment(tapID);
+                  handleTapPayment(tapID, state);
                 }
               };
 
@@ -16437,7 +16437,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       }
     });
   };
-  function handleTapPayment(paymentRequest) {
+  function handleTapPayment(paymentRequest, state) {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (type === "createPayment") {
       handleTapSubscription();
@@ -16615,7 +16615,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   };
   /*====== End Tap integration ========*/
 
-  const submitUsingVantiv = () => {
+  const submitUsingVantiv = state => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
     if (isUsingExistingPaymentMethod) {
       // no need to create a new source using vantiv
@@ -16633,7 +16633,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       orderId: orderId
     });
   };
-  function handleVantivPayment(paymentRequest) {
+  function handleVantivPayment(paymentRequest, couponCode) {
     if (paymentRequest) {
       const SUCCESS_STATUS = "870";
       if (paymentRequest.response !== SUCCESS_STATUS) {
@@ -16699,7 +16699,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       const renewSubscription = !isGift && subscriptionIdToRenew;
       const giftSubscriprition = isGift && !subscriptionIdToRenew;
       const renewGift = isRenewingGift;
-      const couponCode = state.couponCode || window.Pelcro.coupon.getFromUrl() || "";
       if (renewGift) {
         return payment.execute({
           type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
@@ -16785,7 +16784,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         height: "245",
         timeout: 50000,
         div: "eProtectiframe",
-        callback: handleVantivPayment,
+        callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
         showCvv: true,
         numYears: 8,
         placeholderText: {
@@ -16800,6 +16799,13 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
     }
   }, [selectedPaymentMethodId]);
+
+  //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
+  useEffect(() => {
+    if (vantivPaymentRequest) {
+      handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
+    }
+  }, [vantivPaymentRequest]);
   useEffect(() => {
     whenUserReady(() => {
       if (skipPayment && (plan === null || plan === void 0 ? void 0 : plan.amount) === 0) return;
@@ -16928,6 +16934,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
       if (err) {
         onFailure(err);
+
+        //reset the coupon code in local state
+        setUpdatedCouponCode("");
         dispatch({
           type: SET_COUPON_ERROR,
           payload: getErrorMessages(err)
@@ -16986,6 +16995,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         type: SET_COUPON,
         payload: res.data.coupon
       });
+
+      //set the coupon code in local state to be able to use with Vantiv
+      setUpdatedCouponCode(res.data.coupon.code);
       dispatch({
         type: SET_PERCENT_OFF,
         payload: `${(_res$data$coupon = res.data.coupon) === null || _res$data$coupon === void 0 ? void 0 : _res$data$coupon.percent_off}%`
@@ -17056,6 +17068,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const debouncedApplyCouponCode = useRef(debounce(onApplyCouponCode, 1000)).current;
   const removeAppliedCoupon = state => {
     state.couponCode = "";
+
+    //reset the coupon code in local state
+    setUpdatedCouponCode("");
     dispatch({
       type: SET_COUPON_ERROR,
       payload: ""
@@ -17717,7 +17732,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             return submitUsingVantiv();
           }
           if (getSiteCardProcessor() === "tap") {
-            return submitUsingTap();
+            return submitUsingTap(state);
           }
           if (selectedPaymentMethodId) {
             // pay with selected method (source) if exists already

package/package.json

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