ordering-ui-admin-external 1.43.8 → 1.43.10

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.
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports.WrapperSearchAndFilter = exports.TopRightSection = exports.SLAControlsWrapper = exports.OrderContentHeaderContainer = exports.HeaderTitle = exports.HeaderSection = void 0;
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
9
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
10
10
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
11
11
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
12
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
@@ -24,20 +24,23 @@ var HeaderSection = exports.HeaderSection = _styledComponents.default.div(_templ
24
24
  var HeaderTitle = exports.HeaderTitle = _styledComponents.default.p(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 20px;\n font-weight: bold;\n margin: 0px;\n text-transform: capitalize;\n white-space: nowrap;\n\n @media (max-width: 560px) {\n width: calc(100% - 50px);\n }\n"])), function (props) {
25
25
  return props.theme.colors.headingColor;
26
26
  });
27
- var TopRightSection = exports.TopRightSection = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n ", "\n \n @media (min-width: 768px) {\n flex-direction: row;\n align-items: center;\n }\n"])), function (_ref2) {
27
+ var TopRightSection = exports.TopRightSection = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n ", "\n\n ", "\n\n @media (min-width: 768px) {\n flex-direction: row;\n align-items: center;\n }\n"])), function (_ref2) {
28
28
  var isCustomLayout = _ref2.isCustomLayout;
29
29
  return !isCustomLayout && (0, _styledComponents.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n justify-content: flex-end;\n "])));
30
+ }, function (_ref3) {
31
+ var isCustomLayout = _ref3.isCustomLayout;
32
+ return isCustomLayout && (0, _styledComponents.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n .websocket-container {\n padding-bottom: 10px;\n }\n "])));
30
33
  });
31
- var SLAControlsWrapper = exports.SLAControlsWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n margin-top: 10px;\n\n @media (min-width: 768px) {\n margin-top: 0px;\n }\n"])));
32
- var WrapperSearchAndFilter = exports.WrapperSearchAndFilter = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n margin-top: 10px;\n\n ", "\n\n input {\n background: ", ";\n border: none;\n }\n\n > button {\n ", "\n }\n\n @media (min-width: 760px) {\n margin: 20px 0 10px 0;\n }\n\n @media (min-width: 992px) {\n ", "\n }\n"])), function (_ref3) {
33
- var fullWidth = _ref3.fullWidth;
34
- return fullWidth && (0, _styledComponents.css)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n width: 100%;\n > div {\n width: 100%;\n\n input {\n width: 100%;\n }\n }\n "])));
34
+ var SLAControlsWrapper = exports.SLAControlsWrapper = _styledComponents.default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n margin-top: 10px;\n\n @media (min-width: 768px) {\n margin-top: 0px;\n }\n"])));
35
+ var WrapperSearchAndFilter = exports.WrapperSearchAndFilter = _styledComponents.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n align-items: center;\n margin-top: 10px;\n\n ", "\n\n input {\n background: ", ";\n border: none;\n }\n\n > button {\n ", "\n }\n\n @media (min-width: 760px) {\n margin: 20px 0 10px 0;\n }\n\n @media (min-width: 992px) {\n ", "\n }\n"])), function (_ref4) {
36
+ var fullWidth = _ref4.fullWidth;
37
+ return fullWidth && (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n width: 100%;\n > div {\n width: 100%;\n\n input {\n width: 100%;\n }\n }\n "])));
35
38
  }, function (props) {
36
39
  return props.theme.colors.secundary;
37
40
  }, function (props) {
38
41
  var _props$theme3;
39
- return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n margin-right: 8px;\n "]))) : (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n margin-left: 8px;\n "])));
40
- }, function (_ref4) {
41
- var fullWidth = _ref4.fullWidth;
42
- return !fullWidth && (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n margin: 0px;\n "])));
42
+ return (_props$theme3 = props.theme) !== null && _props$theme3 !== void 0 && _props$theme3.rtl ? (0, _styledComponents.css)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n margin-right: 8px;\n "]))) : (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n margin-left: 8px;\n "])));
43
+ }, function (_ref5) {
44
+ var fullWidth = _ref5.fullWidth;
45
+ return !fullWidth && (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n margin: 0px;\n "])));
43
46
  });
@@ -34,7 +34,8 @@ var OrdersHeaderFilterGroupUI = function OrdersHeaderFilterGroupUI(props) {
34
34
  handleChangeDriver = props.handleChangeDriver,
35
35
  handleChangeFilterValues = props.handleChangeFilterValues,
36
36
  handleChangeExternalId = props.handleChangeExternalId,
37
- handleChangeGroupUnassigned = props.handleChangeGroupUnassigned;
37
+ handleChangeGroupUnassigned = props.handleChangeGroupUnassigned,
38
+ isSelectedOrders = props.isSelectedOrders;
38
39
  var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
39
40
  _useLanguage2 = _slicedToArray(_useLanguage, 1),
40
41
  dictionary = _useLanguage2[0].dictionary;
@@ -79,7 +80,8 @@ var OrdersHeaderFilterGroupUI = function OrdersHeaderFilterGroupUI(props) {
79
80
  }, [filterValues]);
80
81
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.WrapperRow, {
81
82
  ref: wrapperRef,
82
- wrapperWidth: wrapperSize.width
83
+ wrapperWidth: wrapperSize.width,
84
+ isSelectedOrders: isSelectedOrders
83
85
  }, !loading && configFilter.includes('external_id') && /*#__PURE__*/_react.default.createElement(_Shared.SearchBar, {
84
86
  placeholder: (_dictionary$EXTERNAL_ = dictionary === null || dictionary === void 0 ? void 0 : dictionary.EXTERNAL_ID) !== null && _dictionary$EXTERNAL_ !== void 0 ? _dictionary$EXTERNAL_ : 'External Id',
85
87
  onChange: handleChangeExternalId,
@@ -15,8 +15,9 @@ var WrapperRow = exports.WrapperRow = _styledComponents.default.div(_templateObj
15
15
  }, function (props) {
16
16
  return props.theme.colors.headingColor;
17
17
  }, function (_ref) {
18
- var wrapperWidth = _ref.wrapperWidth;
19
- return wrapperWidth < 992 && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex-direction: column !important;\n padding: 15px 10px 0 10px;\n "])));
18
+ var wrapperWidth = _ref.wrapperWidth,
19
+ isSelectedOrders = _ref.isSelectedOrders;
20
+ return wrapperWidth < 992 && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex-direction: column !important;\n padding: ", ";\n "])), !isSelectedOrders && '15px 10px 0 10px');
20
21
  });
21
22
  var Option = exports.Option = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-weight: 400;\n font-size: 14px;\n line-height: 24px;\n color: ", ";\n display: flex;\n align-items: center;\n padding: 5px;\n"])), function (props) {
22
23
  return props.theme.colors.secundaryContrast;
@@ -233,6 +233,7 @@ var OrdersManagerUI = function OrdersManagerUI(props) {
233
233
  setSlaSettingTime: setSlaSettingTime,
234
234
  isLateralBar: isLateralBar
235
235
  }), /*#__PURE__*/_react.default.createElement(_OrdersHeaderFilterGroup.OrdersHeaderFilterGroup, {
236
+ isSelectedOrders: isSelectedOrders,
236
237
  driverGroupList: driverGroupList,
237
238
  driversList: driversList,
238
239
  handleChangeFilterValues: handleChangeFilterValues
@@ -65,7 +65,9 @@ var SocketStatusUI = function SocketStatusUI(props) {
65
65
  });
66
66
  }
67
67
  }, [reconnectAttemptCount]);
68
- return /*#__PURE__*/_react.default.createElement(_styles2.Contatiner, null, /*#__PURE__*/_react.default.createElement(_styles2.InfoWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
68
+ return /*#__PURE__*/_react.default.createElement(_styles2.Contatiner, {
69
+ className: "websocket-container"
70
+ }, /*#__PURE__*/_react.default.createElement(_styles2.InfoWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
69
71
  color: "primary"
70
72
  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.InfoCircle, null)), isEnabledWhiteLabelModule ? /*#__PURE__*/_react.default.createElement(_styles2.InfoContent, null, t('WEBSOCKET_STATUS_INFO_WITHOUT_LINK', 'Verify the server connection by date and time using the Connection status button. Press update to refresh you dashboard and update the status as well. Need help? Contact our Customer support team.')) : /*#__PURE__*/_react.default.createElement(_styles2.InfoContent, null, t('WEBSOCKET_STATUS_INFO', 'Verify the server connection by date and time using the Connection status button. Press update to refresh you dashboard and update the status as well. Need help? Contact our Customer support team here:'), /*#__PURE__*/_react.default.createElement("a", {
71
73
  href: "https://www.ordering.co/contact-ordering",
@@ -239,9 +239,7 @@ var CustomersListing = exports.CustomersListing = function CustomersListing(prop
239
239
  var customersProps = _objectSpread(_objectSpread({}, props), {}, {
240
240
  defaultUserActiveState: defaultUserActiveState,
241
241
  UIComponent: CustomersListingUI,
242
- isSearchByUserEmail: true,
243
242
  isSearchByUserPhone: true,
244
- isSearchByUserName: true,
245
243
  paginationSettings: {
246
244
  initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
247
245
  pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
@@ -126,7 +126,37 @@ var UserFilterGroupUI = function UserFilterGroupUI(props) {
126
126
  padding: "30px",
127
127
  open: isFilterModal,
128
128
  onClose: onClose
129
- }, /*#__PURE__*/_react.default.createElement(_styles2.Container, null, /*#__PURE__*/_react.default.createElement(_styles2.FormGroup, null, /*#__PURE__*/_react.default.createElement(_styles2.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('NAME', 'Name')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
129
+ }, /*#__PURE__*/_react.default.createElement(_styles2.Container, null, isCustomers && /*#__PURE__*/_react.default.createElement(_styles2.FormGroup, null, /*#__PURE__*/_react.default.createElement(_styles2.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('ID', 'ID')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
130
+ type: "text",
131
+ placeholder: t('ID', 'ID'),
132
+ autoComplete: "off",
133
+ value: (filterValues === null || filterValues === void 0 ? void 0 : filterValues.id) || '',
134
+ onChange: function onChange(e) {
135
+ return handleChangeValue({
136
+ id: e.target.value
137
+ });
138
+ },
139
+ onKeyPress: function onKeyPress(e) {
140
+ if (!/^[0-9]$/.test(e.key)) {
141
+ e.preventDefault();
142
+ }
143
+ }
144
+ })), /*#__PURE__*/_react.default.createElement(_styles2.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('EXTERNAL_ID', 'External id')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
145
+ type: "text",
146
+ placeholder: t('EXTERNAL_ID', 'External id'),
147
+ autoComplete: "off",
148
+ value: (filterValues === null || filterValues === void 0 ? void 0 : filterValues.externalId) || '',
149
+ onChange: function onChange(e) {
150
+ return handleChangeValue({
151
+ externalId: e.target.value
152
+ });
153
+ },
154
+ onKeyPress: function onKeyPress(e) {
155
+ if (!/^[0-9]$/.test(e.key)) {
156
+ e.preventDefault();
157
+ }
158
+ }
159
+ }))), /*#__PURE__*/_react.default.createElement(_styles2.FormGroup, null, /*#__PURE__*/_react.default.createElement(_styles2.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('NAME', 'Name')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
130
160
  type: "text",
131
161
  placeholder: t('NAME', 'Name'),
132
162
  autoComplete: "off",
@@ -192,7 +222,7 @@ var UserFilterGroupUI = function UserFilterGroupUI(props) {
192
222
  })
193
223
  });
194
224
  }
195
- })))), /*#__PURE__*/_react.default.createElement(_styles2.FormGroup, null, /*#__PURE__*/_react.default.createElement(_styles2.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('COUNTRY_PHONE_CODE', 'Country phone code')), /*#__PURE__*/_react.default.createElement(_styles.DefaultSelect, {
225
+ })))), !isCustomers && /*#__PURE__*/_react.default.createElement(_styles2.FormGroup, null, /*#__PURE__*/_react.default.createElement(_styles2.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('COUNTRY_PHONE_CODE', 'Country phone code')), /*#__PURE__*/_react.default.createElement(_styles.DefaultSelect, {
196
226
  placeholder: t('SELECT_OPTION', 'Select a option'),
197
227
  defaultValue: filterValues === null || filterValues === void 0 ? void 0 : filterValues.countryPhoneCode,
198
228
  options: phoneCodeList,
@@ -62,7 +62,7 @@ var UsersListingHeader = exports.UsersListingHeader = function UsersListingHeade
62
62
  isCustomLayout: true,
63
63
  onSearch: onSearch,
64
64
  search: searchValue,
65
- placeholder: t('SEARCH', 'Search')
65
+ placeholder: isCustomers ? t('SEARCH_BY_CELLPHONE', 'Search by phone') : t('SEARCH', 'Search')
66
66
  }), multiFilterValues && /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
67
67
  color: "black",
68
68
  onClick: function onClick() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-admin-external",
3
- "version": "1.43.8",
3
+ "version": "1.43.10",
4
4
  "description": "Ordering UI Admin Components",
5
5
  "main": "./_modules/index.js",
6
6
  "exports": {
@@ -83,7 +83,7 @@
83
83
  "lodash": "^4.17.20",
84
84
  "moment": "^2.29.1",
85
85
  "moment-range": "^4.0.2",
86
- "ordering-components-admin-external": "1.43.2",
86
+ "ordering-components-admin-external": "1.43.4",
87
87
  "polished": "^3.6.7",
88
88
  "prop-types": "^15.7.2",
89
89
  "react-big-calendar": "^1.4.2",
@@ -71,7 +71,13 @@ export const TopRightSection = styled.div`
71
71
  ${({ isCustomLayout }) => !isCustomLayout && css`
72
72
  justify-content: flex-end;
73
73
  `}
74
-
74
+
75
+ ${({ isCustomLayout }) => isCustomLayout && css`
76
+ .websocket-container {
77
+ padding-bottom: 10px;
78
+ }
79
+ `}
80
+
75
81
  @media (min-width: 768px) {
76
82
  flex-direction: row;
77
83
  align-items: center;
@@ -17,7 +17,8 @@ const OrdersHeaderFilterGroupUI = (props) => {
17
17
  handleChangeDriver,
18
18
  handleChangeFilterValues,
19
19
  handleChangeExternalId,
20
- handleChangeGroupUnassigned
20
+ handleChangeGroupUnassigned,
21
+ isSelectedOrders
21
22
  } = props
22
23
 
23
24
  const [{ dictionary }] = useLanguage()
@@ -51,7 +52,7 @@ const OrdersHeaderFilterGroupUI = (props) => {
51
52
 
52
53
  return (
53
54
  <>
54
- <WrapperRow ref={wrapperRef} wrapperWidth={wrapperSize.width}>
55
+ <WrapperRow ref={wrapperRef} wrapperWidth={wrapperSize.width} isSelectedOrders={isSelectedOrders}>
55
56
  {!loading && configFilter.includes('external_id') && (
56
57
  <SearchBar
57
58
  placeholder={dictionary?.EXTERNAL_ID ?? 'External Id'}
@@ -62,9 +62,9 @@ export const WrapperRow = styled.div`
62
62
  flex-direction: row;
63
63
  }
64
64
 
65
- ${({ wrapperWidth }) => wrapperWidth < 992 && css`
65
+ ${({ wrapperWidth, isSelectedOrders }) => wrapperWidth < 992 && css`
66
66
  flex-direction: column !important;
67
- padding: 15px 10px 0 10px;
67
+ padding: ${!isSelectedOrders && '15px 10px 0 10px'};
68
68
  `}
69
69
  `
70
70
  export const Option = styled.div`
@@ -196,6 +196,7 @@ const OrdersManagerUI = (props) => {
196
196
  isLateralBar={isLateralBar}
197
197
  />
198
198
  <OrdersHeaderFilterGroup
199
+ isSelectedOrders={isSelectedOrders}
199
200
  driverGroupList={driverGroupList}
200
201
  driversList={driversList}
201
202
  handleChangeFilterValues={handleChangeFilterValues}
@@ -48,7 +48,7 @@ const SocketStatusUI = (props) => {
48
48
  }, [reconnectAttemptCount])
49
49
 
50
50
  return (
51
- <Contatiner>
51
+ <Contatiner className='websocket-container'>
52
52
  <InfoWrapper>
53
53
  <IconButton
54
54
  color='primary'
@@ -231,9 +231,7 @@ export const CustomersListing = (props) => {
231
231
  ...props,
232
232
  defaultUserActiveState,
233
233
  UIComponent: CustomersListingUI,
234
- isSearchByUserEmail: true,
235
234
  isSearchByUserPhone: true,
236
- isSearchByUserName: true,
237
235
  paginationSettings: {
238
236
  initialPage: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPage) : 1,
239
237
  pageSize: props.isUseQuery && !isNaN(defaultPage) ? Number(defaultPageSize) : 10,
@@ -94,6 +94,40 @@ const UserFilterGroupUI = (props) => {
94
94
  onClose={onClose}
95
95
  >
96
96
  <Container>
97
+ {isCustomers && (
98
+ <FormGroup>
99
+ <FormControl>
100
+ <label>{t('ID', 'ID')}</label>
101
+ <Input
102
+ type='text'
103
+ placeholder={t('ID', 'ID')}
104
+ autoComplete='off'
105
+ value={filterValues?.id || ''}
106
+ onChange={(e) => handleChangeValue({ id: e.target.value })}
107
+ onKeyPress={(e) => {
108
+ if (!/^[0-9]$/.test(e.key)) {
109
+ e.preventDefault()
110
+ }
111
+ }}
112
+ />
113
+ </FormControl>
114
+ <FormControl>
115
+ <label>{t('EXTERNAL_ID', 'External id')}</label>
116
+ <Input
117
+ type='text'
118
+ placeholder={t('EXTERNAL_ID', 'External id')}
119
+ autoComplete='off'
120
+ value={filterValues?.externalId || ''}
121
+ onChange={(e) => handleChangeValue({ externalId: e.target.value })}
122
+ onKeyPress={(e) => {
123
+ if (!/^[0-9]$/.test(e.key)) {
124
+ e.preventDefault()
125
+ }
126
+ }}
127
+ />
128
+ </FormControl>
129
+ </FormGroup>
130
+ )}
97
131
  <FormGroup>
98
132
  <FormControl>
99
133
  <label>{t('NAME', 'Name')}</label>
@@ -164,34 +198,36 @@ const UserFilterGroupUI = (props) => {
164
198
  </FormControl>
165
199
  )}
166
200
  </FormGroup>
167
- <FormGroup>
168
- <FormControl>
169
- <label>{t('COUNTRY_PHONE_CODE', 'Country phone code')}</label>
170
- <DefaultSelect
171
- placeholder={t('SELECT_OPTION', 'Select a option')}
172
- defaultValue={filterValues?.countryPhoneCode}
173
- options={phoneCodeList}
174
- onChange={val => handleChangeValue({ countryPhoneCode: val })}
175
- optionInnerMaxHeight='300px'
176
- className='full-select'
177
- />
178
- </FormControl>
179
- <FormControl>
180
- <label>{t('PHONE_NUMBER', 'Phone number')}</label>
181
- <Input
182
- type='text'
183
- placeholder={t('PHONE_NUMBER', 'Phone number')}
184
- autoComplete='off'
185
- onKeyPress={(e) => {
186
- if (!/^[0-9]$/.test(e.key)) {
187
- e.preventDefault()
188
- }
189
- }}
190
- value={filterValues?.cellphone || ''}
191
- onChange={(e) => handleChangeValue({ cellphone: e.target.value })}
192
- />
193
- </FormControl>
194
- </FormGroup>
201
+ {!isCustomers && (
202
+ <FormGroup>
203
+ <FormControl>
204
+ <label>{t('COUNTRY_PHONE_CODE', 'Country phone code')}</label>
205
+ <DefaultSelect
206
+ placeholder={t('SELECT_OPTION', 'Select a option')}
207
+ defaultValue={filterValues?.countryPhoneCode}
208
+ options={phoneCodeList}
209
+ onChange={val => handleChangeValue({ countryPhoneCode: val })}
210
+ optionInnerMaxHeight='300px'
211
+ className='full-select'
212
+ />
213
+ </FormControl>
214
+ <FormControl>
215
+ <label>{t('PHONE_NUMBER', 'Phone number')}</label>
216
+ <Input
217
+ type='text'
218
+ placeholder={t('PHONE_NUMBER', 'Phone number')}
219
+ autoComplete='off'
220
+ onKeyPress={(e) => {
221
+ if (!/^[0-9]$/.test(e.key)) {
222
+ e.preventDefault()
223
+ }
224
+ }}
225
+ value={filterValues?.cellphone || ''}
226
+ onChange={(e) => handleChangeValue({ cellphone: e.target.value })}
227
+ />
228
+ </FormControl>
229
+ </FormGroup>
230
+ )}
195
231
  <FormGroup>
196
232
  <FormControl>
197
233
  <label>{t('PHONE_VERIFIED', 'Phone verified')}</label>
@@ -68,7 +68,7 @@ export const UsersListingHeader = (props) => {
68
68
  isCustomLayout
69
69
  onSearch={onSearch}
70
70
  search={searchValue}
71
- placeholder={t('SEARCH', 'Search')}
71
+ placeholder={isCustomers ? t('SEARCH_BY_CELLPHONE', 'Search by phone') : t('SEARCH', 'Search')}
72
72
  />
73
73
  {multiFilterValues && (
74
74
  <IconButton