@ampath/esm-dha-workflow-app 4.0.0-next.4 → 4.0.0-next.5

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

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { type HieClient } from '../types';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { generateHieClientDetails } from '../utils/hie-adapter';
+interface ClientDetailsProps {
+  client: HieClient;
+}
+export const ClientDetails: React.FC<ClientDetailsProps> = ({ client }) => {
+  const clientDetails = useMemo(() => generateHieClientDetails(client), [client]);
+
+  if (!client || !clientDetails) {
+    return (
+      <>
+        <h4>No patient Data to Display</h4>
+      </>
+    );
+  }
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Field</TableHeader>
+            <TableHeader>Value</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {Object.keys(clientDetails).map((key) => (
+            <TableRow>
+              <TableCell>{key}</TableCell>
+              <TableCell>{clientDetails[key]}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export default ClientDetails;

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

@@ -0,0 +1,28 @@
+.clientDetailsLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+}
+.sectionHeader{
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+.sectionContent{
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+}
+.actionSection{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+}
+.btnContainer{
+    margin-top: 2px;
+    margin-bottom: 2px;
+}

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

@@ -0,0 +1,72 @@
+import { Button, Modal, ModalBody, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { type HieClient } from '../../types';
+import React 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';
+
+interface ClientDetailsModalProps {
+  client: HieClient;
+  open: boolean;
+  onModalClose: () => void;
+  onSubmit: () => void;
+}
+
+const ClientDetailsModal: React.FC<ClientDetailsModalProps> = ({ client, open, onModalClose, onSubmit }) => {
+  if (!client) {
+    return <>No Client data</>;
+  }
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={onSubmit}
+        primaryButtonText=""
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.clientDetailsLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Patient/Payment 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">Send To Triage</Button>
+              </div>
+              <div className={styles.btnContainer}>
+                <Button kind="primary">Send To Consultation</Button>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default ClientDetailsModal;

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

@@ -0,0 +1,6 @@
+.modalVerificationLayout {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  width: 100%;
+}

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

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import { type RequestCustomOtpDto } from '../../types';
+import { Button, Modal, ModalBody, TextInput } from '@carbon/react';
+import styles from './otp-verification-modal.scss';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { requestCustomOtp, validateCustomOtp } from '../../registry.resource';
+
+interface OtpVerificationModalpProps {
+  requestCustomOtpDto: RequestCustomOtpDto;
+  phoneNumber: string;
+  open: boolean;
+  onModalClose: () => void;
+}
+const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
+  requestCustomOtpDto,
+  phoneNumber,
+  open,
+  onModalClose,
+}) => {
+  const [otp, setOtp] = useState('');
+  const [otpStatus, setOtpStatus] = useState<string>('DRAFT');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [sessionId, setSessionId] = useState<string>('');
+
+  const handleSendOtp = async () => {
+    if (!requestCustomOtpDto.identificationNumber) {
+      showAlert('error', 'Invalid Identification Value', 'Please enter a valid ID value');
+      return;
+    }
+    setLoading(true);
+    try {
+      const response = await requestCustomOtp(requestCustomOtpDto);
+      setSessionId(response.sessionId);
+      setOtpStatus('OTP_SENT');
+
+      showAlert('success', 'OTP sent successfully', `A code was sent to ${response.maskedPhone}`);
+    } catch (err: any) {
+      const errorMessage = err.message || 'Failed to send OTP';
+      showAlert('error', 'Error sending OTP', errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+
+  const handleVerifyOtp = async () => {
+    if (!otp.trim()) {
+      showAlert('error', 'Please enter the OTP code', '');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const payload = { sessionId, otp, locationUuid: requestCustomOtpDto.locationUuid };
+      await validateCustomOtp(payload);
+
+      setOtpStatus('OTP_VERIFIED');
+
+      showSnackbar({
+        kind: 'success',
+        title: 'OTP Verified',
+        subtitle: 'You can now fetch data from Client Registry.',
+      });
+    } catch (err: any) {
+      const errorMessage = err.message || 'OTP verification failed';
+      showSnackbar({
+        kind: 'error',
+        title: 'OTP Verification Failed',
+        subtitle: errorMessage,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const onSubmit = () => {};
+  return (
+    <>
+      <Modal
+        open={open}
+        size="md"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={onSubmit}
+        primaryButtonText=""
+        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' ? (
+                  <>
+                    <h6>Send Code to Phone {phoneNumber}</h6>
+                  </>
+                ) : (
+                  <></>
+                )}
+
+                {otpStatus === 'OTP_SENT' ? (
+                  <>
+                    <TextInput
+                      id="otp-input"
+                      labelText="Enter OTP"
+                      value={otp}
+                      onChange={(e) => setOtp(e.target.value)}
+                      placeholder="Enter the code sent to your phone"
+                    />
+                  </>
+                ) : (
+                  <></>
+                )}
+
+                {otpStatus === 'OTP_VERIFIED' ? (
+                  <>
+                    <h6>OTP Verification Successfull!</h6>
+                  </>
+                ) : (
+                  <></>
+                )}
+              </div>
+            </div>
+            <div className={styles.sectionAction}>
+              {otpStatus === 'DRAFT' ? (
+                <>
+                  <Button kind="primary" onClick={handleSendOtp}>
+                    Send OTP
+                  </Button>
+                </>
+              ) : (
+                <></>
+              )}
+
+              {otpStatus === 'OTP_SENT' ? (
+                <>
+                  <Button kind="primary" onClick={handleVerifyOtp}>
+                    Verify
+                  </Button>
+                </>
+              ) : (
+                <></>
+              )}
+
+              {otpStatus === 'OTP_VERIFIED' ? (
+                <>
+                  <Button kind="primary" onClick={onModalClose}>
+                    Continue
+                  </Button>
+                </>
+              ) : (
+                <></>
+              )}
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default OtpVerificationModal;

package/src/registry/payment-details/payment-options/payment-options.tsx

@@ -0,0 +1,21 @@
+import { RadioButton, RadioButtonGroup } from '@carbon/react';
+import React from 'react';
+const PaymentOptionsComponent: React.FC = () => {
+  const handleSelectedPatientOption = (p: string) => {};
+  return (
+    <>
+      <RadioButtonGroup
+        defaultSelected="sha"
+        legendText="Patient"
+        onChange={(v) => handleSelectedPatientOption(v as string)}
+        name="payment-options-radio-group"
+      >
+        <RadioButton id="sha" labelText="Social Health Authority" value="sha" />
+        <RadioButton id="insurance" labelText="Other Insurance" value="other" />
+        <RadioButton id="cash" labelText="Cash" value="cash" />
+      </RadioButtonGroup>
+    </>
+  );
+};
+
+export default PaymentOptionsComponent;

package/src/registry/registry.component.scss

@@ -0,0 +1,58 @@
+.registryLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+    padding: 2% 2%;
+}
+.registryHeader{
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+}
+.registryContent{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+.formRow{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+}
+.formControl{
+    width: 30%;
+}
+.hieData{
+    margin-top: 15px;
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    row-gap: 10px;
+}
+.btnContainer{
+    padding: 5px 5px;
+}
+.selectionHeader{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+}
+.patientSelect{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+}
+.patientSelectRadio{
+    width: 70%;
+}
+.patientConfirmSelection{
+    display: flex;
+    flex-direction: row;
+    width: 30%;
+    column-gap: 5px;
+}

package/src/registry/registry.component.tsx

@@ -1,7 +1,245 @@
-import React from 'react';
+import {
+  Button,
+  Dropdown,
+  InlineLoading,
+  RadioButton,
+  RadioButtonGroup,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TextInput,
+} from '@carbon/react';
+import React, { useState } from 'react';
+import styles from './registry.component.scss';
+import { type HieClient, IDENTIFIER_TYPES, type IdentifierType, type RequestCustomOtpDto } from './types';
+import { fetchClientRegistryData } from './registry.resource';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import OtpVerificationModal from './modal/otp-verification-modal/otp-verification-modal';
+import { maskExceptFirstAndLast, maskValue } from './utils/mask-data';
+import ClientDetailsModal from './modal/client-details-modal/client-details-modal';
 interface RegistryComponentProps {}
 const RegistryComponent: React.FC<RegistryComponentProps> = () => {
-  return <>Registry Component</>;
+  const [identifierType, setIdentifierType] = useState<IdentifierType>('National ID');
+  const [identifierValue, setIdentifierValue] = useState('');
+  const [loading, setLoading] = useState<boolean>(false);
+  const [client, setClient] = useState<HieClient>();
+  const [selectedPatient, setSelectedPatient] = useState<string>('principal');
+  const [displayOtpModal, setDisplayOtpModal] = useState<boolean>(false);
+  const [displayClientDetailsModal, setDisplayClientDetailsModal] = useState<boolean>(false);
+  const [requestCustomOtpDto, setRequestCustomOtpDto] = useState<RequestCustomOtpDto>();
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+
+  const handleSearchPatient = async () => {
+    setLoading(true);
+    try {
+      const payload = {
+        identificationNumber: identifierValue,
+        identificationType: identifierType,
+        locationUuid,
+      };
+
+      setRequestCustomOtpDto(payload);
+
+      const result = await fetchClientRegistryData(payload);
+      const patients = Array.isArray(result) ? result : [];
+
+      if (patients.length === 0) throw new Error('No matching patient found in Client Registry.');
+
+      const patient = patients[0];
+      setClient(patient);
+      showAlert('success', 'Client Data Loaded', 'Patient fetched successfully');
+    } catch (err: any) {
+      const errorMessage = err.message || 'Failed to fetch client data';
+      showAlert('error', 'Fetch Failed', errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
+    showSnackbar({
+      kind: alertType,
+      title: title,
+      subtitle: subtitle,
+    });
+  };
+  const handleSelectedPatient = (sp: string) => {
+    setSelectedPatient(sp);
+  };
+  const handleOtpVerification = () => {
+    setDisplayOtpModal(true);
+  };
+  const handleModelClose = () => {
+    setDisplayOtpModal(false);
+    setDisplayClientDetailsModal(true);
+  };
+  const onClientDetailsModalClose = () => {
+    setDisplayClientDetailsModal(false);
+  };
+  const handleClientDetailsSubmit = () => {
+    return;
+  };
+  return (
+    <>
+      <div className={styles.registryLayout}>
+        <div className={styles.registryHeader}>
+          <h4>Client Registry</h4>
+          <p>Please enter identification number to begin</p>
+        </div>
+        <div className={styles.registryContent}>
+          <div className={styles.formRow}>
+            <div className={styles.formControl}>
+              <Dropdown
+                id="identifier-type-dropdown"
+                label="Identifier Type"
+                titleText="Select Identifier Type"
+                items={IDENTIFIER_TYPES}
+                selectedItem={identifierType}
+                onChange={({ selectedItem }) => setIdentifierType(selectedItem as IdentifierType)}
+              />
+            </div>
+
+            <div className={styles.formControl}>
+              <TextInput
+                id="identifier-value"
+                labelText={`${identifierType} Value`}
+                value={identifierValue}
+                onChange={(e) => setIdentifierValue(e.target.value)}
+                placeholder={`Enter ${identifierType.toLowerCase()} value`}
+              />
+            </div>
+            <div className={styles.formControl}>
+              <Button kind="primary" onClick={handleSearchPatient} disabled={loading}>
+                {loading ? <InlineLoading description="Searching..." /> : 'Search'}
+              </Button>
+            </div>
+          </div>
+          {client ? (
+            <div className={styles.formRow}>
+              <div className={styles.hieData}>
+                <div className={styles.selectionHeader}>
+                  <h5>Please select one patient and request patient to share the OTP sent</h5>
+                </div>
+                <div className={styles.patientSelect}>
+                  <div className={styles.patientSelectRadio}>
+                    <RadioButtonGroup
+                      defaultSelected="principal"
+                      legendText="Patient"
+                      onChange={(v) => handleSelectedPatient(v as string)}
+                      name="radio-button-default-group"
+                    >
+                      <RadioButton id="principal" labelText="Principal" value="principal" />
+                      <RadioButton id="dependants" labelText="Dependants" value="dependants" />
+                    </RadioButtonGroup>
+                  </div>
+                  <div className={styles.patientConfirmSelection}>
+                    <div className={styles.btnContainer}>
+                      <Button kind="primary" onClick={handleOtpVerification}>
+                        {' '}
+                        Confirm
+                      </Button>
+                    </div>
+                    <div className={styles.btnContainer}>
+                      <Button kind="secondary">Cancel</Button>
+                    </div>
+                  </div>
+                </div>
+                {selectedPatient === 'principal' ? (
+                  <>
+                    <Table>
+                      <TableHead>
+                        <TableRow>
+                          <TableHeader>Name</TableHeader>
+                          <TableHeader>CR</TableHeader>
+                          <TableHeader>Phone No</TableHeader>
+                          <TableHeader>ID No</TableHeader>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        <TableRow>
+                          <TableCell>
+                            {client.first_name} {maskExceptFirstAndLast(client.middle_name)}{' '}
+                            {maskExceptFirstAndLast(client.last_name)}
+                          </TableCell>
+                          <TableCell>{maskValue(client.id)}</TableCell>
+                          <TableCell>{maskValue(client.phone)}</TableCell>
+                          <TableCell>{maskValue(client.identification_number)}</TableCell>
+                        </TableRow>
+                      </TableBody>
+                    </Table>
+                  </>
+                ) : (
+                  <></>
+                )}
+                {selectedPatient === 'dependants' ? (
+                  <>
+                    <Table>
+                      <TableHead>
+                        <TableRow>
+                          <TableHeader>Name</TableHeader>
+                          <TableHeader>CR</TableHeader>
+                          <TableHeader>Relationship</TableHeader>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        {client.dependants.map((d) => {
+                          const dependant = d.result[0];
+                          const relationship = d.relationship;
+                          return (
+                            <>
+                              <TableRow>
+                                <TableCell>
+                                  {dependant.first_name} {maskExceptFirstAndLast(dependant.middle_name)}{' '}
+                                  {maskExceptFirstAndLast(dependant.last_name)}
+                                </TableCell>
+                                <TableCell>{maskValue(dependant.id)}</TableCell>
+                                <TableCell>{relationship}</TableCell>
+                              </TableRow>
+                            </>
+                          );
+                        })}
+                      </TableBody>
+                    </Table>
+                  </>
+                ) : (
+                  <></>
+                )}
+
+                {displayOtpModal ? (
+                  <OtpVerificationModal
+                    requestCustomOtpDto={requestCustomOtpDto}
+                    phoneNumber={client.phone}
+                    open={displayOtpModal}
+                    onModalClose={handleModelClose}
+                  />
+                ) : (
+                  <></>
+                )}
+
+                {client && displayClientDetailsModal ? (
+                  <>
+                    <ClientDetailsModal
+                      client={client}
+                      open={displayClientDetailsModal}
+                      onModalClose={onClientDetailsModalClose}
+                      onSubmit={handleClientDetailsSubmit}
+                    />{' '}
+                  </>
+                ) : (
+                  <></>
+                )}
+              </div>
+            </div>
+          ) : (
+            <></>
+          )}
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default RegistryComponent;