@ampath/esm-dha-workflow-app 4.0.0-next.34 → 4.0.0-next.340

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

@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
-import { OtpStatus, type RequestCustomOtpDto } from '../../types';
-import { Button, InlineLoading, Modal, ModalBody, TextInput } from '@carbon/react';
+import { HieIdentificationType, OtpOptions, OtpStatus, type RequestCustomOtpDto } from '../../types';
+import { FormLabel, 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';
+import { formatPhoneNumberForOTP } from '../../utils/phone-number-formatter';
 
 interface OtpVerificationModalpProps {
   requestCustomOtpDto: RequestCustomOtpDto;
@@ -24,15 +27,23 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
   const [otpStatus, setOtpStatus] = useState<string>(OtpStatus.Draft);
   const [loading, setLoading] = useState<boolean>(false);
   const [sessionId, setSessionId] = useState<string>('');
+  const [overrideOtp, setOverideOtp] = useState<OtpOptions>(
+    requestCustomOtpDto.phoneNumber ? OtpOptions.NoOverride : OtpOptions.Override,
+  );
+  const [alternativeIdNo, setAlternativeIdNo] = useState<string>();
+  const [alternativePhoneNo, setAlternativePhoneNo] = useState<string>();
+  const [isWhitelisted, setIsWhitelisted] = useState(false);
+  const [otpVerified, setOtpVerified] = useState(false);
+  const [formComplete, setFormComplete] = useState(false);
 
   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(OtpStatus.Sent);
 
@@ -44,6 +55,21 @@ const OtpVerificationModal: React.FC<OtpVerificationModalpProps> = ({
       setLoading(false);
     }
   };
+  const getOtpPayload = (): RequestCustomOtpDto => {
+    let payload: RequestCustomOtpDto;
+    if (overrideOtp === OtpOptions.Override) {
+      payload = {
+        ...requestCustomOtpDto,
+        identificationNumber: alternativeIdNo ?? '',
+        identificationType: HieIdentificationType.NationalID,
+        phoneNumber: alternativePhoneNo ? formatPhoneNumberForOTP(alternativePhoneNo) : '',
+      };
+    } else {
+      payload = requestCustomOtpDto;
+    }
+
+    return payload;
+  };
   const showAlert = (alertType: 'error' | 'success', title: string, subtitle: string) => {
     showSnackbar({
       kind: alertType,
@@ -82,11 +108,60 @@ 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);
+  };
+  const handleAlternativePhoneNo = (alternativePhoneNo: string) => {
+    setAlternativePhoneNo(alternativePhoneNo);
+  };
   return (
     <>
       <Modal
@@ -94,80 +169,105 @@ 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 === OtpStatus.Draft ? (
                   <>
-                    <h6>Send Code to Phone {maskValue(phoneNumber)}</h6>
+                    <RadioButtonGroup
+                      defaultSelected={requestCustomOtpDto.phoneNumber ? OtpOptions.NoOverride : OtpOptions.Override}
+                      legendText="OTP Override"
+                      onChange={(v) => handleOtpOverrideSelection(v as OtpOptions)}
+                      name="override-button-default-group"
+                    >
+                      {requestCustomOtpDto?.phoneNumber && (
+                        <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="Alternative ID number"
+                            onChange={(e) => handleAlternativeIdNo(e.target.value)}
+                            required={true}
+                            placeholder="Enter National ID"
+                          />
+                        </div>
+                        <div className={styles.formControl}>
+                          <TextInput
+                            id="override-phone"
+                            labelText="Alternative Phone number"
+                            onChange={(e) => handleAlternativePhoneNo(e.target.value)}
+                            required={true}
+                            placeholder="Enter Phone Number"
+                          />
+                        </div>
+                      </>
+                    ) : (
+                      <></>
+                    )}
                   </>
                 ) : (
                   <></>
                 )}
 
-                {otpStatus === OtpStatus.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 === OtpStatus.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 === OtpStatus.Draft ? (
-                <>
-                  <Button kind="primary" onClick={handleSendOtp}>
-                    {loading ? <InlineLoading description="Sending OTP..." /> : 'Send OTP'}
-                  </Button>
-                </>
-              ) : (
-                <></>
-              )}
-
-              {otpStatus === OtpStatus.Sent ? (
-                <>
-                  <Button kind="primary" onClick={handleVerifyOtp}>
-                    {loading ? <InlineLoading description="Verifying OTP..." /> : 'Verify'}
-                  </Button>
-                </>
-              ) : (
-                <></>
-              )}
-
-              {otpStatus === OtpStatus.Verified ? (
-                <>
-                  <Button kind="primary" onClick={onOtpSuccessfullVerification}>
-                    Continue
-                  </Button>
-                </>
-              ) : (
-                <></>
-              )}
-            </div>
+            <div className={styles.sectionAction}></div>
           </div>
         </ModalBody>
       </Modal>

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

@@ -0,0 +1,120 @@
+import {
+  Checkbox,
+  ComboBox,
+  Select,
+  SelectItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { type Patient } from '@openmrs/esm-framework';
+import React, { useMemo } from 'react';
+import styles from './send-to-triage.modal.scss';
+import { PatientTypes } from '../../../shared/constants/patient-type';
+import { PaymentDetail } from '../../types';
+
+interface PaymentDetailsSectionProps {
+  patients: Patient[];
+  onPatientSelect: (patient: Patient) => void;
+  patientTypeHandler: (selectedPatientType: {
+    selectedItem: {
+      id: string;
+      text: string;
+    } | null;
+  }) => void;
+  paymentDetailsHandler: (value: string) => void;
+}
+
+const PaymentDetailsSection: React.FC<PaymentDetailsSectionProps> = ({
+  patients,
+  onPatientSelect,
+  patientTypeHandler,
+  paymentDetailsHandler,
+}) => {
+  const patientTypeOptions = useMemo(
+    () => [
+      {
+        text: 'Walk-In',
+        id: PatientTypes.WALK_IN_UUID,
+      },
+      {
+        text: 'Self-Referral',
+        id: PatientTypes.SELF_RERERRAL_UUID,
+      },
+      {
+        text: 'Referral from another Facility',
+        id: PatientTypes.REFERRAL_FROM_ANOTHER_FACILITY_UUID,
+      },
+      {
+        text: 'Referral from Community',
+        id: PatientTypes.REFERRED_BY_COMMUNITY_HEALTH_WORKER_UUID,
+      },
+    ],
+    [],
+  );
+
+  const paymentDetails = Object.values(PaymentDetail).map((value) => {
+    return {
+      id: value,
+      label: value,
+    };
+  });
+  return (
+    <>
+      <div className={styles.patientSelect}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableHeader>No</TableHeader>
+              <TableHeader>Name</TableHeader>
+              <TableHeader>Gender</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.gender}</TableCell>
+                <TableCell>
+                  <Checkbox id={p.uuid} labelText="" onChange={() => onPatientSelect(p)} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className={styles.formSection}>
+        <div className={styles.formRow}>
+          <div className={styles.formControl}>
+            <ComboBox
+              onChange={patientTypeHandler}
+              id="patient-type-combobox"
+              items={patientTypeOptions}
+              itemToString={(item) => (item ? item.text : '')}
+              titleText="Patient Type"
+            />
+          </div>
+          <div className={styles.formControl}>
+            <Select
+              id="payment-details"
+              labelText="Payment Details"
+              onChange={($event) => paymentDetailsHandler($event.target.value)}
+            >
+              <SelectItem value="" text="Select" />;
+              {paymentDetails.map((pd) => {
+                return <SelectItem value={pd.id} text={pd.label} />;
+              })}
+            </Select>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PaymentDetailsSection;

package/src/registry/modal/send-to-triage/payment-method.component.tsx

@@ -0,0 +1,54 @@
+import { Select, SelectItem } from '@carbon/react';
+import React from 'react';
+
+import styles from './send-to-triage.modal.scss';
+import { type ServicePrice } from '../../../shared/types';
+
+interface PaymentMethodComponentProps {
+  paymentMethodHandler: (value: string) => void;
+  paymentModes: { uuid: string; name: string }[];
+  billableServicesHandler: (value: string) => void;
+  filteredBillableServices: ServicePrice[] | null;
+}
+
+const PaymentMethodComponent: React.FC<PaymentMethodComponentProps> = ({
+  paymentMethodHandler,
+  paymentModes,
+  billableServicesHandler,
+  filteredBillableServices,
+}) => {
+  return (
+    <>
+      <div className={styles.formRow}>
+        <div className={styles.formControl}>
+          <Select
+            id="payment-method"
+            labelText="Payment Method"
+            onChange={($event) => paymentMethodHandler($event.target.value)}
+          >
+            <SelectItem value="" text="Select" />;
+            {paymentModes &&
+              paymentModes.map((pm) => {
+                return <SelectItem value={pm.uuid} text={pm.name} />;
+              })}
+          </Select>
+        </div>
+        <div className={styles.formControl}>
+          <Select
+            id="billable-service"
+            labelText="Billable Services"
+            onChange={($event) => billableServicesHandler($event.target.value)}
+          >
+            <SelectItem value="" text="Select" />;
+            {filteredBillableServices &&
+              filteredBillableServices.map((sp) => {
+                return <SelectItem value={sp.uuid} text={`${sp.billableService.display}(${sp.name}:${sp.price})`} />;
+              })}
+          </Select>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default PaymentMethodComponent;