@tap-payments/auth-jsconnect 1.0.10 → 1.0.14

package/build/components/DatePicker/DatePicker.js

@@ -33,19 +33,19 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { scrollDown, scrollUp } from '../../utils';
 import Input from '../Input';
-import './customStyle.css';
 import Text from '../Text';
+import './customStyle.css';
 var ContainerIcon = styled(CalendarTodayOutlined)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({ paddingInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: 'pointer' }));
+    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: 'pointer', width: theme.spacing(2.5), height: theme.spacing(2.5) }));
 });
 var ExpandMore = styled(ExpandMoreIcon)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({ paddingInlineEnd: theme.spacing(2) }, theme.typography.h6), { display: 'flex' }));
+    return (__assign(__assign({ marginInlineEnd: theme.spacing(2) }, theme.typography.h6), { display: 'flex', width: theme.spacing(2.5), height: theme.spacing(2.5) }));
 });
 var ExpandLess = styled(ExpandLessIcon)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({ paddingInlineEnd: theme.spacing(2) }, theme.typography.h6), { display: 'flex' }));
+    return (__assign(__assign({ marginInlineEnd: theme.spacing(2) }, theme.typography.h6), { display: 'flex', width: theme.spacing(2.5), height: theme.spacing(2.5) }));
 });
 var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
@@ -71,7 +71,7 @@ var ArrowIcon = styled(Text, { shouldForwardProp: function (prop) { return prop
     });
 });
 var DatePicker = function (_a) {
-    var onDateChange = _a.onDateChange, disabled = _a.disabled, readOnly = _a.readOnly, dir = _a.dir, defaultValue = _a.defaultValue, rest = __rest(_a, ["onDateChange", "disabled", "readOnly", "dir", "defaultValue"]);
+    var onDateChange = _a.onDateChange, disabled = _a.disabled, readOnly = _a.readOnly, onClick = _a.onClick, onDatePicked = _a.onDatePicked, dir = _a.dir, defaultValue = _a.defaultValue, rest = __rest(_a, ["onDateChange", "disabled", "readOnly", "onClick", "onDatePicked", "dir", "defaultValue"]);
     var _b = useState(), date = _b[0], setDate = _b[1];
     var _c = React.useState(null), anchor = _c[0], setAnchor = _c[1];
     useEffect(function () {
@@ -87,11 +87,13 @@ var DatePicker = function (_a) {
     var toggleCalender = function (event) {
         var elementId = 'animation-flow-template-content';
         if (anchor) {
+            onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
             setTimeout(function () { return scrollDown(elementId); }, 500);
             return setAnchor(null);
         }
         setAnchor(event.currentTarget);
         setTimeout(function () { return scrollUp(elementId); }, 550);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
     var formattedDate = function (date) {
         return new Date(date).toLocaleDateString('en-CA');
@@ -100,6 +102,7 @@ var DatePicker = function (_a) {
         setDate(date);
         onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(formattedDate(date));
         setAnchor(null);
+        onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
     };
     return (_jsxs(Container, __assign({ disabled: disabled, id: 'container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: disabled ? '' : arrowIcon })), value: date ? formattedDate(date) : '', placeholder: 'YYYY-MM-DD', onClick: function (e) {
                     if (!disabled)

package/build/components/Loader/Loader.js

@@ -20,8 +20,8 @@ var RootStyled = styled('div')(function () { return ({
     },
     position: 'relative',
     margin: '0px auto',
-    width: '40px',
-    height: '40px'
+    width: '38px',
+    height: '38px'
 }); });
 var LoaderBoxStyled = styled('svg')(function (_a) {
     var size = _a.size;

package/build/components/Radio/Radio.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { RadioProps } from '@mui/material/Radio';
+export type { RadioProps };
+declare const _default: React.MemoExoticComponent<(props: RadioProps) => JSX.Element>;
+export default _default;

package/build/components/Radio/Radio.js

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Radio from '@mui/material/Radio';
+var RadioStyled = styled(Radio)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ padding: theme.spacing(0), height: theme.spacing(4.375), width: theme.spacing(4.375) }, theme.typography.caption), { fontWeight: theme.typography.fontWeightMedium, fontStretch: 'normal', fontStyle: 'normal', letterSpacing: 'normal', color: theme.palette.secondary.dark, '& .MuiSvgIcon-root': {
+            fontSize: theme.spacing(3),
+            width: theme.spacing(3),
+            height: theme.spacing(3)
+        }, '&.MuiRadio-colorPrimary': {
+            '&.Mui-checked': {
+                color: theme.palette.success.dark
+            }
+        } }));
+});
+var RadioComponent = function (props) {
+    return (_jsx(RadioStyled, __assign({ color: 'primary', disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, focusRipple: false }, props)));
+};
+export default React.memo(RadioComponent);

package/build/components/Radio/index.d.ts

@@ -0,0 +1,3 @@
+import Radio, { RadioProps } from './Radio';
+export type { RadioProps };
+export default Radio;

package/build/components/Radio/index.js

@@ -0,0 +1,2 @@
+import Radio from './Radio';
+export default Radio;

package/build/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { RadioGroupProps } from '@mui/material/RadioGroup';
+export type { RadioGroupProps };
+declare const _default: React.MemoExoticComponent<({ children, ...props }: RadioGroupProps) => JSX.Element>;
+export default _default;

package/build/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import RadioGroup from '@mui/material/RadioGroup';
+var RadioGroupStyled = styled(RadioGroup)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: '100%',
+        flexDirection: 'row',
+        display: 'flex',
+        direction: theme.direction,
+        marginInlineStart: theme.spacing(0.25)
+    });
+});
+var RadioGroupComponent = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return _jsx(RadioGroupStyled, __assign({}, props, { children: children }));
+};
+export default React.memo(RadioGroupComponent);

package/build/components/RadioGroup/index.d.ts

@@ -0,0 +1,3 @@
+import RadioGroup, { RadioGroupProps } from './RadioGroup';
+export type { RadioGroupProps };
+export default RadioGroup;

package/build/components/RadioGroup/index.js

@@ -0,0 +1,2 @@
+import RadioGroup from './RadioGroup';
+export default RadioGroup;

package/build/components/RadioLabel/RadioLabel.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface RadioLabelProps {
+    label: string;
+    value: string;
+}
+declare const _default: React.MemoExoticComponent<({ label, value }: RadioLabelProps) => JSX.Element>;
+export default _default;

package/build/components/RadioLabel/RadioLabel.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { styled, alpha } from '@mui/material/styles';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '../Radio';
+var RadioLabelStyled = styled(FormControlLabel)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: 'unset',
+        direction: theme.direction,
+        paddingInlineEnd: theme.spacing(0.625),
+        marginLeft: theme.direction === 'rtl' ? theme.spacing(2) : theme.spacing(-1.375),
+        marginRight: theme.direction === 'rtl' ? theme.spacing(-1.375) : theme.spacing(2),
+        '& .MuiFormControlLabel-label': __assign({ color: alpha(theme.palette.text.primary, 0.8) }, theme.typography.body2)
+    });
+});
+var RadioLabel = function (_a) {
+    var label = _a.label, value = _a.value;
+    var t = useTranslation().t;
+    return (_jsx(RadioLabelStyled, { value: value, control: _jsx(Radio, { color: 'primary', disableFocusRipple: true, disableRipple: true, disableTouchRipple: true, focusRipple: false }), label: t(label) }));
+};
+export default React.memo(RadioLabel);

package/build/components/RadioLabel/index.d.ts

@@ -0,0 +1,3 @@
+import RadioLabel, { RadioLabelProps } from './RadioLabel';
+export type { RadioLabelProps };
+export default RadioLabel;

package/build/components/RadioLabel/index.js

@@ -0,0 +1,2 @@
+import RadioLabel from './RadioLabel';
+export default RadioLabel;

package/build/constants/app.js

@@ -107,22 +107,34 @@ export var OWNER_SCREENS_NAVIGATION = [
     },
     {
         name: 'OWNER_ADDITIONAL_OWNER_INFO_STEP',
-        next: '',
+        next: 'OWNER_SUCCESS_STEP',
         prev: 'OWNER_SHOW_OWNER_INFO_STEP',
         order: 2
+    },
+    {
+        name: 'OWNER_SUCCESS_STEP',
+        next: '',
+        prev: 'OWNER_ADDITIONAL_OWNER_INFO_STEP',
+        order: 2
     }
 ];
 export var PASSWORD_SCREENS_NAVIGATION = [
     {
-        name: 'PASSWORD_NEW_PASSWORD_STEP',
-        next: '',
+        name: 'PASSWORD_CREATE_PASSWORD_STEP',
+        next: 'PASSWORD_SUCCESS_STEP',
         prev: '',
         order: 1
+    },
+    {
+        name: 'PASSWORD_SUCCESS_STEP',
+        next: '',
+        prev: 'PASSWORD_CREATE_PASSWORD_STEP',
+        order: 2
     }
 ];
 export var BANK_SCREENS_NAVIGATION = [
     {
-        name: 'BANK_DETAILS_STEP',
+        name: 'BANK_BANK_DETAILS_STEP',
         next: 'BANK_DETAILS_SUCCESS_STEP',
         prev: '',
         order: 1
@@ -130,13 +142,13 @@ export var BANK_SCREENS_NAVIGATION = [
     {
         name: 'BANK_DETAILS_SUCCESS_STEP',
         next: '',
-        prev: 'BANK_DETAILS_STEP',
+        prev: 'BANK_BANK_DETAILS_STEP',
         order: 2
     }
 ];
 export var TAX_SCREENS_NAVIGATION = [
     {
-        name: 'TAX_DETAILS_STEP',
+        name: 'TAX_TAX_DETAILS_STEP',
         next: 'TAX_DETAILS_SUCCESS_STEP',
         prev: '',
         order: 1
@@ -144,7 +156,7 @@ export var TAX_SCREENS_NAVIGATION = [
     {
         name: 'TAX_DETAILS_SUCCESS_STEP',
         next: '',
-        prev: 'TAX_DETAILS_STEP',
+        prev: 'TAX_TAX_DETAILS_STEP',
         order: 2
     }
 ];

package/build/constants/dummy.d.ts

@@ -336,3 +336,8 @@ export declare const SALES_CHANNELS: {
     nameEn: string;
     name: string;
 }[];
+export declare const SOURCE_OF_INCOME: {
+    id: number;
+    name: string;
+    nameEn: string;
+}[];

package/build/constants/dummy.js

@@ -6424,3 +6424,11 @@ export var SALES_CHANNELS = [
     { id: 4, nameEn: 'Social Media', name: 'مواقع تواصل اجتماعي' },
     { id: 5, nameEn: 'Call Center', name: 'مركز اتصال' }
 ];
+export var SOURCE_OF_INCOME = [
+    { id: 1, name: 'راتب', nameEn: 'Salary' },
+    { id: 2, name: 'تمويل', nameEn: 'Investment' },
+    { id: 3, name: 'ورث', nameEn: 'Inheritance / inherit' },
+    { id: 4, name: 'اسهم', nameEn: 'Stocks' },
+    { id: 5, name: 'تجارة', nameEn: 'Trading' },
+    { id: 6, name: 'غير ذلك', nameEn: 'Other' }
+];

package/build/features/bank/Bank.js

@@ -34,7 +34,7 @@ var Bank = memo(function (props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { children: _jsx(FeatureContainer, { children: bankFeatureScreens.map(function (_a, index) {
                     var Element = _a.element, name = _a.name;
                     var isActive = activeScreen.name === name;
-                    return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 600, exit: 400, appear: 600 } }, { children: _jsx(Element, {}) }), index));
+                    return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
                 }) }) })) })));
 });
 export function BankLib(props) {

package/build/features/bank/screens/BankDetails/BankName.js

@@ -22,6 +22,6 @@ var BankName = function () {
     var clearValue = function () {
         bankNameControl.field.onChange('');
     };
-    return (_jsx(FeatureStyled, { children: _jsx(Input, { label: t('bank_name_label'), placeholder: t('bank_name_label'), value: bankNameValue, required: true, endAdornment: !hasError && bankNameValue ? _jsx(CheckIcon, {}) : bankNameValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
+    return (_jsx(FeatureStyled, { children: _jsx(Input, { label: t('enter_bank_name'), placeholder: t('enter_bank_name_placeholder'), value: bankNameValue, required: true, endAdornment: !hasError && bankNameValue ? _jsx(CheckIcon, {}) : bankNameValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
 };
 export default BankName;

package/build/features/bank/screens/BankDetails/Beneficiary.js

@@ -14,13 +14,13 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var Beneficiary = function () {
-    var _a;
+    var _a, _b;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var beneficiaryControl = useController({ name: 'beneficiaryName', control: control });
     var beneficiaryValue = beneficiaryControl.field.value;
     var hasError = (_a = beneficiaryControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
-    var errorMessage = hasError ? t('beneficiary_error') : '';
+    var error = (_b = beneficiaryControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
     var handleBeneficiaryChange = function (_a) {
         var target = _a.target;
         var value = keepLettersAndSpace(target.value);
@@ -29,6 +29,6 @@ var Beneficiary = function () {
     var clearValue = function () {
         beneficiaryControl.field.onChange('');
     };
-    return (_jsx(FeatureStyled, { children: _jsx(Input, { label: t('beneficiary_name_label'), onChange: handleBeneficiaryChange, value: beneficiaryValue, placeholder: t('beneficiary_name_placeholder'), warningType: 'alert', warningMessage: errorMessage, required: true, endAdornment: !hasError && beneficiaryValue ? _jsx(CheckIcon, {}) : beneficiaryValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
+    return (_jsx(FeatureStyled, { children: _jsx(Input, { label: t('beneficiary_name'), onChange: handleBeneficiaryChange, value: beneficiaryValue, placeholder: t('beneficiary_name'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: !hasError && beneficiaryValue ? _jsx(CheckIcon, {}) : beneficiaryValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
 };
 export default Beneficiary;

package/build/features/bank/screens/BankDetails/IBAN.js

@@ -15,13 +15,13 @@ var FeatureStyled = styled(ScreenContainer)(function (_a) {
     });
 });
 var IBAN = function () {
-    var _a;
+    var _a, _b;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var ibanControl = useController({ name: 'iban', control: control });
     var ibanValue = ibanControl.field.value;
     var hasError = !!((_a = ibanControl.fieldState.error) === null || _a === void 0 ? void 0 : _a.message);
-    var errorMessage = hasError ? t('iban_error') : '';
+    var error = (_b = ibanControl.fieldState.error) === null || _b === void 0 ? void 0 : _b.message;
     var handleIbanChange = function (_a) {
         var target = _a.target;
         var value = removeAllOtherThanCharsAndNumber(target.value);
@@ -30,6 +30,6 @@ var IBAN = function () {
     var clearValue = function () {
         ibanControl.field.onChange('');
     };
-    return (_jsx(FeatureStyled, { children: _jsx(Input, { label: t('iban'), inputProps: { maxLength: MAX_IBAN_VALUE }, onChange: handleIbanChange, value: ibanValue, placeholder: 'SA44#########10', warningType: 'alert', warningMessage: errorMessage, required: true, endAdornment: !hasError && ibanValue ? _jsx(CheckIcon, {}) : ibanValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
+    return (_jsx(FeatureStyled, { children: _jsx(Input, { label: t('enter_iban'), inputProps: { maxLength: MAX_IBAN_VALUE }, onChange: handleIbanChange, value: ibanValue, placeholder: t('enter_iban_placeholder'), warningType: 'alert', warningMessage: error && t(error), required: true, endAdornment: !hasError && ibanValue ? _jsx(CheckIcon, {}) : ibanValue && _jsx(ClearIcon, { onClick: clearValue }) }) }));
 };
 export default IBAN;

package/build/features/bank/screens/BankDetails/validation.js

@@ -1,9 +1,14 @@
 import * as yup from 'yup';
 export var BankValidation = yup.object().shape({
-    iban: yup.string().min(16).max(34).required(''),
-    bankName: yup.string().required(),
+    iban: yup
+        .string()
+        .matches(/^[a-zA-Z]{2}\d{14,}$/g)
+        .min(16)
+        .max(34)
+        .required('alert_iban'),
+    bankName: yup.string().required('bank_name_required'),
     beneficiaryName: yup
         .string()
         .matches(/^([a-zA-Z0-9]+\s{1}[a-zA-Z0-9]{2,}|[a-zA-Z0-9]+\s{1}[a-zA-Z0-9]{1,}\s{1}[a-zA-Z0-9]{2,})$/g)
-        .required('')
+        .required('beneficiary_name_required')
 });

package/build/features/bank/screens/Success/Success.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface SuccessProps {
+}
+declare const _default: React.MemoExoticComponent<({}: SuccessProps) => JSX.Element>;
+export default _default;

package/build/features/bank/screens/Success/Success.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import SuccessScreen from '../../../shared/SuccessScreen';
+var Success = function (_a) {
+    var t = useTranslation().t;
+    var onSuccess = function () {
+        console.log('success');
+        alert('Account created successfully, please check your email');
+        alert("It's a fake message, plz wait us to integrate with the backend. <A.Sharkawy>");
+    };
+    return _jsx(SuccessScreen, { title: t('ide_successfully_updated_message'), onSuccess: onSuccess });
+};
+export default React.memo(Success);

package/build/features/bank/screens/Success/index.d.ts

@@ -0,0 +1,3 @@
+import Success, { SuccessProps } from './Success';
+export type { SuccessProps };
+export default Success;

package/build/features/bank/screens/Success/index.js

@@ -0,0 +1,2 @@
+import Success from './Success';
+export default Success;

package/build/features/business/Business.js

@@ -47,7 +47,7 @@ var Business = memo(function (props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(AnimationFlow, __assign({ open: open, breakpoint: 'sm', footer: _jsx(CustomFooter, {}) }, { children: _jsx(Container, { children: businessFeatureScreens.map(function (_a, index) {
                     var Element = _a.element, name = _a.name;
                     var isActive = activeScreen.name === name;
-                    return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 600, exit: 400, appear: 600 } }, { children: _jsx(Element, {}) }), index));
+                    return (_jsx(Collapse, __assign({ in: isActive, timeout: { enter: 1000, exit: 800 } }, { children: _jsx(Element, {}) }), index));
                 }) }) })) })));
 });
 export function BusinessLib(props) {

package/build/features/business/screens/Activities/Activities.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Box from '@mui/material/Box';
+import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import ActivitiesList from './ActivitiesList';
 import { useForm, FormProvider } from 'react-hook-form';
@@ -20,49 +20,18 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useTranslation } from 'react-i18next';
 import { ActivitiesValidationSchema } from './validation';
 import { handleNextScreenStep } from '../../../../app/settings';
-import { ACTIVITIES, ICONS_NAMES, SALES_CHANNELS } from '../../../../constants';
-import Button from '../../../../components/Button';
-import Loader from '../../../../components/Loader';
-import Icon from '../../../../components/Icon';
+import { ACTIVITIES, SALES_CHANNELS } from '../../../../constants';
+import Button from '../../../shared/Button';
 import SalesChannels from './SalesChannels';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        flexDirection: 'column',
-        direction: theme.direction
-    });
-});
+import { ScreenContainer } from '../../../shared/Containers';
+import Collapse from '../../../../components/Collapse';
+import OperationStartDate from './OperationStartDate';
 var FormStyled = styled(Form)(function () { return ({
     display: 'flex',
     flexDirection: 'column'
 }); });
-var ButtonContainer = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        margin: theme.spacing(5, 2.5, 2.5, 2.5)
-    });
-});
-var LoaderStyled = styled(Loader)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        marginInlineStart: theme.spacing(-6.25),
-        '& .loader-box-container': {
-            marginInlineStart: theme.spacing(2.5)
-        }
-    });
-});
-var IconStyled = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
-    var theme = _a.theme, isAr = _a.isAr;
-    return ({
-        width: theme.spacing(3),
-        height: theme.spacing(3),
-        paddingInlineStart: theme.spacing(1.5),
-        paddingInlineEnd: theme.spacing(0.5),
-        transform: isAr ? 'scaleX(-1)' : 'scaleX(1)'
-    });
-});
 var Activities = function () {
+    var _a = React.useState(false), collapse = _a[0], setCollapse = _a[1];
     var dispatch = useAppDispatch();
     var isAr = useLanguage().isAr;
     var t = useTranslation().t;
@@ -70,7 +39,8 @@ var Activities = function () {
         resolver: yupResolver(ActivitiesValidationSchema),
         defaultValues: {
             activities: [ACTIVITIES[0]],
-            salesChannels: [SALES_CHANNELS[0]]
+            salesChannels: [SALES_CHANNELS[0]],
+            operationStartDate: '2000-01-01'
         },
         mode: 'onChange'
     });
@@ -78,6 +48,10 @@ var Activities = function () {
         console.log('data', data);
         dispatch(handleNextScreenStep());
     };
-    return (_jsx(BoxStyled, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [!!ACTIVITIES && _jsx(ActivitiesList, {}), _jsx(SalesChannels, {}), _jsx(ButtonContainer, { children: _jsx(Button, __assign({ disabled: !methods.formState.isValid, type: 'submit', startIcon: _jsx(LoaderStyled, { innerColor: 'white', outerColor: 'white', size: 30 }), endIcon: _jsx(IconStyled, { isAr: isAr, src: ICONS_NAMES.WHITE_ARROW }) }, { children: t('next') })) })] })) })) }));
+    var handleCollapseOpenClose = function (flag) {
+        console.log('flag', flag);
+        setCollapse(flag);
+    };
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Collapse, __assign({ in: !collapse }, { children: [!!ACTIVITIES && _jsx(ActivitiesList, {}), _jsx(SalesChannels, {})] })), _jsx(OperationStartDate, { onDateClicked: handleCollapseOpenClose }), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(Button, __assign({ isAr: isAr, disabled: !methods.formState.isValid }, { children: t('next') })) }))] })) })) }));
 };
 export default Activities;

package/build/features/business/screens/Activities/ActivitiesList.js

@@ -129,7 +129,7 @@ var ActivitiesList = function (_a) {
     var getSelectedActivityFlag = function (item) {
         return controlValue === null || controlValue === void 0 ? void 0 : controlValue.find(function (activity) { return activity.id === (item === null || item === void 0 ? void 0 : item.id); });
     };
-    return (_jsxs(BoxStyled, { children: [_jsxs(InputLabelStyled, { children: [t(isCR ? 'activities' : 'category'), " ", _jsx(MandatoryStyled, { children: "*" })] }), _jsxs(Box, { children: [_jsx(InputStyled, { readOnly: true, value: getSelectedActivities(), onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: activitiesMenuList, onSelectItem: onSelectItem, renderItem: function (item) {
+    return (_jsxs(BoxStyled, { children: [_jsxs(InputLabelStyled, { children: [t(isCR ? 'activities' : 'category'), " ", _jsx(MandatoryStyled, { children: "*" })] }), _jsxs(Box, { children: [_jsx(InputStyled, { readOnly: true, value: getSelectedActivities(), placeholder: isCR ? t('choose_activities') : t('category_name'), onClick: !!anchorEl ? function () { return onCloseList(); } : onOpenList, endAdornment: _jsx(ExpandIcon, { anchorEl: anchorEl }) }), _jsx(Collapse, __assign({ in: !!anchorEl, timeout: 300 }, { children: _jsx(SimpleListStyled, { searchKeyPath: 'name', list: activitiesMenuList, onSelectItem: onSelectItem, renderItem: function (item) {
                                 return (_jsxs(_Fragment, { children: [_jsx(Box, __assign({ display: 'flex' }, { children: _jsx(NameContainer, __assign({ isSelected: (item === null || item === void 0 ? void 0 : item.id) === getSelectedActivityFlag(item) }, { children: isAr ? item === null || item === void 0 ? void 0 : item.name : item === null || item === void 0 ? void 0 : item.nameEn })) })), getSelectedActivityFlag(item) && _jsx(CheckIconStyled, {})] }));
                             } }) }))] })] }));
 };

package/build/features/business/screens/Activities/OperationStartDate.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface OperationStartDateProps {
+    onDateClicked?: (flag: boolean) => void;
+}
+declare const OperationStartDate: ({ onDateClicked }: OperationStartDateProps) => JSX.Element;
+export default OperationStartDate;

package/build/features/business/screens/Activities/OperationStartDate.js

@@ -0,0 +1,31 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputLabelStyled } from './ActivitiesList';
+import { useTranslation } from 'react-i18next';
+import { useController, useFormContext } from 'react-hook-form';
+import DatePicker from '../../../../components/DatePicker';
+import { ScreenContainer } from '../../../../features/shared/Containers';
+import { MandatoryStyled } from './SalesChannels';
+var OperationStartDate = function (_a) {
+    var _b;
+    var onDateClicked = _a.onDateClicked;
+    var t = useTranslation().t;
+    var control = useFormContext().control;
+    var oDateControl = useController({ control: control, name: 'operationStartDate' });
+    var handleOperationStartDateChange = function (data) {
+        oDateControl.field.onChange(data);
+    };
+    var dateValue = (_b = oDateControl === null || oDateControl === void 0 ? void 0 : oDateControl.field) === null || _b === void 0 ? void 0 : _b.value;
+    return (_jsxs(ScreenContainer, __assign({ sx: { mb: 5 } }, { children: [_jsxs(InputLabelStyled, { children: [t('business_start_date'), _jsx(MandatoryStyled, { children: "*" })] }), _jsx(DatePicker, { readOnly: true, defaultValue: dateValue ? new Date(dateValue) : new Date(), dir: 'ltr', locale: 'en', onClick: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true); }, onDatePicked: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false); }, onDateChange: handleOperationStartDateChange })] })));
+};
+export default OperationStartDate;

package/build/features/business/screens/Activities/SalesChannels.js

@@ -30,14 +30,7 @@ import { SALES_CHANNELS } from '../../../../constants';
 import CheckBox from '../../../../components/CheckBox';
 import Warning from '../../../../components/Warning';
 import Collapse from '../../../../components/Collapse';
-var BoxStyled = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        flexDirection: 'column',
-        direction: theme.direction
-    });
-});
+import { ScreenContainer } from '../../../shared/Containers';
 var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return (__assign({ margin: theme.spacing(2.5, 2.5, 0.5, 2.5), color: alpha(theme.palette.text.primary, 0.4) }, theme.typography.caption));
@@ -76,7 +69,7 @@ export var MandatoryStyled = styled('span')(function (_a) {
 export var CollapseStyled = styled(Collapse)(function (_a) {
     var theme = _a.theme;
     return ({
-        marginBlockStart: theme.spacing(1)
+        marginBlockStart: theme.spacing(2)
     });
 });
 var SalesChannels = function () {
@@ -102,6 +95,6 @@ var SalesChannels = function () {
         if (channelsChecked)
             return !!(channelsChecked === null || channelsChecked === void 0 ? void 0 : channelsChecked.find(function (channel) { return channel.id === (item === null || item === void 0 ? void 0 : item.id); }));
     };
-    return (_jsxs(BoxStyled, { children: [_jsxs(InputLabelStyled, { children: [t('channel_of_service'), " ", _jsx(MandatoryStyled, { children: "*" })] }), channelsMenuList.map(function (channel) { return (_jsxs(ContainerStyled, { children: [_jsx(CheckBoxStyled, { id: channel.id.toString(), disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: getSelectedChannelsFlag(channel), onChange: handleSalesChannelChange }), _jsxs(TextStyled, { children: [isAr ? channel.name : channel.nameEn, " "] })] }, channel.id)); }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: warningMessage })) }))] }));
+    return (_jsxs(ScreenContainer, { children: [_jsxs(InputLabelStyled, { children: [t('channel_of_service'), " ", _jsx(MandatoryStyled, { children: "*" })] }), channelsMenuList.map(function (channel) { return (_jsxs(ContainerStyled, { children: [_jsx(CheckBoxStyled, { id: channel.id.toString(), disableRipple: true, disableFocusRipple: true, focusRipple: false, checked: getSelectedChannelsFlag(channel), onChange: handleSalesChannelChange }), _jsxs(TextStyled, { children: [isAr ? channel.name : channel.nameEn, " "] })] }, channel.id)); }), _jsx(CollapseStyled, __assign({ in: !!warningMessage }, { children: _jsx(Warning, __assign({ warningType: 'alert' }, { children: t(warningMessage) })) }))] }));
 };
 export default SalesChannels;