@salesgenterp/ui-components 0.4.190 → 0.4.192

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.
package/dist/index.js CHANGED
@@ -21,6 +21,7 @@ var hi2 = require('react-icons/hi2');
21
21
  var bi = require('react-icons/bi');
22
22
  var cg = require('react-icons/cg');
23
23
  var md = require('react-icons/md');
24
+ var moment = _interopDefault(require('moment'));
24
25
  var reactHookForm = require('react-hook-form');
25
26
  var hi = require('react-icons/hi');
26
27
  var Cards = _interopDefault(require('react-credit-cards'));
@@ -30,7 +31,6 @@ var useMediaQuery = _interopDefault(require('@mui/material/useMediaQuery'));
30
31
  var tb = require('react-icons/tb');
31
32
  var tfi = require('react-icons/tfi');
32
33
  var go = require('react-icons/go');
33
- var moment = _interopDefault(require('moment'));
34
34
  var io5 = require('react-icons/io5');
35
35
  var fa = require('react-icons/fa');
36
36
  var lodash = require('lodash');
@@ -2050,6 +2050,115 @@ var CheckoutHeading = styled__default.div(_templateObject5$5 || (_templateObject
2050
2050
  var CheckoutHeader = styled__default(Row)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n display: flex;\n flex-direction: row;\n align-items: center;\n position: sticky;\n top: 0;\n background-color: white;\n z-index: 1;\n justify-content: flex-start;\n min-height: 4.18em;\n max-height: 4.1875em;\n max-width: 57.43em;\n width: 98%;\n background: #ffffff;\n border-radius: 20px;\n margin-bottom: 1em;\n margin-right: 0.35em;\n color: #7d7b7b;\n padding: 0 2em;\n margin-right: 5em;\n .row {\n display: flex;\n color: inherit;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n text-transform: capitalize;\n margin-right: 2.4%;\n .icon {\n font-size: 14px;\n font-weight: 400;\n display: grid;\n place-items: center;\n margin-right: 6px;\n color: inherit;\n }\n p,\n span {\n font-size: 0.95em;\n color: inherit;\n font-weight: 300;\n }\n }\n .checked {\n p,\n span {\n color: #323232;\n }\n .icon {\n color: #249937;\n }\n }\n @media only screen and (max-width: 1508px) {\n margin-right: 2em;\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 1em;\n margin: 1.4em 0;\n .row {\n margin-right: 4.5%;\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
2051
2051
  var CheckoutStepIcon = styled__default.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n font-size: 5px;\n display: grid;\n place-items: center;\n margin: auto;\n padding: 0;\n margin-left: 2px;\n .circle {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n font-size: 5px;\n display: grid;\n place-items: center;\n margin: auto;\n padding: 0;\n }\n .ic {\n font-size: 8px;\n }\n"])));
2052
2052
 
2053
+ var API_END_POINT = '';
2054
+ var STORAGE_KEYS = {
2055
+ ACCESS_TOKEN: 'token',
2056
+ REFRESH_TOKEN: 'Retoken',
2057
+ TABLE_STATE: 'TABLE_STATE',
2058
+ TABLE_DATA: 'TABLE_DATA'
2059
+ };
2060
+ var API_STATUSES = Object.freeze({
2061
+ PENDING: 'PENDING',
2062
+ LOADING: 'LOADING',
2063
+ SUCCESS: 'SUCCESS',
2064
+ ERROR: 'ERROR'
2065
+ });
2066
+ var DATE_FORMATS = {
2067
+ DEFAULT_DATE_TIME_FORMAT: 'YYYY-MM-DD HH:mm:ss',
2068
+ TIMESTAMP_FORMAT: 'MM-DD-YY hh:mm A',
2069
+ LIST_DATE_TIME_FORMAT: 'YYYY-MM-DD hh:mm A',
2070
+ DEFAULT_DATE_FORMAT: 'YYYY-MM-DD',
2071
+ TIME: 'hh:mm:ss A'
2072
+ };
2073
+
2074
+ var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
2075
+ var _Object$keys;
2076
+ var data = [];
2077
+ var i = 1;
2078
+ Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(child)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(function (k) {
2079
+ var result = k.replace(/([A-Z])/g, ' $1');
2080
+ var dataIndex = {
2081
+ key: i.toString(),
2082
+ name: result.charAt(0).toUpperCase() + result.slice(1),
2083
+ value: child[k]
2084
+ };
2085
+ data.push(dataIndex);
2086
+ i++;
2087
+ });
2088
+ return data;
2089
+ };
2090
+ var renderMoney = function renderMoney(value) {
2091
+ var returnValue = '$0.00';
2092
+ try {
2093
+ if (value) {
2094
+ var _Math$abs, _Math$abs$toFixed, _value$toFixed;
2095
+ returnValue = value < 0 ? "-$" + ((_Math$abs = Math.abs(value)) === null || _Math$abs === void 0 ? void 0 : (_Math$abs$toFixed = _Math$abs.toFixed(2)) === null || _Math$abs$toFixed === void 0 ? void 0 : _Math$abs$toFixed.replace(/\B(?=(\d{3})+(?!\d))/g, ',')) : "$" + ((_value$toFixed = value.toFixed(2)) === null || _value$toFixed === void 0 ? void 0 : _value$toFixed.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
2096
+ }
2097
+ } catch (e) {}
2098
+ return returnValue;
2099
+ };
2100
+ var getLocalTime = function getLocalTime(_ref) {
2101
+ var time = _ref.time,
2102
+ _ref$format = _ref.format,
2103
+ format = _ref$format === void 0 ? DATE_FORMATS.TIMESTAMP_FORMAT : _ref$format,
2104
+ isMoment = _ref.isMoment;
2105
+ if (!time) {
2106
+ return time;
2107
+ }
2108
+ var convertedTime = moment.utc(time).clone().local();
2109
+ if (!isMoment) {
2110
+ convertedTime = convertedTime.format(format);
2111
+ }
2112
+ return convertedTime;
2113
+ };
2114
+ var getUTCTime = function getUTCTime(_ref2) {
2115
+ var time = _ref2.time,
2116
+ _ref2$format = _ref2.format,
2117
+ format = _ref2$format === void 0 ? DATE_FORMATS.DEFAULT_DATE_TIME_FORMAT : _ref2$format,
2118
+ isMoment = _ref2.isMoment;
2119
+ if (!time) {
2120
+ return time;
2121
+ }
2122
+ var convertedTime = moment(time).utc();
2123
+ if (!isMoment) {
2124
+ convertedTime = convertedTime.format(format);
2125
+ }
2126
+ return convertedTime;
2127
+ };
2128
+ function hexToRgbA(hex) {
2129
+ var c;
2130
+ if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
2131
+ c = hex.substring(1).split('');
2132
+ if (c.length == 3) {
2133
+ c = [c[0], c[0], c[1], c[1], c[2], c[2]];
2134
+ }
2135
+ c = '0x' + c.join('');
2136
+ return [c >> 16 & 255, c >> 8 & 255, c & 255].join(',');
2137
+ } else return hex;
2138
+ }
2139
+ var getRandomString = function getRandomString(length) {
2140
+ if (length === void 0) {
2141
+ length = 16;
2142
+ }
2143
+ var text = '';
2144
+ var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
2145
+ for (var i = 0; i < length; i++) {
2146
+ text += possible.charAt(Math.floor(Math.random() * possible.length));
2147
+ }
2148
+ return text;
2149
+ };
2150
+ var currentTimeText = function currentTimeText() {
2151
+ var data = [[0, 4, 'Good Night'], [5, 11, 'Good Morning'], [12, 16, 'Good Afternoon'], [17, 19, 'Good Evening'], [20, 24, 'Good Night']];
2152
+ var hr = new Date().getHours();
2153
+ var text = '';
2154
+ for (var i = 0; i < data.length; i++) {
2155
+ if (hr >= data[i][0] && hr <= data[i][1]) {
2156
+ text = data[i][2];
2157
+ }
2158
+ }
2159
+ return text;
2160
+ };
2161
+
2053
2162
  var _templateObject$7, _templateObject2$7, _templateObject3$7;
2054
2163
  var CheckoutSummaryContainer = styled__default.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n background: ", ";\n\n border-radius: 20px;\n padding: max(1.5em, 30px);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 422px;\n min-width: min(412px, 95%);\n font-size: 16px;\n margin-top: 6.15em;\n @media only screen and (max-width: 1508px) {\n margin-top: 0;\n }\n"])), function (props) {
2055
2164
  return props.bg || 'rgba(255, 240, 236, 1)';
@@ -2070,7 +2179,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2070
2179
  className: "text"
2071
2180
  }, "order total :"), /*#__PURE__*/React__default.createElement("h6", {
2072
2181
  className: "total"
2073
- }, total && "$" + (total === null || total === void 0 ? void 0 : total.toFixed(2)))), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
2182
+ }, renderMoney(total + (shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount)))), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
2074
2183
  className: "heading"
2075
2184
  }, "Billing information"), billingInformation !== null && billingInformation !== void 0 && billingInformation.title ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
2076
2185
  className: "bold"
@@ -2086,7 +2195,9 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
2086
2195
  className: "heading"
2087
2196
  }, "Shipping Method"), /*#__PURE__*/React__default.createElement("p", {
2088
2197
  className: "bold"
2089
- }, shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.name)), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
2198
+ }, shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.name), /*#__PURE__*/React__default.createElement("p", {
2199
+ className: "bold"
2200
+ }, renderMoney(shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount))), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
2090
2201
  className: "heading"
2091
2202
  }, "Payment Method"), /*#__PURE__*/React__default.createElement("p", {
2092
2203
  className: "bold"
@@ -2758,7 +2869,7 @@ var Step1 = function Step1(_ref) {
2758
2869
  };
2759
2870
 
2760
2871
  var Step2 = function Step2(_ref) {
2761
- var _addressList$, _addressList, _styles$button;
2872
+ var _addressList$, _addressList, _styles$button2;
2762
2873
  var handleBack = _ref.handleBack,
2763
2874
  _handleNext = _ref.handleNext,
2764
2875
  options = _ref.options,
@@ -2847,7 +2958,7 @@ var Step2 = function Step2(_ref) {
2847
2958
  alignItems: 'flex-start',
2848
2959
  paddingBottom: '2em'
2849
2960
  }, options === null || options === void 0 ? void 0 : options.map(function (option, i) {
2850
- var _styles$input, _styles$input2, _option$amount;
2961
+ var _styles$input, _styles$input2, _styles$button, _option$amount;
2851
2962
  return /*#__PURE__*/React__default.createElement(DeliveryOption, {
2852
2963
  hovered: (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id),
2853
2964
  onClick: function onClick() {
@@ -2857,7 +2968,7 @@ var Step2 = function Step2(_ref) {
2857
2968
  bg: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg,
2858
2969
  border: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.border,
2859
2970
  color: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
2860
- buttonBg: styles === null || styles === void 0 ? void 0 : styles.button.bg
2971
+ buttonBg: styles === null || styles === void 0 ? void 0 : (_styles$button = styles.button) === null || _styles$button === void 0 ? void 0 : _styles$button.bg
2861
2972
  }, /*#__PURE__*/React__default.createElement("div", {
2862
2973
  className: "circle"
2863
2974
  }, /*#__PURE__*/React__default.createElement("span", {
@@ -2874,7 +2985,7 @@ var Step2 = function Step2(_ref) {
2874
2985
  _handleNext();
2875
2986
  },
2876
2987
  nextDisabled: showShipping && !address || (address === null || address === void 0 ? void 0 : address.id) === 99999999,
2877
- color: styles === null || styles === void 0 ? void 0 : (_styles$button = styles.button) === null || _styles$button === void 0 ? void 0 : _styles$button.bg
2988
+ color: styles === null || styles === void 0 ? void 0 : (_styles$button2 = styles.button) === null || _styles$button2 === void 0 ? void 0 : _styles$button2.bg
2878
2989
  })));
2879
2990
  };
2880
2991
 
@@ -3245,7 +3356,8 @@ var Step3 = function Step3(_ref) {
3245
3356
  styles = _ref.styles,
3246
3357
  states = _ref.states,
3247
3358
  countries = _ref.countries,
3248
- setSelectedCountry = _ref.setSelectedCountry;
3359
+ setSelectedCountry = _ref.setSelectedCountry,
3360
+ shippingMethod = _ref.shippingMethod;
3249
3361
  var _useState = React.useState(payments && payments[0]),
3250
3362
  selectedMethod = _useState[0],
3251
3363
  setSelectedMethod = _useState[1];
@@ -3272,7 +3384,7 @@ var Step3 = function Step3(_ref) {
3272
3384
  className: "bold"
3273
3385
  }, "Due Amount:"), /*#__PURE__*/React__default.createElement("span", {
3274
3386
  className: "red primaryColor"
3275
- }, " $", total === null || total === void 0 ? void 0 : total.toFixed(2))), storeCredits ? /*#__PURE__*/React__default.createElement(CheckBoxRow, {
3387
+ }, renderMoney(total + (shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount)))), storeCredits ? /*#__PURE__*/React__default.createElement(CheckBoxRow, {
3276
3388
  marginLeft: "1em",
3277
3389
  style: {
3278
3390
  paddingBottom: '1.5em',
@@ -3356,7 +3468,8 @@ var Step4 = function Step4(_ref) {
3356
3468
  loading = _ref.loading,
3357
3469
  placeOrder = _ref.placeOrder,
3358
3470
  storeCredits = _ref.storeCredits,
3359
- styles = _ref.styles;
3471
+ styles = _ref.styles,
3472
+ shippingMethod = _ref.shippingMethod;
3360
3473
  var _React$useState = React__default.useState(false),
3361
3474
  checked = _React$useState[0],
3362
3475
  setChecked = _React$useState[1];
@@ -3430,7 +3543,7 @@ var Step4 = function Step4(_ref) {
3430
3543
  align: "right"
3431
3544
  }, /*#__PURE__*/React__default.createElement("p", {
3432
3545
  className: "max sm primaryColor"
3433
- }, "Calculated later"))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3546
+ }, renderMoney((shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount) || 0)))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
3434
3547
  colSpan: 1,
3435
3548
  noSmall: true
3436
3549
  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3475,7 +3588,7 @@ var Step4 = function Step4(_ref) {
3475
3588
  align: "right"
3476
3589
  }, /*#__PURE__*/React__default.createElement("p", {
3477
3590
  className: "max sm total bolder primaryColor"
3478
- }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) - storeCr || 0).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
3591
+ }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) - storeCr + (shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount) || 0).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
3479
3592
  container: true,
3480
3593
  columnSpacing: 0,
3481
3594
  rowSpacing: 0,
@@ -3767,6 +3880,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3767
3880
  padding: 0
3768
3881
  }
3769
3882
  }, /*#__PURE__*/React__default.createElement(Step3, {
3883
+ shippingMethod: shippingMethod,
3770
3884
  currstep: currStep,
3771
3885
  handleBack: handleBack,
3772
3886
  handleNext: handleNext,
@@ -3783,6 +3897,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
3783
3897
  padding: 0
3784
3898
  }
3785
3899
  }, /*#__PURE__*/React__default.createElement(Step4, {
3900
+ shippingMethod: shippingMethod,
3786
3901
  currstep: currStep,
3787
3902
  handleBack: handleBack,
3788
3903
  handleNext: handleNext,
@@ -3838,115 +3953,6 @@ function _finallyRethrows(body, finalizer) {
3838
3953
  return finalizer(false, result);
3839
3954
  }
3840
3955
 
3841
- var API_END_POINT = '';
3842
- var STORAGE_KEYS = {
3843
- ACCESS_TOKEN: 'token',
3844
- REFRESH_TOKEN: 'Retoken',
3845
- TABLE_STATE: 'TABLE_STATE',
3846
- TABLE_DATA: 'TABLE_DATA'
3847
- };
3848
- var API_STATUSES = Object.freeze({
3849
- PENDING: 'PENDING',
3850
- LOADING: 'LOADING',
3851
- SUCCESS: 'SUCCESS',
3852
- ERROR: 'ERROR'
3853
- });
3854
- var DATE_FORMATS = {
3855
- DEFAULT_DATE_TIME_FORMAT: 'YYYY-MM-DD HH:mm:ss',
3856
- TIMESTAMP_FORMAT: 'MM-DD-YY hh:mm A',
3857
- LIST_DATE_TIME_FORMAT: 'YYYY-MM-DD hh:mm A',
3858
- DEFAULT_DATE_FORMAT: 'YYYY-MM-DD',
3859
- TIME: 'hh:mm:ss A'
3860
- };
3861
-
3862
- var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
3863
- var _Object$keys;
3864
- var data = [];
3865
- var i = 1;
3866
- Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(child)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(function (k) {
3867
- var result = k.replace(/([A-Z])/g, ' $1');
3868
- var dataIndex = {
3869
- key: i.toString(),
3870
- name: result.charAt(0).toUpperCase() + result.slice(1),
3871
- value: child[k]
3872
- };
3873
- data.push(dataIndex);
3874
- i++;
3875
- });
3876
- return data;
3877
- };
3878
- var renderMoney = function renderMoney(value) {
3879
- var returnValue = '$0.00';
3880
- try {
3881
- if (value) {
3882
- var _Math$abs, _Math$abs$toFixed, _value$toFixed;
3883
- returnValue = value < 0 ? "-$" + ((_Math$abs = Math.abs(value)) === null || _Math$abs === void 0 ? void 0 : (_Math$abs$toFixed = _Math$abs.toFixed(2)) === null || _Math$abs$toFixed === void 0 ? void 0 : _Math$abs$toFixed.replace(/\B(?=(\d{3})+(?!\d))/g, ',')) : "$" + ((_value$toFixed = value.toFixed(2)) === null || _value$toFixed === void 0 ? void 0 : _value$toFixed.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
3884
- }
3885
- } catch (e) {}
3886
- return returnValue;
3887
- };
3888
- var getLocalTime = function getLocalTime(_ref) {
3889
- var time = _ref.time,
3890
- _ref$format = _ref.format,
3891
- format = _ref$format === void 0 ? DATE_FORMATS.TIMESTAMP_FORMAT : _ref$format,
3892
- isMoment = _ref.isMoment;
3893
- if (!time) {
3894
- return time;
3895
- }
3896
- var convertedTime = moment.utc(time).clone().local();
3897
- if (!isMoment) {
3898
- convertedTime = convertedTime.format(format);
3899
- }
3900
- return convertedTime;
3901
- };
3902
- var getUTCTime = function getUTCTime(_ref2) {
3903
- var time = _ref2.time,
3904
- _ref2$format = _ref2.format,
3905
- format = _ref2$format === void 0 ? DATE_FORMATS.DEFAULT_DATE_TIME_FORMAT : _ref2$format,
3906
- isMoment = _ref2.isMoment;
3907
- if (!time) {
3908
- return time;
3909
- }
3910
- var convertedTime = moment(time).utc();
3911
- if (!isMoment) {
3912
- convertedTime = convertedTime.format(format);
3913
- }
3914
- return convertedTime;
3915
- };
3916
- function hexToRgbA(hex) {
3917
- var c;
3918
- if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
3919
- c = hex.substring(1).split('');
3920
- if (c.length == 3) {
3921
- c = [c[0], c[0], c[1], c[1], c[2], c[2]];
3922
- }
3923
- c = '0x' + c.join('');
3924
- return [c >> 16 & 255, c >> 8 & 255, c & 255].join(',');
3925
- } else return hex;
3926
- }
3927
- var getRandomString = function getRandomString(length) {
3928
- if (length === void 0) {
3929
- length = 16;
3930
- }
3931
- var text = '';
3932
- var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
3933
- for (var i = 0; i < length; i++) {
3934
- text += possible.charAt(Math.floor(Math.random() * possible.length));
3935
- }
3936
- return text;
3937
- };
3938
- var currentTimeText = function currentTimeText() {
3939
- var data = [[0, 4, 'Good Night'], [5, 11, 'Good Morning'], [12, 16, 'Good Afternoon'], [17, 19, 'Good Evening'], [20, 24, 'Good Night']];
3940
- var hr = new Date().getHours();
3941
- var text = '';
3942
- for (var i = 0; i < data.length; i++) {
3943
- if (hr >= data[i][0] && hr <= data[i][1]) {
3944
- text = data[i][2];
3945
- }
3946
- }
3947
- return text;
3948
- };
3949
-
3950
3956
  var _templateObject$9;
3951
3957
  var SideMenuItemComponent = function SideMenuItemComponent(props) {
3952
3958
  var className = props.className,