fix(frontend): project creation wording form --> survey (#1858)

* fix(uploadArea): add note to left container

* fix(select-category): update Select Category terminology

* fix(selectCategoryUrl): /select-category path update to /select-form

* fix(uploadArea): update text

* fix(dataExtract): add note about additional feature

* fix(selectForm): update text select form to upload survey

src/frontend/e2e/01-create-new-project.spec.ts

@@ -65,7 +65,7 @@ test('create new project', async ({ browserName, page }) => {
 
   // 3. Select Category Step
   await page.getByRole('button', { name: 'NEXT' }).click();
-  await expect(page.getByText('Form Category is Required.')).toBeVisible();
+  await expect(page.getByText('Survey Type is Required.')).toBeVisible();
   await page.getByRole('combobox').click();
   await page.getByLabel('buildings').click();
   await page.getByRole('button', { name: 'NEXT' }).click();

src/frontend/src/components/ManageProject/EditTab/FormUpdateTab.tsx

@@ -47,8 +47,8 @@ const FormUpdateTab = ({ projectId }) => {
     <div className="fmtm-flex fmtm-flex-col fmtm-gap-10">
       <div className="">
         <CustomSelect
-          title="Select category"
-          placeholder="Select category"
+          title="Select Survey Type"
+          placeholder="Select Survey Type"
           data={sortedFormCategoryList}
           dataKey="id"
           valueKey="title"
@@ -59,7 +59,7 @@ const FormUpdateTab = ({ projectId }) => {
         />
         {error.categoryError && <p className="fmtm-text-primaryRed fmtm-text-base">{error.categoryError}</p>}
         <p className="fmtm-text-base fmtm-mt-2">
-          The category will be used to set the OpenStreetMap{' '}
+          The survey type will be used to set the OpenStreetMap{' '}
           <a
             href="https://wiki.openstreetmap.org/wiki/Tags"
             target="_"

src/frontend/src/components/MapComponent/OpenLayersComponent/LayerSwitcher/index.js

@@ -224,7 +224,7 @@ const LayerSwitcherControl = ({ map, visible = 'osm', pmTileLayerData = null })
     if (
       location.pathname.includes('project/') ||
       location.pathname.includes('upload-area') ||
-      location.pathname.includes('select-category') ||
+      location.pathname.includes('upload-survey') ||
       location.pathname.includes('map-features') ||
       location.pathname.includes('split-tasks')
     ) {

src/frontend/src/components/createnewproject/DataExtract.tsx

@@ -140,7 +140,7 @@ const DataExtract = ({
   }, [formValues?.dataExtractWays]);
 
   const toggleStep = (step, url) => {
-    if (url === '/select-category') {
+    if (url === '/upload-survey') {
       dispatch(
         CreateProjectActions.SetIndividualProjectDetailsData({
           ...formValues,
@@ -226,6 +226,12 @@ const DataExtract = ({
             You can use these map features to use the 'select from map' functionality from ODK that allows you to select
             the feature to collect data for.
           </span>{' '}
+          <span>
+            Additional datasets might be important if your survey consists of more than one feature to select. For
+            example, selecting a building as the primary feature, with an associated road, or nearby hospital. In this
+            case, the roads or hospital features would be uploaded separately. Note that these features will not be
+            factored in when dividing the primary features into task areas.
+          </span>
         </p>
       </div>
       <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">
@@ -327,7 +333,7 @@ const DataExtract = ({
                 btnText="PREVIOUS"
                 btnType="secondary"
                 type="button"
-                onClick={() => toggleStep(3, '/select-category')}
+                onClick={() => toggleStep(3, '/upload-survey')}
                 className="fmtm-font-bold"
               />
               <Button

src/frontend/src/components/createnewproject/SelectForm.tsx

@@ -16,7 +16,7 @@ import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
 import { Loader2 } from 'lucide-react';
 
 const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) => {
-  useDocumentTitle('Create Project: Select Category');
+  useDocumentTitle('Create Project: Upload Survey');
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
@@ -86,7 +86,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
   return (
     <div className="fmtm-flex fmtm-gap-7 fmtm-flex-col lg:fmtm-flex-row fmtm-h-full">
       <div className="fmtm-bg-white lg:fmtm-w-[20%] xl:fmtm-w-[17%] fmtm-px-5 fmtm-py-6 lg:fmtm-h-full lg:fmtm-overflow-y-scroll lg:scrollbar">
-        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Select Category</h6>
+        <h6 className="fmtm-text-xl fmtm-font-[600] fmtm-pb-2 lg:fmtm-pb-6">Upload Survey</h6>
         <p className="fmtm-text-gray-500 lg:fmtm-flex lg:fmtm-flex-col lg:fmtm-gap-3">
           <span>
             You may choose a pre-configured form, or upload a custom XLS form. Click{' '}
@@ -116,8 +116,8 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
             <div className="fmtm-flex fmtm-flex-col  fmtm-gap-6">
               <div className="">
                 <CustomSelect
-                  title="Select category"
-                  placeholder="Select category"
+                  title="Select Survey Type"
+                  placeholder="Select Survey Type"
                   data={sortedFormCategoryList}
                   dataKey="id"
                   valueKey="title"
@@ -131,7 +131,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
                   className="fmtm-max-w-[13.5rem]"
                 />
                 <p className="fmtm-text-base fmtm-mt-2">
-                  The category will be used to set the OpenStreetMap{' '}
+                  The survey type will be used to set the OpenStreetMap{' '}
                   <a
                     href="https://wiki.openstreetmap.org/wiki/Tags"
                     target="_"

src/frontend/src/components/createnewproject/UploadArea.tsx

@@ -14,7 +14,6 @@ import FileInputComponent from '@/components/common/FileInputComponent';
 import NewDefineAreaMap from '@/views/NewDefineAreaMap';
 import { checkWGS84Projection } from '@/utilfunctions/checkWGS84Projection.js';
 import { valid } from 'geojson-validation';
-import { DivideSquareIcon } from 'lucide-react';
 import useDocumentTitle from '@/utilfunctions/useDocumentTitle';
 
 const uploadAreaOptions = [
@@ -64,7 +63,7 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl
     }
     dispatch(CreateProjectActions.SetIndividualProjectDetailsData(formValues));
     dispatch(CommonActions.SetCurrentStepFormStep({ flag: flag, step: 3 }));
-    navigate('/select-category');
+    navigate('/upload-survey');
     dispatch(CreateProjectActions.SetToggleSplittedGeojsonEdit(false));
   };
   const {
@@ -214,6 +213,9 @@ const UploadArea = ({ flag, geojsonFile, setGeojsonFile, setCustomDataExtractUpl
             <p>Click on the reset button to redraw the AOI.</p>
           </div>
           <span>The total area of the AOI is also calculated and displayed on the screen.</span>
+          <span>
+            <b>Note:</b> The uploaded geojson should be in EPSG:4326 coordinate system.
+          </span>
         </div>
       </div>
       <div className="lg:fmtm-w-[80%] xl:fmtm-w-[83%] fmtm-h-full fmtm-bg-white fmtm-px-5 lg:fmtm-px-11 fmtm-py-6 lg:fmtm-overflow-y-scroll lg:scrollbar">

src/frontend/src/components/createnewproject/validation/SelectFormValidation.tsx

@@ -13,7 +13,7 @@ function SelectFormValidation(values: ProjectValues) {
   const errors: ValidationErrors = {};
 
   if (!values?.formCategorySelection) {
-    errors.formCategorySelection = 'Form Category is Required.';
+    errors.formCategorySelection = 'Survey Type is Required.';
   }
   if (values?.formWays === 'custom_form' && !values?.customFormUpload) {
     errors.customFormUpload = 'Form needs to be Uploaded.';

src/frontend/src/constants/StepFormConstants.ts

@@ -19,10 +19,10 @@ export const createProjectSteps: ICreateProjectSteps[] = [
     name: 'Upload Area',
   },
   {
-    url: '/select-category',
+    url: '/upload-survey',
     step: 3,
     label: '03',
-    name: 'Select Category',
+    name: 'Upload Survey',
   },
   {
     url: '/map-features',

src/frontend/src/constants/blockerUrl.ts

@@ -1,2 +1,2 @@
-const pathNotToBlock = ['/select-category', '/map-features', '/split-tasks', '/upload-area', '/create-project'];
+const pathNotToBlock = ['/upload-survey', '/map-features', '/split-tasks', '/upload-area', '/create-project'];
 export default pathNotToBlock;

src/frontend/src/routes.jsx

@@ -154,7 +154,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/select-category',
+        path: '/upload-survey',
         element: (
           <ProtectedRoute>
             <Suspense fallback={<div>Loading...</div>}>

src/frontend/src/views/CreateNewProject.tsx

@@ -41,7 +41,7 @@ const CreateNewProject = () => {
       case '/upload-area':
         dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 2 }));
         break;
-      case '/select-category':
+      case '/upload-survey':
         dispatch(CommonActions.SetCurrentStepFormStep({ flag: 'create_project', step: 3 }));
         break;
       case '/map-features':
@@ -69,7 +69,7 @@ const CreateNewProject = () => {
             setCustomDataExtractUpload={setCustomDataExtractUpload}
           />
         );
-      case '/select-category':
+      case '/upload-survey':
         return (
           <SelectForm
             flag="create_project"