src/pages/type-registration/team.jsx

import { useState } from "react";
import Input from "../../components/form-input";
import Select from "../../components/form-input/SelectInput";
import useForm from "../../hooks/useForm";
import {
  CardBox,
  FestButtonBox,
  RegistrationContainer,
} from "../fest-registration/index.styles";
import {
  FormContainer,
  MarginedBox,
  ResponsiveMagicBtn,
  ResponsiveMagicBtnWhite,
  StyledBgBox,
  StyledForm,
} from "./index.styles";
import StepperForm from "../../components/stepper-form";
import {
  MagicButton,
  MagicButtonWhite,
  PageTitleContainer,
  SectionSubtitle,
  SectionTitle,
  Text,
} from "../../components/styles/Elements.style";
import { Box, Stack } from "@mui/material";
import TitledStyledBox from "../../components/ui/TitledStyledBox";
import { teamRegistration } from "../../api/festRegistration";
import { enqueueSnackbar } from "notistack";
import NdmcBreadcrumbs from "../../components/breadcrumbs";
import { Section } from "../../components/styles/Page.style";

// initial fields
const init = {
  title: "",

  leaderphone: "",
  leaderId: "",

  member1id: "",
  member1phone: "",

  member2id: "",
  member2phone: "",

  trxl: "",
  method: "",
  sender: "",
};

const validate = (values) => {
  const errors = {};
  if (!values.title) {
    errors.title = "Team title is required";
  }
  if (!values.leaderId) {
    errors.leaderId = "Member 21 Id is required";
  }
  if (!values.leaderphone) {
    errors.leaderphone = "Leader phone is required";
  } else {
    if (isNaN(values.leaderphone)) {
      errors.leaderphone = "Invalid phone number";
    }
  }
  if (!values.member1id) {
    errors.member1id = " Member 1 Id is required";
  }
  if (!values.member1phone) {
    errors.member1phone = "Member 1 phone is required";
  } else {
    if (isNaN(values.member1phone)) {
      errors.member1phone = "Invalid phone number";
    }
  }
  if (!values.member2id) {
    errors.member2id = "Member 2 Id is required";
  }
  if (!values.member2phone) {
    errors.member2phone = "Member 2 phone is required";
  } else {
    if (isNaN(values.member2phone)) {
      errors.member2phone = "Invalid phone number";
    }
  }

  return errors;
};

const TeamRegistration = () => {
  const {
    state,
    changeState,
    handleBlur,
    handleChange,
    handleFoucse,
    handleSubmit,
  } = useForm(init, validate);

  const [currentStep, setStep] = useState(0);
  const [thStatus, setthStatus] = useState("open");

  const submitForm = async ({ values, hasError }) => {
    if (!hasError) {
      const teamData = {
        title: values.title,
        category: values.category,
        leader: {
          leaderid: values.leaderId,
          leaderphone: values.leaderphone,
        },
        member1: {
          member1id: values.member1id,
          member1phone: values.member1phone,
        },
        member2: {
          member2id: values.member2id,
          member2phone: values.member2phone,
        },
      };

      const teamRegister = await teamRegistration({ ...teamData });
      if (teamRegister.data.status === 1) {
        enqueueSnackbar("Registration successfull", { variant: "success" });
      } else {
        if (teamRegister.data.errors) {
          teamRegister.data.errors.forEach((error) => {
            enqueueSnackbar(error.message, { variant: "error" });
          });
        }
      }
    }
  };

  return (



  <Section style={{ display: "block" }}>


  <PageTitleContainer>
    <SectionSubtitle>4th NDC National Math Festival</SectionSubtitle>
    <SectionTitle>Treasure Hunt</SectionTitle>
    <NdmcBreadcrumbs
      pagePath={[
        {
          name: "4th NMF",
          link: "/nmf",
        },
        {
          name: `Treasure Hunt`,
          active: true,
        },
      ]}
    />
  </PageTitleContainer>
 

{thStatus && (
  <RegistrationContainer>
     {(currentStep === 0 || currentStep === 1) && (
    <StepperForm
      steps={["Payment Information", "Team Information"]}
      currentStep={currentStep}
    />
  )}
    <FormContainer>
      {currentStep === 0 && (
        <StyledForm onSubmit={(e) => handleSubmit(e, submitForm)}>
          {/* Payment method */}
          <CardBox style={{ marginBottom: "30px" }}>
          <Text design={{ size: "lsm", weight: "xBold" }} sx={{ mb: 1 }}>
     Rules & Regulations:
            </Text>
            <Text design={{ size: "s", weight: "normal" }} sx={{ mb: 1 }}>
            1. Each team must consist of 3 members, who can be from different institutions. <br/>
2. This is a limited slot event having at most 50 teams. <br/>
3. Game rules are a surprise and will be revealed before the event. <br/>
4. The fastest 3 teams to hunt the treasure will be rewarded with prize money.  <br/>
            </Text>
            <br/>


            {thStatus=== "open" ? (

<Stack>
<Text design={{ size: "lsm", weight: "xBold" }} sx={{ mb: 1 }}>
    Payment Information:
            </Text>

            <Text design={{ size: "xs" }} sx={{ mb: 0.5 }}>
              1.{" "}
              <span style={{ fontWeight: "bold" }}>Payment Method: </span>
              bKash / Rocket / Nagad / Upay
            </Text>

            <Text design={{ size: "xs" }} sx={{ mb: 0.5 }}>
              2. <span style={{ fontWeight: "bold" }}>Type: </span> Send
              Money
            </Text>
            <Text design={{ size: "xs" }} sx={{ mb: 0.5 }}>
              3. <span style={{ fontWeight: "bold" }}>Amount: </span> 300
              BDT
            </Text>

            <Text design={{ size: "xs" }} sx={{ mb: 0.5 }}>
              4.{" "}
              <span style={{ fontWeight: "bold" }}>
                Number: 01319232292{" "}
              </span>{" "}
              ( bKash / Rocket / Nagad / Upay)
            </Text>
</Stack>
            ) : (<FestButtonBox
                style={{
                  justifyContent: "center",
                }}
              >
                <MagicButtonWhite
                style={{cursor:"default"}}
                  variant={"contained"}
                >
                   Registration has been closed
                  
                </MagicButtonWhite>
              </FestButtonBox>  )}

          

        
          </CardBox>

          {thStatus=== "open" && (
         <Stack> 
         <Select
            value={state.method.value}
            name="method"
            id="method"
            label={"Payment Method"}
            touched={state.method.touched}
            iconClass={"ri-send-plane-line"}
            placeholder="Method"
            errorMsg={state.method.error}
            handleChange={handleChange}
            handleBlur={handleBlur}
            handleFoucse={handleFoucse}
            options={[
              { key: "Bkash", value: "bkash" },
              { key: "Nagad", value: "nagad" },
              { key: "Rocket", value: "rocket" },
              { key: "Upay", value: "upay" },
            ]}
          /> 

          {/* Pass all the props in the input method */}
          <Input
            type="number"
            value={state.sender.value}
            name="sender"
            id="sender"
            label={"Sender Number"}
            touched={state.sender.touched}
            iconClass={"ri-phone-line"}
            placeholder="Phone"
            errorMsg={state.sender.error}
            onChange={handleChange}
            onBlur={handleBlur}
            onFocus={handleFoucse}
          />

          <Input
            type="text"
            value={state.trxl.value}
            name="trxl"
            id="trxl"
            label={"Transaction ID"}
            touched={state.trxl.touched}
            iconClass={"ri-guide-line"}
            placeholder="Transaction Id"
            errorMsg={state.trxl.error}
            onChange={handleChange}
            onBlur={handleBlur}
            onFocus={handleFoucse}
          />

          <MarginedBox>
          
            <ResponsiveMagicBtn
              variant={"contained"}
              onClick={() => {
                setStep(1);
                stateUpdater({ ...state });
              }}
            >
              Continue
            </ResponsiveMagicBtn>
          </MarginedBox>
         </Stack> )}
        
        </StyledForm>
      )}
      {currentStep === 1 && (
        <StyledForm onSubmit={(e) => handleSubmit(e, submitForm)}>
          {/* title field */}
          <Input
            type="text"
            value={state.title.value}
            name="title"
            id="title"
            label={"Team Name"}
            touched={state.title.touched}
            iconClass={"ri-bar-chart-horizontal-line"}
            placeholder="Title"
            errorMsg={state.title.error}
            onChange={handleChange}
            onBlur={handleBlur}
            onFocus={handleFoucse}
          />

       
          <TitledStyledBox title={"Member 1 Information"}>
            <Input
              type="text"
              value={state.leaderId.value}
              name="leaderId"
              id="leaderId"
              label={"Leader Id"}
              touched={state.leaderId.touched}
              iconClass={"ri-bar-chart-horizontal-line"}
              placeholder="Leader Id"
              errorMsg={state.leaderId.error}
              onChange={handleChange}
              onBlur={handleBlur}
              onFocus={handleFoucse}
            />
            <Input
              type="text"
              value={state.leaderphone.value}
              name="leaderphone"
              id="leaderphone"
              label={"Leader Phone"}
              touched={state.leaderphone.touched}
              iconClass={"ri-bar-chart-horizontal-line"}
              placeholder="Leader Phone"
              errorMsg={state.leaderphone.error}
              onChange={handleChange}
              onBlur={handleBlur}
              onFocus={handleFoucse}
            />
          </TitledStyledBox>
          <TitledStyledBox title={"Member 2 Information"}>
            <Input
              type="text"
              value={state.member1id.value}
              name="member1id"
              id="member1id"
              label={"Member 1 Id"}
              touched={state.member1id.touched}
              iconClass={"ri-bar-chart-horizontal-line"}
              placeholder="Member 1 Id"
              errorMsg={state.member1id.error}
              onChange={handleChange}
              onBlur={handleBlur}
              onFocus={handleFoucse}
            />
            <Input
              type="text"
              value={state.member1phone.value}
              name="member1phone"
              id="member1phone"
              label={"Member 1 Phone"}
              touched={state.member1phone.touched}
              iconClass={"ri-bar-chart-horizontal-line"}
              placeholder="Member 1 Phone"
              errorMsg={state.member1phone.error}
              onChange={handleChange}
              onBlur={handleBlur}
              onFocus={handleFoucse}
            />
          </TitledStyledBox>

          <TitledStyledBox title={"Member 3 Information"}>
            <Input
              type="text"
              value={state.member2id.value}
              name="member2id"
              id="member2id"
              label={"Member 2 Id"}
              touched={state.member2id.touched}
              iconClass={"ri-bar-chart-horizontal-line"}
              placeholder="Member 2 Id"
              errorMsg={state.member2id.error}
              onChange={handleChange}
              onBlur={handleBlur}
              onFocus={handleFoucse}
            />
            <Input
              type="text"
              value={state.member2phone.value}
              name="member2phone"
              id="member2phone"
              label={"Member 2 Phone"}
              touched={state.member2phone.touched}
              iconClass={"ri-bar-chart-horizontal-line"}
              placeholder="Member 2 Phone"
              errorMsg={state.member2phone.error}
              onChange={handleChange}
              onBlur={handleBlur}
              onFocus={handleFoucse}
            />
          </TitledStyledBox>

          <MarginedBox>
            <ResponsiveMagicBtnWhite
              variant={"contained"}
              onClick={() => {
                setStep(0);
                stateUpdater({ ...state });
              }}
            >
              Back
            </ResponsiveMagicBtnWhite>
            <ResponsiveMagicBtn
              variant={"contained"}
              onClick={() => {
                setStep(1);
                stateUpdater({ ...state });
              }}
            >
              Continue
            </ResponsiveMagicBtn>
          </MarginedBox>
        </StyledForm>
      )}
    </FormContainer>
  </RegistrationContainer>
)}
</Section>

  


  );
};

export default TeamRegistration;