@ampath/esm-dha-workflow-app 4.0.0-next.13 → 4.0.0-next.131

package/src/registry/eligibility/modal/eligibility-details.modal.tsx

@@ -0,0 +1,131 @@
+import { Modal, ModalBody, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag } from '@carbon/react';
+import { type HieClientEligibility } from '../../types';
+import React from 'react';
+import styles from './eligibility-details.modal.scss';
+import { getTagType } from '../../../shared/utils/get-tag-type';
+
+interface ClientEligibilityDetailsModalProps {
+  hieClientEligibility: HieClientEligibility;
+  open: boolean;
+  onModalClose: () => void;
+  onSubmit: () => void;
+}
+
+const ClientEligibilityDetailsModal: React.FC<ClientEligibilityDetailsModalProps> = ({
+  hieClientEligibility,
+  open,
+  onModalClose,
+  onSubmit,
+}) => {
+  if (!hieClientEligibility) {
+    return <>No Client data</>;
+  }
+  return (
+    <>
+      <Modal
+        open={open}
+        size="lg"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={onModalClose}
+        primaryButtonText="Done"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.clientEligibilityDetailsLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Patient Eligibilty Details</h4>
+            </div>
+            <div className={styles.sectionContent}>
+              <div className={styles.clientDetails}>
+                <div>
+                  <div className={styles.detailData}>
+                    <strong className={styles.detailText}>Full Name</strong>
+                    <span>{hieClientEligibility.fullName}</span>
+                  </div>
+                  <div className={styles.detailData}>
+                    <strong className={styles.detailText}>ID Number</strong>
+                    <span>{hieClientEligibility.requestIdNumber}</span>
+                  </div>
+                  <div className={styles.detailData}>
+                    <strong className={styles.detailText}>CR No</strong>
+                    <span>{hieClientEligibility.memberCrNumber}</span>
+                  </div>
+                  <div className={styles.detailData}>
+                    <strong className={styles.detailText}>Status</strong>
+                    <span>{hieClientEligibility.statusDesc}</span>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.schemeSection}>
+                <div className={styles.sectionHeader}>
+                  <h4 className={styles.sectionTitle}>Scheme Details</h4>
+                </div>
+                <div className={styles.schemeTable}>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        <TableHeader>No</TableHeader>
+                        <TableHeader>Name</TableHeader>
+                        <TableHeader>Member Type</TableHeader>
+                        <TableHeader>Policy</TableHeader>
+                        <TableHeader>Coverage</TableHeader>
+                        <TableHeader>Coverage Period</TableHeader>
+                        <TableHeader>Coverage Status</TableHeader>
+                        <TableHeader>Coverage Reason</TableHeader>
+                        <TableHeader>Principal Contributor</TableHeader>
+                        <TableHeader>Principal Contributor Employment Type</TableHeader>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {hieClientEligibility.schemes.map((scheme, id) => {
+                        return (
+                          <TableRow key={id}>
+                            <TableCell>{id + 1}</TableCell>
+                            <TableCell>{scheme.schemeName}</TableCell>
+                            <TableCell>{scheme.memberType}</TableCell>
+                            <TableCell>
+                              {scheme.policy ? (
+                                <>
+                                  {scheme.policy.number} ({scheme.policy.startDate} - {scheme.policy.endDate})
+                                </>
+                              ) : (
+                                <></>
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              <Tag
+                                className="some-class"
+                                size="lg"
+                                title="Status"
+                                type={getTagType(scheme.coverage.status)}
+                              >
+                                {scheme.coverage.status === '1' ? 'Active' : 'Not Active'}
+                              </Tag>
+                            </TableCell>
+                            <TableCell>
+                              {scheme.coverage.startDate} - {scheme.coverage.endDate}
+                            </TableCell>
+                            <TableCell>{scheme.coverage.message}</TableCell>
+                            <TableCell>{scheme.coverage.reason}</TableCell>
+                            <TableCell>
+                              {scheme.principalContributor.crNumber} : {scheme.principalContributor.name},
+                              {scheme.principalContributor.relationship}
+                            </TableCell>
+                            <TableCell>{scheme.principalContributor.employmentType}</TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default ClientEligibilityDetailsModal;

package/src/registry/modal/client-details-modal/client-details-modal.tsx

@@ -1,9 +1,12 @@
-import { Button, Modal, ModalBody, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { Modal, ModalBody, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
 import { type HieClient } from '../../types';
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './client-details-modal.scss';
 import ClientDetails from '../../client-details/client-details';
 import PaymentOptionsComponent from '../../payment-details/payment-options/payment-options';
+import { type CreateClientPaymentModeDto, type HieClientPaymentMode, type PaymentMode } from '../../../shared/types';
+import { createClientPaymentMode } from '../../../shared/services/client-payment-mode.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
 
 interface ClientDetailsModalProps {
   client: HieClient;
@@ -23,54 +26,34 @@ const ClientDetailsModal: React.FC<ClientDetailsModalProps> = ({
   if (!client) {
     return <>No Client data</>;
   }
-  const registerOnAfyaYangu = () => {
-    window.open('https://afyayangu.go.ke/', '_blank');
-  };
   return (
     <>
       <Modal
         open={open}
-        size="md"
+        size="lg"
         onSecondarySubmit={onModalClose}
         onRequestClose={onModalClose}
-        onRequestSubmit={registerOnAfyaYangu}
-        primaryButtonText="Register on Afya Yangu"
+        onRequestSubmit={() => onSendClientToTriage(client.id)}
+        primaryButtonText="Send To Triage"
         secondaryButtonText="Cancel"
       >
         <ModalBody>
           <div className={styles.clientDetailsLayout}>
             <div className={styles.sectionHeader}>
-              <h4 className={styles.sectionTitle}>Patient/Payment Details</h4>
+              <h4 className={styles.sectionTitle}>Patient Details</h4>
             </div>
             <div className={styles.sectionContent}>
               <Tabs>
                 <TabList contained>
                   <Tab>Patient Details</Tab>
-                  <Tab>Payment Details</Tab>
                 </TabList>
                 <TabPanels>
                   <TabPanel>
                     <ClientDetails client={client} />
                   </TabPanel>
-                  <TabPanel>
-                    <PaymentOptionsComponent />
-                  </TabPanel>
                 </TabPanels>
               </Tabs>
             </div>
-            <div className={styles.actionSection}>
-              <div className={styles.btnContainer}>
-                <Button kind="primary">Book Appointment</Button>
-              </div>
-              <div className={styles.btnContainer}>
-                <Button kind="secondary">Walk In Orders</Button>
-              </div>
-              <div className={styles.btnContainer}>
-                <Button kind="tertiary" onClick={() => onSendClientToTriage(client.id)}>
-                  Send To Triage
-                </Button>
-              </div>
-            </div>
           </div>
         </ModalBody>
       </Modal>

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

@@ -10,4 +10,34 @@
   column-gap: 5px;
   margin-top: 5px;
   margin-bottom: 5px;
-}
+}
+.otpSection{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  column-gap: 15px;
+}
+.otpForm{
+  display: flex;
+  flex-direction: column;
+  width: 60%;
+  row-gap: 20px;
+}
+.otpTimer{
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  padding-top: 15%;
+}
+
+.formRow{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+    margin-top: 10px;
+}
+.formControl{
+    width: 70%;
+    margin-top: 10px;
+}

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

@@ -1,38 +1,53 @@
 import React, { useState } from 'react';
-import { type RequestCustomOtpDto } from '../../types';
-import { Button, InlineLoading, Modal, ModalBody, TextInput } from '@carbon/react';
+import { OtpOptions, OtpStatus, type RequestCustomOtpDto } from '../../types';
+import {
+  Button,
+  FormLabel,
+  InlineLoading,
+  Modal,
+  ModalBody,
+  RadioButton,
+  RadioButtonGroup,
+  TextInput,
+} from '@carbon/react';
 import styles from './otp-verification-modal.scss';
 import { showSnackbar } from '@openmrs/esm-framework';
 import { requestCustomOtp, validateCustomOtp } from '../../registry.resource';
-import { maskValue } from '../../utils/mask-data';
+import { maskAllButFirstAndLastThree } from '../../utils/mask-data';
+import OTPInput from '../../../shared/ui/otp-input/otp-input.component';
+import Timer from '../../../shared/ui/timer/timer.component';
 
 interface OtpVerificationModalpProps {
   requestCustomOtpDto: RequestCustomOtpDto;
   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>('');
+  const [overrideOtp, setOverideOtp] = useState<OtpOptions>(OtpOptions.NoOverride);
+  const [alternativeIdNo, setAlternativeIdNo] = useState<string>();
 
   const handleSendOtp = async () => {
-    if (!requestCustomOtpDto.identificationNumber) {
+    if (!requestCustomOtpDto.identificationNumber && !alternativeIdNo) {
       showAlert('error', 'Invalid Identification Value', 'Please enter a valid ID value');
       return;
     }
     setLoading(true);
     try {
-      const response = await requestCustomOtp(requestCustomOtpDto);
+      const response = await requestCustomOtp(getOtpPayload());
       setSessionId(response.sessionId);
-      setOtpStatus('OTP_SENT');
+      setOtpStatus(OtpStatus.Sent);
 
       showAlert('success', 'OTP sent successfully', `A code was sent to ${response.maskedPhone}`);
     } catch (err: any) {
@@ -42,6 +57,19 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
       setLoading(false);
     }
   };
+  const getOtpPayload = (): RequestCustomOtpDto => {
+    let payload: RequestCustomOtpDto = null;
+    if (overrideOtp === OtpOptions.Override) {
+      payload = {
+        ...requestCustomOtpDto,
+        identificationNumber: alternativeIdNo,
+      };
+    } else {
+      payload = requestCustomOtpDto;
+    }
+
+    return payload;
+  };
   const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
     showSnackbar({
       kind: alertType,
@@ -62,7 +90,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',
@@ -80,11 +108,57 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
       setLoading(false);
     }
   };
-  const registerOnAfyaYangu = () => {
-    window.open('https://afyayangu.go.ke/', '_blank');
-  };
 
   const onSubmit = () => {};
+  const handleTimeUp = () => {
+    if (OtpStatus.Sent) {
+      setOtpStatus(OtpStatus.Draft);
+    }
+  };
+  const getPrimaryButtonFunc = () => {
+    if (otpStatus === OtpStatus.Draft) {
+      return handleSendOtp();
+    }
+    if (otpStatus === OtpStatus.Sent) {
+      return handleVerifyOtp();
+    }
+    if (otpStatus === OtpStatus.Verified) {
+      return onOtpSuccessfullVerification();
+    }
+  };
+  const getPrimaryButtonText = (): any => {
+    if (otpStatus === OtpStatus.Draft) {
+      if (loading) {
+        return 'Sending OTP...';
+      } else {
+        return 'Send OTP';
+      }
+    }
+    if (otpStatus === OtpStatus.Sent) {
+      if (loading) {
+        return 'Verifying OTP...';
+      } else {
+        return 'Verify';
+      }
+    }
+    if (otpStatus === OtpStatus.Verified) {
+      if (loading) {
+        return 'loading...';
+      } else {
+        return 'Continue';
+      }
+    }
+    return '';
+  };
+  const handleOtpOverrideSelection = (overrideSelection: OtpOptions) => {
+    setOverideOtp(overrideSelection);
+    if (overrideSelection === OtpOptions.Skip) {
+      setOtpStatus(OtpStatus.Verified);
+    }
+  };
+  const handleAlternativeIdNo = (alternativeNo: string) => {
+    setAlternativeIdNo(alternativeNo);
+  };
   return (
     <>
       <Modal
@@ -92,80 +166,93 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
         size="md"
         onSecondarySubmit={onModalClose}
         onRequestClose={onModalClose}
-        onRequestSubmit={registerOnAfyaYangu}
-        primaryButtonText="Register on Afya Yangu"
+        onRequestSubmit={getPrimaryButtonFunc}
+        primaryButtonText={getPrimaryButtonText()}
         secondaryButtonText="Cancel"
       >
         <ModalBody>
           <div className={styles.modalVerificationLayout}>
             <div className={styles.sectionHeader}>
               <h4 className={styles.sectionTitle}>One Time Password (OTP)</h4>
-              <h6>Enter one time password to proceed</h6>
             </div>
             <div className={styles.sectionContent}>
               <div className={styles.contentHeader}>
-                {otpStatus === 'DRAFT' ? (
+                {otpStatus === OtpStatus.Draft ? (
                   <>
-                    <h6>Send Code to Phone {maskValue(phoneNumber)}</h6>
+                    <RadioButtonGroup
+                      defaultSelected={OtpOptions.NoOverride}
+                      legendText="OTP Override"
+                      onChange={(v) => handleOtpOverrideSelection(v as OtpOptions)}
+                      name="override-button-default-group"
+                    >
+                      <RadioButton
+                        id="no-override"
+                        labelText={`Send Code to Phone ${maskAllButFirstAndLastThree(phoneNumber)}?`}
+                        value={OtpOptions.NoOverride}
+                      />
+                      <RadioButton
+                        id="override"
+                        labelText="Send OTP to alternative contact"
+                        value={OtpOptions.Override}
+                      />
+
+                      <RadioButton id="skip" labelText="Skip OTP" value={OtpOptions.Skip} />
+                    </RadioButtonGroup>
+
+                    {overrideOtp === OtpOptions.Override ? (
+                      <>
+                        <div className={styles.formControl}>
+                          <TextInput
+                            id="override-number"
+                            labelText="Use alternative ID number and OTP will be sent to their phone number"
+                            onChange={(e) => handleAlternativeIdNo(e.target.value)}
+                            required={true}
+                            placeholder="Enter National ID"
+                          />
+                        </div>
+                      </>
+                    ) : (
+                      <></>
+                    )}
                   </>
                 ) : (
                   <></>
                 )}
 
-                {otpStatus === 'OTP_SENT' ? (
+                {otpStatus === OtpStatus.Verified ? (
                   <>
-                    <TextInput
-                      id="otp-input"
-                      labelText="Enter OTP"
-                      value={otp}
-                      onChange={(e) => setOtp(e.target.value)}
-                      placeholder="Enter the code sent to your phone"
-                    />
+                    {overrideOtp === OtpOptions.Skip ? (
+                      <>
+                        <h6>OTP Verification Skipped! Continue</h6>
+                      </>
+                    ) : (
+                      <>
+                        <h6>OTP Verification Successfull!</h6>
+                      </>
+                    )}
                   </>
                 ) : (
                   <></>
                 )}
-
-                {otpStatus === 'OTP_VERIFIED' ? (
+              </div>
+              <div className={styles.otpSection}>
+                {otpStatus === OtpStatus.Sent ? (
                   <>
-                    <h6>OTP Verification Successfull!</h6>
+                    <div className={styles.otpForm}>
+                      <h6>(Enter one time password to proceed)</h6>
+                      <FormLabel>Enter OTP</FormLabel>
+                      <OTPInput otpLength={5} onChange={(value) => setOtp(value)} />
+                    </div>
+                    <div className={styles.otpTimer}>
+                      <Timer durationInSeconds={60} resetTimer={() => {}} onTimeUp={handleTimeUp} />
+                    </div>
                   </>
                 ) : (
                   <></>
                 )}
               </div>
             </div>
-            <div className={styles.sectionAction}>
-              {otpStatus === 'DRAFT' ? (
-                <>
-                  <Button kind="primary" onClick={handleSendOtp}>
-                    {loading ? <InlineLoading description="Sending OTP..." /> : 'Send OTP'}
-                  </Button>
-                </>
-              ) : (
-                <></>
-              )}
-
-              {otpStatus === 'OTP_SENT' ? (
-                <>
-                  <Button kind="primary" onClick={handleVerifyOtp}>
-                    {loading ? <InlineLoading description="Verifying OTP..." /> : 'Verify'}
-                  </Button>
-                </>
-              ) : (
-                <></>
-              )}
-
-              {otpStatus === 'OTP_VERIFIED' ? (
-                <>
-                  <Button kind="primary" onClick={onModalClose}>
-                    Continue
-                  </Button>
-                </>
-              ) : (
-                <></>
-              )}
-            </div>
+            <div className={styles.sectionAction}></div>
           </div>
         </ModalBody>
       </Modal>

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;
@@ -13,7 +14,7 @@
 .formControl{
    display: flex;
    flex-direction: column;
-   width: 40%;
+   width: 45%;
    row-gap: 5px;
 }
 .actionSection{
@@ -21,4 +22,18 @@
     flex-direction: row;
     column-gap: 5px;
     margin-top: 15px;
+}
+.patientAction{
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    margin-top: 15px;
+}
+.greenBtn{
+    background-color: #28a745;
+}
+.patientBills{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 }