@argusoft/medplat-app-shell 1.0.6 → 1.0.7

package/src/layout/mainLayout/Profile/UpdateProfileModal.jsx

@@ -0,0 +1,684 @@
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Paper, Typography, Button, Card, CardHeader, CardContent } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+
+import {
+  checkBankAccountNumberExist,
+  getBankNamesForPBI,
+  getPreferredLanguage,
+  getUserDetails,
+  updateUser,
+  uploadDoctorSignature,
+  getDoctorSignature,
+} from '@/common/services/Users';
+import { execute } from '@/common/services/GlobalApis';
+import useTrackEvent from '@/hooks/useTrackEvent';
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import CustomDropdown from '@/views/custom-components/CustomDropdown';
+import { useSelector } from 'react-redux';
+import CustomTextField from '@/views/custom-components/CustomTextField';
+import { getAssignedFeatures } from '@/utils/feature';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { showToast } from '@/common/toaster/toaster';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+
+const UpdateUserModal = ({ open, onClose }) => {
+  const { user } = useSelector((state) => state.Authenticate);
+  const trackEvent = useTrackEvent();
+  const [formData, setFormData] = useState(null);
+  const [languages, setLanguages] = useState([]);
+  const [bankDetails, setBankDetails] = useState([]);
+  const { translate } = useTranslateProvider();
+
+  const [rights, setRights] = useState({});
+  const rightsRef = useRef(rights);
+
+  useEffect(() => {
+    rightsRef.current = rights;
+  }, [rights]);
+
+
+  const [signaturePreview, setSignaturePreview] = useState(null);
+  const [signatureFile, setSignatureFile] = useState(null);
+  const [isDoctor, setIsDoctor] = useState(false);
+
+  useEffect(() => {
+    if (isDoctor) {
+      getSpecAndAvgValues();
+    }
+  }, [isDoctor]);
+
+  const getSpecAndAvgValues = async () => {
+    try {
+      const res = await execute({
+        code: 'GET_SPECIALIZATION_BY_USERID',
+        parameters: {
+          id: formData?.id,
+        },
+      });
+      const res2 = await execute({
+        code: 'GET_SPECIALIZATION',
+      });
+      const specializationId = res.data.result[0].specialization_id;
+      const specialization = res2.data.result.find((item) => item.id === specializationId);
+      setFormData((prevData) => ({ ...prevData, specialization: specialization?.name }));
+      const res1 = await getDoctorSignature(parseInt(formData?.id));
+      const blob = new Blob([res1], { type: 'application/image' });
+      const url = URL.createObjectURL(blob);
+      setSignaturePreview(url);
+
+      // setValue('averageDuration', res.data.result[0].average_duration);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const [isUpdate, setIsUpdate] = useState(false);
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      // Save file in parent state for submission
+      setSignatureFile(file);
+
+      // Generate preview
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSignaturePreview(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const validationSchema = yup.object().shape({
+    ifscCode: yup
+      .string()
+      .nullable()
+      .notRequired()
+      .test('ifsc-length', 'IFSC code must be exactly 11 characters', (value) => {
+        if (!value) return true; // Skip validation if the field is empty
+        return value.length === 11; // Validate length only if there's a value
+      }),
+
+    bankAccNo: yup
+      .string()
+      .nullable()
+      .notRequired()
+      .test('bankAccNo-length', 'Bank Account Number must be between 9 and 18 characters', (value) => {
+        if (!value) return true; // Skip validation if the field is empty
+        return value.length >= 9 && value.length <= 18; // Validate length only if there's a value
+      })
+      .test('is-unique', 'Bank account already exists', async (value) => {
+        if (!value) return true; // Skip uniqueness check if the field is empty
+        return await isBankAccountNumberUnique(value);
+      }),
+  });
+
+  const isBankAccountNumberUnique = async (value) => {
+    const lowerCaseValue = value?.toLowerCase();
+    if (formData.bankAccNo === lowerCaseValue) {
+      return true;
+    } else {
+      try {
+        const { data } = await checkBankAccountNumberExist({
+          code: 'check_bank_account_number_exists',
+          parameters: {
+            userId: user.id,
+            bankAccNo: lowerCaseValue,
+          },
+        });
+        return data;
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+    setValue,
+  } = useForm({ resolver: yupResolver(validationSchema), mode: 'onChange' });
+  const loadInitialData = useCallback(async () => {
+    try {
+      const { data: userData } = await getUserDetails(user.id);
+
+      setFormData(userData);
+      if (userData?.roleName == 'Doctor') {
+        setIsDoctor(true);
+      }
+
+      const { data: prefferedLanguage } = await getPreferredLanguage();
+      let bankDetailsRes = [];
+      if (!GeneralUtil.isTecho) {
+        const { data: bankDetailsData } = await getBankNamesForPBI({
+          code: 'get_bank_names_for_pbi',
+        });
+        bankDetailsRes = bankDetailsData?.result || [];
+      }
+      setBankDetails(bankDetailsRes);
+      if (userData.bankName) {
+        if (!GeneralUtil.isTecho) {
+          setValue('bankName', userData.bankName.id);
+        } else {
+          setValue('bankName', typeof userData.bankName === 'object' ? (userData.bankName.value || '') : userData.bankName);
+        }
+      }
+      if (userData.bankAccNo) {
+        setValue('bankAccNo', userData.bankAccNo);
+      }
+      if (userData.ifscCode) {
+        setValue('ifscCode', userData.ifscCode);
+      }
+      if (userData.prefferedLanguage) {
+        setValue('prefferedLanguage', userData.prefferedLanguage);
+      }
+      if (userData.reportPreferredLanguage) {
+        setValue('reportPreferredLanguage', userData.reportPreferredLanguage);
+      }
+      setLanguages(prefferedLanguage);
+      const { data: assignedFeatures } = await getAssignedFeatures('techo.manage.users');
+
+      let rightsObj = JSON.parse(assignedFeatures);
+      setRights(rightsObj);
+
+      const keysArray = [
+        'update.manage.users.preferredLanguage',
+        'update.manage.users.bankDetails',
+        'update.manage.users.reportPreferredLanguage',
+      ];
+      const hasTrue = keysArray.some((key) => rightsObj[key] === true);
+      setIsUpdate(hasTrue);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [setValue, user.id]);
+
+  useEffect(() => {
+    loadInitialData();
+  }, [open, loadInitialData]);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({ ...prevData, [name]: value }));
+  };
+  const handleBankChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: bankDetails.find((item) => item.id === value),
+    }));
+  };
+
+  const handleUpdateUser = async (values) => {
+    try {
+      const { bankAccNo, ifscCode, reportPreferredLanguage, prefferedLanguage, bankName } = values;
+      trackEvent('button_click', {
+        button_name: 'update_profile_update_button',
+        button_type: 'submit',
+        button_id: 'updateprofilemodal-button-update',
+      });
+      const payload = {
+        ...formData,
+        bankAccNo,
+        ifscCode,
+        reportPreferredLanguage,
+        prefferedLanguage,
+      };
+      if (GeneralUtil.isTecho) {
+        payload.bankName = bankName;
+        payload.bankNameId = null;
+      }
+      await updateUser(payload);
+
+      if (formData.roleName.toLowerCase() === 'doctor') {
+        // if (formData.id) {
+        //   await execute({
+        //     code: 'UPDATE_DOCTOR_DETAILS',
+        //     parameters: {
+        //       userId: parseInt(formData.id),
+        //       specializationId: parseInt(formValues?.specialization),
+        //       // averageDuration: parseInt(formValues?.averageDuration),
+        //     },
+        //   });
+        // } else {
+        //   await execute({
+        //     code: 'SET_DOCTOR_DETAILS',
+        //     parameters: {
+        //       userName: formValues?.userName,
+        //       specializationId: parseInt(formValues?.specialization),
+        //       // averageDuration: parseInt(formValues?.averageDuration),
+        //     },
+        //   });
+        // }
+        if (signatureFile) {
+          await uploadDoctorSignature(formData?.userName, signatureFile);
+        }
+      }
+      showToast({ message: 'Profile Updated Successfully', type: 'success' });
+    } catch (error) {
+      console.error(error);
+      showToast({ message: 'Failed to update profile', type: 'error' });
+      return;
+    }
+
+    // Handle form submission
+    onClose();
+  };
+
+  const renderItem = ({ label, name, disabled = false, value }) => (
+    <>
+      <Grid size={{ xs: 3 }} className="my-1 font-bold">
+        <Typography variant="body"> {translate(label)}</Typography>
+      </Grid>
+      <Grid size={{ xs: 1 }} className="my-1">
+        :
+      </Grid>
+      <Grid size={{ xs: 7 }} className="my-1">
+        {disabled ? (
+          <Typography variant="body2" size={{ xs: 3 }} item="true" className="my-1">
+            {value || 'Not Available'}
+          </Typography>
+        ) : (
+          <CustomTextField
+            control={control}
+            // id={name}
+            name={name}
+            size="small"
+            placeholder={label}
+            errors={errors}
+            disabled={disabled}
+          />
+        )}
+      </Grid>
+    </>
+  );
+
+  return (
+    <Modal open={open} onClose={onClose} data-testid="updateprofilemodal-modal">
+      <Paper className="absolute top-[10%] left-[10%] w-[80%]">
+        <Card className="m-0" elevation={5} component="form" onSubmit={handleSubmit(handleUpdateUser)} noValidate>
+          <CardHeader
+            className="manage-user-type-header"
+            subheader={isUpdate || formData?.roleName === 'Doctor' ? 'Update Profile' : 'View Profile'}
+            slotProps={{ subheader: { className: 'subheader-style text-customBlue text-lg' } }}
+            action={
+              <button
+                onClick={onClose}
+                className="flex items-center justify-center w-10 h-10 rounded-full bg-slate-100 hover:bg-red-100 text-slate-500 hover:text-red-600 transition-all duration-200 shadow-sm mr-4"
+              >
+                <FontAwesomeIcon icon={faXmark} className="text-xl" />
+              </button>
+            }
+          />
+          <CardContent className="overflow-auto max-h-[75vh]">
+            <Grid container spacing={2} alignItems="space-between">
+              <Grid
+                container
+                size={{ xs: 12, sm: 12 }}
+                className="my-1"
+                alignItems="center"
+                data-testid="updateprofilemodal-grid"
+              >
+                <Grid
+                  container
+                  size={{ xs: 12, sm: 6 }}
+                  className="my-1"
+                  alignItems="center"
+                  data-testid="updateprofilemodal-grid-fullname"
+                >
+                  {renderItem({
+                    label: 'Full Name',
+                    name: 'fullName',
+                    value: `${formData?.title}  ${formData?.fullName}`,
+                    disabled: true,
+                  })}
+                </Grid>
+
+                <Grid
+                  container
+                  size={{ xs: 12, sm: 6 }}
+                  className="my-1"
+                  alignItems="center"
+                  data-testid="updateprofilemodal-grid-rolename"
+                >
+                  {renderItem({
+                    label: 'Role',
+                    name: 'roleName',
+                    value: formData?.roleName,
+                    disabled: true,
+                  })}
+                </Grid>
+
+                {rights?.['update.manage.users.bankDetails'] && (
+                  <Grid
+                    container
+                    size={{ xs: 12, sm: 6 }}
+                    className="my-1"
+                    alignItems="center"
+                    data-testid="updateprofilemodal-grid-bankname"
+                  >
+                    <>
+                      <Grid size={{ xs: 3 }}>
+                        {' '}
+                        <Typography variant="body2">{translate('Bank Name')}</Typography>
+                      </Grid>
+                      <Grid size={{ xs: 1 }} className="my-1">
+                        :
+                      </Grid>
+                      <Grid size={{ xs: 7 }}>
+                        {!GeneralUtil.isTecho ? (
+                          <CustomDropdown
+                            control={control}
+                            name="bankName"
+                            options={bankDetails}
+                            displayName="value"
+                            optionValue="id"
+                            onChange={handleBankChange}
+                            dataTestId="updateprofilemodal-customdropdown-bankname"
+                          />
+                        ) : (
+                          <CustomTextField
+                            control={control}
+                            name="bankName"
+                            size="small"
+                            placeholder="Bank Name"
+                            errors={errors}
+                            dataTestId="updateprofilemodal-customtextfield-bankname"
+                          />
+                        )}
+                      </Grid>
+                      {renderItem({
+                        label: 'Bank Account Number',
+                        name: 'bankAccNo',
+                        value: formData?.bankAccNo,
+                      })}
+                    </>
+                  </Grid>
+                )}
+                <Grid
+                  container
+                  size={{ xs: 12, sm: 6 }}
+                  className="my-1"
+                  alignItems="center"
+                  data-testid="updateprofilemodal-grid-emailid"
+                >
+                  {renderItem({
+                    label: 'Email',
+                    name: 'emailId',
+                    value: formData?.emailId,
+                    disabled: true,
+                  })}
+                </Grid>
+
+                {rights?.['update.manage.users.preferredLanguage'] && (
+                  <Grid
+                    container
+                    size={{ xs: 12, sm: 6 }}
+                    className="my-1"
+                    alignItems="center"
+                    data-testid="updateprofilemodal-grid-preferredlanguage"
+                  >
+                    <>
+                      <Grid size={{ xs: 3 }} className="font-bold">
+                        <Typography variant="body">{translate('Preferred Language')}</Typography>
+                      </Grid>
+                      <Grid size={{ xs: 1 }} className="my-1">
+                        :
+                      </Grid>
+                      <Grid size={{ xs: 7 }}>
+                        <CustomDropdown
+                          control={control}
+                          name="prefferedLanguage"
+                          options={languages}
+                          displayName="languageValue"
+                          optionValue="languageKey"
+                          onChange={handleChange}
+                          dataTestId="updateprofilemodal-customdropdown-prefferedLanguage"
+                        />
+                      </Grid>
+                    </>
+                  </Grid>
+                )}
+
+                <Grid
+                  container
+                  size={{ xs: 12, sm: 6 }}
+                  className="my-1"
+                  alignItems="center"
+                  data-testid="updateprofilemodal-grid-gender"
+                >
+                  {renderItem({
+                    label: 'Gender',
+                    name: 'gender',
+                    value:
+                      formData?.gender === 'M'
+                        ? 'male'
+                        : formData?.gender === 'F'
+                        ? 'female'
+                        : formData?.gender === 'O'
+                        ? 'other'
+                        : '',
+                    disabled: true,
+                  })}
+                </Grid>
+
+                <Grid
+                  container
+                  size={{ xs: 12, sm: 6 }}
+                  className="my-1"
+                  alignItems="center"
+                  data-testid="updateprofilemodal-grid-username"
+                >
+                  {/* <Grid container size={{ xs: 12, sm: 6 }} className="my-1" alignItems="center"> */}
+                  {renderItem({
+                    label: 'User name',
+                    name: 'userName',
+                    value: formData?.userName,
+                    disabled: true,
+                  })}
+                </Grid>
+
+                {rights?.['view.manage.users.CUGPhoneNumber'] && (
+                  <Grid
+                    container
+                    size={{ xs: 12, sm: 6 }}
+                    className="my-1"
+                    alignItems="center"
+                    data-testid="updateprofilemodal-grid-contactnumber"
+                  >
+                    {renderItem({
+                      label: 'CUG Phone Number',
+                      name: 'contactNumber',
+                      value: formData?.contactNumber,
+                      disabled: true,
+                    })}
+                  </Grid>
+                )}
+
+                {rights?.['update.manage.users.bankDetails'] && (
+                  <Grid
+                    container
+                    size={{ xs: 12, sm: 6 }}
+                    className="my-1"
+                    alignItems="center"
+                    data-testid="updateprofilemodal-grid-ifsccode"
+                  >
+                    {renderItem({
+                      label: 'IFSC Code',
+                      name: 'ifscCode',
+                      value: formData?.ifscCode,
+                    })}
+                  </Grid>
+                )}
+
+                {rights?.['view.manage.users.aadhar'] && (
+                  <Grid
+                    container
+                    size={{ xs: 12, sm: 6 }}
+                    className="my-1"
+                    alignItems="center"
+                    data-testid="updateprofilemodal-grid-aadharnumber"
+                  >
+                    {renderItem({
+                      label: 'Aadhar Number',
+                      name: 'aadharNumber',
+                      value: formData?.aadharNumber,
+                      disabled: true,
+                    })}
+                  </Grid>
+                )}
+
+                {rights?.['update.manage.users.reportPreferredLanguage'] && (
+                  <Grid
+                    container
+                    size={{ xs: 12, sm: 6 }}
+                    className="my-1"
+                    alignItems="center"
+                    data-testid="updateprofilemodal-grid-reportpreferredlanguage"
+                  >
+                    <>
+                      <Grid size={{ xs: 3 }} className="font-bold">
+                        {' '}
+                        <Typography variant="body">{translate('Report Preferred Language')}</Typography>
+                      </Grid>
+                      <Grid size={{ xs: 1 }} className="my-1">
+                        :
+                      </Grid>
+                      <Grid size={{ xs: 7 }}>
+                        <CustomDropdown
+                          control={control}
+                          name="reportPreferredLanguage"
+                          options={[
+                            { id: 'GU', value: 'Gujarati' },
+                            { id: 'EN', value: 'English' },
+                            { id: 'HI', value: 'Hindi' },
+                          ]}
+                          displayName="value"
+                          optionValue="id"
+                          onChange={handleChange}
+                          dataTestId="updateprofilemodal-customdropdown-reportpreferredlanguage"
+                        />
+                      </Grid>
+                    </>
+                  </Grid>
+                )}
+
+                {rights?.['view.manage.users.loginCode'] && (
+                  <Grid
+                    container
+                    size={{ xs: 12, sm: 6 }}
+                    className="my-1"
+                    alignItems="center"
+                    data-testid="updateprofilemodal-grid-logincode"
+                  >
+                    {renderItem({
+                      label: 'Login Code',
+                      name: 'loginCode',
+                      value: formData?.loginCode,
+                      disabled: true,
+                    })}
+                  </Grid>
+                )}
+
+                {formData?.roleName === 'Doctor' && (
+                  <Grid
+                    container
+                    size={{ xs: 12, sm: 6 }}
+                    className="my-1"
+                    alignItems="center"
+                    data-testid="updateprofilemodal-grid-specialization"
+                  >
+                    {renderItem({
+                      label: 'Specialization',
+                      name: 'specialization',
+                      value: formData?.specialization,
+                      disabled: true,
+                    })}
+                  </Grid>
+                )}
+                {formData?.roleName === 'Doctor' && (
+                  <Grid
+                    container
+                    size={{ xs: 12 }}
+                    className="my-1"
+                    alignItems="center"
+                    data-testid="updateprofilemodal-grid-uploadsignature"
+                  >
+                    <Grid size={{ xs: 3 }} className="font-bold">
+                      <Typography variant="body">{translate('Upload Signature')}</Typography>
+                    </Grid>
+                    <Grid size={{ xs: 1 }} className="my-1">
+                      :
+                    </Grid>
+                    <Grid item size={{ xs: 7 }} className="flex items-center gap-4">
+                      <input
+                        type="file"
+                        accept="image/*"
+                        id="signatureUpload"
+                        name="signatureUpload"
+                        className="block  w-full text-sm text-gray-700 border border-gray-300 rounded-md cursor-pointer
+                     file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 
+                     file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+                        data-testid="user-signature-upload"
+                        onChange={handleFileChange}
+                      />
+
+                      {/* Show preview only if signature is uploaded */}
+                      {signaturePreview && (
+                        <div className="mt-3  w-full flex justify-center">
+                          <img
+                            src={signaturePreview}
+                            alt="Signature Preview"
+                            className="h-15 w-[80%] object-fit border border-gray-300 rounded-md p-2 bg-white"
+                          />
+                        </div>
+                      )}
+                    </Grid>
+                  </Grid>
+                )}
+              </Grid>
+            </Grid>
+
+            {/* </Grid> */}
+
+            {(isUpdate || formData?.roleName === 'Doctor') && (
+              <Grid container justifyContent="flex-end">
+                <Button
+                  variant="contained"
+                  onClick={onClose}
+                  className="mt-[1rem] mr-2.5"
+                  color="secondary"
+                  size="small"
+                  data-testid="updateprofilemodal-button-cancel"
+                >
+                  {translate('Cancel')}
+                </Button>
+                <Button
+                  type="submit"
+                  variant="contained"
+                  size="small"
+                  color="primary"
+                  className="mt-[1rem]"
+                  data-testid="updateprofilemodal-button-update"
+                >
+                  {translate('Update')}
+                </Button>
+              </Grid>
+            )}
+          </CardContent>
+        </Card>
+      </Paper>
+    </Modal>
+  );
+};
+UpdateUserModal.propTypes = {
+  open: PropTypes.any,
+  onClose: PropTypes.any,
+};
+
+export default UpdateUserModal;