@salesgenterp/ui-components 0.4.98 → 0.4.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +105 -31
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +105 -31
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -83,7 +83,7 @@ var CartDrawerContainer = styled.div(_templateObject || (_templateObject = _tagg
83
83
  }, function (props) {
84
84
  return props.fontFamily;
85
85
  });
86
- var CartDrawerBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n box-sizing: border-box;\n top: 0;\n left: -1em;\n padding: 1em;\n height: 4.6rem;\n font-size: 1.6rem;\n background-color: white;\n font-weight: bold;\n padding-left: 1rem;\n z-index: 2;\n .icon {\n cursor: pointer;\n font-size: 22px;\n }\n @media only screen and (max-width: 640px) {\n font-size: 1.2rem;\n height: 4rem;\n }\n"])));
86
+ var CartDrawerBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n box-sizing: border-box;\n top: 0;\n left: -1em;\n padding: 1em;\n height: 4.6rem;\n font-size: 1.6rem;\n background-color: white;\n font-weight: bold;\n padding-left: 1rem;\n z-index: 2;\n h2{\n font-size: 1.5em;\n }\n .icon {\n cursor: pointer;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n font-size: 1rem;\n height: 4rem;\n }\n"])));
87
87
  var CartDrawerProductContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: max-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n /* height: 900px; */\n padding: 1rem;\n min-height: 74vh;\n opacity: ", ";\n @media only screen and (max-width: 748px) {\n min-height: 75vh;\n }\n /* background-color: red; */\n"])), function (props) {
88
88
  return props.opacity;
89
89
  });
@@ -101,7 +101,7 @@ var CartDrawerEmptyCart = styled.div(_templateObject7 || (_templateObject7 = _ta
101
101
  });
102
102
 
103
103
  var _templateObject$1, _templateObject2$1, _templateObject3$1;
104
- var CartDrawerProduct = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 2rem;\n img {\n width: 20%;\n max-height: 100%;\n /* aspect-ratio: 1; */\n object-fit: cover;\n }\n .middleSection {\n width: 60%;\n padding-left: 0.8rem;\n height: 100%;\n h6 {\n font-size: 1.1rem;\n font-weight: bold;\n margin: 0;\n\n span {\n font-size: 0.8rem;\n color: grey;\n text-decoration: line-through;\n margin-right: 0.5rem;\n }\n }\n .name {\n font-size: 0.9rem;\n line-height: 1.2rem;\n max-height: 2.45rem;\n width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n width: 20%;\n height: 100%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n /* opacity: 0.7; */\n }\n }\n }\n @media only screen and (max-width: 340px) {\n height: 80px;\n .middleSection {\n h6 {\n font-size: 0.9rem;\n }\n .name {\n font-size: 0.7rem;\n height: 1.45rem;\n }\n }\n }\n"])), function (props) {
104
+ var CartDrawerProduct = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 2rem;\n\n img {\n width: 20%;\n max-height: 100%;\n /* aspect-ratio: 1; */\n object-fit: cover;\n }\n .middleSection {\n width: 60%;\n padding-left: 0.8rem;\n height: 95%;\n h6 {\n font-size: 1.1rem;\n font-weight: bold;\n margin: 0;\n\n span {\n font-size: 0.8rem;\n color: grey;\n text-decoration: line-through;\n margin-right: 0.5rem;\n }\n }\n .name {\n font-size: 0.9rem;\n line-height: 1.2rem;\n max-height: 2.45rem;\n width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n width: 20%;\n height: 95%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n /* opacity: 0.7; */\n }\n }\n }\n @media only screen and (max-width: 768px) {\n .closeIcon {\n font-size: 1rem;\n }\n height: 80px;\n .middleSection {\n .name {\n max-height: 2.4rem;\n height: 2.4rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n height: 80px;\n .middleSection {\n h6 {\n font-size: 0.9rem;\n }\n .name {\n font-size: 0.7rem;\n height: 1.45rem;\n }\n }\n }\n"])), function (props) {
105
105
  return props.color || 'grey';
106
106
  });
107
107
  var CartDrawerQtBox = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n height: 34px;\n width: 82px;\n border: 1px solid rgb(211, 210, 210);\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 13.5px;\n color: #333;\n padding: 0 0.5rem;\n border-radius: 5px;\n max-width: 100%;\n\n span {\n cursor: pointer;\n height: 100%;\n display: grid;\n place-items: center;\n }\n .qt {\n font-size: 12px;\n color: black;\n font-weight: 500;\n cursor: auto;\n }\n @media only screen and (max-width: 640px) {\n min-width: 55px;\n aspect-ratio: 1/2;\n /* min-height: 28px; */\n font-size: 10px;\n }\n @media only screen and (max-width: 340px) {\n min-width: 50px;\n aspect-ratio: 1/2;\n height: 22px;\n font-size: 8px;\n }\n"])));
@@ -146,6 +146,8 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
146
146
  className: "icon",
147
147
  onClick: function onClick() {
148
148
  if (loading) return;
149
+ var sure = confirm('Are you sure you want to remove this item from cart');
150
+ if (!sure) return;
149
151
  handleRemoveProduct(product);
150
152
  }
151
153
  }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
@@ -1800,7 +1802,7 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
1800
1802
  };
1801
1803
 
1802
1804
  var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
1803
- var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width: 26.375em;\n max-width: ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 28px;\n padding: 2em 1em;\n align-items: center;\n /* margin-top: 3em; */\n p {\n font-size: 1.189em;\n font-weight: 600;\n align-self: flex-start;\n color: inherit;\n margin: 0;\n padding: 0;\n }\n .continueShopping {\n font-size: 0.75em;\n color: inherit;\n text-transform: capitalize;\n height: 20px;\n border-bottom: 1px solid;\n border-color: ", ";\n font-weight: 300;\n cursor: pointer;\n }\n"])), function (props) {
1805
+ var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width: 26.375em;\n max-width: ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 20px;\n padding: 2em 3em;\n align-items: center;\n /* margin-top: 3em; */\n p {\n font-size: 1.189em;\n font-weight: 600;\n align-self: flex-start;\n color: inherit;\n margin: 0;\n padding: 0;\n }\n .continueShopping {\n font-size: 0.75em;\n color: inherit;\n text-transform: capitalize;\n height: 20px;\n border-bottom: 1px solid;\n border-color: ", ";\n font-weight: 300;\n cursor: pointer;\n }\n"])), function (props) {
1804
1806
  return props.maxWidth || '26.375em';
1805
1807
  }, function (props) {
1806
1808
  return props.background || '#667080';
@@ -1817,12 +1819,10 @@ var CartSummaryRow = styled.div(_templateObject2$5 || (_templateObject2$5 = _tag
1817
1819
  var CartSummaryHr = styled.span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n border: none;\n width: 100%;\n height: 1px;\n background-color: ", ";\n margin: 1.2em 0;\n"])), function (props) {
1818
1820
  return props.color || 'rgba(255, 255, 255, 0.5)';
1819
1821
  });
1820
- var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-bottom: ", ";\n\n input {\n width: 10.81rem;\n height: 2.44rem;\n padding: 0.2rem 0.8rem;\n text-transform: capitalize;\n font-size: 0.89rem;\n border-radius: ", ";\n margin-right: ", ";\n border: none;\n outline: none;\n background: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n }\n }\n button {\n width: 7.75rem;\n height: 2.44rem;\n background: ", ";\n border-radius: ", ";\n display: grid;\n color: ", ";\n place-items: center;\n border: none;\n outline: none;\n text-transform: uppercase;\n font-family: 'karla-fonts';\n cursor: pointer;\n font-size: 0.75em;\n transition: 0.3s;\n &:hover {\n letter-spacing: 1px;\n }\n }\n"])), function (props) {
1822
+ var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-bottom: ", ";\n background-color: transparent;\n width: 90%;\n\n input {\n width: 10.81rem;\n width: 62%;\n height: 2.44rem;\n padding: 0.2rem 0.8rem;\n\n text-transform: capitalize;\n font-size: 0.89rem;\n border-radius: ", ";\n margin-right: 0.1em;\n\n border: none;\n outline: none;\n background: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n }\n }\n button {\n width: 7.75rem;\n width: 38%;\n height: 2.44rem;\n background: ", ";\n border-radius: ", ";\n display: grid;\n color: ", ";\n place-items: center;\n border: none;\n outline: none;\n text-transform: uppercase;\n font-family: 'karla-fonts';\n cursor: pointer;\n font-size: 0.75em;\n transition: 0.3s;\n &:hover {\n letter-spacing: 1px;\n }\n }\n"])), function (props) {
1821
1823
  return props.paddingBottom ? '2em' : '0';
1822
1824
  }, function (props) {
1823
1825
  return props.retail ? '1.19rem' : '0';
1824
- }, function (props) {
1825
- return props.retail ? '1rem' : '0';
1826
1826
  }, function (props) {
1827
1827
  return props.background || '#bfc3ca';
1828
1828
  }, function (props) {
@@ -1836,7 +1836,7 @@ var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4
1836
1836
  }, function (props) {
1837
1837
  return props.Btncolor || 'inherit';
1838
1838
  });
1839
- var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n font-size: 0.95em;\n font-weight: 700;\n background: ", ";\n color: ", ";\n cursor: pointer;\n text-transform: uppercase;\n border: none;\n outline: none;\n width: 16.81em;\n height: 3.4em;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n border-radius: ", ";\n padding: 0;\n font-family: 'karla-fonts';\n font-size: 0.94em;\n margin: 1em auto;\n transition: 0.3s;\n margin-top: 2em;\n &:hover {\n opacity: 0.8;\n }\n"])), function (props) {
1839
+ var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n font-size: 0.95em;\n font-weight: 700;\n background: ", ";\n color: ", ";\n cursor: pointer;\n text-transform: uppercase;\n border: none;\n outline: none;\n width: 16.81em;\n height: 3.4em;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n border-radius: ", ";\n padding: 0;\n font-family: 'karla-fonts';\n font-size: 0.94em;\n margin: 1em auto;\n transition: 0.3s;\n margin-top: 3em;\n &:hover {\n opacity: 0.8;\n }\n"])), function (props) {
1840
1840
  return props.background || '#393f48';
1841
1841
  }, function (props) {
1842
1842
  return props.color || 'inherit';
@@ -1948,7 +1948,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
1948
1948
  return /*#__PURE__*/React__default.createElement(CartPageSection, {
1949
1949
  bg: styles.bg,
1950
1950
  retail: retail
1951
- }, /*#__PURE__*/React__default.createElement(CartHeading, null, /*#__PURE__*/React__default.createElement("h1", null, "Shopping Cart"), /*#__PURE__*/React__default.createElement("p", null, "You have 4 items in your cart")), /*#__PURE__*/React__default.createElement(CartPageContainer, {
1951
+ }, /*#__PURE__*/React__default.createElement(CartHeading, null, /*#__PURE__*/React__default.createElement("h1", null, "Shopping Cart"), /*#__PURE__*/React__default.createElement("p", null, "You have ", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items in your cart")), /*#__PURE__*/React__default.createElement(CartPageContainer, {
1952
1952
  retail: retail,
1953
1953
  loading: loading
1954
1954
  }, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
@@ -1999,7 +1999,7 @@ var CheckoutSummaryContainer = styled.div(_templateObject$7 || (_templateObject$
1999
1999
  return props.bg || 'rgba(255, 240, 236, 1)';
2000
2000
  });
2001
2001
  var TextRow = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n max-width: 90%;\n margin-bottom: 1em;\n padding-bottom: 1em;\n width: 90%;\n border-bottom: 1px solid rgba(250, 232, 229, 1);\n .text {\n font-size: 1.1em;\n font-weight: 300;\n text-transform: capitalize;\n }\n .total {\n font-size: 1.65em;\n font-weight: 800;\n }\n"])));
2002
- var FilledInfo = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n margin-bottom: 2em;\n .heading {\n font-size: 1.25em;\n font-weight: 800;\n margin-bottom: 0.8em;\n }\n\n p {\n font-size: 0.875em;\n font-weight: 300;\n text-transform: capitalize;\n max-width: 50%;\n }\n .bold {\n font-weight: 700;\n margin-bottom: 0.8em;\n }\n .payment {\n width: 70px;\n height: 48px;\n background: #ffffff;\n border-radius: 15.875px;\n display: grid;\n place-items: center;\n overflow: hidden;\n }\n .blank {\n padding-bottom: 2em;\n }\n"])));
2002
+ var FilledInfo = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n margin-bottom: 2em;\n .heading {\n font-size: 1.25em;\n font-weight: 800;\n margin-bottom: 0.8em;\n }\n\n p {\n font-size: 0.875em;\n font-weight: 300;\n text-transform: capitalize;\n max-width: 60%;\n }\n .bold {\n font-weight: 700;\n margin-bottom: 0.8em;\n width: 90%;\n }\n .payment {\n width: 70px;\n height: 48px;\n background: #ffffff;\n border-radius: 15.875px;\n display: grid;\n place-items: center;\n overflow: hidden;\n }\n .blank {\n padding-bottom: 2em;\n }\n"])));
2003
2003
 
2004
2004
  var CheckoutSummary = function CheckoutSummary(_ref) {
2005
2005
  var total = _ref.total,
@@ -2073,7 +2073,7 @@ var ButtonRowContainer = styled.div(_templateObject8$1 || (_templateObject8$1 =
2073
2073
  }, function (props) {
2074
2074
  return props.disabledBack ? 'not-allowed' : 'pointer';
2075
2075
  });
2076
- var CheckBoxRow = styled.div(_templateObject9$1 || (_templateObject9$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) {
2076
+ var CheckBoxRow = styled.div(_templateObject9$1 || (_templateObject9$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 .medium {\n font-weight: 600;\n font-size: 1em;\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) {
2077
2077
  return props.padding;
2078
2078
  }, function (props) {
2079
2079
  return props.marginLeft;
@@ -2758,14 +2758,21 @@ var Step2 = function Step2(_ref) {
2758
2758
  var CreditCardForm = function CreditCardForm(_ref) {
2759
2759
  var handleChange = _ref.handleChange,
2760
2760
  handleFocus = _ref.handleFocus,
2761
- handleSave = _ref.handleSave;
2761
+ saved = _ref.saved,
2762
+ handleSave = _ref.handleSave,
2763
+ showError = _ref.showError,
2764
+ data = _ref.data;
2765
+ var name = data.name,
2766
+ number = data.number,
2767
+ cvc = data.cvc,
2768
+ expiry = data.expiry;
2762
2769
  return /*#__PURE__*/React__default.createElement(material.Grid, {
2763
2770
  container: true,
2764
2771
  rowSpacing: 2,
2765
2772
  component: 'form',
2766
2773
  onSubmit: function onSubmit(e) {
2767
2774
  e.preventDefault();
2768
- handleSave();
2775
+ handleSave('data');
2769
2776
  },
2770
2777
  paddingLeft: "1em",
2771
2778
  columnSpacing: 2,
@@ -2784,7 +2791,14 @@ var CreditCardForm = function CreditCardForm(_ref) {
2784
2791
  name: "name",
2785
2792
  type: "text",
2786
2793
  placeholder: "Card Holder's Name*"
2787
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2794
+ }), showError && name.length < 3 ? /*#__PURE__*/React__default.createElement("p", {
2795
+ style: {
2796
+ color: 'red',
2797
+ marginLeft: '.5em',
2798
+ paddingTop: '.4em',
2799
+ fontSize: '.95em'
2800
+ }
2801
+ }, "Please enter a valid Card Holder's Name") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
2788
2802
  item: true,
2789
2803
  xs: 12,
2790
2804
  md: 10
@@ -2796,7 +2810,14 @@ var CreditCardForm = function CreditCardForm(_ref) {
2796
2810
  name: "number",
2797
2811
  type: "number",
2798
2812
  placeholder: "Card Nubmers xxxx-xxxx-xxxx-xxxx"
2799
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2813
+ }), showError && number.length < 14 || showError && number.length > 16 ? /*#__PURE__*/React__default.createElement("p", {
2814
+ style: {
2815
+ color: 'red',
2816
+ marginLeft: '.5em',
2817
+ paddingTop: '.4em',
2818
+ fontSize: '.95em'
2819
+ }
2820
+ }, "Please enter a valid card Number") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
2800
2821
  item: true,
2801
2822
  xs: 12,
2802
2823
  sm: 5
@@ -2808,7 +2829,14 @@ var CreditCardForm = function CreditCardForm(_ref) {
2808
2829
  name: "expiry",
2809
2830
  type: "number",
2810
2831
  placeholder: "Expiration Date MM/YYYY "
2811
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2832
+ }), showError && expiry.length < 4 || showError && expiry.length > 6 ? /*#__PURE__*/React__default.createElement("p", {
2833
+ style: {
2834
+ color: 'red',
2835
+ marginLeft: '.5em',
2836
+ paddingTop: '.4em',
2837
+ fontSize: '.95em'
2838
+ }
2839
+ }, "Please enter a valid date.") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
2812
2840
  item: true,
2813
2841
  xs: 12,
2814
2842
  sm: 3.5
@@ -2819,11 +2847,29 @@ var CreditCardForm = function CreditCardForm(_ref) {
2819
2847
  onFocus: handleFocus,
2820
2848
  name: "cvc",
2821
2849
  type: "number",
2822
- placeholder: "CVC/CVVV ***"
2823
- })), /*#__PURE__*/React__default.createElement(material.Grid, {
2850
+ placeholder: "CVC/CVV ***"
2851
+ }), showError && cvc.length < 3 || showError && cvc.length > 4 ? /*#__PURE__*/React__default.createElement("p", {
2852
+ style: {
2853
+ color: 'red',
2854
+ marginLeft: '.5em',
2855
+ paddingTop: '.4em',
2856
+ fontSize: '.95em'
2857
+ }
2858
+ }, "Please enter a valid cvv.") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
2824
2859
  item: true,
2825
2860
  xs: 12
2826
- }));
2861
+ }, /*#__PURE__*/React__default.createElement(SaveButton, {
2862
+ type: "submit",
2863
+ disabled: saved,
2864
+ style: saved ? {
2865
+ opacity: 0.8,
2866
+ marginBottom: '3em',
2867
+ padding: '.8em 1em'
2868
+ } : {
2869
+ marginBottom: '3em',
2870
+ padding: '.8em 1em'
2871
+ }
2872
+ }, saved ? 'saved' : 'save')));
2827
2873
  };
2828
2874
 
2829
2875
  var PaymentForm = /*#__PURE__*/function (_React$Component) {
@@ -2839,7 +2885,8 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
2839
2885
  expiry: '',
2840
2886
  focus: '',
2841
2887
  name: '',
2842
- number: ''
2888
+ number: '',
2889
+ showError: false
2843
2890
  };
2844
2891
  _this.handleInputFocus = function (e) {
2845
2892
  _this.setState({
@@ -2854,12 +2901,31 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
2854
2901
  _this.setState((_this$setState = {}, _this$setState[name] = value, _this$setState));
2855
2902
  };
2856
2903
  _this.handleSave = function (e) {
2857
- console.log(e);
2904
+ var _this$state = _this.state,
2905
+ name = _this$state.name,
2906
+ number = _this$state.number,
2907
+ cvc = _this$state.cvc,
2908
+ expiry = _this$state.expiry;
2909
+ if (name.length < 3) return _this.setState({
2910
+ showError: true
2911
+ });
2912
+ if (number.length < 14 || number.length > 16) return _this.setState({
2913
+ showError: true
2914
+ });
2915
+ if (cvc.length < 3 || cvc.length > 4) return _this.setState({
2916
+ showError: true
2917
+ });
2918
+ if (expiry.length < 4 || expiry.length > 6) return _this.setState({
2919
+ showError: true
2920
+ });
2921
+ _this.props.handleSave(_this.state);
2858
2922
  };
2859
2923
  return _this;
2860
2924
  }
2861
2925
  var _proto = PaymentForm.prototype;
2862
2926
  _proto.render = function render() {
2927
+ var _this2 = this;
2928
+ console.log(this.state.showError);
2863
2929
  return /*#__PURE__*/React__default.createElement("div", {
2864
2930
  id: "PaymentForm"
2865
2931
  }, /*#__PURE__*/React__default.createElement(Cards, {
@@ -2871,8 +2937,12 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
2871
2937
  }), /*#__PURE__*/React__default.createElement(CreditCardForm, {
2872
2938
  handleChange: this.handleInputChange,
2873
2939
  handleFocus: this.handleInputFocus,
2874
- saved: false,
2875
- handleSave: this.props.handleSave(this.state)
2940
+ saved: this.props.saved,
2941
+ showError: this.state.showError,
2942
+ data: this.state,
2943
+ handleSave: function handleSave(data) {
2944
+ return _this2.handleSave(_this2.state);
2945
+ }
2876
2946
  }));
2877
2947
  };
2878
2948
  return PaymentForm;
@@ -2896,6 +2966,7 @@ var Step3 = function Step3(_ref) {
2896
2966
  card = _useState3[0],
2897
2967
  setCard = _useState3[1];
2898
2968
  var isCard = selectedMethod === null || selectedMethod === void 0 ? void 0 : (_selectedMethod$name = selectedMethod.name) === null || _selectedMethod$name === void 0 ? void 0 : _selectedMethod$name.toLowerCase().includes('card');
2969
+ var storeCr = storeCredits > total ? total : storeCredits;
2899
2970
  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
2900
2971
  text: 'Payments Method',
2901
2972
  icon: 4
@@ -2903,7 +2974,8 @@ var Step3 = function Step3(_ref) {
2903
2974
  marginLeft: "1.8em",
2904
2975
  style: {
2905
2976
  paddingBottom: '1.5em',
2906
- marginTop: '-1em'
2977
+ marginTop: '-1em',
2978
+ color: 'grey'
2907
2979
  }
2908
2980
  }, /*#__PURE__*/React__default.createElement("p", {
2909
2981
  className: "bold"
@@ -2922,10 +2994,10 @@ var Step3 = function Step3(_ref) {
2922
2994
  },
2923
2995
  checked: useStoreCr
2924
2996
  }), /*#__PURE__*/React__default.createElement("p", {
2997
+ className: "medium"
2998
+ }, "Store Credits: ", /*#__PURE__*/React__default.createElement("span", {
2925
2999
  className: "bold"
2926
- }, "Store Credits:", ' ', /*#__PURE__*/React__default.createElement("span", {
2927
- className: "bold"
2928
- }, "$", storeCredits === null || storeCredits === void 0 ? void 0 : storeCredits.toFixed(2)))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
3000
+ }, "$", storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
2929
3001
  var _payment$name;
2930
3002
  if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
2931
3003
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -2945,8 +3017,9 @@ var Step3 = function Step3(_ref) {
2945
3017
  })), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name)), (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement(PaymentForm, {
2946
3018
  handleSave: function handleSave(data) {
2947
3019
  return setCard(data);
2948
- }
2949
- }));
3020
+ },
3021
+ saved: card ? true : false
3022
+ }), console.log(card));
2950
3023
  } else {
2951
3024
  return /*#__PURE__*/React__default.createElement(PaymentLi, {
2952
3025
  style: storeCredits >= total && useStoreCr ? {
@@ -2967,7 +3040,8 @@ var Step3 = function Step3(_ref) {
2967
3040
  handleNext: function handleNext() {
2968
3041
  setPaymentDetails(useStoreCr, useStoreCr && storeCredits > total ? null : selectedMethod, isCard && card);
2969
3042
  _handleNext();
2970
- }
3043
+ },
3044
+ nextDisabled: isCard && !card
2971
3045
  })));
2972
3046
  };
2973
3047
 
@@ -3060,7 +3134,7 @@ var Step4 = function Step4(_ref) {
3060
3134
  align: "right"
3061
3135
  }, /*#__PURE__*/React__default.createElement("p", {
3062
3136
  className: "max sm red"
3063
- }, "Calculated later"))), storeCredits && /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3137
+ }, "Calculated later"))), storeCredits && storeCredits > 0 ? /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3064
3138
  colSpan: 1,
3065
3139
  noSmall: true
3066
3140
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3073,7 +3147,7 @@ var Step4 = function Step4(_ref) {
3073
3147
  align: "right"
3074
3148
  }, /*#__PURE__*/React__default.createElement("p", {
3075
3149
  className: "max sm price"
3076
- }, "- $", storeCr || 0))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3150
+ }, "- $", (storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)) || 0))) : "", /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3077
3151
  colSpan: 1,
3078
3152
  noSmall: true
3079
3153
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {