@pelcro/react-pelcro-js 3.22.0-beta.5 → 3.22.0-beta.7

package/dist/index.cjs.js

@@ -16354,6 +16354,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     onFailure = () => {},
     ...props
   } = _ref;
+  const [vantivPaymentRequest, setVantivPaymentRequest] = React.useState(null);
+  const [updatedCouponCode, setUpdatedCouponCode] = React.useState("");
   const {
     t
   } = useTranslation("payment");
@@ -16695,12 +16697,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     /*     
     calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
     */
-    handleVantivPayment(vantivInstanceRef.current.getPaypageRegistrationId({
+    vantivInstanceRef.current.getPaypageRegistrationId({
       id: orderId,
       orderId: orderId
-    }), state);
+    });
   };
-  function handleVantivPayment(paymentRequest, state) {
+  function handleVantivPayment(paymentRequest, couponCode) {
     if (paymentRequest) {
       const SUCCESS_STATUS = "870";
       if (paymentRequest.response !== SUCCESS_STATUS) {
@@ -16766,9 +16768,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       const renewSubscription = !isGift && subscriptionIdToRenew;
       const giftSubscriprition = isGift && !subscriptionIdToRenew;
       const renewGift = isRenewingGift;
-      const {
-        couponCode
-      } = state;
       if (renewGift) {
         return payment.execute({
           type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
@@ -16854,7 +16853,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         height: "245",
         timeout: 50000,
         div: "eProtectiframe",
-        callback: handleVantivPayment,
+        callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
         showCvv: true,
         numYears: 8,
         placeholderText: {
@@ -16869,6 +16868,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 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
@@ -16997,6 +17003,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
       if (err) {
         onFailure(err);
+
+        //reset the coupon code in local state
+        setUpdatedCouponCode("");
         dispatch({
           type: SET_COUPON_ERROR,
           payload: getErrorMessages(err)
@@ -17055,6 +17064,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}%`
@@ -17125,6 +17137,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: ""
@@ -17809,7 +17824,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             return submitPayment(state);
           }
           if (getSiteCardProcessor() === "vantiv") {
-            return submitUsingVantiv(state);
+            return submitUsingVantiv();
           }
           if (getSiteCardProcessor() === "tap") {
             return submitUsingTap(state);

package/dist/index.esm.js

@@ -16324,6 +16324,8 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     onFailure = () => {},
     ...props
   } = _ref;
+  const [vantivPaymentRequest, setVantivPaymentRequest] = useState(null);
+  const [updatedCouponCode, setUpdatedCouponCode] = useState("");
   const {
     t
   } = useTranslation("payment");
@@ -16665,12 +16667,12 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     /*     
     calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
     */
-    handleVantivPayment(vantivInstanceRef.current.getPaypageRegistrationId({
+    vantivInstanceRef.current.getPaypageRegistrationId({
       id: orderId,
       orderId: orderId
-    }), state);
+    });
   };
-  function handleVantivPayment(paymentRequest, state) {
+  function handleVantivPayment(paymentRequest, couponCode) {
     if (paymentRequest) {
       const SUCCESS_STATUS = "870";
       if (paymentRequest.response !== SUCCESS_STATUS) {
@@ -16736,9 +16738,6 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       const renewSubscription = !isGift && subscriptionIdToRenew;
       const giftSubscriprition = isGift && !subscriptionIdToRenew;
       const renewGift = isRenewingGift;
-      const {
-        couponCode
-      } = state;
       if (renewGift) {
         return payment.execute({
           type: PAYMENT_TYPES.RENEW_GIFTED_SUBSCRIPTION,
@@ -16824,7 +16823,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         height: "245",
         timeout: 50000,
         div: "eProtectiframe",
-        callback: handleVantivPayment,
+        callback: paymentRequest => setVantivPaymentRequest(paymentRequest),
         showCvv: true,
         numYears: 8,
         placeholderText: {
@@ -16839,6 +16838,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 || (order === null || order === void 0 ? void 0 : order.price) === 0)) return;
@@ -16967,6 +16973,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       });
       if (err) {
         onFailure(err);
+
+        //reset the coupon code in local state
+        setUpdatedCouponCode("");
         dispatch({
           type: SET_COUPON_ERROR,
           payload: getErrorMessages(err)
@@ -17025,6 +17034,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}%`
@@ -17095,6 +17107,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: ""
@@ -17779,7 +17794,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             return submitPayment(state);
           }
           if (getSiteCardProcessor() === "vantiv") {
-            return submitUsingVantiv(state);
+            return submitUsingVantiv();
           }
           if (getSiteCardProcessor() === "tap") {
             return submitUsingTap(state);

package/package.json

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