@mseva/digit-ui-module-core 1.0.70 → 1.0.72

package/dist/index.modern.js

@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useRef, Fragment as Fragment$1, createContext, useCallback, useMemo, isValidElement, cloneElement, createElement, useContext, forwardRef, useReducer, StrictMode as StrictMode$1 } from 'react';
+import React, { useState, useEffect, useRef, useCallback, Fragment as Fragment$1, createContext, useMemo, isValidElement, cloneElement, createElement, useContext, forwardRef, useReducer, StrictMode as StrictMode$1 } from 'react';
 import { useQueryClient, QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import { Link, useLocation, useRouteMatch, useHistory, Switch, Route, Redirect, BrowserRouter } from 'react-router-dom';
 import { useTranslation, getI18n } from 'react-i18next';
-import { PTIcon, OBPSIcon, BillsIcon, WSICon, PGRIcon, TLIcon, MCollectIcon, FSMIcon, Loader, BackButton, CitizenInfoLabel, PTRIcon, OTPInput, CardText as CardText$1, CardLabelError as CardLabelError$1, FormStep, Dropdown, LoginIcon as LoginIcon$1, Toast, FormComposer as FormComposer$1, CardSubHeader as CardSubHeader$1, Card as Card$1, CustomButton, SubmitBar as SubmitBar$1, Hamburger, NotificationBell, Modal, CloseSvg, PropertyHouse, CaseIcon, CollectionIcon, BirthIcon, DeathIcon, FirenocIcon, HomeIcon, EditPencilIcon, LogoutIcon, Phone, NavBar, ArrowVectorDown, ArrowForward, ComplaintIcon, BPAHomeIcon, ReceiptIcon, PersonIcon, DocumentIconSolid, DropIcon, CollectionsBookmarIcons, FinanceChartIcon, SearchIcon, GalleryIcon, RemoveIcon, BreadCrumb, CameraIcon, CardLabel as CardLabel$1, TextInput as TextInput$1, DatePicker, TextArea as TextArea$1, CheckBox, LabelFieldPair as LabelFieldPair$1, MobileNumber as MobileNumber$1, PrivateRoute, Calender, DocumentIcon, SearchIconSvg, CHBIcon, GenericFileIcon, HelpIcon, NDCIcon, ADSIcone, NOCIcon, Header as Header$1, PDFSvg, DownloadImgIcon, Banner, CardHeader, Rating, SearchField, SearchAction, PopUp, DetailsCard, DownloadBtnCommon, SearchForm, Table, StatusTable, Row, LinkButton as LinkButton$1, Body } from '@mseva/digit-ui-react-components';
+import { PTIcon, OBPSIcon, BillsIcon, WSICon, PGRIcon, TLIcon, MCollectIcon, FSMIcon, Loader, BackButton, CitizenInfoLabel, PTRIcon, OTPInput, CardText as CardText$1, CardLabelError as CardLabelError$1, FormStep, Dropdown as Dropdown$1, LoginIcon as LoginIcon$1, Toast, FormComposer as FormComposer$1, CardSubHeader as CardSubHeader$1, Card as Card$1, CustomButton, SubmitBar as SubmitBar$1, Hamburger, NotificationBell, Modal, CloseSvg, PropertyHouse, CaseIcon, CollectionIcon, BirthIcon, DeathIcon, FirenocIcon, HomeIcon, EditPencilIcon, LogoutIcon, Phone, NavBar, ArrowVectorDown, ArrowForward, ComplaintIcon, BPAHomeIcon, ReceiptIcon, PersonIcon, DocumentIconSolid, DropIcon, CollectionsBookmarIcons, FinanceChartIcon, SearchIcon, GalleryIcon, RemoveIcon, BreadCrumb, CameraIcon, CardLabel as CardLabel$1, TextInput as TextInput$1, DatePicker, TextArea as TextArea$1, CheckBox, LabelFieldPair as LabelFieldPair$1, MobileNumber as MobileNumber$1, PrivateRoute, Calender, DocumentIcon, SearchIconSvg, CHBIcon, GenericFileIcon, HelpIcon, NDCIcon, ADSIcone, NOCIcon, Header as Header$1, PDFSvg, DownloadImgIcon, Banner, CardHeader, Rating, SearchField, SearchAction, PopUp, DetailsCard, DownloadBtnCommon, SearchForm, Table, StatusTable, Row, LinkButton as LinkButton$1, Body } from '@mseva/digit-ui-react-components';
 import ReactTooltip from 'react-tooltip';
 import { SurveyModal } from '@mseva/digit-ui-module-engagement';
 import { compose, applyMiddleware, createStore, combineReducers } from 'redux';
@@ -7119,17 +7119,224 @@ var propTypes = createCommonjsModule(function (module) {
   }
 });
 
-const CustomMenu = props => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "menu-wrap-position",
-    style: props.style
-  }, props.options.map((option, index) => {
-    return /*#__PURE__*/React.createElement("div", {
-      key: index,
-      onClick: () => props.onSelect(option)
-    }, /*#__PURE__*/React.createElement("p", null, props.t ? props.t(`${props.optionKey ? option[props.optionKey] : option}`) : option));
+var dropdownData = [{
+  name: "VIDEO",
+  code: "VIDEO",
+  links: [{
+    name: "BPA_CITIZEN_HOME_01_OBPS_VIDEO",
+    code: "VIDEO_1",
+    displayName: "How To Register",
+    sectionCode: "VIDEO",
+    link: "https://youtu.be/hA8Tu3M45fg",
+    isSubsection: false,
+    subsection: []
+  }]
+}, {
+  name: "OTHERS",
+  code: "OTHERS",
+  links: [{
+    name: "LIST_OF_APPROVED",
+    code: "LIST_OF_APPROVED",
+    displayName: "List of approved professional",
+    sectionCode: "OTHERS",
+    link: "",
+    isSubsection: true,
+    subsection: [{
+      name: "BPA_OTHERS_ARCHITECT",
+      code: "OTHERS_1",
+      displayName: "Architect",
+      sectionCode: "OTHERS",
+      link: "https://enaksha.lgpunjab.gov.in/list_professional.php?dsfXX=Mg=="
+    }, {
+      name: "BPA_OTHERS_BUILDING_DESIGNER_SUPERVISOR",
+      code: "OTHERS_2",
+      displayName: "Building designer and supervisor",
+      sectionCode: "OTHERS",
+      link: "https://enaksha.lgpunjab.gov.in/list_professional.php?dsfXX=MTQ="
+    }, {
+      name: "BPA_OTHERS_ENGINEER",
+      code: "OTHERS_3",
+      displayName: "Engineer",
+      sectionCode: "OTHERS",
+      link: "https://enaksha.lgpunjab.gov.in/list_professional.php?dsfXX=MTI="
+    }, {
+      name: "BPA_OTHERS_EMPANELED_ARCHITECT_LIST",
+      code: "OTHERS_4",
+      displayName: "Empaneled Architect List",
+      sectionCode: "OTHERS",
+      link: "https://enaksha.lgpunjab.gov.in/architect_sc_p.php?dsfXX=MTI="
+    }]
+  }]
+}, {
+  name: "USER_MANUALS",
+  code: "USERMANUALS",
+  links: [{
+    name: "BPA_CITIZEN_HOME_ARCHITECT_USER_MANUAL_LABEL",
+    code: "USERMANUALS_1",
+    displayName: "Professional User manual",
+    sectionCode: "USERMANUALS",
+    link: "https://sdc-uat.lgpunjab.gov.in/filestore/v1/files/viewfile/?name=pb%2FBPA%2FMarch%2F13%2F1773381471615HJwwGxBMja.pdf",
+    isSubsection: false,
+    subsection: []
+  }, {
+    name: "BPA_CITIZEN_HOME_SCRUTINY_USER_MANUAL_LABEL",
+    code: "USERMANUALS_2",
+    displayName: "Scrutiny User manual",
+    sectionCode: "USERMANUALS",
+    link: "https://sdc-uat.lgpunjab.gov.in/filestore/v1/files/viewfile/?name=pb%2FBPA%2FMarch%2F13%2F1773381813315LWyyZgRJkC.pdf",
+    isSubsection: false,
+    subsection: []
+  }]
+}, {
+  name: "SAMPLE_FILES",
+  code: "SAMPLEFILES",
+  links: [{
+    name: "BPA_CITIZEN_HOME_01_AMRITTSAR_SAMPLE_DXF",
+    code: "SAMPLEFILES_1",
+    displayName: "Sample File 01 - Amritsar",
+    sectionCode: "SAMPLEFILES",
+    link: "https://sdc-uat.lgpunjab.gov.in/edcr/rest/dcr/downloadfile?tenantId=amritsar&fileStoreId=cec63f19-d800-4fb9-9cd6-a97a55da6c8c",
+    isSubsection: false,
+    subsection: []
+  }, {
+    name: "BPA_CITIZEN_HOME_02_AMRITTSAR_SAMPLE_DXF",
+    code: "SAMPLEFILES_2",
+    displayName: "Sample File 02 - Amritsar",
+    sectionCode: "SAMPLEFILES",
+    link: "https://sdc-uat.lgpunjab.gov.in/edcr/rest/dcr/downloadfile?tenantId=amritsar&fileStoreId=3834dfdd-04e6-40f8-848c-182fe82d0d48",
+    isSubsection: false,
+    subsection: []
+  }, {
+    name: "BPA_CITIZEN_HOME_01_TESTING_SAMPLE_DXF",
+    code: "SAMPLEFILES_3",
+    displayName: "Sample File 01 - Testing",
+    sectionCode: "SAMPLEFILES",
+    link: "https://mseva-dev.lgpunjab.gov.in/edcr/rest/dcr/downloadfile?tenantId=testing&fileStoreId=ba8183a1-dcc6-4aa8-8f4d-75d525bf12e4",
+    isSubsection: false,
+    subsection: []
+  }, {
+    name: "BPA_CITIZEN_HOME_02_TESTING_SAMPLE_DXF",
+    code: "SAMPLEFILES_4",
+    displayName: "Sample File 02 - Testing",
+    sectionCode: "SAMPLEFILES",
+    link: "https://mseva-dev.lgpunjab.gov.in/edcr/rest/dcr/downloadfile?tenantId=testing&fileStoreId=ee19e32b-a3e3-4c13-86c8-e5c7cbb3993f",
+    isSubsection: false,
+    subsection: []
+  }, {
+    name: "BPA_CITIZEN_HOME_03_TESTING_SAMPLE_DXF",
+    code: "SAMPLEFILES_5",
+    displayName: "Sample File 03 - Testing",
+    sectionCode: "SAMPLEFILES",
+    link: "https://mseva-dev.lgpunjab.gov.in/edcr/rest/dcr/downloadfile?tenantId=testing&fileStoreId=edfb9c3c-4ffb-4fa2-8609-23a9ba5aff43",
+    isSubsection: false,
+    subsection: []
+  }]
+}];
+function SubsectionMenu(props) {
+  var items = props.items;
+  var onClose = props.onClose;
+  return React.createElement("ul", {
+    className: "dropdown-submenu"
+  }, items.map(function (sub) {
+    return React.createElement("li", {
+      key: sub.code,
+      className: "dropdown-item"
+    }, React.createElement("a", {
+      href: sub.link,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "dropdown-link dropdown-link--nested",
+      onClick: function () {
+        onClose();
+      }
+    }, sub.displayName));
   }));
-};
+}
+function DropdownItem(props) {
+  var linkItem = props.linkItem;
+  var onClose = props.onClose;
+  var expandState = useState(false);
+  var isExpanded = expandState[0];
+  var setIsExpanded = expandState[1];
+  if (linkItem.isSubsection) {
+    return React.createElement("li", {
+      className: "dropdown-item dropdown-item--has-sub"
+    }, React.createElement("button", {
+      className: "dropdown-link dropdown-link--sub",
+      onClick: function () {
+        setIsExpanded(!isExpanded);
+      },
+      type: "button"
+    }, React.createElement("span", null, linkItem.displayName), React.createElement("span", {
+      className: "dropdown-arrow" + (isExpanded ? " dropdown-arrow--open" : "")
+    }, "\u25B6")), isExpanded && React.createElement(SubsectionMenu, {
+      items: linkItem.subsection,
+      onClose: onClose
+    }));
+  }
+  return React.createElement("li", {
+    className: "dropdown-item"
+  }, React.createElement("a", {
+    href: linkItem.link,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "dropdown-link",
+    onClick: function () {
+      onClose();
+    }
+  }, linkItem.displayName));
+}
+function Dropdown() {
+  var openState = useState(false);
+  var isOpen = openState[0];
+  var setIsOpen = openState[1];
+  var containerRef = useRef(null);
+  var handleClickOutside = useCallback(function (e) {
+    if (containerRef.current && !containerRef.current.contains(e.target)) {
+      setIsOpen(false);
+    }
+  }, []);
+  useEffect(function () {
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+    };
+  }, [handleClickOutside]);
+  function handleClose() {
+    setIsOpen(false);
+  }
+  return React.createElement("div", {
+    className: "dropdown-container",
+    ref: containerRef
+  }, React.createElement("button", {
+    className: "dropdown-trigger",
+    onClick: function () {
+      setIsOpen(!isOpen);
+    },
+    type: "button"
+  }, React.createElement("span", null, "Resources"), React.createElement("span", {
+    className: "dropdown-caret" + (isOpen ? " dropdown-caret--open" : "")
+  }, "\u25BC")), isOpen && React.createElement("div", {
+    className: "dropdown-menu"
+  }, dropdownData.map(function (section) {
+    return React.createElement("div", {
+      key: section.code,
+      className: "dropdown-section"
+    }, React.createElement("div", {
+      className: "dropdown-section-title"
+    }, section.name.replace(/_/g, " ")), React.createElement("ul", {
+      className: "dropdown-list"
+    }, section.links.map(function (linkItem) {
+      return React.createElement(DropdownItem, {
+        key: linkItem.code,
+        linkItem: linkItem,
+        onClose: handleClose
+      });
+    })));
+  })));
+}
 
 const CitizenHomeCardWithExternalLink = ({
   header,
@@ -7140,18 +7347,25 @@ const CitizenHomeCardWithExternalLink = ({
   isInfo: _isInfo = false,
   styles
 }) => {
-  var _Digit$UserService, _user$info, _user$info$roles, _user$info2, _user$info2$roles;
+  var _Digit$UserService, _user$info, _user$info$roles, _user$info2, _user$info2$roles, _apiData$commonMaste, _apiData$commonMaste$, _apiData$commonMaste$2;
   const {
     t
   } = useTranslation();
   const user = (_Digit$UserService = Digit.UserService) === null || _Digit$UserService === void 0 ? void 0 : _Digit$UserService.getUser();
   const tenantId = localStorage.getItem("CITIZEN.CITY");
+  const stateId = Digit.ULBService.getStateId();
   const isUserLoggedIn = user === null || user === void 0 ? void 0 : user.access_token;
   const isUserRegistered = (user === null || user === void 0 ? void 0 : (_user$info = user.info) === null || _user$info === void 0 ? void 0 : (_user$info$roles = _user$info.roles) === null || _user$info$roles === void 0 ? void 0 : _user$info$roles.some(role => (role === null || role === void 0 ? void 0 : role.code) === "BPA_ARCHITECT")) || (user === null || user === void 0 ? void 0 : (_user$info2 = user.info) === null || _user$info2 === void 0 ? void 0 : (_user$info2$roles = _user$info2.roles) === null || _user$info2$roles === void 0 ? void 0 : _user$info2$roles.some(role => {
     var _role$code;
     return (role === null || role === void 0 ? void 0 : (_role$code = role.code) === null || _role$code === void 0 ? void 0 : _role$code.includes("BPA")) && (role === null || role === void 0 ? void 0 : role.tenantId) === tenantId;
   }));
-  console.log(_links, "links in CitizenHomeCardWithExternalLink");
+  const {
+    data: apiData,
+    isLoading
+  } = Digit.Hooks.useCustomMDMS(stateId, "common-masters", [{
+    name: "uiObpsHomePage"
+  }]);
+  const items = (apiData === null || apiData === void 0 ? void 0 : (_apiData$commonMaste = apiData["common-masters"]) === null || _apiData$commonMaste === void 0 ? void 0 : (_apiData$commonMaste$ = _apiData$commonMaste.uiObpsHomePage) === null || _apiData$commonMaste$ === void 0 ? void 0 : (_apiData$commonMaste$2 = _apiData$commonMaste$[0]) === null || _apiData$commonMaste$2 === void 0 ? void 0 : _apiData$commonMaste$2.sectionHeaders) || [];
   const getServiceIcon = (linkText, index) => {
     const lowerText = linkText === null || linkText === void 0 ? void 0 : linkText.toLowerCase();
     if (!!!lowerText) return;
@@ -7314,6 +7528,44 @@ const CitizenHomeCardWithExternalLink = ({
     strokeLinecap: "round",
     strokeLinejoin: "round"
   }));
+  const CardDropdown = ({
+    links,
+    index: _index = 0
+  }) => {
+    var _links$, _links$2, _links$links$, _menuOptions$;
+    const [displayMenu, setDisplayMenu] = useState(false);
+    const wrapperRef = useRef(null);
+    const colorIdx = _index % 6;
+    const menuOptions = Array.isArray(links) ? links : (links === null || links === void 0 ? void 0 : links.links) || [];
+    const titleLabel = Array.isArray(links) ? (links === null || links === void 0 ? void 0 : (_links$ = links[0]) === null || _links$ === void 0 ? void 0 : _links$.displayName) || (links === null || links === void 0 ? void 0 : (_links$2 = links[0]) === null || _links$2 === void 0 ? void 0 : _links$2.name) : (links === null || links === void 0 ? void 0 : links.displayName) || (links === null || links === void 0 ? void 0 : links.name) || (links === null || links === void 0 ? void 0 : links.title) || (links === null || links === void 0 ? void 0 : links.links) && (links === null || links === void 0 ? void 0 : (_links$links$ = links.links[0]) === null || _links$links$ === void 0 ? void 0 : _links$links$.displayName);
+    useEffect(() => {
+      const onDocClick = e => {
+        if (displayMenu && wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+          setDisplayMenu(false);
+        }
+      };
+      document.addEventListener("click", onDocClick);
+      return () => document.removeEventListener("click", onDocClick);
+    }, [displayMenu]);
+    return /*#__PURE__*/React.createElement("div", {
+      ref: wrapperRef
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `chcwe-card chcwe-card-bg-${colorIdx}`,
+      onClick: () => setDisplayMenu(!displayMenu)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: `chcwe-icon chcwe-icon-bg-${colorIdx}`
+    }, getServiceIcon((menuOptions === null || menuOptions === void 0 ? void 0 : (_menuOptions$ = menuOptions[0]) === null || _menuOptions$ === void 0 ? void 0 : _menuOptions$.i18nKey) || (links === null || links === void 0 ? void 0 : links.i18nKey))), /*#__PURE__*/React.createElement("div", {
+      className: "chcwe-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "chcwe-title"
+    }, t(titleLabel))), /*#__PURE__*/React.createElement("div", {
+      className: "chcwe-arrow-container"
+    }, /*#__PURE__*/React.createElement(ArrowIcon, null))), /*#__PURE__*/React.createElement("div", {
+      className: "action-bar-wrap-menu"
+    }, displayMenu ?
+    /*#__PURE__*/
+    React.createElement(Dropdown, null) : null));
+  };
   const renderCardContent = (link, index) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `chcwe-icon chcwe-icon-bg-${index % 6}`
   }, getServiceIcon(link.i18nKey)), /*#__PURE__*/React.createElement("div", {
@@ -7325,33 +7577,6 @@ const CitizenHomeCardWithExternalLink = ({
   }, link.description)), /*#__PURE__*/React.createElement("div", {
     className: "chcwe-arrow-container"
   }, /*#__PURE__*/React.createElement(ArrowIcon, null)));
-  const renderCardDropDownContent = link => {
-    var _link$, _link$2;
-    const [displayMenu, setDisplayMenu] = useState(false);
-    const handleRedirect = url => {
-      if (url !== null && url !== void 0 && url.navigationURL) window.open(url === null || url === void 0 ? void 0 : url.navigationURL, "_blank");
-    };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: `chcwe-card chcwe-card-bg-2`,
-      onClick: () => setDisplayMenu(!displayMenu)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `chcwe-icon chcwe-icon-bg-2`
-    }, getServiceIcon(link === null || link === void 0 ? void 0 : (_link$ = link[0]) === null || _link$ === void 0 ? void 0 : _link$.i18nKey)), /*#__PURE__*/React.createElement("div", {
-      className: "chcwe-content"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "chcwe-title"
-    }, t(link === null || link === void 0 ? void 0 : (_link$2 = link[0]) === null || _link$2 === void 0 ? void 0 : _link$2.displayName))), /*#__PURE__*/React.createElement("div", {
-      className: "chcwe-arrow-container"
-    }, /*#__PURE__*/React.createElement(ArrowIcon, null))), /*#__PURE__*/React.createElement("div", {
-      className: "action-bar-wrap-menu"
-    }, displayMenu ? /*#__PURE__*/React.createElement(CustomMenu, {
-      localeKeyPrefix: ``,
-      options: link,
-      optionKey: "name",
-      t: t,
-      onSelect: handleRedirect
-    }) : null));
-  };
   const linksToOpenInBlank = ["BPA_CITIZEN_HOME_ARCHITECT_FEEDBACK_LABEL"];
   const shouldOpenInBlank = linkName => {
     return linksToOpenInBlank === null || linksToOpenInBlank === void 0 ? void 0 : linksToOpenInBlank.includes(linkName);
@@ -7368,7 +7593,7 @@ const CitizenHomeCardWithExternalLink = ({
   const remainingUserManualLinks = _links === null || _links === void 0 ? void 0 : _links.filter(value => isUserManual(value === null || value === void 0 ? void 0 : value.displayName));
   const remainingSampleFilesLink = _links === null || _links === void 0 ? void 0 : _links.filter(value => isSampleFile(value === null || value === void 0 ? void 0 : value.displayName));
   const remainingVideoLink = _links === null || _links === void 0 ? void 0 : _links.filter(value => isVideo(value === null || value === void 0 ? void 0 : value.displayName));
-  console.log("remainingUserManualLinks", remainingUserManualLinks);
+  console.log("apiData", items, _links, remainingUserManualLinks, remainingSampleFilesLink, remainingVideoLink);
   return /*#__PURE__*/React.createElement("div", {
     className: "chcwe-root",
     style: styles ? styles : undefined
@@ -7409,11 +7634,30 @@ const CitizenHomeCardWithExternalLink = ({
     }, renderCardContent(link, index));
   }), (remainingUserManualLinks === null || remainingUserManualLinks === void 0 ? void 0 : remainingUserManualLinks.length) > 0 && /*#__PURE__*/React.createElement("div", {
     className: "card-dropdown-wrapper"
-  }, renderCardDropDownContent(remainingUserManualLinks)), (remainingSampleFilesLink === null || remainingSampleFilesLink === void 0 ? void 0 : remainingSampleFilesLink.length) > 0 && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CardDropdown, {
+    links: remainingUserManualLinks,
+    index: 0
+  })), (remainingSampleFilesLink === null || remainingSampleFilesLink === void 0 ? void 0 : remainingSampleFilesLink.length) > 0 && /*#__PURE__*/React.createElement("div", {
     className: "card-dropdown-wrapper"
-  }, renderCardDropDownContent(remainingSampleFilesLink === null || remainingSampleFilesLink === void 0 ? void 0 : remainingSampleFilesLink.sort((a, b) => a.order - b.order))), (remainingVideoLink === null || remainingVideoLink === void 0 ? void 0 : remainingVideoLink.length) > 0 && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CardDropdown, {
+    links: remainingSampleFilesLink === null || remainingSampleFilesLink === void 0 ? void 0 : remainingSampleFilesLink.sort((a, b) => a.order - b.order),
+    index: 1
+  })), (remainingVideoLink === null || remainingVideoLink === void 0 ? void 0 : remainingVideoLink.length) > 0 && /*#__PURE__*/React.createElement("div", {
     className: "card-dropdown-wrapper"
-  }, renderCardDropDownContent(remainingVideoLink))), _isInfo && Info && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CardDropdown, {
+    links: remainingVideoLink,
+    index: 2
+  }))), /*#__PURE__*/React.createElement("h2", {
+    className: "chcwe-header"
+  }, t("BPA_CITIZEN_HOME_CARD_HEADER")), /*#__PURE__*/React.createElement("div", {
+    className: "chcwe-card-container"
+  }, items.map((item, idx) => /*#__PURE__*/React.createElement("div", {
+    className: "card-dropdown-wrapper",
+    key: item.code || item.name || idx
+  }, /*#__PURE__*/React.createElement(CardDropdown, {
+    links: item,
+    index: idx
+  })))), _isInfo && Info && /*#__PURE__*/React.createElement("div", {
     className: "chcwe-info "
   }, /*#__PURE__*/React.createElement(Info, null)));
 };
@@ -11819,6 +12063,69 @@ const Header = () => {
   });
 };
 
+const OtpInput = ({
+  otp,
+  onOtpChange,
+  onVerifyOtp,
+  onResendOtp,
+  canSubmit,
+  isOtpValid
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const [timeLeft, setTimeLeft] = useState(30);
+  useEffect(() => {
+    if (timeLeft === 0) return;
+    const timer = setInterval(() => {
+      setTimeLeft(prev => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [timeLeft]);
+  const handleResendOtp = () => {
+    onResendOtp && onResendOtp();
+    setTimeLeft(30);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "input-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingLeft: "20px"
+    },
+    className: "label"
+  }, t("CS_LOGIN_OTP")), /*#__PURE__*/React.createElement(FormStep, {
+    onSelect: onVerifyOtp,
+    config: {
+      texts: {
+        submitBarLabel: t("CS_COMMON_SUBMIT")
+      }
+    },
+    t: t,
+    isDisabled: !((otp === null || otp === void 0 ? void 0 : otp.length) === 6 && canSubmit),
+    cardStyle: {
+      backgroundColor: "transparent",
+      boxShadow: "none",
+      WebkitBoxShadow: "none",
+      padding: "20px"
+    }
+  }, /*#__PURE__*/React.createElement(OTPInput, {
+    length: 6,
+    onChange: onOtpChange,
+    value: otp
+  }), timeLeft > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "resendIn"
+  }, t("CS_RESEND_ANOTHER_OTP"), " ", /*#__PURE__*/React.createElement("span", null, timeLeft), " ", t("CS_RESEND_SECONDS")) : /*#__PURE__*/React.createElement("div", {
+    className: "card-text-button resend",
+    onClick: handleResendOtp
+  }, t("CS_RESEND_OTP")), !isOtpValid && /*#__PURE__*/React.createElement(CardLabelError$1, null, t("CS_INVALID_OTP"))));
+};
+
 const setEmployeeDetail = (userObject, token) => {
   var _JSON$parse;
   let locale = ((_JSON$parse = JSON.parse(sessionStorage.getItem("Digit.locale"))) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.value) || "en_IN";
@@ -11849,9 +12156,13 @@ const Login = ({
   const [showToast, setShowToast] = useState(null);
   const [disable, setDisable] = useState(false);
   const [isForgotPasswordView, setIsForgotPasswordView] = useState(false);
+  const [showOTP, setShowOTP] = useState(false);
+  const [otp, setOtp] = useState("");
+  const [isOtpValid, setIsOtpValid] = useState(true);
+  const [canSubmit, setCanSubmit] = useState(true);
   const history = useHistory();
   useEffect(() => {
-    var _user$info, _user$info$roles, _user$info2, _user$info2$roles, _window, _window$location, _window$location$href, _user$info3, _user$info4, _user$info4$roles, _user$info5, _user$info5$roles, _user$info6, _user$info7, _user$info7$roles, _user$info8, _user$info8$roles;
+    var _user$info, _user$info$roles, _user$info2, _user$info2$roles, _window, _window$location, _window$location$href;
     if (!user) {
       return;
     }
@@ -11865,20 +12176,12 @@ const Login = ({
       var _window2, _window2$location, _window2$location$hre, _window2$location$hre2;
       redirectPath = decodeURIComponent((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$location = _window2.location) === null || _window2$location === void 0 ? void 0 : (_window2$location$hre = _window2$location.href) === null || _window2$location$hre === void 0 ? void 0 : (_window2$location$hre2 = _window2$location$hre.split("from=")) === null || _window2$location$hre2 === void 0 ? void 0 : _window2$location$hre2[1]) || "/digit-ui/employee";
     }
-    if (user !== null && user !== void 0 && (_user$info3 = user.info) !== null && _user$info3 !== void 0 && _user$info3.roles && (user === null || user === void 0 ? void 0 : (_user$info4 = user.info) === null || _user$info4 === void 0 ? void 0 : (_user$info4$roles = _user$info4.roles) === null || _user$info4$roles === void 0 ? void 0 : _user$info4$roles.length) > 0 && user !== null && user !== void 0 && (_user$info5 = user.info) !== null && _user$info5 !== void 0 && (_user$info5$roles = _user$info5.roles) !== null && _user$info5$roles !== void 0 && _user$info5$roles.every(e => e.code === "NATADMIN")) {
-      redirectPath = "/digit-ui/employee/dss/landing/NURT_DASHBOARD";
-    }
-    if (user !== null && user !== void 0 && (_user$info6 = user.info) !== null && _user$info6 !== void 0 && _user$info6.roles && (user === null || user === void 0 ? void 0 : (_user$info7 = user.info) === null || _user$info7 === void 0 ? void 0 : (_user$info7$roles = _user$info7.roles) === null || _user$info7$roles === void 0 ? void 0 : _user$info7$roles.length) > 0 && user !== null && user !== void 0 && (_user$info8 = user.info) !== null && _user$info8 !== void 0 && (_user$info8$roles = _user$info8.roles) !== null && _user$info8$roles !== void 0 && _user$info8$roles.every(e => e.code === "STADMIN")) {
-      redirectPath = "/digit-ui/employee/dss/landing/home";
-    }
-    history.replace(redirectPath);
   }, [user]);
   const onLogin = async data => {
     if (!data.city) {
       alert("Please Select City!");
       return;
     }
-    setDisable(true);
     const requestData = {
       ...data,
       userType: "EMPLOYEE"
@@ -11887,9 +12190,20 @@ const Login = ({
     delete requestData.city;
     try {
       const {
-        UserRequest: info,
+        user: users,
         ...tokens
-      } = await Digit.UserService.authenticate(requestData);
+      } = await Digit.UserService.authenticateV1(requestData);
+      const info = users[0];
+      const _data = {
+        mobileNumber: info === null || info === void 0 ? void 0 : info.mobileNumber,
+        tenantId: info === null || info === void 0 ? void 0 : info.tenantId,
+        userType: "EMPLOYEE",
+        type: "login"
+      };
+      setShowOTP(true);
+      sendOtp({
+        otp: _data
+      });
       Digit.SessionStorage.set("Employee.tenantId", info === null || info === void 0 ? void 0 : info.tenantId);
       setUser({
         info,
@@ -11897,10 +12211,10 @@ const Login = ({
       });
     } catch (err) {
       var _err$response, _err$response$data;
+      setDisable(false);
       setShowToast((err === null || err === void 0 ? void 0 : (_err$response = err.response) === null || _err$response === void 0 ? void 0 : (_err$response$data = _err$response.data) === null || _err$response$data === void 0 ? void 0 : _err$response$data.error_description) || "Invalid login credentials!");
       setTimeout(closeToast, 5000);
     }
-    setDisable(false);
   };
   const closeToast = () => {
     setShowToast(null);
@@ -11935,7 +12249,7 @@ const Login = ({
       populators: {
         name: city.name,
         customProps: {},
-        component: (props, customProps) => /*#__PURE__*/React.createElement(Dropdown, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(Dropdown$1, Object.assign({
           option: cities,
           optionKey: "i18nKey",
           select: d => props.onChange(d),
@@ -11951,6 +12265,65 @@ const Login = ({
     script.async = true;
     document.body.appendChild(script);
   }, []);
+  const resendOtp = async () => {
+    var _user$info3, _user$info4;
+    const data = {
+      mobileNumber: user === null || user === void 0 ? void 0 : (_user$info3 = user.info) === null || _user$info3 === void 0 ? void 0 : _user$info3.mobileNumber,
+      tenantId: user === null || user === void 0 ? void 0 : (_user$info4 = user.info) === null || _user$info4 === void 0 ? void 0 : _user$info4.tenantId,
+      userType: "employee",
+      type: "login"
+    };
+    const [res, err] = await sendOtp({
+      otp: data
+    });
+  };
+  async function onVerifyOtp() {
+    try {
+      var _user$info5, _user$info6;
+      setIsOtpValid(true);
+      setCanSubmit(false);
+      const requestData = {
+        username: user === null || user === void 0 ? void 0 : (_user$info5 = user.info) === null || _user$info5 === void 0 ? void 0 : _user$info5.userName,
+        password: otp,
+        tenantId: user === null || user === void 0 ? void 0 : (_user$info6 = user.info) === null || _user$info6 === void 0 ? void 0 : _user$info6.tenantId,
+        userType: "EMPLOYEE"
+      };
+      const {
+        ResponseInfo,
+        UserRequest: info,
+        ...tokens
+      } = await Digit.UserService.authenticate(requestData);
+      setUser({
+        info,
+        ...tokens
+      });
+      history.push("/digit-ui/employee");
+    } catch (e) {
+      setCanSubmit(true);
+      setIsOtpValid(false);
+    }
+  }
+  const sendOtp = async data => {
+    try {
+      var _user$info7;
+      const res = await Digit.UserService.sendOtp(data, user === null || user === void 0 ? void 0 : (_user$info7 = user.info) === null || _user$info7 === void 0 ? void 0 : _user$info7.tenantId);
+      setDisable(true);
+      return [res, null];
+    } catch (err) {
+      return [null, err];
+    }
+  };
+  const prevRef = React.useRef({});
+  const onFormValueChange = (setValue, data) => {
+    var _prev$city, _data$city;
+    const prev = prevRef.current;
+    const isChanged = (prev === null || prev === void 0 ? void 0 : (_prev$city = prev.city) === null || _prev$city === void 0 ? void 0 : _prev$city.code) !== (data === null || data === void 0 ? void 0 : (_data$city = data.city) === null || _data$city === void 0 ? void 0 : _data$city.code) || (prev === null || prev === void 0 ? void 0 : prev.username) !== (data === null || data === void 0 ? void 0 : data.username) || (prev === null || prev === void 0 ? void 0 : prev.password) !== (data === null || data === void 0 ? void 0 : data.password);
+    if (isChanged) {
+      setDisable(false);
+      setShowOTP(false);
+    }
+    prevRef.current = data;
+  };
   return isLoading || isStoreLoading ? /*#__PURE__*/React.createElement(Loader, null) :
   /*#__PURE__*/
   React.createElement(Background, null, /*#__PURE__*/React.createElement("div", {
@@ -11975,24 +12348,9 @@ const Login = ({
     onClick: onBackToLogin,
     className: "employee-back-button",
     type: "button"
-  }, "\u2190 Back to Login"), /*#__PURE__*/React.createElement("div", {
-    className: "security-banner"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontSize: "24px"
-    }
-  }, "\uD83D\uDD10"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "15px"
-    }
-  }, /*#__PURE__*/React.createElement("div", null, "Effective ", /*#__PURE__*/React.createElement("strong", null, "March 05, 2026"), ", extra login security has been enabled. Please make sure your mobile number is updated to receive OTP verification."), /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "8px",
-      fontWeight: "500"
-    }
-  }, "05 \u0A2E\u0A3E\u0A30\u0A1A, 2026 \u0A24\u0A4B\u0A02, \u0A35\u0A3E\u0A27\u0A42 \u0A32\u0A4C\u0A17\u0A07\u0A28 \u0A38\u0A41\u0A30\u0A71\u0A16\u0A3F\u0A06 \u0A38\u0A2E\u0A30\u0A71\u0A25 \u0A15\u0A40\u0A24\u0A40 \u0A17\u0A08 \u0A39\u0A48\u0964 \u0A15\u0A3F\u0A30\u0A2A\u0A3E \u0A15\u0A30\u0A15\u0A47 \u0A07\u0A39 \u0A2F\u0A15\u0A40\u0A28\u0A40 \u0A2C\u0A23\u0A3E\u0A13 \u0A15\u0A3F \u0A24\u0A41\u0A39\u0A3E\u0A21\u0A3E \u0A2E\u0A4B\u0A2C\u0A3E\u0A08\u0A32 \u0A28\u0A70\u0A2C\u0A30 OTP \u0A2A\u0A41\u0A38\u0A3C\u0A1F\u0A40\u0A15\u0A30\u0A28 \u0A2A\u0A4D\u0A30\u0A3E\u0A2A\u0A24 \u0A15\u0A30\u0A28 \u0A32\u0A08 \u0A05\u0A71\u0A2A\u0A21\u0A47\u0A1F \u0A15\u0A40\u0A24\u0A3E \u0A17\u0A3F\u0A06 \u0A39\u0A48\u0964"))), !isForgotPasswordView ? /*#__PURE__*/React.createElement(FormComposer, {
+  }, "\u2190 Back to Login"), !isForgotPasswordView ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormComposer, {
     onSubmit: onLogin,
-    isDisabled: isDisabled || disable,
+    isDisabled: disable,
     noBoxShadow: true,
     inline: true,
     submitInForm: true,
@@ -12001,6 +12359,7 @@ const Login = ({
     secondaryActionLabel: propsConfig.texts.secondaryButtonLabel,
     onSecondayActionClick: onForgotPassword,
     heading: propsConfig.texts.header,
+    onFormValueChange: onFormValueChange,
     description: "Enter your details to access your account",
     headingStyle: {
       textAlign: "left",
@@ -12016,7 +12375,14 @@ const Login = ({
       borderRadius: "8px",
       padding: "12px"
     }
-  }) : /*#__PURE__*/React.createElement("div", {
+  }), showOTP && /*#__PURE__*/React.createElement(OtpInput, {
+    otp: otp,
+    onOtpChange: setOtp,
+    onVerifyOtp: onVerifyOtp,
+    onResendOtp: resendOtp,
+    canSubmit: canSubmit,
+    isOtpValid: isOtpValid
+  })) : /*#__PURE__*/React.createElement("div", {
     className: "employee-forgot-password-content"
   }, /*#__PURE__*/React.createElement("h2", {
     style: {
@@ -12424,7 +12790,7 @@ const ForgotPassword = ({
       populators: {
         name: city.name,
         customProps: {},
-        component: (props, customProps) => /*#__PURE__*/React.createElement(Dropdown, Object.assign({
+        component: (props, customProps) => /*#__PURE__*/React.createElement(Dropdown$1, Object.assign({
           option: cities,
           optionKey: "name",
           id: city.name,
@@ -12924,7 +13290,7 @@ const ChangeCity = prop => {
     style: prop !== null && prop !== void 0 && prop.mobileView ? {
       color: "#767676"
     } : {}
-  }, /*#__PURE__*/React.createElement(Dropdown, {
+  }, /*#__PURE__*/React.createElement(Dropdown$1, {
     option: selectCityData,
     selected: selectCityData.find(cityValue => cityValue.value === (dropDownData === null || dropDownData === void 0 ? void 0 : dropDownData.value)),
     optionKey: "label",
@@ -13140,7 +13506,7 @@ const TopBar = ({
     t: t
   })), (userDetails === null || userDetails === void 0 ? void 0 : userDetails.access_token) && /*#__PURE__*/React.createElement("div", {
     className: "left"
-  }, /*#__PURE__*/React.createElement(Dropdown, {
+  }, /*#__PURE__*/React.createElement(Dropdown$1, {
     option: userOptions,
     optionKey: "name",
     select: handleUserDropdownSelection,
@@ -15074,7 +15440,18 @@ const UserProfile = ({
           });
         }
       } else if (responseInfo !== null && responseInfo !== void 0 && responseInfo.status && responseInfo.status === "200") {
+        var _location$state;
         showToast("success", t("CORE_COMMON_PROFILE_UPDATE_SUCCESS"), 5000);
+        if (location !== null && location !== void 0 && (_location$state = location.state) !== null && _location$state !== void 0 && _location$state.from.includes("/engagement/surveys")) {
+          history.push({
+            pathname: location.state.from,
+            state: {
+              surveyDetails: location.state.surveyDetails,
+              userInfo: location.state.userInfo,
+              userType: location.state.userType
+            }
+          });
+        }
       }
     } catch (error) {
       const errorObj = JSON.parse(error);
@@ -15200,7 +15577,7 @@ const UserProfile = ({
     className: "user-profile-field-wrapper"
   }, /*#__PURE__*/React.createElement(CardLabel$1, {
     className: "user-profile-label"
-  }, `${t("CORE_COMMON_PROFILE_GENDER")}`), /*#__PURE__*/React.createElement(Dropdown, {
+  }, `${t("CORE_COMMON_PROFILE_GENDER")}`), /*#__PURE__*/React.createElement(Dropdown$1, {
     selected: (gender === null || gender === void 0 ? void 0 : gender.length) === 1 ? gender[0] : gender,
     disable: (gender === null || gender === void 0 ? void 0 : gender.length) === 1 || editScreen,
     option: menu,
@@ -15273,7 +15650,7 @@ const UserProfile = ({
     className: "user-profile-field-wrapper"
   }, /*#__PURE__*/React.createElement(CardLabel$1, {
     className: "user-profile-label"
-  }, t("BPA_STATE_TYPE"), "*"), /*#__PURE__*/React.createElement(Dropdown, {
+  }, t("BPA_STATE_TYPE"), "*"), /*#__PURE__*/React.createElement(Dropdown$1, {
     t: t,
     optionKey: "state_name",
     option: (stateOptions === null || stateOptions === void 0 ? void 0 : stateOptions.sort((a, b) => a.state_name.localeCompare(b.state_name))) || [],
@@ -15284,7 +15661,7 @@ const UserProfile = ({
     className: "user-profile-field-wrapper"
   }, /*#__PURE__*/React.createElement(CardLabel$1, {
     className: "user-profile-label"
-  }, t("BPA_DISTRICT_TYPE"), "*"), /*#__PURE__*/React.createElement(Dropdown, {
+  }, t("BPA_DISTRICT_TYPE"), "*"), /*#__PURE__*/React.createElement(Dropdown$1, {
     t: t,
     optionKey: "district_name_english",
     option: (uniqueDistricts === null || uniqueDistricts === void 0 ? void 0 : uniqueDistricts.sort((a, b) => a.district_name_english.localeCompare(b.district_name_english))) || [],
@@ -15337,7 +15714,7 @@ const UserProfile = ({
     className: "user-profile-field-wrapper"
   }, /*#__PURE__*/React.createElement(CardLabel$1, {
     className: "user-profile-label"
-  }, t("BPA_STATE_TYPE"), "*"), /*#__PURE__*/React.createElement(Dropdown, {
+  }, t("BPA_STATE_TYPE"), "*"), /*#__PURE__*/React.createElement(Dropdown$1, {
     t: t,
     optionKey: "state_name",
     option: (stateOptions === null || stateOptions === void 0 ? void 0 : stateOptions.sort((a, b) => a.state_name.localeCompare(b.state_name))) || [],
@@ -15348,7 +15725,7 @@ const UserProfile = ({
     className: "user-profile-field-wrapper"
   }, /*#__PURE__*/React.createElement(CardLabel$1, {
     className: "user-profile-label"
-  }, t("BPA_DISTRICT_TYPE"), "*"), /*#__PURE__*/React.createElement(Dropdown, {
+  }, t("BPA_DISTRICT_TYPE"), "*"), /*#__PURE__*/React.createElement(Dropdown$1, {
     t: t,
     optionKey: "district_name_english",
     option: (uniqueDistrictsCorrespondent === null || uniqueDistrictsCorrespondent === void 0 ? void 0 : uniqueDistrictsCorrespondent.sort((a, b) => a.district_name_english.localeCompare(b.district_name_english))) || [],
@@ -15396,7 +15773,7 @@ const UserProfile = ({
     className: "user-profile-label-field-pair-flex"
   }, /*#__PURE__*/React.createElement(CardLabel$1, {
     className: "profile-label-margin user-profile-label-style-employee"
-  }, `${t("CORE_COMMON_PROFILE_GENDER")}`), /*#__PURE__*/React.createElement(Dropdown, {
+  }, `${t("CORE_COMMON_PROFILE_GENDER")}`), /*#__PURE__*/React.createElement(Dropdown$1, {
     selected: (gender === null || gender === void 0 ? void 0 : gender.length) === 1 ? gender[0] : gender,
     disable: (gender === null || gender === void 0 ? void 0 : gender.length) === 1 || editScreen,
     option: menu,
@@ -16826,7 +17203,7 @@ const LocationSelect = ({
       style: style.locationWrapper
     }, /*#__PURE__*/React.createElement("div", {
       className: "label"
-    }, t("CS_COMMON_CHOOSE_LOCATION"), /*#__PURE__*/React.createElement("span", null, " *")), !isLoading && /*#__PURE__*/React.createElement(Dropdown, {
+    }, t("CS_COMMON_CHOOSE_LOCATION"), /*#__PURE__*/React.createElement("span", null, " *")), !isLoading && /*#__PURE__*/React.createElement(Dropdown$1, {
       option: cityOptions,
       optionKey: "displayName",
       id: "city",
@@ -16881,7 +17258,7 @@ const MobileInput = ({
   }))));
 };
 
-const OtpInput = ({
+const OtpInput$1 = ({
   otp,
   onOtpChange,
   onVerifyOtp,
@@ -17223,7 +17600,7 @@ const NewLogin = ({
       onSendOtp: onSendOtp,
       canSubmit: canSubmit && (lastSubmittedMobile ? mobileNumber !== lastSubmittedMobile : true),
       step: step
-    }), step === "OTP" && /*#__PURE__*/React.createElement(OtpInput, {
+    }), step === "OTP" && /*#__PURE__*/React.createElement(OtpInput$1, {
       otp: otp,
       onOtpChange: setOtp,
       onVerifyOtp: onVerifyOtp,
@@ -17639,7 +18016,7 @@ const NewRegistration = ({
     className: "location-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
     className: "label"
-  }, t("CORE_COMMON_GENDER"), /*#__PURE__*/React.createElement("span", null, " *")), /*#__PURE__*/React.createElement(Dropdown, {
+  }, t("CORE_COMMON_GENDER"), /*#__PURE__*/React.createElement("span", null, " *")), /*#__PURE__*/React.createElement(Dropdown$1, {
     option: genders,
     optionKey: "name",
     id: "name",
@@ -17652,7 +18029,7 @@ const NewRegistration = ({
     selectedLanguage: selectedLanguage,
     selectedCity: selectedCity,
     mobileNumber: (_location$state4 = location.state) === null || _location$state4 === void 0 ? void 0 : _location$state4.mobileNumber
-  }), step === "OTP" && /*#__PURE__*/React.createElement(OtpInput, {
+  }), step === "OTP" && /*#__PURE__*/React.createElement(OtpInput$1, {
     otp: otp,
     onOtpChange: setOtp,
     onVerifyOtp: onVerifyOtp,
@@ -21106,6 +21483,12 @@ const Home$1 = ({
     }, /*#__PURE__*/React.createElement(Route, {
       key: index,
       path: `${path}/${code.toLowerCase()}-home`
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%"
+      }
     }, /*#__PURE__*/React.createElement("div", {
       className: "moduleLinkHomePage",
       style: {
@@ -21189,7 +21572,7 @@ const Home$1 = ({
         text: t(`BPA_CITIZEN_HOME_STAKEHOLDER_INCLUDES_INFO_LABEL`)
       }) : null,
       isInfo: code === "OBPS" ? true : false
-    }))))), /*#__PURE__*/React.createElement(Route, {
+    })))))), /*#__PURE__*/React.createElement(Route, {
       key: "faq" + index,
       path: `${path}/${code.toLowerCase()}-faq`
     }, /*#__PURE__*/React.createElement(FAQsSection, {