@ampath/esm-dha-workflow-app 4.0.0-claim-workflows.159

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

@@ -0,0 +1,280 @@
+import React, { useState } from '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 { 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;
+  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>(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 handleSendOtp = async () => {
+    if (!requestCustomOtpDto.identificationNumber && !alternativeIdNo) {
+      showAlert('error', 'Invalid Identification Value', 'Please enter a valid ID value');
+      return;
+    }
+    setLoading(true);
+    try {
+      const response = await requestCustomOtp(getOtpPayload());
+      setSessionId(response.sessionId);
+      setOtpStatus(OtpStatus.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 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,
+      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(OtpStatus.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 = () => {};
+  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
+        open={open}
+        size="md"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={getPrimaryButtonFunc}
+        primaryButtonText={getPrimaryButtonText()}
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.modalVerificationLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>One Time Password (OTP)</h4>
+            </div>
+            <div className={styles.sectionContent}>
+              <div className={styles.contentHeader}>
+                {otpStatus === OtpStatus.Draft ? (
+                  <>
+                    <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.Verified ? (
+                  <>
+                    {overrideOtp === OtpOptions.Skip ? (
+                      <>
+                        <h6>OTP Verification Skipped! Continue</h6>
+                      </>
+                    ) : (
+                      <>
+                        <h6>OTP Verification Successfull!</h6>
+                      </>
+                    )}
+                  </>
+                ) : (
+                  <></>
+                )}
+              </div>
+              <div className={styles.otpSection}>
+                {otpStatus === OtpStatus.Sent ? (
+                  <>
+                    <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}></div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default OtpVerificationModal;

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

@@ -0,0 +1,39 @@
+.formSection{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+    margin-top: 15px;
+}
+.formRow{
+   display: flex;
+   flex-direction: row;
+   width: 100%;
+   column-gap: 5px;
+}
+.formControl{
+   display: flex;
+   flex-direction: column;
+   width: 45%;
+   row-gap: 5px;
+}
+.actionSection{
+    display: flex;
+    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%;
+}