140 lines
7.3 KiB
TypeScript
140 lines
7.3 KiB
TypeScript
'use client'
|
|
import YogaImageComponent from "@/components/yoga.image.component";
|
|
import {YogaContactUs_Plain} from "@/types/generated-strapi-interfaces/api/yoga-contact-us";
|
|
import {RefObject, startTransition, useActionState, useEffect, useRef} from "react";
|
|
import {ContactFormState, sendContactUsMail} from "@/actions/contactus-actions";
|
|
import clsx from "clsx";
|
|
|
|
export interface Props {
|
|
contactUs: YogaContactUs_Plain
|
|
}
|
|
|
|
const ContactUsComponent = ({
|
|
contactUs: {
|
|
header,
|
|
firstName,
|
|
lastName,
|
|
phone,
|
|
title,
|
|
message,
|
|
email,
|
|
buttonText
|
|
}
|
|
}: Props) => {
|
|
const initialState = () => {
|
|
return {
|
|
firstname: {value: ''},
|
|
lastname: {value: ''},
|
|
comment: {value: ''},
|
|
email: {value: ''},
|
|
phone: {value: ''}
|
|
} as ContactFormState;
|
|
}
|
|
const [state, formAction] = useActionState(sendContactUsMail, initialState());
|
|
const ref: RefObject<HTMLFormElement|null> = useRef(null)
|
|
|
|
useEffect(() => {
|
|
if ( state.formState == 'success'){
|
|
ref.current?.reset()
|
|
}
|
|
}, [state]);
|
|
return (
|
|
<section className="get_in_touch_section">
|
|
<div className="container">
|
|
<div className="row" data-aos="fade-up">
|
|
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
|
<div className="get_in_touch_content">
|
|
<h5>{title}</h5>
|
|
<h2>{header}</h2>
|
|
<form
|
|
ref={ref}
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
startTransition(() => formAction(new FormData(e.currentTarget)));
|
|
}}
|
|
>
|
|
<div className="row">
|
|
<div className="col-lg-6 col-md-6 col-sm-6">
|
|
<div className="form-group mb-0">
|
|
<input type="text" name="firstname" id="firstname"
|
|
className={clsx("form-control", {"mb-0": state.firstname.error})}
|
|
placeholder={firstName}
|
|
/>
|
|
</div>
|
|
{state.firstname.error &&
|
|
<div className="text-danger mb-3">{state.firstname.error}</div>}
|
|
</div>
|
|
<div className="col-lg-6 col-md-6 col-sm-6">
|
|
<div className="form-group mb-0">
|
|
<input type="text" name="lastname" id="lname"
|
|
className={clsx("form-control", "form_style", {"mb-0": state.lastname.error})}
|
|
placeholder={lastName}/>
|
|
</div>
|
|
{state.lastname.error &&
|
|
<div className="text-danger mb-3">{state.lastname.error}</div>}
|
|
|
|
</div>
|
|
<div className="col-lg-6 col-md-6 col-sm-6">
|
|
<div className="form-group mb-0">
|
|
<input type="tel" name="phone" id="phonenum"
|
|
className={clsx("form-control", {"mb-0": state.phone.error})}
|
|
|
|
placeholder={phone}/>
|
|
</div>
|
|
{state.phone.error &&
|
|
<div className="text-danger mb-3">{state.phone.error}</div>}
|
|
|
|
</div>
|
|
<div className="col-lg-6 col-md-6 col-sm-6">
|
|
<div className="form-group mb-0">
|
|
<input type="email" name="email" id="emailaddrs"
|
|
className={clsx("form-control", "form_style", {"mb-0": state.email.error})}
|
|
placeholder={email}/>
|
|
</div>
|
|
{state.email.error &&
|
|
<div className="text-danger mb-3">{state.email.error}</div>}
|
|
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-lg-12">
|
|
<div className=" form-group mb-0">
|
|
<textarea rows={3} name="comment" id="msg"
|
|
className={clsx("form-control", {"mb-0": state.comment.error})}
|
|
|
|
placeholder={message}></textarea>
|
|
</div>
|
|
{state.comment.error &&
|
|
<div className="text-danger mb-3">{state.comment.error}</div>}
|
|
|
|
</div>
|
|
</div>
|
|
<div className="btn_wrapper">
|
|
<button type="submit" name="get_started" id="started">{buttonText}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-md-3 col-sm-2 col-xs-12 d-md-block d-none"></div>
|
|
<div className="col-lg-3 col-md-3 col-sm-12 col-xs-12">
|
|
<div className="get_in_touch_video position-relative">
|
|
<a className="popup-vimeo"
|
|
href="https://previews.customer.envatousercontent.com/6720474d-ddc3-4b86-acf1-8d093cb37b6d/watermarked_preview/watermarked_preview.mp4">
|
|
<figure className="video_img mb-0">
|
|
<YogaImageComponent className="thumb img-fluid" style={{"cursor": "pointer"}}
|
|
src="/assets/images/get_in_touch_video_icon.png" alt=""/>
|
|
</figure>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<figure className="get_in_touch_shape left_shape mb-0">
|
|
<YogaImageComponent src="/assets/images/get_in_touch_shape.png" alt="" className="img-fluid"/>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default ContactUsComponent;
|