focalxaiinspection/src/lib/Pages/DamageReportPage/DamageReportPage.js

Focalx AI Inspection

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import './DamageReportPage.scss';
import { Heading } from '../../Components/Heading';
import { TabNavItem, TabContent } from './../../Components/TabComponent';
import { DamageType } from './../../Components/DamageType';
import { DamageList } from './../../Components/DamageList';
import { CarDetails } from '../../Components/CarDetails';
import GetInspectionReport from '../../services/Api/GetInspectionReport';
//import GetBaseURL from '../../services/Api/base';
const DamageReportPage = () => {
    const [activeTab, setActiveTab] = useState("damages");
    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(false);
    useEffect(() => {
        GetInspectionReport()
            .then((data) => {
                setData(data);
            })
            .catch((error) => {
                console.log("Error getting user profile:", error);
            });
    }, []);

    const handleSubmit = () => {
        try {
            setLoading(true);
            const inspeectionId = sessionStorage.getItem('inspection_id');
            //const baseUrl = GetBaseURL();
            const car_info = JSON.parse(sessionStorage.getItem('carInformation'));
            const baseUrl = car_info.baseUrl;
            const schemaName = sessionStorage.getItem('schema_name');
            const accessToken = sessionStorage.getItem('token');
            const damageSubmissionUrl = `https://${schemaName}.${baseUrl}/api/v1/service/inspections/${inspeectionId}/confirm/`;
            let urlencoded = new URLSearchParams();
            urlencoded.append("name", "");
            urlencoded.append("phone_number", "");
            urlencoded.append("email", "");

            const requestOptions = {
                method: 'POST',
                headers: {
                    'Content-Type': "application/x-www-form-urlencoded",
                    'Authorization': `Bearer ${accessToken}`
                },
                body: urlencoded,
            };

            fetch(damageSubmissionUrl, requestOptions)
                .then(response => response.json())
                .then(result => {
                    redirectToBaseURL();
                })
                .catch(error => {
                    console.log('error', error);
                    redirectToBaseURL();
                });
        } catch (e) {
            console.log(e)
        }
    }

    const redirectToBaseURL = () => {
        const carInfo = JSON.parse(sessionStorage.getItem('carInformation')) || {};
        setLoading(false);
        window.location.href = carInfo.call_back_url;
    }

    return (
        <>
            <main className='bottom-spacing'>
                <div className="processing-tab">
                    <div className="processing">
                        {data?.image_report?.length}/{data?.stats?.total_images_uploaded}
                    </div>
                </div>
                <Heading title="Damage Report" />
                <div className='damage-report-section'>
                    <div className='tabs-container'>
                        <ul className="nav-tabs">
                            <TabNavItem title="Car Details" id="car-details" activeTab={activeTab} setActiveTab={setActiveTab} />
                            <TabNavItem title="Car Images" id="car-images" activeTab={activeTab} setActiveTab={setActiveTab} />
                            <TabNavItem title="Damages" id="damages" activeTab={activeTab} setActiveTab={setActiveTab}  />
                        </ul>
                        <div className="tab-content">
                            <TabContent id="car-details" activeTab={activeTab}>
                                {/* <div className="container">
                                    <div className="icon-wrap">
                                        <span>
                                            <img src={require('../../Assets/images/edit.svg').default} alt="" />
                                        </span>
                                    </div>
                                    <CarDetails />
                                </div> */}
                            </TabContent>
                            <TabContent id="car-images" activeTab={activeTab}>
                                {/* <div className="container">
                                    <div className="icon-wrap">
                                        <span>
                                            <img src={require('../../Assets/images/edit.svg').default} alt="" />
                                        </span>
                                    </div>
                                </div> */}
                                <DamageType />
                            </TabContent>
                            <TabContent id="damages" activeTab={activeTab}>
                                <div className="container left0">
                                    <div className="icon-wrap">                                        
                                        <Link to="/capture-damage-images" className="custom-secondary-outline-button left-side-btn justify-content-center">Add Damage</Link>
                                        {/* <span>
                                            <img src={require('../../Assets/images/edit.svg').default} alt="" />
                                        </span> */}
                                    </div>
                                    {loading && (
                                        <div className="lds-roller-overlay">
                                            <div className="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                        </div> 
                                    )}
                                    <DamageList />
                                    <div className="action-btn-wrap bottom-action-btns justify-content-end">
                                        <button
                                            type="button"
                                            onClick={handleSubmit}
                                            className="custom-primary-button right-side-btn justify-content-center">
                                            Confirm
                                        </button>
                                    </div>
                                </div>
                            </TabContent>
                        </div>
                    </div>
                </div>
            </main>
        </>
    );
};

export default DamageReportPage;