@salesgenterp/ui-components 0.4.28 → 0.4.30

package/dist/index.modern.js

@@ -2016,8 +2016,8 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
 };
 
 var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  min-width: 57.43em;\n  max-width: 57.43em;\n  background: white;\n  padding: 1em 2em;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-left: 2em;\n  margin-top: -2em;\n  margin-bottom: 1em;\n  @media screen and (max-width: 1305px) {\n    width: 80vw;\n    min-width: 0;\n  }\n  @media screen and (max-width: 768px) {\n    width: calc(100vw - 40px);\n    margin-left: 1em;\n    padding: 1em;\n  }\n"])));
-var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  padding-left: 2.5em;\n  min-height: max-content;\n  .bold {\n    text-transform: uppercase;\n    word-spacing: 5px;\n    margin-top: 1em;\n    span {\n      font-weight: 700;\n      cursor: pointer;\n    }\n    .red {\n      color: red;\n    }\n  }\n"])));
+var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  min-width: 57.43em;\n  max-width: 57.43em;\n  background: white;\n  padding: 1em 2em;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-left: 2em;\n  margin-top: -2em;\n  margin-bottom: 1em;\n  @media screen and (max-width: 1305px) {\n    width: 80vw;\n    min-width: 0;\n  }\n  @media screen and (max-width: 768px) {\n    width: 96%;\n    margin-left: 1em;\n    padding: 0;\n  }\n"])));
+var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  padding-left: 2.5em;\n  min-height: max-content;\n  .bold {\n    text-transform: uppercase;\n    word-spacing: 5px;\n    margin-top: 1em;\n    span {\n      font-weight: 700;\n      cursor: pointer;\n    }\n    .red {\n      color: red;\n    }\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n    width: 100%;\n  }\n"])));
 var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  font-family: 'karla-fonts';\n  color: #323232;\n  padding: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n  /* color: grey; */\n  border-bottom: 1px solid #fff0ec;\n  background: #ffffff;\n  border-radius: 20px;\n  max-width: 919px;\n  h5 {\n    font-size: 16px;\n    font-weight: 700;\n    text-transform: capitalize;\n  }\n  .icon {\n    font-size: 1.3em;\n    margin-right: 8px;\n  }\n  .dropIcon {\n    font-size: 1.4em;\n    cursor: pointer;\n    transform: rotate(-90deg);\n    transition: 0.3s;\n    color: rgba(50, 50, 50, 0.75);\n  }\n  @media screen and (max-width: 768px) {\n    max-width: 97%;\n    margin-left: 1em;\n    font-size: 12px;\n    /* padding: 1.5em 2em; */\n  }\n"])), function (props) {
   return props.single ? '1.8em 2em' : '1em 0';
 }, function (props) {
@@ -2045,10 +2045,12 @@ var CheckBoxRow = styled.div(_templateObject7$3 || (_templateObject7$3 = _tagged
 });
 var DeliveryCard = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fd0015;\n  color: white;\n  height: 34px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5em 1em;\n  margin-right: 1em;\n  margin-bottom: 1em;\n  /* padding: 1em 0.4em; */\n  cursor: pointer;\n  img {\n    width: 38px;\n    height: 17px;\n    margin-bottom: -5px;\n    margin-right: 4px;\n  }\n  p {\n    font-size: 10px;\n  }\n  .circle {\n    width: 10px;\n    height: 10px;\n    border-radius: 1px solid black;\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n    margin-left: auto;\n    margin-left: 5px;\n    .smallCircle {\n      width: 4px;\n      height: 4px;\n      background: black;\n      border-radius: 50%;\n    }\n  }\n"])));
 var CreditCard = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  width: 70px;\n  min-height: 48px;\n  max-height: 50px;\n  background-color: white;\n  border: 3px solid rgba(217, 217, 217, 0.1);\n  display: grid;\n  place-items: center;\n  margin: auto;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: 5px;\n  transition: 0.1s;\n  border: 1px solid transparent;\n  text-align: center;\n  p {\n    font-size: 10px;\n  }\n  &:hover,\n  &:focus {\n    border: 1px solid black;\n  }\n"])));
-var StyledTableRow = styled(TableRow)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  && {\n    box-shadow: none;\n    border: none;\n    background-color: ", ";\n    p {\n      font-size: 0.9em;\n      font-family: 'karla-fonts';\n    }\n    .max {\n      min-width: max-content;\n    }\n    .red {\n      color: red;\n      font-weight: inherit;\n    }\n    .price {\n      font-weight: 700;\n    }\n  }\n"])), function (props) {
+var StyledTableRow = styled(TableRow)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  && {\n    box-shadow: none;\n    border: none;\n    background-color: ", ";\n    p {\n      font-size: 0.9em;\n      font-family: 'karla-fonts';\n    }\n    .max {\n      min-width: max-content;\n    }\n    .red {\n      color: red;\n      font-weight: inherit;\n    }\n    .price {\n      font-weight: 700;\n    }\n    @media only screen and (max-width: 640px) {\n      p {\n        font-size: 12px;\n      }\n      .sm {\n        font-size: 8px;\n      }\n      .price,\n      .red {\n        font-size: 10px;\n      }\n      .total {\n        font-size: 14px;\n      }\n    }\n  }\n"])), function (props) {
   return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
 });
-var StyledTableCell = styled(TableCell)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  && {\n    border: none;\n    font-size: 1em;\n  }\n"])));
+var StyledTableCell = styled(TableCell)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  && {\n    border: none;\n    font-size: 1em;\n    .noAboveSm {\n      display: none;\n    }\n    @media only screen and (max-width: 748px) {\n      display: ", ";\n      padding: 0.5em 0.3em;\n      .noAboveSm {\n        display: inline-block;\n        margin-right: 6px;\n      }\n    }\n  }\n"])), function (props) {
+  return props.noSmall ? 'none' : '';
+});
 var BottomGrid = styled(Grid)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  .bold {\n    font-weight: 700;\n    text-transform: capitalize;\n    margin: 1em 0;\n    font-size: 1em;\n  }\n  .icon {\n    font-size: 1.6em;\n    color: rgba(253, 0, 21, 1);\n  }\n  textarea {\n    width: 100%;\n    resize: none;\n    background: #fff8f6;\n    border: 1px solid rgba(253, 0, 21, 0.5);\n    border-radius: 4px;\n    margin-bottom: 2em;\n    padding: 1em;\n  }\n  p {\n    font-size: 12px;\n    .ul {\n      text-decoration: underline;\n      font-size: inherit;\n    }\n  }\n  .bottom {\n    margin-left: 3em;\n    font-style: italic;\n    span {\n      font-weight: 700;\n      color: rgba(253, 0, 21, 1);\n\n      cursor: pointer;\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])));
 
 var CheckoutInput = function CheckoutInput(_ref) {
@@ -2553,7 +2555,8 @@ var Step3 = function Step3(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 10
+    xs: 12,
+    md: 10
   }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'cardName',
@@ -2567,7 +2570,8 @@ var Step3 = function Step3(_ref) {
     }
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 10
+    xs: 12,
+    md: 10
   }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'cardNumber',
@@ -2639,10 +2643,12 @@ var Step4 = function Step4(_ref) {
   var _cartData$cartLineIte, _cartData$totalCartPr;
 
   var handleBack = _ref.handleBack,
-      handleNext = _ref.handleNext,
       cartData = _ref.cartData,
       vatPercentage = _ref.vat,
-      clickRedirect = _ref.clickRedirect;
+      clickRedirect = _ref.clickRedirect,
+      deliveryCharges = _ref.deliveryCharges,
+      loading = _ref.loading,
+      placeOrder = _ref.placeOrder;
 
   var _React$useState = React__default.useState(false),
       checked = _React$useState[0],
@@ -2659,7 +2665,6 @@ var Step4 = function Step4(_ref) {
   }
 
   var vat = vatPercentage / 100 * (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice);
-  console.log(vat);
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'Order Review',
     Icon: Icon
@@ -2675,14 +2680,20 @@ var Step4 = function Step4(_ref) {
     return /*#__PURE__*/React__default.createElement(StyledTableRow, {
       key: row.name,
       colored: i % 2 === 0
-    }, /*#__PURE__*/React__default.createElement(StyledTableCell, null, /*#__PURE__*/React__default.createElement("p", {
+    }, /*#__PURE__*/React__default.createElement(StyledTableCell, {
+      noSmall: true
+    }, /*#__PURE__*/React__default.createElement("p", {
       className: "price max"
     }, "ID: #", row === null || row === void 0 ? void 0 : row.productId)), /*#__PURE__*/React__default.createElement(StyledTableCell, {
-      align: "left"
-    }, /*#__PURE__*/React__default.createElement("p", null, row.productName)), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+      align: "left",
+      component: 'th',
+      scope: "row"
+    }, /*#__PURE__*/React__default.createElement("p", null, ' ', /*#__PURE__*/React__default.createElement("span", {
+      className: "noAboveSm price"
+    }, "ID: #", row === null || row === void 0 ? void 0 : row.productId), row.productName)), /*#__PURE__*/React__default.createElement(StyledTableCell, {
       align: "left"
     }, /*#__PURE__*/React__default.createElement("p", {
-      className: "price"
+      className: "price max"
     }, (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2), /*#__PURE__*/React__default.createElement("span", {
       className: "red"
     }, " x ", row.quantity))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -2691,52 +2702,64 @@ var Step4 = function Step4(_ref) {
       className: "price max"
     }, (_ref2 = row.quantity * (row === null || row === void 0 ? void 0 : row.standardPrice)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))));
   }), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
-    colSpan: 2
+    colSpan: 1,
+    noSmall: true
+  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+    colSpan: 1
   }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 1
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "max"
+    className: "max sm"
   }, "Total(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     align: "right"
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "max price"
+    className: "max sm price"
   }, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2)))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
-    colSpan: 2
+    colSpan: 1,
+    noSmall: true
+  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+    colSpan: 1
   }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 1
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "max"
+    className: "max sm"
   }, "Value added tax (VAT)")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     align: "right"
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "max price"
+    className: "max sm price"
   }, "$", vat === null || vat === void 0 ? void 0 : vat.toFixed(2)))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
-    colSpan: 2
+    colSpan: 1,
+    noSmall: true
+  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+    colSpan: 1
   }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 1
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "max"
+    className: "max sm"
   }, "Delivery Charge")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     align: "right"
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "max price red"
-  }, "Free"))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
-    colSpan: 2
+    className: "max sm price red"
+  }, deliveryCharges && deliveryCharges > 0 ? deliveryCharges === null || deliveryCharges === void 0 ? void 0 : deliveryCharges.toFixed(2) : 'Free'))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
+    colSpan: 1,
+    noSmall: true
+  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+    colSpan: 1
   }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     sx: {
       paddingTop: '1em'
     },
     colSpan: 1
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "max price red"
+    className: "max sm price red"
   }, "Subtotal")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     sx: {
       paddingTop: '1em'
     },
     align: "right"
   }, /*#__PURE__*/React__default.createElement("p", {
-    className: "max price red"
-  }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) + vat).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
+    className: "max sm total price red"
+  }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) + vat + deliveryCharges).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
     container: true,
     columnSpacing: 0,
     rowSpacing: 0
@@ -2747,12 +2770,16 @@ var Step4 = function Step4(_ref) {
     className: "bold"
   }, "Your Comment")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 0.5
+    xs: 1,
+    sm: 1,
+    md: 0.5
   }, /*#__PURE__*/React__default.createElement(CgProfile, {
     className: "icon"
   })), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 11.5
+    xs: 11,
+    sm: 11,
+    md: 11.5
   }, /*#__PURE__*/React__default.createElement("textarea", {
     rows: "3",
     cols: "4",
@@ -2771,7 +2798,8 @@ var Step4 = function Step4(_ref) {
       return setChecked(function (checked) {
         return !checked;
       });
-    }
+    },
+    required: true
   }), /*#__PURE__*/React__default.createElement("p", null, "I Accept the ", /*#__PURE__*/React__default.createElement("span", {
     className: "ul"
   }, "Tearms and Conditions"), ' ', "& ", /*#__PURE__*/React__default.createElement("span", {
@@ -2791,12 +2819,23 @@ var Step4 = function Step4(_ref) {
       return handleBack();
     }
   }, "back"), /*#__PURE__*/React__default.createElement("button", {
-    onClick: function onClick() {
+    onClick: function onClick(e) {
+      e.preventDefault();
+
       if (checked) {
-        handleNext();
+        placeOrder(comments);
+      } else {
+        alert('please accept the privacy policy');
       }
+    },
+    type: "submit"
+  }, loading ? /*#__PURE__*/React__default.createElement(CircularProgress, {
+    color: "inherit",
+    size: 15,
+    style: {
+      margin: '0 2.8em'
     }
-  }, "place order")))))));
+  }) : 'place order')))))));
 };
 
 var steps = [{
@@ -2860,7 +2899,9 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       userAddresses = _ref.userAddresses,
       showShipping = _ref.showShipping,
       clickRedirect = _ref.clickRedirect,
-      ordering = _ref.ordering;
+      ordering = _ref.ordering,
+      deliveryCharges = _ref.deliveryCharges,
+      placeOrder = _ref.placeOrder;
   return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
     className: "checkout"
   }, /*#__PURE__*/React__default.createElement(CheckoutMain, null, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
@@ -2967,7 +3008,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       cartData: cartData,
       vat: vat,
       clickRedirect: clickRedirect,
-      loading: ordering
+      loading: ordering,
+      deliveryCharges: deliveryCharges,
+      ordering: loading,
+      placeOrder: placeOrder
     })));
   }))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
     billingInformation: billingAddress,