@tap-payments/auth-jsconnect 2.0.4 → 2.0.7

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 (78) hide show
  1. package/build/@types/form.d.ts +2 -0
  2. package/build/api/entity.d.ts +8 -0
  3. package/build/api/entity.js +10 -1
  4. package/build/api/index.d.ts +1 -0
  5. package/build/api/lead.d.ts +1 -0
  6. package/build/assets/locales/ar.json +4 -1
  7. package/build/assets/locales/en.json +4 -1
  8. package/build/components/FileInput/DragAndDrop.d.ts +7 -0
  9. package/build/components/FileInput/DragAndDrop.js +39 -0
  10. package/build/components/FileInput/UploadInput.d.ts +7 -0
  11. package/build/components/FileInput/UploadInput.js +38 -0
  12. package/build/components/FileInput/index.d.ts +3 -0
  13. package/build/components/FileInput/index.js +3 -0
  14. package/build/constants/api.d.ts +1 -0
  15. package/build/constants/api.js +3 -1
  16. package/build/constants/app.js +35 -5
  17. package/build/constants/assets.d.ts +1 -0
  18. package/build/constants/assets.js +1 -0
  19. package/build/constants/validation.d.ts +2 -0
  20. package/build/constants/validation.js +2 -0
  21. package/build/features/app/bank/bankStore.d.ts +1 -0
  22. package/build/features/app/bank/bankStore.js +44 -10
  23. package/build/features/app/business/businessStore.js +13 -6
  24. package/build/features/app/connect/connectStore.js +18 -16
  25. package/build/features/app/individual/individualStore.js +12 -11
  26. package/build/features/app/password/passwordStore.d.ts +4 -1
  27. package/build/features/app/password/passwordStore.js +22 -19
  28. package/build/features/app/tax/taxStore.js +2 -2
  29. package/build/features/bank/screens/BankDetails/BankDetails.js +2 -1
  30. package/build/features/bank/screens/BankDetails/BankStatement.d.ts +3 -0
  31. package/build/features/bank/screens/BankDetails/BankStatement.js +38 -0
  32. package/build/features/bank/screens/BankDetails/validation.d.ts +3 -0
  33. package/build/features/bank/screens/BankDetails/validation.js +1 -0
  34. package/build/features/bank/screens/ResetPasswordSuccess/ResetPasswordSuccess.d.ts +5 -0
  35. package/build/features/bank/screens/ResetPasswordSuccess/ResetPasswordSuccess.js +9 -0
  36. package/build/features/bank/screens/ResetPasswordSuccess/index.d.ts +3 -0
  37. package/build/features/bank/screens/ResetPasswordSuccess/index.js +2 -0
  38. package/build/features/bank/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +9 -13
  39. package/build/features/business/screens/Activities/Activities.js +2 -1
  40. package/build/features/business/screens/Activities/LicenseName.d.ts +5 -0
  41. package/build/features/business/screens/Activities/LicenseName.js +30 -0
  42. package/build/features/business/screens/ResetPasswordSuccess/ResetPasswordSuccess.d.ts +5 -0
  43. package/build/features/business/screens/ResetPasswordSuccess/ResetPasswordSuccess.js +9 -0
  44. package/build/features/business/screens/ResetPasswordSuccess/index.d.ts +3 -0
  45. package/build/features/business/screens/ResetPasswordSuccess/index.js +2 -0
  46. package/build/features/business/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +9 -13
  47. package/build/features/connect/screens/Merchant/BrandList.js +1 -5
  48. package/build/features/connect/screens/Merchant/Merchant.js +10 -8
  49. package/build/features/connect/screens/Merchant/validation.js +4 -2
  50. package/build/features/connect/screens/Mobile/Mobile.js +1 -1
  51. package/build/features/connect/screens/NID/NID.js +1 -1
  52. package/build/features/featuresScreens.js +15 -5
  53. package/build/features/individual/screens/ResetPasswordSuccess/ResetPasswordSuccess.d.ts +5 -0
  54. package/build/features/individual/screens/ResetPasswordSuccess/ResetPasswordSuccess.js +9 -0
  55. package/build/features/individual/screens/ResetPasswordSuccess/index.d.ts +3 -0
  56. package/build/features/individual/screens/ResetPasswordSuccess/index.js +2 -0
  57. package/build/features/individual/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +9 -13
  58. package/build/features/password/screens/OTP/OTP.js +1 -1
  59. package/build/features/password/screens/ResetPasswordSuccess/ResetPasswordSuccess.d.ts +5 -0
  60. package/build/features/password/screens/ResetPasswordSuccess/ResetPasswordSuccess.js +9 -0
  61. package/build/features/password/screens/ResetPasswordSuccess/index.d.ts +3 -0
  62. package/build/features/password/screens/ResetPasswordSuccess/index.js +2 -0
  63. package/build/features/password/screens/Success/Success.js +2 -2
  64. package/build/features/password/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +9 -13
  65. package/build/features/shared/Button/Button.js +1 -1
  66. package/build/features/shared/Button/FlowsButtons.js +3 -6
  67. package/build/features/shared/Button/SuccessButton.js +14 -0
  68. package/build/features/shared/UploadFile/UploadFile.d.ts +21 -0
  69. package/build/features/shared/UploadFile/UploadFile.js +77 -0
  70. package/build/features/shared/UploadFile/index.d.ts +2 -0
  71. package/build/features/shared/UploadFile/index.js +2 -0
  72. package/build/features/tax/screens/ResetPasswordSuccess/ResetPasswordSuccess.d.ts +5 -0
  73. package/build/features/tax/screens/ResetPasswordSuccess/ResetPasswordSuccess.js +9 -0
  74. package/build/features/tax/screens/ResetPasswordSuccess/index.d.ts +3 -0
  75. package/build/features/tax/screens/ResetPasswordSuccess/index.js +2 -0
  76. package/build/features/tax/screens/SuccessWithFlowButtons/SuccessWithFlowButtons.js +9 -13
  77. package/build/utils/string.js +2 -1
  78. package/package.json +2 -1
@@ -277,23 +277,26 @@ export var resetPassword = createAsyncThunk('resetPassword', function (params, t
277
277
  }
278
278
  });
279
279
  }); });
280
- export var retrieveLead = createAsyncThunk('retrieveLeadPassword', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
281
- var _a, password, settings, id, data;
282
- var _b, _c, _d, _e;
283
- return __generator(this, function (_f) {
284
- switch (_f.label) {
280
+ export var retrieveLeadPassword = createAsyncThunk('retrieveLeadPassword', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
281
+ var _a, password, settings, id, data, entityData;
282
+ var _b, _c, _d, _e, _f;
283
+ return __generator(this, function (_g) {
284
+ switch (_g.label) {
285
285
  case 0:
286
286
  _a = thunkApi.getState(), password = _a.password, settings = _a.settings;
287
287
  id = (password.data.verify.responseBody || { id: '' }).id;
288
288
  return [4, API.leadService.retrieveLead(id)];
289
289
  case 1:
290
- data = (_f.sent()).data;
291
- if (!(data === null || data === void 0 ? void 0 : data.errors)) {
290
+ data = (_g.sent()).data;
291
+ return [4, API.entityService.retrieveEntityInfo((_b = data === null || data === void 0 ? void 0 : data.entity) === null || _b === void 0 ? void 0 : _b.id)];
292
+ case 2:
293
+ entityData = (_g.sent()).data;
294
+ if (!(data === null || data === void 0 ? void 0 : data.errors) || !(entityData === null || entityData === void 0 ? void 0 : entityData.errors)) {
292
295
  thunkApi.dispatch(handleNextScreenStep());
293
- (_c = (_b = settings.data.appConfig).onStepCompleted) === null || _c === void 0 ? void 0 : _c.call(_b, settings.data.activeScreen.name, { id: id });
294
- (_e = (_d = settings.data.appConfig).onFlowCompleted) === null || _e === void 0 ? void 0 : _e.call(_d, { data: data });
296
+ (_d = (_c = settings.data.appConfig).onStepCompleted) === null || _d === void 0 ? void 0 : _d.call(_c, settings.data.activeScreen.name, { id: id });
297
+ (_f = (_e = settings.data.appConfig).onFlowCompleted) === null || _f === void 0 ? void 0 : _f.call(_e, { data: data });
295
298
  }
296
- return [2, data];
299
+ return [2, { lead: data, entity: entityData }];
297
300
  }
298
301
  });
299
302
  }); });
@@ -444,8 +447,8 @@ export var passwordSlice = createSlice({
444
447
  state.error = description;
445
448
  return;
446
449
  }
447
- var flows = response.flows, steps = response.steps;
448
- state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { flows: flows, steps: steps });
450
+ var flows = response.flows, steps = response.steps, bank_account = response.bank_account;
451
+ state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { flows: flows, steps: steps, bank_account: bank_account });
449
452
  })
450
453
  .addCase(updateLeadSuccess.pending, function (state) {
451
454
  state.loading = true;
@@ -516,23 +519,23 @@ export var passwordSlice = createSlice({
516
519
  state.error = action.error.message;
517
520
  state.loading = false;
518
521
  })
519
- .addCase(retrieveLead.fulfilled, function (state, action) {
520
- var _a;
522
+ .addCase(retrieveLeadPassword.fulfilled, function (state, action) {
523
+ var _a, _b;
521
524
  state.loading = false;
522
525
  state.error = null;
523
- var data = action.payload;
524
- var description = (((_a = data === null || data === void 0 ? void 0 : data.errors) === null || _a === void 0 ? void 0 : _a[0]) || {}).description;
526
+ var _c = action.payload, lead = _c.lead, entity = _c.entity;
527
+ var description = (((_a = lead === null || lead === void 0 ? void 0 : lead.errors) === null || _a === void 0 ? void 0 : _a[0]) || ((_b = entity === null || entity === void 0 ? void 0 : entity.errors) === null || _b === void 0 ? void 0 : _b[0]) || {}).description;
525
528
  if (description) {
526
529
  state.error = description;
527
530
  return;
528
531
  }
529
- state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), data);
532
+ state.data.verify.responseBody = __assign(__assign(__assign({}, state.data.verify.responseBody), lead), entity);
530
533
  })
531
- .addCase(retrieveLead.pending, function (state) {
534
+ .addCase(retrieveLeadPassword.pending, function (state) {
532
535
  state.loading = true;
533
536
  state.error = null;
534
537
  })
535
- .addCase(retrieveLead.rejected, function (state, action) {
538
+ .addCase(retrieveLeadPassword.rejected, function (state, action) {
536
539
  state.loading = false;
537
540
  state.error = action.error.message;
538
541
  });
@@ -351,8 +351,8 @@ export var taxSlice = createSlice({
351
351
  state.error = description;
352
352
  return;
353
353
  }
354
- var flows = response.flows, steps = response.steps;
355
- state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { flows: flows, steps: steps });
354
+ var flows = response.flows, steps = response.steps, bank_account = response.bank_account;
355
+ state.data.verify.responseBody = __assign(__assign({}, state.data.verify.responseBody), { flows: flows, steps: steps, bank_account: bank_account });
356
356
  })
357
357
  .addCase(updateLeadSuccess.pending, function (state) {
358
358
  state.loading = true;
@@ -27,6 +27,7 @@ import { bankSelector, createBankAccount } from '../../../app/bank/bankStore';
27
27
  import Form from '../../../../components/Form';
28
28
  import { handleCurrentActiveScreen } from '../../../../app/settings';
29
29
  import ConfirmPolicy from './ConfirmPolicy';
30
+ import BankStatement from './BankStatement';
30
31
  var FormStyled = styled(Form)(function () { return ({
31
32
  display: 'flex',
32
33
  flexDirection: 'column',
@@ -56,6 +57,6 @@ var BankDetails = function () {
56
57
  dispatch(handleCurrentActiveScreen('BANK_SUCCESS_FOUR_FLOWS_BUTTONS_STEP'));
57
58
  };
58
59
  var disabled = ibanChecking || !methods.formState.isValid;
59
- return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Beneficiary, {}), _jsx(IBAN, { fetchingIban: function (value) { return setIbanChecking(value); }, ibanChecking: ibanChecking }), _jsx(BankName, {}), _jsx(ConfirmPolicy, {}), _jsx(ButtonStyled, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
60
+ return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Beneficiary, {}), _jsx(IBAN, { fetchingIban: function (value) { return setIbanChecking(value); }, ibanChecking: ibanChecking }), _jsx(BankName, {}), _jsx(BankStatement, {}), _jsx(ConfirmPolicy, {}), _jsx(ButtonStyled, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('confirm') }))] })) })) }));
60
61
  };
61
62
  export default BankDetails;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare const BankStatement: () => JSX.Element;
3
+ export default BankStatement;
@@ -0,0 +1,38 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import { styled } from '@mui/material/styles';
4
+ import { ScreenContainer } from '../../../../features/shared/Containers';
5
+ import { useTranslation } from 'react-i18next';
6
+ import { useController, useFormContext } from 'react-hook-form';
7
+ import UploadFile from '../../../../features/shared/UploadFile';
8
+ import { useAppDispatch, useAppSelector } from '../../../../hooks';
9
+ import { bankSelector, uploadBankStatement } from '../../../../features/app/bank/bankStore';
10
+ var FeatureStyled = styled(ScreenContainer)(function (_a) {
11
+ var theme = _a.theme;
12
+ return ({
13
+ marginBlockStart: theme.spacing(3)
14
+ });
15
+ });
16
+ var BankStatement = function () {
17
+ var _a, _b;
18
+ var dispatch = useAppDispatch();
19
+ var data = useAppSelector(bankSelector).data;
20
+ var t = useTranslation().t;
21
+ var control = useFormContext().control;
22
+ var bankStatementControl = useController({ name: 'bankStatementId', control: control });
23
+ var error = (_a = bankStatementControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
24
+ var uploading = data.bankData.uploading;
25
+ var handleBankStatementChange = function (file) {
26
+ dispatch(uploadBankStatement(file));
27
+ };
28
+ var handleReset = function () {
29
+ bankStatementControl.field.onChange('');
30
+ };
31
+ React.useEffect(function () {
32
+ var _a, _b;
33
+ if ((_a = data.bankData.responseBody) === null || _a === void 0 ? void 0 : _a.fileId)
34
+ bankStatementControl.field.onChange((_b = data.bankData.responseBody) === null || _b === void 0 ? void 0 : _b.fileId);
35
+ }, [(_b = data.bankData.responseBody) === null || _b === void 0 ? void 0 : _b.fileId]);
36
+ return (_jsx(FeatureStyled, { children: _jsx(UploadFile, { label: t('title_bank_statement'), dragTitle: t('drag_and_drop'), uploadTitle: t('title_upload_file'), onFileUploaded: handleBankStatementChange, loading: uploading, onReset: handleReset, error: error && t(error) }) }));
37
+ };
38
+ export default BankStatement;
@@ -3,15 +3,18 @@ export declare const BankValidation: yup.ObjectSchema<import("yup/lib/object").A
3
3
  iban: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
4
4
  bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
5
5
  beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
6
+ bankStatementId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
6
7
  confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
7
8
  }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
8
9
  iban: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
9
10
  bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
10
11
  beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
12
+ bankStatementId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
11
13
  confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
12
14
  }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
13
15
  iban: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
14
16
  bankName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
15
17
  beneficiaryName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
18
+ bankStatementId: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
16
19
  confirmPolicy: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, true>;
17
20
  }>>>;
@@ -12,5 +12,6 @@ export var BankValidation = yup.object().shape({
12
12
  .string()
13
13
  .matches(REGEX_BENEFICIARY_NAME, 'beneficiary_name_invalid')
14
14
  .required('beneficiary_name_required'),
15
+ bankStatementId: yup.string().optional(),
15
16
  confirmPolicy: yup.boolean().required('alert_bank_confirm').isTrue('alert_bank_confirm')
16
17
  });
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ export interface ResetPasswordSuccessProps {
3
+ }
4
+ declare const _default: React.MemoExoticComponent<({}: ResetPasswordSuccessProps) => JSX.Element>;
5
+ export default _default;
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from 'react';
3
+ import { useTranslation } from 'react-i18next';
4
+ import SuccessScreen from '../../../shared/SuccessScreen';
5
+ var ResetPasswordSuccess = function (_a) {
6
+ var t = useTranslation().t;
7
+ return (_jsx(SuccessScreen, { title: t("reset_password_success_title"), description: t("reset_password_success_description"), showEmailProviders: true }));
8
+ };
9
+ export default React.memo(ResetPasswordSuccess);
@@ -0,0 +1,3 @@
1
+ import ResetPasswordSuccess, { ResetPasswordSuccessProps } from './ResetPasswordSuccess';
2
+ export type { ResetPasswordSuccessProps };
3
+ export default ResetPasswordSuccess;
@@ -0,0 +1,2 @@
1
+ import ResetPasswordSuccess from './ResetPasswordSuccess';
2
+ export default ResetPasswordSuccess;
@@ -10,13 +10,13 @@ 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 React, { memo, useEffect, useState } 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 { FlowsButtons } from '../../../shared/Button';
17
17
  import { ICONS_NAMES, PASSWORD_OPERATION_TYPE } from '../../../../constants';
18
18
  import { useAppSelector, useLanguage } from '../../../../hooks';
19
- import { allAreTruthy, getResetFlowUrl, showLastFour } from '../../../../utils';
19
+ import { getResetFlowUrl, showLastFour } from '../../../../utils';
20
20
  import { bankSelector } from '../../../app/bank/bankStore';
21
21
  import Box from '@mui/material/Box';
22
22
  import Text from '../../../../components/Text';
@@ -47,19 +47,20 @@ var SuccessWithFlowButtons = function () {
47
47
  var _a, _b, _c;
48
48
  var t = useTranslation().t;
49
49
  var isAr = useLanguage().isAr;
50
- var _d = React.useState(false), isAcceptance = _d[0], setIsAcceptance = _d[1];
51
- var _e = React.useState(false), isPayout = _e[0], setIsPayout = _e[1];
52
50
  var data = useAppSelector(bankSelector).data;
53
- var _f = data.verify.responseBody || {}, flows = _f.flows, nameObj = _f.name, entity = _f.entity, brand = _f.brand, bank = _f.bank_account;
54
- var _g = useState([]), buttons = _g[0], setButtons = _g[1];
51
+ var _d = data.verify.responseBody || {}, flows = _d.flows, nameObj = _d.name, entity = _d.entity, brand = _d.brand, bank = _d.bank_account, merchant = _d.merchant, identification_id = _d.identification_id;
52
+ var _e = useState([]), buttons = _e[0], setButtons = _e[1];
55
53
  var username = ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.first) || '') + ' ' + ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.last) || '');
56
54
  var licenseNumber = ((_a = entity === null || entity === void 0 ? void 0 : entity.license) === null || _a === void 0 ? void 0 : _a.number) || '';
57
55
  var bankName = (bank === null || bank === void 0 ? void 0 : bank.name) || t('bank');
58
56
  var iban = showLastFour((bank === null || bank === void 0 ? void 0 : bank.iban) || '');
59
57
  var taxID = (entity === null || entity === void 0 ? void 0 : entity.tax_number) || '';
60
58
  var brandName = (isAr ? (_b = brand === null || brand === void 0 ? void 0 : brand.name) === null || _b === void 0 ? void 0 : _b.ar : (_c = brand === null || brand === void 0 ? void 0 : brand.name) === null || _c === void 0 ? void 0 : _c.en) || '';
59
+ var isAcceptance = merchant === null || merchant === void 0 ? void 0 : merchant.is_acceptance_allowed;
60
+ var isPayout = merchant === null || merchant === void 0 ? void 0 : merchant.is_payout_allowed;
61
+ var maskedId = !!identification_id ? " ".concat(t('masking_symbols')).concat(identification_id) : '';
61
62
  var settings = useAppSelector(settingsSelector);
62
- var _h = data.verify.responseBody || { contact: {}, id: '' }, contact = _h.contact, id = _h.id;
63
+ var _f = data.verify.responseBody || { contact: {}, id: '' }, contact = _f.contact, id = _f.id;
63
64
  var email = (contact || { email: '' }).email;
64
65
  var url = getResetFlowUrl('/password', settings.data.language, PASSWORD_OPERATION_TYPE.RESET_PASSWORD, id);
65
66
  var reMapFlowData = function (flows) {
@@ -71,15 +72,13 @@ var SuccessWithFlowButtons = function () {
71
72
  var name = _a.name, url = _a.url, status = _a.status;
72
73
  var type = status === 'initiated' ? 'pending' : 'completed';
73
74
  var title = t("".concat(name, "_flow_").concat(type), {
74
- individual_name: username.toLowerCase(),
75
+ individual_name: username.toLowerCase() + maskedId,
75
76
  business_type: brandName,
76
77
  license_number: t('masking_symbols') + showLastFour(licenseNumber),
77
78
  bank_name: bankName,
78
79
  iban: t('masking_symbols') + iban,
79
80
  tax_id: t('masking_symbols') + showLastFour(taxID)
80
81
  });
81
- if ("business_flow_completed" === "".concat(name, "_flow_").concat(type))
82
- setIsAcceptance(true);
83
82
  var isCompleted = status === 'completed' && name !== 'password';
84
83
  var isIndividual = name === 'individual';
85
84
  var src = isCompleted ? "".concat(name, "_green_icon") : "".concat(name, "_filled_icon");
@@ -96,9 +95,6 @@ var SuccessWithFlowButtons = function () {
96
95
  };
97
96
  });
98
97
  setButtons(mappedFlows);
99
- var isAllCompleted = allAreTruthy(flows, 'completed', 'status', 'password');
100
- if (isAllCompleted)
101
- setIsPayout(true);
102
98
  };
103
99
  useEffect(function () {
104
100
  if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0)
@@ -26,6 +26,7 @@ import Collapse from '../../../../components/Collapse';
26
26
  import OperationStartDate from './OperationStartDate';
27
27
  import { businessSelector, clearError, updateActivitiesInfo } from '../../../app/business/businessStore';
28
28
  import { ActivitiesValidationSchema } from './validation';
29
+ import LicenseName from './LicenseName';
29
30
  var FormStyled = styled(Form)(function () { return ({
30
31
  display: 'flex',
31
32
  flexDirection: 'column'
@@ -72,6 +73,6 @@ var Activities = function () {
72
73
  anchorEl ? setAnchorEl(false) : setAnchorEl(true);
73
74
  };
74
75
  var disabled = !methods.formState.isValid || !!error;
75
- return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(ActivitiesList, { onListOpen: function () { return handleMenuClick(); }, onListClose: function () { return handleMenuClick(); } }), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(SalesChannels, {}) }))] })), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(OperationStartDate, { onDateClicked: handleCollapseOpenClose }) })), _jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
76
+ return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(LicenseName, {}) })), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(ActivitiesList, { onListOpen: function () { return handleMenuClick(); }, onListClose: function () { return handleMenuClick(); } }), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(SalesChannels, {}) }))] })), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(OperationStartDate, { onDateClicked: handleCollapseOpenClose }) })), _jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
76
77
  };
77
78
  export default Activities;
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ interface LicenseNameProps {
3
+ }
4
+ declare const _default: React.MemoExoticComponent<({}: LicenseNameProps) => JSX.Element>;
5
+ export default _default;
@@ -0,0 +1,30 @@
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
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import * as React from 'react';
14
+ import { useTranslation } from 'react-i18next';
15
+ import { ScreenContainer } from '../../../shared/Containers';
16
+ import Input from '../../../shared/Input';
17
+ import Collapse from '../../../../components/Collapse';
18
+ import { useAppSelector, useLanguage } from '../../../../hooks';
19
+ import { businessSelector } from '../../../app/business/businessStore';
20
+ import CheckIcon from '../../../shared/CheckIcon';
21
+ var LicenseName = function (_a) {
22
+ var _b, _c, _d;
23
+ var t = useTranslation().t;
24
+ var isAr = useLanguage().isAr;
25
+ var data = useAppSelector(businessSelector).data;
26
+ var entity = (((_b = data.verify) === null || _b === void 0 ? void 0 : _b.responseBody) || {}).entity;
27
+ var name = isAr ? (_c = entity === null || entity === void 0 ? void 0 : entity.legal_name) === null || _c === void 0 ? void 0 : _c.ar : (_d = entity === null || entity === void 0 ? void 0 : entity.legal_name) === null || _d === void 0 ? void 0 : _d.en;
28
+ return (_jsx(Collapse, __assign({ in: !!name }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { label: t('license_name_label'), readOnly: true, value: name, sx: { '& .MuiInputBase-input': { cursor: 'auto' } }, endAdornment: _jsx(CheckIcon, {}) }) }) })));
29
+ };
30
+ export default React.memo(LicenseName);
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ export interface ResetPasswordSuccessProps {
3
+ }
4
+ declare const _default: React.MemoExoticComponent<({}: ResetPasswordSuccessProps) => JSX.Element>;
5
+ export default _default;
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from 'react';
3
+ import { useTranslation } from 'react-i18next';
4
+ import SuccessScreen from '../../../shared/SuccessScreen';
5
+ var ResetPasswordSuccess = function (_a) {
6
+ var t = useTranslation().t;
7
+ return (_jsx(SuccessScreen, { title: t("reset_password_success_title"), description: t("reset_password_success_description"), showEmailProviders: true }));
8
+ };
9
+ export default React.memo(ResetPasswordSuccess);
@@ -0,0 +1,3 @@
1
+ import ResetPasswordSuccess, { ResetPasswordSuccessProps } from './ResetPasswordSuccess';
2
+ export type { ResetPasswordSuccessProps };
3
+ export default ResetPasswordSuccess;
@@ -0,0 +1,2 @@
1
+ import ResetPasswordSuccess from './ResetPasswordSuccess';
2
+ export default ResetPasswordSuccess;
@@ -10,14 +10,14 @@ 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 React, { memo, useEffect, useState } 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 { FlowsButtons } from '../../../shared/Button';
17
17
  import { ICONS_NAMES, PASSWORD_OPERATION_TYPE } from '../../../../constants';
18
18
  import { useAppSelector, useLanguage } from '../../../../hooks';
19
19
  import { businessSelector } from '../../../app/business/businessStore';
20
- import { allAreTruthy, getResetFlowUrl, showLastFour } from '../../../../utils';
20
+ import { getResetFlowUrl, showLastFour } from '../../../../utils';
21
21
  import Box from '@mui/material/Box';
22
22
  import Text from '../../../../components/Text';
23
23
  import Container from '../../../shared/Containers/ScreenContainer';
@@ -47,19 +47,20 @@ var SuccessWithFlowButtons = function () {
47
47
  var _a, _b, _c;
48
48
  var t = useTranslation().t;
49
49
  var isAr = useLanguage().isAr;
50
- var _d = React.useState(false), isAcceptance = _d[0], setIsAcceptance = _d[1];
51
- var _e = React.useState(false), isPayout = _e[0], setIsPayout = _e[1];
52
50
  var data = useAppSelector(businessSelector).data;
53
- var _f = data.verify.responseBody || {}, flows = _f.flows, nameObj = _f.name, entity = _f.entity, brand = _f.brand, bank = _f.bank_account;
54
- var _g = useState([]), buttons = _g[0], setButtons = _g[1];
51
+ var _d = data.verify.responseBody || {}, flows = _d.flows, nameObj = _d.name, entity = _d.entity, brand = _d.brand, bank = _d.bank_account, merchant = _d.merchant, identification_id = _d.identification_id;
52
+ var _e = useState([]), buttons = _e[0], setButtons = _e[1];
55
53
  var username = ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.first) || '') + ' ' + ((nameObj === null || nameObj === void 0 ? void 0 : nameObj.last) || '');
56
54
  var licenseNumber = ((_a = entity === null || entity === void 0 ? void 0 : entity.license) === null || _a === void 0 ? void 0 : _a.number) || '';
57
55
  var bankName = (bank === null || bank === void 0 ? void 0 : bank.bank_name) || t('bank');
58
56
  var iban = showLastFour((bank === null || bank === void 0 ? void 0 : bank.iban) || '');
59
57
  var taxID = (entity === null || entity === void 0 ? void 0 : entity.tax_number) || '';
60
58
  var brandName = (isAr ? (_b = brand === null || brand === void 0 ? void 0 : brand.name) === null || _b === void 0 ? void 0 : _b.ar : (_c = brand === null || brand === void 0 ? void 0 : brand.name) === null || _c === void 0 ? void 0 : _c.en) || '';
59
+ var isAcceptance = merchant === null || merchant === void 0 ? void 0 : merchant.is_acceptance_allowed;
60
+ var isPayout = merchant === null || merchant === void 0 ? void 0 : merchant.is_payout_allowed;
61
+ var maskedId = !!identification_id ? " ".concat(t('masking_symbols')).concat(identification_id) : '';
61
62
  var settings = useAppSelector(settingsSelector);
62
- var _h = data.verify.responseBody || { contact: {}, id: '' }, contact = _h.contact, id = _h.id;
63
+ var _f = data.verify.responseBody || { contact: {}, id: '' }, contact = _f.contact, id = _f.id;
63
64
  var email = (contact || { email: '' }).email;
64
65
  var url = getResetFlowUrl('/password', settings.data.language, PASSWORD_OPERATION_TYPE.RESET_PASSWORD, id);
65
66
  var reMapFlowData = function (flows) {
@@ -71,15 +72,13 @@ var SuccessWithFlowButtons = function () {
71
72
  var name = _a.name, url = _a.url, status = _a.status;
72
73
  var type = status === 'initiated' ? 'pending' : 'completed';
73
74
  var title = t("".concat(name, "_flow_").concat(type), {
74
- individual_name: username.toLowerCase(),
75
+ individual_name: username.toLowerCase() + maskedId,
75
76
  business_type: brandName,
76
77
  license_number: t('masking_symbols') + showLastFour(licenseNumber),
77
78
  bank_name: bankName,
78
79
  iban: t('masking_symbols') + iban,
79
80
  tax_id: t('masking_symbols') + showLastFour(taxID)
80
81
  });
81
- if ("business_flow_completed" === "".concat(name, "_flow_").concat(type))
82
- setIsAcceptance(true);
83
82
  var isCompleted = status === 'completed' && name !== 'password';
84
83
  var isIndividual = name === 'individual';
85
84
  var src = isCompleted ? "".concat(name, "_green_icon") : "".concat(name, "_filled_icon");
@@ -96,9 +95,6 @@ var SuccessWithFlowButtons = function () {
96
95
  };
97
96
  });
98
97
  setButtons(mappedFlows);
99
- var isAllCompleted = allAreTruthy(flows, 'completed', 'status', 'password');
100
- if (isAllCompleted)
101
- setIsPayout(true);
102
98
  };
103
99
  useEffect(function () {
104
100
  if ((flows === null || flows === void 0 ? void 0 : flows.length) > 0)
@@ -51,10 +51,8 @@ var BrandList = function (_a) {
51
51
  var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
52
52
  var t = useTranslation().t;
53
53
  var isAr = useLanguage().isAr;
54
- var _c = useFormContext(), setValue = _c.setValue, control = _c.control;
55
- var linksControl = useController({ control: control, name: 'links' });
54
+ var control = useFormContext().control;
56
55
  var selectedBrandControl = useController({ control: control, name: 'selectedBrandItem' });
57
- var links = linksControl.field.value;
58
56
  var selectedBrand = selectedBrandControl.field.value;
59
57
  var onOpenBrandList = function (event) {
60
58
  var _a;
@@ -79,8 +77,6 @@ var BrandList = function (_a) {
79
77
  var onSelectItem = function (brand) {
80
78
  selectedBrandControl.field.onChange(brand);
81
79
  onCloseBrandList();
82
- var website = brand.website;
83
- setValue('links', __assign(__assign({}, links), { website: website }), { shouldValidate: true });
84
80
  };
85
81
  return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputStyled, { label: t('select_brand_label'), readOnly: true, onClick: !!anchorEl ? onCloseBrandList : onOpenBrandList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_brand'), value: t(getBrandName(selectedBrand)) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'id', list: list, onSelectItem: onSelectItem, renderItem: function (item) {
86
82
  return (_jsxs(_Fragment, { children: [_jsx(BrandContainer, { children: _jsx(BrandNameText, __assign({ isSelected: getBrandId(item) === getBrandId(selectedBrand) }, { children: isOtherLicense(item) ? t(getBrandName(item)) : getBrandName(item) })) }), getBrandId(item) === getBrandId(selectedBrand) && _jsx(CheckIcon, {})] }));
@@ -18,6 +18,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
18
18
  import { useAppDispatch, useAppSelector } from '../../../../hooks';
19
19
  import { handlePrevScreenStep } from '../../../../app/settings';
20
20
  import Form from '../../../../components/Form';
21
+ import { INSTAGRAM_URL, TWITTER_URL } from '../../../../constants';
21
22
  import { ScreenContainer } from '../../../shared/Containers';
22
23
  import Button from '../../../shared/Button';
23
24
  import { clearError, connectSelector, updateLeadBrand } from '../../../app/connect/connectStore';
@@ -50,6 +51,7 @@ var Merchant = function (_a) {
50
51
  var t = useTranslation().t;
51
52
  var isAr = useLanguage().isAr;
52
53
  var dispatch = useAppDispatch();
54
+ var formDataSelectedBrand = methods.getValues('selectedBrandItem');
53
55
  var onSubmit = function (formData) {
54
56
  dispatch(updateLeadBrand(formData));
55
57
  };
@@ -69,11 +71,11 @@ var Merchant = function (_a) {
69
71
  methods.setError('brandName', { message: 'Profile Name already exists' });
70
72
  }, [responseBody]);
71
73
  React.useEffect(function () {
72
- var _a, _b;
74
+ var _a, _b, _c, _d;
73
75
  if (isNewUser === true) {
74
76
  setUserType(ValidationOptions.NEW_USER);
75
77
  }
76
- if (isNewUser === false && (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0 && methods.getValues('selectedBrandItem').id === 'other') {
78
+ if (isNewUser === false && (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0 && (formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.id) === 'other') {
77
79
  setUserType(ValidationOptions.EXISTING_USER_WITH_OTHER_BRAND);
78
80
  methods.clearErrors();
79
81
  setTimeout(function () {
@@ -82,17 +84,17 @@ var Merchant = function (_a) {
82
84
  methods.setValue('links', sites);
83
85
  }, 100);
84
86
  }
85
- if (isNewUser === false && (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0 && methods.getValues('selectedBrandItem').id !== 'other') {
87
+ if (isNewUser === false && (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0 && (formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.id) !== 'other') {
86
88
  setUserType(ValidationOptions.EXISTING_USER_WITH_EXIST_BRAND);
87
89
  methods.clearErrors();
88
- var twitter = ((_a = selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.social) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item.includes('twitter.com'); })) || '';
89
- var instagram = ((_b = selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.social) === null || _b === void 0 ? void 0 : _b.find(function (item) { return item.includes('instagram.com'); })) || '';
90
- var sites_1 = __assign(__assign({}, links), { website: selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.website, twitter: twitter, instagram: instagram });
90
+ var twitter = ((_b = (_a = formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.social) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item.includes('twitter.com'); })) === null || _b === void 0 ? void 0 : _b.replaceAll("".concat(TWITTER_URL, "/"), '')) || '';
91
+ var instagram = ((_d = (_c = formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.social) === null || _c === void 0 ? void 0 : _c.find(function (item) { return item.includes('instagram.com'); })) === null || _d === void 0 ? void 0 : _d.replaceAll("".concat(INSTAGRAM_URL, "/"), '')) || '';
92
+ var sites_1 = __assign(__assign({}, links), { website: formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.website, twitter: twitter, instagram: instagram });
91
93
  setTimeout(function () { return methods.setValue('links', sites_1, { shouldValidate: true }); }, 100);
92
94
  }
93
- }, [methods.getValues('selectedBrandItem'), isNewUser]);
95
+ }, [formDataSelectedBrand, isNewUser]);
94
96
  React.useEffect(function () {
95
- if (selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.id)
97
+ if (!(formDataSelectedBrand === null || formDataSelectedBrand === void 0 ? void 0 : formDataSelectedBrand.id) && (selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.id))
96
98
  methods.setValue('selectedBrandItem', selectedBrandItem, { shouldValidate: true });
97
99
  }, [selectedBrandItem]);
98
100
  var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;
@@ -1,4 +1,4 @@
1
- import { REGEX_WEBSITE } from '../../../../constants';
1
+ import { REGEX_WEBSITE, REGEX_BRAND_NAME } from '../../../../constants';
2
2
  import * as yup from 'yup';
3
3
  export var ValidationOptions;
4
4
  (function (ValidationOptions) {
@@ -17,7 +17,9 @@ export var MerchantValidationSchema = function (userType) {
17
17
  var length = (value === null || value === void 0 ? void 0 : value.length) || 0;
18
18
  if (length === 0)
19
19
  return true;
20
- return length < 3 ? this.createError({ message: 'enter_brand_name_english_chars_numbers_space' }) : true;
20
+ return !(value === null || value === void 0 ? void 0 : value.match(REGEX_BRAND_NAME))
21
+ ? this.createError({ message: 'enter_brand_name_english_chars_numbers_space' })
22
+ : true;
21
23
  }
22
24
  })
23
25
  .required(''),
@@ -107,6 +107,6 @@ var Mobile = function (_a) {
107
107
  var disabled = !methods.formState.isValid || !!error;
108
108
  var title = t('join_our_community');
109
109
  var subTitle = t('ide_terms_and_conditions_description');
110
- return (_jsxs(ScreenContainer, { children: [(title || subTitle) && _jsx(MIDTitle, { show: !listActive, title: title, description: subTitle }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { show: !isBusinessListActive, countries: settingsStore.data.countries, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } }) }), _jsxs(Collapse, __assign({ in: !listActive }, { children: [_jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: !methods.watch('mobile') }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ disabled: settingsStore.loading || loading, onClick: function () { return onBack(); } }, { children: t('absher_button_label') }))] }))] }))] })) }))] }));
110
+ return (_jsxs(ScreenContainer, { children: [(title || subTitle) && _jsx(MIDTitle, { show: !listActive, title: title, description: subTitle }), _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputsContainerStyled, { children: _jsx(MobileNumber, { show: !isBusinessListActive, countries: settingsStore.data.countries, onListOpen: function () { return handleMenuListClick(ListType.CountryCodeList); }, onListClose: function () { return handleMenuListClick(); } }) }), _jsxs(Collapse, __assign({ in: !listActive }, { children: [_jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, loading: loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(AbsherButton, __assign({ disabled: settingsStore.loading || loading, onClick: function () { return onBack(); } }, { children: t('absher_button_label') }))] }))] }))] })) }))] }));
111
111
  };
112
112
  export default React.memo(Mobile);
@@ -85,6 +85,6 @@ var NID = function (_a) {
85
85
  dispatch(handlePrevScreenStep('CONNECT_MOBILE_STEP'));
86
86
  };
87
87
  var disabled = !methods.formState.isValid || !!error;
88
- return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: !methods.watch('nid') }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ onClick: function () { return onBack(); }, disabled: loading || settingsStore.loading }, { children: t('mobile_button_label') }))] }))] }))] })) })) }));
88
+ return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(IDNumber, { show: !collapse }) })), _jsx(DOB, { onDateClicked: handleCollapseOpenClose }), _jsxs(Collapse, __assign({ in: !collapse }, { children: [_jsx(Button, __assign({ loading: loading, isAr: isAr, disableBack: true, disabled: disabled || settingsStore.loading, error: t(error || '') }, { children: t('next') })), _jsxs(Collapse, __assign({ in: !methods.formState.isValid }, { children: [_jsxs(OrBoxStyled, { children: [_jsx(DividerStyled, {}), _jsx(TextStyled, { children: t('or') }), _jsx(DividerStyled, {})] }), _jsx(MobileButton, __assign({ onClick: function () { return onBack(); }, disabled: loading || settingsStore.loading }, { children: t('mobile_button_label') }))] }))] }))] })) })) }));
89
89
  };
90
90
  export default React.memo(NID);