feat: esignet UI forms (#68)

* feat(esignet): add authenticating loader

* feat: set verified status authenticated after esignet successful redirection

* fix: loading label

* fix: rename loader field name

Author: tahmidrahman-dsi

packages/country-config/src/forms.ts

@@ -198,9 +198,15 @@ interface ESignetConfig {
     fieldName: string;
     mosipAPIUserInfoUrl: string;
   };
+  loaderFieldName?: string;
 }
 
-export const verified = (event: string, sectionId: string, mapping: any) => {
+export const verified = (
+  event: string,
+  sectionId: string,
+  mapping: any,
+  esignetConfig?: ESignetConfig,
+) => {
   const fieldName = "verified";
   const fieldId = `${event}.${sectionId}.${sectionId}-view-group.${fieldName}`;
   return {
@@ -213,10 +219,15 @@ export const verified = (event: string, sectionId: string, mapping: any) => {
       id: "form.field.label.empty",
       defaultMessage: "",
     },
-    initialValue: {
-      dependsOn: ["idReader"],
-      expression: 'Boolean($form?.idReader)? "pending":""',
-    },
+    initialValue: esignetConfig
+      ? {
+          dependsOn: ["idReader", esignetConfig.callback.fieldName],
+          expression: `Boolean($form?.idReader)? "pending": Boolean($form?.${esignetConfig.callback.fieldName}?.data)? "authenticated": ""`,
+        }
+      : {
+          dependsOn: ["idReader"],
+          expression: 'Boolean($form?.idReader)? "pending":""',
+        },
     validator: [],
     mapping,
   };
@@ -226,10 +237,12 @@ function capitalize(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
+type VerificationStatus = "verified" | "failed" | "authenticated";
+
 export const idVerificationBanner = (
   event: string,
   sectionId: string,
-  status: "verified" | "failed" | "authenticated",
+  status: VerificationStatus,
 ) => {
   const fieldName = "verified";
   const fieldId = `${event}.${sectionId}.${sectionId}-view-group.${fieldName}`;
@@ -255,6 +268,41 @@ export const idVerificationBanner = (
   };
 };
 
+export function esignetLoaderField({
+  event,
+  section,
+  fieldName,
+  esignetCallbackFieldName,
+}: {
+  event: "birth" | "death";
+  section: "informant" | "mother" | "father" | "spouse" | "deceased";
+  fieldName: string;
+  esignetCallbackFieldName: string;
+}) {
+  const fieldId = `${event}.${section}.${section}-view-group.${fieldName}`;
+  return {
+    name: fieldName,
+    type: "LOADER",
+    fieldId,
+    hideInPreview: true,
+    custom: true,
+    label: {
+      id: "form.field.label.idReader",
+      defaultMessage: "ID verification",
+    },
+    loadingText: {
+      id: "form.field.label.authenticating.nid",
+      defaultMessage: "Fetching the person's data from E-Signet",
+    },
+    conditionals: [
+      {
+        action: "hide",
+        expression: `!$form?.${esignetCallbackFieldName}?.loading`,
+      },
+    ],
+  };
+}
+
 export const getInitialValueFromIDReader = (fieldNameInReader: string) => ({
   dependsOn: ["idReader", "esignetCallback"],
   expression: `$form?.idReader?.${fieldNameInReader} || $form?.esignetCallback?.data?.${fieldNameInReader} || ""`,
@@ -276,7 +324,7 @@ export const idReaderFields = (
       conditionals.concat({
         action: "hide",
         expression:
-          "$form?.verified === 'verified' || $form?.verified === 'authenticated' || $form?.verified === 'failed'",
+          "$form?.verified === 'verified' || $form?.verified === 'authenticated' || $form?.verified === 'failed' || !!$form?.esignetCallback?.loading",
       }),
       readers,
     ),
@@ -298,6 +346,25 @@ export const idReaderFields = (
         openIdProviderClientId: esignetConfig.openIdProviderClientId,
       }),
     );
+    if (esignetConfig.loaderFieldName) {
+      fields.push(
+        esignetLoaderField({
+          event,
+          section,
+          fieldName: esignetConfig.loaderFieldName,
+          esignetCallbackFieldName: esignetConfig.callback.fieldName,
+        }),
+      );
+    }
+    return [
+      ...fields,
+      ...idVerificationFields(
+        event,
+        section,
+        verifiedCustomFieldMapping,
+        esignetConfig,
+      ),
+    ];
   }
   return [
     ...fields,
@@ -308,9 +375,10 @@ export const idVerificationFields = (
   event: string,
   sectionId: string,
   mapping: any,
+  esignetConfig?: ESignetConfig,
 ) => {
   return [
-    verified(event, sectionId, mapping),
+    verified(event, sectionId, mapping, esignetConfig),
     idVerificationBanner(event, sectionId, "verified"),
     idVerificationBanner(event, sectionId, "failed"),
     idVerificationBanner(event, sectionId, "authenticated"),