feat(frontend): request HOT's ODK server workflow (#2595)

NSUWAL123 · web-flow · commit 3f9ad2568600 · 2025-06-14T10:31:45.000+01:00
* fix(config): fix email

* refactor(organization): request HOT's ODK server workflow

* refactor(createEditOrganizationForm): remove commented code

* refactor(organisationService): params add

* feat(oranizationForm): radiobutton to display requested odk central type, skeleton loader add

* feat(createEditOrganizationForm): options to allow users edit org odk creds

* refactor(organizationDetailsValidation): update validations to allow user edit and override ODK creds during org edit

* refactor(projectDetailsForm): update label
diff --git a/src/frontend/src/api/OrganisationService.ts b/src/frontend/src/api/OrganisationService.ts
@@ -187,12 +187,15 @@ export const PatchOrganizationDataService = (url: string, payload: any) => {
   };
 };
 
-export const ApproveOrganizationService = (url: string) => {
+export const ApproveOrganizationService = (
+  url: string,
+  params: { org_id: number; set_primary_org_odk_server: boolean },
+) => {
   return async (dispatch: AppDispatch) => {
     const approveOrganization = async (url: string) => {
       try {
         dispatch(OrganisationAction.SetOrganizationApproving(true));
-        await axios.post(url);
+        await axios.post(url, {}, { params });
         dispatch(
           CommonActions.SetSnackBar({
             message: 'Organization approved successfully.',
diff --git a/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx b/src/frontend/src/components/ApproveOrganization/OrganizationForm.tsx
@@ -10,6 +10,16 @@ import {
 } from '@/api/OrganisationService';
 import { OrganisationAction } from '@/store/slices/organisationSlice';
 import { useAppDispatch, useAppSelector } from '@/types/reduxTypes';
+import RadioButton from '@/components/common/RadioButton';
+import { radioOptionsType } from '@/models/organisation/organisationModel';
+import FormFieldSkeletonLoader from '@/components/Skeletons/common/FormFieldSkeleton';
+
+const VITE_API_URL = import.meta.env.VITE_API_URL;
+
+const odkTypeOptions: radioOptionsType[] = [
+  { name: 'odk_server_type', value: 'OWN', label: 'Own ODK server' },
+  { name: 'odk_server_type', value: 'HOT', label: "HOT's ODK server" },
+];
 
 const OrganizationForm = () => {
   const dispatch = useAppDispatch();
@@ -26,25 +36,27 @@ const OrganizationForm = () => {
   const organizationApprovalSuccess = useAppSelector(
     (state) => state.organisation.organizationApprovalStatus.isSuccess,
   );
+  const organisationFormDataLoading = useAppSelector((state) => state.organisation.organisationFormDataLoading);
 
   useEffect(() => {
     if (organizationId) {
-      dispatch(GetIndividualOrganizationService(`${import.meta.env.VITE_API_URL}/organisation/${organizationId}`));
+      dispatch(GetIndividualOrganizationService(`${VITE_API_URL}/organisation/${organizationId}`));
     }
   }, [organizationId]);
 
   const approveOrganization = () => {
     if (organizationId) {
       dispatch(
-        ApproveOrganizationService(
-          `${import.meta.env.VITE_API_URL}/organisation/approve?org_id=${parseInt(organizationId)}`,
-        ),
+        ApproveOrganizationService(`${VITE_API_URL}/organisation/approve`, {
+          org_id: +organizationId,
+          set_primary_org_odk_server: !organisationFormData?.odk_central_url,
+        }),
       );
     }
   };
 
   const rejectOrganization = () => {
-    dispatch(RejectOrganizationService(`${import.meta.env.VITE_API_URL}/organisation/unapproved/${organizationId}`));
+    dispatch(RejectOrganizationService(`${VITE_API_URL}/organisation/unapproved/${organizationId}`));
   };
 
   // redirect to manage-organization page after approve/reject success
@@ -56,6 +68,13 @@ const OrganizationForm = () => {
     }
   }, [organizationApprovalSuccess]);
 
+  if (organisationFormDataLoading)
+    return (
+      <div className="fmtm-bg-white fmtm-p-5">
+        <FormFieldSkeletonLoader count={8} />
+      </div>
+    );
+
   return (
     <div className="fmtm-max-w-[50rem] fmtm-bg-white fmtm-py-5 lg:fmtm-py-10 fmtm-px-5 lg:fmtm-px-9 fmtm-mx-auto">
       <div className="fmtm-flex fmtm-justify-center">
@@ -100,15 +119,25 @@ const OrganizationForm = () => {
           onChange={() => {}}
           disabled
         />
-        <InputTextField
-          id="odk_central_url"
-          name="odk_central_url"
-          label="ODK Central URL "
-          value={organisationFormData?.odk_central_url}
-          onChange={() => {}}
-          fieldType="text"
-          disabled
+        <RadioButton
+          topic="ODK Server Type"
+          options={odkTypeOptions}
+          direction="column"
+          value={organisationFormData?.odk_central_url ? 'OWN' : 'HOT'}
+          onChangeData={() => {}}
+          className="fmtm-text-base fmtm-text-[#7A7676] fmtm-mt-1"
         />
+        {organisationFormData?.odk_central_url && (
+          <InputTextField
+            id="odk_central_url"
+            name="odk_central_url"
+            label="ODK Central URL "
+            value={organisationFormData?.odk_central_url}
+            onChange={() => {}}
+            fieldType="text"
+            disabled
+          />
+        )}
         <InputTextField
           id="url"
           name="url"
diff --git a/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx b/src/frontend/src/components/CreateEditOrganization/CreateEditOrganizationForm.tsx
@@ -9,22 +9,27 @@ import OrganizationDetailsValidation from '@/components/CreateEditOrganization/v
 import RadioButton from '@/components/common/RadioButton';
 import { PatchOrganizationDataService, PostOrganisationDataService } from '@/api/OrganisationService';
 import { diffObject } from '@/utilfunctions/compareUtils';
-import { CustomCheckbox } from '@/components/common/Checkbox';
-import { organizationTypeOptionsType } from '@/models/organisation/organisationModel';
+import { radioOptionsType } from '@/models/organisation/organisationModel';
 import { useAppDispatch, useAppSelector } from '@/types/reduxTypes';
 import UploadArea from '@/components/common/UploadArea';
 import { CommonActions } from '@/store/slices/CommonSlice';
+import { CustomCheckbox } from '@/components/common/Checkbox';
 
 const API_URL = import.meta.env.VITE_API_URL;
 
-const organizationTypeOptions: organizationTypeOptionsType[] = [
+const organizationTypeOptions: radioOptionsType[] = [
   { name: 'osm_community', value: 'OSM_COMMUNITY', label: 'OSM Community' },
   { name: 'company', value: 'COMPANY', label: 'Company' },
   { name: 'non_profit', value: 'NON_PROFIT', label: 'Non-profit' },
   { name: 'university', value: 'UNIVERSITY', label: 'University' },
   { name: 'other', value: 'OTHER', label: 'Other' },
 ];
 
+const odkTypeOptions: radioOptionsType[] = [
+  { name: 'odk_server_type', value: 'OWN', label: 'Use your own ODK server' },
+  { name: 'odk_server_type', value: 'HOT', label: "Request HOT's ODK server" },
+];
+
 const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string }) => {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
@@ -35,15 +40,16 @@ const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string
 
   const submission = () => {
     if (!organizationId) {
-      const { fillODKCredentials, ...filteredValues } = values;
+      const { ...filteredValues } = values;
+      const request_odk_server = filteredValues.odk_server_type === 'HOT';
       dispatch(
-        PostOrganisationDataService(`${API_URL}/organisation`, {
+        PostOrganisationDataService(`${API_URL}/organisation?request_odk_server=${request_odk_server}`, {
           ...filteredValues,
           logo: filteredValues.logo ? filteredValues.logo?.[0].file : null,
         }),
       );
     } else {
-      const { fillODKCredentials, ...filteredValues } = values;
+      const { ...filteredValues } = values;
       let changedValues = diffObject(organisationFormData, filteredValues);
       if (changedValues.logo) {
         changedValues = {
@@ -92,16 +98,12 @@ const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string
   }, [postOrganisationData]);
 
   useEffect(() => {
-    if (!values?.fillODKCredentials) {
+    if (values?.odk_server_type === 'HOT') {
       handleCustomChange('odk_central_url', '');
       handleCustomChange('odk_central_user', '');
       handleCustomChange('odk_central_password', '');
     }
-  }, [values?.fillODKCredentials]);
-
-  useEffect(() => {
-    handleCustomChange('fillODKCredentials', false);
-  }, []);
+  }, [values?.odk_server_type]);
 
   useEffect(() => {
     if (organizationId) {
@@ -163,16 +165,30 @@ const CreateEditOrganizationForm = ({ organizationId }: { organizationId: string
             required
             errorMsg={errors.description}
           />
-          <CustomCheckbox
-            key="fillODKCredentials"
-            label="Fill ODK credentials now"
-            checked={values.fillODKCredentials}
-            onCheckedChange={() => {
-              handleCustomChange('fillODKCredentials', !values.fillODKCredentials);
-            }}
-            className="fmtm-text-black"
-          />
-          {values?.fillODKCredentials && (
+          {!organizationId && (
+            <RadioButton
+              topic="ODK Server Type"
+              options={odkTypeOptions}
+              direction="column"
+              value={values.odk_server_type}
+              onChangeData={(value) => {
+                handleCustomChange('odk_server_type', value);
+              }}
+              className="fmtm-text-base fmtm-text-[#7A7676] fmtm-mt-1"
+              errorMsg={errors.odk_server_type}
+              required
+            />
+          )}
+          {organizationId && (
+            <CustomCheckbox
+              label="Update ODK Credentials"
+              checked={values?.update_odk_credentials}
+              onCheckedChange={(checked) => {
+                handleCustomChange('update_odk_credentials', checked);
+              }}
+            />
+          )}
+          {(values?.odk_server_type === 'OWN' || values?.update_odk_credentials) && (
             <div className="fmtm-flex fmtm-flex-col fmtm-gap-6">
               <InputTextField
                 id="odk_central_url"
diff --git a/src/frontend/src/components/CreateEditOrganization/validation/OrganizationDetailsValidation.ts b/src/frontend/src/components/CreateEditOrganization/validation/OrganizationDetailsValidation.ts
@@ -13,8 +13,9 @@ interface OrganisationValues {
   odk_central_password: string;
   osm_profile: string;
   community_type: string;
-  fillODKCredentials: boolean;
   associated_email: string;
+  odk_server_type: string;
+  update_odk_credentials?: boolean;
 }
 interface ValidationErrors {
   logo?: string;
@@ -27,8 +28,9 @@ interface ValidationErrors {
   odk_central_password?: string;
   osm_profile?: string;
   community_type?: string;
-  fillODKCredentials?: boolean;
   associated_email?: string;
+  odk_server_type?: string;
+  update_odk_credentials?: string;
 }
 
 const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -61,19 +63,30 @@ function OrganizationDetailsValidation(values: OrganisationValues) {
     errors.associated_email = 'Invalid Email.';
   }
 
-  if (values?.odk_central_url && !isValidUrl(values.odk_central_url)) {
+  if (!values?.odk_server_type && !values?.id) {
+    errors.odk_server_type = 'ODK Server Type is Required.';
+  }
+
+  if (
+    (values?.odk_server_type === 'OWN' || values?.update_odk_credentials) &&
+    values?.odk_central_url &&
+    !isValidUrl(values.odk_central_url)
+  ) {
     errors.odk_central_url = 'Invalid URL.';
   }
 
-  if (values?.fillODKCredentials && isInputEmpty(values.odk_central_url)) {
+  if ((values?.odk_server_type === 'OWN' || values?.update_odk_credentials) && isInputEmpty(values.odk_central_url)) {
     errors.odk_central_url = 'ODK Central URL is Required.';
   }
 
-  if (values?.fillODKCredentials && isInputEmpty(values.odk_central_user)) {
+  if ((values?.odk_server_type === 'OWN' || values?.update_odk_credentials) && isInputEmpty(values.odk_central_user)) {
     errors.odk_central_user = 'ODK Central Email is Required.';
   }
 
-  if (values?.fillODKCredentials && isInputEmpty(values.odk_central_password)) {
+  if (
+    (values?.odk_server_type === 'OWN' || values?.update_odk_credentials) &&
+    isInputEmpty(values.odk_central_password)
+  ) {
     errors.odk_central_password = 'ODK Central Password is Required.';
   }
 
diff --git a/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx b/src/frontend/src/components/createnewproject/ProjectDetailsForm.tsx
@@ -230,7 +230,7 @@ const ProjectDetailsForm = ({ flag }) => {
             {hasODKCredentials && (
               <CustomCheckbox
                 key="useDefaultODKCredentials"
-                label="Use default ODK credentials"
+                label="Use default or requested ODK credentials"
                 checked={values.useDefaultODKCredentials}
                 onCheckedChange={() => {
                   handleCustomChange('useDefaultODKCredentials', !values.useDefaultODKCredentials);
diff --git a/src/frontend/src/models/organisation/organisationModel.ts b/src/frontend/src/models/organisation/organisationModel.ts
@@ -33,7 +33,7 @@ export interface GetOrganisationDataModel {
   odk_central_url: string | null;
 }
 
-export type organizationTypeOptionsType = {
+export type radioOptionsType = {
   name: string;
   value: string;
   label: string;

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ export interface GetOrganisationDataModel {`
`33`	`33`	`odk_central_url: string \| null;`
`34`	`34`	`}`
`35`	`35`
`36`		`-export type organizationTypeOptionsType = {`
	`36`	`+export type radioOptionsType = {`
`37`	`37`	`name: string;`
`38`	`38`	`value: string;`
`39`	`39`	`label: string;`