From 4aaac44b903aeabdc0d1e101b7dc0fe4864a6b77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sza=C5=82owski?= <michal.szalowski@gmail.com>
Date: Fri, 27 Dec 2024 10:43:15 +0100
Subject: [PATCH] fix(#2403): fix DRep link and description validation

---
 CHANGELOG.md                                  |  1 +
 .../src/components/molecules/DRepDataForm.tsx | 30 +++++++++++++++++--
 .../EditDRepInfoSteps/EditDRepForm.tsx        |  7 ++++-
 .../RegisterAsDRepForm.tsx                    |  7 ++++-
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b074cb93..74962dffc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ changes.
 ### Fixed
 
 - Fix calculating DRep live voting power [Issue 2460](https://github.com/IntersectMBO/govtool/issues/2460)
+- Fix link and description validation [Issue 2403](https://github.com/IntersectMBO/govtool/issues/2403)
 
 ### Changed
 
diff --git a/govtool/frontend/src/components/molecules/DRepDataForm.tsx b/govtool/frontend/src/components/molecules/DRepDataForm.tsx
index f1133b001..3ef89fdc1 100644
--- a/govtool/frontend/src/components/molecules/DRepDataForm.tsx
+++ b/govtool/frontend/src/components/molecules/DRepDataForm.tsx
@@ -3,6 +3,7 @@ import {
   Control,
   FieldErrors,
   UseFormRegister,
+  UseFormWatch,
   useFieldArray,
 } from "react-hook-form";
 import { Box } from "@mui/material";
@@ -20,9 +21,10 @@ type Props = {
   control: Control<DRepDataFormValues>;
   errors: FieldErrors<DRepDataFormValues>;
   register: UseFormRegister<DRepDataFormValues>;
+  watch: UseFormWatch<DRepDataFormValues>;
 };
 
-export const DRepDataForm = ({ control, errors, register }: Props) => {
+export const DRepDataForm = ({ control, errors, register, watch }: Props) => {
   const { t } = useTranslation();
   const { isMobile } = useScreenDimension();
 
@@ -111,12 +113,14 @@ export const DRepDataForm = ({ control, errors, register }: Props) => {
             control={control}
             errors={errors}
             register={register}
+            watch={watch}
           />
           <ReferencesSection
             type="identity"
             control={control}
             errors={errors}
             register={register}
+            watch={watch}
           />
         </Box>
         <div>
@@ -176,6 +180,7 @@ type ReferencesSectionProps = {
   control: Control<DRepDataFormValues>;
   errors: FieldErrors<DRepDataFormValues>;
   register: UseFormRegister<DRepDataFormValues>;
+  watch: UseFormWatch<DRepDataFormValues>;
 };
 
 const ReferencesSection = ({
@@ -183,6 +188,7 @@ const ReferencesSection = ({
   control,
   errors,
   register,
+  watch,
 }: ReferencesSectionProps) => {
   const { fieldName, jsonldType } = (() => {
     // eslint-disable-next-line default-case
@@ -237,7 +243,16 @@ const ReferencesSection = ({
             helpfulTextDataTestId={`${type}-reference-description-${
               index + 1
             }-hint`}
-            rules={Rules.LINK_DESCRIPTION}
+            rules={{
+              ...Rules.LINK_DESCRIPTION,
+              validate: (value) => {
+                const isLink = watch(`${fieldName}.${index}.uri`);
+                if (!value && Boolean(isLink)) {
+                  return t("dRepData.required");
+                }
+                return true;
+              },
+            }}
           />
           <ControlledField.Input
             {...register(`${fieldName}.${index}.uri`)}
@@ -258,7 +273,16 @@ const ReferencesSection = ({
             dataTestId={`${type}-reference-url-${index + 1}-input`}
             errorDataTestId={`${type}-reference-url-${index + 1}-error`}
             helpfulTextDataTestId={`${type}-reference-url-${index + 1}-hint`}
-            rules={Rules.LINK_URL}
+            rules={{
+              ...Rules.LINK_URL,
+              validate: (value) => {
+                const isDescription = watch(`${fieldName}.${index}.label`);
+                if (!value && Boolean(isDescription)) {
+                  return t("dRepData.required");
+                }
+                return true;
+              },
+            }}
           />
         </Fragment>
       ))}
diff --git a/govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepForm.tsx b/govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepForm.tsx
index 562d91acc..5c1974c9f 100644
--- a/govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepForm.tsx
+++ b/govtool/frontend/src/components/organisms/EditDRepInfoSteps/EditDRepForm.tsx
@@ -67,7 +67,12 @@ export const EditDRepForm = ({
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 8 }}>
-      <DRepDataForm control={control} errors={errors} register={register} />
+      <DRepDataForm
+        control={control}
+        errors={errors}
+        register={register}
+        watch={watch}
+      />
       <CenteredBoxBottomButtons
         onActionButton={onClickContinue}
         disableActionButton={isContinueButtonDisabled}
diff --git a/govtool/frontend/src/components/organisms/RegisterAsDRepSteps/RegisterAsDRepForm.tsx b/govtool/frontend/src/components/organisms/RegisterAsDRepSteps/RegisterAsDRepForm.tsx
index 391ef30bb..73c8dda1c 100644
--- a/govtool/frontend/src/components/organisms/RegisterAsDRepSteps/RegisterAsDRepForm.tsx
+++ b/govtool/frontend/src/components/organisms/RegisterAsDRepSteps/RegisterAsDRepForm.tsx
@@ -25,7 +25,12 @@ export const RegisterAsDRepForm = ({
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 8 }}>
-      <DRepDataForm control={control} errors={errors} register={register} />
+      <DRepDataForm
+        control={control}
+        errors={errors}
+        register={register}
+        watch={watch}
+      />
       <CenteredBoxBottomButtons
         onActionButton={onClickContinue}
         disableActionButton={isContinueButtonDisabled}