@tap-payments/auth-jsconnect 2.4.87-test → 2.4.88-test

package/build/assets/locales/ar.json

@@ -414,5 +414,7 @@
     "segment_profit_title": "الربح",
     "alert_choose_segment_location": "يُرجى تحديد الموقع",
     "alert_choose_segment_profit": "يُرجى تحديد الربح",
-    "alert_choose_segment_tech": "الرجاء تحديد التقنية"
+    "alert_choose_segment_tech": "الرجاء تحديد التقنية",
+    "switch_to_islamic_calendar": "التبديل إلى التقويم الهجرى",
+    "switch_to_gregorian_calendar": "التبديل إلى التقويم الميلادي"
 }

package/build/assets/locales/en.json

@@ -444,5 +444,7 @@
     "segment_profit_title": "Segment Profit",
     "alert_choose_segment_location": "Please select segment location",
     "alert_choose_segment_profit": "Please select segment profit",
-    "alert_choose_segment_tech": "Please select segment tech"
+    "alert_choose_segment_tech": "Please select segment tech",
+    "switch_to_islamic_calendar": "Switch to Islamic Calendar",
+    "switch_to_gregorian_calendar": "Switch to Gregorian Calendar"
 }

package/build/components/ArabicDatePicker/ArabicDatePicker.d.ts

@@ -2,12 +2,15 @@ import React from 'react';
 import { CalendarProps } from 'react-multi-date-picker';
 import './style.css';
 export interface DatePickerProps extends CalendarProps {
+    open?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
     dir?: string;
     onDateChange?: (date: string) => void;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    onClick?: () => void;
     onDatePicked?: () => void;
+    isDob?: boolean;
+    isVerified?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ disabled, dir, readOnly, onDateChange, onClick, onDatePicked, value, ...rest }: DatePickerProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ open, disabled, dir, readOnly, onDateChange, onClick, onDatePicked, value, isDob, isVerified, ...rest }: DatePickerProps) => JSX.Element>;
 export default _default;

package/build/components/ArabicDatePicker/ArabicDatePicker.js

@@ -25,23 +25,27 @@ import React, { memo } from 'react';
 import { Calendar, toDateObject } from 'react-multi-date-picker';
 import arabic from 'react-date-object/calendars/arabic';
 import arabic_ar from 'react-date-object/locales/arabic_ar';
+import arabic_en from 'react-date-object/locales/arabic_en';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import Divider from '@mui/material/Divider';
 import Collapse from '../Collapse';
-import ExpandIcon from '../ExpandIcon';
-import CalendarTodayOutlined from '@mui/icons-material/CalendarTodayOutlined';
+import Icon from '../Icon';
+import { ICONS_NAMES } from '../../constants';
+import { getEighteenYearsAgo } from '../../utils';
+import { EndAdornmentExpanded } from '../../features/shared/EndAdornment';
 import Input from '../Input';
 import Text from '../Text';
 import './style.css';
-var ContainerIcon = styled(CalendarTodayOutlined)(function (_a) {
-    var theme = _a.theme;
-    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: 'pointer', width: theme.spacing(2.5), height: theme.spacing(2.5) }));
+var ContainerIcon = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+    var theme = _a.theme, disabled = _a.disabled;
+    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: disabled ? 'auto' : 'pointer', width: theme.spacing(2), height: theme.spacing(2) }));
 });
 var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
     return ({
         cursor: disabled ? 'auto' : 'pointer',
+        opacity: disabled ? '0.6' : '1',
         fontFamily: theme.typography.fontFamily
     });
 });
@@ -51,7 +55,8 @@ var InputFieldStyled = styled(Input)(function (_a) {
         cursor: disabled ? 'auto' : 'pointer',
         '&::placeholder': __assign(__assign({ opacity: 1, color: theme.palette.text.primary, lineHeight: theme.spacing(2.125) }, theme.typography.body2), { fontWeight: theme.typography.fontWeightLight }),
         '& .MuiInputBase-input': {
-            WebkitTextFillColor: 'inherit'
+            WebkitTextFillColor: 'inherit',
+            cursor: disabled ? 'auto' : 'pointer'
         }
     });
 });
@@ -59,36 +64,48 @@ var ArrowIcon = styled(Text, { shouldForwardProp: function (prop) { return prop
     var theme = _a.theme, disabled = _a.disabled;
     return ({
         cursor: disabled ? 'auto' : 'pointer',
-        marginInlineEnd: theme.spacing(2.5)
+        marginInlineEnd: theme.spacing(2.5),
+        display: 'flex'
     });
 });
 var DatePicker = function (_a) {
-    var disabled = _a.disabled, dir = _a.dir, readOnly = _a.readOnly, onDateChange = _a.onDateChange, onClick = _a.onClick, onDatePicked = _a.onDatePicked, value = _a.value, rest = __rest(_a, ["disabled", "dir", "readOnly", "onDateChange", "onClick", "onDatePicked", "value"]);
-    var _b = React.useState(null), anchor = _b[0], setAnchor = _b[1];
-    var calenderIcon = _jsx(ContainerIcon, {});
+    var _b = _a.open, open = _b === void 0 ? false : _b, disabled = _a.disabled, dir = _a.dir, readOnly = _a.readOnly, onDateChange = _a.onDateChange, onClick = _a.onClick, onDatePicked = _a.onDatePicked, value = _a.value, isDob = _a.isDob, isVerified = _a.isVerified, rest = __rest(_a, ["open", "disabled", "dir", "readOnly", "onDateChange", "onClick", "onDatePicked", "value", "isDob", "isVerified"]);
+    var _c = React.useState(), date = _c[0], setDate = _c[1];
+    var _d = React.useState(null), anchor = _d[0], setAnchor = _d[1];
+    var _e = React.useState(open), openCalender = _e[0], setOpenCalender = _e[1];
+    var calenderIcon = _jsx(ContainerIcon, { disabled: disabled, src: ICONS_NAMES.SWITCH_HIJRI_CALENDER });
     var defaultMax = new Date();
     var defaultMin = new Date('1900-01-01');
     var DATE_FORMAT = 'YYYY-MM-DD';
+    React.useEffect(function () {
+        if (value)
+            setDate(value);
+    }, [value]);
     var toggleCalender = function (event) {
-        if (disabled)
-            return;
-        if (anchor) {
-            onDatePicked && onDatePicked();
-            setAnchor(null);
-            return;
+        if (anchor || openCalender) {
+            onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
+            setOpenCalender(false);
+            return setAnchor(null);
         }
         setAnchor(event.currentTarget);
-        onClick && onClick(event);
+        setOpenCalender(true);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    var getEndAdornment = function () {
+        if (disabled && !isVerified)
+            return '';
+        return _jsx(EndAdornmentExpanded, { isVerified: isVerified, anchorEl: anchor });
     };
     var handleOnDateChange = function (date) {
-        onDateChange && onDateChange(date.toDate().toLocaleDateString('en-CA'));
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(date.toDate().toLocaleDateString('en-CA'));
         setAnchor(null);
+        setOpenCalender(false);
         onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
     };
     var formateDate = function (date) {
         var dateObject = toDateObject(date);
         return dateObject.convert(arabic).format(DATE_FORMAT);
     };
-    return (_jsxs(Container, __assign({ disabled: disabled, id: 'container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: disabled ? '' : _jsx(ExpandIcon, { anchorEl: !!anchor }) })), value: value ? formateDate(value) : '', placeholder: DATE_FORMAT, onClick: toggleCalender, startAdornment: calenderIcon, disabled: !disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: !!anchor }, { children: [_jsx(Calendar, __assign({ calendar: arabic, locale: arabic_ar, maxDate: defaultMax, minDate: defaultMin, format: DATE_FORMAT, onChange: handleOnDateChange, value: value, className: 'custom-container' }, rest)), _jsx(Divider, {})] }))] })));
+    return (_jsxs(Container, __assign({ disabled: disabled, id: 'arabic-container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: getEndAdornment() })), value: date ? formateDate(date) : '', placeholder: DATE_FORMAT, onClick: toggleCalender, startAdornment: calenderIcon, disabled: !disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: openCalender }, { children: [_jsx(Calendar, __assign({ calendar: arabic, locale: dir === 'rtl' ? arabic_ar : arabic_en, maxDate: rest.maxDate || defaultMax, minDate: defaultMin, format: DATE_FORMAT, onChange: handleOnDateChange, value: date || (isDob ? new Date(getEighteenYearsAgo()) : undefined), className: 'custom-container' }, rest)), _jsx(Divider, {})] }))] })));
 };
 export default memo(DatePicker);

package/build/components/ArabicDatePicker/style.css

@@ -7,6 +7,9 @@
 .rmdp-day-picker > div {
 	width: 100%;
 }
+.rmdp-day {
+	color: #3a4154 !important;
+}
 
 .rmdp-calendar {
 	width: 100%;
@@ -22,3 +25,32 @@
 	color: #ffffff !important;
 	background-color: black !important;
 }
+
+.rmdp-week-day {
+	color: #abaeb6 !important;
+	font-weight: 400 !important;
+	font-size: 0.75em !important;
+	text-transform: uppercase;
+}
+.rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
+	background-color: #fafafa !important;
+	/* border-radius: 50%; */
+	color: #3a4154 !important;
+	/* background: radial-gradient(circle closest-side, #fafafa 0, #fafafa 98%, transparent 100%) !important; */
+}
+.rmdp-arrow-container:hover {
+	background-color: unset !important;
+	box-shadow: unset !important;
+}
+.rmdp-arrow {
+	border: solid #000 !important;
+	border-width: 0 1px 1px 0 !important;
+}
+.rmdp-day.rmdp-today span {
+	background-color: unset !important;
+	color: #000 !important;
+}
+.rmdp-header {
+	margin-bottom: 12px;
+	margin-top: 10px !important;
+}

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

@@ -3,6 +3,7 @@ import { CalendarProps } from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import './customStyle.css';
 export interface DatePickerProps extends CalendarProps {
+    open?: boolean;
     onDateChange?: (date: string) => void;
     onClick?: () => void;
     onDatePicked?: () => void;
@@ -12,5 +13,5 @@ export interface DatePickerProps extends CalendarProps {
     isDob?: boolean;
     isVerified?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ onDateChange, disabled, readOnly, onClick, onDatePicked, dir, defaultValue, isDob, isVerified, ...rest }: DatePickerProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onDateChange, disabled, readOnly, onClick, onDatePicked, dir, defaultValue, isDob, isVerified, open, ...rest }: DatePickerProps) => JSX.Element>;
 export default _default;

package/build/components/DatePicker/DatePicker.js

@@ -28,15 +28,16 @@ import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import Divider from '@mui/material/Divider';
 import Collapse from '../Collapse';
-import CalendarTodayOutlined from '@mui/icons-material/CalendarTodayOutlined';
+import Icon from '../Icon';
+import { ICONS_NAMES } from '../../constants';
 import { convertToEnglishDateFormat, getEighteenYearsAgo, scrollDown, scrollUp } from '../../utils';
 import { EndAdornmentExpanded } from '../../features/shared/EndAdornment';
 import Input from '../Input';
 import Text from '../Text';
 import './customStyle.css';
-var ContainerIcon = styled(CalendarTodayOutlined, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
+var ContainerIcon = styled(Icon, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
-    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: disabled ? 'auto' : 'pointer', width: theme.spacing(2.5), height: theme.spacing(2.5) }));
+    return (__assign(__assign({ marginInlineStart: theme.spacing(2.5) }, theme.typography.h6), { cursor: disabled ? 'auto' : 'pointer', width: theme.spacing(2.25), height: theme.spacing(2.25) }));
 });
 var Container = styled(Box, { shouldForwardProp: function (prop) { return prop !== 'disabled'; } })(function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
@@ -66,24 +67,27 @@ var ArrowIcon = styled(Text, { shouldForwardProp: function (prop) { return prop
     });
 });
 var DatePicker = function (_a) {
-    var onDateChange = _a.onDateChange, disabled = _a.disabled, readOnly = _a.readOnly, onClick = _a.onClick, onDatePicked = _a.onDatePicked, dir = _a.dir, defaultValue = _a.defaultValue, isDob = _a.isDob, isVerified = _a.isVerified, rest = __rest(_a, ["onDateChange", "disabled", "readOnly", "onClick", "onDatePicked", "dir", "defaultValue", "isDob", "isVerified"]);
+    var onDateChange = _a.onDateChange, disabled = _a.disabled, readOnly = _a.readOnly, onClick = _a.onClick, onDatePicked = _a.onDatePicked, dir = _a.dir, defaultValue = _a.defaultValue, isDob = _a.isDob, isVerified = _a.isVerified, open = _a.open, rest = __rest(_a, ["onDateChange", "disabled", "readOnly", "onClick", "onDatePicked", "dir", "defaultValue", "isDob", "isVerified", "open"]);
     var _b = useState(), date = _b[0], setDate = _b[1];
     var _c = React.useState(null), anchor = _c[0], setAnchor = _c[1];
+    var _d = React.useState(open), openCalender = _d[0], setOpenCalender = _d[1];
     useEffect(function () {
         if (defaultValue)
             setDate(defaultValue);
     }, [defaultValue]);
-    var calenderIcon = _jsx(ContainerIcon, { disabled: disabled });
+    var calenderIcon = _jsx(ContainerIcon, { disabled: disabled, src: ICONS_NAMES.SWITCH_CALENDER });
     var defaultMax = new Date();
     var defaultMin = new Date('1900-01-01');
     var toggleCalender = function (event) {
         var elementId = 'animation-flow-template-content';
-        if (anchor) {
+        if (anchor || openCalender) {
             onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
             setTimeout(function () { return scrollDown(elementId); }, 500);
+            setOpenCalender(false);
             return setAnchor(null);
         }
         setAnchor(event.currentTarget);
+        setOpenCalender(true);
         setTimeout(function () { return scrollUp(elementId); }, 550);
         onClick === null || onClick === void 0 ? void 0 : onClick();
     };
@@ -91,6 +95,7 @@ var DatePicker = function (_a) {
         setDate(date);
         onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(convertToEnglishDateFormat(date));
         setAnchor(null);
+        setOpenCalender(false);
         onDatePicked === null || onDatePicked === void 0 ? void 0 : onDatePicked();
     };
     var getEndAdornment = function () {
@@ -101,6 +106,6 @@ var DatePicker = function (_a) {
     return (_jsxs(Container, __assign({ disabled: disabled, id: 'container-calendar' }, { children: [_jsx(InputFieldStyled, { endAdornment: _jsx(ArrowIcon, __assign({ disabled: disabled }, { children: getEndAdornment() })), value: date ? convertToEnglishDateFormat(date) : '', placeholder: 'YYYY-MM-DD', onClick: function (e) {
                     if (!disabled)
                         toggleCalender(e);
-                }, startAdornment: calenderIcon, disabled: disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: !!anchor }, { children: [_jsx(Calendar, __assign({}, rest, { value: date || (isDob ? new Date(getEighteenYearsAgo()) : undefined), calendarType: 'Hebrew', onChange: handleOnDateChange, locale: rest.locale, maxDate: rest.maxDate || defaultMax, minDate: rest.minDate || defaultMin })), _jsx(Divider, {})] }))] })));
+                }, startAdornment: calenderIcon, disabled: disabled, readOnly: readOnly, dir: dir }), _jsxs(Collapse, __assign({ in: openCalender }, { children: [_jsx(Calendar, __assign({}, rest, { value: date || (isDob ? new Date(getEighteenYearsAgo()) : undefined), calendarType: 'Hebrew', onChange: handleOnDateChange, locale: rest.locale, maxDate: rest.maxDate || defaultMax, minDate: rest.minDate || defaultMin })), _jsx(Divider, {})] }))] })));
 };
 export default memo(DatePicker);

package/build/constants/assets.d.ts

@@ -72,6 +72,8 @@ export declare const ICONS_NAMES: {
     CLOSE_ICON: string;
     PACI_ICON: string;
     SIGNED_UP_SUCCESS: string;
+    SWITCH_HIJRI_CALENDER: string;
+    SWITCH_CALENDER: string;
     GMAIL_Filled_ICON: string;
     GMAIL_White_ICON: string;
     outlook_Filled_ICON: string;

package/build/constants/assets.js

@@ -72,6 +72,8 @@ export var ICONS_NAMES = {
     CLOSE_ICON: 'https://dash.b-cdn.net/icons/menu/close-btn.svg',
     PACI_ICON: 'https://dash.b-cdn.net/icons/menu/PACI-filled.svg',
     SIGNED_UP_SUCCESS: 'https://dash.b-cdn.net/icons/menu/signed_up_success.svg',
+    SWITCH_HIJRI_CALENDER: 'https://dash.b-cdn.net/icons/menu/switch_hijri_calender.svg',
+    SWITCH_CALENDER: 'https://dash.b-cdn.net/icons/menu/calender_icon.svg',
     GMAIL_Filled_ICON: 'https://dash.b-cdn.net/icons/menu/Gmail-filled.svg',
     GMAIL_White_ICON: 'https://dash.b-cdn.net/icons/menu/Gmail-white.svg',
     outlook_Filled_ICON: 'https://dash.b-cdn.net/icons/menu/Outlook-filled.svg',

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

@@ -33,11 +33,12 @@ var FormStyled = styled(Form)(function () { return ({
 var Activities = function () {
     var _a = React.useState(false), anchorEl = _a[0], setAnchorEl = _a[1];
     var _b = React.useState(false), collapse = _b[0], setCollapse = _b[1];
+    var _c = React.useState(false), isHijri = _c[0], setIsHijri = _c[1];
     var dispatch = useAppDispatch();
     var isAr = useLanguage().isAr;
     var t = useTranslation().t;
-    var _c = useAppSelector(businessSelector), data = _c.data, loading = _c.loading, error = _c.error;
-    var _d = data.activitiesData, activities = _d.activities, operationStartDate = _d.operationStartDate;
+    var _d = useAppSelector(businessSelector), data = _d.data, loading = _d.loading, error = _d.error;
+    var _e = data.activitiesData, activities = _e.activities, operationStartDate = _e.operationStartDate;
     var methods = useForm({
         resolver: yupResolver(ActivitiesValidationSchema),
         defaultValues: {
@@ -64,6 +65,6 @@ var Activities = function () {
         anchorEl ? setAnchorEl(false) : setAnchorEl(true);
     };
     var disabled = !methods.formState.isValid || !!error;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(LicenseName, {}) })), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(ActivitiesList, { onListOpen: function () { return handleMenuClick(); }, onListClose: function () { return handleMenuClick(); } }) })), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(OperationStartDate, { onDateClicked: handleCollapseOpenClose }) })), _jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(LicenseName, {}) })), _jsx(Collapse, __assign({ in: !collapse }, { children: _jsx(ActivitiesList, { onListOpen: function () { return handleMenuClick(); }, onListClose: function () { return handleMenuClick(); } }) })), _jsx(Collapse, __assign({ in: !anchorEl }, { children: _jsx(OperationStartDate, { isHijri: isHijri, onSwitchCalender: function (isHijri) { return setIsHijri(isHijri); }, onDateClicked: handleCollapseOpenClose }) })), _jsx(Collapse, __assign({ in: !collapse && !anchorEl }, { children: _jsx(Button, __assign({ disableBack: true, onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default Activities;

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

@@ -15,6 +15,8 @@ export declare const InputLabelStyled: import("@emotion/styled").StyledComponent
 export declare const MandatoryStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export interface OperationStartDateProps {
     onDateClicked?: (flag: boolean) => void;
+    isHijri?: boolean;
+    onSwitchCalender?: (isHijri: boolean) => void;
 }
-declare const OperationStartDate: ({ onDateClicked }: OperationStartDateProps) => JSX.Element;
+declare const OperationStartDate: ({ onDateClicked, isHijri, onSwitchCalender }: OperationStartDateProps) => JSX.Element;
 export default OperationStartDate;

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

@@ -12,12 +12,12 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
-import DatePicker from '../../../../components/DatePicker';
 import Text from '../../../../components/Text';
 import { ScreenContainer } from '../../../shared/Containers';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { businessSelector, clearError } from '../../../app/business/businessStore';
 import { alpha, styled } from '@mui/material/styles';
+import Calender from '../../../shared/Calender';
 export var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return (__assign({ margin: theme.spacing(2.5, 2.5, 1.5, 2.5), color: alpha(theme.palette.text.primary, 0.6) }, theme.typography.caption));
@@ -28,7 +28,7 @@ export var MandatoryStyled = styled('span')(function (_a) {
 });
 var OperationStartDate = function (_a) {
     var _b;
-    var onDateClicked = _a.onDateClicked;
+    var onDateClicked = _a.onDateClicked, isHijri = _a.isHijri, onSwitchCalender = _a.onSwitchCalender;
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
     var control = useFormContext().control;
@@ -40,6 +40,6 @@ var OperationStartDate = function (_a) {
         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, { children: [_jsxs(InputLabelStyled, { children: [t('business_start_date'), _jsx(MandatoryStyled, { children: "*" })] }), _jsx(DatePicker, { readOnly: true, defaultValue: dateValue ? new Date(dateValue) : undefined, 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 })] }));
+    return (_jsxs(ScreenContainer, { children: [_jsxs(InputLabelStyled, { children: [t('business_start_date'), _jsx(MandatoryStyled, { children: "*" })] }), _jsx(Calender, { isHijri: isHijri, onSwitchCalender: onSwitchCalender, defaultValue: dateValue ? new Date(dateValue) : undefined, onDateClicked: onDateClicked, onDateChange: handleOperationStartDateChange })] }));
 };
 export default OperationStartDate;

package/build/features/business/screens/IDBOD/DOB.js

@@ -16,8 +16,8 @@ import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { styled, alpha } from '@mui/material/styles';
 import Text from '../../../../components/Text';
-import DatePicker from '../../../../components/DatePicker';
 import { ScreenContainer } from '../../../shared/Containers';
+import Calender from '../../../shared/Calender';
 import { businessSelector, clearError } from '../../../app/business/businessStore';
 var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
@@ -40,6 +40,6 @@ var BOD = function (_a) {
     return (_jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
                         var spacing = _a.spacing;
                         return spacing(2.5, 2.5, 1.5, 2.5);
-                    } } }, { children: t('enter_birth_date') })), _jsx(DatePicker, { readOnly: true, defaultValue: dateValue ? new Date(dateValue) : undefined, dir: 'ltr', locale: 'en', isDob: true, 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: handleBirthDateChange })] }));
+                    } } }, { children: t('enter_birth_date') })), _jsx(Calender, { isDob: true, defaultValue: dateValue ? new Date(dateValue) : undefined, onDateClicked: onDateClicked, onDateChange: handleBirthDateChange })] }));
 };
 export default React.memo(BOD);

package/build/features/connect/screens/NID/DOB.js

@@ -14,10 +14,10 @@ import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { ScreenContainer } from '../../../shared/Containers';
-import DatePicker from '../../../../components/DatePicker';
 import { alpha, styled } from '@mui/material/styles';
-import { clearError, connectSelector } from '../../../app/connect/connectStore';
 import Text from '../../../../components/Text';
+import Calender from '../../../shared/Calender';
+import { clearError, connectSelector } from '../../../app/connect/connectStore';
 var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
@@ -42,6 +42,6 @@ var DOB = function (_a) {
     return (_jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
                         var spacing = _a.spacing;
                         return spacing(2.5, 2.5, 1.5, 2.5);
-                    } } }, { children: t('enter_birth_date') })), _jsx(DatePicker, { defaultValue: dateValue ? new Date(dateValue) : undefined, readOnly: true, dir: 'ltr', locale: 'en', isDob: true, onDateChange: handleBirthDateChange, onClick: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true); }, onDatePicked: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false); } })] }));
+                    } } }, { children: t('enter_birth_date') })), _jsx(Calender, { isDob: true, defaultValue: dateValue ? new Date(dateValue) : undefined, onDateClicked: onDateClicked, onDateChange: handleBirthDateChange })] }));
 };
 export default DOB;

package/build/features/connectExpress/screens/NID/DOB.js

@@ -14,10 +14,10 @@ import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { ScreenContainer } from '../../../shared/Containers';
-import DatePicker from '../../../../components/DatePicker';
 import { alpha, styled } from '@mui/material/styles';
 import { clearError, connectExpressSelector } from '../../../app/connectExpress/connectExpressStore';
 import Text from '../../../../components/Text';
+import Calender from '../../../shared/Calender';
 var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
@@ -42,6 +42,6 @@ var DOB = function (_a) {
     return (_jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
                         var spacing = _a.spacing;
                         return spacing(2.5, 2.5, 1.5, 2.5);
-                    } } }, { children: t('enter_birth_date') })), _jsx(DatePicker, { disabled: readOnly, defaultValue: dateValue ? new Date(dateValue) : undefined, readOnly: true, dir: 'ltr', locale: 'en', isDob: true, onDateChange: handleBirthDateChange, onClick: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true); }, onDatePicked: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false); } })] }));
+                    } } }, { children: t('enter_birth_date') })), _jsx(Calender, { isDob: true, disabled: readOnly, defaultValue: dateValue ? new Date(dateValue) : undefined, onDateClicked: onDateClicked, onDateChange: handleBirthDateChange })] }));
 };
 export default DOB;

package/build/features/connectExpress/screens/NIDMissed/DOB.js

@@ -14,10 +14,10 @@ import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { ScreenContainer } from '../../../shared/Containers';
-import DatePicker from '../../../../components/DatePicker';
 import { alpha, styled } from '@mui/material/styles';
 import { clearError, connectExpressSelector } from '../../../app/connectExpress/connectExpressStore';
 import Text from '../../../../components/Text';
+import Calender from '../../../shared/Calender';
 var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return (__assign(__assign({ color: alpha(theme.palette.text.primary, 0.6), fontWeight: theme.typography.fontWeightMedium }, theme.typography.caption), { lineHeight: theme.spacing(2.5) }));
@@ -42,6 +42,6 @@ var DOB = function (_a) {
     return (_jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
                         var spacing = _a.spacing;
                         return spacing(2.5, 2.5, 1.5, 2.5);
-                    } } }, { children: t('enter_birth_date') })), _jsx(DatePicker, { defaultValue: dateValue ? new Date(dateValue) : undefined, readOnly: true, dir: 'ltr', locale: 'en', isDob: true, onDateChange: handleBirthDateChange, onClick: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true); }, onDatePicked: function () { return onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false); } })] }));
+                    } } }, { children: t('enter_birth_date') })), _jsx(Calender, { isDob: true, defaultValue: dateValue ? new Date(dateValue) : undefined, onDateClicked: onDateClicked, onDateChange: handleBirthDateChange })] }));
 };
 export default DOB;

package/build/features/entity/screens/EntityName/EntityName.js

@@ -39,21 +39,23 @@ var FormStyled = styled(Form)(function () { return ({
 }); });
 var EntityName = function (_a) {
     var _b;
-    var _c = React.useState(false), issueAnchorEl = _c[0], setIssueAnchorEl = _c[1];
-    var _d = React.useState(false), expiryAnchorEl = _d[0], setExpiryAnchorEl = _d[1];
-    var _e = React.useState(false), entityTypeAnchorEl = _e[0], setEntityTypeAnchorEl = _e[1];
-    var _f = useAppSelector(entitySelector), data = _f.data, loading = _f.loading, error = _f.error, uploading = _f.uploading, uploadingArticle = _f.uploadingArticle;
+    var _c = React.useState(false), isHijriIssuingDate = _c[0], setIsHijriIssuingDate = _c[1];
+    var _d = React.useState(false), isHijriExpiryDate = _d[0], setIsHijriExpiryDate = _d[1];
+    var _e = React.useState(false), issueAnchorEl = _e[0], setIssueAnchorEl = _e[1];
+    var _f = React.useState(false), expiryAnchorEl = _f[0], setExpiryAnchorEl = _f[1];
+    var _g = React.useState(false), entityTypeAnchorEl = _g[0], setEntityTypeAnchorEl = _g[1];
+    var _h = useAppSelector(entitySelector), data = _h.data, loading = _h.loading, error = _h.error, uploading = _h.uploading, uploadingArticle = _h.uploadingArticle;
     var settingsData = useAppSelector(settingsSelector).data;
     var isAr = useLanguage().isAr;
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
-    var _g = data.entityNameData, legalName = _g.legalName, licenseNumber = _g.licenseNumber, licenseType = _g.licenseType, entityType = _g.entityType, issuingDate = _g.issuingDate, expiryDate = _g.expiryDate, unifiedNumber = _g.unifiedNumber, certificateId = _g.certificateId, articleId = _g.articleId;
+    var _j = data.entityNameData, legalName = _j.legalName, licenseNumber = _j.licenseNumber, licenseType = _j.licenseType, entityType = _j.entityType, issuingDate = _j.issuingDate, expiryDate = _j.expiryDate, unifiedNumber = _j.unifiedNumber, certificateId = _j.certificateId, articleId = _j.articleId;
     var country_code = settingsData.businessCountry.iso2;
     var isSACountry = React.useMemo(function () { return isSA(country_code); }, [country_code]);
     var isKWCountry = React.useMemo(function () { return isKW(country_code); }, [country_code]);
     var isCR = licenseType === BusinessType.CR;
-    var _h = data.verify.responseBody || {}, entity = _h.entity, flows = _h.flows;
-    var _j = entity || {}, AOA_file = _j.AOA_file, id = _j.id, documents = _j.documents, data_status = _j.data_status, data_verification = _j.data_verification, legal_name = _j.legal_name, type = _j.type, license = _j.license;
+    var _k = data.verify.responseBody || {}, entity = _k.entity, flows = _k.flows;
+    var _l = entity || {}, AOA_file = _l.AOA_file, id = _l.id, documents = _l.documents, data_status = _l.data_status, data_verification = _l.data_verification, legal_name = _l.legal_name, type = _l.type, license = _l.license;
     var methods = useForm({
         resolver: yupResolver(isSACountry ? EntityNameValidationSchema() : EntityNameKWValidationSchema()),
         defaultValues: {
@@ -132,6 +134,6 @@ var EntityName = function (_a) {
     var disabled = !methods.formState.isValid || !!error || uploading || uploadingArticle;
     var showLicenseNumber = !isSACountry ? isCR : true;
     var showUnifiedNumber = isSACountry ? isCR : false;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !expiryAnchorEl && !issueAnchorEl && !entityTypeAnchorEl }, { children: _jsx(LegalName, { readOnly: readOnly['legalName'] || (noneEditable['legal_name.en'] && noneEditable['legal_name.ar']), isVerified: isLegalNameVerified }) })), _jsx(Collapse, __assign({ in: !expiryAnchorEl && !issueAnchorEl }, { children: _jsx(EntityTypeList, { readOnly: readOnly['entityType'] || noneEditable['type'], onListOpen: function () { return handleEntityOpenClose(true); }, onListClose: function () { return handleEntityOpenClose(false); }, isVerified: isEntityTypeVerified }) })), _jsxs(Collapse, __assign({ in: !expiryAnchorEl && !issueAnchorEl && !entityTypeAnchorEl }, { children: [_jsx(LicenseNumber, { show: showLicenseNumber, readOnly: readOnly['licenseNumber'] || noneEditable['license.number'], isVerified: isLicenseNumberVerified }), _jsx(UnifiedNumber, { show: showUnifiedNumber, readOnly: readOnly['unifiedNumber'] || noneEditable['license.additional_info'], isVerified: isUnifiedNumberVerified })] })), _jsx(Collapse, __assign({ in: !expiryAnchorEl && !entityTypeAnchorEl }, { children: _jsx(IssuingDate, { onDateClicked: handleIssueDateOpenClose, readOnly: readOnly['issuingDate'] || noneEditable['license.issuing_date'], isVerified: isIssuingDateVerified }) })), _jsx(Collapse, __assign({ in: !issueAnchorEl && !entityTypeAnchorEl }, { children: _jsx(ExpiryDate, { onDateClicked: handleExpiryDateOpenClose, readOnly: readOnly['expiryDate'] || noneEditable['license.expiry_date'], isVerified: isExpiryDateVerified }) })), _jsxs(Collapse, __assign({ in: !expiryAnchorEl && !issueAnchorEl && !entityTypeAnchorEl }, { children: [_jsx(LicenseCertificate, { defaultFiles: defaultCertificateFiles, show: !(isKWCountry && !isCR), readOnly: readOnly['certificateId'] || noneEditable['documents'] }), _jsx(Article, { defaultFile: defaultArticleFile, show: true, readOnly: readOnly['articleId'] || noneEditable['AOA_file_id'], isVerified: isArticleIdVerified })] })), _jsx(Collapse, __assign({ in: !expiryAnchorEl && !issueAnchorEl && !entityTypeAnchorEl }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(FormStyled, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(Collapse, __assign({ in: !expiryAnchorEl && !issueAnchorEl && !entityTypeAnchorEl }, { children: _jsx(LegalName, { readOnly: readOnly['legalName'] || (noneEditable['legal_name.en'] && noneEditable['legal_name.ar']), isVerified: isLegalNameVerified }) })), _jsx(Collapse, __assign({ in: !expiryAnchorEl && !issueAnchorEl }, { children: _jsx(EntityTypeList, { readOnly: readOnly['entityType'] || noneEditable['type'], onListOpen: function () { return handleEntityOpenClose(true); }, onListClose: function () { return handleEntityOpenClose(false); }, isVerified: isEntityTypeVerified }) })), _jsxs(Collapse, __assign({ in: !expiryAnchorEl && !issueAnchorEl && !entityTypeAnchorEl }, { children: [_jsx(LicenseNumber, { show: showLicenseNumber, readOnly: readOnly['licenseNumber'] || noneEditable['license.number'], isVerified: isLicenseNumberVerified }), _jsx(UnifiedNumber, { show: showUnifiedNumber, readOnly: readOnly['unifiedNumber'] || noneEditable['license.additional_info'], isVerified: isUnifiedNumberVerified })] })), _jsx(Collapse, __assign({ in: !expiryAnchorEl && !entityTypeAnchorEl }, { children: _jsx(IssuingDate, { isHijri: isHijriIssuingDate, onSwitchCalender: function (isHijri) { return setIsHijriIssuingDate(isHijri); }, onDateClicked: handleIssueDateOpenClose, readOnly: readOnly['issuingDate'] || noneEditable['license.issuing_date'], isVerified: isIssuingDateVerified }) })), _jsx(Collapse, __assign({ in: !issueAnchorEl && !entityTypeAnchorEl }, { children: _jsx(ExpiryDate, { isHijri: isHijriExpiryDate, onSwitchCalender: function (isHijri) { return setIsHijriExpiryDate(isHijri); }, onDateClicked: handleExpiryDateOpenClose, readOnly: readOnly['expiryDate'] || noneEditable['license.expiry_date'], isVerified: isExpiryDateVerified }) })), _jsxs(Collapse, __assign({ in: !expiryAnchorEl && !issueAnchorEl && !entityTypeAnchorEl }, { children: [_jsx(LicenseCertificate, { defaultFiles: defaultCertificateFiles, show: !(isKWCountry && !isCR), readOnly: readOnly['certificateId'] || noneEditable['documents'] }), _jsx(Article, { defaultFile: defaultArticleFile, show: true, readOnly: readOnly['articleId'] || noneEditable['AOA_file_id'], isVerified: isArticleIdVerified })] })), _jsx(Collapse, __assign({ in: !expiryAnchorEl && !issueAnchorEl && !entityTypeAnchorEl }, { children: _jsx(Button, __assign({ onBackClicked: function () { return onBack(); }, disabled: disabled, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
 };
 export default EntityName;

package/build/features/entity/screens/EntityName/ExpiryDate.d.ts

@@ -16,6 +16,8 @@ export interface ExpiryDateProps {
     onDateClicked?: (flag: boolean) => void;
     readOnly?: boolean;
     isVerified?: boolean;
+    isHijri?: boolean;
+    onSwitchCalender?: (isHijri: boolean) => void;
 }
-declare const ExpiryDate: ({ onDateClicked, readOnly, isVerified }: ExpiryDateProps) => JSX.Element;
+declare const ExpiryDate: ({ onDateClicked, readOnly, isVerified, isHijri, onSwitchCalender }: ExpiryDateProps) => JSX.Element;
 export default ExpiryDate;

package/build/features/entity/screens/EntityName/ExpiryDate.js

@@ -18,14 +18,14 @@ import { getFutureDate } from '../../../../utils';
 import Text from '../../../../components/Text';
 import { ScreenContainer } from '../../../shared/Containers';
 import { entitySelector, clearError } from '../../../app/entity/entityStore';
-import DatePicker from '../../../../components/DatePicker';
+import Calender from '../../../shared/Calender';
 export var InputLabelStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
     return (__assign({ margin: theme.spacing(0, 2.5, 1.5, 2.5), color: alpha(theme.palette.text.primary, 0.6) }, theme.typography.caption));
 });
 var ExpiryDate = function (_a) {
     var _b, _c;
-    var onDateClicked = _a.onDateClicked, readOnly = _a.readOnly, isVerified = _a.isVerified;
+    var onDateClicked = _a.onDateClicked, readOnly = _a.readOnly, isVerified = _a.isVerified, isHijri = _a.isHijri, onSwitchCalender = _a.onSwitchCalender;
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
     var control = useFormContext().control;
@@ -39,6 +39,6 @@ var ExpiryDate = function (_a) {
             dispatch(clearError());
         oDateControl.field.onChange(data);
     };
-    return (_jsx(Collapse, __assign({ in: !!expiryDate }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: [_jsx(InputLabelStyled, { children: t('business_expiry_date') }), _jsx(DatePicker, { readOnly: true, isVerified: isVerified, disabled: readOnly, maxDate: getFutureDate(), 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: handleExpiryDateChange })] })) })));
+    return (_jsx(Collapse, __assign({ in: !!expiryDate }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: [_jsx(InputLabelStyled, { children: t('business_expiry_date') }), _jsx(Calender, { isHijri: isHijri, onSwitchCalender: onSwitchCalender, isVerified: isVerified, disabled: readOnly, maxDate: getFutureDate(), defaultValue: dateValue ? new Date(dateValue) : undefined, onDateClicked: onDateClicked, onDateChange: handleExpiryDateChange })] })) })));
 };
 export default ExpiryDate;

package/build/features/entity/screens/EntityName/IssuingDate.d.ts

@@ -16,6 +16,8 @@ export interface IssuingDateProps {
     onDateClicked?: (flag: boolean) => void;
     readOnly?: boolean;
     isVerified?: boolean;
+    isHijri?: boolean;
+    onSwitchCalender?: (isHijri: boolean) => void;
 }
-declare const IssuingDate: ({ onDateClicked, readOnly, isVerified }: IssuingDateProps) => JSX.Element;
+declare const IssuingDate: ({ onDateClicked, readOnly, isVerified, isHijri, onSwitchCalender }: IssuingDateProps) => JSX.Element;
 export default IssuingDate;

package/build/features/entity/screens/EntityName/IssuingDate.js

@@ -15,7 +15,7 @@ import { useController, useFormContext } from 'react-hook-form';
 import { alpha, Collapse, styled } from '@mui/material';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import Text from '../../../../components/Text';
-import DatePicker from '../../../../components/DatePicker';
+import Calender from '../../../shared/Calender';
 import { ScreenContainer } from '../../../shared/Containers';
 import { entitySelector, clearError } from '../../../app/entity/entityStore';
 export var InputLabelStyled = styled(Text)(function (_a) {
@@ -24,7 +24,7 @@ export var InputLabelStyled = styled(Text)(function (_a) {
 });
 var IssuingDate = function (_a) {
     var _b, _c;
-    var onDateClicked = _a.onDateClicked, readOnly = _a.readOnly, isVerified = _a.isVerified;
+    var onDateClicked = _a.onDateClicked, readOnly = _a.readOnly, isVerified = _a.isVerified, isHijri = _a.isHijri, onSwitchCalender = _a.onSwitchCalender;
     var t = useTranslation().t;
     var dispatch = useAppDispatch();
     var control = useFormContext().control;
@@ -38,6 +38,6 @@ var IssuingDate = function (_a) {
             dispatch(clearError());
         oDateControl.field.onChange(data);
     };
-    return (_jsx(Collapse, __assign({ in: !!issueDate }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: [_jsx(InputLabelStyled, { children: t('issue_date') }), _jsx(DatePicker, { readOnly: true, disabled: readOnly, isVerified: isVerified, 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: handleIssuingDateChange })] })) })));
+    return (_jsx(Collapse, __assign({ in: !!issueDate }, { children: _jsxs(ScreenContainer, __assign({ sx: { mt: 2.5 } }, { children: [_jsx(InputLabelStyled, { children: t('issue_date') }), _jsx(Calender, { isHijri: isHijri, onSwitchCalender: onSwitchCalender, disabled: readOnly, isVerified: isVerified, defaultValue: dateValue ? new Date(dateValue) : undefined, onDateClicked: onDateClicked, onDateChange: handleIssuingDateChange })] })) })));
 };
 export default IssuingDate;

package/build/features/individual/screens/IndividualPersonalInfo/DOB.d.ts

@@ -4,6 +4,8 @@ interface BODProps {
     onDateClicked?: (flag: boolean) => void;
     isVerified?: boolean;
     readOnly?: boolean;
+    isHijri?: boolean;
+    onSwitchCalender?: (isHijri: boolean) => void;
 }
-declare const _default: React.MemoExoticComponent<({ onDateClicked, show, readOnly, isVerified }: BODProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onDateClicked, show, readOnly, isVerified, isHijri, onSwitchCalender }: BODProps) => JSX.Element>;
 export default _default;

package/build/features/individual/screens/IndividualPersonalInfo/DOB.js

@@ -17,7 +17,7 @@ import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { styled, alpha } from '@mui/material/styles';
 import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
-import DatePicker from '../../../../components/DatePicker';
+import Calender from '../../../shared/Calender';
 import { ScreenContainer } from '../../../shared/Containers';
 import { individualSelector, clearError } from '../../../app/individual/individualStore';
 var InputLabelStyled = styled(Text)(function (_a) {
@@ -26,7 +26,7 @@ var InputLabelStyled = styled(Text)(function (_a) {
 });
 var BOD = function (_a) {
     var _b;
-    var onDateClicked = _a.onDateClicked, show = _a.show, readOnly = _a.readOnly, isVerified = _a.isVerified;
+    var onDateClicked = _a.onDateClicked, show = _a.show, readOnly = _a.readOnly, isVerified = _a.isVerified, isHijri = _a.isHijri, onSwitchCalender = _a.onSwitchCalender;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var dispatch = useAppDispatch();
@@ -41,6 +41,6 @@ var BOD = function (_a) {
     return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
                             var spacing = _a.spacing;
                             return spacing(2.5, 2.5, 2.5, 2.5);
-                        } } }, { children: t('enter_birth_date') })), _jsx(DatePicker, { readOnly: true, isVerified: isVerified, disabled: readOnly, defaultValue: dateValue ? new Date(dateValue) : undefined, dir: 'ltr', isDob: true, 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: handleBirthDateChange })] }) })));
+                        } } }, { children: t('enter_birth_date') })), _jsx(Calender, { isDob: true, isHijri: isHijri, onSwitchCalender: onSwitchCalender, disabled: readOnly, isVerified: isVerified, defaultValue: dateValue ? new Date(dateValue) : undefined, onDateClicked: onDateClicked, onDateChange: handleBirthDateChange })] }) })));
 };
 export default React.memo(BOD);

package/build/features/individual/screens/IndividualPersonalInfo/ExpiryDate.d.ts

@@ -4,6 +4,8 @@ interface ExpiryDateProps {
     onDateClicked?: (flag: boolean) => void;
     readOnly?: boolean;
     isVerified?: boolean;
+    isHijri?: boolean;
+    onSwitchCalender?: (isHijri: boolean) => void;
 }
-declare const _default: React.MemoExoticComponent<({ onDateClicked, show, readOnly, isVerified }: ExpiryDateProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onDateClicked, show, readOnly, isVerified, isHijri, onSwitchCalender }: ExpiryDateProps) => JSX.Element>;
 export default _default;

package/build/features/individual/screens/IndividualPersonalInfo/ExpiryDate.js

@@ -18,7 +18,7 @@ import { getFutureDate } from '../../../../utils';
 import { styled, alpha } from '@mui/material/styles';
 import Text from '../../../../components/Text';
 import Collapse from '../../../../components/Collapse';
-import DatePicker from '../../../../components/DatePicker';
+import Calender from '../../../shared/Calender';
 import { ScreenContainer } from '../../../shared/Containers';
 import { individualSelector, clearError } from '../../../app/individual/individualStore';
 var InputLabelStyled = styled(Text)(function (_a) {
@@ -27,7 +27,7 @@ var InputLabelStyled = styled(Text)(function (_a) {
 });
 var ExpiryDate = function (_a) {
     var _b;
-    var onDateClicked = _a.onDateClicked, show = _a.show, readOnly = _a.readOnly, isVerified = _a.isVerified;
+    var onDateClicked = _a.onDateClicked, show = _a.show, readOnly = _a.readOnly, isVerified = _a.isVerified, isHijri = _a.isHijri, onSwitchCalender = _a.onSwitchCalender;
     var t = useTranslation().t;
     var control = useFormContext().control;
     var dispatch = useAppDispatch();
@@ -42,6 +42,6 @@ var ExpiryDate = function (_a) {
     return (_jsx(Collapse, __assign({ in: show }, { children: _jsxs(ScreenContainer, { children: [_jsx(InputLabelStyled, __assign({ sx: { p: function (_a) {
                             var spacing = _a.spacing;
                             return spacing(2.5, 2.5, 2.5, 2.5);
-                        } } }, { children: t('enter_expiry_date') })), _jsx(DatePicker, { readOnly: true, isVerified: isVerified, disabled: readOnly, defaultValue: dateValue ? new Date(dateValue) : new Date(), dir: 'ltr', locale: 'en', maxDate: getFutureDate(), 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: handleBirthDateChange })] }) })));
+                        } } }, { children: t('enter_expiry_date') })), _jsx(Calender, { isHijri: isHijri, onSwitchCalender: onSwitchCalender, disabled: readOnly, isVerified: isVerified, maxDate: getFutureDate(), defaultValue: dateValue ? new Date(dateValue) : undefined, onDateClicked: onDateClicked, onDateChange: handleBirthDateChange })] }) })));
 };
 export default React.memo(ExpiryDate);

package/build/features/individual/screens/IndividualPersonalInfo/IndividualPersonalInfo.js

@@ -54,13 +54,15 @@ var IndividualPersonalInfo = function (_a) {
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
-    var _l = useAppSelector(individualSelector), data = _l.data, loading = _l.loading, error = _l.error, cityLoading = _l.cityLoading;
+    var _l = React.useState(false), isHijriDobDate = _l[0], setIsHijriDobDate = _l[1];
+    var _m = React.useState(false), isHijriExpiryDate = _m[0], setIsHijriExpiryDate = _m[1];
+    var _o = useAppSelector(individualSelector), data = _o.data, loading = _o.loading, error = _o.error, cityLoading = _o.cityLoading;
     var settingsData = useAppSelector(settingsSelector).data;
     var countries = settingsData.countries;
     var verify = data.verify, individualPersonalData = data.individualPersonalData;
-    var _m = verify.responseBody || {}, user = _m.user, flows = _m.flows;
+    var _p = verify.responseBody || {}, user = _p.user, flows = _p.flows;
     var name = individualPersonalData.name, email = individualPersonalData.email, mobile = individualPersonalData.mobile, countryCode = individualPersonalData.countryCode, gender = individualPersonalData.gender, nid = individualPersonalData.nid, issuedCountry = individualPersonalData.issuedCountry, expiryDate = individualPersonalData.expiryDate, dob = individualPersonalData.dob, placeOfBirthCountry = individualPersonalData.placeOfBirthCountry, placeOfBirthCity = individualPersonalData.placeOfBirthCity, nationality = individualPersonalData.nationality;
-    var _o = user || {}, data_status = _o.data_status, is_authorized = _o.is_authorized, data_verification = _o.data_verification, contact = _o.contact, genderRes = _o.gender, identification = _o.identification, birth = _o.birth, nationalityRes = _o.nationality;
+    var _q = user || {}, data_status = _q.data_status, is_authorized = _q.is_authorized, data_verification = _q.data_verification, contact = _q.contact, genderRes = _q.gender, identification = _q.identification, birth = _q.birth, nationalityRes = _q.nationality;
     var methods = useForm({
         resolver: yupResolver(IndividualInfoValidationSchema),
         defaultValues: {
@@ -81,9 +83,9 @@ var IndividualPersonalInfo = function (_a) {
     });
     var watch = methods.watch;
     useSetFromDefaultValues(methods, data.individualPersonalData);
-    var _p = React.useState(), listActive = _p[0], setListActive = _p[1];
-    var _q = React.useState(false), dobActive = _q[0], setDobActive = _q[1];
-    var _r = React.useState(false), expiryDateActive = _r[0], setExpiryDateActive = _r[1];
+    var _r = React.useState(), listActive = _r[0], setListActive = _r[1];
+    var _s = React.useState(false), dobActive = _s[0], setDobActive = _s[1];
+    var _t = React.useState(false), expiryDateActive = _t[0], setExpiryDateActive = _t[1];
     var originalReadOnly = useFormReadOnly(methods);
     var noneEditable = useDataNoneEditable(data_status, [
         'name.en',
@@ -172,7 +174,7 @@ var IndividualPersonalInfo = function (_a) {
     var isBirthCountryListActive = listActive === ListType.BirthCountryList;
     var isBirthCityListActive = listActive === ListType.BirthCityList;
     var isNationalityListActive = listActive === ListType.NationalityList;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Name, { show: showField, readOnly: readOnly['name'] || (noneEditable['name.en'] && noneEditable['name.ar']), isVerified: isNameVerified }), _jsx(MobileNumber, { readOnly: readOnly['mobile'] || noneEditable['contact.phone.number'] || noneEditable['contact.phone.country_code'], show: !isDateFieldActive && !isBirthCountryListActive && !isBirthCityListActive && !isNationalityListActive && !isIssuedCountryListActive, countries: countries, onListOpen: function () { return handleMenuClick(ListType.MobileCountryList); }, onListClose: function () { return handleMenuClick(); }, isVerified: isPhoneNumberVerified }), _jsx(Email, { show: showField, readOnly: readOnly['email'] || noneEditable['contact.email'], isVerified: isEmailVerified }), _jsx(Gender, { show: showField, readOnly: readOnly['gender'] || noneEditable['gender'], isVerified: isGenderVerified }), _jsx(ID, { show: showField, readOnly: readOnly['nid'] || noneEditable['identification.id'], isVerified: isIDVerified }), _jsx(IssuedCountry, { readOnly: readOnly['issuedCountry'] || noneEditable['identification.issuer_country'], show: !isMobileCountryListActive && !isDateFieldActive && !isBirthCountryListActive && !isBirthCityListActive && !isNationalityListActive, countries: countries, onListOpen: function () { return handleMenuClick(ListType.IssuedCountryList); }, onListClose: function () { return handleMenuClick(); }, isVerified: isIssuedCountryVerified }), _jsx(ExpiryDate, { show: !listActive && !dobActive, onDateClicked: handleExpiryDateActive, readOnly: readOnly['expiryDate'] || noneEditable['identification.expiry'], isVerified: isExpiryDateVerified }), _jsx(DOB, { show: !listActive && !expiryDateActive, onDateClicked: handleDobActive, readOnly: readOnly['dob'] || noneEditable['birth.date'], isVerified: isDOBVerified }), _jsx(BirthCountry, { readOnly: readOnly['placeOfBirthCountry'] || noneEditable['birth.country'], show: !isMobileCountryListActive && !isDateFieldActive && !isIssuedCountryListActive && !isBirthCityListActive && !isNationalityListActive, countries: countries, onListOpen: function () { return handleMenuClick(ListType.BirthCountryList); }, onListClose: function () { return handleMenuClick(); }, isVerified: isBirthCountryVerified }), _jsx(BirthCity, { readOnly: readOnly['placeOfBirthCity'] || noneEditable['birth.city'], show: !isMobileCountryListActive &&
+    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsxs(Box, { children: [_jsx(Name, { show: showField, readOnly: readOnly['name'] || (noneEditable['name.en'] && noneEditable['name.ar']), isVerified: isNameVerified }), _jsx(MobileNumber, { readOnly: readOnly['mobile'] || noneEditable['contact.phone.number'] || noneEditable['contact.phone.country_code'], show: !isDateFieldActive && !isBirthCountryListActive && !isBirthCityListActive && !isNationalityListActive && !isIssuedCountryListActive, countries: countries, onListOpen: function () { return handleMenuClick(ListType.MobileCountryList); }, onListClose: function () { return handleMenuClick(); }, isVerified: isPhoneNumberVerified }), _jsx(Email, { show: showField, readOnly: readOnly['email'] || noneEditable['contact.email'], isVerified: isEmailVerified }), _jsx(Gender, { show: showField, readOnly: readOnly['gender'] || noneEditable['gender'], isVerified: isGenderVerified }), _jsx(ID, { show: showField, readOnly: readOnly['nid'] || noneEditable['identification.id'], isVerified: isIDVerified }), _jsx(IssuedCountry, { readOnly: readOnly['issuedCountry'] || noneEditable['identification.issuer_country'], show: !isMobileCountryListActive && !isDateFieldActive && !isBirthCountryListActive && !isBirthCityListActive && !isNationalityListActive, countries: countries, onListOpen: function () { return handleMenuClick(ListType.IssuedCountryList); }, onListClose: function () { return handleMenuClick(); }, isVerified: isIssuedCountryVerified }), _jsx(ExpiryDate, { isHijri: isHijriExpiryDate, onSwitchCalender: function (isHijri) { return setIsHijriExpiryDate(isHijri); }, show: !listActive && !dobActive, onDateClicked: handleExpiryDateActive, readOnly: readOnly['expiryDate'] || noneEditable['identification.expiry'], isVerified: isExpiryDateVerified }), _jsx(DOB, { isHijri: isHijriDobDate, onSwitchCalender: function (isHijri) { return setIsHijriDobDate(isHijri); }, show: !listActive && !expiryDateActive, onDateClicked: handleDobActive, readOnly: readOnly['dob'] || noneEditable['birth.date'], isVerified: isDOBVerified }), _jsx(BirthCountry, { readOnly: readOnly['placeOfBirthCountry'] || noneEditable['birth.country'], show: !isMobileCountryListActive && !isDateFieldActive && !isIssuedCountryListActive && !isBirthCityListActive && !isNationalityListActive, countries: countries, onListOpen: function () { return handleMenuClick(ListType.BirthCountryList); }, onListClose: function () { return handleMenuClick(); }, isVerified: isBirthCountryVerified }), _jsx(BirthCity, { readOnly: readOnly['placeOfBirthCity'] || noneEditable['birth.city'], show: !isMobileCountryListActive &&
                                     !isDateFieldActive &&
                                     !isIssuedCountryListActive &&
                                     !isBirthCountryListActive &&

package/build/features/shared/Calender/Calender.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { CalendarProps } from 'react-multi-date-picker';
+interface CustomCalenderProps extends CalendarProps {
+    isHijri?: boolean;
+    defaultValue?: Date | Date[];
+    onDateClicked?: (flag: boolean) => void;
+    onDateChange?: (date: string) => void;
+    isDob?: boolean;
+    disabled?: boolean;
+    isVerified?: boolean;
+    maxDate?: Date;
+    onSwitchCalender?: (isHijri: boolean) => void;
+}
+declare const CustomCalender: ({ isHijri, onDateClicked, onDateChange, defaultValue, isDob, disabled, isVerified, maxDate, onSwitchCalender }: CustomCalenderProps) => JSX.Element;
+export default CustomCalender;

package/build/features/shared/Calender/Calender.js

@@ -0,0 +1,53 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import { styled, useTheme } from '@mui/material/styles';
+import { ICONS_NAMES } from '../../../constants';
+import DatePicker from '../../../components/DatePicker';
+import ArabicDatePicker from '../../../components/ArabicDatePicker';
+import Collapse from '../../../components/Collapse';
+import Icon from '../../../components/Icon';
+import { ScreenContainer } from '../../shared/Containers';
+var SwitchBoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return (__assign(__assign({ backgroundColor: 'rgba(117, 122, 135, 0.1)' }, theme.typography.caption), { borderBottomLeftRadius: '12px', borderBottomRightRadius: '12px', display: 'flex', alignItems: 'center', justifyContent: 'center', height: '47px', color: '#757A87', '&:hover': {
+            cursor: 'pointer'
+        } }));
+});
+var CustomCalender = function (_a) {
+    var _b = _a.isHijri, isHijri = _b === void 0 ? false : _b, onDateClicked = _a.onDateClicked, onDateChange = _a.onDateChange, defaultValue = _a.defaultValue, isDob = _a.isDob, disabled = _a.disabled, isVerified = _a.isVerified, maxDate = _a.maxDate, onSwitchCalender = _a.onSwitchCalender;
+    var t = useTranslation().t;
+    var theme = useTheme();
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
+    var _d = React.useState(isHijri), isHijriCalender = _d[0], setIsHijriCalender = _d[1];
+    var handleSwitchCalender = function () {
+        setIsHijriCalender(!isHijriCalender);
+        onSwitchCalender === null || onSwitchCalender === void 0 ? void 0 : onSwitchCalender(!isHijriCalender);
+    };
+    return (_jsxs(ScreenContainer, { children: [_jsx(Collapse, __assign({ in: !isHijriCalender }, { children: _jsx(DatePicker, { open: open, defaultValue: defaultValue, readOnly: true, disabled: disabled, isVerified: isVerified, dir: 'ltr', locale: 'en', isDob: isDob, maxDate: maxDate, onDateChange: onDateChange, onClick: function () {
+                        onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true);
+                        setOpen(true);
+                    }, onDatePicked: function () {
+                        onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false);
+                        setOpen(false);
+                    } }) })), _jsx(Collapse, __assign({ in: isHijriCalender }, { children: _jsx(ArabicDatePicker, { open: open, readOnly: true, disabled: disabled, isVerified: isVerified, dir: theme.direction, isDob: isDob, maxDate: maxDate, onClick: function () {
+                        onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(true);
+                        setOpen(true);
+                    }, onDatePicked: function () {
+                        onDateClicked === null || onDateClicked === void 0 ? void 0 : onDateClicked(false);
+                        setOpen(false);
+                    }, onDateChange: onDateChange, value: defaultValue }) })), _jsx(Collapse, __assign({ in: open }, { children: _jsx(SwitchBoxStyled, __assign({ onClick: handleSwitchCalender }, { children: _jsxs(_Fragment, { children: [_jsx(Icon, { src: !isHijriCalender ? ICONS_NAMES.SWITCH_HIJRI_CALENDER : ICONS_NAMES.SWITCH_CALENDER }), !isHijriCalender ? t('switch_to_islamic_calendar') : t('switch_to_gregorian_calendar')] }) })) }))] }));
+};
+export default CustomCalender;

package/build/features/shared/Calender/index.d.ts

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

package/build/features/shared/Calender/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/auth-jsconnect",
-	"version": "2.4.87-test",
+	"version": "2.4.88-test",
 	"description": "connect library, auth",
 	"private": false,
 	"main": "build/index.js",