forked from mrwyndham/fastpocket
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
"use client";
|
|
// TODO: Needs a complete rework to use the DaisyUI component
|
|
|
|
import React, { useRef, useState } from "react";
|
|
import xButton from "@/images/icon-x.svg";
|
|
import useTextsBasedOnActivityState from "./useTextsBasedOnActivityState";
|
|
import ModalSignUpForm from "./ModalSignUpForm";
|
|
import SuccessModal from "@/sections/SuccessModal";
|
|
import LoadingModal from "@/sections/LoadingModal";
|
|
import Image from "next/image";
|
|
import { ModalStatus } from "@/types";
|
|
import { FormRefMethods } from "../ModalSignIn/ModalSignInForm";
|
|
import Icon from "@/components/icon";
|
|
|
|
function ModalSignUp() {
|
|
const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
|
|
const { textOnUse, companySizeList, whenModalOpens, getPriceId } =
|
|
useTextsBasedOnActivityState(setStatus);
|
|
const formRef = useRef<FormRefMethods>(null);
|
|
const handleCloseModal = () => {
|
|
if (formRef.current) {
|
|
formRef.current.resetForm();
|
|
}
|
|
setStatus(ModalStatus.Default);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<input
|
|
type="checkbox"
|
|
id="sign-up-modal"
|
|
className="modal-toggle"
|
|
name=""
|
|
onChange={whenModalOpens}
|
|
/>
|
|
<label htmlFor="sign-up-modal" className="modal cursor-pointer">
|
|
<label className="modal-box relative bg-gray-100 dark:bg-gray-850 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
|
|
<div className="flex justify-end pb-2 select-none">
|
|
<label
|
|
onClick={handleCloseModal}
|
|
htmlFor="sign-up-modal"
|
|
className="cursor-pointer"
|
|
>
|
|
<Icon name="Dismiss20Filled" size="medium" />
|
|
</label>
|
|
</div>
|
|
<div className={status === ModalStatus.Default ? "block" : "hidden"}>
|
|
<div
|
|
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
|
|
data-aos="fade-up"
|
|
>
|
|
<h3 className="h3 text-white pt-4 pb-2 text-lg md:text-3xl pt-6">
|
|
{textOnUse.title}
|
|
</h3>
|
|
<p className="text-xs text-white md:text-base">
|
|
{textOnUse.subTitle}
|
|
</p>
|
|
</div>
|
|
|
|
<ModalSignUpForm
|
|
generateCheckoutSession={false}
|
|
companySizeList={companySizeList}
|
|
textOnUse={textOnUse}
|
|
setStatus={setStatus}
|
|
getPriceId={getPriceId}
|
|
ref={formRef}
|
|
/>
|
|
</div>
|
|
{status === ModalStatus.Success && <SuccessModal />}
|
|
{status === ModalStatus.Loading && <LoadingModal />}
|
|
</label>
|
|
</label>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ModalSignUp;
|