@tap-payments/auth-jsconnect 1.0.49 → 1.0.52

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 (49) hide show
  1. package/build/@types/app.d.ts +1 -0
  2. package/build/@types/form.d.ts +6 -1
  3. package/build/app/rootReducer.d.ts +1 -0
  4. package/build/app/rootReducer.js +3 -1
  5. package/build/app/settings.js +1 -1
  6. package/build/app/store.d.ts +2 -0
  7. package/build/assets/locales/ar.json +2 -1
  8. package/build/assets/locales/en.json +3 -2
  9. package/build/components/SimpleList/SimpleList.js +1 -0
  10. package/build/constants/app.d.ts +6 -0
  11. package/build/constants/app.js +14 -8
  12. package/build/constants/dummy.d.ts +2 -0
  13. package/build/constants/dummy.js +12 -6
  14. package/build/features/app/bank/bankStore.d.ts +36 -0
  15. package/build/features/app/bank/bankStore.js +219 -0
  16. package/build/features/app/business/businessStore.js +8 -8
  17. package/build/features/app/connect/connectStore.js +16 -2
  18. package/build/features/bank/Bank.d.ts +2 -1
  19. package/build/features/bank/Bank.js +15 -5
  20. package/build/features/bank/screens/BankDetails/BankDetails.js +1 -2
  21. package/build/features/bank/screens/Verify/OTPInput.d.ts +5 -0
  22. package/build/features/bank/screens/Verify/OTPInput.js +42 -0
  23. package/build/features/bank/screens/Verify/Verify.d.ts +5 -0
  24. package/build/features/bank/screens/Verify/Verify.js +78 -0
  25. package/build/features/bank/screens/Verify/index.d.ts +2 -0
  26. package/build/features/bank/screens/Verify/index.js +2 -0
  27. package/build/features/bank/screens/Verify/validation.d.ts +8 -0
  28. package/build/features/bank/screens/Verify/validation.js +4 -0
  29. package/build/features/business/screens/BusinessType/CRNumber.d.ts +2 -1
  30. package/build/features/business/screens/BusinessType/CRNumber.js +2 -2
  31. package/build/features/business/screens/BusinessType/CompanyLicense.js +2 -1
  32. package/build/features/business/screens/BusinessType/FLNumber.d.ts +2 -1
  33. package/build/features/business/screens/BusinessType/FLNumber.js +2 -2
  34. package/build/features/business/screens/BusinessType/FreelanceLicense.js +2 -1
  35. package/build/features/business/screens/Confirm/Confirm.js +1 -1
  36. package/build/features/connect/screens/Individual/MobileNumber.js +1 -1
  37. package/build/features/connect/screens/Individual/validation.js +1 -1
  38. package/build/features/connect/screens/Merchant/BrandList.d.ts +0 -2
  39. package/build/features/connect/screens/Merchant/BrandList.js +16 -45
  40. package/build/features/connect/screens/Merchant/BrandName.js +1 -1
  41. package/build/features/connect/screens/Merchant/Merchant.js +27 -11
  42. package/build/features/connect/screens/Merchant/SocialMedia.js +26 -3
  43. package/build/features/connect/screens/Merchant/validation.d.ts +4 -4
  44. package/build/features/connect/screens/Merchant/validation.js +9 -7
  45. package/build/features/connect/screens/Mobile/MobileNumber.js +1 -1
  46. package/build/features/connect/screens/Mobile/validation.js +1 -1
  47. package/build/features/featuresScreens.js +5 -5
  48. package/build/hooks/useAppDispatch.d.ts +1 -0
  49. package/package.json +1 -1
@@ -0,0 +1,42 @@
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 Box from '@mui/material/Box/Box';
15
+ import { styled } from '@mui/material/styles';
16
+ import OTPField from '../../../shared/OTP';
17
+ import { useController, useFormContext } from 'react-hook-form';
18
+ import { useTranslation } from 'react-i18next';
19
+ import { DEFAULT_TIMER_VALUE } from '../../../../constants';
20
+ var BoxStyled = styled(Box)(function (_a) {
21
+ var theme = _a.theme;
22
+ return ({
23
+ display: 'flex',
24
+ flexDirection: 'column',
25
+ fontFamily: theme.typography.fontFamily
26
+ });
27
+ });
28
+ var OTPInput = function (_a) {
29
+ var _b = useFormContext(), control = _b.control, setValue = _b.setValue;
30
+ var t = useTranslation().t;
31
+ var otpControl = useController({ name: 'otp', control: control });
32
+ var handleOnOTPChange = function (otp) {
33
+ otpControl.field.onChange(otp);
34
+ };
35
+ var handleOnResendOTP = function () {
36
+ if (otpControl.field.value)
37
+ setValue('otp', '', { shouldValidate: true });
38
+ };
39
+ var otpValue = otpControl.field.value;
40
+ return (_jsx(BoxStyled, __assign({ dir: 'ltr' }, { children: _jsx(OTPField, { timeEndLabel: t('ide_otp_resend_label'), timerInSeconds: DEFAULT_TIMER_VALUE, onResetClick: handleOnResendOTP, value: otpValue, onChange: function (number) { return handleOnOTPChange(number.toString()); } }) })));
41
+ };
42
+ export default React.memo(OTPInput);
@@ -0,0 +1,5 @@
1
+ import * as React from 'react';
2
+ export interface OTPProps {
3
+ }
4
+ declare const _default: React.MemoExoticComponent<({}: OTPProps) => JSX.Element>;
5
+ export default _default;
@@ -0,0 +1,78 @@
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, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import * as React from 'react';
14
+ import { useAppDispatch } from '../../../../hooks';
15
+ import { useTranslation } from 'react-i18next';
16
+ import { useSelector } from 'react-redux';
17
+ import { useForm, FormProvider } from 'react-hook-form';
18
+ import { yupResolver } from '@hookform/resolvers/yup';
19
+ import Box from '@mui/material/Box/Box';
20
+ import { styled } from '@mui/material/styles';
21
+ import { handlePrevScreenStep } from '../../../../app/settings';
22
+ import { useLanguage } from '../../../../hooks';
23
+ import { maskPhone } from '../../../../utils';
24
+ import Form from '../../../../components/Form';
25
+ import Text from '../../../../components/Text';
26
+ import { ScreenContainer } from '../../../shared/Containers';
27
+ import { bankSelector, clearError, resetOTPScreen, verifyLeadOTP } from '../../../app/bank/bankStore';
28
+ import Button from '../../../shared/Button';
29
+ import { OTPValidation } from './validation';
30
+ import OTPInput from './OTPInput';
31
+ var OTPTitleContainerStyled = styled(Box)(function (_a) {
32
+ var theme = _a.theme;
33
+ return ({
34
+ background: theme.palette.common.white,
35
+ border: '1px solid',
36
+ borderColor: theme.palette.divider,
37
+ direction: theme.direction,
38
+ borderRadius: theme.spacing(0, 0, 1.25, 1.25),
39
+ marginBottom: theme.spacing(5.75)
40
+ });
41
+ });
42
+ var OTPTitleStyled = styled(Text)(function (_a) {
43
+ var theme = _a.theme;
44
+ return (__assign(__assign({}, theme.typography.body1), { color: theme.palette.text.primary, fontWeight: theme.typography.fontWeightLight, marginBlock: theme.spacing(1.75), marginInlineStart: theme.spacing(2.5), lineHeight: 1.75 }));
45
+ });
46
+ var FormStyled = styled(Form)(function () { return ({
47
+ display: 'flex',
48
+ flexDirection: 'column'
49
+ }); });
50
+ var VerifyNumber = function (_a) {
51
+ var _b, _c, _d;
52
+ var dispatch = useAppDispatch();
53
+ var _e = useSelector(bankSelector), data = _e.data, loading = _e.loading, error = _e.error;
54
+ var methods = useForm({
55
+ resolver: yupResolver(OTPValidation),
56
+ defaultValues: data.otpData,
57
+ mode: 'onChange'
58
+ });
59
+ var t = useTranslation().t;
60
+ var isAr = useLanguage().isAr;
61
+ React.useEffect(function () {
62
+ if (error)
63
+ dispatch(clearError());
64
+ return function () {
65
+ dispatch(resetOTPScreen());
66
+ };
67
+ }, [methods.formState.isValid]);
68
+ var onSubmit = function (formData) {
69
+ dispatch(verifyLeadOTP(formData));
70
+ };
71
+ var onBack = function () {
72
+ dispatch(handlePrevScreenStep());
73
+ };
74
+ var phone = (_d = (_c = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.contact) === null || _c === void 0 ? void 0 : _c.phone) === null || _d === void 0 ? void 0 : _d.number;
75
+ var disabled = !methods.formState.isValid || !!error || !phone;
76
+ return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(OTPTitleContainerStyled, { children: _jsxs(OTPTitleStyled, { children: [loading ? t('ide_otp_waiting_title') : t('ide_opt_sent_title'), !loading && phone && _jsx("span", __assign({ dir: 'ltr' }, { children: "".concat(maskPhone(phone || '')) }))] }) }), _jsx(OTPInput, {}), _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, disabled: disabled, type: 'submit', isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') }))] })) })) }));
77
+ };
78
+ export default React.memo(VerifyNumber);
@@ -0,0 +1,2 @@
1
+ import OTP from './Verify';
2
+ export default OTP;
@@ -0,0 +1,2 @@
1
+ import OTP from './Verify';
2
+ export default OTP;
@@ -0,0 +1,8 @@
1
+ import * as yup from 'yup';
2
+ export declare const OTPValidation: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
3
+ otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
4
+ }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
5
+ otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
6
+ }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
7
+ otp: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
8
+ }>>>;
@@ -0,0 +1,4 @@
1
+ import * as yup from 'yup';
2
+ export var OTPValidation = yup.object().shape({
3
+ otp: yup.string().min(6, 'otp_min_length').required('otp_required')
4
+ });
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
2
  interface CRNumberProps {
3
3
  show: boolean;
4
+ readOnly: boolean;
4
5
  }
5
- declare const _default: React.MemoExoticComponent<({ show }: CRNumberProps) => JSX.Element>;
6
+ declare const _default: React.MemoExoticComponent<({ show, readOnly }: CRNumberProps) => JSX.Element>;
6
7
  export default _default;
@@ -22,7 +22,7 @@ import Input from '../../../shared/Input';
22
22
  import Collapse from '../../../../components/Collapse';
23
23
  var CRNumber = function (_a) {
24
24
  var _b;
25
- var show = _a.show;
25
+ var show = _a.show, readOnly = _a.readOnly;
26
26
  var t = useTranslation().t;
27
27
  var control = useFormContext().control;
28
28
  var crNumberControl = useController({ control: control, name: 'crNumber' });
@@ -36,6 +36,6 @@ var CRNumber = function (_a) {
36
36
  };
37
37
  var crNumberValue = crNumberControl.field.value;
38
38
  var error = (_b = crNumberControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
39
- return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { label: t('enter_commercial_register_no'), onChange: handleFLNumberChange, inputProps: { maxLength: CR_NUMBER_LENGTH }, value: crNumberValue, endAdornment: (crNumberValue === null || crNumberValue === void 0 ? void 0 : crNumberValue.length) === CR_NUMBER_LENGTH ? (_jsx(CheckIcon, {})) : (crNumberValue && _jsx(ClearIcon, { onClick: clearCRNumber })), placeholder: '0123456789', warningType: 'alert', warningMessage: error && t(error, { length: CR_NUMBER_LENGTH }) }) }) })));
39
+ return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { readOnly: readOnly, label: t('enter_commercial_register_no'), onChange: handleFLNumberChange, inputProps: { maxLength: CR_NUMBER_LENGTH }, value: crNumberValue, endAdornment: (crNumberValue === null || crNumberValue === void 0 ? void 0 : crNumberValue.length) === CR_NUMBER_LENGTH ? (_jsx(CheckIcon, {})) : (crNumberValue && _jsx(ClearIcon, { onClick: clearCRNumber })), placeholder: '0123456789', warningType: 'alert', warningMessage: error && t(error, { length: CR_NUMBER_LENGTH }) }) }) })));
40
40
  };
41
41
  export default React.memo(CRNumber);
@@ -115,12 +115,13 @@ var CompanyLicense = function (_a) {
115
115
  };
116
116
  var hasList = (licenseList === null || licenseList === void 0 ? void 0 : licenseList.length) > 0;
117
117
  var showCRNumber = !anchorEl;
118
+ var crReadonly = !isOtherLicense(selectedLicense);
118
119
  return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(Collapse, __assign({ in: hasList }, { children: [_jsx(InputStyled, { label: t('enter_commercial_register_no'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_license_cr'), value: t(getLicenseName(selectedLicense)) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'legal_name?.en', list: licenseList, onSelectItem: onSelectItem, renderItem: function (item) {
119
120
  return (_jsxs(_Fragment, { children: [_jsx(LicenseContainer, { children: _jsx(LicenseNameText, __assign({ isSelected: getLicenseNumber(item) === getLicenseNumber(selectedLicense) }, { children: isOtherLicense(item)
120
121
  ? t(getLicenseNumber(item))
121
122
  : isAr
122
123
  ? getLicenseName(item)
123
124
  : getLicenseNumber(item) + '-' + getLicenseName(item) })) }), getLicenseNumber(item) === getLicenseNumber(selectedLicense) && _jsx(CheckIcon, {})] }));
124
- } }) }))] })), _jsx(CRNumber, { show: showCRNumber })] }) })));
125
+ } }) }))] })), _jsx(CRNumber, { show: showCRNumber, readOnly: crReadonly })] }) })));
125
126
  };
126
127
  export default React.memo(CompanyLicense);
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
2
  interface FLNumberProps {
3
3
  show: boolean;
4
+ readOnly: boolean;
4
5
  }
5
- declare const _default: React.MemoExoticComponent<({ show }: FLNumberProps) => JSX.Element>;
6
+ declare const _default: React.MemoExoticComponent<({ show, readOnly }: FLNumberProps) => JSX.Element>;
6
7
  export default _default;
@@ -22,7 +22,7 @@ import Input from '../../../shared/Input';
22
22
  import Collapse from '../../../../components/Collapse';
23
23
  var FLNumber = function (_a) {
24
24
  var _b;
25
- var show = _a.show;
25
+ var show = _a.show, readOnly = _a.readOnly;
26
26
  var t = useTranslation().t;
27
27
  var control = useFormContext().control;
28
28
  var flNumberControl = useController({ control: control, name: 'flNumber' });
@@ -36,6 +36,6 @@ var FLNumber = function (_a) {
36
36
  };
37
37
  var flNumberValue = flNumberControl.field.value;
38
38
  var error = (_b = flNumberControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
39
- return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { label: t('enter_license_no'), onChange: handleFLNumberChange, inputProps: { maxLength: FL_NUMBER_LENGTH }, value: flNumberValue, endAdornment: (flNumberValue === null || flNumberValue === void 0 ? void 0 : flNumberValue.length) === FL_NUMBER_LENGTH ? (_jsx(CheckIcon, {})) : (flNumberValue && _jsx(ClearIcon, { onClick: clearFLNumber })), placeholder: '12345678', warningType: 'alert', warningMessage: error && t(error, { length: FL_NUMBER_LENGTH }) }) }) })));
39
+ return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsx(Input, { readOnly: readOnly, label: t('enter_license_no'), onChange: handleFLNumberChange, inputProps: { maxLength: FL_NUMBER_LENGTH }, value: flNumberValue, endAdornment: (flNumberValue === null || flNumberValue === void 0 ? void 0 : flNumberValue.length) === FL_NUMBER_LENGTH ? (_jsx(CheckIcon, {})) : (flNumberValue && _jsx(ClearIcon, { onClick: clearFLNumber })), placeholder: '12345678', warningType: 'alert', warningMessage: error && t(error, { length: FL_NUMBER_LENGTH }) }) }) })));
40
40
  };
41
41
  export default React.memo(FLNumber);
@@ -115,12 +115,13 @@ var FreelanceLicense = function (_a) {
115
115
  };
116
116
  var hasList = (licenseList === null || licenseList === void 0 ? void 0 : licenseList.length) > 0;
117
117
  var showFLNumber = !anchorEl;
118
+ var flReadonly = !isOtherLicense(selectedLicense);
118
119
  return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsxs(Collapse, __assign({ in: hasList }, { children: [_jsx(InputStyled, { label: t('enter_freelance_license'), readOnly: true, onClick: !!anchorEl ? function () { return onCloseLicenseList(); } : onOpenLicenseList, endAdornment: _jsx(ExpandIcon, { anchorEl: !!anchorEl }), placeholder: t('choose_license_fl'), value: t(getLicenseName(selectedLicense)) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'legal_name?.en', list: licenseList, onSelectItem: onSelectItem, renderItem: function (item) {
119
120
  return (_jsxs(_Fragment, { children: [_jsx(LicenseContainer, { children: _jsx(LicenseNameText, __assign({ isSelected: getLicenseNumber(item) === getLicenseNumber(selectedLicense) }, { children: isOtherLicense(item)
120
121
  ? t(getLicenseNumber(item))
121
122
  : isAr
122
123
  ? getLicenseName(item)
123
124
  : getLicenseNumber(item) + '-' + getLicenseName(item) })) }), getLicenseNumber(item) === getLicenseNumber(selectedLicense) && _jsx(CheckIcon, {})] }));
124
- } }) }))] })), _jsx(FLNumber, { show: showFLNumber })] }) })));
125
+ } }) }))] })), _jsx(FLNumber, { show: showFLNumber, readOnly: flReadonly })] }) })));
125
126
  };
126
127
  export default React.memo(FreelanceLicense);
@@ -51,6 +51,6 @@ var Confirm = function () {
51
51
  dispatch(handlePrevScreenStep());
52
52
  };
53
53
  var disabled = !methods.formState.isValid || !!error;
54
- return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputStyled, { label: t(isCR ? 'signup_business_cr_info_title' : 'signup_business_fl_info_title'), value: licenseNumber, disabled: true }), _jsx(InputStyled, { label: t('signup_brand_name_label'), value: brandName, disabled: true }), _jsx(InputStyled, { sx: { marginBlockEnd: 0 }, label: t('signup_legal_name_label'), value: legalName, disabled: true }), _jsx(Button, __assign({ disabled: disabled, loading: loading, error: t(error || ''), onBackClicked: function () { return onBack(); }, isAr: isAr }, { children: t('confirm') }))] })) })) }));
54
+ return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(InputStyled, { label: t(isCR ? 'signup_business_cr_info_title' : 'signup_business_fl_info_title'), value: licenseNumber, disabled: true }), _jsx(InputStyled, { label: t('signup_brand_name_label'), placeholder: t('signup_brand_name_label'), value: brandName, disabled: true }), _jsx(InputStyled, { sx: { marginBlockEnd: 0 }, label: t('signup_legal_name_label'), placeholder: t('signup_legal_name_label'), value: legalName, disabled: true }), _jsx(Button, __assign({ disabled: disabled, loading: loading, error: t(error || ''), onBackClicked: function () { return onBack(); }, isAr: isAr }, { children: t('confirm') }))] })) })) }));
55
55
  };
56
56
  export default React.memo(Confirm);
@@ -116,7 +116,7 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
116
116
  setValue('mobile', '');
117
117
  countryCodeControl.field.onChange(country);
118
118
  };
119
- return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: requiredLen }, type: 'tel', 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(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '0|5' }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
119
+ return (_jsx(Collapse, __assign({ in: rest.show }, { children: _jsxs(ScreenContainer, __assign({ ref: ref, sx: { mb: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('signup_enter_mobile') }) }), _jsx(Input, { sx: { direction: 'ltr' }, inputProps: { maxLength: requiredLen }, type: 'tel', 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(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
120
120
  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, {})] }));
121
121
  } }) }))] })) })));
122
122
  });
@@ -25,7 +25,7 @@ export var IndividualMobileValidation = yup.object().shape({
25
25
  var isNumber = mobileValue.match(/^[0-9]/g);
26
26
  if (!isNumber)
27
27
  return this.createError({ message: 'enter_valid_mobile_number' });
28
- var isStartWithZero = mobileValue.startsWith('0');
28
+ var isStartWithZero = mobileValue.startsWith('05');
29
29
  var isStartWith5 = mobileValue.startsWith('5');
30
30
  var isSaudiNumber = isStartWith5 || isStartWithZero;
31
31
  if (isSA) {
@@ -5,8 +5,6 @@ interface BrandListProps {
5
5
  list: Array<BrandInfo>;
6
6
  onListOpen?: () => void;
7
7
  onListClose?: () => void;
8
- showTerms?: () => void;
9
- hideTerms?: () => void;
10
8
  }
11
9
  declare const _default: React.MemoExoticComponent<({ show, list, ...rest }: BrandListProps) => JSX.Element>;
12
10
  export default _default;
@@ -20,19 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
24
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
25
- if (ar || !(i in from)) {
26
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
27
- ar[i] = from[i];
28
- }
29
- }
30
- return to.concat(ar || Array.prototype.slice.call(from));
31
- };
32
23
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
33
24
  import * as React from 'react';
34
25
  import { useTranslation } from 'react-i18next';
35
- import { useFormContext } from 'react-hook-form';
26
+ import { useFormContext, useController } from 'react-hook-form';
36
27
  import Box from '@mui/material/Box';
37
28
  import { styled } from '@mui/material/styles';
38
29
  import { useLanguage } from '../../../../hooks';
@@ -43,7 +34,6 @@ import SimpleList from '../../../../components/SimpleList';
43
34
  import Text from '../../../../components/Text';
44
35
  import ExpandIcon from '../../../../components/ExpandIcon';
45
36
  import Collapse from '../../../../components/Collapse';
46
- import { OTHER_BRAND } from '../../../../constants';
47
37
  var InputStyled = styled(Input)(function () { return ({
48
38
  '& .MuiInputBase-input': {
49
39
  cursor: 'pointer'
@@ -58,12 +48,14 @@ var BrandNameText = styled(Text, { shouldForwardProp: function (prop) { return p
58
48
  });
59
49
  var BrandList = function (_a) {
60
50
  var show = _a.show, list = _a.list, rest = __rest(_a, ["show", "list"]);
61
- var _b = React.useState(list), brandList = _b[0], setBrandList = _b[1];
62
- var _c = React.useState(), selectedBrand = _c[0], setSelectedBrand = _c[1];
63
- var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
51
+ var _b = React.useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
64
52
  var t = useTranslation().t;
65
53
  var isAr = useLanguage().isAr;
66
- var setValue = useFormContext().setValue;
54
+ var _c = useFormContext(), setValue = _c.setValue, control = _c.control, reset = _c.reset;
55
+ var linksControl = useController({ control: control, name: 'links' });
56
+ var selectedBrandControl = useController({ control: control, name: 'selectedBrandItem' });
57
+ var links = linksControl.field.value;
58
+ var selectedBrand = selectedBrandControl.field.value;
67
59
  var onOpenBrandList = function (event) {
68
60
  var _a;
69
61
  setAnchorEl(event.currentTarget);
@@ -74,45 +66,24 @@ var BrandList = function (_a) {
74
66
  setAnchorEl(null);
75
67
  (_a = rest.onListClose) === null || _a === void 0 ? void 0 : _a.call(rest);
76
68
  };
77
- React.useEffect(function () {
78
- var array = list;
79
- if ((array === null || array === void 0 ? void 0 : array.length) > 0) {
80
- var hasOther = array === null || array === void 0 ? void 0 : array.find(function (item) { return isOtherLicense(item); });
81
- var first = array[0];
82
- if (first) {
83
- setSelectedBrand(first);
84
- setValue('brandName', getBrandName(first), { shouldValidate: true });
85
- if (!hasOther)
86
- array = __spreadArray(__spreadArray([], array, true), [OTHER_BRAND], false);
87
- setBrandList(array);
88
- }
89
- }
90
- }, [show, list]);
91
69
  var getBrandName = function (item) {
92
70
  var _a, _b;
93
- return (isAr ? (_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = item === null || item === void 0 ? void 0 : item.name) === null || _b === void 0 ? void 0 : _b.en) || '';
71
+ return (isAr ? (_a = item.name) === null || _a === void 0 ? void 0 : _a.ar : (_b = item.name) === null || _b === void 0 ? void 0 : _b.en) || '';
94
72
  };
95
73
  var getBrandId = function (item) {
96
- return (item === null || item === void 0 ? void 0 : item.id) || '';
74
+ return item.id || '';
97
75
  };
98
76
  var isOtherLicense = function (item) {
99
- return (item === null || item === void 0 ? void 0 : item.id) === 'other';
77
+ return item.id === 'other';
100
78
  };
101
79
  var onSelectItem = function (brand) {
102
- var _a, _b;
103
- setSelectedBrand(brand);
80
+ selectedBrandControl.field.onChange(brand);
104
81
  onCloseBrandList();
105
- if (isOtherLicense(brand)) {
106
- setValue('brandName', '', { shouldValidate: true });
107
- (_a = rest.showTerms) === null || _a === void 0 ? void 0 : _a.call(rest);
108
- return;
109
- }
110
- setValue('brandName', getBrandName(brand), { shouldValidate: true });
111
- (_b = rest.hideTerms) === null || _b === void 0 ? void 0 : _b.call(rest);
82
+ var website = brand.website;
83
+ setValue('links', __assign(__assign({}, links), { website: website }), { shouldValidate: true });
112
84
  };
113
- var hasList = (brandList === null || brandList === void 0 ? void 0 : brandList.length) > 0;
114
- return (_jsx(Collapse, __assign({ in: show }, { children: _jsx(ScreenContainer, { children: _jsxs(Collapse, __assign({ in: hasList }, { children: [_jsx(InputStyled, { label: t('select_brand_label'), readOnly: true, onClick: !!anchorEl ? function () { return 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: brandList, onSelectItem: onSelectItem, renderItem: function (item) {
115
- 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, {})] }));
116
- } }) }))] })) }) })));
85
+ 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
+ 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, {})] }));
87
+ } }) }))] }) })));
117
88
  };
118
89
  export default React.memo(BrandList);
@@ -138,6 +138,6 @@ var BrandName = function (_a) {
138
138
  var clearBrandName = function () {
139
139
  brandControl.field.onChange('');
140
140
  };
141
- return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5, mb: 3 } }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('signup_brand_name_label') }), _jsx(Tooltip, __assign({ title: t('brand_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), _jsx(Input, { onChange: handleBrandNameChange, value: brandNameValue, placeholder: t('signup_brand_name_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: brandNameChecking ? (_jsx(CircularProgress, { size: 25, thickness: 5, sx: { height: 'auto !important' } })) : !error && brandNameValue ? (_jsx(CheckIcon, {})) : (brandNameValue && _jsx(ClearIcon, { onClick: clearBrandName })) })] })) })));
141
+ return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5, mb: 0 } }, { children: [_jsxs(LabelContainerStyled, { children: [_jsx(InputLabelStyled, { children: t('signup_brand_name_label') }), _jsx(Tooltip, __assign({ title: t('brand_name_hint'), onMouseOver: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, onTouchStartCapture: function () { return setIsHovered(true); } }, { children: isHovered ? _jsx(InfoIconStyled, {}) : _jsx(InfoOutlinedIconStyled, {}) }))] }), _jsx(Input, { onChange: handleBrandNameChange, value: brandNameValue, placeholder: t('signup_brand_name_placeholder'), warningType: 'alert', warningMessage: error && t(error), endAdornment: brandNameChecking ? (_jsx(CircularProgress, { size: 25, thickness: 5, sx: { height: 'auto !important' } })) : !error && brandNameValue ? (_jsx(CheckIcon, {})) : (brandNameValue && _jsx(ClearIcon, { onClick: clearBrandName })) })] })) })));
142
142
  };
143
143
  export default React.memo(BrandName);
@@ -29,21 +29,28 @@ import SocialMedia from './SocialMedia';
29
29
  import TAC from './TAC';
30
30
  import BrandList from './BrandList';
31
31
  var Merchant = function (_a) {
32
- var _b, _c, _d, _e, _f, _g, _h;
33
- var _j = React.useState(false), brandNameChecking = _j[0], setBrandNameChecking = _j[1];
32
+ var _b, _c, _d, _e, _f;
33
+ var _g = React.useState(false), brandNameChecking = _g[0], setBrandNameChecking = _g[1];
34
+ var _h = React.useState(false), isOtherBrand = _h[0], setIsOtherBrand = _h[1];
35
+ var _j = React.useState(false), listActive = _j[0], setListActive = _j[1];
34
36
  var _k = useSelector(connectSelector), data = _k.data, loading = _k.loading, error = _k.error;
35
37
  var isNewUser = (_b = data.otpData.responseBody) === null || _b === void 0 ? void 0 : _b.new_user;
36
- var _l = React.useState(isNewUser), showTermsCheck = _l[0], setShowTermsCheck = _l[1];
38
+ var isAbsher = data.otpData.isAbsher;
39
+ var brandList = ((_c = data.brandData.responseBody) === null || _c === void 0 ? void 0 : _c.brands) || [];
40
+ var _l = data.brandData, brandName = _l.brandName, links = _l.links, selectedBrandItem = _l.selectedBrandItem, termAndConditionChecked = _l.termAndConditionChecked;
37
41
  var methods = useForm({
38
- resolver: yupResolver(MerchantValidationSchema(showTermsCheck)),
39
- defaultValues: data.brandData,
42
+ resolver: yupResolver(MerchantValidationSchema(isOtherBrand)),
43
+ defaultValues: {
44
+ brandName: brandName,
45
+ links: links,
46
+ selectedBrandItem: selectedBrandItem,
47
+ termAndConditionChecked: termAndConditionChecked
48
+ },
40
49
  mode: 'onChange'
41
50
  });
42
51
  var t = useTranslation().t;
43
52
  var isAr = useLanguage().isAr;
44
53
  var dispatch = useAppDispatch();
45
- var isAbsher = data.otpData.isAbsher;
46
- var _m = React.useState(false), listActive = _m[0], setListActive = _m[1];
47
54
  var onSubmit = function (formData) {
48
55
  dispatch(updateLeadBrand(formData));
49
56
  };
@@ -62,10 +69,19 @@ var Merchant = function (_a) {
62
69
  var _a, _b;
63
70
  if (((_b = (_a = data.brandData) === null || _a === void 0 ? void 0 : _a.responseBody) === null || _b === void 0 ? void 0 : _b.response_code) === '5')
64
71
  methods.setError('brandName', { message: 'Profile Name already exists' });
65
- }, [(_c = data.brandData) === null || _c === void 0 ? void 0 : _c.responseBody]);
72
+ }, [(_d = data.brandData) === null || _d === void 0 ? void 0 : _d.responseBody]);
73
+ React.useEffect(function () {
74
+ methods.setValue('links', __assign(__assign({}, links), { website: selectedBrandItem === null || selectedBrandItem === void 0 ? void 0 : selectedBrandItem.website }), { shouldValidate: true });
75
+ }, []);
76
+ React.useEffect(function () {
77
+ setIsOtherBrand(methods.getValues('selectedBrandItem').id === 'other');
78
+ setTimeout(function () {
79
+ methods.setValue('termAndConditionChecked', true, { shouldValidate: true });
80
+ }, 300);
81
+ }, [methods.getValues('selectedBrandItem')]);
66
82
  var brandErrChecks = !methods.formState.isValid || !!methods.formState.errors.brandName || !!error;
67
- var disabled = brandErrChecks || brandNameChecking || ((_e = (_d = data.brandData) === null || _d === void 0 ? void 0 : _d.responseBody) === null || _e === void 0 ? void 0 : _e.response_code) === '5';
68
- var showBrandList = ((_g = (((_f = data.brandData) === null || _f === void 0 ? void 0 : _f.brandList) || [])) === null || _g === void 0 ? void 0 : _g.length) > 0 && !isNewUser;
69
- return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandList, { show: showBrandList, list: ((_h = data.brandData) === null || _h === void 0 ? void 0 : _h.brandList) || [], onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); }, showTerms: function () { return setShowTermsCheck(true); }, hideTerms: function () { return setShowTermsCheck(false); } }), _jsx(BrandName, { show: !listActive, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(SocialMedia, { show: !listActive, sx: !showTermsCheck ? { mb: 0 } : {} }), _jsx(TAC, { show: !listActive && showTermsCheck }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('next') })) }))] })) })) }));
83
+ var disabled = brandErrChecks || brandNameChecking || ((_f = (_e = data.brandData) === null || _e === void 0 ? void 0 : _e.responseBody) === null || _f === void 0 ? void 0 : _f.response_code) === '5';
84
+ var isBrandListAvailable = !isNewUser && brandList.length > 0;
85
+ return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(BrandList, { show: isBrandListAvailable, list: brandList, onListOpen: function () { return setListActive(true); }, onListClose: function () { return setListActive(false); } }), _jsx(BrandName, { show: !listActive && isOtherBrand, brandNameChecking: brandNameChecking, fetchingBrandName: setBrandNameChecking }), _jsx(SocialMedia, { show: !listActive }), _jsx(TAC, { show: !listActive && isOtherBrand }), _jsx(Collapse, __assign({ in: !listActive, timeout: 500 }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, error: t(error || ''), loading: loading }, { children: t('next') })) }))] })) })) }));
70
86
  };
71
87
  export default React.memo(Merchant);
@@ -60,9 +60,10 @@ var SocialMedia = function (_a) {
60
60
  var show = _a.show, sx = _a.sx;
61
61
  var _e = React.useState(SocialMediaTypes.WEB), socialMediaType = _e[0], setSocialMediaType = _e[1];
62
62
  var t = useTranslation().t;
63
- var control = useFormContext().control;
63
+ var _f = useFormContext(), control = _f.control, setValue = _f.setValue, watch = _f.watch;
64
64
  var linksControl = useController({ control: control, name: 'links' });
65
65
  var links = linksControl.field.value;
66
+ var brandName = watch('brandName');
66
67
  var handleChange = function (_a) {
67
68
  var _b;
68
69
  var target = _a.target;
@@ -72,6 +73,28 @@ var SocialMedia = function (_a) {
72
73
  var _a;
73
74
  linksControl.field.onChange(__assign(__assign({}, links), (_a = {}, _a[socialMediaType] = '', _a)));
74
75
  };
76
+ var handleBlueWebsite = function () {
77
+ if (!!links.website) {
78
+ var website = links.website;
79
+ var isWebHasPrefix = !!website.includes('www.');
80
+ var isWebHasSuffix = !!website.includes('.com');
81
+ if (!isWebHasPrefix)
82
+ website = "www.".concat(website);
83
+ if (!isWebHasSuffix)
84
+ website = "".concat(website, ".com");
85
+ setValue('links', __assign(__assign({}, links), { website: website }), { shouldValidate: true });
86
+ }
87
+ };
88
+ React.useEffect(function () {
89
+ if (!!brandName) {
90
+ var website = "www.".concat(brandName.replace(' ', '-'), ".com");
91
+ setValue('links', __assign(__assign({}, links), { website: website }), { shouldValidate: true });
92
+ }
93
+ if (!brandName) {
94
+ var website = "other.com";
95
+ setValue('links', __assign(__assign({}, links), { website: website }), { shouldValidate: true });
96
+ }
97
+ }, [brandName]);
75
98
  var websiteValue = links.website || '';
76
99
  var twitterValue = links.twitter || '';
77
100
  var instagramValue = links.instagram || '';
@@ -79,8 +102,8 @@ var SocialMedia = function (_a) {
79
102
  var websiteError = (_b = errors === null || errors === void 0 ? void 0 : errors.website) === null || _b === void 0 ? void 0 : _b.message;
80
103
  var twitterError = (_c = errors === null || errors === void 0 ? void 0 : errors.twitter) === null || _c === void 0 ? void 0 : _c.message;
81
104
  var instagramError = (_d = errors === null || errors === void 0 ? void 0 : errors.instagram) === null || _d === void 0 ? void 0 : _d.message;
82
- return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: __assign({ mb: 3, direction: 'ltr' }, sx) }, { children: [_jsx(SocialMediaGroupStyled, { defaultValue: socialMediaType, exclusive: true, onChange: function (e, value) {
105
+ return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, __assign({ sx: __assign({ mt: 3, mb: 3, direction: 'ltr' }, sx) }, { children: [_jsx(SocialMediaGroupStyled, { defaultValue: socialMediaType, exclusive: true, onChange: function (e, value) {
83
106
  setSocialMediaType(value);
84
- } }), _jsx(Collapse, __assign({ in: socialMediaType === SocialMediaTypes.WEB, timeout: 300 }, { children: _jsx(InputStyled, { onChange: handleChange, value: websiteValue, startAdornment: _jsx(TextStyled, { children: "https://" }), placeholder: t('signup_website_placeholder'), warningType: 'alert', warningMessage: websiteError && t(websiteError), endAdornment: !websiteError && websiteValue ? _jsx(CheckIcon, {}) : websiteValue && _jsx(ClearIconStyled, { onClick: handleClear }) }) })), _jsx(Collapse, __assign({ in: socialMediaType === SocialMediaTypes.TWITTER, timeout: 300 }, { children: _jsx(InputStyled, { onChange: handleChange, value: twitterValue, startAdornment: _jsx(TextStyled, { children: "@" }), placeholder: t('signup_twitter_placeholder'), warningType: 'alert', warningMessage: twitterError && t(twitterError), endAdornment: !twitterError && twitterValue ? _jsx(CheckIcon, {}) : twitterValue && _jsx(ClearIconStyled, { onClick: handleClear }) }) })), _jsx(Collapse, __assign({ in: socialMediaType === SocialMediaTypes.INSTAGRAM, timeout: 300 }, { children: _jsx(InputStyled, { onChange: handleChange, value: instagramValue, startAdornment: _jsx(TextStyled, { children: "@" }), placeholder: t('signup_instagram_placeholder'), warningType: 'alert', warningMessage: instagramError && t(instagramError), endAdornment: !instagramError && instagramValue ? (_jsx(CheckIcon, {})) : (instagramValue && _jsx(ClearIconStyled, { onClick: handleClear })) }) }))] })) })));
107
+ } }), _jsx(Collapse, __assign({ in: socialMediaType === SocialMediaTypes.WEB, timeout: 300 }, { children: _jsx(InputStyled, { onChange: handleChange, value: websiteValue, onBlur: function () { return handleBlueWebsite(); }, startAdornment: _jsx(TextStyled, { children: "https://" }), placeholder: t('signup_website_placeholder'), warningType: 'alert', warningMessage: websiteError && t(websiteError), endAdornment: !websiteError && websiteValue ? _jsx(CheckIcon, {}) : websiteValue && _jsx(ClearIconStyled, { onClick: handleClear }) }) })), _jsx(Collapse, __assign({ in: socialMediaType === SocialMediaTypes.TWITTER, timeout: 300 }, { children: _jsx(InputStyled, { onChange: handleChange, value: twitterValue, startAdornment: _jsx(TextStyled, { children: "@" }), placeholder: t('signup_twitter_placeholder'), warningType: 'alert', warningMessage: twitterError && t(twitterError), endAdornment: !twitterError && twitterValue ? _jsx(CheckIcon, {}) : twitterValue && _jsx(ClearIconStyled, { onClick: handleClear }) }) })), _jsx(Collapse, __assign({ in: socialMediaType === SocialMediaTypes.INSTAGRAM, timeout: 300 }, { children: _jsx(InputStyled, { onChange: handleChange, value: instagramValue, startAdornment: _jsx(TextStyled, { children: "@" }), placeholder: t('signup_instagram_placeholder'), warningType: 'alert', warningMessage: instagramError && t(instagramError), endAdornment: !instagramError && instagramValue ? (_jsx(CheckIcon, {})) : (instagramValue && _jsx(ClearIconStyled, { onClick: handleClear })) }) }))] })) })));
85
108
  };
86
109
  export default React.memo(SocialMedia);
@@ -1,6 +1,6 @@
1
1
  import * as yup from 'yup';
2
- export declare const MerchantValidationSchema: (termsIsRequired: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
3
- brandName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
2
+ export declare const MerchantValidationSchema: (isOtherBrand: boolean) => yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
3
+ brandName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
4
4
  termAndConditionChecked: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, boolean | undefined>;
5
5
  links: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
6
6
  website: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
@@ -16,7 +16,7 @@ export declare const MerchantValidationSchema: (termsIsRequired: boolean) => yup
16
16
  twitter: yup.StringSchema<string | null | undefined, import("yup/lib/types").AnyObject, string | null | undefined>;
17
17
  }>>>;
18
18
  }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
19
- brandName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
19
+ brandName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
20
20
  termAndConditionChecked: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, boolean | undefined>;
21
21
  links: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
22
22
  website: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
@@ -32,7 +32,7 @@ export declare const MerchantValidationSchema: (termsIsRequired: boolean) => yup
32
32
  twitter: yup.StringSchema<string | null | undefined, import("yup/lib/types").AnyObject, string | null | undefined>;
33
33
  }>>>;
34
34
  }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
35
- brandName: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
35
+ brandName: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
36
36
  termAndConditionChecked: yup.BooleanSchema<boolean | undefined, import("yup/lib/types").AnyObject, boolean | undefined>;
37
37
  links: yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
38
38
  website: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
@@ -1,13 +1,15 @@
1
1
  import { REGEX_WEBSITE } from '../../../../constants';
2
2
  import * as yup from 'yup';
3
- export var MerchantValidationSchema = function (termsIsRequired) {
3
+ export var MerchantValidationSchema = function (isOtherBrand) {
4
4
  return yup.object().shape({
5
- brandName: yup
6
- .string()
7
- .min(3, 'enter_brand_name_english_chars_numbers_space')
8
- .max(250, 'enter_brand_name_english_chars_numbers_space')
9
- .required('enter_valid_brand_name'),
10
- termAndConditionChecked: termsIsRequired
5
+ brandName: isOtherBrand
6
+ ? yup
7
+ .string()
8
+ .min(3, 'enter_brand_name_english_chars_numbers_space')
9
+ .max(250, 'enter_brand_name_english_chars_numbers_space')
10
+ .required('enter_valid_brand_name')
11
+ : yup.string().optional(),
12
+ termAndConditionChecked: isOtherBrand
11
13
  ? yup.boolean().required().isTrue('check_terms_cond')
12
14
  : yup.boolean().optional(),
13
15
  links: yup.object().shape({
@@ -116,7 +116,7 @@ var MobileNumber = React.forwardRef(function (_a, ref) {
116
116
  setValue('mobile', '');
117
117
  countryCodeControl.field.onChange(country);
118
118
  };
119
- 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: requiredLen }, type: 'tel', 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(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '0|5' }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
119
+ 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: requiredLen }, type: 'tel', 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(isSA ? '5' : '0', "00000000"), warningType: 'alert', warningMessage: error && t(error, { length: requiredLen, number: '05|5' }) }), _jsx(Collapse, __assign({ in: !!anchorEl }, { children: _jsx(SimpleList, { searchKeyPath: 'name.english', list: countriesCode, onSelectItem: onSelectItem, renderItem: function (item) {
120
120
  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, {})] }));
121
121
  } }) }))] })) })));
122
122
  });