@salesgenterp/ui-components 0.4.52 → 0.4.53

package/dist/index.js

@@ -2049,8 +2049,10 @@ var ButtonRowContainer = styled.div(_templateObject7$4 || (_templateObject7$4 =
 }, function (props) {
   return props.disabledBack ? 'not-allowed' : 'pointer';
 });
-var CheckBoxRow = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  padding: ", ";\n  p {\n    font-size: 0.85em;\n  }\n  button {\n    border: none;\n    padding: 0.8em 3em;\n    background: rgba(253, 0, 21, 1);\n    color: white;\n    text-transform: uppercase;\n    font-weight: 600;\n    margin: 1em;\n    margin-top: 2em;\n    transition: 0.4s;\n    cursor: pointer;\n    font-family: 'karla-fonts';\n    min-width: max-content;\n    &:hover {\n      padding: 0.7em 2.7em;\n    }\n  }\n  .back {\n    background-color: rgba(107, 106, 106, 1);\n    padding: 0.8em 2em;\n    &:hover {\n      padding: 0.8em 2.4em;\n    }\n  }\n  @media only screen and (max-width: 640px) {\n    button {\n      &:hover {\n        padding: 0.8em 3em;\n      }\n    }\n  }\n  .back {\n    &:hover {\n      padding: 0.8em 2em;\n    }\n  }\n"])), function (props) {
+var CheckBoxRow = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  padding: ", ";\n  margin-left: ", ";\n  p {\n    font-size: 0.85em;\n  }\n  button {\n    border: none;\n    padding: 0.8em 3em;\n    background: rgba(253, 0, 21, 1);\n    color: white;\n    text-transform: uppercase;\n    font-weight: 600;\n    margin: 1em;\n    margin-top: 2em;\n    transition: 0.4s;\n    cursor: pointer;\n    font-family: 'karla-fonts';\n    min-width: max-content;\n    &:hover {\n      padding: 0.7em 2.7em;\n    }\n  }\n  .back {\n    background-color: rgba(107, 106, 106, 1);\n    padding: 0.8em 2em;\n    &:hover {\n      padding: 0.8em 2.4em;\n    }\n  }\n  .bold,\n  .red {\n    font-weight: 700;\n    font-size: 1.125em;\n  }\n  .red {\n    color: #fd0015;\n    margin-left: 0.5em;\n  }\n  @media only screen and (max-width: 640px) {\n    button {\n      &:hover {\n        padding: 0.8em 3em;\n      }\n    }\n\n    .back {\n      &:hover {\n        padding: 0.8em 2em;\n      }\n      margin-left: 0;\n    }\n  }\n"])), function (props) {
   return props.padding;
+}, function (props) {
+  return props.marginLeft;
 });
 var DeliveryOption = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  max-width: 691px;\n  height: 40px;\n  padding: 0 1em;\n  border: 1px solid transparent;\n\n  transition: 0.3s;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  &:hover {\n    background-color: #fff0ec;\n    border: 1px solid #fce1d9;\n    border-radius: 5px;\n  }\n  p {\n    font-weight: 500;\n    color: black;\n    font-size: 0.95em;\n    text-transform: capitalize;\n  }\n  .circle {\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n    margin-right: 1em;\n    width: 14px;\n    height: 14px;\n    min-width: 14px;\n    min-height: 14px;\n    cursor: pointer;\n    .inner {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      display: grid;\n      place-items: center;\n      background: linear-gradient(\n        326.37deg,\n        rgba(67, 58, 42, 0.9) -219.66%,\n        rgba(255, 255, 255, 0.9) 90.45%\n      );\n      box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n        inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n    }\n    .fill {\n      width: 6px;\n      height: 6px;\n      background: radial-gradient(\n            15.79% 15.79% at 36.84% 31.58%,\n            #ffffff 0%,\n            rgba(255, 255, 255, 0) 100%\n          )\n          /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n        linear-gradient(\n          358.85deg,\n          rgba(157, 18, 30, 0.2) -19.81%,\n          rgba(12, 96, 157, 0) 64.74%\n        ),\n        radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n      background-blend-mode: normal, multiply, normal, normal;\n      box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n        0px 1px 1px rgba(253, 0, 21, 0.2);\n      border-radius: 50%;\n      background: #fd0015;\n    }\n  }\n  .amount {\n    margin-left: auto;\n    color: #fd0015;\n    font-weight: ", ";\n    font-size: 0.95em;\n  }\n"])), function (props) {
   return props.hovered ? '#fff0ec' : '';
@@ -2816,12 +2818,18 @@ var Step3 = function Step3(_ref) {
   var handleBack = _ref.handleBack,
       _handleNext = _ref.handleNext,
       setPaymentDetails = _ref.setPaymentDetails,
-      payments = _ref.payments;
+      payments = _ref.payments,
+      storeCredits = _ref.storeCredits,
+      total = _ref.total;
 
   var _useState = React.useState(payments && payments[0]),
       selectedMethod = _useState[0],
       setSelectedMethod = _useState[1];
 
+  var _useState2 = React.useState(true),
+      useStoreCr = _useState2[0],
+      setUseStoreCr = _useState2[1];
+
   var _useForm = reactHookForm.useForm(),
       control = _useForm.control,
       dirtyFields = _useForm.formState.dirtyFields,
@@ -2832,15 +2840,45 @@ var Step3 = function Step3(_ref) {
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'Payments Method',
     icon: 4
-  }), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
+  }), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
+    marginLeft: "1.8em",
+    style: {
+      paddingBottom: '1.5em',
+      marginTop: '-1em'
+    }
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "bold"
+  }, "Due Amount:"), /*#__PURE__*/React__default.createElement("span", {
+    className: "red"
+  }, " $", total === null || total === void 0 ? void 0 : total.toFixed(2))), storeCredits && /*#__PURE__*/React__default.createElement(CheckBoxRow, {
+    marginLeft: "1em",
+    style: {
+      paddingBottom: '1.5em',
+      marginTop: '-1em'
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
+    size: "small",
+    onChange: function onChange(e) {
+      setUseStoreCr(e.target.checked);
+    },
+    checked: useStoreCr
+  }), /*#__PURE__*/React__default.createElement("p", {
+    className: "bold"
+  }, "Store Credits:", ' ', /*#__PURE__*/React__default.createElement("span", {
+    className: "bold"
+  }, "$", storeCredits === null || storeCredits === void 0 ? void 0 : storeCredits.toFixed(2)))), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
     var _payment$name;
 
     if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
         key: i
       }, /*#__PURE__*/React__default.createElement(PaymentLi, {
+        style: storeCredits >= total && useStoreCr ? {
+          opacity: '.6'
+        } : {},
         onClick: function onClick() {
-          return setSelectedMethod(payment);
+          if (storeCredits >= total && useStoreCr) return;
+          setSelectedMethod(payment);
         }
       }, /*#__PURE__*/React__default.createElement("div", {
         className: "circle"
@@ -2850,7 +2888,10 @@ var Step3 = function Step3(_ref) {
         container: true,
         rowSpacing: 2,
         paddingLeft: "1em",
-        paddingBottom: '1em'
+        paddingBottom: '1em',
+        style: storeCredits >= total && useStoreCr ? {
+          opacity: '.6'
+        } : {}
       }, Images === null || Images === void 0 ? void 0 : Images.map(function (img, i) {
         return /*#__PURE__*/React__default.createElement(material.Grid, {
           item: true,
@@ -2868,8 +2909,12 @@ var Step3 = function Step3(_ref) {
       }));
     } else {
       return /*#__PURE__*/React__default.createElement(PaymentLi, {
+        style: storeCredits >= total && useStoreCr ? {
+          opacity: '.6'
+        } : {},
         onClick: function onClick() {
-          return setSelectedMethod(payment);
+          if (storeCredits >= total && useStoreCr) return;
+          setSelectedMethod(payment);
         }
       }, /*#__PURE__*/React__default.createElement("div", {
         className: "circle"
@@ -2880,7 +2925,7 @@ var Step3 = function Step3(_ref) {
   }), /*#__PURE__*/React__default.createElement(ButtonRow, {
     handleBack: handleBack,
     handleNext: function handleNext() {
-      setPaymentDetails(selectedMethod, getValues());
+      setPaymentDetails(useStoreCr, selectedMethod, isCard && getValues());
 
       _handleNext();
     },
@@ -3140,6 +3185,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       deliveryOptions = _ref.deliveryOptions,
       setPaymentDetails = _ref.setPaymentDetails,
       paymentMethods = _ref.paymentMethods,
+      storeCredits = _ref.storeCredits,
       cartData = _ref.cartData,
       vat = _ref.vat,
       clickRedirect = _ref.clickRedirect,
@@ -3269,7 +3315,9 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       handleBack: handleBack,
       handleNext: handleNext,
       setPaymentDetails: setPaymentDetails,
-      payments: paymentMethods
+      payments: paymentMethods,
+      storeCredits: storeCredits,
+      total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice
     })), index === 4 && /*#__PURE__*/React__default.createElement(material.StepContent, {
       sx: {
         padding: 0