@pelcro/react-pelcro-js 3.2.0-beta.8 → 3.2.0-beta.9

package/dist/index.cjs.js

@@ -4684,17 +4684,17 @@ var invoiceDetails_en = {
 	buttons: buttons$1
 };
 
-var title$2 = "Invoice details";
+var title$2 = "Détails de la facture";
 var labels = {
-	summary: "Summary",
+	summary: "Résumé",
 	total: "Total",
-	amountPaid: "Amount paid",
-	amountDue: "Amount due",
-	creationDate: "Created on:"
+	amountPaid: "Montant payé",
+	amountDue: "Montant dû",
+	creationDate: "Créé le:"
 };
 var buttons = {
-	download: "Download",
-	pay: "Pay now"
+	download: "Télécharger",
+	pay: "Payer"
 };
 var invoiceDetails_fr = {
 	title: title$2,
@@ -13600,8 +13600,11 @@ const PaymentMethodContainerWithoutStripe = ({
     updateTotalAmountWithTax();
   }, []);
 
-  const submitVantivPayment = () => {
-    if (selectedPaymentMethodId) {
+  const submitUsingVantiv = () => {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using vantiv
       return handleVantivPayment(null);
     }
 
@@ -13609,7 +13612,10 @@ const PaymentMethodContainerWithoutStripe = ({
       return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
     }
 
-    const orderId = `pelcro-${new Date().getTime()}`; // calls handleVantivPayment
+    const orderId = `pelcro-${new Date().getTime()}`;
+    /*     
+    calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
+    */
 
     vantivInstanceRef.current.getPaypageRegistrationId({
       id: orderId,
@@ -13636,6 +13642,45 @@ const PaymentMethodContainerWithoutStripe = ({
       purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, dispatch);
+    } else if (type === "updatePaymentSource") {
+      createNewVantivCard();
+    }
+
+    function createNewVantivCard() {
+      window.Pelcro.source.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: paymentRequest,
+        gateway: "vantiv"
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.sourceUpdated")
+          }
+        });
+        onSuccess(res);
+      });
     }
 
     function handleVantivSubscription() {
@@ -14357,7 +14402,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
       if ((source === null || source === void 0 ? void 0 : (_source$card2 = source.card) === null || _source$card2 === void 0 ? void 0 : _source$card2.three_d_secure) === "required") {
         return handlePaymentError({
-          message: t("messages.cardAuthNotSupported")
+          error: {
+            message: t("messages.cardAuthNotSupported")
+          }
         });
       }
 
@@ -14602,7 +14649,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
       if ((source === null || source === void 0 ? void 0 : source.status) === "failed") {
         return handlePaymentError({
-          message: t("messages.cardAuthFailed")
+          error: {
+            message: t("messages.cardAuthFailed")
+          }
         });
       }
 
@@ -14674,7 +14723,7 @@ const PaymentMethodContainerWithoutStripe = ({
           isLoading: true
         }, (state, dispatch) => {
           if (getSiteCardProcessor() === "vantiv") {
-            return submitVantivPayment();
+            return submitUsingVantiv();
           }
 
           if (selectedPaymentMethodId) {
@@ -25716,6 +25765,8 @@ const InvoiceDetailsView = props => {
     invoice
   } = usePelcro();
   const showPayButton = canPayInvoice(invoice);
+  const showDownloadButton = Boolean(invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf);
+  const hasPlanDetails = Boolean(invoice.plan);
   const creationDate = new Date(invoice === null || invoice === void 0 ? void 0 : invoice.created_at);
   const formattedCreationDate = new Intl.DateTimeFormat("en-CA").format(creationDate);
   return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -25733,7 +25784,7 @@ const InvoiceDetailsView = props => {
     className: "plc-font-bold pelcro-invoice-summary-title"
   }, t("labels.summary")), invoice && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("p", {
     className: "plc-mr-2 pelcro-invoice-creation-date"
-  }, `${t("labels.creationDate")} ${formattedCreationDate}`), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, `${t("labels.creationDate")} ${formattedCreationDate}`), hasPlanDetails && /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-pt-2 plc-mt-2 plc-border-t plc-border-gray-400 plc-min-h-12 plc-justify-between pelcro-invoice-plan-wrapper"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-break-words pelcro-invoice-plan-name"
@@ -25759,7 +25810,7 @@ const InvoiceDetailsView = props => {
     className: "plc-font-semibold pelcro-invoice-total"
   }, getFormattedPriceByLocal(invoice.amount_remaining, invoice.currency, getPageOrDefaultLanguage())))))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-flex plc-items-center plc-justify-center plc-mt-4"
-  }, /*#__PURE__*/React__default['default'].createElement(InvoiceDetailsDownloadButton, {
+  }, showDownloadButton && /*#__PURE__*/React__default['default'].createElement(InvoiceDetailsDownloadButton, {
     url: invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf,
     className: "plc-w-full plc-text-center"
   }), showPayButton && /*#__PURE__*/React__default['default'].createElement(InvoiceDetailsPayButton, {

package/dist/index.esm.js

@@ -4654,17 +4654,17 @@ var invoiceDetails_en = {
 	buttons: buttons$1
 };
 
-var title$2 = "Invoice details";
+var title$2 = "Détails de la facture";
 var labels = {
-	summary: "Summary",
+	summary: "Résumé",
 	total: "Total",
-	amountPaid: "Amount paid",
-	amountDue: "Amount due",
-	creationDate: "Created on:"
+	amountPaid: "Montant payé",
+	amountDue: "Montant dû",
+	creationDate: "Créé le:"
 };
 var buttons = {
-	download: "Download",
-	pay: "Pay now"
+	download: "Télécharger",
+	pay: "Payer"
 };
 var invoiceDetails_fr = {
 	title: title$2,
@@ -13570,8 +13570,11 @@ const PaymentMethodContainerWithoutStripe = ({
     updateTotalAmountWithTax();
   }, []);
 
-  const submitVantivPayment = () => {
-    if (selectedPaymentMethodId) {
+  const submitUsingVantiv = () => {
+    const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
+
+    if (isUsingExistingPaymentMethod) {
+      // no need to create a new source using vantiv
       return handleVantivPayment(null);
     }
 
@@ -13579,7 +13582,10 @@ const PaymentMethodContainerWithoutStripe = ({
       return console.error("Vantiv sdk script wasn't loaded, you need to load vantiv sdk before rendering the vantiv payment flow");
     }
 
-    const orderId = `pelcro-${new Date().getTime()}`; // calls handleVantivPayment
+    const orderId = `pelcro-${new Date().getTime()}`;
+    /*     
+    calls handleVantivPayment to either handle a payment or update a source by simply creating a new source 
+    */
 
     vantivInstanceRef.current.getPaypageRegistrationId({
       id: orderId,
@@ -13606,6 +13612,45 @@ const PaymentMethodContainerWithoutStripe = ({
       purchase(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, state, dispatch);
     } else if (type === "invoicePayment") {
       payInvoice(new VantivGateway(), isUsingExistingPaymentMethod ? selectedPaymentMethodId : paymentRequest, dispatch);
+    } else if (type === "updatePaymentSource") {
+      createNewVantivCard();
+    }
+
+    function createNewVantivCard() {
+      window.Pelcro.source.create({
+        auth_token: window.Pelcro.user.read().auth_token,
+        token: paymentRequest,
+        gateway: "vantiv"
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+
+        if (err) {
+          onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+
+        dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "success",
+            content: t("messages.sourceUpdated")
+          }
+        });
+        onSuccess(res);
+      });
     }
 
     function handleVantivSubscription() {
@@ -14327,7 +14372,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
       if ((source === null || source === void 0 ? void 0 : (_source$card2 = source.card) === null || _source$card2 === void 0 ? void 0 : _source$card2.three_d_secure) === "required") {
         return handlePaymentError({
-          message: t("messages.cardAuthNotSupported")
+          error: {
+            message: t("messages.cardAuthNotSupported")
+          }
         });
       }
 
@@ -14572,7 +14619,9 @@ const PaymentMethodContainerWithoutStripe = ({
 
       if ((source === null || source === void 0 ? void 0 : source.status) === "failed") {
         return handlePaymentError({
-          message: t("messages.cardAuthFailed")
+          error: {
+            message: t("messages.cardAuthFailed")
+          }
         });
       }
 
@@ -14644,7 +14693,7 @@ const PaymentMethodContainerWithoutStripe = ({
           isLoading: true
         }, (state, dispatch) => {
           if (getSiteCardProcessor() === "vantiv") {
-            return submitVantivPayment();
+            return submitUsingVantiv();
           }
 
           if (selectedPaymentMethodId) {
@@ -25686,6 +25735,8 @@ const InvoiceDetailsView = props => {
     invoice
   } = usePelcro();
   const showPayButton = canPayInvoice(invoice);
+  const showDownloadButton = Boolean(invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf);
+  const hasPlanDetails = Boolean(invoice.plan);
   const creationDate = new Date(invoice === null || invoice === void 0 ? void 0 : invoice.created_at);
   const formattedCreationDate = new Intl.DateTimeFormat("en-CA").format(creationDate);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -25703,7 +25754,7 @@ const InvoiceDetailsView = props => {
     className: "plc-font-bold pelcro-invoice-summary-title"
   }, t("labels.summary")), invoice && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
     className: "plc-mr-2 pelcro-invoice-creation-date"
-  }, `${t("labels.creationDate")} ${formattedCreationDate}`), /*#__PURE__*/React__default.createElement("div", {
+  }, `${t("labels.creationDate")} ${formattedCreationDate}`), hasPlanDetails && /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-pt-2 plc-mt-2 plc-border-t plc-border-gray-400 plc-min-h-12 plc-justify-between pelcro-invoice-plan-wrapper"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "plc-break-words pelcro-invoice-plan-name"
@@ -25729,7 +25780,7 @@ const InvoiceDetailsView = props => {
     className: "plc-font-semibold pelcro-invoice-total"
   }, getFormattedPriceByLocal(invoice.amount_remaining, invoice.currency, getPageOrDefaultLanguage())))))), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-flex plc-items-center plc-justify-center plc-mt-4"
-  }, /*#__PURE__*/React__default.createElement(InvoiceDetailsDownloadButton, {
+  }, showDownloadButton && /*#__PURE__*/React__default.createElement(InvoiceDetailsDownloadButton, {
     url: invoice === null || invoice === void 0 ? void 0 : invoice.invoice_pdf,
     className: "plc-w-full plc-text-center"
   }), showPayButton && /*#__PURE__*/React__default.createElement(InvoiceDetailsPayButton, {

package/package.json

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