Notes

import React, { useState } from "react";
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
// import { useNavigate } from 'react-router-dom';
import {
Typography,
TextField,
Button,
Stepper,
Step,
StepLabel,
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import "./registration.css";
import { display, padding } from "@mui/system";
import { background } from "@chakra-ui/react";

const useStyles = makeStyles((theme) => ({
button: {
marginRight: theme.spacing(1),
},
}));

function getSteps() {
return [
"Personal Details",
"Agency Details",
"Agency GST Details",
];
}

// const navigate = useNavigate();
// const clickback = () => {
// navigate('/Registerone')
// }

function getStepContent(step) {
switch (step) {
case 0:
return (
<React.Fragment>
<div className='registrationContainer' style={{ backgroundColor: 'white', borderRadius: '10px', padding: '20px', backgroundSize: '100% 100%' }}>



<Box>
<Typography>Personal Details</Typography>
<div>
<Grid container spacing={2} display='flex' justifyContent='center' p={3} >

<Grid item xs={12} sm={12} md={4} alignItems='center'>
<Box py={2} display='flex' justifyContent='space-between' style={{ gap: '10px' }}>
<div className="form_input" mx={2}>
<label for="from" className="form_lable">First Name*</label>
<input type='text' placeholder=' Enter First Name' className='input_size' required />
</div>
<div className="form_input" mx={2}>
<label for="from" className="form_lable">Last Name*</label>
<input type='text' placeholder=' Enter Last Name' className='input_size' required />
</div>
</Box>

<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Residential Address*</label>
<input type='text' placeholder='Residential Address' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Pin Code*</label>
<input type='number' placeholder=' Enter Pin Code' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">State/Province*</label>
<input type='text' placeholder=' State' className='input_size' required />
</div>
</Box>

</Grid>
<Grid item xs={12} sm={12} md={4} alignItems='center'>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Mobile Number</label>
<input type='text' placeholder="91+" className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable"> Address 2</label>
<input type='text' placeholder=' Enter Address 2' className='input_size' />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">City*</label>
<input type='text' placeholder=' Enter Your City' className='input_size' required />
</div>
</Box>


</Grid>
<Grid item xs={12} sm={12} md={4} alignItems='center'>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Email*</label>
<input type='email' placeholder=' Enter Your Email' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable"> Telli Phone Number </label>
<input type='number' placeholder=' Enter Your Telli Phone Number' className='input_size' />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Country*</label>
<input type='text' placeholder=' Enter Your Country' className='input_size' required />
</div>
</Box>



</Grid>
</Grid>


</div>

</Box>
</div>
</React.Fragment>
);

case 1:
return (
<React.Fragment>
<div className='registrationContainer' style={{ backgroundColor: 'white', borderRadius: '10px', padding: '20px', backgroundSize: '100% 100%' }}>



<Box>
<Typography>Agency Details</Typography>
<div>
<Grid container spacing={2} display='flex' justifyContent='center' alignItems='center' textAlign='center' p={3} >

<Grid item xs={12} sm={12} md={4} alignItems='center'>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Agency Name*</label>
<input type='text' placeholder=' Enter Agency Name' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Mobile No.*</label>
<input type='number' placeholder=' Enter Mobile No.' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Fax*</label>
<input type='number' placeholder=' Enter Fax code' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">State/Province*</label>
<input type='text' placeholder='State' className='input_size' required />
</div>
</Box>
<Box py={2}>
<form>
<div className="form-row d-flex">
<div className="px-3 py-2">
Office Space: <input type="checkbox" required /> Ownered
</div>
<div className="px-3 py-2">
<input type="checkbox" /> Rented
</div>
</div>
</form>
</Box>
<Box py={2}>
<form>
<div className="form_input">
<label for="from" className="form_lable">TDS</label>
<input type="text" className='input_size' placeholder="TDS Exemption:" />

</div>

</form>
</Box>
<Box py={2}>

<form>

<div className="form_input">
<label className="form_lable">References:
(optional)</label>
<textarea className="form-control Input_box" id="exampleFormControlTextarea1"
rows="3"></textarea>
</div>

</form>

</Box>
</Grid>
<Grid item xs={12} sm={12} md={4} alignItems='center'>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">PAN*</label>
<input type='file' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Agency Address*</label>
<input type='text' placeholder=' Enter Agency Address' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Pin Code*</label>
<input type='text' placeholder=' Enter Your Pin Code' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">City*</label>
<input type='text' placeholder=' Enter Your City' className='input_size' required />
</div>
</Box>
<Box py={2}>
<form>
<div className="form-row d-flex">
<div className="px-3 py-2">
IATA Registered: <input type="checkbox" required /> Yes
</div>
<div className="px-3 py-2">
<input type="checkbox" /> No
</div>
</div>
</form>
</Box>
<Box py={2}>
<form>
<div className="form_input">
<label for="from" className="form_lable">TDS(% for exemption)*</label>
<input type="text" className='input_size' placeholder="TDS(% for exemption)"
aria-label="Text input with segmented dropdown button" />

</div>

</form>
</Box>
<Box py={2}>
<form>

<div className="form_input">
<label for="from" className="form_lable">Consolidators:
(optional)</label>
<textarea className="form-control Input_box" id="exampleFormControlTextarea1"
rows="3"></textarea>
</div>

</form>

</Box>
</Grid>
<Grid item xs={12} sm={12} md={4} alignItems='center'>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">PAN Number*</label>
<input type='text' placeholder=' Enter PAN Number' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Address 2</label>
<input type='text' placeholder=' Enter Your Address 2' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Country*</label>
<input type='text' placeholder=' Enter Your Country' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Business Type*</label>
<select name="" id="" className='form_input_select'>
<option px={5} >Sole Proprietor</option>
<option mx={5}>Partnership</option>
<option px={5} >Joint Venture</option>
<option px={5} >PVT LTD. CO.</option>
<option mx={5}>HUF</option>
<option px={5} >Limited</option>
</select>
</div>
</Box>
<Box py={2}>
<form>

<div className="form_input">
<label for="from" className="form_lable">IATA Code*</label>
<input type='text' placeholder="IATA Code" required className='input_size' />
</div>

</form>
</Box>
<Box py={4.6}>

</Box>
<Box py={2}>
<form>

<div className="form_input">
<label for="from" className="form_lable">Remarks:(optional)</label>
<textarea className="form-control Input_box" id="exampleFormControlTextarea1"
rows="3"></textarea>
</div>

</form>
</Box>
</Grid>
</Grid>


</div>

</Box>
</div>
</React.Fragment>
);
case 2:
return (
<React.Fragment>
<div className='registrationContainer' style={{ backgroundColor: 'white', borderRadius: '10px', padding: '20px', backgroundSize: '100% 100%' }}>



<Box>
<Typography>Agency GST Details</Typography>
<div>
<Grid container spacing={2} display='flex' justifyContent='center' p={3} >

<Grid item xs={12} sm={12} md={4} alignItems='center'>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Agency Name</label>
<input type='text' placeholder=' Enter Agency Name' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">State*</label>
<input type='text' placeholder=' Enter Your State' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Contact Person</label>
<input type='number' placeholder=' Enter Contact Person' className='input_size' />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Email*</label>
<input type='email' placeholder=' Enter Email Id' className='input_size' required />
</div>
</Box>

<Box py={2}>
<form>
<div className="form_input">
<label for="from" className="form_lable">HSN/SAC code*</label>
<input type="text" className='input_size' placeholder="HSN/SAC code" required />
</div>
</form>
</Box>
<Box py={2}>
<form>
<div className="form_input">
<label for="from" className="form_lable">Address Line 2*</label>
<input type="text" className='input_size' placeholder="Enter Your Address" />
</div>
</form>
</Box>
<Box py={2}>
<form>
<div className="form_input">
<label for="from" className="form_lable">Tax*</label>
<select className='form_input_select' >
<option mx={5}>Tax</option>
<option px={5} >SEZWOP</option>
</select>
</div>
</form>
</Box>

</Grid>
<Grid item xs={12} sm={12} md={4} alignItems='center'>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Agency Classificaion*</label>
<select className='form_input_select' >
<option px={5}>Registered</option>
<option mx={5}>Unregistered</option>
<option px={5}>AppliedFor</option>
</select>
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">State Code*</label>
<input type='number' placeholder=' Enter Your State Code' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Telli Phone Number</label>
<input type='text' placeholder=' Enter Your Phone Number' className='input_size' />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Correspondance Mail Id</label>
<input type='email' placeholder=' Enter Your Correspondance Mail Id' className='input_size' />
</div>
</Box>

<Box py={2}>
<form>
<div className="form_input">
<label for="from" className="form_lable">Composition Levy as per Section 10 of CGST</label>
<select name="" id="" className='form_input_select' >
<option mx={5} sx={{ fontSize: "9px", fontWeight: "bold" }}>Yes</option>
<option px={5} >No</option>
</select>
</div>

</form>
</Box>
<Box py={2}>
<form>
<div className="form_input">
<label for="from" className="form_lable">Pin Code*</label>
<input type="number" className='input_size' placeholder=" Enter Pin Code" />

</div>

</form>
</Box>

</Grid>
<Grid item xs={12} sm={12} md={4} >
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Agency GSTIN</label>
<input type='text' placeholder=' Enter Your Agency GSTIN' className='input_size' />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Provisinal GST Number</label>
<input type='text' placeholder=' Enter Your Provisinal GST Number' className='input_size' />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Mobile Number</label>
<input type='number' placeholder=' Enter Your Mobile Number' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">GST Registration Status</label>
<input type='text' placeholder=' Enter GST Registration Status' className='input_size' />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Address Line 1*</label>
<input type='text' placeholder=' Enter Address Line 1' className='input_size' required />
</div>
</Box>
<Box py={2}>
<div className="form_input">
<label for="from" className="form_lable">Agency City*</label>
<input type='text' placeholder=' Enter Your City' className='input_size' required />
</div>
</Box>

</Grid>
</Grid>


</div>

</Box>
</div>
</React.Fragment>
);

default:
return "unknown step";
}
}

const LinaerStepper = () => {



const classes = useStyles();
const [activeStep, setActiveStep] = useState(0);
const [skippedSteps, setSkippedSteps] = useState([]);
const steps = getSteps();

const isStepOptional = (step) => {
return step === 1 || step === 2;
};

const isStepSkipped = (step) => {
return skippedSteps.includes(step);
};

const handleNext = () => {
setActiveStep(activeStep + 1);
setSkippedSteps(skippedSteps.filter((skipItem) => skipItem !== activeStep));
};

const handleBack = () => {
setActiveStep(activeStep - 1);
};

const handleSkip = () => {
if (!isStepSkipped(activeStep)) {
setSkippedSteps([...skippedSteps, activeStep]);
}
setActiveStep(activeStep + 1);
};




return (
<div>
<Stepper alternativeLabel activeStep={activeStep} style={{ borderRadius: '12px', marginBottom: "20px", display: 'flex', justifyContent: 'center', background: 'white' }}>
{steps.map((step, index) => {
const labelProps = {};
const stepProps = {};

if (isStepSkipped(index)) {
stepProps.completed = false;
}
return (
<Step {...stepProps} key={index}>
<StepLabel {...labelProps}>{step}</StepLabel>
</Step>
);
})}
</Stepper>

{activeStep === steps.length ? (
<Typography variant="h3" align="center">
Thank You
</Typography>
) : (
<>
<form>{getStepContent(activeStep)}</form>
<Button
className={classes.button}
disabled={activeStep === 0}
onClick={handleBack}
>
back
</Button>
{/* {isStepOptional(activeStep) && (
<Button
className={classes.button}
variant="contained"
color="primary"
onClick={handleSkip}
>
skip
</Button>
)} */}
<Button
className={classes.button}
variant="contained"
color="primary"
onClick={handleNext}
>
{activeStep === steps.length - 1 ? "Finish" : "Next"}
</Button>
</>
)}
</div>
);
};

export default LinaerStepper;