74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import GlobalModel from "../../components/common/GlobalModel";
|
|
import Stepper from "./Stepper";
|
|
import SupplierInfoStep from "./SupplierInfoStep";
|
|
import BankStep from "./BankStep";
|
|
import AddressStep from "./AddressStep";
|
|
|
|
const AddProductModal = ({ isOpen, onClose }) => {
|
|
const steps = [
|
|
{ key: "supplierInfo", label: "Supplier Info" },
|
|
{ key: "bank", label: "Bank" },
|
|
{ key: "address", label: "Address" },
|
|
];
|
|
|
|
const [activeStepIndex, setActiveStepIndex] = useState(0);
|
|
const activeStepKey = steps[activeStepIndex].key;
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleNext = () => {
|
|
if (activeStepIndex < steps.length - 1) setActiveStepIndex(activeStepIndex + 1);
|
|
else handleSubmit();
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (activeStepIndex > 0) setActiveStepIndex(activeStepIndex - 1);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
console.log("Form submitted");
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<GlobalModel isOpen size="xl" closeModal={onClose}>
|
|
<div className="p-4">
|
|
<h5 className="mb-4">Add New Supplier</h5>
|
|
|
|
<Stepper steps={steps} activeStep={activeStepIndex} />
|
|
|
|
<form onSubmit={(e) => e.preventDefault()}>
|
|
{activeStepKey === "supplierInfo" && <SupplierInfoStep />}
|
|
{activeStepKey === "bank" && <BankStep />}
|
|
{activeStepKey === "address" && <AddressStep />}
|
|
|
|
<div className="d-flex justify-content-between mt-5 border-top pt-3">
|
|
<button
|
|
type="button"
|
|
className="btn btn-label-secondary btn-sm"
|
|
onClick={activeStepIndex > 0 ? handleBack : onClose}
|
|
>
|
|
{activeStepIndex > 0 ? "← Back" : "Cancel"}
|
|
</button>
|
|
|
|
<div>
|
|
{activeStepIndex < steps.length - 1 ? (
|
|
<button type="button" className="btn btn-primary btn-sm" onClick={handleNext}>
|
|
Next →
|
|
</button>
|
|
) : (
|
|
<button type="button" className="btn btn-primary btn-sm" onClick={handleSubmit}>
|
|
Submit
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</GlobalModel>
|
|
);
|
|
};
|
|
|
|
export default AddProductModal;
|