focalxaiinspection/src/lib/Components/CarBodyType/CarBodyType.js

Focalx AI Inspection

import React,{useState} from "react";
import {useNavigate} from 'react-router-dom';
import { CarBodyTypeData } from '../../Data/CarBodyTypeData';
import CreateInspection from '../../services/Api/CreateInspection';
import "./CarBodyType.scss";
const vinGenerator = require('vin-generator');

const CarBodyType = () => {
  const navigate = useNavigate();
  const [activeIndex, setActiveIndex] = useState(0);

  const handleOnClick = index => {
    setActiveIndex(index);
  };
  const generateVinNumber = () => {
    try{

    }catch(e){
      console.log(e);
    }
  };
  const handleNextClick = () => {
    let carData = JSON.parse(sessionStorage.getItem('carInformation')) || {};
    carData.carBodyType = CarBodyTypeData[activeIndex].carBodyType;
    if(carData.vin === ""){
      carData.vin = vinGenerator.generateVin() || "4T3ZK3BB7BU042861";
    }
    sessionStorage.setItem('carInformation', JSON.stringify(carData));
    // Pass cardData to CreateInspection function
    CreateInspection(carData)
      .then(data => {
        // Store inspection id in local storage
        const inspection_id = data.inspection.id; 
        sessionStorage.setItem("inspection_id", inspection_id);
        navigate("/beautyshots");
      })
      .catch(error => {
        console.error(error);
      });
  };
  

  return (
    <>
      <div className="car-body-type-list">
        <div className="container">
          <div className="car-body-types">
            {CarBodyTypeData.map((result, index) => {
              const {photo, carBodyType} = result;
              return (                
                <div 
                  key={index}  
                  className={activeIndex === index ? 'custom-card car-body-type-card active' : 'custom-card car-body-type-card'}
                  onClick={() => handleOnClick(index)}
                >
                  <div className="car-body-type-name">{carBodyType}</div>
                  <div className="car-body-type-img"> <img src={photo} alt=""/></div>
                  <div className="car-body-type-check"><img src={require('../../Assets/images/confirm-orange.svg').default} alt="" /></div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className="action-btn-wrap bottom-action-btns justify-content-end">
        {/*<Link to="/car-information" className="custom-secondary-outline-button left-side-btn justify-content-center">Back</Link>*/} 
        <button className="custom-primary-button right-side-btn justify-content-center" onClick={handleNextClick}>Next</button>
      </div>
    </>
  );
};

export default CarBodyType;