@salesgenterp/ui-components 0.4.336 → 0.4.338

package/dist/index.js

@@ -10891,6 +10891,124 @@ var InfoItem = function InfoItem(_ref3) {
 };
 var InfoItemContainer = styled__default.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  background: #00000010;\n  padding: 0.5rem;\n"])));
 
+var PaypalComponent = function PaypalComponent(_ref) {
+  var apiEndPoint = _ref.apiEndPoint,
+    token = _ref.token,
+    paymentWithPaypal = _ref.paymentWithPaypal,
+    paymentInfo = _ref.paymentInfo,
+    onSubmit = _ref.onSubmit,
+    orderTotal = _ref.orderTotal;
+  var isScriptInitialized;
+  var paypalInterval;
+  var renderPaypalScripts = function renderPaypalScripts(paypalClientId) {
+    try {
+      return Promise.resolve(new Promise(function (resolve, reject) {
+        if (!isScriptInitialized && !window.paypal) {
+          isScriptInitialized = true;
+          var PAYPAL_SCRIPT = "https://www.paypal.com/sdk/js?client-id=" + paypalClientId;
+          var script = document.createElement('script');
+          script.setAttribute('src', PAYPAL_SCRIPT);
+          document.body.appendChild(script);
+        }
+        if (window.paypal) {
+          return resolve();
+        }
+        paypalInterval = setInterval(function () {
+          if (window.paypal) {
+            resolve();
+            clearInterval(paypalInterval);
+          }
+        }, 1000);
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var viewPaypalContainer = function viewPaypalContainer(isLoading) {
+    var paypalLoading = document.querySelector('.paypal-loading');
+    var paypalContainer = document.querySelector('.paypal-container');
+    if (paypalLoading && paypalContainer) {
+      if (isLoading) {
+        paypalLoading.style.display = "block";
+        paypalContainer.style.display = "none";
+      } else {
+        paypalLoading.style.display = "none";
+        paypalContainer.style.display = "block";
+      }
+    }
+  };
+  React.useEffect(function () {
+    (function () {
+      try {
+        var _temp2 = function () {
+          if (paymentWithPaypal) {
+            return Promise.resolve(API$1({
+              apiEndPoint: apiEndPoint,
+              token: token,
+              url: "/payment/paypal/config"
+            })).then(function (paypalObject) {
+              var _temp = function () {
+                if (paypalObject.customerId) {
+                  return Promise.resolve(renderPaypalScripts(paypalObject.customerId)).then(function () {
+                    window.paypal.Buttons({
+                      createOrder: function createOrder(data, actions) {
+                        if (erLocalStorage.getItem('checkoutIsTermsAccepted') !== 'true') {
+                          throw {
+                            message: 'Please accept terms and conditions.'
+                          };
+                        }
+                        return actions.order.create({
+                          purchase_units: [{
+                            amount: {
+                              value: (orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.totalAmount) || 0
+                            }
+                          }]
+                        });
+                      },
+                      onApprove: function (data, actions) {
+                        try {
+                          return Promise.resolve(actions.order.capture().then(function (details) {
+                            onSubmit(details.id);
+                          }));
+                        } catch (e) {
+                          return Promise.reject(e);
+                        }
+                      },
+                      onCancel: function onCancel(data) {
+                        alert('PayPal payment cancelled');
+                      },
+                      onError: function onError(err) {
+                        alert((err === null || err === void 0 ? void 0 : err.message) || 'Payment cannot be performed');
+                      }
+                    }).render('#paypal-button-container');
+                    viewPaypalContainer(false);
+                  });
+                }
+              }();
+              if (_temp && _temp.then) return _temp.then(function () {});
+            });
+          }
+        }();
+        return _temp2 && _temp2.then ? _temp2.then(function () {}) : void 0;
+      } catch (e) {
+        Promise.reject(e);
+      }
+    })();
+  }, []);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    css: {
+      display: paymentInfo && paymentInfo.name === 'PayPal' ? 'block' : 'none'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "paypal-loading"
+  }, /*#__PURE__*/React__default.createElement(Loader, {
+    height: 100
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "paypal-container",
+    id: "paypal-button-container"
+  })));
+};
+
 var Step4 = function Step4(_ref) {
   var _cartData$cartLineIte;
   var apiEndPoint = _ref.apiEndPoint,
@@ -10909,7 +11027,9 @@ var Step4 = function Step4(_ref) {
     customer = _ref.customer,
     shippingInformation = _ref.shippingInformation,
     taxExempt = _ref.taxExempt,
-    orderTotal = _ref.orderTotal;
+    orderTotal = _ref.orderTotal,
+    paymentWithPaypal = _ref.paymentWithPaypal,
+    selectedPaymentMethod = _ref.selectedPaymentMethod;
   var _React$useState = React__default.useState(false),
     checked = _React$useState[0],
     setChecked = _React$useState[1];
@@ -10924,6 +11044,13 @@ var Step4 = function Step4(_ref) {
     discountTotal = discountTotal + element.amount;
   });
   var storeCr = storeCredits > (orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.totalAmount) ? orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.totalAmount : storeCredits;
+  var onSubmitPaypal = function onSubmitPaypal(transactionId) {
+    try {
+      return Promise.resolve(placeOrder(comments, transactionId)).then(function () {});
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, openConsentForm && /*#__PURE__*/React__default.createElement(ConsentForm, {
     apiEndPoint: apiEndPoint,
     token: token,
@@ -11148,9 +11275,10 @@ var Step4 = function Step4(_ref) {
     size: "small",
     value: checked,
     onChange: function onChange() {
-      return setChecked(function (checked) {
+      setChecked(function (checked) {
         return !checked;
       });
+      erLocalStorage.setItem('checkoutIsTermsAccepted', !checked);
     },
     required: true
   }), /*#__PURE__*/React__default.createElement("p", null, "I Accept the \xA0", /*#__PURE__*/React__default.createElement("span", {
@@ -11180,7 +11308,7 @@ var Step4 = function Step4(_ref) {
     onClick: function onClick() {
       return handleBack();
     }
-  }, "back"), /*#__PURE__*/React__default.createElement("button", {
+  }, "back"), !(paymentWithPaypal && (selectedPaymentMethod === null || selectedPaymentMethod === void 0 ? void 0 : selectedPaymentMethod.name) === 'PayPal') && /*#__PURE__*/React__default.createElement("button", {
     onClick: function onClick(e) {
       try {
         e.preventDefault();
@@ -11212,7 +11340,14 @@ var Step4 = function Step4(_ref) {
     style: {
       margin: '0 2.8em'
     }
-  }) : 'place order'))))))));
+  }) : 'place order')), paymentWithPaypal && (selectedPaymentMethod === null || selectedPaymentMethod === void 0 ? void 0 : selectedPaymentMethod.name) === 'PayPal' && /*#__PURE__*/React__default.createElement(PaypalComponent, {
+    apiEndPoint: apiEndPoint,
+    token: token,
+    paymentWithPaypal: paymentWithPaypal,
+    paymentInfo: selectedPaymentMethod,
+    onSubmit: onSubmitPaypal,
+    orderTotal: orderTotal
+  })))))));
 };
 
 var steps = [{
@@ -11246,6 +11381,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
   var apiEndPoint = _ref.apiEndPoint,
     token = _ref.token,
     authoriseDotNet = _ref.authoriseDotNet,
+    paymentWithPaypal = _ref.paymentWithPaypal,
     ccProcessingFees = _ref.ccProcessingFees,
     styles = _ref.styles,
     cartData = _ref.cartData,
@@ -11526,7 +11662,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       setSelectedPaymentMethod(paymentMethod);
     }
   };
-  var onPlaceOrder = function onPlaceOrder(note) {
+  var onPlaceOrder = function onPlaceOrder(note, transactionId) {
     try {
       var _temp15 = function _temp15() {
         setOrdering(false);
@@ -11602,7 +11738,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
           orderPaymentList = [_extends({
             amount: parseFloat((_ref7 = (orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.totalAmount) - discountTotal) === null || _ref7 === void 0 ? void 0 : _ref7.toFixed(2)),
             paymentModeId: selectedPaymentMethod === null || selectedPaymentMethod === void 0 ? void 0 : selectedPaymentMethod.id,
-            customerOrderCard: ecommerceCustomPaymentDto
+            customerOrderCard: ecommerceCustomPaymentDto,
+            transactionId: transactionId
           }, authorizeCustomerCardData)];
         }
         var paymentDtoList = orderPaymentList;
@@ -11799,7 +11936,9 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
         return (item === null || item === void 0 ? void 0 : item.id) === shippingAddressId;
       }),
       taxExempt: taxExempt,
-      orderTotal: orderTotal
+      orderTotal: orderTotal,
+      paymentWithPaypal: paymentWithPaypal,
+      selectedPaymentMethod: selectedPaymentMethod
     })));
   }))))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
     billingInformation: customer === null || customer === void 0 ? void 0 : (_customer$customerDto12 = customer.customerDto) === null || _customer$customerDto12 === void 0 ? void 0 : (_customer$customerDto13 = _customer$customerDto12.customerStoreAddressList) === null || _customer$customerDto13 === void 0 ? void 0 : _customer$customerDto13.find(function (item) {