@tap-payments/auth-jsconnect 1.0.21 → 1.0.22

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 (17) hide show
  1. package/build/app/settings.js +0 -6
  2. package/build/assets/locales/ar.json +2 -1
  3. package/build/assets/locales/en.json +2 -1
  4. package/build/components/Button/Button.js +1 -1
  5. package/build/constants/app.js +2 -2
  6. package/build/features/app/connect/connectStore.js +0 -3
  7. package/build/features/connect/screens/Individual/Email.d.ts +2 -1
  8. package/build/features/connect/screens/Individual/Email.js +14 -1
  9. package/build/features/connect/screens/Individual/Individual.js +12 -7
  10. package/build/features/connect/screens/Individual/MobileNumber.d.ts +2 -0
  11. package/build/features/connect/screens/Individual/MobileNumber.js +8 -4
  12. package/build/features/connect/screens/Individual/Name.d.ts +2 -1
  13. package/build/features/connect/screens/Individual/Name.js +3 -1
  14. package/build/features/connect/screens/Merchant/validation.js +1 -1
  15. package/build/features/connect/screens/Mobile/MobileNumber.js +6 -6
  16. package/build/features/shared/Button/Button.js +20 -6
  17. package/package.json +1 -1
package/build/app/settings.js CHANGED
@@ -147,16 +147,13 @@ export var settingsSlice = createSlice({
147
147
  extraReducers: function (builder) {
148
148
  builder
149
149
  .addCase(getClientIp.pending, function (state) {
150
- state.loading = true;
151
150
  state.error = null;
152
151
  })
153
152
  .addCase(getClientIp.fulfilled, function (state, action) {
154
- state.loading = false;
155
153
  state.error = null;
156
154
  state.data.deviceInfo.connection.ip = action.payload;
157
155
  })
158
156
  .addCase(getClientIp.rejected, function (state, action) {
159
- state.loading = false;
160
157
  state.error = action.error.message;
161
158
  })
162
159
  .addCase(getBrowserFingerPrint.pending, function (state) {
@@ -184,17 +181,14 @@ export var settingsSlice = createSlice({
184
181
  state.error = action.error.message;
185
182
  })
186
183
  .addCase(getOperator.pending, function (state) {
187
- state.loading = true;
188
184
  state.error = null;
189
185
  })
190
186
  .addCase(getOperator.fulfilled, function (state, action) {
191
187
  if (action.payload === 'valid') {
192
- state.loading = false;
193
188
  state.error = null;
194
189
  }
195
190
  })
196
191
  .addCase(getOperator.rejected, function (state, action) {
197
- state.loading = false;
198
192
  state.error = action.error.message;
199
193
  });
200
194
  }
package/build/assets/locales/ar.json CHANGED
@@ -208,5 +208,6 @@
208
208
  "fl_required": "رقم رخصة العمل الحر مطلوب",
209
209
  "fl_max_length": "طول رخصة العمل الحر يجب ان يكون{{length}}",
210
210
  "absher_button_label": "المتابعة عن طريق أبشر",
211
- "or": "أو"
211
+ "or": "أو",
212
+ "next": "التالي"
212
213
  }
package/build/assets/locales/en.json CHANGED
@@ -222,5 +222,6 @@
222
222
  "fl_required": "Freelance number is required",
223
223
  "fl_max_length": "Freelance number length should be {{length}}",
224
224
  "absher_button_label": "Continue with Absher",
225
- "or": "Or"
225
+ "or": "Or",
226
+ "next": "next"
226
227
  }
package/build/components/Button/Button.js CHANGED
@@ -43,7 +43,7 @@ var ButtonStyled = styled(Button)(function (_a) {
43
43
  backgroundColor: theme.palette.primary.main
44
44
  },
45
45
  ':disabled': {
46
- backgroundColor: alpha(theme.palette.primary.main, 0.6),
46
+ backgroundColor: alpha(theme.palette.primary.main, 0.3),
47
47
  color: theme.palette.common.white
48
48
  },
49
49
  '& .MuiButton-endIcon': {
package/build/constants/app.js CHANGED
@@ -32,13 +32,13 @@ export var CONNECT_SCREENS_NAVIGATION = [
32
32
  {
33
33
  name: 'CONNECT_INDIVIDUAL_STEP',
34
34
  next: 'CONNECT_MERCHANT_INFO_STEP',
35
- prev: 'CONNECT_OTP_STEP',
35
+ prev: ['CONNECT_MOBILE_STEP', 'CONNECT_NID_STEP'],
36
36
  order: 3
37
37
  },
38
38
  {
39
39
  name: 'CONNECT_PASSWORD_STEP',
40
40
  next: 'CONNECT_MERCHANT_INFO_STEP',
41
- prev: 'CONNECT_OTP_STEP',
41
+ prev: ['CONNECT_MOBILE_STEP', 'CONNECT_NID_STEP'],
42
42
  order: 3
43
43
  },
44
44
  {
package/build/features/app/connect/connectStore.js CHANGED
@@ -390,18 +390,15 @@ export var connectSlice = createSlice({
390
390
  extraReducers: function (builder) {
391
391
  builder
392
392
  .addCase(getCountries.fulfilled, function (state, action) {
393
- state.loading = false;
394
393
  state.error = null;
395
394
  var _a = action.payload, businessCountries = _a.businessCountries, countries = _a.countries;
396
395
  state.data.businessCountries = businessCountries;
397
396
  state.data.countries = countries;
398
397
  })
399
398
  .addCase(getCountries.pending, function (state) {
400
- state.loading = true;
401
399
  state.error = null;
402
400
  })
403
401
  .addCase(getCountries.rejected, function (state, action) {
404
- state.loading = false;
405
402
  state.error = action.error.message;
406
403
  })
407
404
  .addCase(createMobileAuth.fulfilled, function (state, action) {
package/build/features/connect/screens/Individual/Email.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  export interface EmailProps {
3
+ show: boolean;
3
4
  }
4
- declare const _default: React.MemoExoticComponent<({}: EmailProps) => JSX.Element>;
5
+ declare const _default: React.MemoExoticComponent<({ show }: EmailProps) => JSX.Element>;
5
6
  export default _default;
package/build/features/connect/screens/Individual/Email.js CHANGED
@@ -1,3 +1,14 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
1
12
  import { jsx as _jsx } from "react/jsx-runtime";
2
13
  import * as React from 'react';
3
14
  import { useTranslation } from 'react-i18next';
@@ -10,8 +21,10 @@ import CheckIcon from '../../../shared/CheckIcon';
10
21
  import { checkEmailAvailability } from '../../../app/connect/connectStore';
11
22
  import { useAppDispatch } from '../../../../hooks';
12
23
  import { debounce } from 'lodash-es';
24
+ import Collapse from '../../../../components/Collapse';
13
25
  var Email = function (_a) {
14
26
  var _b;
27
+ var show = _a.show;
15
28
  var dispatch = useAppDispatch();
16
29
  var t = useTranslation().t;
17
30
  var control = useFormContext().control;
@@ -30,6 +43,6 @@ var Email = function (_a) {
30
43
  var clearNumber = function () {
31
44
  emailControl.field.onChange('');
32
45
  };
33
- return (_jsx(ScreenContainer, { children: _jsx(Input, { label: t('signup_email_lable'), value: emailValue, onChange: handleEmailChange, type: 'email', placeholder: t('signup_email_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && emailValue ? _jsx(CheckIcon, {}) : emailValue && _jsx(ClearIcon, { onClick: clearNumber }) }) }));
46
+ return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { label: t('signup_email_lable'), value: emailValue, onChange: handleEmailChange, type: 'email', placeholder: t('signup_email_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && emailValue ? _jsx(CheckIcon, {}) : emailValue && _jsx(ClearIcon, { onClick: clearNumber }) }) }) })));
34
47
  };
35
48
  export default React.memo(Email);
package/build/features/connect/screens/Individual/Individual.js CHANGED
@@ -28,16 +28,18 @@ import { clearError, connectSelector, updateLeadIndividual } from '../../../app/
28
28
  import { useLanguage } from '../../../../hooks';
29
29
  import MobileNumber from './MobileNumber';
30
30
  import { countriesCode } from '../../../../constants';
31
+ import Collapse from '../../../../components/Collapse';
31
32
  var FormStyled = styled(Form)(function () { return ({
32
33
  display: 'flex',
33
34
  flexDirection: 'column'
34
35
  }); });
35
36
  var Individual = function (_a) {
36
- var _b, _c;
37
- var _d = React.useState(9), mobileLength = _d[0], setMobileLength = _d[1];
37
+ var _b, _c, _d;
38
+ var _e = React.useState(false), listActive = _e[0], setListActive = _e[1];
39
+ var _f = useSelector(connectSelector), data = _f.data, loading = _f.loading, error = _f.error, searchActive = _f.searchActive;
40
+ var _g = React.useState(((_b = data.individualData.countryCode) === null || _b === void 0 ? void 0 : _b.digits) || 9), mobileLength = _g[0], setMobileLength = _g[1];
38
41
  var dispatch = useAppDispatch();
39
- var _e = useSelector(connectSelector), data = _e.data, loading = _e.loading, error = _e.error, searchActive = _e.searchActive;
40
- var isAbsher = (_b = data.otpData) === null || _b === void 0 ? void 0 : _b.isAbsher;
42
+ var isAbsher = (_c = data.otpData) === null || _c === void 0 ? void 0 : _c.isAbsher;
41
43
  var methods = useForm({
42
44
  resolver: yupResolver(isAbsher ? IndividualMobileValidation(mobileLength) : IndividualValidation()),
43
45
  defaultValues: data.individualData,
@@ -47,7 +49,7 @@ var Individual = function (_a) {
47
49
  dispatch(updateLeadIndividual(formData));
48
50
  };
49
51
  var onBack = function () {
50
- dispatch(handlePrevScreenStep());
52
+ dispatch(handlePrevScreenStep(isAbsher ? 'CONNECT_NID_STEP' : 'CONNECT_MOBILE_STEP'));
51
53
  };
52
54
  React.useEffect(function () {
53
55
  if (error)
@@ -57,10 +59,13 @@ var Individual = function (_a) {
57
59
  var _a, _b;
58
60
  if (((_b = (_a = data.individualData) === null || _a === void 0 ? void 0 : _a.responseBody) === null || _b === void 0 ? void 0 : _b.is_available) == false)
59
61
  methods.setError('email', { message: 'tap_js_email_already_exist' });
60
- }, [(_c = data.individualData) === null || _c === void 0 ? void 0 : _c.responseBody]);
62
+ }, [(_d = data.individualData) === null || _d === void 0 ? void 0 : _d.responseBody]);
61
63
  var t = useTranslation().t;
62
64
  var isAr = useLanguage().isAr;
63
65
  var disabled = !methods.formState.isValid || !!methods.formState.errors.email || !!error || searchActive;
64
- return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, {}), _jsx(MobileNumber, { setMobileLength: setMobileLength, show: isAbsher, countries: countriesCode }), _jsx(Email, {}), _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
66
+ var handleMenuListClick = function () {
67
+ listActive ? setListActive(false) : setListActive(true);
68
+ };
69
+ return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Name, { show: !listActive }), _jsx(MobileNumber, { setMobileLength: setMobileLength, show: isAbsher, onListOpen: function () { return handleMenuListClick(); }, onListClose: function () { return handleMenuListClick(); }, countries: countriesCode }), _jsx(Email, { show: !listActive }), _jsx(Collapse, __assign({ in: !listActive }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
65
70
  };
66
71
  export default React.memo(Individual);
package/build/features/connect/screens/Individual/MobileNumber.d.ts CHANGED
@@ -4,6 +4,8 @@ interface MobileNumberProps {
4
4
  countries: Array<CountryCode>;
5
5
  show: boolean;
6
6
  setMobileLength?: (length: number) => void;
7
+ onListOpen?: () => void;
8
+ onListClose?: () => void;
7
9
  }
8
10
  declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MobileNumberProps & React.RefAttributes<unknown>>>;
9
11
  export default _default;
package/build/features/connect/screens/Individual/MobileNumber.js CHANGED
@@ -96,11 +96,15 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
96
96
  var clearMobileNumber = function () {
97
97
  phoneControl.field.onChange('');
98
98
  };
99
- var onOpenCountryList = function (event) {
100
- setAnchorEl(event.currentTarget);
101
- };
102
99
  var onCloseCountryList = function () {
100
+ var _a;
103
101
  setAnchorEl(null);
102
+ (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
103
+ };
104
+ var toggleCountryList = function () {
105
+ var _a, _b;
106
+ anchorEl ? setAnchorEl(null) : setAnchorEl(true);
107
+ anchorEl ? (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest) : (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
104
108
  };
105
109
  var onSelectItem = function (country) {
106
110
  var _a;
@@ -113,7 +117,7 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
113
117
  var mobileValue = phoneControl.field.value || '';
114
118
  var countryName = (isAr ? (_b = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _c === void 0 ? void 0 : _c.english) || '';
115
119
  var error = (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message;
116
- return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mb: 3 }, ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits) || 9 }, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: onOpenCountryList }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat((countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA' ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
120
+ return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mb: 3 }, ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits) || 9 }, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat((countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA' ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
117
121
  return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
118
122
  } }) }))] })) })));
119
123
  });
package/build/features/connect/screens/Individual/Name.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  export interface NameProps {
3
+ show: boolean;
3
4
  }
4
- declare const _default: React.MemoExoticComponent<({}: NameProps) => JSX.Element>;
5
+ declare const _default: React.MemoExoticComponent<({ show }: NameProps) => JSX.Element>;
5
6
  export default _default;
package/build/features/connect/screens/Individual/Name.js CHANGED
@@ -18,8 +18,10 @@ import { removeAllOtherThanAlphabetAndSpace } from '../../../../utils';
18
18
  import { useController, useFormContext } from 'react-hook-form';
19
19
  import ClearIcon from '../../../shared/ClearIcon';
20
20
  import CheckIcon from '../../../shared/CheckIcon';
21
+ import Collapse from '../../../../components/Collapse';
21
22
  var Name = function (_a) {
22
23
  var _b;
24
+ var show = _a.show;
23
25
  var t = useTranslation().t;
24
26
  var control = useFormContext().control;
25
27
  var nameControl = useController({ name: 'name', control: control });
@@ -32,6 +34,6 @@ var Name = function (_a) {
32
34
  var clearNumber = function () {
33
35
  nameControl.field.onChange('');
34
36
  };
35
- return (_jsx(ScreenContainer, __assign({ sx: { mb: 3, mt: 2.5 } }, { children: _jsx(Input, { label: t('signup_merchant_name_label'), value: nameValue, onChange: handleNameChange, placeholder: t('signup_merchant_name_label'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && nameValue ? _jsx(CheckIcon, {}) : nameValue && _jsx(ClearIcon, { onClick: clearNumber }) }) })));
37
+ return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, __assign({ sx: { mb: 3, mt: 2.5 } }, { children: _jsx(Input, { label: t('signup_merchant_name_label'), value: nameValue, onChange: handleNameChange, placeholder: t('signup_merchant_name_label'), warningType: 'alert', warningMessage: error && t(error), endAdornment: !error && nameValue ? _jsx(CheckIcon, {}) : nameValue && _jsx(ClearIcon, { onClick: clearNumber }) }) })) })));
36
38
  };
37
39
  export default React.memo(Name);
package/build/features/connect/screens/Merchant/validation.js CHANGED
@@ -11,7 +11,7 @@ export var MerchantValidationSchema = yup.object().shape({
11
11
  if (!instagram && !twitter) {
12
12
  return yup
13
13
  .string()
14
- .matches(/(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]/, 'ide_not_valid_url')
14
+ .matches(/^[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,63}(:[0-9]{1,5})?(\/.*)?$/, 'ide_not_valid_url')
15
15
  .transform(function (value) { return (!!value ? value : null); })
16
16
  .nullable()
17
17
  .required('enter_at_least_one');
package/build/features/connect/screens/Mobile/MobileNumber.js CHANGED
@@ -114,16 +114,16 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
114
114
  var clearMobileNumber = function () {
115
115
  phoneControl.field.onChange('');
116
116
  };
117
- var onOpenCountryList = function (event) {
118
- var _a;
119
- setAnchorEl(event.currentTarget);
120
- (_a = rest.onListOpen) === null || _a === void 0 ? void 0 : _a.call(rest);
121
- };
122
117
  var onCloseCountryList = function () {
123
118
  var _a;
124
119
  setAnchorEl(null);
125
120
  (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
126
121
  };
122
+ var toggleCountryList = function () {
123
+ var _a, _b;
124
+ anchorEl ? setAnchorEl(null) : setAnchorEl(true);
125
+ anchorEl ? (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest) : (_b = rest.onListOpen) === null || _b === void 0 ? void 0 : _b.call(rest);
126
+ };
127
127
  var onSelectItem = function (country) {
128
128
  var _a;
129
129
  onCloseCountryList();
@@ -135,7 +135,7 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
135
135
  var mobileValue = phoneControl.field.value || '';
136
136
  var countryName = (isAr ? (_b = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _b === void 0 ? void 0 : _b.arabic : (_c = countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.name) === null || _c === void 0 ? void 0 : _c.english) || '';
137
137
  var error = (_d = phoneControl.fieldState.error) === null || _d === void 0 ? void 0 : _d.message;
138
- return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits) || 10 }, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: onOpenCountryList }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat((countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA' ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
138
+ return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits) || 10 }, onChange: onPhoneNumberChange, value: !!anchorEl ? countryName : mobileValue, startAdornment: _jsxs(CountryCodeStyled, __assign({ onClick: function () { return toggleCountryList(); } }, { children: ["+".concat(countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix), !anchorEl && _jsx(ExpandIconStyled, { anchorEl: !!anchorEl })] })), endAdornment: !!anchorEl ? (_jsx(ExpandIconStyled, { onClick: function () { return toggleCountryList(); }, anchorEl: !!anchorEl })) : !error && mobileValue ? (_jsx(CheckIcon, {})) : (mobileValue && _jsx(ClearIcon, { onClick: clearMobileNumber })), placeholder: "".concat((countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.iso2) === 'SA' ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.digits }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
139
139
  return (_jsxs(_Fragment, { children: [_jsxs(CountryItemContainer, { children: [_jsxs(CountryCodeText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: ["+", item.idd_prefix] })), _jsx(CountryNameText, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.idd_prefix) === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) }, { children: isAr ? item.name.arabic : item.name.english }))] }), item.idd_prefix === (countryCodeValue === null || countryCodeValue === void 0 ? void 0 : countryCodeValue.idd_prefix) && _jsx(CheckIcon, {})] }));
140
140
  } }) }))] })) })));
141
141
  });
package/build/features/shared/Button/Button.js CHANGED
@@ -35,7 +35,8 @@ var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop
35
35
  return ({
36
36
  width: theme.spacing(3),
37
37
  height: theme.spacing(3),
38
- transform: isAr ? 'scaleX(-1)' : 'scaleX(1)'
38
+ transform: isAr ? 'scaleX(-1)' : 'scaleX(1)',
39
+ marginInlineEnd: theme.spacing(-0.75)
39
40
  });
40
41
  });
41
42
  var BackIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
@@ -43,15 +44,28 @@ var BackIconStyled = styled(Icon, { shouldForwardProp: function (prop) { return
43
44
  return ({
44
45
  width: theme.spacing(3),
45
46
  height: theme.spacing(3),
46
- transform: isAr ? 'scaleX(1)' : 'scaleX(-1)'
47
+ transform: isAr ? 'scaleX(1)' : 'scaleX(-1)',
48
+ marginInlineStart: theme.spacing(0.5)
47
49
  });
48
50
  });
49
- var ButtonBoxStyled = styled(ButtonGroup)(function (_a) {
50
- var theme = _a.theme;
51
+ var ButtonBoxStyled = styled(ButtonGroup, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
52
+ var theme = _a.theme, isAr = _a.isAr;
51
53
  return ({
52
54
  width: '100%',
53
55
  margin: theme.spacing(0, 2.5, 2.5, 2.5),
54
- paddingInlineEnd: theme.spacing(5)
56
+ paddingInlineEnd: theme.spacing(5),
57
+ '& .MuiButtonGroup-grouped:not(:first-of-type)': {
58
+ borderTopRightRadius: theme.spacing(4.1),
59
+ borderBottomRightRadius: theme.spacing(4.1),
60
+ borderTopLeftRadius: 0,
61
+ borderBottomLeftRadius: 0
62
+ },
63
+ '& .MuiButtonGroup-grouped:not(:last-of-type)': {
64
+ borderTopRightRadius: 0,
65
+ borderBottomRightRadius: 0,
66
+ borderTopLeftRadius: theme.spacing(4.1),
67
+ borderBottomLeftRadius: theme.spacing(4.1)
68
+ }
55
69
  });
56
70
  });
57
71
  var ButtonStyled = styled(Button)(function (_a) {
@@ -62,7 +76,7 @@ var ButtonStyled = styled(Button)(function (_a) {
62
76
  });
63
77
  export default function CustomButton(_a) {
64
78
  var children = _a.children, disabled = _a.disabled, isAr = _a.isAr, loading = _a.loading, disableBack = _a.disableBack, onBackClicked = _a.onBackClicked, error = _a.error, props = __rest(_a, ["children", "disabled", "isAr", "loading", "disableBack", "onBackClicked", "error"]);
65
- return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, __assign({ sx: { mt: 5 } }, { children: [!disableBack && !loading && (_jsx(ButtonStyled, __assign({ onClick: function () { return onBackClicked === null || onBackClicked === void 0 ? void 0 : onBackClicked(); }, sx: { width: '10%' }, type: 'reset', startIcon: _jsx(BackIconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, props))), _jsx(ButtonStyled, __assign({ disabled: disabled, type: 'submit', endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }), startIcon: _jsx(Loader, { style: {
79
+ return (_jsxs(Fragment, { children: [_jsx(Collapse, __assign({ in: !!error }, { children: _jsx(Warning, __assign({ sx: { mb: 1 }, warningType: 'error' }, { children: error })) })), _jsxs(ButtonBoxStyled, __assign({ sx: { mt: 5 }, isAr: isAr, disableElevation: true, disableRipple: true, disableFocusRipple: true }, { children: [!disableBack && !loading && (_jsx(ButtonStyled, __assign({ onClick: function () { return onBackClicked === null || onBackClicked === void 0 ? void 0 : onBackClicked(); }, sx: { width: '10%' }, type: 'reset', startIcon: _jsx(BackIconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, props))), _jsx(ButtonStyled, __assign({ disabled: disabled || loading, type: 'submit', endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }), startIcon: _jsx(Loader, { style: {
66
80
  visibility: disableBack && !loading ? 'hidden' : loading ? 'visible' : 'hidden',
67
81
  display: !disableBack && !loading ? 'none' : 'block'
68
82
  }, innerColor: 'white', outerColor: 'white', size: 30, toggleAnimation: !!loading }) }, props, { children: children }))] }))] }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tap-payments/auth-jsconnect",
3
- "version": "1.0.21",
3
+ "version": "1.0.22",
4
4
  "description": "connect library, auth",
5
5
  "private": false,
6
6
  "main": "build/index.js",