@tap-payments/auth-jsconnect 1.0.63 → 1.0.67
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/build/api/availabilityServices.d.ts +5 -0
- package/build/api/availabilityServices.js +5 -1
- package/build/api/entity.d.ts +1 -0
- package/build/api/index.d.ts +1 -0
- package/build/assets/locales/ar.json +2 -0
- package/build/assets/locales/en.json +4 -2
- package/build/constants/api.d.ts +1 -0
- package/build/constants/api.js +3 -1
- package/build/constants/assets.d.ts +10 -8
- package/build/constants/assets.js +10 -8
- package/build/constants/validation.d.ts +1 -0
- package/build/constants/validation.js +1 -0
- package/build/features/app/bank/bankStore.d.ts +8 -0
- package/build/features/app/bank/bankStore.js +36 -3
- package/build/features/app/business/businessStore.d.ts +3 -0
- package/build/features/app/business/businessStore.js +66 -33
- package/build/features/app/connect/connectStore.js +1 -1
- package/build/features/bank/screens/BankDetails/BankDetails.js +6 -4
- package/build/features/bank/screens/BankDetails/BankName.js +17 -3
- package/build/features/bank/screens/BankDetails/Beneficiary.js +12 -3
- package/build/features/bank/screens/BankDetails/IBAN.d.ts +3 -1
- package/build/features/bank/screens/BankDetails/IBAN.js +67 -4
- package/build/features/bank/screens/BankDetails/validation.js +2 -2
- package/build/features/bank/screens/Success/Success.js +2 -4
- package/build/features/business/screens/BusinessType/LicenseList.js +1 -1
- package/build/features/business/screens/BusinessType/LicenseNumber.js +1 -1
- package/build/features/business/screens/BusinessType/validation.d.ts +3 -3
- package/build/features/business/screens/BusinessType/validation.js +14 -7
- package/build/features/business/screens/Customers/ExpectedSalesRange.js +0 -5
- package/build/features/business/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +33 -27
- package/build/features/individual/screens/Success/Success.js +2 -4
- package/build/features/password/screens/Success/Success.js +2 -4
- package/build/features/shared/Button/AbsherButton.js +22 -19
- package/build/features/shared/Button/FlowsButtons.d.ts +3 -3
- package/build/features/shared/Button/FlowsButtons.js +30 -18
- package/build/features/shared/Button/MobileButton.js +13 -11
- package/build/features/tax/screens/Success/Success.js +2 -4
- package/package.json +1 -1
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
2
3
|
import Input from '../../../shared/Input';
|
|
3
4
|
import { useTranslation } from 'react-i18next';
|
|
4
5
|
import { useController, useFormContext } from 'react-hook-form';
|
|
5
6
|
import { styled } from '@mui/material';
|
|
6
7
|
import { removeOnlyNumbers } from '../../../../utils';
|
|
7
8
|
import { ScreenContainer } from '../../../shared/Containers';
|
|
9
|
+
import { bankSelector } from '../../../app/bank/bankStore';
|
|
10
|
+
import { useAppSelector, useLanguage } from '../../../../hooks';
|
|
8
11
|
import ClearIcon from '../../../shared/ClearIcon';
|
|
9
12
|
import CheckIcon from '../../../shared/CheckIcon';
|
|
10
13
|
var FeatureStyled = styled(ScreenContainer)(function (_a) {
|
|
@@ -22,13 +25,19 @@ var InputStyled = styled(Input)(function (_a) {
|
|
|
22
25
|
});
|
|
23
26
|
});
|
|
24
27
|
var Beneficiary = function () {
|
|
25
|
-
var _a, _b;
|
|
28
|
+
var _a, _b, _c, _d;
|
|
26
29
|
var t = useTranslation().t;
|
|
27
|
-
var
|
|
30
|
+
var _e = useFormContext(), setValue = _e.setValue, control = _e.control;
|
|
31
|
+
var isAr = useLanguage().isAr;
|
|
32
|
+
var data = useAppSelector(bankSelector).data;
|
|
28
33
|
var beneficiaryControl = useController({ name: 'beneficiaryName', control: control });
|
|
29
34
|
var beneficiaryValue = beneficiaryControl.field.value;
|
|
30
35
|
var hasError = (_a = beneficiaryControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
31
36
|
var error = (_b = beneficiaryControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
37
|
+
var legalName = (_d = (_c = data.verify.responseBody) === null || _c === void 0 ? void 0 : _c.entity) === null || _d === void 0 ? void 0 : _d.legal_name;
|
|
38
|
+
React.useEffect(function () {
|
|
39
|
+
setValue('beneficiaryName', isAr ? legalName === null || legalName === void 0 ? void 0 : legalName.ar : legalName === null || legalName === void 0 ? void 0 : legalName.en);
|
|
40
|
+
}, []);
|
|
32
41
|
var handleBeneficiaryChange = function (_a) {
|
|
33
42
|
var target = _a.target;
|
|
34
43
|
var value = removeOnlyNumbers(target.value);
|
|
@@ -37,6 +46,6 @@ var Beneficiary = function () {
|
|
|
37
46
|
var clearValue = function () {
|
|
38
47
|
beneficiaryControl.field.onChange('');
|
|
39
48
|
};
|
|
40
|
-
return (_jsx(FeatureStyled, { children: _jsx(InputStyled, { label: t('beneficiary_name'), onChange: handleBeneficiaryChange, value: beneficiaryValue, placeholder: t('beneficiary_name'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: !hasError && beneficiaryValue ? _jsx(CheckIcon, {}) : beneficiaryValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
|
|
49
|
+
return (_jsx(FeatureStyled, { children: _jsx(InputStyled, { label: t('beneficiary_name'), onChange: handleBeneficiaryChange, disabled: !!legalName, value: beneficiaryValue, placeholder: t('beneficiary_name'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: !hasError && beneficiaryValue ? _jsx(CheckIcon, {}) : beneficiaryValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
|
|
41
50
|
};
|
|
42
51
|
export default Beneficiary;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export interface IBANProps {
|
|
3
|
+
fetchingIban: (flag: boolean) => void;
|
|
4
|
+
ibanChecking: boolean;
|
|
3
5
|
}
|
|
4
|
-
declare const IBAN: () => JSX.Element;
|
|
6
|
+
declare const IBAN: ({ fetchingIban, ibanChecking }: IBANProps) => JSX.Element;
|
|
5
7
|
export default IBAN;
|
|
@@ -1,4 +1,41 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
11
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
12
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
13
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
|
+
function step(op) {
|
|
15
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
+
while (_) try {
|
|
17
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
|
+
switch (op[0]) {
|
|
20
|
+
case 0: case 1: t = op; break;
|
|
21
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
22
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
23
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
24
|
+
default:
|
|
25
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
26
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
27
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
28
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
29
|
+
if (t[2]) _.ops.pop();
|
|
30
|
+
_.trys.pop(); continue;
|
|
31
|
+
}
|
|
32
|
+
op = body.call(thisArg, _);
|
|
33
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
34
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
|
+
}
|
|
36
|
+
};
|
|
1
37
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
38
|
+
import * as React from 'react';
|
|
2
39
|
import Input from '../../../shared/Input';
|
|
3
40
|
import { useTranslation } from 'react-i18next';
|
|
4
41
|
import { useController, useFormContext } from 'react-hook-form';
|
|
@@ -6,22 +43,48 @@ import { removeAllOtherThanCharsAndNumber } from '../../../../utils';
|
|
|
6
43
|
import { styled } from '@mui/material';
|
|
7
44
|
import { MAX_IBAN_VALUE } from '../../../../constants';
|
|
8
45
|
import { ScreenContainer } from '../../../shared/Containers';
|
|
46
|
+
import { debounce } from 'lodash-es';
|
|
47
|
+
import { checkIbanBank } from '../../../app/bank/bankStore';
|
|
48
|
+
import { useAppDispatch } from '../../../../hooks';
|
|
49
|
+
import axios from 'axios';
|
|
9
50
|
import ClearIcon from '../../../shared/ClearIcon';
|
|
10
51
|
import CheckIcon from '../../../shared/CheckIcon';
|
|
52
|
+
import CircularProgress from '@mui/material/CircularProgress';
|
|
11
53
|
var FeatureStyled = styled(ScreenContainer)(function (_a) {
|
|
12
54
|
var theme = _a.theme;
|
|
13
55
|
return ({
|
|
14
56
|
marginBlockEnd: theme.spacing(3)
|
|
15
57
|
});
|
|
16
58
|
});
|
|
17
|
-
var
|
|
18
|
-
|
|
59
|
+
var cancelToken = null;
|
|
60
|
+
var IBAN = function (_a) {
|
|
61
|
+
var _b;
|
|
62
|
+
var fetchingIban = _a.fetchingIban, ibanChecking = _a.ibanChecking;
|
|
63
|
+
var dispatch = useAppDispatch();
|
|
19
64
|
var t = useTranslation().t;
|
|
20
65
|
var control = useFormContext().control;
|
|
21
66
|
var ibanControl = useController({ name: 'iban', control: control });
|
|
22
67
|
var ibanValue = ibanControl.field.value;
|
|
23
|
-
var hasError = !!((_a = ibanControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message);
|
|
24
68
|
var error = (_b = ibanControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
69
|
+
var checkBank = debounce(function (value) { return __awaiter(void 0, void 0, void 0, function () {
|
|
70
|
+
var onSuccess;
|
|
71
|
+
return __generator(this, function (_a) {
|
|
72
|
+
if (cancelToken) {
|
|
73
|
+
cancelToken.cancel('Aborted');
|
|
74
|
+
}
|
|
75
|
+
cancelToken = axios.CancelToken.source();
|
|
76
|
+
onSuccess = function () { return fetchingIban(false); };
|
|
77
|
+
dispatch(checkIbanBank({ iban: value, cancelToken: cancelToken.token, onSuccess: onSuccess }));
|
|
78
|
+
return [2];
|
|
79
|
+
});
|
|
80
|
+
}); }, 500);
|
|
81
|
+
React.useEffect(function () {
|
|
82
|
+
var isValid = ibanValue && !error && ibanValue.length > 14;
|
|
83
|
+
if (isValid) {
|
|
84
|
+
fetchingIban(true);
|
|
85
|
+
checkBank(ibanValue);
|
|
86
|
+
}
|
|
87
|
+
}, [ibanValue, error]);
|
|
25
88
|
var handleIbanChange = function (_a) {
|
|
26
89
|
var target = _a.target;
|
|
27
90
|
var value = removeAllOtherThanCharsAndNumber(target.value);
|
|
@@ -30,6 +93,6 @@ var IBAN = function () {
|
|
|
30
93
|
var clearValue = function () {
|
|
31
94
|
ibanControl.field.onChange('');
|
|
32
95
|
};
|
|
33
|
-
return (_jsx(FeatureStyled, { children: _jsx(Input, { label: t('enter_iban'), inputProps: { maxLength: MAX_IBAN_VALUE }, onChange: handleIbanChange, value: ibanValue, placeholder: t('enter_iban_placeholder'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: !
|
|
96
|
+
return (_jsx(FeatureStyled, { children: _jsx(Input, { label: t('enter_iban'), inputProps: { maxLength: MAX_IBAN_VALUE }, onChange: handleIbanChange, value: ibanValue, placeholder: t('enter_iban_placeholder'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: ibanChecking ? (_jsx(CircularProgress, { size: 25, thickness: 5, sx: { height: 'auto !important' } })) : !error && ibanValue ? (_jsx(CheckIcon, {})) : (ibanValue && _jsx(ClearIcon, { onClick: clearValue })) }) }));
|
|
34
97
|
};
|
|
35
98
|
export default IBAN;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { REGEX_BENEFICIARY_NAME } from '../../../../constants';
|
|
2
2
|
import * as yup from 'yup';
|
|
3
3
|
export var BankValidation = yup.object().shape({
|
|
4
4
|
iban: yup
|
|
@@ -10,6 +10,6 @@ export var BankValidation = yup.object().shape({
|
|
|
10
10
|
bankName: yup.string().required('bank_name_required'),
|
|
11
11
|
beneficiaryName: yup
|
|
12
12
|
.string()
|
|
13
|
-
.matches(
|
|
13
|
+
.matches(REGEX_BENEFICIARY_NAME, 'beneficiary_name_invalid')
|
|
14
14
|
.required('beneficiary_name_required')
|
|
15
15
|
});
|
|
@@ -10,9 +10,7 @@ var Success = function (_a) {
|
|
|
10
10
|
React.useEffect(function () {
|
|
11
11
|
dispatch(updateLeadSuccess());
|
|
12
12
|
}, []);
|
|
13
|
-
var onSuccess = function () {
|
|
14
|
-
|
|
15
|
-
};
|
|
16
|
-
return _jsx(SuccessScreen, { title: t('ide_successfully_updated_message'), onSuccess: onSuccess });
|
|
13
|
+
var onSuccess = function () { };
|
|
14
|
+
return _jsx(SuccessScreen, { title: t('ide_successfully_updated_message'), onSuccess: onSuccess, successTitle: 'continue' });
|
|
17
15
|
};
|
|
18
16
|
export default React.memo(Success);
|
|
@@ -122,7 +122,7 @@ var LicenseList = function (_a) {
|
|
|
122
122
|
var licenseReadonly = !isOtherLicense(selected);
|
|
123
123
|
var isCR = (selected === null || selected === void 0 ? void 0 : selected.type) === BusinessType.CR;
|
|
124
124
|
var flValue = isOtherLicense(selected) ? t(getLicenseName(selected)) : getLicenseNumber(selected);
|
|
125
|
-
return (_jsxs(ScreenContainer, { children: [_jsx(InputStyled, { label: t('choose_any_license'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_license_cr'), value: isCR ? getLicenseName(selected) : flValue }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'legal_name?.en', list: licenseList || [], onSelectItem: onSelectItem, renderItem: function (item) {
|
|
125
|
+
return (_jsxs(ScreenContainer, { children: [_jsx(InputStyled, { label: t('choose_any_license'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_license_cr'), value: isCR ? t(getLicenseName(selected)) : flValue }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'legal_name?.en', list: licenseList || [], onSelectItem: onSelectItem, renderItem: function (item) {
|
|
126
126
|
return (_jsxs(_Fragment, { children: [_jsx(LicenseContainer, { children: _jsx(LicenseNameText, __assign({ isSelected: getLicenseNumber(item) === getLicenseNumber(selected) }, { children: isOtherLicense(item) ? t(getLicenseName(item)) : getLicenseFullName(item) })) }), getLicenseNumber(item) === getLicenseNumber(selected) && _jsx(CheckIcon, {})] }));
|
|
127
127
|
} }) })), _jsx(LicenseNumber, { show: showLicenseNumber, readOnly: licenseReadonly })] }));
|
|
128
128
|
};
|
|
@@ -41,6 +41,6 @@ var LicenseNumber = function (_a) {
|
|
|
41
41
|
var error = (_b = licenseNumberControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
|
|
42
42
|
var length = isCR ? CR_NUMBER_LENGTH : FL_NUMBER_LENGTH;
|
|
43
43
|
var label = isCR ? 'cr_number' : 'fl_number';
|
|
44
|
-
return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { readOnly: readOnly, label: t(label), onChange: handleFLNumberChange, inputProps: { maxLength: length }, value: licenseNumberValue, endAdornment: (licenseNumberValue === null || licenseNumberValue === void 0 ? void 0 : licenseNumberValue.length) === length ? (_jsx(CheckIcon, {})) : (licenseNumberValue && _jsx(ClearIcon, { onClick: clearLicenseNumber })), placeholder: isCR ? '
|
|
44
|
+
return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { readOnly: readOnly, label: t(label), onChange: handleFLNumberChange, inputProps: { maxLength: length }, value: licenseNumberValue, endAdornment: (licenseNumberValue === null || licenseNumberValue === void 0 ? void 0 : licenseNumberValue.length) === length ? (_jsx(CheckIcon, {})) : (licenseNumberValue && _jsx(ClearIcon, { onClick: clearLicenseNumber })), placeholder: isCR ? t('cr_number_hint') : t('fl_number_hint'), warningType: 'alert', warningMessage: error && t(error, { length: length }) }) }) })));
|
|
45
45
|
};
|
|
46
46
|
export default React.memo(LicenseNumber);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as yup from 'yup';
|
|
2
2
|
export declare const LicenseValidationSchema: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
3
3
|
selectedLicense: any;
|
|
4
|
-
licenseNumber: yup.
|
|
4
|
+
licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
5
5
|
}>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
6
6
|
selectedLicense: any;
|
|
7
|
-
licenseNumber: yup.
|
|
7
|
+
licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
8
8
|
}>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
|
|
9
9
|
selectedLicense: any;
|
|
10
|
-
licenseNumber: yup.
|
|
10
|
+
licenseNumber: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
|
|
11
11
|
}>>>;
|
|
@@ -13,13 +13,20 @@ var objectElements = {
|
|
|
13
13
|
};
|
|
14
14
|
export var LicenseValidationSchema = yup.object().shape({
|
|
15
15
|
selectedLicense: yup.object().shape(objectElements).required(''),
|
|
16
|
-
licenseNumber: yup
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
licenseNumber: yup
|
|
17
|
+
.string()
|
|
18
|
+
.test({
|
|
19
|
+
test: function (value) {
|
|
20
|
+
var selectedLicense = this.parent.selectedLicense;
|
|
21
|
+
var isCR = (selectedLicense === null || selectedLicense === void 0 ? void 0 : selectedLicense.type) === BusinessType.CR;
|
|
22
|
+
var length = (value === null || value === void 0 ? void 0 : value.length) || 0;
|
|
23
|
+
if (length === 0)
|
|
24
|
+
return true;
|
|
25
|
+
if (isCR) {
|
|
26
|
+
return length === CR_NUMBER_LENGTH ? true : this.createError({ message: 'cr_max_length' });
|
|
27
|
+
}
|
|
28
|
+
return length === FL_NUMBER_LENGTH ? true : this.createError({ message: 'fl_max_length' });
|
|
23
29
|
}
|
|
24
30
|
})
|
|
31
|
+
.required('')
|
|
25
32
|
});
|
|
@@ -67,11 +67,6 @@ var ExpectedSalesRange = function (_a) {
|
|
|
67
67
|
setExpectedSalesRangeList(response === null || response === void 0 ? void 0 : response.expectedSales);
|
|
68
68
|
}
|
|
69
69
|
}, [response === null || response === void 0 ? void 0 : response.expectedSales]);
|
|
70
|
-
var checkRemainingCondition = function (item) {
|
|
71
|
-
return !!expectedSalesRangeValue.find(function (expectedSale) {
|
|
72
|
-
return expectedSale.id === item.id;
|
|
73
|
-
});
|
|
74
|
-
};
|
|
75
70
|
var onSelectItem = function (expectedSalesRange) {
|
|
76
71
|
onCloseList();
|
|
77
72
|
expectedSalesRangeControl.field.onChange(expectedSalesRange);
|
|
@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import { memo } from 'react';
|
|
13
|
+
import { memo, useEffect, useState } from 'react';
|
|
14
14
|
import { useTranslation } from 'react-i18next';
|
|
15
15
|
import { styled } from '@mui/material/styles';
|
|
16
16
|
import Box from '@mui/material/Box';
|
|
@@ -18,6 +18,8 @@ import Text from '../../../../components/Text';
|
|
|
18
18
|
import Container from '../../../shared/Containers/ScreenContainer';
|
|
19
19
|
import { FlowsButtons } from '../../../shared/Button';
|
|
20
20
|
import { ICONS_NAMES } from '../../../../constants';
|
|
21
|
+
import { useAppSelector, useLanguage } from '../../../../hooks';
|
|
22
|
+
import { businessSelector } from '../../../app/business/businessStore';
|
|
21
23
|
var TextContainerStyled = styled(Box)(function (_a) {
|
|
22
24
|
var theme = _a.theme;
|
|
23
25
|
return ({
|
|
@@ -49,31 +51,35 @@ var ButtonGroupStyled = styled(Box)(function (_a) {
|
|
|
49
51
|
});
|
|
50
52
|
var SuccessWithFlowButtons = function () {
|
|
51
53
|
var t = useTranslation().t;
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
54
|
+
var isAr = useLanguage().isAr;
|
|
55
|
+
var data = useAppSelector(businessSelector).data;
|
|
56
|
+
var _a = data.verify.responseBody || {}, flows = _a.flows, nameObj = _a.name;
|
|
57
|
+
var _b = useState([]), buttons = _b[0], setButtons = _b[1];
|
|
58
|
+
var username = ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.first) || '') + ' ' + ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.last) || '');
|
|
59
|
+
var reMapFlowData = function (flows) {
|
|
60
|
+
if (flows === void 0) { flows = []; }
|
|
61
|
+
var images = ICONS_NAMES;
|
|
62
|
+
var mappedFlows = flows.map(function (_a) {
|
|
63
|
+
var name = _a.name, url = _a.url, status = _a.status;
|
|
64
|
+
var type = status === 'initiated' ? 'pending' : 'completed';
|
|
65
|
+
var title = t("".concat(name, "_flow_").concat(type), { individual_name: username });
|
|
66
|
+
var src = "".concat(name, "_filled_icon");
|
|
67
|
+
var hoverSrc = "".concat(name, "_white_icon");
|
|
68
|
+
var isCompleted = status === 'completed' && name !== 'password';
|
|
69
|
+
return {
|
|
70
|
+
title: title,
|
|
71
|
+
href: url,
|
|
72
|
+
src: images[src],
|
|
73
|
+
hoverSrc: images[hoverSrc],
|
|
74
|
+
isCompleted: isCompleted
|
|
75
|
+
};
|
|
76
|
+
});
|
|
77
|
+
setButtons(mappedFlows);
|
|
78
|
+
};
|
|
79
|
+
useEffect(function () {
|
|
80
|
+
if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0)
|
|
81
|
+
reMapFlowData(flows);
|
|
82
|
+
}, [flows, isAr]);
|
|
83
|
+
return (_jsxs(ContainerStyled, { children: [_jsx(TextContainerStyled, { children: _jsxs(TitleStyled, { children: [t('ide_successfully_verified_message'), " "] }) }), _jsx(ButtonGroupStyled, { children: _jsx(FlowsButtons, { buttons: buttons }) })] }));
|
|
78
84
|
};
|
|
79
85
|
export default memo(SuccessWithFlowButtons);
|
|
@@ -10,9 +10,7 @@ var Success = function (_a) {
|
|
|
10
10
|
React.useEffect(function () {
|
|
11
11
|
dispatch(updateLeadSuccess());
|
|
12
12
|
}, []);
|
|
13
|
-
var onSuccess = function () {
|
|
14
|
-
|
|
15
|
-
};
|
|
16
|
-
return _jsx(SuccessScreen, { title: t('ide_successfully_updated_message'), onSuccess: onSuccess });
|
|
13
|
+
var onSuccess = function () { };
|
|
14
|
+
return _jsx(SuccessScreen, { title: t('ide_successfully_updated_message'), onSuccess: onSuccess, successTitle: 'continue' });
|
|
17
15
|
};
|
|
18
16
|
export default React.memo(Success);
|
|
@@ -4,9 +4,7 @@ import { useTranslation } from 'react-i18next';
|
|
|
4
4
|
import SuccessScreen from '../../../shared/SuccessScreen';
|
|
5
5
|
var Success = function (_a) {
|
|
6
6
|
var t = useTranslation().t;
|
|
7
|
-
var onSuccess = function () {
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
return _jsx(SuccessScreen, { title: t('ide_successfully_updated_message'), onSuccess: onSuccess });
|
|
7
|
+
var onSuccess = function () { };
|
|
8
|
+
return _jsx(SuccessScreen, { title: t('ide_successfully_updated_message'), onSuccess: onSuccess, successTitle: 'continue' });
|
|
11
9
|
};
|
|
12
10
|
export default React.memo(Success);
|
|
@@ -21,18 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import React from 'react';
|
|
24
25
|
import Button from '../../../components/Button';
|
|
25
26
|
import Icon from '../../../components/Icon';
|
|
26
27
|
import { alpha, styled } from '@mui/material/styles';
|
|
27
28
|
import Box from '@mui/material/Box';
|
|
28
29
|
import { ICONS_NAMES } from '../../../constants';
|
|
29
|
-
var IconStyled = styled(Icon)(function (_a) {
|
|
30
|
-
var theme = _a.theme;
|
|
31
|
-
return ({
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
marginInlineStart: theme.spacing(0.75)
|
|
35
|
-
});
|
|
30
|
+
var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
|
|
31
|
+
var theme = _a.theme, disabled = _a.disabled;
|
|
32
|
+
return (__assign({ width: theme.spacing(3), height: theme.spacing(3), marginInlineStart: theme.spacing(0.75) }, (disabled && {
|
|
33
|
+
opacity: 0.3
|
|
34
|
+
})));
|
|
36
35
|
});
|
|
37
36
|
var ButtonBoxStyled = styled(Box)(function (_a) {
|
|
38
37
|
var theme = _a.theme;
|
|
@@ -40,31 +39,35 @@ var ButtonBoxStyled = styled(Box)(function (_a) {
|
|
|
40
39
|
margin: theme.spacing(0, 2.5, 2.5, 2.5)
|
|
41
40
|
});
|
|
42
41
|
});
|
|
43
|
-
var ButtonStyled = styled(Button, {
|
|
44
|
-
|
|
42
|
+
var ButtonStyled = styled(Button, {
|
|
43
|
+
shouldForwardProp: function (prop) { return prop !== 'hideIcon' && prop !== 'touched'; }
|
|
44
|
+
})(function (_a) {
|
|
45
|
+
var theme = _a.theme, hideIcon = _a.hideIcon, touched = _a.touched;
|
|
45
46
|
return ({
|
|
46
47
|
paddingInlineStart: theme.spacing(0.75),
|
|
47
48
|
textTransform: 'none',
|
|
48
|
-
backgroundColor: theme.palette.common.white,
|
|
49
|
+
backgroundColor: touched ? theme.palette.primary.light : theme.palette.common.white,
|
|
49
50
|
border: "1px solid ".concat(hideIcon ? theme.palette.primary.main : theme.palette.primary.light),
|
|
50
|
-
color: hideIcon ? theme.palette.primary.main : theme.palette.primary.light,
|
|
51
|
+
color: hideIcon ? theme.palette.primary.main : touched ? theme.palette.common.white : theme.palette.primary.light,
|
|
51
52
|
'&:hover': {
|
|
52
|
-
backgroundColor:
|
|
53
|
-
color: theme.palette.common.white,
|
|
53
|
+
backgroundColor: touched ? theme.palette.primary.light : theme.palette.common.white,
|
|
54
|
+
color: hideIcon ? theme.palette.primary.main : touched ? theme.palette.common.white : theme.palette.primary.light,
|
|
54
55
|
img: {
|
|
55
|
-
filter: 'brightness(0) invert(1)'
|
|
56
|
+
filter: touched ? 'brightness(0) invert(1)' : ''
|
|
56
57
|
}
|
|
57
58
|
},
|
|
58
|
-
'&:active': {
|
|
59
|
-
backgroundColor: theme.palette.common.white
|
|
60
|
-
},
|
|
61
59
|
'&:disabled': {
|
|
62
60
|
backgroundColor: theme.palette.common.white,
|
|
63
|
-
color: hideIcon ?
|
|
61
|
+
color: alpha(hideIcon ? theme.palette.primary.main : theme.palette.primary.light, 0.3),
|
|
62
|
+
border: "1px solid ".concat(alpha(hideIcon ? theme.palette.primary.main : theme.palette.primary.light, 0.3))
|
|
64
63
|
}
|
|
65
64
|
});
|
|
66
65
|
});
|
|
67
66
|
export default function AbsherButton(_a) {
|
|
68
67
|
var children = _a.children, isAr = _a.isAr, hideIcon = _a.hideIcon, disabled = _a.disabled, props = __rest(_a, ["children", "isAr", "hideIcon", "disabled"]);
|
|
69
|
-
|
|
68
|
+
var _b = React.useState(false), touched = _b[0], setTouched = _b[1];
|
|
69
|
+
var handleTouch = function () {
|
|
70
|
+
setTouched(true);
|
|
71
|
+
};
|
|
72
|
+
return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ onTouchStart: handleTouch, touched: touched, hideIcon: hideIcon, disabled: disabled, type: 'button', startIcon: !hideIcon && _jsx(IconStyled, { disabled: disabled, src: ICONS_NAMES.ABSHER_LOGO }) }, props, { children: children })) }));
|
|
70
73
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ButtonProps } from '../../../components/Button';
|
|
3
|
-
declare type
|
|
3
|
+
export declare type ButtonItemProps = {
|
|
4
4
|
title: string;
|
|
5
5
|
href: string;
|
|
6
6
|
src: string;
|
|
7
7
|
hoverSrc: string;
|
|
8
|
+
isCompleted: boolean;
|
|
8
9
|
};
|
|
9
10
|
export interface EmailProvidersButtonsProps extends ButtonProps {
|
|
10
|
-
buttons:
|
|
11
|
+
buttons: ButtonItemProps[];
|
|
11
12
|
}
|
|
12
13
|
export default function FlowsButtons({ buttons }: EmailProvidersButtonsProps): JSX.Element;
|
|
13
|
-
export {};
|
|
@@ -10,14 +10,16 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { createElement as _createElement } from "react";
|
|
13
14
|
import React from 'react';
|
|
14
15
|
import Button from '../../../components/Button';
|
|
15
16
|
import { alpha, styled } from '@mui/material/styles';
|
|
16
17
|
import Box from '@mui/material/Box';
|
|
17
18
|
import Link from '@mui/material/Link';
|
|
18
19
|
import { ICONS_NAMES } from '../../../constants';
|
|
20
|
+
import CheckIcon from '@mui/icons-material/Check';
|
|
19
21
|
var Image = styled('img', { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
|
|
20
|
-
var theme = _a.theme
|
|
22
|
+
var theme = _a.theme;
|
|
21
23
|
return ({
|
|
22
24
|
width: theme.spacing(3),
|
|
23
25
|
height: theme.spacing(3),
|
|
@@ -32,31 +34,41 @@ var ButtonBoxStyled = styled(Box)(function (_a) {
|
|
|
32
34
|
margin: theme.spacing(0, 2.5, 2.5, 2.5)
|
|
33
35
|
});
|
|
34
36
|
});
|
|
35
|
-
var ButtonStyled = styled(Button)(function (_a) {
|
|
36
|
-
var theme = _a.theme;
|
|
37
|
-
return ({
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
},
|
|
48
|
-
'&:disabled': {
|
|
37
|
+
var ButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return prop !== 'isCompleted'; } })(function (_a) {
|
|
38
|
+
var theme = _a.theme, isCompleted = _a.isCompleted;
|
|
39
|
+
return (__assign(__assign({ width: '100%', textTransform: 'none', paddingInlineStart: theme.spacing(0.75), backgroundColor: theme.palette.common.white, border: "1px solid ".concat(theme.palette.primary.main), color: theme.palette.primary.main }, (isCompleted && {
|
|
40
|
+
paddingInlineEnd: '13px',
|
|
41
|
+
color: theme.palette.success.main,
|
|
42
|
+
border: "1px solid ".concat(theme.palette.success.main)
|
|
43
|
+
})), { '&:hover': __assign({ backgroundColor: theme.palette.primary.main, color: theme.palette.common.white }, (isCompleted && {
|
|
44
|
+
backgroundColor: theme.palette.common.white,
|
|
45
|
+
border: "1px solid ".concat(theme.palette.success.main),
|
|
46
|
+
color: theme.palette.success.main,
|
|
47
|
+
cursor: 'initial'
|
|
48
|
+
})), '&:disabled': {
|
|
49
49
|
backgroundColor: theme.palette.common.white,
|
|
50
50
|
color: alpha(theme.palette.primary.main, 0.3)
|
|
51
|
-
}
|
|
51
|
+
} }));
|
|
52
|
+
});
|
|
53
|
+
var CheckIconStyled = styled(CheckIcon)(function (_a) {
|
|
54
|
+
var theme = _a.theme;
|
|
55
|
+
return ({
|
|
56
|
+
width: theme.spacing(2.5),
|
|
57
|
+
height: theme.spacing(2.5),
|
|
58
|
+
color: theme.palette.success.main
|
|
52
59
|
});
|
|
53
60
|
});
|
|
54
61
|
export default function FlowsButtons(_a) {
|
|
55
62
|
var buttons = _a.buttons;
|
|
56
63
|
var _b = React.useState(), index = _b[0], setIndex = _b[1];
|
|
57
64
|
return (_jsx(ButtonBoxStyled, { children: buttons.map(function (_a, idx) {
|
|
58
|
-
var title = _a.title, href = _a.href, src = _a.src, hoverSrc = _a.hoverSrc;
|
|
65
|
+
var title = _a.title, href = _a.href, src = _a.src, hoverSrc = _a.hoverSrc, isCompleted = _a.isCompleted;
|
|
59
66
|
var isLast = idx === buttons.length - 1;
|
|
60
|
-
|
|
67
|
+
var linkProps = {
|
|
68
|
+
href: href,
|
|
69
|
+
target: '_blank'
|
|
70
|
+
};
|
|
71
|
+
return (_createElement(Link, __assign({}, (!isCompleted && linkProps), { underline: 'none', key: idx, onMouseEnter: function () { return !isCompleted && setIndex(idx); }, onMouseLeave: function () { return setIndex(undefined); } }),
|
|
72
|
+
_jsx(ButtonStyled, __assign({ isCompleted: isCompleted, sx: { mb: isLast ? 0 : 1.8 }, endIcon: isCompleted ? (_jsx(CheckIconStyled, {})) : (_jsx(Image, { sx: { height: 15 }, src: index === idx ? ICONS_NAMES.Arrow_white_right_icon : ICONS_NAMES.Arrow_filled_right_icon })), startIcon: _jsx(Image, { src: index === idx ? hoverSrc : src, alt: title }), type: 'button' }, { children: title }))));
|
|
61
73
|
}) }));
|
|
62
74
|
}
|
|
@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import React from 'react';
|
|
24
25
|
import Button from '../../../components/Button';
|
|
25
26
|
import Icon from '../../../components/Icon';
|
|
26
27
|
import { alpha, styled } from '@mui/material/styles';
|
|
@@ -38,24 +39,21 @@ var ButtonBoxStyled = styled(Box)(function (_a) {
|
|
|
38
39
|
margin: theme.spacing(0, 2.5, 2.5, 2.5)
|
|
39
40
|
});
|
|
40
41
|
});
|
|
41
|
-
var ButtonStyled = styled(Button)(function (_a) {
|
|
42
|
-
var theme = _a.theme;
|
|
42
|
+
var ButtonStyled = styled(Button, { shouldForwardProp: function (prop) { return prop !== 'touched'; } })(function (_a) {
|
|
43
|
+
var theme = _a.theme, touched = _a.touched;
|
|
43
44
|
return ({
|
|
44
45
|
paddingInlineStart: theme.spacing(0.75),
|
|
45
46
|
textTransform: 'none',
|
|
46
|
-
backgroundColor: theme.palette.common.white,
|
|
47
|
+
backgroundColor: touched ? theme.palette.primary.main : theme.palette.common.white,
|
|
47
48
|
border: "1px solid ".concat(theme.palette.primary.main),
|
|
48
|
-
color: theme.palette.primary.main,
|
|
49
|
+
color: touched ? theme.palette.common.white : theme.palette.primary.main,
|
|
49
50
|
'&:hover': {
|
|
50
|
-
backgroundColor: theme.palette.primary.main,
|
|
51
|
-
color: theme.palette.common.white,
|
|
51
|
+
backgroundColor: touched ? theme.palette.primary.main : theme.palette.common.white,
|
|
52
|
+
color: touched ? theme.palette.common.white : theme.palette.primary.main,
|
|
52
53
|
img: {
|
|
53
|
-
filter: 'brightness(0) invert(1)'
|
|
54
|
+
filter: touched ? 'brightness(0) invert(1)' : ''
|
|
54
55
|
}
|
|
55
56
|
},
|
|
56
|
-
'&:active': {
|
|
57
|
-
backgroundColor: theme.palette.common.white
|
|
58
|
-
},
|
|
59
57
|
'&:disabled': {
|
|
60
58
|
backgroundColor: theme.palette.common.white,
|
|
61
59
|
color: alpha(theme.palette.primary.main, 0.3)
|
|
@@ -64,5 +62,9 @@ var ButtonStyled = styled(Button)(function (_a) {
|
|
|
64
62
|
});
|
|
65
63
|
export default function MobileButton(_a) {
|
|
66
64
|
var children = _a.children, isAr = _a.isAr, hideIcon = _a.hideIcon, disabled = _a.disabled, props = __rest(_a, ["children", "isAr", "hideIcon", "disabled"]);
|
|
67
|
-
|
|
65
|
+
var _b = React.useState(false), touched = _b[0], setTouched = _b[1];
|
|
66
|
+
var handleTouch = function () {
|
|
67
|
+
setTouched(true);
|
|
68
|
+
};
|
|
69
|
+
return (_jsx(ButtonBoxStyled, { children: _jsx(ButtonStyled, __assign({ onTouchStart: handleTouch, touched: touched, disabled: disabled, type: 'button', startIcon: !hideIcon && _jsx(IconStyled, { disabled: disabled, src: ICONS_NAMES.MOBILE_ICON }) }, props, { children: children })) }));
|
|
68
70
|
}
|
|
@@ -10,9 +10,7 @@ var Success = function (_a) {
|
|
|
10
10
|
React.useEffect(function () {
|
|
11
11
|
dispatch(updateLeadSuccess());
|
|
12
12
|
}, []);
|
|
13
|
-
var onSuccess = function () {
|
|
14
|
-
|
|
15
|
-
};
|
|
16
|
-
return _jsx(SuccessScreen, { title: t('ide_successfully_updated_message'), onSuccess: onSuccess });
|
|
13
|
+
var onSuccess = function () { };
|
|
14
|
+
return _jsx(SuccessScreen, { title: t('ide_successfully_updated_message'), onSuccess: onSuccess, successTitle: 'continue' });
|
|
17
15
|
};
|
|
18
16
|
export default React.memo(Success);
|