@salesgenterp/ui-components 0.4.51 → 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' : '';
@@ -2357,6 +2359,7 @@ var StoreForm = function StoreForm(_ref) {
 var AddressForm = function AddressForm(_ref) {
   var control = _ref.control,
       countries = _ref.countries,
+      states = _ref.states,
       _onSubmit = _ref.onSubmit,
       handleSubmit = _ref.handleSubmit;
   return /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -2378,8 +2381,18 @@ var AddressForm = function AddressForm(_ref) {
     sm: 10
   }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
-      name: 'fullAddress',
-      placeholder: 'Full Address*',
+      name: 'address1',
+      placeholder: 'Address 1*',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'address2',
+      placeholder: 'Address 2*',
       control: control
     }
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -2397,12 +2410,14 @@ var AddressForm = function AddressForm(_ref) {
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 6,
-    sm: 3.33
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
     controlls: {
       name: 'state',
-      placeholder: 'State/Province*',
-      control: control
+      placeholder: 'State',
+      control: control,
+      List: states,
+      key: 'name'
     }
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
@@ -2422,7 +2437,8 @@ var AddressForm = function AddressForm(_ref) {
     controlls: {
       name: 'zip',
       placeholder: 'Zip/Postal Code*',
-      control: control
+      control: control,
+      type: 'number'
     }
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
@@ -2455,7 +2471,9 @@ var Step1 = function Step1(_ref) {
       stores = _ref.stores,
       selectedStore = _ref.selectedStore,
       setSelectedStore = _ref.setSelectedStore,
-      countries = _ref.countries;
+      countries = _ref.countries,
+      setSelectedCountry = _ref.setSelectedCountry,
+      states = _ref.states;
 
   var _useForm = reactHookForm.useForm(),
       control = _useForm.control,
@@ -2467,12 +2485,14 @@ var Step1 = function Step1(_ref) {
 
   var _useForm2 = reactHookForm.useForm(),
       addressControl = _useForm2.control,
+      watch = _useForm2.watch,
       handleSubmitAddress = _useForm2.handleSubmit;
 
   var StoresList = [].concat(stores, [{
-    storeName: 'add Store',
+    storeName: 'Add Store',
     id: 99999999
   }]);
+  var selectedCountry = watch('country');
   var selectedStores = stores === null || stores === void 0 ? void 0 : stores.find(function (store) {
     return (store === null || store === void 0 ? void 0 : store.id) === selectedStore;
   });
@@ -2480,7 +2500,7 @@ var Step1 = function Step1(_ref) {
 
   if (selectedStores !== null && selectedStores !== void 0 && selectedStores.customerStoreAddressList) {
     addressList = [].concat(selectedStores === null || selectedStores === void 0 ? void 0 : selectedStores.customerStoreAddressList, [{
-      name: 'add billing Address',
+      name: 'Add billing Address',
       id: 99999999
     }]);
   }
@@ -2509,6 +2529,9 @@ var Step1 = function Step1(_ref) {
     handleNext();
   };
 
+  React.useEffect(function () {
+    setSelectedCountry(selectedCountry);
+  }, [selectedCountry]);
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'billing information',
     icon: 2
@@ -2557,7 +2580,8 @@ var Step1 = function Step1(_ref) {
     control: addressControl,
     handleSubmit: handleSubmitAddress,
     onSubmit: addAddress,
-    countries: countries
+    countries: countries,
+    states: states
   }), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12
@@ -2595,7 +2619,9 @@ var Step2 = function Step2(_ref) {
       options = _ref.options,
       setShipping = _ref.setShipping,
       countries = _ref.countries,
+      states = _ref.states,
       addShipping = _ref.addShipping,
+      setSelectedCountry = _ref.setSelectedCountry,
       showShipping = _ref.showShipping,
       selectedStore = _ref.selectedStore,
       stores = _ref.stores;
@@ -2603,12 +2629,14 @@ var Step2 = function Step2(_ref) {
   var _useForm = reactHookForm.useForm(),
       control = _useForm.control,
       handleSubmit = _useForm.handleSubmit,
-      resetField = _useForm.resetField;
+      resetField = _useForm.resetField,
+      watch = _useForm.watch;
 
   var _React$useState = React__default.useState(options[0]),
       method = _React$useState[0],
       setmethod = _React$useState[1];
 
+  var selectedCountry = watch('country');
   var selectedStores = stores === null || stores === void 0 ? void 0 : stores.find(function (store) {
     return (store === null || store === void 0 ? void 0 : store.id) === selectedStore;
   });
@@ -2616,7 +2644,7 @@ var Step2 = function Step2(_ref) {
 
   if (selectedStores !== null && selectedStores !== void 0 && selectedStores.customerStoreAddressList) {
     addressList = [].concat(selectedStores === null || selectedStores === void 0 ? void 0 : selectedStores.customerStoreAddressList, [{
-      name: 'add billing Address',
+      name: 'Add billing Address',
       id: 99999999
     }]);
   }
@@ -2631,6 +2659,9 @@ var Step2 = function Step2(_ref) {
     resetField('shippingAddress');
   };
 
+  useEffect(function () {
+    setSelectedCountry(selectedCountry);
+  }, [selectedCountry]);
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: showShipping ? 'shipping information' : 'shipping method',
     icon: 3
@@ -2657,7 +2688,8 @@ var Step2 = function Step2(_ref) {
     control: control,
     onSubmit: onSubmit,
     handleSubmit: handleSubmit,
-    countries: countries
+    countries: countries,
+    states: states
   }), /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'shipping method',
     icon: 3,
@@ -2786,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,
@@ -2802,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"
@@ -2820,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,
@@ -2838,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"
@@ -2850,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();
     },
@@ -3094,7 +3169,6 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       handleBack = _ref.handleBack,
       loading = _ref.loading,
       handleLogin = _ref.handleLogin,
-      setShipping = _ref.setShipping,
       userName = _ref.userName,
       addStore = _ref.addStore,
       setBilling = _ref.setBilling,
@@ -3103,20 +3177,24 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       selectedStore = _ref.selectedStore,
       setSelectedStore = _ref.setSelectedStore,
       addStoreAddress = _ref.addStoreAddress,
+      setSelectedCountry = _ref.setSelectedCountry,
+      countries = _ref.countries,
+      states = _ref.states,
+      setShipping = _ref.setShipping,
       showShipping = _ref.showShipping,
       deliveryOptions = _ref.deliveryOptions,
-      countries = _ref.countries,
       setPaymentDetails = _ref.setPaymentDetails,
       paymentMethods = _ref.paymentMethods,
+      storeCredits = _ref.storeCredits,
       cartData = _ref.cartData,
       vat = _ref.vat,
-      shippingAddress = _ref.shippingAddress,
-      billingAddress = _ref.billingAddress,
-      selectedPaymentMethod = _ref.selectedPaymentMethod,
       clickRedirect = _ref.clickRedirect,
       ordering = _ref.ordering,
       deliveryCharges = _ref.deliveryCharges,
-      placeOrder = _ref.placeOrder;
+      placeOrder = _ref.placeOrder,
+      shippingAddress = _ref.shippingAddress,
+      billingAddress = _ref.billingAddress,
+      selectedPaymentMethod = _ref.selectedPaymentMethod;
   return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
     className: "checkout"
   }, /*#__PURE__*/React__default.createElement(material.Stack, {
@@ -3208,7 +3286,9 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       selectedStore: selectedStore,
       setSelectedStore: setSelectedStore,
       countries: countries,
-      addStoreAddress: addStoreAddress
+      states: states,
+      addStoreAddress: addStoreAddress,
+      setSelectedCountry: setSelectedCountry
     })), index === 2 && /*#__PURE__*/React__default.createElement(material.StepContent, {
       sx: {
         padding: 0
@@ -3218,12 +3298,14 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       handleBack: handleBack,
       handleNext: handleNext,
       options: deliveryOptions,
+      states: states,
       countries: countries,
       setShipping: setShipping,
       showShipping: showShipping,
       selectedStore: selectedStore,
       stores: userStores,
-      addShipping: addStoreAddress
+      addShipping: addStoreAddress,
+      setSelectedCountry: setSelectedCountry
     })), index === 3 && /*#__PURE__*/React__default.createElement(material.StepContent, {
       sx: {
         padding: 0
@@ -3233,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