@kenyaemr/esm-patient-registration-app 8.0.3-pre.138 → 8.0.3-pre.143

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true}],"modals":[{"name":"cancel-patient-edit-modal","component":"cancelPatientEditModal"},{"name":"delete-identifier-confirmation-modal","component":"deleteIdentifierConfirmationModal"},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal"},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal"},{"component":"hieConfirmationModal","name":"hie-confirmation-modal"}],"version":"8.0.3-pre.138"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true}],"modals":[{"name":"cancel-patient-edit-modal","component":"cancelPatientEditModal"},{"name":"delete-identifier-confirmation-modal","component":"deleteIdentifierConfirmationModal"},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal"},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal"},{"component":"hieConfirmationModal","name":"hie-confirmation-modal"}],"version":"8.0.3-pre.143"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "8.0.3-pre.138",
+  "version": "8.0.3-pre.143",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",

package/src/client-registry/hie-client-registry/dependants/dependants.component.tsx

@@ -14,15 +14,13 @@ const DependentInfo: React.FC<{ dependents: any[] }> = ({ dependents }) => {
           const name = dependent?.name?.text;
           const relationship =
             dependent?.relationship?.[0]?.coding?.[0]?.display || t('unknownRelationship', 'Unknown');
+
           const nationalID = dependent?.extension?.find(
-            (ext) =>
-              ext.url === 'http://cr.tiberbu.app/fhir/StructureDefinition/dependants-id-number' &&
-              ext.valueIdentifier?.type?.coding?.[0]?.code === 'national-id',
+            (ext) => ext?.valueIdentifier?.type?.coding?.some((coding) => coding.code === 'national-id'),
           )?.valueIdentifier?.value;
+
           const birthCertificate = dependent?.extension?.find(
-            (ext) =>
-              ext.url === 'http://cr.tiberbu.app/fhir/StructureDefinition/dependants-id-number' &&
-              ext.valueIdentifier?.type?.coding?.[0]?.code === 'birth-certificate-number',
+            (ext) => ext?.valueIdentifier?.type?.coding?.some((coding) => coding.code === 'birth-certificate'),
           )?.valueIdentifier?.value;
 
           const primaryIdentifier = nationalID || birthCertificate;
@@ -34,7 +32,7 @@ const DependentInfo: React.FC<{ dependents: any[] }> = ({ dependents }) => {
             <div key={index} className={styles.dependentInfo}>
               <PatientInfo label={t('name', 'Name')} value={name} />
               <PatientInfo label={t('relationship', 'Relationship')} value={relationship} />
-              <PatientInfo label={identifierLabel} value={primaryIdentifier} />
+              {primaryIdentifier && <PatientInfo label={identifierLabel} value={primaryIdentifier} />}
             </div>
           );
         })}

package/src/client-registry/hie-client-registry/hie-client-registry.component.tsx

@@ -11,7 +11,7 @@ import { type RegistrationConfig } from '../../config-schema';
 import { useForm, Controller, type SubmitHandler } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { fetchPatientFromHIE, mapHIEPatientToFormValues } from './hie-resource';
-import { type HIEPatient } from './hie-types';
+import { type HIEPatientResponse, type HIEPatient } from './hie-types';
 
 type HIEClientRegistryProps = {
   props: FormikProps<FormValues>;
@@ -43,16 +43,18 @@ const HIEClientRegistry: React.FC<HIEClientRegistryProps> = ({ setInitialFormVal
     try {
       const hieClientRegistry = await fetchPatientFromHIE(data.identifierType, data.identifierValue);
 
-      if (hieClientRegistry && hieClientRegistry.resourceType === 'Patient') {
+      if (hieClientRegistry && hieClientRegistry.resourceType === 'Bundle') {
         const dispose = showModal('hie-confirmation-modal', {
           patient: hieClientRegistry,
           closeModal: () => dispose(),
           onUseValues: () =>
-            setInitialFormValues(mapHIEPatientToFormValues(hieClientRegistry as HIEPatient, props.values)),
+            setInitialFormValues(
+              mapHIEPatientToFormValues(hieClientRegistry as unknown as HIEPatientResponse, props.values),
+            ),
         });
       }
 
-      if (hieClientRegistry && hieClientRegistry.resourceType === 'OperationOutcome') {
+      if (hieClientRegistry && hieClientRegistry?.resourceType === 'OperationOutcome') {
         const issueMessage = hieClientRegistry?.['issue']?.map((issue) => issue.diagnostics).join(', ');
         const dispose = showModal('empty-client-registry-modal', {
           onConfirm: () => dispose(),

package/src/client-registry/hie-client-registry/hie-resource.ts

@@ -1,8 +1,10 @@
 import capitalize from 'lodash-es/capitalize';
 import { type PatientIdentifierValue, type FormValues } from '../../patient-registration/patient-registration.types';
-import { type MapperConfig, type HIEPatient, type ErrorResponse } from './hie-types';
+import { type MapperConfig, type HIEPatient, type ErrorResponse, type HIEPatientResponse } from './hie-types';
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { v4 } from 'uuid';
+import { z } from 'zod';
+import dayjs from 'dayjs';
 /**
  * Represents a client for interacting with a Health Information Exchange (HIE) resource.
  * @template T - The type of the resource being fetched.
@@ -11,7 +13,6 @@ class HealthInformationExchangeClient<T> {
   async fetchResource(resourceType: string, params: Record<string, string>): Promise<T> {
     const [identifierType, identifierValue] = Object.entries(params)[0];
     const url = `${restBaseUrl}/kenyaemr/getSHAPatient/${identifierValue}/${identifierType}`;
-
     const response = await openmrsFetch(url);
     return response.json();
   }
@@ -33,19 +34,19 @@ class Mapper<T, U> {
 /**
  * Maps HIEPatient objects to FormValues objects.
  */
-class PatientMapper extends Mapper<HIEPatient, FormValues> {
-  mapHIEPatientToFormValues(hiePatient: HIEPatient, currentFormValues: FormValues): FormValues {
+class PatientMapper extends Mapper<HIEPatientResponse, FormValues> {
+  mapHIEPatientToFormValues(hiePatient: HIEPatientResponse, currentFormValues: FormValues): FormValues {
     const { familyName, givenName, middleName } = getPatientName(hiePatient);
-    const telecom = hiePatient.telecom || [];
+    const telecom = hiePatient?.entry[0]?.resource.telecom || [];
 
     const telecomAttributes = this.mapTelecomToAttributes(telecom);
     const updatedIdentifiers = this.mapIdentifiers(hiePatient, currentFormValues);
-    const extensionAddressEntries = this.mapExtensionsToAddress(hiePatient.extension);
+    const extensionAddressEntries = this.mapExtensionsToAddress(hiePatient?.entry[0]?.resource.extension);
 
     return {
-      isDead: hiePatient.deceasedBoolean || false,
-      gender: hiePatient.gender || '',
-      birthdate: hiePatient.birthDate || '',
+      isDead: hiePatient?.entry[0]?.resource?.active || false,
+      gender: hiePatient?.entry[0]?.resource.gender || '',
+      birthdate: hiePatient?.entry[0]?.resource?.birthDate || '',
       givenName,
       familyName,
       telephoneNumber: telecom.find((t) => t.system === 'phone')?.value || '',
@@ -71,7 +72,7 @@ class PatientMapper extends Mapper<HIEPatient, FormValues> {
   }
 
   private mapIdentifiers(
-    hiePatient: HIEPatient,
+    hiePatient: HIEPatientResponse,
     currentFormValues: FormValues,
   ): Record<string, PatientIdentifierValue> {
     const updatedIdentifiers: Record<string, PatientIdentifierValue> = { ...currentFormValues.identifiers };
@@ -79,11 +80,11 @@ class PatientMapper extends Mapper<HIEPatient, FormValues> {
     // See https://github.com/palladiumkenya/openmrs-module-kenyaemr/blob/1e1d281eaba8041c45318e60ca0730449b8e4197/api/src/main/distro/metadata/identifierTypes.xml#L33
     updatedIdentifiers.socialHealthAuthorityIdentificationNumber = {
       ...currentFormValues.identifiers['socialHealthAuthorityIdentificationNumber'],
-      identifierValue: hiePatient.id,
+      identifierValue: hiePatient?.entry[0]?.resource?.id,
     };
 
     // Map fhir.Patient.Identifier to identifiers
-    hiePatient.identifier?.forEach((identifier: fhir.Identifier) => {
+    hiePatient.entry[0]?.resource.identifier?.forEach((identifier: fhir.Identifier) => {
       const identifierType = identifier.type?.coding?.[0]?.code;
       const mappedIdentifierType = this.convertToCamelCase(identifierType);
       const identifierValue = identifier.value;
@@ -157,7 +158,10 @@ export const fetchPatientFromHIE = async (
   return hieApiClient.fetchResource('Patient', { [identifierType]: identifierValue });
 };
 
-export const mapHIEPatientToFormValues = (hiePatient: HIEPatient, currentFormValues: FormValues): FormValues => {
+export const mapHIEPatientToFormValues = (
+  hiePatient: HIEPatientResponse,
+  currentFormValues: FormValues,
+): FormValues => {
   return patientMapper.mapHIEPatientToFormValues(hiePatient, currentFormValues);
 };
 
@@ -167,7 +171,7 @@ export const mapHIEPatientToFormValues = (hiePatient: HIEPatient, currentFormVal
  * @returns {string} - The masked data
  */
 export const maskData = (data: string): string => {
-  const maskedData = data.slice(0, 2) + '*'.repeat(data.length - 2);
+  const maskedData = data.slice(0, 2) + '*'.repeat(Math.max(0, data.length - 2));
   return maskedData;
 };
 
@@ -176,9 +180,88 @@ export const maskData = (data: string): string => {
  * @param patient {fhir.Patient} - The FHIR Patient resource
  * @returns {object} - The patient name
  */
-export const getPatientName = (patient: fhir.Patient) => {
-  const familyName = patient?.name[0]?.['family'] ?? '';
-  const givenName = patient.name[0]?.['given']?.[0]?.split(' ')?.[0] ?? '';
-  const middleName = patient.name[0]?.['given']?.[0]?.replace(givenName, '')?.trim() ?? '';
+export const getPatientName = (patient: HIEPatientResponse) => {
+  const familyName = patient?.entry?.[0]?.resource?.name?.[0]?.family ?? ''; // Safely access the family name
+  const givenNames = patient?.entry?.[0]?.resource?.name?.[0]?.given ?? []; // Safely access the given names array
+
+  const givenName = givenNames?.[0] ?? ''; // The first item is the given name (first name)
+  const middleName = givenNames.slice(1).join(' ').trim(); // Combine all other given names as middle name(s)
+
   return { familyName, givenName, middleName };
 };
+
+export const authorizationFormSchema = z.object({
+  otp: z.string().min(1, 'Required'),
+  receiver: z
+    .string()
+    .regex(/^(\+?254|0)((7|1)\d{8})$/)
+    .optional(),
+});
+
+export function generateOTP(length = 5) {
+  let otpNumbers = '0123456789';
+  let OTP = '';
+  const len = otpNumbers.length;
+  for (let i = 0; i < length; i++) {
+    OTP += otpNumbers[Math.floor(Math.random() * len)];
+  }
+  return OTP;
+}
+
+export function persistOTP(otp: string, patientUuid: string) {
+  sessionStorage.setItem(
+    patientUuid,
+    JSON.stringify({
+      otp,
+      timestamp: new Date().toISOString(),
+    }),
+  );
+}
+
+export async function sendOtp({ otp, receiver }: z.infer<typeof authorizationFormSchema>, patientName: string) {
+  const payload = parseMessage(
+    { otp, patient_name: patientName, expiry_time: 5 },
+    'Dear {{patient_name}}, your OTP for accessing your Shared Health Records (SHR) is {{otp}}. Please enter this code to proceed. The code is valid for {{expiry_time}} minutes.',
+  );
+
+  const url = `${restBaseUrl}/kenyaemr/send-kenyaemr-sms?message=${payload}&phone=${receiver}`;
+
+  const res = await openmrsFetch(url, {
+    method: 'POST',
+    redirect: 'follow',
+  });
+  if (res.ok) {
+    return await res.json();
+  }
+  throw new Error('Error sending otp');
+}
+
+function parseMessage(object, template) {
+  const placeholderRegex = /{{(.*?)}}/g;
+
+  const parsedMessage = template.replace(placeholderRegex, (match, fieldName) => {
+    if (object.hasOwnProperty(fieldName)) {
+      return object[fieldName];
+    } else {
+      return match;
+    }
+  });
+
+  return parsedMessage;
+}
+export function verifyOtp(otp: string, patientUuid: string) {
+  const data = sessionStorage.getItem(patientUuid);
+  if (!data) {
+    throw new Error('Invalid OTP');
+  }
+  const { otp: storedOtp, timestamp } = JSON.parse(data);
+  const isExpired = dayjs(timestamp).add(5, 'minutes').isBefore(dayjs());
+  if (storedOtp !== otp) {
+    throw new Error('Invalid OTP');
+  }
+  if (isExpired) {
+    throw new Error('OTP Expired');
+  }
+  sessionStorage.removeItem(patientUuid);
+  return 'Verification success';
+}

package/src/client-registry/hie-client-registry/hie-types.ts

@@ -5,6 +5,106 @@ export type HIEPatient = fhir.Patient & {
   }>;
 };
 
+export interface HIEPatientResponse {
+  id: string;
+  meta: Metadata;
+  link: Link[];
+  entry: Entry[];
+}
+
+interface Metadata {
+  lastUpdated: string;
+}
+
+interface Link {
+  relation: string;
+  url: string;
+}
+
+interface Entry {
+  resource: Resource;
+}
+
+interface Resource {
+  id: string;
+  extension: Extension[];
+  identifier: Identifier[];
+  active: boolean;
+  name: Name[];
+  telecom: Telecom[];
+  birthDate: string;
+  address: Address[];
+  gender: string;
+  maritalStatus: MaritalStatus;
+  contact: Contact[];
+}
+
+interface Extension {
+  url: string;
+  valueString: string;
+}
+
+interface Identifier {
+  type: CodingType;
+  value: string;
+}
+
+interface CodingType {
+  coding: Coding[];
+}
+
+interface Coding {
+  system?: string;
+  code: string;
+  display: string;
+}
+
+interface Name {
+  text: string;
+  family: string;
+  given: string[];
+}
+
+interface Telecom {
+  system: string;
+  value?: string;
+}
+
+interface Address {
+  extension: AddressExtension[];
+  city: string;
+  country: string;
+}
+
+interface AddressExtension {
+  url: string;
+  valueString: string;
+}
+
+interface MaritalStatus {
+  coding: Coding[];
+}
+
+interface Contact {
+  id: string;
+  extension: ContactExtension[];
+  relationship: Relationship[];
+  name: Name;
+  telecom: Telecom[];
+  address: Address;
+  gender: string;
+}
+
+interface ContactExtension {
+  url: string;
+  valueIdentifier?: Identifier;
+  valueString?: string;
+}
+
+interface Relationship {
+  coding: Coding[];
+}
+
 export type APIClientConfig = {
   baseUrl: string;
   credentials: string;

package/src/client-registry/hie-client-registry/modal/confirm-hie.modal.tsx

@@ -1,93 +1,99 @@
-import React from 'react';
+import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, ModalBody, ModalHeader, ModalFooter, Accordion, AccordionItem, CodeSnippet } from '@carbon/react';
-import { age, ExtensionSlot, formatDate } from '@openmrs/esm-framework';
-import { type HIEPatient } from '../hie-types';
-import capitalize from 'lodash-es/capitalize';
+import { type HIEPatientResponse, type HIEPatient } from '../hie-types';
 import styles from './confirm-hie.scss';
-import PatientInfo from '../patient-info/patient-info.component';
-import DependentInfo from '../dependants/dependants.component';
-import { getPatientName, maskData } from '../hie-resource';
+import { authorizationFormSchema, generateOTP, getPatientName, persistOTP, sendOtp, verifyOtp } from '../hie-resource';
+import HIEPatientDetailPreview from './hie-patient-detail-preview.component';
+import HIEOTPVerficationForm from './hie-otp-verification-form.component';
+import { Form } from '@carbon/react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { type z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { showSnackbar } from '@openmrs/esm-framework';
 
 interface HIEConfirmationModalProps {
   closeModal: () => void;
-  patient: HIEPatient;
+  patient: HIEPatientResponse;
   onUseValues: () => void;
 }
 
 const HIEConfirmationModal: React.FC<HIEConfirmationModalProps> = ({ closeModal, patient, onUseValues }) => {
   const { t } = useTranslation();
-  const { familyName, givenName, middleName } = getPatientName(patient);
+  const [mode, setMode] = useState<'authorization' | 'preview'>('preview');
+  const [status, setStatus] = useState<'loadingOtp' | 'otpSendSuccessfull' | 'otpFetchError'>();
+  const phoneNumber = patient?.entry[0]?.resource.telecom?.find((num) => num.system === 'phone')?.value;
+  const getidentifier = (code: string) =>
+    patient?.entry[0]?.resource.identifier?.find(
+      (identifier) => identifier?.type?.coding?.some((coding) => coding?.code === code),
+    );
+  const patientId = patient?.id ?? getidentifier('SHA-number')?.value;
+  const form = useForm<z.infer<typeof authorizationFormSchema>>({
+    defaultValues: {
+      receiver: phoneNumber,
+    },
+    resolver: zodResolver(authorizationFormSchema),
+  });
+  const patientName = getPatientName(patient);
 
-  const handleUseValues = () => {
-    onUseValues();
-    closeModal();
+  const onSubmit = async (values: z.infer<typeof authorizationFormSchema>) => {
+    try {
+      verifyOtp(values.otp, patientId);
+      showSnackbar({ title: 'Success', kind: 'success', subtitle: 'Access granted successfully' });
+      onUseValues();
+      closeModal();
+    } catch (error) {
+      showSnackbar({ title: 'Faulure', kind: 'error', subtitle: `${error}` });
+    }
   };
 
   return (
-    <div>
-      <ModalHeader closeModal={closeModal}>
-        <span className={styles.header}>{t('hieModal', 'HIE Patient Record Found')}</span>
-      </ModalHeader>
-      <ModalBody>
-        <div className={styles.patientDetails}>
-          <ExtensionSlot
-            className={styles.patientPhotoContainer}
-            name="patient-photo-slot"
-            state={{ patientName: `${maskData(givenName)} . ${maskData(middleName)} . ${maskData(familyName)}` }}
-          />
-          <div className={styles.patientInfoContainer}>
-            <PatientInfo label={t('healthID', 'HealthID')} value={patient?.id} />
-            <PatientInfo
-              label={t('patientName', 'Patient name')}
-              customValue={
-                <span className={styles.patientNameValue}>
-                  <p>{maskData(givenName)}</p>
-                  <span>&bull;</span>
-                  <p>{maskData(middleName)}</p>
-                  <span>&bull;</span>
-                  <p>{maskData(familyName)}</p>
-                </span>
-              }
+    <FormProvider {...form}>
+      <Form onSubmit={form.handleSubmit(onSubmit)}>
+        <ModalHeader closeModal={closeModal}>
+          <span className={styles.header}>
+            {mode === 'authorization'
+              ? t('hiePatientVerification', 'HIE Patient Verification')
+              : t('hieModal', 'HIE Patient Record Found')}
+          </span>
+        </ModalHeader>
+        <ModalBody>
+          {mode === 'authorization' ? (
+            <HIEOTPVerficationForm
+              name={`${patientName.givenName} ${patientName.middleName}`}
+              patientId={patientId}
+              status={status}
+              setStatus={setStatus}
             />
+          ) : (
+            <HIEPatientDetailPreview patient={patient} />
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={closeModal}>
+            {t('cancel', 'Cancel')}
+          </Button>
 
-            <PatientInfo label={t('age', 'Age')} value={age(patient?.birthDate)} />
-            <PatientInfo label={t('dateOfBirth', 'Date of birth')} value={formatDate(new Date(patient?.birthDate))} />
-            <PatientInfo label={t('gender', 'Gender')} value={capitalize(patient?.gender)} />
-            <PatientInfo
-              label={t('maritalStatus', 'Marital status')}
-              value={patient?.maritalStatus?.coding?.map((m) => m.code).join('')}
-            />
-
-            {(!patient?.contact || patient?.contact.length === 0) && (
-              <PatientInfo label={t('dependents', 'Dependents')} value="--" />
-            )}
-          </div>
-        </div>
-
-        <DependentInfo dependents={patient?.contact} />
-
-        <div>
-          <Accordion>
-            <AccordionItem title={t('viewFullResponse', 'View full response')}>
-              <CodeSnippet type="multi" feedback="Copied to clipboard">
-                {JSON.stringify(patient, null, 2)}
-              </CodeSnippet>
-            </AccordionItem>
-          </Accordion>
-        </div>
-      </ModalBody>
-      <ModalFooter>
-        <Button kind="secondary" onClick={closeModal}>
-          {t('cancel', 'Cancel')}
-        </Button>
-
-        <Button onClick={handleUseValues} kind="primary">
-          {t('useValues', 'Use values')}
-        </Button>
-      </ModalFooter>
-    </div>
+          {mode === 'preview' && (
+            <Button onClick={() => setMode('authorization')} kind="primary">
+              {t('useValues', 'Use values')}
+            </Button>
+          )}
+          {mode === 'authorization' && (
+            <Button
+              kind="primary"
+              type="submit"
+              disabled={form.formState.isSubmitting || status !== 'otpSendSuccessfull'}>
+              {t('verifyAndUseValues', 'Verify & Use values')}
+            </Button>
+          )}
+        </ModalFooter>
+      </Form>
+    </FormProvider>
   );
 };
 
 export default HIEConfirmationModal;
+function onVerificationSuccesfull() {
+  throw new Error('Function not implemented.');
+}

package/src/client-registry/hie-client-registry/modal/confirm-hie.scss

@@ -48,3 +48,15 @@
     color: colors.$gray-40;
   }
 }
+
+.grid {
+  margin: 0 layout.$spacing-05;
+  padding: layout.$spacing-05 0rem 0rem orem;
+}
+
+.otpInputRow {
+  display: flex;
+  flex-direction: row;
+  gap: layout.$spacing-03;
+  align-items: flex-end;
+}

package/src/client-registry/hie-client-registry/modal/hie-otp-verification-form.component.tsx

@@ -0,0 +1,88 @@
+import { Button, Column, Row, Stack, Tag, TextInput, InlineLoading } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import React from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { type authorizationFormSchema, generateOTP, persistOTP, sendOtp } from '../hie-resource';
+import styles from './confirm-hie.scss';
+import { type z } from 'zod';
+
+type HIEOTPVerficationFormProps = {
+  name: string;
+  patientId: string;
+  status?: 'loadingOtp' | 'otpSendSuccessfull' | 'otpFetchError';
+  setStatus: React.Dispatch<React.SetStateAction<'loadingOtp' | 'otpSendSuccessfull' | 'otpFetchError'>>;
+};
+
+const HIEOTPVerficationForm: React.FC<HIEOTPVerficationFormProps> = ({ name, patientId, setStatus, status }) => {
+  const form = useFormContext<z.infer<typeof authorizationFormSchema>>();
+  const { t } = useTranslation();
+
+  const handleGetOTP = async () => {
+    try {
+      setStatus('loadingOtp');
+      const otp = generateOTP(5);
+      await sendOtp({ otp, receiver: form.watch('receiver') }, name);
+      setStatus('otpSendSuccessfull');
+      persistOTP(otp, patientId);
+    } catch (error) {
+      setStatus('otpFetchError');
+      showSnackbar({ title: t('error', 'Error'), kind: 'error', subtitle: error?.message });
+    }
+  };
+
+  return (
+    <Stack gap={4} className={styles.grid}>
+      <Column>
+        <Controller
+          control={form.control}
+          name="receiver"
+          render={({ field }) => (
+            <TextInput
+              invalid={form.formState.errors[field.name]?.message}
+              invalidText={form.formState.errors[field.name]?.message}
+              {...field}
+              placeholder={t('patientPhoneNUmber', 'Patient Phone number')}
+              labelText={t('patientPhoneNUmber', 'Patient Phone number')}
+              helperText={t('phoneNumberHelper', 'Patient will receive OTP on this number')}
+            />
+          )}
+        />
+      </Column>
+
+      <Column>
+        <Controller
+          control={form.control}
+          name="otp"
+          render={({ field }) => (
+            <Row className={styles.otpInputRow}>
+              <TextInput
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                {...field}
+                placeholder={t('otpCode', 'OTP Authorization code')}
+                labelText={t('otpCode', 'OTP Authorization code')}
+              />
+              <Button
+                onClick={handleGetOTP}
+                role="button"
+                type="blue"
+                kind="tertiary"
+                disabled={['loadingOtp', 'otpSendSuccessfull'].includes(status)}>
+                {status === 'loadingOtp' ? (
+                  <InlineLoading status="active" iconDescription="Loading" description="Loading data..." />
+                ) : status === 'otpFetchError' ? (
+                  t('retry', 'Retry')
+                ) : (
+                  t('verifyOTP', 'Verify with OTP')
+                )}
+              </Button>
+            </Row>
+          )}
+        />
+      </Column>
+    </Stack>
+  );
+};
+
+export default HIEOTPVerficationForm;