@ampath/esm-dha-workflow-app 4.0.0-next.15 → 4.0.0-next.151

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

@@ -1,10 +1,21 @@
 import React, { useState } from 'react';
-import { OtpStatus, 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;
@@ -24,15 +35,17 @@ 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>(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(OtpStatus.Sent);
 
@@ -44,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,
@@ -82,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
@@ -94,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 === 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 === 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/send-to-triage.modal.scss

@@ -14,7 +14,7 @@
 .formControl{
    display: flex;
    flex-direction: column;
-   width: 40%;
+   width: 45%;
    row-gap: 5px;
 }
 .actionSection{
@@ -28,4 +28,12 @@
     flex-direction: row;
     column-gap: 5px;
     margin-top: 15px;
+}
+.greenBtn{
+    background-color: #28a745;
+}
+.patientBills{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 }