marco.pms.web/src/components/Tenanat/TenantForm.jsx

import React, { useState } from "react";
import ContactInfro from "./ContactInfro";
import SubScription from "./SubScription";
import OrganizationInfo from "./OrganizationInfo";
import { useForm, FormProvider } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  getStepFields,
  newTenantSchema,
  subscriptionDefaultValues,
  subscriptionSchema,
  tenantDefaultValues,
} from "./TenantSchema";
import Congratulation from "./congratulation";

const TenantForm = () => {
  const [activeTab, setActiveTab] = useState(0);
  const [completedTabs, setCompletedTabs] = useState([]);



  const tenantForm = useForm({
    resolver: zodResolver(newTenantSchema),
    defaultValues: tenantDefaultValues,
  });

  const subscriptionForm = useForm({
    resolver: zodResolver(subscriptionSchema),
    defaultValues: subscriptionDefaultValues,
  });

  const getCurrentTrigger = () =>
    activeTab === 2 ? subscriptionForm.trigger : tenantForm.trigger;

  const handleNext = async () => {
    const currentStepFields = getStepFields(activeTab);
    const trigger = getCurrentTrigger();

    const valid = await trigger(currentStepFields);

    if (valid) {
      setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
      setActiveTab((prev) => Math.min(prev + 1, newTenantConfig.length - 1));
    }
  };
 const handlePrev = () => {
  setActiveTab((prev) => Math.max(prev - 1, 0));
};


  const onSubmitTenant = (data) => {
    console.log(data);
  };
  const onSubmitSubScription = (data) => {
    console.log(data);
  };

  const newTenantConfig = [
    {
      name: "Contact Info",
      icon: "bx bx-user bx-md",
      subtitle: "Provide Contact Details",
      component: <ContactInfro onNext={handleNext} />,
    },
    {
      name: "Organization",
      icon: "bx bx-buildings bx-md",
      subtitle: "Organization Details",
      component: <OrganizationInfo onNext={handleNext} onPrev={handlePrev} onSubmitTenant={onSubmitTenant}  />,
    },
    {
      name: "SubScription",
      icon: "bx bx-star bx-md",
      subtitle: "Select a plan",
      component: <SubScription onSubmitSubScription={onSubmitSubScription} onNext={handleNext}/>,
    },
      {
      name: "congratulation",
      icon: "bx bx-star bx-md",
      subtitle: "Select a plan",
      component: <Congratulation />,
    },
  ];

  const isSubscriptionTab = activeTab === 2;
  return (
    <div id="wizard-property-listing" className="bs-stepper horizontically mt-2">
      <div className="bs-stepper-header border-end text-start ">
        {newTenantConfig.filter((step) => step.name.toLowerCase() !== "congratulation").map((step, index) => {
          const isActive = activeTab === index;
          const isCompleted = completedTabs.includes(index);

          return (
            <React.Fragment key={step.name}>
              <div
                className={`step ${isActive ? "active" : ""} ${
                  isCompleted ? "crossed" : ""
                }`}
                data-target={`#step-${index}`}
              >
                <button
                  type="button"
                  className={`step-trigger ${isActive ? "active" : ""}`}
                    onClick={() => setActiveTab(index)}
                >
                  <span className="bs-stepper-circle">
                    {isCompleted ? (
                      <i className="bx bx-check"></i>
                    ) : (
                      <i className={step.icon}></i>
                    )}
                  </span>
                  <span className="bs-stepper-label">
                    <span className="bs-stepper-title">{step.name}</span>
                    <span className="bs-stepper-subtitle">{step.subtitle}</span>
                  </span>
                </button>
              </div>
              {index < newTenantConfig.length - 1 && (
                <div className="line text-primary"></div>
              )}
            </React.Fragment>
          );
        })}
      </div>

      <div className="bs-stepper-content py-2">
        {isSubscriptionTab ? (
          <FormProvider {...subscriptionForm}>
            <form onSubmit={subscriptionForm.handleSubmit(onSubmitTenant)}>
              {newTenantConfig[activeTab].component}
            </form>
          </FormProvider>
        ) : (
          <FormProvider {...tenantForm}>
            <form onSubmit={tenantForm.handleSubmit(onSubmitSubScription)}>
              {newTenantConfig[activeTab].component}
            </form>
          </FormProvider>
        )}
      </div>
    </div>
  );
};

export default TenantForm;