DPG-2249: PGR Module Single spa, webpack, mfe initialized

micro-ui/web/.env

@@ -8,4 +8,4 @@ REACT_APP_PROXY_API=https://unified-dev.digit.org
 REACT_APP_PROXY_ASSETS=https://unified-dev.digit.org
 REACT_APP_GLOBAL=https://s3.ap-south-1.amazonaws.com/egov-dev-assets/globalConfigsWorkbench.js
 NODE_TLS_REJECT_UNAUTHORIZED=0;
-REACT_APP_PORT=8000
+REACT_APP_PORT=8000

micro-ui/web/lerna.json

@@ -5,6 +5,7 @@
     "packages/core",
     "packages/common",
     "packages/workbench",
+    "packages/pgr",
     "packages/ui-core",
     "packages/app1"
   ],

micro-ui/web/package.json

@@ -18,9 +18,10 @@
   "workspaces": [
     "packages/core",
     "packages/workbench",
-    "packages/common",
+    "packages/pgr",
     "packages/ui-core",
     "packages/app1"
+    "packages/common"
   ],
   "scripts": {
     "build": "yarn lerna run build",
@@ -30,12 +31,14 @@
     "build:hrms": "cd packages/hrms && yarn build",
     "build:workbench": "cd packages/workbench && yarn build",
     "build:dss": "cd packages/dss && yarn build",
+    "build:pgr": "cd packages/pgr && yarn build",
     "start:core": "cd packages/core && yarn start",
+    "start:workbench": "cd packages/workbench && yarn start",
+    "start:pgr": "cd packages/pgr && yarn start"
     "start:common": "cd packages/common && yarn start",
-    "start:workbench": "cd packages/workbench && yarn start"
   },
   "dependencies": {
     "dotenv": "^16.3.1",
     "yarn": "^1.22.21"
   }
-}
+}

micro-ui/web/packages/core/src/App.js

@@ -7,7 +7,7 @@ import useRouter from "./hooks/useRouter";
 import { DigitUI } from "./Module";
 import { initLibraries } from "@digit-ui/digit-ui-libraries-mfe";
 import { QueryClient, QueryClientProvider } from "react-query";
-import registerRemotes from "./modules/registerRemotes"
+import registerRemotes from "./modules/registerRemotes";
 
 //import { initHRMSComponents } from "@digit-ui/digit-ui-module-hrms-mfe";
 // const LandingLazy = lazy(() => import("./modules/Landing"));
@@ -23,6 +23,7 @@ initLibraries().then(() => {
   initDigitUI();
 });
 
+//registering remote apps
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -44,10 +45,10 @@ registerRemotes(queryClient)
 const App = () => {
   const { login, history, isSignedIn$, logout } = useAuth();
   const { navigate } = useRouter();
-  const enabledModules=["PT","HRMS","Workbench","DSS","Measurement"]
+  const enabledModules = ["PT", "HRMS", "Workbench", "DSS", "Measurement", "PGR"];
 
   const moduleReducers = (initData) => initData;
-  
+
   const stateCode = window?.globalConfigs?.getConfig("STATE_LEVEL_TENANT_ID") || "pb";
 
 
@@ -67,7 +68,6 @@ const App = () => {
       </div>
 
       <div>
-
         <Suspense fallback={<Loader />}>
           <Switch>
             {/* <Route path="/auth">
@@ -89,31 +89,27 @@ const App = () => {
               <MeasurementLazy />
             </Route> */}
 
-            <Route path="/">{
-              <DigitUI stateCode={stateCode} enabledModules={enabledModules}       defaultLanding="employee"  moduleReducers={moduleReducers} queryClient={queryClient}/>
-            }</Route>
+            <Route path="/">
+              {<DigitUI stateCode={stateCode} enabledModules={enabledModules} defaultLanding="employee" moduleReducers={moduleReducers} queryClient={queryClient} />}
+            </Route>
           </Switch>
         </Suspense>
       </div>
       </div>
   );
 };
 
-
-
 const initDigitUI = () => {
   window.contextPath = window?.globalConfigs?.getConfig("CONTEXT_PATH") || "digit-ui";
-  window.Digit.Customizations = {
-
-  };
+  window.Digit.Customizations = {};
   window?.Digit.ComponentRegistryService.setupRegistry({
     // PaymentModule,
     // ...paymentConfigs,
     // PaymentLinks,
   });
 
- // initHRMSComponents();
-  const enabledModules=["PT"];
+  // initHRMSComponents();
+  const enabledModules = ["PT"];
 
   const moduleReducers = (initData) => initData;
 
@@ -123,7 +119,4 @@ const initDigitUI = () => {
   // return (<DigitUI stateCode={stateCode} enabledModules={enabledModules}       defaultLanding="employee"  moduleReducers={moduleReducers} />);
 };
 
-
-
 export default App;
-

micro-ui/web/packages/core/src/modules/registerRemotes.js

@@ -15,7 +15,17 @@ export default (queryClient) => {
       queryClient,
     },
   });
-
+
+  registerApplication({
+    name: "PGR",
+    app: () => import("pgr/PGRModule"),
+    activeWhen: "/workbench-ui/employee/pgr",
+    customProps: {
+      title: "PGR is running on host",
+      queryClient,
+    },
+   });
+
   registerApplication({
     name: "Common",
     app: () => import("common/CommonModule"),

micro-ui/web/packages/core/webpack.dev.js

@@ -44,6 +44,7 @@ module.exports = () => {
           // auth: "auth@http://localhost:8082/remoteEntry.js",
           // header: "header@http://localhost:8083/remoteEntry.js",
           // dashboard: "dashboard@http://localhost:8084/remoteEntry.js",
+          pgr: "pgr@https://localhost:8087/remoteEntry.js",
           // hrms: "hrms@https://localhost:8085/remoteEntry.js",
           workbench: "workbench@https://localhost:8086/remoteEntry.js",
           common:"common@https://localhost:8090/remoteEntry.js"

micro-ui/web/packages/core/webpack.prod.js

@@ -19,6 +19,7 @@ module.exports = () => {
           // auth: `auth@${domain}/auth/remoteEntry.js`,
           // header: `header@${domain}/header/remoteEntry.js`,
           // dashboard: `dashboard@${domain}/dashboard/remoteEntry.js`,
+          pgr : `pgr@${domain}/pgr/remoteEntry.js`,
           // hrms: `hrms@${domain}/hrms/remoteEntry.js`,
           common: `common-ui@${domain}/common/remoteEntry.js`,
           workbench : `workbench_web@${domain}/workbench/remoteEntry.js`,

micro-ui/web/packages/pgr/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@digit-ui/digit-ui-module-pgr-mfe",
+  "version": "1.0.6",
+  "description": "",
+  "main": "module.js",
+  "scripts": {
+    "predeploy": "yarn build",
+    "deploy": "gh-pages -d dist",
+    "start": "webpack serve --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "homepage": "http://design-egov.github.io/auth",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "7.12.10",
+    "@babel/preset-react": "7.12.10",
+    "babel-loader": "8.2.2",
+    "gh-pages": "^5.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "babel-plugin-react-html-attrs": "^3.0.5",
+    "@babel/preset-env": "7.23.9"
+  },
+  "dependencies": {
+    "single-spa-react": "^4.6.1",
+    "@digit-ui/digit-ui-libraries-mfe": "1.0.6",
+    "@digit-ui/digit-ui-module-core-base": "1.0.8",
+    "@egovernments/digit-ui-react-components": "1.4.107",
+    "@egovernments/digit-ui-svg-components": "0.0.8",
+    "@rjsf/core": "5.10.0",
+    "@rjsf/utils": "5.10.0",
+    "@rjsf/validator-ajv8": "5.10.0",
+    "react": "17.0.1",
+    "react-date-range": "1.4.0",
+    "react-dom": "17.0.1",
+    "react-hook-form": "6.15.8",
+    "react-i18next": "11.16.2",
+    "react-query": "3.6.1",
+    "react-router-dom": "5.2.0",
+    "react-select": "5.7.4",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1",
+    "react-redux": "7.2.8",
+    "redux": "4.1.2",
+    "redux-thunk": "2.4.1",
+    "webpack-merge": "5.7.3"
+  }
+}

micro-ui/web/packages/pgr/public/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>PGR Page</title>
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <script src="https://s3.ap-south-1.amazonaws.com/egov-dev-assets/globalConfigsWorkbench.js"></script>
+  <script type="systemjs-importmap">
+    {
+      "imports": {
+        "react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
+        "react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"
+      }
+    }
+  </script>
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
+
+  <link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap" rel="stylesheet" />
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: "Oxygen", sans-serif;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="pgr-module-root"></div>
+
+</body>
+
+</html>

micro-ui/web/packages/pgr/src/EmployeeApp.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { AppContainer, EmployeeAppContainer } from "@egovernments/digit-ui-react-components";
+import Complaint from "./pages/employee/index";
+import { Provider } from "react-redux";
+import getStore from "./redux/store";
+import { PGRReducers } from "./Module";
+
+const App = () => {
+  const { isLoading, data: initData } = Digit.Hooks.useInitStore("pg", ["PT", "HRMS", "Workbench", "DSS", "Measurement", "PGR"]);
+  const moduleReducers = (initData) => ({
+    pgr: PGRReducers(initData),
+  });
+
+  return (
+    <Provider store={getStore(initData, moduleReducers(initData))}>
+      <EmployeeAppContainer>
+        <Complaint />
+      </EmployeeAppContainer>
+    </Provider>
+  );
+};
+
+export default App;

micro-ui/web/packages/pgr/src/Icons.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const Close = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFFFFF">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+  </svg>
+);

micro-ui/web/packages/pgr/src/Module.js

@@ -0,0 +1,87 @@
+import React, { useEffect } from "react";
+import PGRCard from "./components/PGRCard";
+
+import getRootReducer from "./redux/reducers";
+import CitizenApp from "./pages/citizen";
+
+import EmployeeApp from "./EmployeeApp";
+import { ComplaintIcon, CitizenHomeCard, Loader } from "@egovernments/digit-ui-react-components";
+import { PGR_CITIZEN_CREATE_COMPLAINT } from "./constants/Citizen";
+import { useTranslation } from "react-i18next";
+import { LOCALE } from "./constants/Localization";
+import { ComplaintDetails } from "./pages/employee/ComplaintDetails";
+import { CreateComplaint as CreateComplaintEmp } from "./pages/employee/CreateComplaint";
+import Inbox from "./pages/employee/Inbox";
+import ResponseEmp from "./pages/employee/Response";
+
+import { CreateComplaint as CreateComplaintCitizen } from "./pages/citizen/Create";
+import { ComplaintsList } from "./pages/citizen/ComplaintsList";
+import ComplaintDetailsPage from "./pages/citizen/ComplaintDetails";
+import SelectRating from "./pages/citizen/Rating/SelectRating";
+import ResponseCitizen from "./pages/citizen/Response";
+import InboxV2 from "./pages/employee/InboxV2";
+
+
+export const PGRReducers = getRootReducer;
+
+const PGRModule = ({ stateCode, userType, tenants }) => {
+  const moduleCode = "PGR";
+  const language = Digit.StoreData.getCurrentLanguage();
+  const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  Digit.SessionStorage.set("PGR_TENANTS", tenants);
+
+  if (userType === "citizen") {
+    return <CitizenApp />;
+  } else {
+    return <EmployeeApp />;
+  }
+};
+
+const PGRLinks = ({ matchPath }) => {
+  const { t } = useTranslation();
+  const [params, setParams, clearParams] = Digit.Hooks.useSessionStorage(PGR_CITIZEN_CREATE_COMPLAINT, {});
+
+  useEffect(() => {
+    clearParams();
+  }, []);
+
+  const links = [
+    {
+      link: `${matchPath}/create-complaint/complaint-type`,
+      i18nKey: t("CS_COMMON_FILE_A_COMPLAINT"),
+    },
+    {
+      link: `${matchPath}/complaints`,
+      i18nKey: t(LOCALE.MY_COMPLAINTS),
+    },
+  ];
+
+  return <CitizenHomeCard header={t("CS_COMMON_HOME_COMPLAINTS")} links={links} Icon={ComplaintIcon} />;
+};
+
+const componentsToRegister = {
+  PGRModule,
+  PGRLinks,
+  PGRCard,
+  PGRComplaintDetails : ComplaintDetails,
+  PGRCreateComplaintEmp : CreateComplaintEmp,
+  PGRInbox : Inbox,
+  PGRInboxV2 : InboxV2,
+  PGRResponseEmp : ResponseEmp,
+  PGRCreateComplaintCitizen : CreateComplaintCitizen,
+  PGRComplaintsList : ComplaintsList,
+  PGRComplaintDetailsPage : ComplaintDetailsPage,
+  PGRSelectRating : SelectRating,
+  PGRResponseCitzen : ResponseCitizen
+};
+
+export const initPGRComponents = () => {
+  Object.entries(componentsToRegister).forEach(([key, value]) => {
+    Digit.ComponentRegistryService.setComponent(key, value);
+  });
+};

micro-ui/web/packages/pgr/src/PGRWrapper.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { initPGRComponents } from './Module';
+import { QueryClientProvider } from 'react-query';
+import EmployeeApp from './EmployeeApp';
+import { Switch, useLocation, BrowserRouter as Router } from 'react-router-dom';
+
+const App = ({ queryClient, title }) => {
+  initPGRComponents();
+  //make way to do this job in container while registering remotes
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Router>
+        <EmployeeApp path={'/workbench-ui/employee/pgr/'} />
+      </Router>
+    </QueryClientProvider>
+  );
+};
+
+export default App;