153 lines
7.2 KiB
JavaScript
153 lines
7.2 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}>
|
|
<MDBContainer>
|
|
<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}
|
|
</MDBContainer>
|
|
|
|
|
|
|
|
|
|
</form>
|
|
);
|
|
}}
|
|
</Formik>
|
|
</>
|
|
)
|
|
};
|
|
|
|
export default Connect; |