(feat) O3-4171 : Validate concept answers and show error for non-existing answers

src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/select/select-answers.component.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Tag, MultiSelect, Stack } from '@carbon/react';
+import { Tag, MultiSelect, Stack, InlineNotification } from '@carbon/react';
+import { WarningAltFilled } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import ConceptSearch from '../../../common/concept-search/concept-search.component';
 import { useFormField } from '../../../../form-field-context';
+import { fetchConceptById } from '@resources/concept.resource';
 import type { Concept } from '@types';
 import styles from './select-answers.scss';
-
 interface AnswerItem {
   id: string;
   text: string;
@@ -15,6 +16,7 @@ const SelectAnswers: React.FC = () => {
   const { t } = useTranslation();
   const { formField, concept, setFormField } = useFormField();
   const [addedAnswers, setAddedAnswers] = useState<AnswerItem[]>([]);
+  const [invalidAnswerIds, setInvalidAnswerIds] = useState<string[]>([]);
 
   useEffect(() => {
     if (!concept) {
@@ -130,6 +132,43 @@ const SelectAnswers: React.FC = () => {
     return [...answersFromConceptWithLabelsFromFormField, ...additionalAnswers];
   }, [concept?.answers, formField.questionOptions?.answers]);
 
+  const validateAnswers = useCallback(async () => {
+    if (!answerItems.length) {
+      setInvalidAnswerIds([]);
+      return;
+    }
+
+    const originalAnswersMap = new Map((concept?.answers || []).map((ans) => [ans.uuid, ans.display]));
+
+    const invalidIds: string[] = [];
+    const uniqueAnswers = Array.from(new Map(answerItems.map((a) => [a.id, a])).values());
+
+    for (const answer of uniqueAnswers) {
+      if (originalAnswersMap.has(answer.id)) {
+        const expectedName = originalAnswersMap.get(answer.id);
+        if (answer.text !== expectedName) {
+          invalidIds.push(answer.id);
+        }
+      } else {
+        try {
+          const res = await fetchConceptById(answer.id);
+          if (!(res?.data?.uuid === answer.id && res?.data?.display === answer.text)) {
+            invalidIds.push(answer.id);
+          }
+        } catch (error) {
+          invalidIds.push(answer.id);
+        }
+      }
+    }
+    setInvalidAnswerIds(invalidIds);
+  }, [answerItems, concept]);
+
+  useEffect(() => {
+    if (concept?.answers?.length) {
+      validateAnswers();
+    }
+  }, [answerItems, concept, validateAnswers]);
+
   const convertAnswerItemsToString = useCallback((item: AnswerItem) => item.text, []);
 
   return (
@@ -151,13 +190,29 @@ const SelectAnswers: React.FC = () => {
       {selectedAnswers.length > 0 && (
         <div>
           {selectedAnswers.map((answer) => (
-            <Tag className={styles.tag} key={answer.id} type={'blue'}>
+            <Tag
+              className={styles.tag}
+              key={answer.id}
+              type={invalidAnswerIds.includes(answer.id) ? 'red' : 'blue'}
+              renderIcon={invalidAnswerIds.includes(answer.id) ? WarningAltFilled : undefined}
+            >
               {answer.text}
             </Tag>
           ))}
         </div>
       )}
 
+      {/* Display an inline notification if any answer fails validation */}
+      {invalidAnswerIds.length > 0 && (
+        <InlineNotification
+          kind="error"
+          lowContrast
+          className={styles.error}
+          title={t('invalidAnswerConcept', 'Invalid Answer Concept Detected')}
+          subtitle={t('answerConceptValidation', 'One or more selected answer concepts do not exist in the system. ')}
+        />
+      )}
+
       {concept && concept.datatype?.name === 'Coded' && (
         <>
           <ConceptSearch

src/resources/concept.resource.ts

@@ -0,0 +1,6 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+export async function fetchConceptById(uuid: string) {
+  const url = `${restBaseUrl}/concept/${uuid}?v=full`;
+  return await openmrsFetch(url);
+}