feat: add validation to qr (#45)

* chore: pass validation to QR component

* chore: bump version

* chore: add more verification banners

Author: tahmidrahman-dsi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencrvs/mosip",
-  "version": "1.7.0-alpha.13",
+  "version": "1.7.0-alpha.14",
   "license": "MPL-2.0",
   "private": true,
   "packageManager": "yarn@1.22.13",

packages/country-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencrvs/mosip",
-  "version": "1.7.0-alpha.13",
+  "version": "1.7.0-alpha.14",
   "license": "MPL-2.0",
   "main": "./build/index.js",
   "exports": {

packages/country-config/src/forms.ts

@@ -34,10 +34,7 @@ export const esignet = (
   url.searchParams.append("acr_values", "mosip:idp:acr:static-code");
   url.searchParams.append("claims", openIdProviderClaims);
   url.searchParams.append("state", "fetch-on-mount");
-  url.searchParams.append(
-    "redirect_uri",
-    '${window.location.href}',
-  );
+  url.searchParams.append("redirect_uri", "${window.location.href}");
 
   return {
     name: fieldName,
@@ -115,8 +112,7 @@ export const esignetCallback = ({
     },
     body: {
       clientId: openIdProviderClientId,
-      redirectUri:
-        '${window.location.href}',
+      redirectUri: "${window.location.href}",
     },
 
     method: "POST",
@@ -170,8 +166,22 @@ export const idReader = (
   };
 };
 
-export const qr = () => ({
+type MessageDescriptor = {
+  id: string;
+  defaultMessage: string;
+  description?: string;
+};
+
+export const qr = ({
+  validation,
+}: {
+  validation: {
+    rule: Record<string, unknown>;
+    errorMessage: MessageDescriptor;
+  };
+}) => ({
   type: "QR",
+  validation,
 });
 
 export const verified = (event: string, sectionId: string) => {
@@ -195,19 +205,24 @@ export const verified = (event: string, sectionId: string) => {
   };
 };
 
-export const idPendingVerificationBanner = (
+function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export const idVerificationBanner = (
   event: string,
   sectionId: string,
+  status: "pending" | "verified" | "failed",
 ) => {
   const fieldName = "verified";
   const fieldId = `${event}.${sectionId}.${sectionId}-view-group.${fieldName}`;
   return {
-    name: "idPending",
+    name: `id${capitalize(status)}.`,
     type: "ID_VERIFICATION_BANNER",
     fieldId,
     hideInPreview: true,
     custom: true,
-    bannerType: "pending",
+    bannerType: status,
     idFieldName: "idReader",
     label: {
       id: "form.field.label.empty",
@@ -217,7 +232,7 @@ export const idPendingVerificationBanner = (
     conditionals: [
       {
         action: "hide",
-        expression: '$form?.verified !== "pending"',
+        expression: `$form?.verified !== "${status}"`,
       },
     ],
   };
@@ -226,6 +241,8 @@ export const idPendingVerificationBanner = (
 export const idVerificationFields = (event: string, sectionId: string) => {
   return [
     verified(event, sectionId),
-    idPendingVerificationBanner(event, sectionId),
+    idVerificationBanner(event, sectionId, "pending"),
+    idVerificationBanner(event, sectionId, "verified"),
+    idVerificationBanner(event, sectionId, "failed"),
   ];
 };

packages/esignet-mock/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opencrvs/esignet-mock",
   "license": "MPL-2.0",
-  "version": "1.7.0-alpha.13",
+  "version": "1.7.0-alpha.14",
   "main": "index.js",
   "scripts": {
     "dev": "NODE_ENV=development tsx watch src/index.ts",

packages/mosip-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencrvs/mosip-api",
-  "version": "1.7.0-alpha.13",
+  "version": "1.7.0-alpha.14",
   "license": "MPL-2.0",
   "scripts": {
     "dev": "NODE_ENV=development tsx watch src/index.ts",

packages/mosip-mock/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencrvs/mosip-mock",
-  "version": "1.7.0-alpha.13",
+  "version": "1.7.0-alpha.14",
   "license": "MPL-2.0",
   "scripts": {
     "dev": "NODE_ENV=development tsx watch src/index.ts",