@argusoft/medplat-app-shell 1.0.6 → 1.0.7

package/src/views/custom-components/CustomAutoComplete.jsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { Autocomplete, Chip, FormControl, TextField } from '@mui/material';
+import PropTypes from 'prop-types';
+import { Controller } from 'react-hook-form';
+import { Box } from '@mui/system';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Virtuoso } from 'react-virtuoso';
+
+const VirtualListbox = React.forwardRef(function VirtualListbox(props, ref) {
+  const { children, ...other } = props;
+  const itemData = React.Children.toArray(children);
+
+  return (
+    <div ref={ref} {...other}>
+      <Virtuoso
+        style={{ height: 300, width: '100%' }}
+        data={itemData}
+        itemContent={(index) => itemData[index]}
+      />
+    </div>
+  );
+});
+
+export default function CustomAutocomplete({
+  options,
+  onInputChange,
+  onChange,
+  control,
+  // errors,
+  rules,
+  name,
+  size = 'small',
+  checkEquality = 'id', // Used to check equality of options to disable already selected options
+  getOptionLabel,
+  singleSelect = false,
+  dataTestId,
+  placeholder,
+  isVirtualized = false,
+  ...props
+}) {
+  // const error = get(errors, name);
+  return (
+    <Controller
+      name={name}
+      control={control}
+      rules={rules}
+      render={({ field, fieldState: { error } }) => (
+        <FormControl fullWidth error={!!error} data-testid={dataTestId}>
+          <Autocomplete
+            {...field}
+            options={options || []}
+            multiple={!singleSelect}
+            disableClearable
+            size={size}
+            // value={value}
+            value={field.value || (singleSelect ? null : [])}
+            isOptionEqualToValue={(option, value) => option?.[checkEquality] === value?.[checkEquality]}
+            slots={{
+              listbox: isVirtualized ? VirtualListbox : undefined,
+            }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                size={size}
+                placeholder={
+                  placeholder?.trim() ? placeholder : singleSelect ? 'Select an option' : 'Select some options'
+                }
+                error={!!error}
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    // backgroundColor: '#F8FAFC',
+                    fontSize: 'inherit',
+                    paddingLeft: 'initial',
+                    paddingTop: 'initial',
+                    paddingBottom: 'initial',
+                    '& input': {
+                      padding: '8.5px 14px',
+                    },
+                  },
+                }}
+              />
+            )}
+            getOptionLabel={getOptionLabel}
+            renderOption={(props, option, { selected }) => {
+              const isDisabled =
+                !singleSelect &&
+                field?.value?.some((selected) => selected?.[checkEquality] === option?.[checkEquality]);
+              return (
+                <Box
+                  component="li"
+                  {...props}
+                  key={option[checkEquality]}
+                  data-testid={`option-${option[checkEquality]}`}
+                  sx={{
+                    fontSize: '14px',
+                    pointerEvents: isDisabled ? 'none' : 'auto',
+                    borderRadius: '16px',
+                    mx: 1,
+                    my: 0.5,
+                    px: 2,
+                    py: 1,
+                    cursor: isDisabled ? 'not-allowed' : 'pointer',
+                    ...isVirtualized && {
+                      '&:hover': {
+                        backgroundColor: isDisabled
+                          ? 'transparent'
+                          : (theme) => theme.palette.action.hover,
+                      },
+                      backgroundColor: selected
+                        ? (theme) => theme.palette.action.selected
+                        : 'transparent',
+                      '&.Mui-focused': {
+                        backgroundColor: (theme) => theme.palette.action.hover,
+                      }
+                    },
+                  }}
+                >
+                  {getOptionLabel(option)}
+                </Box>
+              );
+            }}
+            renderTags={(value, getTagProps) =>
+              value?.map((option, index) => (
+                <Chip
+                  size={size}
+                  key={option?.[checkEquality]}
+                  label={getOptionLabel(option)}
+                  {...getTagProps({ index })}
+                  deleteIcon={<FontAwesomeIcon icon={faXmark} className="text-white mr-2" />}
+                  sx={{
+                    backgroundColor: (theme) => theme.palette.primary.main,
+                    color: 'white',
+                    '& .MuiChip-deleteIcon path': {
+                      fill: 'white',
+                    },
+                  }}
+                />
+              ))
+            }
+            slotProps={{
+              paper: {
+                sx: {
+                  boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.1)',
+                  border: '1px solid #E0E0E0',
+                  my: 1,
+                },
+              },
+            }}
+            onInputChange={onInputChange}
+            onChange={(e, val) => {
+              const removedOption =
+                Array.isArray(field?.value) && field?.value?.length > val?.length
+                  ? field?.value.find((selected) => !val?.includes(selected))
+                  : null;
+              const newValue = singleSelect ? (() => (Array.isArray(val) ? val[0] : val))() : val;
+              field.onChange(newValue);
+              onChange?.(e, newValue, removedOption);
+            }}
+            {...props}
+          />
+          {error && (
+            <p data-testid="custom-error-message" className="error-helper-text">
+              {error?.message}
+            </p>
+          )}
+        </FormControl>
+      )}
+    />
+  );
+}
+
+CustomAutocomplete.propTypes = {
+  control: PropTypes.any,
+  value: PropTypes.any,
+  options: PropTypes.any,
+  onChange: PropTypes.any,
+  rules: PropTypes.any,
+  name: PropTypes.any,
+  getOptionLabel: PropTypes.any,
+  checkEquality: PropTypes.any,
+  onInputChange: PropTypes.any,
+  singleSelect: PropTypes.any,
+  dataTestId: PropTypes.any,
+  size: PropTypes.any,
+  placeholder: PropTypes.any,
+  isVirtualized: PropTypes.bool,
+};

package/src/views/custom-components/CustomCheckBox.jsx

@@ -0,0 +1,60 @@
+import { Checkbox, FormControl, FormControlLabel } from '@mui/material';
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Controller, get } from 'react-hook-form';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+
+const CustomCheckBox = forwardRef(
+  ({ name, label, control, onChange, rules = {}, errors, labelSizeInRem, isFullWidth = true, ...props }, ref) => {
+    const error = get(errors, name);
+    const { translate } = useTranslateProvider();
+
+    return (
+      <FormControl fullWidth={isFullWidth}>
+        <Controller
+          name={name}
+          rules={rules}
+          control={control}
+          render={({ field }) => (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  {...field}
+                  ref={ref}
+                  checked={Boolean(field.value)}
+                  onChange={(e) => {
+                    field.onChange(e.target.checked);
+                    onChange?.(e.target.checked);
+                  }}
+                  {...props}
+                />
+              }
+              label={typeof label === 'string' ? translate(label) : label}
+              sx={{
+                '& .MuiFormControlLabel-label': {
+                  fontSize: labelSizeInRem || '12px',
+                },
+              }}
+            />
+          )}
+        />
+        {error && <p className="error-helper-text">{error?.message}</p>}
+      </FormControl>
+    );
+  }
+);
+
+CustomCheckBox.displayName = 'CustomCheckBox';
+
+CustomCheckBox.propTypes = {
+  name: PropTypes.any,
+  label: PropTypes.any,
+  control: PropTypes.any,
+  onChange: PropTypes.any,
+  errors: PropTypes.any,
+  isFullWidth: PropTypes.any,
+  labelSizeInRem: PropTypes.any,
+  rules: PropTypes.any,
+};
+
+export default CustomCheckBox;

package/src/views/custom-components/CustomConfirmationModal.jsx

@@ -0,0 +1,118 @@
+import { Box, Button, Fade, IconButton, Modal, Stack, Typography } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const CustomConfirmationModal = ({
+  open,
+  handleClose,
+  handleClick,
+  handleNoClick = null,
+  title,
+  position = 'center',
+  description,
+  ActionExecutable = true,
+  dataTestId,
+  ...props
+}) => {
+  const handleProps = { ...props };
+  const { translate } = useTranslateProvider();
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      closeAfterTransition
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: position, // Align at top
+        mt: 2, // MUI spacing for top margin
+        '& .MuiBackdrop-root': {
+          backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        },
+      }}
+      data-testid={dataTestId}
+      {...props}
+    >
+      <Fade in={open} timeout={300}>
+        <Grid
+          container
+          className={`flex flex-col w-full max-w-[700px] bg-white shadow-lg rounded-md transform transition-all duration-200 ${
+            open ? 'translate-y-0 opacity-100' : '-translate-y-4 opacity-0'
+          }`}
+        >
+          <Grid className="flex p-2.5 py-1 border-b justify-between items-center">
+            <Typography
+              variant="body1"
+              className="font-medium text-lg text-customBlue"
+              data-testid={`${dataTestId}-title`}
+            >
+              {translate(title)}
+            </Typography>
+            <IconButton size="small" onClick={handleClose} data-testid={`${dataTestId}-close-button`}>
+              <FontAwesomeIcon icon={faXmark} />
+            </IconButton>
+          </Grid>
+
+          <Grid className="border-b border-gray-300 p-2.5">
+            <Box
+              className="max-h-[450px] w-full overflow-y-auto overflow-x-hidden"
+              data-testid={`${dataTestId}-description`}
+            >
+              <Typography variant="body2">{description}</Typography>
+            </Box>
+          </Grid>
+
+          <Grid className=" pb-0.5 pr-2.5">
+            <Stack direction="row" spacing={1} justifyContent="flex-end" mt={1} mb={0.5}>
+              <Button
+                variant="contained"
+                size="small"
+                color="secondary"
+                onClick={handleNoClick ? handleNoClick : handleClose}
+                data-testid={`${dataTestId}-no-button`}
+              >
+                <Typography variant="caption">
+                  {handleProps?.endTeleconsultationIfNoOneJoined
+                    ? `${translate('Stay')}`
+                    : ActionExecutable
+                      ? `${translate('No')}`
+                      : `${translate('Close')}`}
+                </Typography>
+              </Button>
+              {ActionExecutable && (
+                <Button
+                  variant="contained"
+                  size="small"
+                  color="primary"
+                  onClick={handleClick}
+                  data-testid={`${dataTestId}-yes-button`}
+                >
+                  {handleProps?.endTeleconsultationIfNoOneJoined ? translate('Leave') : translate('Yes')}
+                </Button>
+              )}
+            </Stack>
+          </Grid>
+        </Grid>
+      </Fade>
+    </Modal>
+  );
+};
+
+export default CustomConfirmationModal;
+
+CustomConfirmationModal.propTypes = {
+  open: PropTypes.any,
+  handleClose: PropTypes.any,
+  handleClick: PropTypes.any,
+  title: PropTypes.any,
+  description: PropTypes.any,
+  ActionExecutable: PropTypes.bool,
+  dataTestId: PropTypes.string,
+  position: PropTypes.any,
+  handleNoClick: PropTypes.any,
+};

package/src/views/custom-components/CustomCountrySelect.jsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Autocomplete, FormControl, TextField } from '@mui/material';
+import PropTypes from 'prop-types';
+import { Controller, get } from 'react-hook-form';
+import { Box } from '@mui/system';
+
+export default function CustomCountrySelect({
+  onInputChange,
+  onChange,
+  control,
+  errors,
+  name,
+  size = 'small',
+  dataTestId,
+  placeholder,
+  ...props
+}) {
+  const error = get(errors, name);
+  return (
+    <FormControl fullWidth error={!!error} data-testid={dataTestId}>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field }) => (
+          <Autocomplete
+            {...field}
+            options={countries || []}
+            disableClearable
+            size={size}
+            value={field.value || null}
+            getOptionLabel={(option) => option?.phone}
+            renderOption={(props, option) => {
+              const { key, ...optionProps } = props;
+              return (
+                <Box key={key} component="li" sx={{ '& > img': { mr: 1, flexShrink: 0 } }} {...optionProps}>
+                  <img
+                    loading="lazy"
+                    width="20"
+                    srcSet={`https://flagcdn.com/w40/${option?.code?.toLowerCase()}.png`}
+                    src={`https://flagcdn.com/w20/${option?.code?.toLowerCase()}.png`}
+                    alt={`${option.code} flag`}
+                  />
+                  {option.phone} ({option.code})
+                </Box>
+              );
+            }}
+            renderInput={(params) => {
+              const selected = field.value;
+
+              return (
+                <TextField
+                  {...params}
+                  size={size}
+                  placeholder={placeholder?.trim() ? placeholder : 'Select a Country'}
+                  error={!!error}
+                  slotProps={{
+                    input: {
+                      ...params.InputProps, // <-- ADD THIS LINE
+                      startAdornment: (
+                        <>
+                          {selected?.code && (
+                            <Box sx={{ '& > img': { ml: 1, mr: 1, gap: 1, flexShrink: 0 } }}>
+                              <img
+                                loading="lazy"
+                                width="20"
+                                srcSet={`https://flagcdn.com/w40/${selected.code?.toLowerCase()}.png`}
+                                src={`https://flagcdn.com/w20/${selected.code?.toLowerCase()}.png`}
+                                alt={`${selected.code} flag`}
+                              />
+                            </Box>
+                          )}
+                        </>
+                      ),
+                      endAdornment: <>{params.InputProps?.endAdornment}</>,
+                    },
+                  }}
+                />
+              );
+            }}
+            slotProps={{
+              paper: {
+                sx: {
+                  boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.1)',
+                  border: '1px solid #E0E0E0',
+                },
+              },
+            }}
+            onInputChange={onInputChange}
+            onChange={(e, val) => {
+              field.onChange(val);
+              onChange?.(e, val);
+            }}
+            {...props}
+          />
+        )}
+      />
+      {error && (
+        <p data-testid="custom-error-message" className="error-helper-text">
+          {error?.message}
+        </p>
+      )}
+    </FormControl>
+  );
+}
+
+CustomCountrySelect.propTypes = {
+  control: PropTypes.any,
+  value: PropTypes.any,
+  options: PropTypes.any,
+  onChange: PropTypes.any,
+  errors: PropTypes.any,
+  name: PropTypes.any,
+  getOptionLabel: PropTypes.any,
+  checkEquality: PropTypes.any,
+  onInputChange: PropTypes.any,
+  singleSelect: PropTypes.any,
+  dataTestId: PropTypes.any,
+  size: PropTypes.any,
+  placeholder: PropTypes.any,
+  key: PropTypes.any,
+};
+
+const countries = [
+  {
+    code: 'IN',
+    label: 'India',
+    phone: '+91',
+  },
+];

package/src/views/custom-components/CustomDatePicker.jsx

@@ -0,0 +1,122 @@
+import { FormControl, FormControlLabel } from '@mui/material';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Controller, get } from 'react-hook-form';
+import { useState } from 'react';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+
+export default function CustomDatePicker({
+  name,
+  control,
+  errors = {},
+  views = ['year', 'month', 'day'],
+  format = 'MM/DD/YYYY',
+  rules = {},
+  dataTestId,
+  prevDataSelection = true,
+  onChange,
+  ...props
+}) {
+  const error = get(errors, name);
+  const [open, setOpen] = useState(false);
+  const [currentView, setCurrentView] = useState(props.openTo || (views.includes('day') ? 'day' : views[0]));
+
+  return (
+    <FormControl fullWidth className="ml-2.5">
+      <Controller
+        name={name}
+        control={control}
+        className="w-full"
+        rules={rules}
+        render={({ field }) => (
+          <FormControlLabel
+            control={
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <DatePicker
+                  className="w-full"
+                  format={format}
+                  views={views}
+                  minDate={props.minDate || (!prevDataSelection ? dayjs() : undefined)}
+                  maxDate={props.maxDate}
+                  open={open}
+                  onOpen={() => {
+                    setOpen(true);
+                    if (props.openTo) {
+                      setCurrentView(props.openTo);
+                    } else if (views.includes('day')) {
+                      setCurrentView('day');
+                    } else {
+                      setCurrentView(views[0]);
+                    }
+                  }}
+                  onClose={() => setOpen(false)}
+                  view={currentView}
+                  onViewChange={(newView) => setCurrentView(newView)}
+                  slotProps={{
+                    textField: {
+                       ...(!GeneralUtil.isBahaar && { onClick: () => !open && setOpen(true) }),
+                      size: 'small',
+                      error: !!error,
+                      'data-testid': dataTestId,
+                      sx: {
+                        height: 38, // 👈 fixed height in px
+                        '& .MuiInputBase-root': {
+                          height: '100%', // Ensures internal input fills container
+                        },
+                      },
+                    },
+                  }}
+                  value={field.value ? dayjs(field.value) : null}
+                  onChange={(date) => {
+                    const isValid = date === null || date.isValid();
+                    if (isValid) {
+                      field.onChange(date);
+                      onChange?.(date);
+                    }
+                    if (currentView === 'year' && views.includes('month')) {
+                      setCurrentView('month');
+                    } else if (currentView === 'month' && views.includes('day')) {
+                      setCurrentView('day');
+                    } else if (isValid) {
+                      setOpen(false);
+                    }
+                  }}
+                  data-testid={dataTestId}
+                  {...props}
+                />
+              </LocalizationProvider>
+            }
+            sx={{
+              '& .MuiFormControlLabel-label': {
+                fontSize: '0.82rem',
+              },
+              width: '100%',
+            }}
+          />
+        )}
+      />
+      {error && (
+        <p data-testid="custom-error-message" className="error-helper-text">
+          {error?.message}
+        </p>
+      )}
+    </FormControl>
+  );
+}
+
+CustomDatePicker.propTypes = {
+  name: PropTypes.string.isRequired,
+  control: PropTypes.object.isRequired,
+  errors: PropTypes.object,
+  views: PropTypes.array,
+  dataTestId: PropTypes.string,
+  format: PropTypes.string,
+  prevDataSelection: PropTypes.any,
+  onChange: PropTypes.any,
+  rules: PropTypes.any,
+  minDate: PropTypes.any,
+  maxDate: PropTypes.any,
+};