@movalib/movalib-commons 1.59.13 → 1.59.15

package/src/components/vehicle/VehicleFullCard.tsx

@@ -0,0 +1,549 @@
+import {
+    Alert, Box, Button, Card, CardActions, CardContent, FormControl, FormHelperText, Grid, IconButton, InputLabel,
+    Link, MenuItem, Select, SelectChangeEvent, TextField, Tooltip, Typography, darken, useTheme
+} from '@mui/material';
+import { useState, type FC, useEffect, useRef } from 'react';
+import CarFigure from "../../assets/images/car_figure.png";
+import { MovaFormField, MovaVehicleForm } from '../../helpers/Types';
+import Vehicle from '../../models/Vehicle';
+import Document from '../../models/Document';
+import VehicleTire from '../../models/VehicleTire';
+import MovaVehicleTireField from '../../MovaVehicleTireField';
+import ConfirmationDialog from '../../ConfirmationDialog';
+import { DocumentType, DateFormatTypes, MovaAppType } from '../../helpers/Enums';
+import { validateField, formatVehicleTire, formatFrenchVehiclePlate, iAmOwner } from '../../helpers/Tools';
+import MovaDigitalPassport from '../../MovaDigitalPassport';
+import Loader from '../../Loader';
+import { formatDateByCountryCode } from '../../helpers/DateUtils';
+import CancelIcon from '@mui/icons-material/CloseRounded';
+import EditIcon from '@mui/icons-material/EditRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import Logger from '../../helpers/Logger';
+import { AttachFile } from '@mui/icons-material';
+import { LinkedDocumentDialog } from '../LinkedDocumentDialog';
+
+interface VehicleFullCardProps {
+    vehicle: Vehicle,
+    onError: (message: string) => void,
+    onUploadDocument: (data: FormData) => void,
+    onDeleteDocument: (documentId: string) => void,
+    editMode: boolean,
+    appType: MovaAppType;
+    fullwidth?: boolean,
+    focused?: boolean,
+    onUpdate?: (form: MovaVehicleForm) => void,
+    onDelete?: () => void;
+    currentUpload: boolean;
+}
+
+const initialUserFormState = {
+    currentMileage: { value: null, isValid: true },
+    averageMileagePerYear: { value: null, isValid: true },
+    tireSize: { value: null, isValid: true },
+    tireWidth: { value: '', isValid: true },
+    tireHeight: { value: '', isValid: true },
+    tireDiameter: { value: '', isValid: true },
+    tireSpeedIndex: { value: '', isValid: true }
+}
+
+const VehicleFullCard: FC<VehicleFullCardProps> = ({ vehicle, fullwidth, onError, onUploadDocument, onDeleteDocument, appType, editMode = false, focused = false, onUpdate, onDelete, currentUpload }) => {
+
+    const theme = useTheme();
+    const [localEditMode, setLocalEditMode] = useState(editMode);
+    const [openConfirmDocumentDelete, setOpenConfirmDocumentDelete] = useState(false);
+    const [openConfirmVehicleDelete, setOpenConfirmVehicleDelete] = useState(false);
+    const [documentToDelete, setDocumentToDelete] = useState('');
+    const [sizeLimit, setSizeLimit] = useState(false);
+    // Formulaire utilisé pour les modifications d'informations sur le véhicule
+    const [form, setForm] = useState<MovaVehicleForm>(initialUserFormState);
+    // Références aux éventuels documents uploadés depuis la fiche
+    const invoiceInputRef = useRef<HTMLInputElement>(null);
+    const tirePictureInputRef = useRef(null);
+    const [isShowLinkedDocument, setShowLinkedDocument] = useState(false);
+    const docTypeCurrent = useRef<DocumentType>();
+
+    const messageRGPD = appType === MovaAppType.INDIVIDUAL ? <Box></Box> : <Box sx={{ mt: 2 }}><Alert severity='warning'>
+        Vous êtes responsable des documents que vous importez, en ajoutant un document vous reconnaissez
+        disposer du consentement explicite du client pour le stockage de ses données conformément à la
+        réglementation RGPD.
+    </Alert></Box>;
+
+    useEffect(() => {
+        setLocalEditMode(editMode);
+    }, [editMode]);
+
+    useEffect(() => {
+        initForm();
+    }, [vehicle]);
+
+    const initForm = () => {
+        if (vehicle) {
+
+            setForm(prevForm => (
+                { ...prevForm, ['currentMileage']: { ...prevForm['currentMileage'], value: vehicle.currentMileage } }));
+            setForm(prevForm => (
+                { ...prevForm, ['averageMileagePerYear']: { ...prevForm['averageMileagePerYear'], value: vehicle.averageMileagePerYear } }));
+            setForm(prevForm => (
+                { ...prevForm, ['tireWidth']: { ...prevForm['tireWidth'], value: vehicle.tireWidth } }));
+            setForm(prevForm => (
+                { ...prevForm, ['tireHeight']: { ...prevForm['tireHeight'], value: vehicle.tireHeight } }));
+            setForm(prevForm => (
+                { ...prevForm, ['tireDiameter']: { ...prevForm['tireDiameter'], value: vehicle.tireDiameter } }));
+            setForm(prevForm => (
+                { ...prevForm, ['tireSpeedIndex']: { ...prevForm['tireSpeedIndex'], value: vehicle.tireSpeedIndex } }));
+
+            if (isVehicleTireSizeDefined(vehicle)) {
+                setForm(prevForm => (
+                    { ...prevForm, ['tireSize']: { ...prevForm['tireSize'], value: vehicle.tireSize } }));
+            }
+
+            Logger.info(form);
+        }
+    }
+
+    const toggleShowLinkedDocument = (docType: DocumentType | null) => {
+        setShowLinkedDocument(!isShowLinkedDocument);
+        if (docType && invoiceInputRef.current) {
+            docTypeCurrent.current = docType;
+            invoiceInputRef.current.click();
+        } else {
+            docTypeCurrent.current = undefined;
+        }
+    }
+
+    const isVehicleTireSizeDefined = (vehicle: Vehicle) => {
+        return vehicle.tireSize && vehicle.tireSize.diameter && vehicle.tireSize.height && vehicle.tireSize.speedIndex && vehicle.tireSize.width;
+    }
+
+    const validateForm = () => {
+        let newForm: MovaVehicleForm = { ...form };
+
+        // Validator pour les champs obligatoires
+        newForm.currentMileage = validateField(form.currentMileage, value => !!value, 'Champ obligatoire');
+        newForm.averageMileagePerYear = validateField(form.averageMileagePerYear, value => !!value, 'Champ obligatoire');
+
+        // La validation de la saisie des pneumatiques se fait dans le composant "MovaVehicleTireField", traitée dans le callback "handleOnChangeVehicleTire"
+
+        setForm(newForm);
+
+        return newForm.currentMileage.isValid && newForm.averageMileagePerYear.isValid && newForm.tireSize.isValid;
+    }
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {
+        handleChange(e.target.name, e.target.value);
+    }
+
+    const handleSelectChange = (e: SelectChangeEvent<string>): void => {
+        handleChange(e.target.name, e.target.value);
+    }
+
+    const handleChange = (fieldName: string, fieldValue: string): void => {
+        const newField: MovaFormField = { [fieldName]: { value: fieldValue, isValid: true } };
+
+        setForm({ ...form, ...newField });
+    }
+
+    const uploadVehicleDocument = (document: File, documentType: DocumentType) => {
+        if (document.size > 10000000) {
+            setSizeLimit(true);
+            return;
+        }
+
+        if (vehicle && document && documentType) {
+
+            // Utilisation d'un formData pour permettre le trasnfert de fichier vers l'API
+            let formData = new FormData();
+            formData.append("documentType", documentType);
+            // Ajouter la facture à FormData
+            formData.append('file', document);
+
+            // Appel du callback correspondant
+            if (onUploadDocument)
+                onUploadDocument(formData);
+        }
+    }
+
+    /**
+     * 
+     * @param event L'upload des documents se fait directement lors du téléchargement
+     * @param docType 
+     */
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>, docType: DocumentType) => {
+        event.preventDefault();
+
+        if (event && event.target.files && event.target.files.length > 0 && docType) {
+            uploadVehicleDocument(event.target.files[0], docType);
+        }
+
+    };
+
+    const handleOnClickEdit = () => {
+
+        // On passe la fiche véhicule en mode édition
+        setLocalEditMode(true);
+    }
+
+    const handleOnChangeVehicleTire = (vehicleTire: VehicleTire, isValid: boolean) => {
+        setForm(prevForm => (
+            { ...prevForm, ['tireSize']: { ...prevForm['tireSize'], value: vehicleTire, isValid: isValid } }));
+    }
+
+    const handleOnClickDeleteVehicle = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+        e.preventDefault();
+        setOpenConfirmVehicleDelete(true);
+    }
+
+    const handleDeleteDocument = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, documentId: string) => {
+        e.preventDefault();
+        setDocumentToDelete(documentId);
+        setOpenConfirmDocumentDelete(true);
+    }
+
+    const handleOnClickValidate = () => {
+
+        if (validateForm()) {
+
+            Logger.info(form.tireSize.value);
+
+            let query = {
+                currentMileage: form.currentMileage.value,
+                averageMileagePerYear: form.averageMileagePerYear.value,
+                tireWidth: form.tireSize.isValid && form.tireSize.value ? (form.tireSize.value as VehicleTire).width : undefined,
+                tireHeight: form.tireSize.isValid && form.tireSize.value ? (form.tireSize.value as VehicleTire).height : undefined,
+                tireDiameter: form.tireSize.isValid && form.tireSize.value ? (form.tireSize.value as VehicleTire).diameter : undefined,
+                tireSpeedIndex: form.tireSize.isValid && form.tireSize.value ? (form.tireSize.value as VehicleTire).speedIndex : undefined
+            }
+            Logger.info(query)
+
+            // Appel du callback correspondant
+            if (onUpdate)
+                onUpdate(form);
+        }
+    }
+
+    const handleOnClickCancel = () => {
+        initForm();
+        setLocalEditMode(false);
+    }
+
+    const handleCloseConfirmDocumentDelete = () => {
+        setOpenConfirmDocumentDelete(false);
+        setDocumentToDelete('');
+    }
+
+    const handleCloseConfirmVehicleDelete = () => {
+        setOpenConfirmVehicleDelete(false);
+    }
+
+    /**
+     * 
+     */
+    const handleConfirmDocumentDelete = () => {
+        setOpenConfirmDocumentDelete(false);
+
+        if (vehicle && documentToDelete) {
+
+            // Appel du callback correspondant
+            if (onDeleteDocument)
+                onDeleteDocument(documentToDelete);
+        }
+    }
+
+    const handleConfirmVehicleDelete = () => {
+        setOpenConfirmVehicleDelete(false);
+
+        if (vehicle && onDelete) {
+
+            // Appel du callback correspondant
+            onDelete();
+        }
+    }
+
+    return (
+        <>
+            {vehicle &&
+                <Card variant='outlined' sx={{
+                    maxWidth: fullwidth ? '80%' : 345,
+                    backgroundColor: focused ? theme.palette.primary.light : 'white',
+                    overflow: 'visible', mt: 4, pb: 1
+                }}
+                >
+                    <img src={CarFigure} style={{
+                        position: 'relative',
+                        width: '40%',
+                        top: '-25px',
+                        left: '-15px',
+                        zIndex: 200
+                    }} alt='Icone Voiture'>
+                    </img>
+
+                    <MovaDigitalPassport digitalPassportIndex={vehicle.digitalPassportIndex} />
+
+                    <CardContent sx={{ pt: 0, pb: 0 }}>
+                        <Typography variant="h6" component="div" align="center" sx={{ mb: 1 }} color={darken(theme.palette.primary.main, 0.2)}>
+                            {vehicle.brand && `${vehicle.brand} `}
+                            {vehicle.model && `${vehicle.model} `}
+                            {vehicle.version && `${vehicle.version}`}
+                        </Typography>
+                        <Grid container justifyContent="space-between">
+
+                            <Grid item xs={12}>
+                                <Typography variant="body1" color="text.primary">
+                                    <b>{formatFrenchVehiclePlate(vehicle.plate)}</b>
+                                </Typography>
+                            </Grid>
+
+                            {!localEditMode && <Grid container textAlign='justify' sx={{ pt: 2 }}>
+                                <Grid item xs={8} >
+                                    <Typography variant="body1" color="text.secondary">
+                                        Km actuel :
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={4} sx={{ textAlign: 'right' }}>
+                                    <Typography variant="body1" color="text.secondary">
+                                        <b>{vehicle.currentMileage} km</b>
+                                    </Typography>
+                                </Grid>
+                            </Grid>}
+
+                            {localEditMode && <Grid item xs={12}>
+                                <TextField
+                                    label="Kilométrage actuel"
+                                    name="currentMileage"
+                                    variant="outlined"
+                                    type="number"
+                                    required
+                                    value={form.currentMileage.value}
+                                    onChange={(e) => handleInputChange(e)}
+                                    error={(Boolean(form.currentMileage.error))}
+                                    sx={{
+                                        width: '100%',
+                                        mt: 2,
+                                        '& input': { textTransform: 'uppercase' } // CSS pour forcer les majuscules dans l'input
+                                    }}
+                                    helperText={Boolean(form.currentMileage.error && form.currentMileage.value > 0)
+                                        ? form.currentMileage.error : "Sur votre tableau de bord 😉"}
+                                />
+                            </Grid>}
+
+                            {!localEditMode && <Grid container textAlign='justify' sx={{ pt: 2 }}>
+                                <Grid item xs={8} >
+                                    <Typography variant="body1" color="text.secondary">
+                                        Km moyen annuel :
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={4} sx={{ textAlign: 'right' }}>
+                                    <Typography variant="body1" color="text.secondary">
+                                        <b>{vehicle.averageMileagePerYear} km</b>
+                                    </Typography>
+                                </Grid>
+                            </Grid>}
+
+                            {localEditMode && <Grid item xs={12}>
+                                <FormControl fullWidth margin="normal" error={Boolean(form.averageMileagePerYear.error)}>
+                                    <InputLabel id="averageMileagePerYear-label">Kilométrage moyen annuel</InputLabel>
+                                    <Select
+                                        labelId="averageMileagePerYear-label"
+                                        id="averageMileagePerYear"
+                                        name="averageMileagePerYear"
+                                        value={form.averageMileagePerYear.value ?
+                                            String(form.averageMileagePerYear.value) : ''}
+                                        onChange={e => handleSelectChange(e)}
+                                        label="Kilométrage moyen annuel"
+                                    >
+                                        <MenuItem value={5000}>5 000</MenuItem>
+                                        <MenuItem value={10000}>10 000</MenuItem>
+                                        <MenuItem value={15000}>15 000</MenuItem>
+                                        <MenuItem value={20000}>20 000</MenuItem>
+                                        <MenuItem value={25000}>25 000</MenuItem>
+                                        <MenuItem value={30000}>30 000</MenuItem>
+                                        <MenuItem value={50000}>50 000</MenuItem>
+                                        <MenuItem value={75000}>75 000</MenuItem>
+                                        <MenuItem value={100000}>100 000</MenuItem>
+                                        <MenuItem value={999999}>+100 000</MenuItem>
+                                    </Select>
+                                    <FormHelperText>{form.averageMileagePerYear.error}</FormHelperText>
+                                </FormControl>
+                            </Grid>}
+
+                            {!localEditMode && <Grid container textAlign='justify' sx={{ pt: 2 }}>
+                                <Grid item xs={6}>
+                                    <Typography variant="body1" color="text.secondary">
+                                        Pneumatiques :
+                                    </Typography>
+                                </Grid>
+                                <Grid item xs={6} sx={{ textAlign: 'right' }}>
+                                    <Typography variant="body1" color="text.secondary">
+                                        {isVehicleTireSizeDefined(vehicle) ? <b>{formatVehicleTire(vehicle.tireSize)}</b> : '-'}
+                                    </Typography>
+                                </Grid>
+                            </Grid>}
+
+                            {localEditMode && <Grid item xs={12} sx={{ mt: 1 }}>
+                                <MovaVehicleTireField
+                                    vehicleTire={form.tireSize.value}
+                                    onChangeVehicleTire={handleOnChangeVehicleTire}
+                                />
+                            </Grid>}
+
+                        </Grid>
+
+                        {!localEditMode && <>
+
+                            <Grid item xs={12}>
+                                <Typography variant="h6" component="div" align="center" sx={{ mt: 3, mb: 1 }} color={darken(theme.palette.primary.main, 0.2)}>
+                                    CARNET DU VÉHICULE
+                                </Typography>
+                            </Grid>
+
+                            {vehicle.documents && vehicle.documents?.map((invoice, index) => (
+                                <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center' }} key={index + 1}>
+                                    <Grid item xs={11} key={(index + 1) * 50} sx={{ textAlign: 'left' }} >
+                                        <Tooltip title={invoice.originalFileName}>
+                                            <Link color={darken('#F29ABA', 0.2)} href={invoice.fileSignedUrl} target="_blank" rel="noopener">
+                                                <Typography variant="body1">
+                                                    {invoice.fileName + ' ' + formatDateByCountryCode(invoice.creationDate, 'fr', DateFormatTypes.SHORT_FORMAT_DATE)}
+                                                </Typography>
+                                            </Link>
+                                        </Tooltip>
+                                    </Grid>
+                                    <Grid item xs={1} key={(index + 1) * 100} sx={{ textAlign: 'right' }}>
+                                        <IconButton disabled={!iAmOwner(invoice?.ownerId)} onClick={(e) => handleDeleteDocument(e, invoice?.id)}>
+                                            <CloseIcon />
+                                        </IconButton>
+                                    </Grid>
+                                </Grid>
+                            ))}
+
+                            {/* * Les FACTURES du véhicule
+                                {vehicle.documents && vehicle.documents?.filter(doc => doc.type === DocumentType.VEHICLE_MAINTENANCE_INVOICE)
+                                .map((invoice, index) => (
+                                    <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center' }} key={index+1}>
+                                        <Grid item xs={11}  key={(index+1)*50} sx={{ textAlign: 'left' }} >
+                                            <Link color={darken('#F29ABA', 0.2)} href={invoice.fileSignedUrl} target="_blank" rel="noopener">
+                                                <Typography variant="body1">
+                                                    Facture du {formatDateByCountryCode(invoice.creationDate, 'fr', DateFormatTypes.SHORT_FORMAT_DATE)}
+                                                </Typography>
+                                            </Link>
+                                        </Grid>
+                                        <Grid item xs={1}  key={(index+1)*100} sx={{ textAlign: 'right' }}>
+                                            <IconButton onClick={(e) => handleDeleteDocument(e, invoice.id)}>
+                                                <CloseIcon />
+                                            </IconButton>
+                                        </Grid>
+                                    </Grid>
+                                ))}
+    
+                                {vehicle.documents && vehicle.documents?.filter(doc => doc.type === DocumentType.VEHICLE_TIRE_PHOTO)
+                                .map((tirePhoto, index) => (
+                                    <Grid container sx={{ justifyContent: 'space-between', alignItems: 'center' }} key={index+1}>
+                                        <Grid item xs={11} key={(index+1)*50} sx={{ textAlign: 'left' }} >
+                                            <Link color={darken('#F29ABA', 0.2)} href={tirePhoto.fileSignedUrl} target="_blank" rel="noopener">
+                                                <Typography variant="body1">
+                                                    Photo pneu du {formatDateByCountryCode(tirePhoto.creationDate, 'fr', DateFormatTypes.SHORT_FORMAT_DATE)}
+                                                </Typography>
+                                            </Link>
+                                        </Grid>
+                                        <Grid item xs={1}  key={(index+1)*100} sx={{ textAlign: 'right' }}>
+                                            <IconButton onClick={(e) => handleDeleteDocument(e, tirePhoto.id)}>
+                                                <CloseIcon />
+                                            </IconButton>
+                                        </Grid>
+                                    </Grid>
+                                ))} */}
+
+                            <Grid container >
+                                <Grid item xs={12} sx={{ mt: 2, textAlign: 'center' }} >
+                                    <div>
+                                        <input
+                                            accept="image/*, application/pdf"
+                                            type="file"
+                                            style={{ display: 'none' }}
+                                            ref={invoiceInputRef}
+                                            id="raised-button-invoice"
+                                            onChange={(e) => handleFileChange(e, docTypeCurrent.current!)}
+                                        />
+                                        <Button size='large' disabled={currentUpload} onClick={() => setShowLinkedDocument(true)} component="span" variant="outlined" startIcon={<AttachFile />}
+                                            sx={{ alignItems: 'center', width: '90%', mt: 2, mb: 1, height: '50px', p: 1, color: darken(theme.palette.primary.main, 0.2) }}>
+
+                                            Ajouter un document
+
+                                        </Button>
+                                        {currentUpload && <Typography variant='body2' sx={{ animation: 'blink 1.5s infinite' }}>
+                                            Document en cours d'importation...
+                                        </Typography>}
+                                        {sizeLimit && <Typography
+                                            variant='body1'
+                                            sx={{ animation: 'blink 1.5s infinite' }}
+                                            color={theme.palette.warning.dark}
+                                        >Echec de l'importation car la taille du fichier dépasse 10Mo</Typography>}
+                                        {!sizeLimit && <Typography variant='body2'>
+                                            Taille maximale du fichier : 10Mo
+                                        </Typography>}
+                                    </div>
+                                </Grid>
+                            </Grid>
+                        </>
+                        }
+
+                    </CardContent>
+
+                    <CardActions sx={{ mt: 3, justifyContent: localEditMode ? 'center' : 'end' }}>
+                        {!localEditMode &&
+                            <>
+                                <Button onClick={handleOnClickEdit} color="inherit" sx={{ width: '45%' }} variant='text'>
+                                    <EditIcon sx={{ mr: 1 }} />MODIFIER
+                                </Button>
+                            </>
+                        }
+
+                        {localEditMode &&
+                            <>
+                                <Button onClick={handleOnClickCancel} sx={{ width: '45%', color: theme.palette.text.secondary }} variant='text'>
+                                    <CancelIcon sx={{ mr: 1 }} />ANNULER
+                                </Button>
+
+                                <Button onClick={handleOnClickValidate} sx={{ width: '45%', color: darken(theme.palette.primary.main, 0.2) }} variant='text'>
+                                    <EditIcon sx={{ mr: 1 }} />VALIDER
+                                </Button>
+                            </>
+                        }
+                    </CardActions>
+
+                </Card>
+            }
+            {isShowLinkedDocument && <LinkedDocumentDialog
+                isVehicle={true}
+                isShowLinkedDocument={isShowLinkedDocument}
+                appType={appType}
+                toggleShowLinkedDocument={toggleShowLinkedDocument}
+                message={messageRGPD}
+            />}
+
+            {localEditMode && onDelete &&
+                <Button onClick={(e) => handleOnClickDeleteVehicle(e)} sx={{
+                    width: '90', mt: 4, color: theme.palette.error.light,
+                    borderColor: theme.palette.error.light
+                }} variant='outlined'>
+                    Supprimer le véhicule
+                </Button>
+            }
+
+            <ConfirmationDialog
+                open={openConfirmDocumentDelete}
+                onClose={handleCloseConfirmDocumentDelete}
+                onConfirm={handleConfirmDocumentDelete}
+                message="Êtes-vous sûr de vouloir supprimer ce document ?"
+            />
+
+            <ConfirmationDialog
+                open={openConfirmVehicleDelete}
+                onClose={handleCloseConfirmVehicleDelete}
+                onConfirm={handleConfirmVehicleDelete}
+                message="Êtes-vous sûr de vouloir supprimer ce véhicule ?"
+            />
+        </>
+    );
+}
+
+export default VehicleFullCard;