Make travel questions optional

- Made `travelling_from` and `departure_city` fields mandatory only if `needsFundsForTravel` is set to "true".
- Updated UI to hide these fields by default and show them only when `needsFundsForTravel` is "true".
- Modified API to handle these fields as optional.

Author: estyxx

backend/api/grants/mutations.py

@@ -79,7 +79,7 @@ def validate(self, conference: Conference, user: User) -> GrantErrors:
         for field, max_length in max_length_fields.items():
             value = getattr(self, field, "")
 
-            if len(value) > max_length:
+            if value and len(value) > max_length:
                 print(field)
                 errors.add_error(
                     field,
@@ -120,9 +120,9 @@ class SendGrantInput(BaseGrantInput):
     need_accommodation: bool
     why: str
     notes: str
-    travelling_from: str
+    travelling_from: str | None = None
     nationality: str
-    departure_city: str
+    departure_city: str | None = None
 
     participant_bio: str
     participant_website: str
@@ -159,9 +159,9 @@ class UpdateGrantInput(BaseGrantInput):
     need_accommodation: bool
     why: str
     notes: str
-    travelling_from: str
+    travelling_from: str | None = None
     nationality: str
-    departure_city: str
+    departure_city: str | None = None
 
     participant_bio: str
     participant_website: str

frontend/src/components/grant-form/index.tsx

@@ -565,49 +565,56 @@ export const GrantForm = ({
               </FormattedMessage>
             </Select>
           </InputWrapper>
-
-          <InputWrapper
-            required={true}
-            title={<FormattedMessage id="grants.form.fields.travellingFrom" />}
-            description={
-              <FormattedMessage id="grants.form.fields.travellingFrom.description" />
-            }
-          >
-            <Select
-              {...select("travellingFrom")}
-              required={true}
-              errors={getErrors("travellingFrom")}
-            >
-              <FormattedMessage id="input.selectCountryPlaceholder">
-                {(msg) => (
-                  <option value="" disabled>
-                    {msg}
-                  </option>
-                )}
-              </FormattedMessage>
-              {countries.map((c) => (
-                <option key={c.value} value={c.value}>
-                  {c.label}
-                </option>
-              ))}
-            </Select>
-          </InputWrapper>
-
-          <InputWrapper
-            required={true}
-            title={<FormattedMessage id="grants.form.fields.departureCity" />}
-            description={
-              <FormattedMessage id="grants.form.fields.departureCity.description" />
-            }
-          >
-            <Input
-              {...text("departureCity")}
-              required={true}
-              maxLength={100}
-              placeholder={inputPlaceholderText}
-              errors={getErrors("departureCity")}
-            />
-          </InputWrapper>
+          {formState.values.needsFundsForTravel === "true" && (
+            <>
+              <InputWrapper
+                required={false}
+                title={
+                  <FormattedMessage id="grants.form.fields.travellingFrom" />
+                }
+                description={
+                  <FormattedMessage id="grants.form.fields.travellingFrom.description" />
+                }
+              >
+                <Select
+                  {...select("travellingFrom")}
+                  required={true}
+                  errors={getErrors("travellingFrom")}
+                >
+                  <FormattedMessage id="input.selectCountryPlaceholder">
+                    {(msg) => (
+                      <option value="" disabled>
+                        {msg}
+                      </option>
+                    )}
+                  </FormattedMessage>
+                  {countries.map((c) => (
+                    <option key={c.value} value={c.value}>
+                      {c.label}
+                    </option>
+                  ))}
+                </Select>
+              </InputWrapper>
+
+              <InputWrapper
+                required={false}
+                title={
+                  <FormattedMessage id="grants.form.fields.departureCity" />
+                }
+                description={
+                  <FormattedMessage id="grants.form.fields.departureCity.description" />
+                }
+              >
+                <Input
+                  {...text("departureCity")}
+                  required={true}
+                  maxLength={100}
+                  placeholder={inputPlaceholderText}
+                  errors={getErrors("departureCity")}
+                />
+              </InputWrapper>
+            </>
+          )}
         </CardPart>
       </MultiplePartsCard>