Merge pull request #2371 from Ajay-aot/Feature/FWF-3942-form-preview-…

…screen

Feature/fwf 3942 form preview screen

forms-flow-web/src/components/Form/EditForm/FormEdit.js

@@ -571,8 +571,9 @@ const EditComponent = () => {
     fetchRestoredFormData(cloneId);
   };
 
-  const handlePreview = () => {
-    console.log("handlePreview");
+  const handlePreview = () => { 
+    const newTabUrl = `${redirectUrl}formflow/${form._id}/view-edit`; 
+    window.open(newTabUrl, "_blank"); 
   };
 
   const discardChanges = () => {
@@ -630,12 +631,13 @@ const EditComponent = () => {
         setFormSubmitted(false);
       });
   };
-  const formChange = (newForm) =>{
-    setFormChangeState(prev=>{
-      let key = null;
-      if(!prev.initial){
+
+  const formChange = (newForm) => {
+    setFormChangeState((prev) => {
+      let key = null; 
+      if (!prev.initial) {
         key = "initial";
-      }else if(!prev.changed){
+      } else if (!prev.changed) {
         key = "changed";
       }
       return key ? {...prev, [key]:true} : prev;

forms-flow-web/src/components/Form/EditForm/FormPreview.js

@@ -0,0 +1,60 @@
+import { Form } from "@aot-technologies/formio-react";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
+import { RESOURCE_BUNDLES_DATA } from "../../../resourceBundles/i18n.js";
+import { fetchFormById } from "../../../apiManager/services/bpmFormServices.js";
+import Loading from "../../../containers/Loading.js";
+
+const FormPreview = () => {
+  const lang = useSelector((state) => state.user.lang);
+  const { formId } = useParams();
+  const [form, setForm] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (formId) {
+      setLoading(true);
+      // Fetch form data by ID
+      fetchFormById(formId)
+        .then((res) => {
+          if (res.data) {
+            const { data } = res;
+            setForm(data);
+          }
+        })
+        .catch((err) => {
+          console.error(
+            "Error fetching form data:",
+            err.response?.data || err.message
+          );
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, [formId]);
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <div className="form-preview-tab">
+      <div className="preview-header-text mb-4">{form?.title}</div>
+      <div>
+        <Form
+          form={form}
+          options={{
+            disableAlerts: true,
+            noAlerts: true,
+            language: lang,
+            i18n: RESOURCE_BUNDLES_DATA,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FormPreview;

forms-flow-web/src/components/Form/index.js

@@ -1,41 +1,46 @@
 import React from "react";
 import { Route, Switch } from "react-router-dom";
 import { useSelector } from "react-redux";
-
+import PropTypes from "prop-types";
 import List from "./List";
 import SubmitList from "./SubmitList";
 import EditForm from "./EditForm";
 import Item from "./Item/index";
 import { BASE_ROUTE } from "../../constants/constants";
 import Loading from "../../containers/Loading";
 import AccessDenied from "../AccessDenied";
+import FormPreview from "./EditForm/FormPreview";
 
-let user = "";
-
-const FormDesignRoute = ({ component: Component, ...rest }) => (
-  <Route
-    {...rest}
-    render={(props) => {
-      if (user.includes('create_designs') || user.includes('view_designs')) {
+const GenericRoute = ({ component: Component, roles, ...rest }) => {
+  const userRoles = useSelector((state) => state.user.roles || []);
+
+  return (
+    <Route
+      {...rest}
+      render={(props) => {
+        if (roles) {
+          // Check for role-based access
+          if (roles.some((role) => userRoles.includes(role))) {
+            return <Component {...props} />;
+          } else {
+            return <AccessDenied userRoles={userRoles} />;
+          }
+        }
         return <Component {...props} />;
-      } else {
-        return <AccessDenied userRoles={user} />;
-      }
-    }}
-  />
-);
-const FormSubmissionRoute = ({ component: Component, ...rest }) => (
-  <Route
-    {...rest}
-    render={(props) => 
-        (<Component {...props} /> )
-    }
-  />
-);
+      }}
+    />
+  );
+};
+
+// PropTypes validation for the GenericRoute component
+GenericRoute.propTypes = {
+  component: PropTypes.elementType.isRequired,
+  roles: PropTypes.arrayOf(PropTypes.string),
+};
 
 export default React.memo(() => {
-  user = useSelector((state) => state.user.roles || []);
   const isAuthenticated = useSelector((state) => state.user.isAuthenticated);
+
   if (!isAuthenticated) {
     return <Loading />;
   }
@@ -45,14 +50,19 @@ export default React.memo(() => {
       <Switch>
         <Route exact path={`${BASE_ROUTE}formflow`} component={List} />
         <Route exact path={`${BASE_ROUTE}form`} component={SubmitList} />
-        <FormDesignRoute
+        <GenericRoute
           path={`${BASE_ROUTE}formflow/:formId?/edit`}
           component={EditForm}
+          roles={['create_designs', 'view_designs']}
         />
-        <FormSubmissionRoute
+        <GenericRoute
           path={`${BASE_ROUTE}form/:formId/`}
           component={Item}
         />
+        <GenericRoute
+          path={`${BASE_ROUTE}formflow/:formId?/view-edit`}
+          component={FormPreview}
+        />
       </Switch>
     </div>
   );

forms-flow-web/src/components/Modals/ActionModal.js

@@ -4,7 +4,6 @@ import {
   DuplicateIcon,
   ImportIcon,
   PencilIcon,
-  SaveTemplateIcon,
   CloseIcon,
   TrashIcon,
   CustomInfo,
@@ -56,17 +55,6 @@ const ActionModal = React.memo(
                   ariaLabel="Duplicate Button"
                   onClick={() => handleAction("DUPLICATE")}
                 />
-
-                <CustomButton
-                  variant="secondary"
-                  size="sm"
-                  label="Save as template"
-                  icon={<SaveTemplateIcon color="#253DF4" />}
-                  className=""
-                  dataTestid="save-template-button"
-                  ariaLabel="Save as Template"
-                  onClick={() => handleAction("SAVE_AS_TEMPLATE")}
-                />
                 <CustomButton
                   variant="secondary"
                   disabled={published}