Added CustomErrorComponent, RoleBasedEmployeeHome, css enhancement (#…

…1407) * Added CustomErrorComponent, RoleBasedEmployeeHome, css enhancement * added new localisation module * upgrade ui component version --------- Co-authored-by: NabeelAyubee <[email protected]>
egovernments · Sep 20, 2024 · ff2e006 · ff2e006
1 parent c4b7328
commit ff2e006
Show file tree

Hide file tree

Showing 22 changed files with 232 additions and 54 deletions.
diff --git a/micro-ui/web/micro-ui-internals/example/package.json b/micro-ui/web/micro-ui-internals/example/package.json
@@ -19,7 +19,7 @@
     "@egovernments/digit-ui-module-utilities": "1.0.1-beta.39",
     "@egovernments/digit-ui-module-open-payment":"0.0.1",
     "@egovernments/digit-ui-module-engagement": "1.5.20",
-    "@egovernments/digit-ui-components": "0.0.2-beta.31",
+    "@egovernments/digit-ui-components": "0.0.2-beta.41",
     "@egovernments/digit-ui-react-components": "1.8.2-beta.13",
     "@egovernments/digit-ui-module-sandbox": "0.0.1",
     "http-proxy-middleware": "^1.0.5",

diff --git a/micro-ui/web/micro-ui-internals/example/public/index.html b/micro-ui/web/micro-ui-internals/example/public/index.html
@@ -14,7 +14,7 @@
 
   <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css/dist/index.css"/> -->
   <!-- <script src="https://s3.ap-south-1.amazonaws.com/egov-dev-assets/globalConfigs.js"></script> -->
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].32/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].34/dist/index.css" />
   <script src="%REACT_APP_GLOBAL%"></script>
 
 </head>

diff --git a/micro-ui/web/micro-ui-internals/package.json b/micro-ui/web/micro-ui-internals/package.json
@@ -72,7 +72,7 @@
   "dependencies": {
     "lodash": "4.17.21",
     "microbundle-crl": "0.13.11",
-    "@egovernments/digit-ui-components": "0.0.2-beta.31",
+    "@egovernments/digit-ui-components": "0.0.2-beta.41",
     "@egovernments/digit-ui-react-components": "1.8.2-beta.13",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/micro-ui/web/micro-ui-internals/packages/css/README.md b/micro-ui/web/micro-ui-internals/packages/css/README.md
@@ -41,6 +41,7 @@ frontend/micro-ui/web/public/index.html
 ```
 ## Changelog
 
+1.8.2-beta.24: added css for custom error component
 1.8.2-beta.23: fixed css in pgr citizen complaint detail page
 
 ### Summary for Version [1.8.2-beta.1] - 2024-06-05

diff --git a/micro-ui/web/micro-ui-internals/packages/css/package.json b/micro-ui/web/micro-ui-internals/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-css",
-  "version": "1.8.2-beta.23",
+  "version": "1.8.2-beta.24",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

diff --git a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/sandbox.scss
@@ -343,12 +343,37 @@
   }
 }
 .digit-popup-wrapper.setupMasterPopUp.alert {
-  .digit-popup-alert-content{
+  .digit-popup-alert-content {
     .digit-popup-alert-heading {
       color: #00703c;
     }
   }
 }
+
+.digit-popup-wrapper.setupMasterPopUp.error.alert {
+  .digit-popup-alert-content {
+    .digit-popup-alert-heading {
+      color: #b91800;
+    }
+  }
+}
+.digit-employee-card.customError {
+  width: 35rem;
+}
+.customErrorButton {
+  margin: auto;
+}
+.digit-employee-card.digit-landing-page-card {
+  display: flex;
+  flex-direction: column;
+}
+.digit-card-header.center {
+  text-align: center;
+}
+digit-card-text.center {
+  text-align: center;
+}
+
 .pgr-citizen-wrapper{
   .applications-list-container{
     .card{

diff --git a/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/index.js b/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/index.js
@@ -4,7 +4,7 @@ import useUpdateEvent from "./events/useUpdateEvent";
 import {
   useBulkPdfDetails, useDemandSearch, useFetchBillsForBuissnessService, useFetchCitizenBillsForBuissnessService, useFetchPayment, useGetPaymentRulesForBusinessServices, usePaymentSearch, usePaymentUpdate, useRecieptSearch
 } from "./payment";
-import { useInitStore } from "./store";
+import { useInitStore, useInitTenantConfig } from "./store";
 import useAccessControl from "./useAccessControl";
 import { useApplicationsForBusinessServiceSearch } from "./useApplicationForBillSearch";
 import useClickOutside from "./useClickOutside";
@@ -167,6 +167,7 @@ const Hooks = {
   useGetPaymentRulesForBusinessServices,
   useWorkflowDetails,
   useInitStore,
+  useInitTenantConfig,
   useClickOutside,
   useUserSearch,
   useApplicationsForBusinessServiceSearch,

diff --git a/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/store.js b/micro-ui/web/micro-ui-internals/packages/libraries/src/hooks/store.js
@@ -17,3 +17,15 @@ export const useInitStore = (stateCode, enabledModules,modulePrefix = "rainmaker
   );
   return { isLoading, error, isError, data };
 };
+
+export const useInitTenantConfig = (stateCode, enabledModules) => {
+  const { isLoading, error, isError, data } = useQuery(
+    ["initTenantConfig", stateCode, enabledModules],
+    () => StoreService.getTenantConfig(stateCode, enabledModules),
+    {
+      staleTime: Infinity,
+      enabled: Digit.Utils.getMultiRootTenant()
+    }
+  );
+  return { isLoading, error, isError, data };
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/libraries/src/services/index.js b/micro-ui/web/micro-ui-internals/packages/libraries/src/services/index.js
@@ -1,3 +1,3 @@
-import { useStore, useInitStore } from "../hooks/store";
+import { useStore, useInitStore, useInitTenantConfig } from "../hooks/store";
 
-export { useStore, useInitStore };
+export { useStore, useInitStore, useInitTenantConfig };
diff --git a/micro-ui/web/micro-ui-internals/packages/libraries/src/services/molecules/Store/service.js b/micro-ui/web/micro-ui-internals/packages/libraries/src/services/molecules/Store/service.js
@@ -55,13 +55,49 @@ export const StoreService = {
     });
     return await Promise.all(allBoundries);
   },
+  getTenantConfig: async (stateCode, enabledModules) => {
+    const tenantConfigs = await TenantConfigSearch.tenant(stateCode);
+    const tenantConfigSearch = tenantConfigs?.tenantConfigs?.length > 0 ? tenantConfigs?.tenantConfigs : null;
+    if (!tenantConfigSearch) {
+      localStorage.clear();
+      sessionStorage.clear();
+      window.location.href = `/${window?.globalPath}/user/invalid-url`;
+      return;
+      // throw new Error("Invalid URL")
+      // return;
+    }
+    const { MdmsRes } = await MdmsService.init(stateCode);
+    const stateInfo = MdmsRes["common-masters"]?.StateInfo?.[0] || {};
+    const uiHomePage = MdmsRes["common-masters"]?.uiHomePage?.[0] || {};
+    return {
+      languages: stateInfo.hasLocalisation ? stateInfo.languages : [{ label: "ENGLISH", value: Digit.Utils.getDefaultLanguage() }],
+      stateInfo: {
+        code: tenantConfigSearch?.[0]?.code,
+        name: tenantConfigSearch?.[0]?.name,
+        logoUrl: tenantConfigSearch?.[0]?.documents?.find((item) => item.type === "logoUrl")?.url,
+        statelogo: tenantConfigSearch?.[0]?.documents?.find((item) => item.type === "statelogo")?.url,
+        logoUrlWhite: tenantConfigSearch?.[0]?.documents?.find((item) => item.type === "logoUrlWhite")?.url,
+        bannerUrl: tenantConfigSearch?.[0]?.documents?.find((item) => item.type === "bannerUrl")?.url,
+      },
+      localizationModules: stateInfo.localizationModules,
+      modules:
+        MdmsRes?.tenant?.citymodule
+          ?.filter((module) => module?.active)
+          ?.filter((module) => enabledModules?.includes(module?.code))
+          ?.sort((x, y) => x?.order - y?.order) || [],
+      uiHomePage: uiHomePage,
+    };
+  },
   digitInitData: async (stateCode, enabledModules, modulePrefix) => {
     const { MdmsRes } = await MdmsService.init(stateCode);
     const stateInfo = MdmsRes["common-masters"]?.StateInfo?.[0] || {};
     const uiHomePage = MdmsRes["common-masters"]?.uiHomePage?.[0] || {};
     const tenantConfigFetch = Digit.Utils.getMultiRootTenant();
     const localities = {};
     const revenue_localities = {};
+    if (tenantConfigFetch) {
+      const tenantConfig = await StoreService.getTenantConfig(stateCode, enabledModules); // Await the async call
+    }
     const fetchTenantConfig = async () => {
       const tenantConfigs = await TenantConfigSearch.tenant(stateCode);
       const tenantConfigSearch = tenantConfigs?.tenantConfigs ? tenantConfigs?.tenantConfigs : null;
@@ -78,24 +114,34 @@ export const StoreService = {
           bannerUrl: tenantConfigFetch ? tenantConfigSearch?.[0]?.documents?.find((item) => item.type === "bannerUrl")?.url : stateInfo.bannerUrl,
         },
         localizationModules: stateInfo.localizationModules,
-        modules: MdmsRes?.tenant?.citymodule?.filter((module) => module?.active)?.filter((module) => enabledModules?.includes(module?.code))?.sort((x,y)=>x?.order-y?.order)|| [],
-        uiHomePage: uiHomePage
+        modules:
+          MdmsRes?.tenant?.citymodule
+            ?.filter((module) => module?.active)
+            ?.filter((module) => enabledModules?.includes(module?.code))
+            ?.sort((x, y) => x?.order - y?.order) || [],
+        uiHomePage: uiHomePage,
       };
     };
-    const initData = tenantConfigFetch ? await fetchTenantConfig() : {
-      languages: stateInfo.hasLocalisation ? stateInfo.languages : [{ label: "ENGLISH", value: Digit.Utils.getDefaultLanguage() }],
-      stateInfo: {
-        code: stateInfo.code,
-        name:  stateInfo.name,
-        logoUrl: stateInfo.logoUrl,
-        statelogo: stateInfo.statelogo,
-        logoUrlWhite: stateInfo.logoUrlWhite,
-        bannerUrl: stateInfo.bannerUrl,
-      },
-      localizationModules: stateInfo.localizationModules,
-      modules: MdmsRes?.tenant?.citymodule?.filter((module) => module?.active)?.filter((module) => enabledModules?.includes(module?.code))?.sort((x,y)=>x?.order-y?.order)|| [],
-      uiHomePage: uiHomePage
-    };
+    const initData = tenantConfigFetch
+      ? await fetchTenantConfig()
+      : {
+          languages: stateInfo.hasLocalisation ? stateInfo.languages : [{ label: "ENGLISH", value: Digit.Utils.getDefaultLanguage() }],
+          stateInfo: {
+            code: stateInfo.code,
+            name: stateInfo.name,
+            logoUrl: stateInfo.logoUrl,
+            statelogo: stateInfo.statelogo,
+            logoUrlWhite: stateInfo.logoUrlWhite,
+            bannerUrl: stateInfo.bannerUrl,
+          },
+          localizationModules: stateInfo.localizationModules,
+          modules:
+            MdmsRes?.tenant?.citymodule
+              ?.filter((module) => module?.active)
+              ?.filter((module) => enabledModules?.includes(module?.code))
+              ?.sort((x, y) => x?.order - y?.order) || [],
+          uiHomePage: uiHomePage,
+        };
     initData.selectedLanguage = Digit.SessionStorage.get("locale") || initData.languages[0].value;
 
     ApiCacheService.saveSetting(MdmsRes["DIGIT-UI"]?.ApiCachingSettings);
@@ -104,17 +150,15 @@ export const StoreService = {
       .map((module) => module.tenants)
       .flat()
       .reduce((unique, ele) => (unique.find((item) => item.code === ele.code) ? unique : [...unique, ele]), []);
-    initData.tenants = MdmsRes?.tenant?.tenants
-         .map((tenant) => ({ i18nKey: `TENANT_TENANTS_${tenant.code.replace(".", "_").toUpperCase()}`, ...tenant }));
-      // .filter((item) => !!moduleTenants.find((mt) => mt.code === item.code))
-      // .map((tenant) => ({ i18nKey: `TENANT_TENANTS_${tenant.code.replace(".", "_").toUpperCase()}`, ...tenant }));
+    initData.tenants = MdmsRes?.tenant?.tenants.map((tenant) => ({
+      i18nKey: `TENANT_TENANTS_${tenant.code.replace(".", "_").toUpperCase()}`,
+      ...tenant,
+    }));
+    // .filter((item) => !!moduleTenants.find((mt) => mt.code === item.code))
+    // .map((tenant) => ({ i18nKey: `TENANT_TENANTS_${tenant.code.replace(".", "_").toUpperCase()}`, ...tenant }));
 
     await LocalizationService.getLocale({
-      modules: [
-        `${modulePrefix}-common`,
-        `digit-ui`,
-        `${modulePrefix}-${stateCode.toLowerCase()}`
-      ],
+      modules: [`${modulePrefix}-common`, `digit-ui`, `digit-tenants`, `${modulePrefix}-${stateCode.toLowerCase()}`],
       locale: initData.selectedLanguage,
       tenantId: stateCode,
     });
@@ -128,9 +172,17 @@ export const StoreService = {
   },
   defaultData: async (stateCode, moduleCode, language, modulePrefix) => {
     let moduleCodes = [];
-    if(typeof moduleCode !== "string") moduleCode.forEach(code => { moduleCodes.push(modulePrefix ? `${modulePrefix}-${code.toLowerCase()}` : `${code.toLowerCase()}`) });
+    if (typeof moduleCode !== "string")
+      moduleCode.forEach((code) => {
+        moduleCodes.push(modulePrefix ? `${modulePrefix}-${code.toLowerCase()}` : `${code.toLowerCase()}`);
+      });
     const LocalePromise = LocalizationService.getLocale({
-      modules: typeof moduleCode == "string" ? modulePrefix ? [`${modulePrefix}-${moduleCode.toLowerCase()}`] : [`${moduleCode.toLowerCase()}`] : moduleCodes,
+      modules:
+        typeof moduleCode == "string"
+          ? modulePrefix
+            ? [`${modulePrefix}-${moduleCode.toLowerCase()}`]
+            : [`${moduleCode.toLowerCase()}`]
+          : moduleCodes,
       locale: language,
       tenantId: stateCode,
     });

diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/package.json b/micro-ui/web/micro-ui-internals/packages/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.31",
+    "@egovernments/digit-ui-components": "0.0.2-beta.41",
     "@egovernments/digit-ui-react-components": "1.8.2-beta.13",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/App.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/App.js
@@ -5,6 +5,7 @@ import EmployeeApp from "./pages/employee";
 import SignUp from "./pages/employee/SignUp";
 import Otp from "./pages/employee/Otp";
 import ViewUrl from "./pages/employee/ViewUrl";
+import CustomErrorComponent from "./components/CustomErrorComponent";
 
 export const DigitApp = ({ stateCode, modules, appTenants, logoUrl, initData, defaultLanding = "citizen" }) => {
   const history = useHistory();
@@ -98,6 +99,9 @@ export const DigitAppWrapper = ({ stateCode, modules, appTenants, logoUrl, initD
       }
     >
       <Switch>
+        <Route exact path={`/${window?.globalPath}/user/invalid-url`}>
+          <CustomErrorComponent />
+        </Route>
         <Route exact path={`/${window?.globalPath}/user/sign-up`}>
           <SignUp stateCode={stateCode} />
         </Route>

diff --git a/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/CustomErrorComponent.js b/micro-ui/web/micro-ui-internals/packages/modules/core/src/components/CustomErrorComponent.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation, useHistory } from "react-router-dom";
+import Background from "./Background";
+import { Button, Card, CardHeader, CardText } from "@egovernments/digit-ui-components";
+import Header from "./Header";
+
+const CustomErrorComponent = (props) => {
+  const { state = {} } = useLocation();
+  // const module = state?.module;
+  const { t } = useTranslation();
+  const stateInfo = props.stateInfo;
+
+  const history = useHistory();
+  const ModuleBasedErrorConfig = {
+    sandbox: {
+      imgUrl: `https://s3.ap-south-1.amazonaws.com/egov-qa-assets/error-image.png`,
+      infoHeader: "WRONG_TENANT_SIGN_UP",
+      infoMessage: "WRONG_TENANT_SIGN_UP_MESSAGE",
+      buttonInfo: "WRONG_TENANT_SIGN_UP_BUTTON",
+      action: () => {
+        history.push(`/${window.globalPath}/`);
+      },
+    },
+  };
+  const config = ModuleBasedErrorConfig["sandbox"];
+
+  return (
+    <Background>
+      <Card className={`digit-employee-card customError`}>
+        <Header showTenant={false} />
+        <CardHeader className={"center"}>{t(config.infoHeader)}</CardHeader>
+        <CardText className={"center"}>{t(config.infoMessage)}</CardText>
+        <Button
+          className="customErrorButton"
+          label={t(config?.buttonInfo)}
+          variation={"primary"}
+          isSuffix={true}
+          onClick={(e) => {
+            e.preventDefault();
+            config?.action();
+          }}
+        />
+      </Card>
+    </Background>
+  );
+};
+
+export default CustomErrorComponent;