@tap-payments/auth-jsconnect 2.5.22-test → 3.0.0-test

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

@@ -12,11 +12,12 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
 import { handlePrevScreenStep } from '../../../../app/settings';
 import { useAppDispatch, useAppSelector, useLanguage } from '../../../../hooks';
 import { BUSINESS_WEBSITE } from '../../../../constants';
 import FlatButton from '../../../../components/Button';
-import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { businessSelector } from '../../../app/business/businessStore';
 import Button from '../../../shared/Button';
 import Header from './Header';
@@ -34,6 +35,6 @@ var BrandDetails = function (_a) {
     var loginToDashboard = function () {
         window.open(BUSINESS_WEBSITE, '_blank');
     };
-    return (_jsxs(ScreenContainer, { children: [_jsx(Header, {}), _jsx(BrandName, {}), _jsx(LicenseInfo, {}), _jsx(SalesChannel, {}), _jsx(FlatButton, __assign({ sx: { mb: 1.5, mt: 1.5 }, onClick: function () { return onBack(); }, variant: 'text' }, { children: t('review_account') })), _jsx(Button, __assign({ sx: { mt: 0 }, disableBack: true, onClick: function () { return loginToDashboard(); }, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('login_to_dashboard') }))] }));
+    return (_jsxs(ContainerWithHeader, __assign({ title: 'business_brand_title', description: 'business_brand_description', onBack: function () { return onBack(); } }, { children: [_jsx(Header, {}), _jsx(BrandName, {}), _jsx(LicenseInfo, {}), _jsx(SalesChannel, {}), _jsx(Box, __assign({ sx: { ml: 3, mr: 3 } }, { children: _jsx(FlatButton, __assign({ disableElevation: true, disableFocusRipple: true, disableTouchRipple: true, sx: { mt: 1.5 }, onClick: function () { return onBack(); }, variant: 'text' }, { children: t('review_account') })) })), _jsx(Button, __assign({ sx: { mt: 1 }, disableBack: true, onClick: function () { return loginToDashboard(); }, isAr: isAr, loading: loading, error: t(error || '') }, { children: t('login_to_dashboard') }))] })));
 };
 export default React.memo(BrandDetails);

package/build/features/business/screens/BrandDetails/BrandName.js

@@ -15,15 +15,11 @@ import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import { useAppSelector, useLanguage } from '../../../../hooks';
 import { ScreenContainer } from '../../../shared/Containers';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import { businessSelector } from '../../../app/business/businessStore';
-var InputStyled = styled(Input)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        opacity: 1,
-        '& .MuiInputBase-input': { cursor: 'auto', color: theme.palette.text.primary }
-    });
-});
+var InputStyled = styled(Input)(function () { return ({
+    '& .MuiInputBase-input': { cursor: 'auto' }
+}); });
 var BrandName = function (_a) {
     var _b, _c, _d;
     var t = useTranslation().t;
@@ -31,6 +27,6 @@ var BrandName = function (_a) {
     var data = useAppSelector(businessSelector).data;
     var brand = (((_b = data.verify) === null || _b === void 0 ? void 0 : _b.responseBody) || {}).brand;
     var name = isAr ? (_c = brand === null || brand === void 0 ? void 0 : brand.name) === null || _c === void 0 ? void 0 : _c.ar : (_d = brand === null || brand === void 0 ? void 0 : brand.name) === null || _d === void 0 ? void 0 : _d.en;
-    return (_jsx(ScreenContainer, __assign({ sx: { mt: 3 } }, { children: _jsx(InputStyled, { label: t('signup_brand_name_label'), readOnly: true, value: name }) })));
+    return (_jsx(ScreenContainer, __assign({ sx: { mt: 3 } }, { children: _jsx(InputStyled, { label: t('signup_brand_name_label'), inputProps: { readOnly: true }, value: name }) })));
 };
 export default React.memo(BrandName);

package/build/features/business/screens/BrandDetails/Header.js

@@ -18,17 +18,18 @@ import { ICONS_NAMES } from '../../../../constants';
 import Text from '../../../../components/Text';
 import { ScreenContainer } from '../../../shared/Containers';
 import Chip from '../../../shared/Chip';
+import { ThemeMode } from '../../../../@types';
 var ScreenContainerStyled = styled(ScreenContainer)(function () { return ({
     alignItems: 'center',
     justifyContent: 'center'
 }); });
 var TitleStyled = styled(Text)(function (_a) {
     var theme = _a.theme;
-    return (__assign(__assign({}, theme.typography.body1), { fontWeight: theme.typography.fontWeightBold, color: theme.palette.text.primary, marginBlockEnd: theme.spacing(1), lineHeight: 1.75, padding: '0px 20px' }));
+    return (__assign(__assign({}, theme.typography.h6), { fontWeight: 600, color: theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.main : theme.palette.text.primary, marginBlockEnd: theme.spacing(1), padding: theme.spacing(0, 3) }));
 });
 var ChipStyled = styled(Chip, { shouldForwardProp: function (prop) { return prop !== 'isAr'; } })(function (_a) {
     var theme = _a.theme, isAr = _a.isAr;
-    return (__assign(__assign({ background: alpha(theme.palette.success.main, 0.1), color: theme.palette.success.main, height: theme.spacing(3.125), boxShadow: theme.shadows[0] }, theme.typography.subtitle2), { '& .MuiChip-icon': {
+    return (__assign(__assign({ background: alpha(theme.palette.success.main, 0.06), borderRadius: theme.spacing(0.75), color: theme.palette.success.main, height: theme.spacing(3.125), boxShadow: theme.shadows[0] }, theme.typography.subtitle2), { '& .MuiChip-icon': {
             marginLeft: isAr ? '-6px' : '5px',
             marginRight: isAr ? '5px' : '-6px'
         } }));
@@ -44,6 +45,6 @@ var Image = styled('img')(function (_a) {
 var Header = function (_a) {
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
-    return (_jsxs(ScreenContainerStyled, { children: [_jsx(TitleStyled, { children: t('your_brand_details') }), _jsx(ChipStyled, { isAr: isAr, label: t('signed_up'), icon: _jsx(Image, { src: ICONS_NAMES.SIGNED_UP_SUCCESS }) })] }));
+    return (_jsxs(ScreenContainerStyled, __assign({ sx: { mt: 3 } }, { children: [_jsx(TitleStyled, { children: t('your_brand_details') }), _jsx(ChipStyled, { isAr: isAr, label: t('signed_up'), icon: _jsx(Image, { src: ICONS_NAMES.SIGNED_UP_SUCCESS }) })] })));
 };
 export default React.memo(Header);

package/build/features/business/screens/BrandDetails/LicenseInfo.js

@@ -15,15 +15,11 @@ import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import { useAppSelector, useLanguage } from '../../../../hooks';
 import { ScreenContainer } from '../../../shared/Containers';
-import Input from '../../../shared/Input';
+import Input from '../../../shared/TextField';
 import { businessSelector } from '../../../app/business/businessStore';
-var InputStyled = styled(Input)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        opacity: 1,
-        '& .MuiInputBase-input': { cursor: 'auto', color: theme.palette.text.primary }
-    });
-});
+var InputStyled = styled(Input)(function () { return ({
+    '& .MuiInputBase-input': { cursor: 'auto' }
+}); });
 var LicenseInfo = function (_a) {
     var _b;
     var t = useTranslation().t;
@@ -33,6 +29,6 @@ var LicenseInfo = function (_a) {
     var getLicenseNumber = React.useMemo(function () { var _a; return ((_a = entity === null || entity === void 0 ? void 0 : entity.license) === null || _a === void 0 ? void 0 : _a.number) || ''; }, [entity]);
     var getLicenseName = React.useMemo(function () { var _a, _b; return t((isAr ? (_a = entity === null || entity === void 0 ? void 0 : entity.legal_name) === null || _a === void 0 ? void 0 : _a.ar : (_b = entity === null || entity === void 0 ? void 0 : entity.legal_name) === null || _b === void 0 ? void 0 : _b.en) || ''); }, [entity]);
     var name = getLicenseNumber ? "".concat(getLicenseNumber, " - ").concat(getLicenseName) : getLicenseName;
-    return (_jsx(ScreenContainer, __assign({ sx: { mt: 1.5 } }, { children: _jsx(InputStyled, { label: t('license_info'), readOnly: true, value: name }) })));
+    return (_jsx(ScreenContainer, __assign({ sx: { mt: 1.5 } }, { children: _jsx(InputStyled, { label: t('license_info'), inputProps: { readOnly: true }, value: name }) })));
 };
 export default React.memo(LicenseInfo);

package/build/features/business/screens/BrandDetails/SalesChannel.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { alpha, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { useAppSelector } from '../../../../hooks';
 import Text from '../../../../components/Text';
@@ -24,18 +24,22 @@ var LabelContainerStyled = styled(Box)(function (_a) {
     return ({
         display: 'flex',
         justifyContent: 'flex-start',
-        padding: theme.spacing(0, 2.5, 0.25, 2.5)
+        padding: theme.spacing(0, 3, 0.25, 3)
     });
 });
 export 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) }));
+    return ({
+        color: theme.palette.text.secondary,
+        fontWeight: theme.typography.fontWeightRegular,
+        fontSize: theme.spacing(1.375)
+    });
 });
 var ChipContainerStyled = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'block',
-        padding: theme.spacing(0, 2.5, 1.25, 2.5)
+        padding: theme.spacing(0, 3, 1.25, 3)
     });
 });
 var SalesChannel = function (_a) {
@@ -43,6 +47,6 @@ var SalesChannel = function (_a) {
     var t = useTranslation().t;
     var data = useAppSelector(businessSelector).data;
     var channels = ((_c = (_b = data.verify.responseBody) === null || _b === void 0 ? void 0 : _b.brand) === null || _c === void 0 ? void 0 : _c.channel_services) || [];
-    return (_jsxs(ScreenContainer, __assign({ sx: { mt: 1.5 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('sales_channels') }) }), _jsx(ChipContainerStyled, { children: channels.map(function (channel, index) { return (_jsx(Chip, { label: t("".concat(channel.code, "_label")), sx: { marginInlineEnd: index !== channels.length - 1 ? '8px' : '0px', marginTop: '8px' } }, index)); }) })] })));
+    return (_jsxs(ScreenContainer, __assign({ sx: { mt: 3 } }, { children: [_jsx(LabelContainerStyled, { children: _jsx(InputLabelStyled, { children: t('sales_channels') }) }), _jsx(ChipContainerStyled, { children: channels.map(function (channel, index) { return (_jsx(Chip, { label: t("".concat(channel.code, "_label")), sx: { marginInlineEnd: index !== channels.length - 1 ? '8px' : '0px', marginTop: '8px' } }, index)); }) })] })));
 };
 export default React.memo(SalesChannel);

package/build/features/business/screens/BusinessActivities/ActivityList.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { ActivitiesIsIc, Activity } from '../../../../@types';
+export declare const NameContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    align?: "right" | "left" | "inherit" | "center" | "justify" | undefined;
+    children?: React.ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    isSelected?: boolean | undefined;
+    isAr?: boolean | undefined;
+}, {}, {}>;
+interface ActivityListProps {
+    data: {
+        activityList: Array<ActivitiesIsIc>;
+        dataVerification: any;
+    };
+    activities: Array<ActivitiesIsIc>;
+    selectedActivities: Array<Activity>;
+    updateActivities: (activities: Array<ActivitiesIsIc>) => void;
+    updateSelectedActivities: (activities: Array<Activity>) => void;
+}
+declare const ActivityList: ({ data, activities, selectedActivities, updateSelectedActivities, updateActivities }: ActivityListProps) => JSX.Element;
+export default ActivityList;

package/build/features/business/screens/BusinessActivities/ActivityList.js

@@ -0,0 +1,265 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { alpha, styled, useTheme } from '@mui/material/styles';
+import { useLanguage } from '../../../../hooks';
+import { ThemeMode } from '../../../../@types';
+import SimpleList from '../../../../components/SimpleList';
+import Collapse from '../../../../components/Collapse';
+import ExpandIcon from '../../../../components/ExpandIcon';
+import Text from '../../../../components/Text';
+import { isExist, groupSectionWithSelectedActivitiesAtBeginning, hasVerifiedValue, filterActivitiesByName } from '../../../../utils';
+import { ScreenContainer } from '../../../shared/Containers';
+import Search from '../../../shared/Search';
+import CheckIcon from '../../../shared/CheckIcon';
+import DropDownStyle from '../../../shared/DropDownStyle';
+import CustomChip from '../../../shared/Chip/Chip';
+import ClearIcon from '../../../shared/ClearIcon';
+var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: theme.spacing(2, 3, 2, 3),
+        background: theme.palette.mode === ThemeMode.DARK ? theme.palette.background.paper : theme.palette.common.white,
+        borderBottom: "1px solid ".concat(alpha(theme.palette.common.black, 0.1)),
+        paddingBottom: theme.spacing(1)
+    });
+});
+var ChipStyled = styled(CustomChip)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        padding: 0,
+        borderRadius: theme.spacing(3),
+        boxShadow: theme.shadows[9],
+        marginInlineEnd: theme.spacing(1),
+        marginBottom: theme.spacing(1),
+        maxWidth: 'unset',
+        height: 'unset',
+        '& .MuiChip-label': {
+            whiteSpace: 'pre-line',
+            paddingLeft: theme.spacing(1),
+            paddingRight: theme.spacing(1),
+            paddingTop: theme.spacing(0.5),
+            paddingBottom: theme.spacing(0.5),
+            display: 'flex',
+            gap: theme.spacing(1)
+        }
+    });
+});
+var ChipTextStyled = styled(Box)(function () { return ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 0.625
+}); });
+var ScreenContainerStyled = styled(ScreenContainer)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        borderBottom: "1px solid ".concat(theme.palette.divider)
+    });
+});
+var ExpandIconStyled = styled(ExpandIcon)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        width: theme.spacing(1.375),
+        height: theme.spacing(1.375)
+    });
+});
+export var NameContainer = styled(Text, { shouldForwardProp: function (prop) { return !['isSelected', 'isAr'].includes(prop.toString()); } })(function (_a) {
+    var theme = _a.theme, isSelected = _a.isSelected, isAr = _a.isAr;
+    return (__assign(__assign({ color: theme.palette.mode === ThemeMode.DARK ? theme.palette.common.white : theme.palette.text.primary }, theme.typography.button), { textAlign: isAr ? 'right' : 'left', fontWeight: isSelected ? theme.typography.fontWeightMedium : theme.typography.fontWeightLight, paddingInlineEnd: theme.spacing(1), textTransform: 'none' }));
+});
+var ListItem = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+        paddingInlineStart: theme.spacing(2),
+        paddingInlineEnd: theme.spacing(2),
+        paddingTop: theme.spacing(1.25),
+        paddingBottom: theme.spacing(1.25),
+        alignItems: 'center',
+        borderBottom: "1px solid ".concat(theme.palette.divider),
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover
+        }
+    });
+});
+var ListItemContainer = styled(Box)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%'
+}); });
+var SimpleListStyled = styled((SimpleList))(function () { return ({
+    height: 'fit-content',
+    maxHeight: 'calc(100vh - 355px)',
+    paddingTop: 0
+}); });
+var DivisionListStyled = styled((SimpleList))(function () { return ({
+    height: 'fit-content'
+}); });
+var ActivityListStyled = styled((SimpleList))(function () { return ({
+    height: 'fit-content'
+}); });
+var ActivityList = function (_a) {
+    var data = _a.data, activities = _a.activities, selectedActivities = _a.selectedActivities, updateSelectedActivities = _a.updateSelectedActivities, updateActivities = _a.updateActivities;
+    var _b = React.useState(''), subIndex = _b[0], setSubIndex = _b[1];
+    var _c = React.useState(''), subItemIndex = _c[0], setSubItemIndex = _c[1];
+    var isAr = useLanguage().isAr;
+    var theme = useTheme();
+    var activityList = data.activityList, dataVerification = data.dataVerification;
+    var isActivityVerified = function (item) {
+        return hasVerifiedValue(dataVerification, "activities.".concat(item.id));
+    };
+    var handleOpenSubMenu = function (index) {
+        if (subIndex === index)
+            setSubIndex('');
+        else
+            setSubIndex(index);
+    };
+    var handleOpenSubItem = function (index) {
+        if (subItemIndex === index)
+            setSubItemIndex('');
+        else
+            setSubItemIndex(index);
+    };
+    var onSelectItem = function (activity) {
+        var isActivityExists = selectedActivities === null || selectedActivities === void 0 ? void 0 : selectedActivities.find(function (ac) { return ac.id === activity.id; });
+        if (isActivityExists) {
+            var updatedIdList = selectedActivities === null || selectedActivities === void 0 ? void 0 : selectedActivities.filter(function (ac) { return ac.id !== activity.id; });
+            if (!updatedIdList.length) {
+                updateSelectedActivities([]);
+                return;
+            }
+            if (updatedIdList.length >= 1)
+                updateSelectedActivities(updatedIdList);
+            return;
+        }
+        var activities = selectedActivities ? __spreadArray(__spreadArray([], selectedActivities, true), [activity], false) : [activity];
+        updateSelectedActivities(activities);
+    };
+    var getSelectedActivityName = function (item) {
+        var _a, _b, _c;
+        var code = item === null || item === void 0 ? void 0 : item.isic_code;
+        var name = isAr ? ((_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.ar) || ((_b = item === null || item === void 0 ? void 0 : item.name) === null || _b === void 0 ? void 0 : _b.en) : (_c = item === null || item === void 0 ? void 0 : item.name) === null || _c === void 0 ? void 0 : _c.en;
+        return code ? "".concat(code, " - ").concat(name) : name;
+    };
+    var getSelectedActivitySectionFlag = function (section) {
+        var findSection = selectedActivities === null || selectedActivities === void 0 ? void 0 : selectedActivities.find(function (_a) {
+            var id = _a.id;
+            return id === section.id;
+        });
+        var findDivision = selectedActivities === null || selectedActivities === void 0 ? void 0 : selectedActivities.find(function (_a) {
+            var _b;
+            var id = _a.id;
+            return (_b = section.divisions) === null || _b === void 0 ? void 0 : _b.find(function (division) { return division.id === id; });
+        });
+        var findActivity = selectedActivities === null || selectedActivities === void 0 ? void 0 : selectedActivities.find(function (_a) {
+            var _b;
+            var id = _a.id;
+            return (_b = section.divisions) === null || _b === void 0 ? void 0 : _b.find(function (division) { var _a; return (_a = division === null || division === void 0 ? void 0 : division.activities) === null || _a === void 0 ? void 0 : _a.find(function (activity) { return activity.id === id; }); });
+        });
+        if (findSection || findDivision || findActivity)
+            return section.id;
+        return '';
+    };
+    var getSelectedActivityDivisionFlag = function (division) {
+        var findDivision = selectedActivities === null || selectedActivities === void 0 ? void 0 : selectedActivities.find(function (_a) {
+            var id = _a.id;
+            return division.id === id;
+        });
+        var findActivity = selectedActivities === null || selectedActivities === void 0 ? void 0 : selectedActivities.find(function (_a) {
+            var _b;
+            var id = _a.id;
+            return (_b = division.activities) === null || _b === void 0 ? void 0 : _b.find(function (activity) { return activity.id === id; });
+        });
+        if (findDivision || findActivity)
+            return division.id;
+        return '';
+    };
+    var getSelectedActivityFlag = function (activity) {
+        var findActivity = selectedActivities === null || selectedActivities === void 0 ? void 0 : selectedActivities.find(function (_a) {
+            var id = _a.id;
+            return id === activity.id;
+        });
+        if (findActivity)
+            return activity.id;
+        return '';
+    };
+    var handleSearch = function (value) {
+        if (!value) {
+            var list = groupSectionWithSelectedActivitiesAtBeginning(activityList, selectedActivities);
+            if ((list === null || list === void 0 ? void 0 : list.length) > 0) {
+                updateActivities(list);
+                return;
+            }
+            updateActivities(activityList);
+            return;
+        }
+        var filteredList = filterActivitiesByName(activityList, value);
+        updateActivities(filteredList);
+    };
+    React.useEffect(function () {
+        if (selectedActivities === null || selectedActivities === void 0 ? void 0 : selectedActivities.length) {
+            var item = isExist(activityList || [], selectedActivities.map(function (item) { return item.id; }));
+            if (item)
+                setSubIndex(item.id);
+        }
+    }, [selectedActivities]);
+    return (_jsxs(ScreenContainerStyled, { children: [_jsx(Collapse, __assign({ in: !!(selectedActivities === null || selectedActivities === void 0 ? void 0 : selectedActivities.length) }, { children: _jsx(BoxStyled, { children: (selectedActivities || []).map(function (activity, index) {
+                        return (_jsx(ChipStyled, { label: _jsxs(ChipTextStyled, { children: [getSelectedActivityName(activity), _jsx(ClearIcon, { sx: { position: 'relative', top: theme.spacing(0.1875) }, onClick: function () { return onSelectItem(activity); } })] }) }, index));
+                    }) }) })), _jsx(Search, { sx: { p: 0, ml: 3, mr: 3, mt: 1 }, onSearchValue: handleSearch, placeholder: 'search_activities_placeholder' }), _jsx(DropDownStyle, __assign({ sx: { mt: 1, mb: 1.25, boxShadow: 'none' }, anchorEl: true }, { children: _jsx(SimpleListStyled, { space: 292, list: activities, listItemProps: { sx: { padding: 0, margin: 0, '&:hover': { background: 'none' } } }, onSelectItem: function (section) {
+                        var isDivisionNotAvailable = !section.divisions || section.divisions.length === 0;
+                        if (isDivisionNotAvailable)
+                            onSelectItem(section);
+                        else
+                            handleOpenSubMenu(section.id);
+                    }, renderItem: function (section) {
+                        var _a;
+                        var isDivisionNotAvailable = !section.divisions || ((_a = section.divisions) === null || _a === void 0 ? void 0 : _a.length) === 0;
+                        var showCheck = section.id === getSelectedActivitySectionFlag(section) && isDivisionNotAvailable;
+                        return (_jsxs(ListItemContainer, { children: [_jsxs(ListItem, { children: [_jsx(NameContainer, __assign({ isAr: isAr, isSelected: section.id === getSelectedActivitySectionFlag(section) }, { children: getSelectedActivityName(section) })), showCheck ? (_jsx(CheckIcon, { sx: { width: theme.spacing(2), height: theme.spacing(2) }, isVerified: isActivityVerified(section) })) : (!isDivisionNotAvailable && _jsx(ExpandIconStyled, { anchorEl: subIndex === section.id }))] }), _jsx(Collapse, __assign({ in: section.id === subIndex && !isDivisionNotAvailable }, { children: _jsx(DivisionListStyled, { sx: { pt: 0, pb: 0 }, list: (!isDivisionNotAvailable && section.divisions) || [], onSelectItem: function (division, e) {
+                                            e.stopPropagation();
+                                            var isOnlyOneItem = !division.activities || division.activities.length <= 1;
+                                            if (isOnlyOneItem)
+                                                onSelectItem(division);
+                                            else
+                                                handleOpenSubItem(division.id);
+                                        }, listItemProps: { sx: { padding: 0, margin: 0, '&:hover': { background: 'none' } } }, renderItem: function (division, idx) {
+                                            var _a;
+                                            var isOnlyOneItem = !division.activities || ((_a = division.activities) === null || _a === void 0 ? void 0 : _a.length) <= 1;
+                                            var showCheck = division.id === getSelectedActivityDivisionFlag(division) && isOnlyOneItem;
+                                            return (_jsxs(ListItemContainer, { children: [_jsxs(ListItem, { children: [_jsx(NameContainer, __assign({ isAr: isAr, isSelected: division.id === getSelectedActivityDivisionFlag(division), sx: {
+                                                                    paddingInlineStart: theme.spacing(1)
+                                                                } }, { children: getSelectedActivityName(division) })), showCheck ? (_jsx(CheckIcon, { sx: { width: theme.spacing(2), height: theme.spacing(2) }, isVerified: isActivityVerified(division) })) : (!isOnlyOneItem && _jsx(ExpandIconStyled, { anchorEl: subItemIndex === division.id }))] }), _jsx(Collapse, __assign({ in: division.id === subItemIndex && !isOnlyOneItem }, { children: _jsx(ActivityListStyled, { sx: { pt: 0, pb: 0 }, list: (!isOnlyOneItem && division.activities) || [], onSelectItem: function (activity, e) {
+                                                                e.stopPropagation();
+                                                                onSelectItem(activity);
+                                                            }, listItemProps: { sx: { padding: 0, margin: 0, '&:hover': { background: 'none' } } }, renderItem: function (activity, idx) {
+                                                                return (_jsxs(ListItem, { children: [_jsx(NameContainer, __assign({ sx: {
+                                                                                paddingInlineStart: theme.spacing(2)
+                                                                            }, isAr: isAr, isSelected: activity.id === getSelectedActivityFlag(activity) }, { children: getSelectedActivityName(activity) })), activity.id === getSelectedActivityFlag(activity) && (_jsx(CheckIcon, { sx: { width: theme.spacing(2), height: theme.spacing(2) }, isVerified: isActivityVerified(activity) }))] }, idx));
+                                                            } }) }))] }, idx));
+                                        } }) }))] }));
+                    } }) }))] }));
+};
+export default ActivityList;

package/build/features/business/screens/BusinessActivities/BusinessActivities.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface BusinessActivitiesProps {
+}
+declare const BusinessActivities: ({}: BusinessActivitiesProps) => JSX.Element;
+export default BusinessActivities;

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

@@ -0,0 +1,90 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, alpha, styled } from '@mui/material';
+import { useAppDispatch, useAppSelector } from '../../../../hooks';
+import { ThemeMode } from '../../../../@types';
+import Button from '../../../../components/Button';
+import { businessSelector, storeActivities } from '../../../app/business/businessStore';
+import { handleNextScreenStep, handlePrevScreenStep } from '../../../../app/settings';
+import { ContainerWithHeader } from '../../../shared/Containers';
+import ActivityList from './ActivityList';
+var BoxStyled = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        borderTop: alpha(theme.palette.common.black, 0.05),
+        marginLeft: theme.spacing(3),
+        marginRight: theme.spacing(3),
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1),
+        display: 'flex',
+        justifyContent: 'end',
+        alignItems: 'center',
+        gap: theme.spacing(0.5)
+    });
+});
+var ButtonStyled = styled(Button)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        minHeight: theme.spacing(5),
+        width: theme.spacing(12.5),
+        fontWeight: 600
+    });
+});
+var FlatButtonStyled = styled(ButtonStyled)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        color: theme.palette.mode === ThemeMode.DARK ? theme.palette.secondary.dark : theme.palette.text.disabled
+    });
+});
+var ContainedButtonStyled = styled(ButtonStyled)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        paddingInlineEnd: theme.spacing(0.75)
+    });
+});
+var BusinessActivities = function (_a) {
+    var dispatch = useAppDispatch();
+    var t = useTranslation().t;
+    var _b = React.useState([]), activities = _b[0], setActivities = _b[1];
+    var _c = React.useState([]), selectedActivities = _c[0], setSelectedActivities = _c[1];
+    var data = useAppSelector(businessSelector).data;
+    var _d = data || {}, verify = _d.verify, businessTypeData = _d.businessTypeData, activitiesData = _d.activitiesData;
+    var activityList = (businessTypeData.responseBody || {}).activityList;
+    var entity = (verify.responseBody || {}).entity;
+    React.useEffect(function () {
+        if ((activityList === null || activityList === void 0 ? void 0 : activityList.length) > 0) {
+            setActivities(activityList);
+        }
+    }, [activityList]);
+    React.useEffect(function () {
+        var _a;
+        if ((_a = activitiesData === null || activitiesData === void 0 ? void 0 : activitiesData.activities) === null || _a === void 0 ? void 0 : _a.length) {
+            setSelectedActivities(activitiesData.activities);
+        }
+    }, [activitiesData === null || activitiesData === void 0 ? void 0 : activitiesData.activities]);
+    var onSubmit = function () {
+        dispatch(storeActivities(selectedActivities));
+        dispatch(handleNextScreenStep());
+    };
+    var onBack = function () {
+        dispatch(handlePrevScreenStep());
+    };
+    return (_jsxs(ContainerWithHeader, __assign({ titleBoxSx: { mb: 0 }, onBack: function () { return onBack(); }, title: 'business_activities_title', description: 'business_activities_description' }, { children: [_jsx(ActivityList, { data: { activityList: activityList, dataVerification: entity === null || entity === void 0 ? void 0 : entity.data_verification }, activities: activities, selectedActivities: selectedActivities, updateActivities: function (activities) {
+                    setActivities(activities);
+                }, updateSelectedActivities: function (activities) {
+                    setSelectedActivities(activities);
+                } }), _jsxs(BoxStyled, { children: [_jsx(FlatButtonStyled, __assign({ onClick: function () { return onBack(); }, variant: 'text' }, { children: t('cancel') })), _jsx(ContainedButtonStyled, __assign({ onClick: function () { return onSubmit(); }, variant: 'contained' }, { children: t('confirm') }))] })] })));
+};
+export default BusinessActivities;

package/build/features/business/screens/BusinessActivities/index.d.ts

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

package/build/features/business/screens/BusinessActivities/index.js

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

package/build/features/business/screens/BusinessType/Article.js

@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { useController, useFormContext } from 'react-hook-form';
 import { useAppDispatch, useAppSelector } from '../../../../hooks';
 import { businessSelector, clearAOAFile, clearError, uploadingArticleStatus } from '../../../app/business/businessStore';
-import { UploadWrapper } from '../../../shared/UploadFile';
+import UploadWrapper from '../../../shared/UploadFile';
 import { FileRemoveType } from '../../../../constants';
 import Collapse from '../../../../components/Collapse';
 import { DocumentPurpose } from '../../../../@types';

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

@@ -19,9 +19,9 @@ import { handlePrevScreenStep, settingsSelector } from '../../../../app/settings
 import Form from '../../../../components/Form';
 import Collapse from '../../../../components/Collapse';
 import { useLanguage } from '../../../../hooks';
-import ScreenContainer from '../../../shared/Containers/ScreenContainer';
+import { ContainerWithHeader } from '../../../shared/Containers';
 import { businessSelector, clearError, updateLeadBusinessType } from '../../../app/business/businessStore';
-import { BusinessType as Type } from '../../../../@types';
+import { DropDownMode, BusinessType as Type } from '../../../../@types';
 import Button from '../../../shared/Button';
 import { deepCopy, isKW, isOtherLicense, isSA } from '../../../../utils';
 import { KWLicenseValidationSchema, LicenseValidationSchema } from './validation';
@@ -42,12 +42,14 @@ var BusinessType = function (_a) {
     var settingsData = useAppSelector(settingsSelector).data;
     var _c = data.businessTypeData, selectedLicense = _c.selectedLicense, licenseNumber = _c.licenseNumber, entityLegalName = _c.entityLegalName, certificateId = _c.certificateId, articleId = _c.articleId, selectedEntityLicense = _c.selectedEntityLicense, responseBody = _c.responseBody;
     var entityLicenseList = (responseBody === null || responseBody === void 0 ? void 0 : responseBody.entityLicenseList) || [];
+    var isPopupMode = settingsData.dropDownOpenMode === DropDownMode.popup;
     var t = useTranslation().t;
     var isAr = useLanguage().isAr;
     var dispatch = useAppDispatch();
     var _d = React.useState(), listActive = _d[0], setListActive = _d[1];
     var handleMenuClick = function (flag) {
-        setListActive(flag);
+        if (!isPopupMode)
+            setListActive(flag);
     };
     var isSACountry = React.useMemo(function () { return isSA(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
     var isKWCountry = React.useMemo(function () { return isKW(settingsData.businessCountry.iso2); }, [settingsData.businessCountry.iso2]);
@@ -93,6 +95,6 @@ var BusinessType = function (_a) {
     var showEntityList = isKWCountry ? hasEntityList && !isLicenseListActive && isCR : hasEntityList && !isLicenseListActive;
     var disabled = !methods.formState.isValid || !!error || uploading || uploadingArticle;
     var disableBack = !data.otpData.isNID;
-    return (_jsx(ScreenContainer, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(LicenseType, { show: !listActive && !isSACountry }), _jsx(EntityLicenseList, { show: showEntityList, onListOpen: function () { return handleMenuClick(ListType.EntityLicenseList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(LicenseList, { show: showLicenseList && !isEntityLicenseListActive, onListOpen: function () { return handleMenuClick(ListType.LicenseList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(EntityName, { show: !isAnyListActive && !isSACountry && isCR }), _jsx(LicenseNumber, { show: !isSACountry ? !isAnyListActive && isCR : !isAnyListActive }), _jsx(LicenseCertificate, { show: !isAnyListActive && !isSACountry && isCR }), _jsx(Article, { show: !isAnyListActive && !isSACountry && isCR }), _jsx(Collapse, __assign({ in: !isAnyListActive, timeout: 500 }, { children: _jsx(Button, __assign({ disableBack: disableBack, onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) }));
+    return (_jsx(ContainerWithHeader, __assign({ title: 'business_type_title', description: 'business_type_description' }, { children: _jsx(FormProvider, __assign({}, methods, { children: _jsxs(Form, __assign({ onSubmit: methods.handleSubmit(onSubmit) }, { children: [_jsx(LicenseType, { show: !listActive && !isSACountry }), _jsx(EntityLicenseList, { isPopupMode: isPopupMode, show: showEntityList, onListOpen: function () { return handleMenuClick(ListType.EntityLicenseList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(LicenseList, { isPopupMode: isPopupMode, show: showLicenseList && !isEntityLicenseListActive, onListOpen: function () { return handleMenuClick(ListType.LicenseList); }, onListClose: function () { return handleMenuClick(); } }), _jsx(EntityName, { show: !isAnyListActive && !isSACountry && isCR }), _jsx(LicenseNumber, { show: !isSACountry ? !isAnyListActive && isCR : !isAnyListActive }), _jsx(LicenseCertificate, { show: !isAnyListActive && !isSACountry && isCR }), _jsx(Article, { show: !isAnyListActive && !isSACountry && isCR }), _jsx(Collapse, __assign({ in: !isAnyListActive, timeout: 500 }, { children: _jsx(Button, __assign({ disableBack: disableBack, onBackClicked: function () { return onBack(); }, isAr: isAr, disabled: disabled, loading: loading, error: t(error || '') }, { children: t('next') })) }))] })) })) })));
 };
 export default React.memo(BusinessType);

package/build/features/business/screens/BusinessType/EntityLicenseList.d.ts

@@ -4,6 +4,7 @@ interface EntityLicenseListProps {
     onSelectLicense?: (number: string) => void;
     onListOpen?: () => void;
     onListClose?: () => void;
+    isPopupMode: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ ...rest }: EntityLicenseListProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ isPopupMode, ...rest }: EntityLicenseListProps) => JSX.Element>;
 export default _default;