@salesgenterp/ui-components 0.4.335 → 0.4.337

package/dist/index.js

@@ -4812,7 +4812,8 @@ var LandingCarousel = function LandingCarousel(_ref) {
   var _brandData2;
   var brandList = _ref.brandList,
     noImgUrl = _ref.noImgUrl,
-    isSlider = _ref.isSlider;
+    isSlider = _ref.isSlider,
+    filterNoUrlData = _ref.filterNoUrlData;
   var brandListData = (brandList === null || brandList === void 0 ? void 0 : brandList.content) || [];
   var spaceBetweenCol = 4;
   var brandData = function brandData() {
@@ -4859,10 +4860,14 @@ var LandingCarousel = function LandingCarousel(_ref) {
     var _brandData;
     return /*#__PURE__*/React__default.createElement(Root$6, null, /*#__PURE__*/React__default.createElement(material.Grid, {
       container: true,
-      spacing: 1
+      spacing: 1,
+      justifyContent: 'center'
     }, (_brandData = brandData()) === null || _brandData === void 0 ? void 0 : _brandData.map(function (item, i) {
-      var _item$brandAttachment, _item$brandAttachment2;
+      var _item$brandAttachment, _item$brandAttachment2, _item$brandAttachment3, _item$brandAttachment4;
       var brand = item === null || item === void 0 ? void 0 : (_item$brandAttachment = item.brandAttachmentMap) === null || _item$brandAttachment === void 0 ? void 0 : (_item$brandAttachment2 = _item$brandAttachment['Brand Logo']) === null || _item$brandAttachment2 === void 0 ? void 0 : _item$brandAttachment2[0];
+      if (filterNoUrlData && !(item !== null && item !== void 0 && (_item$brandAttachment3 = item.brandAttachmentMap) !== null && _item$brandAttachment3 !== void 0 && (_item$brandAttachment4 = _item$brandAttachment3['Brand Logo']) !== null && _item$brandAttachment4 !== void 0 && _item$brandAttachment4[0])) {
+        return;
+      }
       return /*#__PURE__*/React__default.createElement(material.Grid, {
         item: true,
         key: i
@@ -4892,8 +4897,8 @@ var LandingCarousel = function LandingCarousel(_ref) {
   }), /*#__PURE__*/React__default.createElement(ReactSlick, _extends({}, settings(), {
     spaceBetweenCol: spaceBetweenCol 
   }), (_brandData2 = brandData()) === null || _brandData2 === void 0 ? void 0 : _brandData2.map(function (item, i) {
-    var _item$brandAttachment3, _item$brandAttachment4;
-    var brand = item === null || item === void 0 ? void 0 : (_item$brandAttachment3 = item.brandAttachmentMap) === null || _item$brandAttachment3 === void 0 ? void 0 : (_item$brandAttachment4 = _item$brandAttachment3['Brand Logo']) === null || _item$brandAttachment4 === void 0 ? void 0 : _item$brandAttachment4[0];
+    var _item$brandAttachment5, _item$brandAttachment6;
+    var brand = item === null || item === void 0 ? void 0 : (_item$brandAttachment5 = item.brandAttachmentMap) === null || _item$brandAttachment5 === void 0 ? void 0 : (_item$brandAttachment6 = _item$brandAttachment5['Brand Logo']) === null || _item$brandAttachment6 === void 0 ? void 0 : _item$brandAttachment6[0];
     return /*#__PURE__*/React__default.createElement(SliderItem, null, /*#__PURE__*/React__default.createElement("a", {
       href: (brand === null || brand === void 0 ? void 0 : brand.redirectPath) || ''
     }, isVideo(brand === null || brand === void 0 ? void 0 : brand.url) ? /*#__PURE__*/React__default.createElement(Video, {
@@ -4930,7 +4935,9 @@ var BrandList = function BrandList(_ref) {
     size = _ref$size === void 0 ? 20 : _ref$size,
     _ref$isSlider = _ref.isSlider,
     isSlider = _ref$isSlider === void 0 ? true : _ref$isSlider,
-    noImgUrl = _ref.noImgUrl;
+    noImgUrl = _ref.noImgUrl,
+    _ref$filterNoUrlData = _ref.filterNoUrlData,
+    filterNoUrlData = _ref$filterNoUrlData === void 0 ? false : _ref$filterNoUrlData;
   var _useState = React.useState(false),
     loading = _useState[0],
     setLoading = _useState[1];
@@ -4963,7 +4970,8 @@ var BrandList = function BrandList(_ref) {
   }, /*#__PURE__*/React__default.createElement(Root$7, null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(MainContainer$1, null, loading ? /*#__PURE__*/React__default.createElement(Loader, null) : /*#__PURE__*/React__default.createElement(LandingCarousel, {
     brandList: brandList,
     noImgUrl: noImgUrl,
-    isSlider: isSlider
+    isSlider: isSlider,
+    filterNoUrlData: filterNoUrlData
   }))));
 };
 var Root$7 = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose([""])));
@@ -10883,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,
+    checked = _ref.checked,
+    loading = _ref.loading;
+  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 setCreateOrderLoading = function setCreateOrderLoading(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 _temp = function () {
+          if (paymentWithPaypal) {
+            return Promise.resolve(API$1({
+              apiEndPoint: apiEndPoint,
+              token: token,
+              url: "/payment/paypal/config"
+            })).then(function (paypalObject) {
+              return Promise.resolve(renderPaypalScripts(paypalObject.customerId)).then(function () {
+                window.paypal.Buttons({
+                  createOrder: function createOrder(data, actions) {
+                    if (!checked) {
+                      throw {
+                        message: 'Please accept terms and conditions.'
+                      };
+                    }
+                    if (loading) {
+                      throw {
+                        message: 'We are placing your order, please wait.'
+                      };
+                    }
+                    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');
+                setCreateOrderLoading(false);
+              });
+            });
+          }
+        }();
+        return _temp && _temp.then ? _temp.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(material.CircularProgress, null)), /*#__PURE__*/React__default.createElement("div", {
+    className: "paypal-container",
+    id: "paypal-button-container"
+  })));
+};
+
 var Step4 = function Step4(_ref) {
   var _cartData$cartLineIte;
   var apiEndPoint = _ref.apiEndPoint,
@@ -10901,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];
@@ -10916,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,
@@ -11172,7 +11307,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();
@@ -11204,7 +11339,16 @@ 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,
+    checked: checked,
+    loading: loading
+  })))))));
 };
 
 var steps = [{
@@ -11238,6 +11382,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,
@@ -11518,7 +11663,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);
@@ -11594,7 +11739,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;
@@ -11791,7 +11937,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) {