@tap-payments/auth-jsconnect 2.3.0 → 2.3.1

package/build/app/settings.d.ts

@@ -33,6 +33,7 @@ export interface SettingsData {
     boardMaturity: boolean;
     merchant?: MerchantInfo;
     isMaturityExpress: boolean;
+    isHijri: boolean;
 }
 export interface SettingsState extends SharedState<SettingsData> {
 }
@@ -43,6 +44,7 @@ export declare const settingsSlice: import("@reduxjs/toolkit").Slice<SettingsSta
     handleSkin: (state: SettingsState, action: ActionState<ThemeMode>) => void;
     handleLanguage: (state: SettingsState, action: ActionState<LanguageMode>) => void;
     handlePublicKey: (state: SettingsState, action: ActionState<string>) => void;
+    handleSwitchCalender: (state: SettingsState, action: ActionState<boolean>) => void;
     handleNextScreenStep: (state: SettingsState, action: ActionState<string | undefined>) => void;
     handleCurrentActiveScreen: (state: SettingsState, action: ActionState<string>) => void;
     handlePrevScreenStep: (state: SettingsState, action: ActionState<string | undefined>) => void;
@@ -50,7 +52,7 @@ export declare const settingsSlice: import("@reduxjs/toolkit").Slice<SettingsSta
     handleSetAppConfig: (state: SettingsState, action: ActionState<LibConfig>) => void;
     handleSetCountryByIso2: (state: SettingsState, action: ActionState<string>) => void;
 }, "settings">;
-export declare const handleSkin: import("@reduxjs/toolkit").ActionCreatorWithPayload<ThemeMode, "settings/handleSkin">, handleLanguage: import("@reduxjs/toolkit").ActionCreatorWithPayload<LanguageMode, "settings/handleLanguage">, handleActiveFlowScreens: import("@reduxjs/toolkit").ActionCreatorWithPayload<ScreenStepNavigation[], "settings/handleActiveFlowScreens">, handleNextScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, "settings/handleNextScreenStep">, handlePrevScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, "settings/handlePrevScreenStep">, handleCurrentActiveScreen: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "settings/handleCurrentActiveScreen">, handleSetAppConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<LibConfig, "settings/handleSetAppConfig">, handleOpen: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "settings/handleOpen">, handleSetCountryByIso2: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "settings/handleSetCountryByIso2">, handleIsTapOrigin: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "settings/handleIsTapOrigin">, handelBoardMaturity: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "settings/handelBoardMaturity">, handlePublicKey: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "settings/handlePublicKey">;
+export declare const handleSkin: import("@reduxjs/toolkit").ActionCreatorWithPayload<ThemeMode, "settings/handleSkin">, handleLanguage: import("@reduxjs/toolkit").ActionCreatorWithPayload<LanguageMode, "settings/handleLanguage">, handleActiveFlowScreens: import("@reduxjs/toolkit").ActionCreatorWithPayload<ScreenStepNavigation[], "settings/handleActiveFlowScreens">, handleNextScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, "settings/handleNextScreenStep">, handlePrevScreenStep: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<string | undefined, "settings/handlePrevScreenStep">, handleCurrentActiveScreen: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "settings/handleCurrentActiveScreen">, handleSetAppConfig: import("@reduxjs/toolkit").ActionCreatorWithPayload<LibConfig, "settings/handleSetAppConfig">, handleOpen: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "settings/handleOpen">, handleSetCountryByIso2: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "settings/handleSetCountryByIso2">, handleIsTapOrigin: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "settings/handleIsTapOrigin">, handelBoardMaturity: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "settings/handelBoardMaturity">, handlePublicKey: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, "settings/handlePublicKey">, handleSwitchCalender: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, "settings/handleSwitchCalender">;
 declare const _default: import("redux").Reducer<SettingsState, import("redux").AnyAction>;
 export default _default;
 export declare const settingsSelector: (state: RootState) => SettingsState;

package/build/app/settings.js

@@ -47,13 +47,13 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 var _a;
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
-import { getStoredData, storeData, isArray, findItem, getBrowserInfo, getFingerPrint, sortCountries, findCountryByIso2, getRequestHeaders, encryptString, dangerousMessage, isKW, isSA } from '../utils';
+import { getStoredData, storeData, isArray, findItem, getBrowserInfo, getFingerPrint, sortCountries, findCountryByIso2, getRequestHeaders, encryptString, dangerousMessage, isKW, isSA, getParameterByName } from '../utils';
 import { DefaultDeviceInfo, LOCAL_STORAGE_KEYS } from '../constants';
 import i18n from '../i18n';
 import { updateLocale } from '../utils/locale';
 import API, { setAxiosGlobalHeaders } from '../api';
 export var fetchAppSettingsSync = createAsyncThunk('fetchAppSettingsSync', function (params, thunkApi) { return __awaiter(void 0, void 0, void 0, function () {
-    var settings, _a, appConfig, language, _b, client, device, os, disableLocale, maturity, disableCountries, configToken, onVerifyConfigTokenSuccess, _c, visitorId, locale, configInfo, matureData, initPayload, _d, country_list, ip_info, merchant, operator, config, list, _e, ip, latitude, longitude, domain, language_1, country, scope, public_key, maturity_1, board_maturity, deviceInfo, isValidOperator, countries, countryCode, isKWOrSA, businessCountry;
+    var settings, _a, appConfig, language, _b, client, device, os, disableLocale, maturity, disableCountries, configToken, onVerifyConfigTokenSuccess, _c, visitorId, locale, configInfo, matureData, lang, initPayload, _d, country_list, ip_info, merchant, operator, config, list, _e, ip, latitude, longitude, domain, language_1, country, scope, public_key, maturity_1, board_maturity, deviceInfo, isValidOperator, countries, countryCode, isKWOrSA, businessCountry;
     return __generator(this, function (_f) {
         switch (_f.label) {
             case 0:
@@ -66,6 +66,7 @@ export var fetchAppSettingsSync = createAsyncThunk('fetchAppSettingsSync', funct
                 _c = _f.sent(), visitorId = _c[0].visitorId, locale = _c[1];
                 configInfo = appConfig;
                 matureData = maturity;
+                lang = getParameterByName('lang');
                 setAxiosGlobalHeaders({
                     bi: visitorId || '',
                     mdn: encryptString(params.mdn || window.location.origin),
@@ -85,7 +86,7 @@ export var fetchAppSettingsSync = createAsyncThunk('fetchAppSettingsSync', funct
                     if (typeof maturity_1 === 'boolean')
                         matureData = maturity_1 ? 'full' : 'express';
                     thunkApi.dispatch(handleSetAppConfig(configInfo));
-                    thunkApi.dispatch(handleLanguage(config.language));
+                    thunkApi.dispatch(handleLanguage(config.language || lang));
                     if (typeof board_maturity === 'boolean')
                         thunkApi.dispatch(handelBoardMaturity(board_maturity));
                     onVerifyConfigTokenSuccess === null || onVerifyConfigTokenSuccess === void 0 ? void 0 : onVerifyConfigTokenSuccess(config);
@@ -154,7 +155,8 @@ var initialState = {
         appConfig: {},
         businessCountry: {},
         countries: [],
-        isValidOperator: false
+        isValidOperator: false,
+        isHijri: false
     }
 };
 export var settingsSlice = createSlice({
@@ -189,6 +191,9 @@ export var settingsSlice = createSlice({
                 return;
             state.data.appConfig.publicKey = action.payload;
         },
+        handleSwitchCalender: function (state, action) {
+            state.data.isHijri = action.payload;
+        },
         handleNextScreenStep: function (state, action) {
             var next = state.data.activeScreen.next;
             var appConfig = state.data.appConfig;
@@ -290,6 +295,6 @@ export var settingsSlice = createSlice({
         });
     }
 });
-export var handleSkin = (_a = settingsSlice.actions, _a.handleSkin), handleLanguage = _a.handleLanguage, handleActiveFlowScreens = _a.handleActiveFlowScreens, handleNextScreenStep = _a.handleNextScreenStep, handlePrevScreenStep = _a.handlePrevScreenStep, handleCurrentActiveScreen = _a.handleCurrentActiveScreen, handleSetAppConfig = _a.handleSetAppConfig, handleOpen = _a.handleOpen, handleSetCountryByIso2 = _a.handleSetCountryByIso2, handleIsTapOrigin = _a.handleIsTapOrigin, handelBoardMaturity = _a.handelBoardMaturity, handlePublicKey = _a.handlePublicKey;
+export var handleSkin = (_a = settingsSlice.actions, _a.handleSkin), handleLanguage = _a.handleLanguage, handleActiveFlowScreens = _a.handleActiveFlowScreens, handleNextScreenStep = _a.handleNextScreenStep, handlePrevScreenStep = _a.handlePrevScreenStep, handleCurrentActiveScreen = _a.handleCurrentActiveScreen, handleSetAppConfig = _a.handleSetAppConfig, handleOpen = _a.handleOpen, handleSetCountryByIso2 = _a.handleSetCountryByIso2, handleIsTapOrigin = _a.handleIsTapOrigin, handelBoardMaturity = _a.handelBoardMaturity, handlePublicKey = _a.handlePublicKey, handleSwitchCalender = _a.handleSwitchCalender;
 export default settingsSlice.reducer;
 export var settingsSelector = function (state) { return state.settings; };

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,18 +7,57 @@
 .rmdp-day-picker > div {
 	width: 100%;
 }
+.rmdp-day {
+	color: #3a4154 !important;
+}
 
 .rmdp-calendar {
 	width: 100%;
 }
-/* .rmdp-day:not(.rmdp-disabled):not(.rmdp-day-hidden) span:hover {
-	background: radial-gradient(circle closest-side, #fafafa 0%, #fafafa 98%, rgba(0, 0, 0, 0) 100%);
-	color: black !important;
-	background-color: unset !important;
-} */
 
 .rmdp-day.rmdp-selected span:not(.highlight) {
 	/* background: radial-gradient(circle closest-side, #3a4154 0%, #3a4154 98%, rgba(0, 0, 0, 0) 100%) !important; */
 	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-day.rmdp-selected span:not(.highlight):hover {
+	color: #ffffff !important;
+	background-color: black !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;
+}
+.rmdp-day-picker .rmdp-day {
+	height: 36px !important;
+	width: 36px !important;
+}
+.rmdp-day-picker .rmdp-day span {
+	height: 36px !important;
+	width: 36px !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/app/connect/connectStore.d.ts

@@ -109,6 +109,19 @@ export declare const updateLeadIndividual: import("@reduxjs/toolkit").AsyncThunk
     fulfilledMeta?: unknown;
     rejectedMeta?: unknown;
 }>;
+export declare const retrieveLead: import("@reduxjs/toolkit").AsyncThunk<{
+    data: any;
+    countryCode: CountryCode;
+}, string, {
+    state?: unknown;
+    dispatch?: import("redux").Dispatch<import("redux").AnyAction> | undefined;
+    extra?: unknown;
+    rejectValue?: unknown;
+    serializedErrorType?: unknown;
+    pendingMeta?: unknown;
+    fulfilledMeta?: unknown;
+    rejectedMeta?: unknown;
+}>;
 export declare const retrieveSegmentDataList: import("@reduxjs/toolkit").AsyncThunk<{
     segmentLocation: any;
     segmentProfit: any;