@ampath/esm-dha-workflow-app 4.0.0-next.12 → 4.0.0-next.14

package/src/registry/modal/otp-verification-modal/otp-verification-modal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { type RequestCustomOtpDto } from '../../types';
+import { OtpStatus, type RequestCustomOtpDto } from '../../types';
 import { Button, InlineLoading, Modal, ModalBody, TextInput } from '@carbon/react';
 import styles from './otp-verification-modal.scss';
 import { showSnackbar } from '@openmrs/esm-framework';
@@ -11,15 +11,17 @@ interface OtpVerificationModalpProps {
   phoneNumber: string;
   open: boolean;
   onModalClose: () => void;
+  onOtpSuccessfullVerification: () => void;
 }
 const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
   requestCustomOtpDto,
   phoneNumber,
   open,
   onModalClose,
+  onOtpSuccessfullVerification,
 }) => {
   const [otp, setOtp] = useState('');
-  const [otpStatus, setOtpStatus] = useState<string>('DRAFT');
+  const [otpStatus, setOtpStatus] = useState<string>(OtpStatus.Draft);
   const [loading, setLoading] = useState<boolean>(false);
   const [sessionId, setSessionId] = useState<string>('');
 
@@ -32,7 +34,7 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
     try {
       const response = await requestCustomOtp(requestCustomOtpDto);
       setSessionId(response.sessionId);
-      setOtpStatus('OTP_SENT');
+      setOtpStatus(OtpStatus.Sent);
 
       showAlert('success', 'OTP sent successfully', `A code was sent to ${response.maskedPhone}`);
     } catch (err: any) {
@@ -62,7 +64,7 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
       const payload = { sessionId, otp, locationUuid: requestCustomOtpDto.locationUuid };
       await validateCustomOtp(payload);
 
-      setOtpStatus('OTP_VERIFIED');
+      setOtpStatus(OtpStatus.Verified);
 
       showSnackbar({
         kind: 'success',
@@ -104,7 +106,7 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
             </div>
             <div className={styles.sectionContent}>
               <div className={styles.contentHeader}>
-                {otpStatus === 'DRAFT' ? (
+                {otpStatus === OtpStatus.Draft ? (
                   <>
                     <h6>Send Code to Phone {maskValue(phoneNumber)}</h6>
                   </>
@@ -112,7 +114,7 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
                   <></>
                 )}
 
-                {otpStatus === 'OTP_SENT' ? (
+                {otpStatus === OtpStatus.Sent ? (
                   <>
                     <TextInput
                       id="otp-input"
@@ -126,7 +128,7 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
                   <></>
                 )}
 
-                {otpStatus === 'OTP_VERIFIED' ? (
+                {otpStatus === OtpStatus.Verified ? (
                   <>
                     <h6>OTP Verification Successfull!</h6>
                   </>
@@ -136,7 +138,7 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
               </div>
             </div>
             <div className={styles.sectionAction}>
-              {otpStatus === 'DRAFT' ? (
+              {otpStatus === OtpStatus.Draft ? (
                 <>
                   <Button kind="primary" onClick={handleSendOtp}>
                     {loading ? <InlineLoading description="Sending OTP..." /> : 'Send OTP'}
@@ -146,7 +148,7 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
                 <></>
               )}
 
-              {otpStatus === 'OTP_SENT' ? (
+              {otpStatus === OtpStatus.Sent ? (
                 <>
                   <Button kind="primary" onClick={handleVerifyOtp}>
                     {loading ? <InlineLoading description="Verifying OTP..." /> : 'Verify'}
@@ -156,9 +158,9 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
                 <></>
               )}
 
-              {otpStatus === 'OTP_VERIFIED' ? (
+              {otpStatus === OtpStatus.Verified ? (
                 <>
-                  <Button kind="primary" onClick={onModalClose}>
+                  <Button kind="primary" onClick={onOtpSuccessfullVerification}>
                     Continue
                   </Button>
                 </>

package/src/registry/modal/send-to-triage/send-to-triage.modal.scss

@@ -3,6 +3,7 @@
     flex-direction: column;
     width: 100%;
     row-gap: 5px;
+    margin-top: 15px;
 }
 .formRow{
    display: flex;
@@ -21,4 +22,10 @@
     flex-direction: row;
     column-gap: 5px;
     margin-top: 15px;
+}
+.patientAction{
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    margin-top: 15px;
 }

package/src/registry/modal/send-to-triage/send-to-triage.modal.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import {
   Button,
   Checkbox,
-  Dropdown,
   InlineLoading,
   Modal,
   ModalBody,
@@ -16,15 +15,8 @@ import {
   TableRow,
 } from '@carbon/react';
 import styles from './send-to-triage.modal.scss';
-import {
-  type VisitType,
-  type Patient,
-  useVisitTypes,
-  useSession,
-  showSnackbar,
-  type Visit,
-} from '@openmrs/esm-framework';
-import { type CreateVisitDto, type QueueEntryDto, type ServiceQueue } from '../../types';
+import { type Patient, useVisitTypes, useSession, showSnackbar } from '@openmrs/esm-framework';
+import { type HieClient, type CreateVisitDto, type QueueEntryDto, type ServiceQueue } from '../../types';
 import { createQueueEntry, fetchServiceQueuesByLocationUuid } from '../../../resources/queue.resource';
 import { QUEUE_PRIORITIES_UUIDS, QUEUE_STATUS_UUIDS } from '../../../shared/constants/concepts';
 import { createVisit } from '../../../resources/visit.resource';
@@ -34,9 +26,20 @@ interface SendToTriageModalProps {
   open: boolean;
   onModalClose: (modalCloseResp?: { success: boolean }) => void;
   onSubmit: () => void;
+  client: HieClient;
+  onCreateAmrsPatient: (client: HieClient) => void;
+  onManualRegistration: () => void;
 }
 
-const SendToTriageModal: React.FC<SendToTriageModalProps> = ({ patients, open, onModalClose, onSubmit }) => {
+const SendToTriageModal: React.FC<SendToTriageModalProps> = ({
+  patients,
+  open,
+  onModalClose,
+  onSubmit,
+  client,
+  onCreateAmrsPatient,
+  onManualRegistration,
+}) => {
   const [selectedPatient, setSelectedPatient] = useState<Patient>();
   const [selectedVisitType, setSelectedVisitType] = useState<string>();
   const [serviceQueues, setServiceQueues] = useState<ServiceQueue[]>();
@@ -164,6 +167,7 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({ patients, open, o
       subtitle: subtitle,
     });
   };
+
   return (
     <>
       <Modal
@@ -180,73 +184,94 @@ const SendToTriageModal: React.FC<SendToTriageModalProps> = ({ patients, open, o
             <div className={styles.sectionHeader}>
               <h4 className={styles.sectionTitle}>Send To Triage</h4>
             </div>
-            <div className={styles.sectionContent}>
-              <div className={styles.patientSelect}>
-                <Table>
-                  <TableHead>
-                    <TableRow>
-                      <TableHeader>No</TableHeader>
-                      <TableHeader>Name</TableHeader>
-                      <TableHeader>DOB</TableHeader>
-                      <TableHeader>Select Patient</TableHeader>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {patients.map((p, index) => (
-                      <TableRow key={p.uuid}>
-                        <TableCell>{index + 1}</TableCell>
-                        <TableCell>{p.person.preferredName.display}</TableCell>
-                        <TableCell>{p.person.birthdate}</TableCell>
-                        <TableCell>
-                          <Checkbox id={p.uuid} labelText="" onChange={() => onPatientSelect(p)} />
-                        </TableCell>
+            {patients.length > 0 ? (
+              <div className={styles.sectionContent}>
+                <div className={styles.patientSelect}>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        <TableHeader>No</TableHeader>
+                        <TableHeader>Name</TableHeader>
+                        <TableHeader>Gender</TableHeader>
+                        <TableHeader>Select Patient</TableHeader>
                       </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
-              <div className={styles.formSection}>
-                <div className={styles.formRow}>
-                  <div className={styles.formControl}>
-                    <Select id="visit-type" labelText="Select a Visit Type" onChange={visitTypeChangeHandler}>
-                      <SelectItem value="" text="Select" />;
-                      {visitTypes &&
-                        visitTypes.map((vt) => {
-                          return <SelectItem value={vt.uuid} text={vt.display} />;
-                        })}
-                    </Select>
-                  </div>
-                  <div className={styles.formControl}>
-                    <Select id="service" labelText="Select a Service" onChange={serviceChangeHandler}>
-                      <SelectItem value="" text="Select" />;
-                      {serviceQueues &&
-                        serviceQueues.map((sq) => {
-                          return <SelectItem value={sq.uuid} text={sq.display} />;
-                        })}
-                    </Select>
-                  </div>
+                    </TableHead>
+                    <TableBody>
+                      {patients.map((p, index) => (
+                        <TableRow key={p.uuid}>
+                          <TableCell>{index + 1}</TableCell>
+                          <TableCell>{p.person.preferredName.display}</TableCell>
+                          <TableCell>{p.person.gender}</TableCell>
+                          <TableCell>
+                            <Checkbox id={p.uuid} labelText="" onChange={() => onPatientSelect(p)} />
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
                 </div>
-                <div className={styles.formRow}>
-                  <div className={styles.formControl}>
-                    <Select
-                      id="priority"
-                      labelText="Select Priority"
-                      onChange={($event) => priorityChangeHandler($event.target.value)}
-                    >
-                      <SelectItem value="" text="Select" />;
-                      <SelectItem value={QUEUE_PRIORITIES_UUIDS.NORMAL_PRIORITY_UUID} text="NORMAL" />;
-                      <SelectItem value={QUEUE_PRIORITIES_UUIDS.EMERGENCY_PRIORITY_UUID} text="EMERGENCY" />;
-                    </Select>
+                <div className={styles.formSection}>
+                  <div className={styles.formRow}>
+                    <div className={styles.formControl}>
+                      <Select id="visit-type" labelText="Select a Visit Type" onChange={visitTypeChangeHandler}>
+                        <SelectItem value="" text="Select" />;
+                        {visitTypes &&
+                          visitTypes.map((vt) => {
+                            return <SelectItem value={vt.uuid} text={vt.display} />;
+                          })}
+                      </Select>
+                    </div>
+                    <div className={styles.formControl}>
+                      <Select id="service" labelText="Select a Service" onChange={serviceChangeHandler}>
+                        <SelectItem value="" text="Select" />;
+                        {serviceQueues &&
+                          serviceQueues.map((sq) => {
+                            return <SelectItem value={sq.uuid} text={sq.display} />;
+                          })}
+                      </Select>
+                    </div>
+                  </div>
+                  <div className={styles.formRow}>
+                    <div className={styles.formControl}>
+                      <Select
+                        id="priority"
+                        labelText="Select Priority"
+                        onChange={($event) => priorityChangeHandler($event.target.value)}
+                      >
+                        <SelectItem value="" text="Select" />;
+                        <SelectItem value={QUEUE_PRIORITIES_UUIDS.NORMAL_PRIORITY_UUID} text="NORMAL" />;
+                        <SelectItem value={QUEUE_PRIORITIES_UUIDS.EMERGENCY_PRIORITY_UUID} text="EMERGENCY" />;
+                      </Select>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
+            ) : (
+              <></>
+            )}
             <div className={styles.actionSection}>
-              <div className={styles.btnContainer}>
-                <Button kind="primary" onClick={sendToTriage}>
-                  {loading ? <InlineLoading description="Sending To Triage..." /> : 'Send To Triage'}
-                </Button>
-              </div>
+              {patients.length > 0 ? (
+                <div className={styles.btnContainer}>
+                  <Button kind="primary" onClick={sendToTriage}>
+                    {loading ? <InlineLoading description="Sending To Triage..." /> : 'Send To Triage'}
+                  </Button>
+                </div>
+              ) : (
+                <>
+                  <div className={styles.patientAction}>
+                    <div className={styles.btnContainer}>
+                      <Button kind="primary" onClick={() => onCreateAmrsPatient(client)}>
+                        Automatically Register in AMRS
+                      </Button>
+                    </div>
+                    <div className={styles.btnContainer}>
+                      <Button kind="secondary" onClick={onManualRegistration}>
+                        Manually Register
+                      </Button>
+                    </div>
+                  </div>
+                </>
+              )}
             </div>
           </div>
         </ModalBody>

package/src/registry/registry.component.scss

@@ -35,7 +35,7 @@
     margin-top: 15px;
     display: flex;
     flex-direction: column;
-    width: 50%;
+    width: 80%;
     row-gap: 10px;
 }
 .btnContainer{
@@ -69,4 +69,15 @@
 }
 .registrySearchBtn{
     height: 30px;
+}
+.principalDependantSection{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    margin-top: 15px;
+}
+.dependantCard{
+    display: flex;
+    flex-direction: row;
+    width: 30%;
 }