@tap-payments/auth-jsconnect 1.0.9 → 1.0.13

package/build/@types/app.d.ts

@@ -97,4 +97,9 @@ export interface SalesChannel {
     name: string;
     nameEn: string;
 }
+export interface SourceOfIncome {
+    id: number;
+    name: string;
+    nameEn: string;
+}
 export {};

package/build/assets/locales/ar.json

@@ -1,17 +1,20 @@
 {
     "language": "العربية",
     "locale": "ar",
-    "follow_us": "Follow us",
-    "business_country_label": "Business Country",
-    "business_country_placeholder": "Select Business Country",
+    "follow_us": "تابعنا",
+    "switch_language_label": "English",
+    "business_country_label": "بلد التجارة",
+    "business_country_placeholder": "الرجاء تحديد مقر تجارتك",
     "id_number_label": "رقم الهوية",
-    "switch_to_mobile": "Switch to mobile number",
-    "mobile_id_title": "Welcome to Tap Payments",
-    "mobile_id_description": "Help us to get your information to start collecting online payments",
-    "mobile_number_label": "Mobile number",
+    "id_number_label_error": "الرجاء التحقق من رقم الهوية الذي تم إدخاله",
+    "switch_to_mobile": "التحويل إلى رقم الهاتف",
+    "mobile_id_title": "اهلاً بك في تاب للمدفوعات",
+    "mobile_id_description": "ساعدنا في الحصول على معلوماتك لبدء تحصيل المدفوعات عبر الإنترنت",
+    "mobile_number_label": "رقم الجوال",
+    "mobile_number_error": "يرجى التحقق من الرقم المُدخل.",
     "switch_to_id": "Switch to ID number",
     "date_of_birth": "تاريخ الميلاد",
-    "ide_opt_sent_title": "تم إرسال رقم التحقق إلى ",
+    "otp_sent_title": "تم إرسال رقم التحقق إلى ",
     "signup_merchant_name_label": "الاسم بالكامل",
     "signup_enter_email": "البريد الإلكتروني",
     "signin_email_placeholder": "بريدك الالكتروني",
@@ -52,7 +55,9 @@
     "activities": "الانشطة",
     "activities_selected": "انشطة مختارة",
     "category": "الفئة",
-    "channel_of_service": "قنوات الخدمة",
+    "channel_of_service_label": "ما هي قنوات البيع الخاصة بك؟",
+    "channel_of_service_error": "الرجاء تحديد قناة واحدة على الأقل.",
+    "operation_start_date": "تاريخ بدء العمل",
     "vat_id_label": "الرقم الضريبي",
     "success_message": "تم إنشاء حسابك بنجاح! ",
     "iban": "ايبان",
@@ -78,5 +83,16 @@
     "password_lower": "يجب ان يحتوي على الاقل حرف واحد صغير.",
     "password_special": "يجب على الاقل ان يحتوي على رمز مميز.",
     "notify_strong_password": "رائع لديك كلمة سر قوية!",
-    "bank_name_label": "اسم البنك"
+    "bank_name_label": "اسم البنك",
+    "yes": "نعم",
+    "no": "لا",
+    "is_close_relative_in_pep_label": "هل أنت أو أحد أقاربك شخص معرض سياسيا؟",
+    "are_you_an_influencer": "هل أنت شخص مؤثر؟",
+    "monthly_income_label": "الدخل الشهري (ريال سعودي)",
+    "employer_name_label": "اسم الشركة الموظِفة",
+    "employer_name_placeholder": "Name",
+    "employer_location_label": "دولة الشركة الموظِفة",
+    "employer_location_placeholder": "- Please select -",
+    "source_of_income_label": "مصدر الدخل",
+    "source_of_income_placeholder": "What is the source for your income?"
 }

package/build/assets/locales/en.json

@@ -1,17 +1,20 @@
 {
-    "language": "English",
+    "language": "english",
     "locale": "en",
     "follow_us": "Follow us",
+    "switch_language_label": "العربية",
     "business_country_label": "Business Country",
     "business_country_placeholder": "Select Business Country",
     "id_number_label": "ID number",
+    "id_number_label_error": "May you please verify the entered identification number.",
     "switch_to_mobile": "Switch to mobile number",
     "mobile_id_title": "Welcome to Tap Payments",
     "mobile_id_description": "Help us to get your information to start collecting online payments",
     "mobile_number_label": "Mobile Number",
+    "mobile_number_error": "May you please verify the entered mobile.",
     "switch_to_id": "Switch to ID number",
     "date_of_birth": "Date of Birth",
-    "ide_opt_sent_title": "OTP has been sent to ",
+    "otp_sent_title": "OTP has been sent to ",
     "signup_merchant_name_label": "Full Name",
     "signup_enter_email": "Enter Email",
     "signin_email_placeholder": "Your E-mail",
@@ -49,10 +52,12 @@
     "freelance_license_placeholder": "Choose License",
     "company_license_label": "Commercial Registration",
     "company_license_placeholder": "Choose License",
-    "activities": "Activities",
+    "activities": "Business activities",
     "activities_selected": "Activities selected",
     "category": "category",
-    "channel_of_service": "Channel of Service",
+    "channel_of_service_label": "What are your sales channels?",
+    "channel_of_service_error": "Please select at least a channel.",
+    "operation_start_date": "When did you start your business?",
     "vat_id_label": "Tax Identification Number (TIN)",
     "success_message": "Your account has been created successfully! ",
     "iban": "Please Enter the IBAN",
@@ -78,5 +83,16 @@
     "password_lower": "Includes at least 1 lowercase character.",
     "password_special": "Includes at least 1 special character. (!@#%)",
     "notify_strong_password": "Awesome! You have a secure password.",
-    "bank_name_label": "Bank Name"
+    "bank_name_label": "Bank Name",
+    "yes": "Yes",
+    "no": "No",
+    "is_close_relative_in_pep_label": "Are You Or Any Of Your Relatives Politically Exposed Persons?",
+    "are_you_an_influencer": "Are You A Person Who Is Considered An Influencer?",
+    "monthly_income_label": "What Is Your Monthly Income?",
+    "employer_name_label": "Employer Name",
+    "employer_name_placeholder": "Name",
+    "employer_location_label": "What Is The Location Of Your Employer?",
+    "employer_location_placeholder": "- Please select -",
+    "source_of_income_label": "Source Of Income",
+    "source_of_income_placeholder": "What is the source for your income?"
 }

package/build/components/AnimationFlow/Dialog.js

@@ -52,7 +52,18 @@ var DialogContentStyled = styled(DialogContent)(function (_a) {
     var theme = _a.theme;
     return ({
         padding: theme.spacing(0),
-        width: '100%'
+        width: '100%',
+        '&::-webkit-scrollbar': {
+            width: '0px'
+        },
+        '&::-webkit-scrollbar-track': {
+            boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
+            webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)'
+        },
+        '&::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(0,0,0,.1)',
+            outline: '1px solid slategrey'
+        }
     });
 });
 var LogoIconBoxStyled = styled(Box)(function (_a) {

package/build/components/DatePicker/DatePicker.d.ts

@@ -4,9 +4,11 @@ import 'react-calendar/dist/Calendar.css';
 import './customStyle.css';
 export interface DatePickerProps extends CalendarProps {
     onDateChange?: (date: string) => void;
+    onClick?: () => void;
+    onDatePicked?: () => void;
     disabled?: boolean;
     readOnly?: boolean;
     dir?: string;
 }
-declare const _default: React.MemoExoticComponent<({ onDateChange, disabled, readOnly, dir, defaultValue, ...rest }: DatePickerProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onDateChange, disabled, readOnly, onClick, onDatePicked, dir, defaultValue, ...rest }: DatePickerProps) => JSX.Element>;
 export default _default;

package/build/components/DatePicker/DatePicker.js

@@ -33,8 +33,8 @@ 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' }));
@@ -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/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

@@ -114,7 +114,7 @@ export var OWNER_SCREENS_NAVIGATION = [
 ];
 export var PASSWORD_SCREENS_NAVIGATION = [
     {
-        name: 'PASSWORD_NEW_PASSWORD_STEP',
+        name: 'PASSWORD_CREATE_PASSWORD_STEP',
         next: '',
         prev: '',
         order: 1
@@ -122,29 +122,17 @@ export var PASSWORD_SCREENS_NAVIGATION = [
 ];
 export var BANK_SCREENS_NAVIGATION = [
     {
-        name: 'BANK_DETAILS_STEP',
-        next: 'BANK_DETAILS_SUCCESS_STEP',
+        name: 'BANK_BANK_DETAILS_STEP',
+        next: '',
         prev: '',
         order: 1
-    },
-    {
-        name: 'BANK_DETAILS_SUCCESS_STEP',
-        next: '',
-        prev: 'BANK_DETAILS_STEP',
-        order: 2
     }
 ];
 export var TAX_SCREENS_NAVIGATION = [
     {
-        name: 'TAX_DETAILS_STEP',
-        next: 'TAX_DETAILS_SUCCESS_STEP',
+        name: 'TAX_TAX_DETAILS_STEP',
+        next: '',
         prev: '',
         order: 1
-    },
-    {
-        name: 'TAX_DETAILS_SUCCESS_STEP',
-        next: '',
-        prev: '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/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/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('operation_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_label'), " ", _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;

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

@@ -38,6 +38,7 @@ export declare const ActivitiesValidationSchema: yup.ObjectSchema<import("yup/li
         name: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         nameEn: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     }>>[] | undefined>;
+    operationStartDate: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     activities: yup.ArraySchema<yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: yup.NumberSchema<number | undefined, import("yup/lib/types").AnyObject, number | undefined>;
@@ -77,6 +78,7 @@ export declare const ActivitiesValidationSchema: yup.ObjectSchema<import("yup/li
         name: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         nameEn: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     }>>[] | undefined>;
+    operationStartDate: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>, import("yup/lib/object").AssertsShape<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
     activities: yup.ArraySchema<yup.ObjectSchema<import("yup/lib/object").Assign<import("yup/lib/object").ObjectShape, {
         id: yup.NumberSchema<number | undefined, import("yup/lib/types").AnyObject, number | undefined>;
@@ -116,4 +118,5 @@ export declare const ActivitiesValidationSchema: yup.ObjectSchema<import("yup/li
         name: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
         nameEn: yup.StringSchema<string | undefined, import("yup/lib/types").AnyObject, string | undefined>;
     }>>[] | undefined>;
+    operationStartDate: import("yup/lib/string").RequiredStringSchema<string | undefined, import("yup/lib/types").AnyObject>;
 }>>>;