diff --git a/apps/OpenSign/src/App.js b/apps/OpenSign/src/App.js index 76ef93ee9..500e00808 100644 --- a/apps/OpenSign/src/App.js +++ b/apps/OpenSign/src/App.js @@ -14,6 +14,7 @@ import PageNotFound from "./routes/PageNotFound"; import ForgetPassword from "./routes/ForgetPassword"; import ChangePassword from "./routes/ChangePassword"; import ReportMicroapp from "./components/ReportMicroapp"; +import LoadMf from "./routes/LoadMf"; function App() { const [isloading, setIsLoading] = useState(true); @@ -59,6 +60,7 @@ function App() { } /> } /> + } /> } /> {process.env.REACT_APP_ENABLE_SUBSCRIPTION && ( <> diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js index 0bf111c1a..4bf02a818 100644 --- a/apps/OpenSign/src/primitives/GetReportDisplay.js +++ b/apps/OpenSign/src/primitives/GetReportDisplay.js @@ -93,7 +93,7 @@ const ReportTable = ({ {List?.length > 0 ? ( <> {currentLists.map((item, index) => ( - + {index + 1} {item?.Name} {item?.Note || "-"} @@ -153,7 +153,7 @@ const ReportTable = ({ )} -
+
{List.length > 10 && ( <> {currentPage > 1 && ( diff --git a/apps/OpenSign/src/routes/LoadMf.js b/apps/OpenSign/src/routes/LoadMf.js new file mode 100644 index 000000000..2f8a43a1f --- /dev/null +++ b/apps/OpenSign/src/routes/LoadMf.js @@ -0,0 +1,84 @@ +import { Suspense } from "react"; +import { useParams } from "react-router-dom"; +import useFederatedComponent from "mf-cra"; +import React from "react"; +import Title from "../components/Title"; +function RemoteApp({ app }) { + // console.log("app ", app); + const { Component: RemoteComponent } = useFederatedComponent(app); + // console.log("RemoteComponent ", RemoteComponent); + return ( + <> + + <Suspense + fallback={ + <div style={{ height: "300px" }}> + <div + style={{ + marginLeft: "45%", + marginTop: "150px", + fontSize: "45px", + color: "#3dd3e0" + }} + className="loader-37" + ></div> + </div> + } + > + <div + style={{ + boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.33)", + backgroundColor: "#ffffff", + width: "100%", + overflow: "hidden", + borderRadius: 3, + minHeight: "70vh" + }} + > + {RemoteComponent && <RemoteComponent />} + </div> + </Suspense> + </> + ); +} +function checkObjectProperties(obj) { + // Check if all three properties exist in the object + if ( + obj && + obj.remoteName !== undefined && + obj.remoteUrl !== undefined && + obj.moduleToLoad !== undefined + ) { + return true; // All properties are present + } else { + return false; // At least one property is missing + } +} +export default function RemoteAppContainer() { + const { remoteApp } = useParams(); + + const obj = { + remoteUrl: window.location.origin + "/mfbuild/remoteEntry.js", + moduleToLoad: "./AppRoutes", + remoteName: remoteApp + }; + // console.log("obj ", obj); + const isMf = checkObjectProperties(obj); + if (isMf) { + const appToLoad = obj; + return <RemoteApp app={appToLoad} />; + } else { + return ( + <div className="flex items-center justify-center h-screen w-full bg-white rounded"> + <div className="text-center"> + <h1 className="text-[60px] lg:text-[120px] font-semibold text-black"> + 404 + </h1> + <p className="text-[30px] lg:text-[50px] text-black"> + Page Not Found + </p> + </div> + </div> + ); + } +} diff --git a/apps/OpenSign/src/routes/PlanSubscriptions.js b/apps/OpenSign/src/routes/PlanSubscriptions.js index 61784986e..740277932 100644 --- a/apps/OpenSign/src/routes/PlanSubscriptions.js +++ b/apps/OpenSign/src/routes/PlanSubscriptions.js @@ -64,7 +64,7 @@ const PlanSubscriptions = () => { style={{ backgroundColor: "white", overflowY: "auto", - maxHeight: "600px", + maxHeight: "100%", "--theme-color": "#7952b3", "--plan-width": 30 }} diff --git a/microfrontends/SignDocuments/src/Component/PageNotFound.js b/microfrontends/SignDocuments/src/Component/PageNotFound.js new file mode 100644 index 000000000..b9e912e32 --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/PageNotFound.js @@ -0,0 +1,16 @@ +import React from "react"; + +const PageNotFound = () => { + return ( + <div className="flex items-center justify-center h-screen w-full bg-white rounded"> + <div className="text-center"> + <h1 className="text-[60px] lg:text-[120px] font-semibold text-black"> + 404 + </h1> + <p className="text-[30px] lg:text-[50px] text-black">Page Not Found</p> + </div> + </div> + ); +}; + +export default PageNotFound; diff --git a/microfrontends/SignDocuments/src/Component/login.js b/microfrontends/SignDocuments/src/Component/login.js index 9995e1970..1636beff7 100644 --- a/microfrontends/SignDocuments/src/Component/login.js +++ b/microfrontends/SignDocuments/src/Component/login.js @@ -116,7 +116,8 @@ function Login() { localStorage.setItem("accesstoken", _user.sessionToken); setLoading(false); //navigate user to on signature page - navigate(`/recipientSignPdf/${id}/${contactBookId}`); + // navigate(`/recipientSignPdf/${id}/${contactBookId}`); + navigate(`/loadmf/signmicroapp/recipientSignPdf/${id}/${contactBookId}`); } } catch (error) {} } else { diff --git a/microfrontends/SignDocuments/src/Routes.js b/microfrontends/SignDocuments/src/Routes.js index e9883138b..605212871 100644 --- a/microfrontends/SignDocuments/src/Routes.js +++ b/microfrontends/SignDocuments/src/Routes.js @@ -8,6 +8,7 @@ import Login from "./Component/login"; import DraftDocument from "./Component/DraftDocument"; import PdfRequestFiles from "./Component/PdfRequestFiles"; import LegaDrive from "./Component/LegaDrive/LegaDrive"; +import PageNotFound from "./Component/PageNotFound"; // `AppRoutes` is used to define route path of app and // it expose to host app, check moduleFederation.config.js for more @@ -33,7 +34,10 @@ function AppRoutes() { {/*Add default signature of user route */} <Route path="/managesign" element={<ManageSign />} /> {/* login page route */} - <Route path="/login/:id/:userMail/:contactBookId/:serverUrl" element={<Login />} /> + <Route + path="/login/:id/:userMail/:contactBookId/:serverUrl" + element={<Login />} + /> {/* draft document route to handle and navigate route page accordiing to document status */} <Route path="/draftDocument" element={<DraftDocument />} /> {/* for user signature (need your sign route) with row level data */} @@ -42,6 +46,8 @@ function AppRoutes() { <Route path="/pdfRequestFiles/:docId" element={<PdfRequestFiles />} /> {/* lega drive route */} <Route path="/legadrive" element={<LegaDrive />} /> + {/* Page Not Found */} + <Route path="*" element={<PageNotFound />} /> </Routes> </div> );