153 lines
7.4 KiB
JavaScript
153 lines
7.4 KiB
JavaScript
import React from 'react';
|
|
import { useState } from "react";
|
|
import { useFormik, Form } from "formik";
|
|
import { Formik } from "formik";
|
|
|
|
import * as Yup from 'yup'
|
|
import {
|
|
MDBInputGroup,
|
|
MDBInputGroupText,
|
|
MDBInputGroupElement, MDBContainer, MDBRow, MDBIcon, MDBInput, MDBBtn, MDBSpinner, MDBTypography
|
|
} from 'mdb-react-ui-kit'
|
|
import axios from "axios";
|
|
import { AppUrl } from "../../lib/api";
|
|
import { AiOutlinePhone, AiOutlineUser } from "react-icons/ai";
|
|
|
|
const Connect = () => {
|
|
const [Loading, setLoading] = useState(false);
|
|
const [Success, setSuccess] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Formik
|
|
initialValues={{ name: "", PhoneNumber: "", text: "" }}
|
|
onSubmit={async (values, { resetForm }) => {
|
|
setLoading(true);
|
|
const dataForm = values;
|
|
const SubmitForm = axios.post(AppUrl('contact-us'), dataForm).then((res) => {
|
|
if (res.status === 200) {
|
|
setLoading(false);
|
|
setSuccess(true);
|
|
|
|
}
|
|
})
|
|
|
|
|
|
resetForm({})
|
|
}}
|
|
validateOnChange={false}
|
|
validateOnBlur={false}
|
|
validationSchema={Yup.object().shape({
|
|
name: Yup.string().required("وارد کردن نام الزامی است."),
|
|
PhoneNumber: Yup.string().required('شماره تلفن الزامی است .'),
|
|
text: Yup.string().required('متن پیام وارد نشده است. '),
|
|
})}
|
|
>
|
|
{props => {
|
|
props.submitCount > 0 && (props.validateOnChange = true);
|
|
const {
|
|
values,
|
|
touched,
|
|
errors,
|
|
handleChange,
|
|
handleBlur,
|
|
handleSubmit,
|
|
handleReset
|
|
} = props;
|
|
return (
|
|
<form id={'contactUsform'} style={{ marginTop: '25px' }} onSubmit={handleSubmit}>
|
|
<div className='lg:mx-20 sm:mx-5'>
|
|
<h5 className={'right-align font-weight-bold'}> تماس با ما </h5>
|
|
<br />
|
|
<MDBRow>
|
|
<MDBInputGroup className='mb-3' style={{ width: '50%' }}>
|
|
<MDBInputGroupElement
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
value={values.PhoneNumber}
|
|
name="PhoneNumber"
|
|
dir={'rtl'}
|
|
id="PhoneNumber"
|
|
placeholder='شماره تماس '
|
|
type='text' />
|
|
|
|
<MDBInputGroupText>
|
|
<AiOutlinePhone />
|
|
</MDBInputGroupText>
|
|
|
|
</MDBInputGroup>
|
|
|
|
<MDBInputGroup className='mb-3' style={{ width: '50%' }}>
|
|
<MDBInputGroupElement
|
|
value={values.name}
|
|
onChange={handleChange}
|
|
name="name"
|
|
dir={'rtl'}
|
|
id="name"
|
|
placeholder=' نام خود را وارد کنید '
|
|
type='text' />
|
|
<MDBInputGroupText>
|
|
<AiOutlineUser />
|
|
</MDBInputGroupText>
|
|
</MDBInputGroup>
|
|
<MDBInputGroup className='mb-3' style={{ width: '100%' }}>
|
|
<MDBInputGroupElement
|
|
name={'text'}
|
|
id={'text'}
|
|
value={values.text}
|
|
onChange={handleChange}
|
|
dir={'rtl'}
|
|
className={'right-align RTL'}
|
|
style={{ height: '100%' }}
|
|
placeholder='متن پیام خود را وارد کنید'
|
|
textarea
|
|
type='text' />
|
|
</MDBInputGroup>
|
|
</MDBRow>
|
|
<MDBBtn type={'submit'}>
|
|
{Loading ? (
|
|
<>
|
|
<MDBSpinner grow size='sm' role='status' tag='span' />
|
|
<span className='visually-hidden'>Loading...</span>
|
|
</>
|
|
) :
|
|
<>
|
|
ارسال
|
|
</>
|
|
}
|
|
</MDBBtn>
|
|
{touched.PhoneNumber && errors.PhoneNumber ? (
|
|
<div className={'d-flex justify-content-end text-danger '}>
|
|
{errors.PhoneNumber}
|
|
</div>
|
|
) : null}
|
|
{touched.name && errors.name ? (
|
|
<div className={'d-flex justify-content-end text-danger '}>
|
|
{errors.name}
|
|
</div>
|
|
) : null}
|
|
{touched.text && errors.text ? (
|
|
<div className={'d-flex justify-content-end text-danger '}>
|
|
{errors.text}
|
|
</div>
|
|
) : null}
|
|
<br />
|
|
{Success ? (
|
|
<MDBTypography style={{ direction: 'rtl', borderRadius: '6px solid', borderRight: '6px solid #00B74A', borderLeft: 'none' }} note noteColor='success'>
|
|
اطلاعات شما ارسال شد ، بعد از بررسی با شما تماس گرفته می شود .
|
|
</MDBTypography>
|
|
) : null}
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
);
|
|
}}
|
|
</Formik>
|
|
</>
|
|
)
|
|
};
|
|
|
|
export default Connect; |