<?php
header('Content-Type: application/json');
$postData = file_get_contents('php://input');
$data = json_decode($postData, true);
$line = array($data['name'], $data['phone'], $data['mail'], $data['info'], $data['param'], $data['formTitle']);
$handle = fopen("test.csv", "a");
fputcsv($handle, $line);
fclose($handle);
$forMail = $data['name'].'<br>'.$data['phone'].'<br>'.$data['mail'].'<hr>'.$data['param'].'<br>'.$data['formTitle'].'<br>'.$data['info'];
/////////////////////
//$account = 'kalendar.concept@gmail.com';
//$pass = '***';
$account = 'concept.alert@gmail.com';
$pass = '***';
$smtpUsername = $account;
$smtpPassword = $pass;
$emailFrom = $account;
$emailFromName = 'Notification!';
$emailTo = $account;
$emailToName = 'Namename';
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
use PHPMailer\PHPMailer\SMTP;
require '../PHPMailer/src/Exception.php';
require '../PHPMailer/src/PHPMailer.php';
require '../PHPMailer/src/SMTP.php';
$mail = new PHPMailer;
$mail->isSMTP();
$mail->SMTPDebug = 2; // 0 = off (for production use) - 1 = client messages - 2 = client and server messages
$mail->Host = "smtp.gmail.com"; // use $mail->Host = gethostbyname('smtp.gmail.com'); // if your network does not support SMTP over IPv6
$mail->Port = 587; // TLS only
$mail->SMTPSecure = 'tls'; // ssl is depracated
$mail->SMTPAuth = true;
$mail->Username = $smtpUsername;
$mail->Password = $smtpPassword;
$mail->setFrom($emailFrom, $emailFromName);
$mail->addReplyTo('replyto@example.com', 'First Last');
$mail->addAddress($emailTo, $emailToName);
$mail->Subject = 'Notification!';
$mail->msgHTML($forMail); //$mail->msgHTML(file_get_contents('contents.html'), __DIR__); //Read an HTML message body from an external file, convert referenced images to embedded,
$mail->AltBody = 'HTML messaging not supported';
// $mail->addAttachment('images/phpmailer_mini.png'); //Attach an image file
$mail->send();
echo json_encode($line);
?>
import React, { Component } from 'react';
import { Link, Switch, Route } from 'react-router-dom';
import InputMask from 'react-input-mask';
class PhoneInput extends Component {
render() {
return <InputMask {...this.props} mask="+7\ (999) 999-99-99" maskChar={null} />;
}
}
class MailInput extends Component {
render() {
return <InputMask {...this.props} mask="*@\ (999) 999-99-99" maskChar={null} />;
}
}
class Order extends Component {
constructor(props){
super(props)
this.state = {
param:null,
formTitle:null,
info:null,
buttonName: 'Записаться'
}
}
componentDidMount () {
const buttonType = this.props.location.state
if (buttonType === undefined) {
this.props.history.push(`/`)
}else{
let bName = 'Записаться'
if (buttonType.buttonName !== undefined){
bName = buttonType.buttonName
}
this.setState({param:buttonType.param, formTitle:buttonType.formTitle, info:buttonType.info, buttonName:bName })
}
}
sendForm = (param, formTitle, info) => (e) => {
const name = document.querySelector('#name')
const mail = document.querySelector('#mail')
const phone = document.querySelector('#phone')
//console.log('ORDER COMPONENT ',name.value, mail.value, phone.value, formTitle, param, info)
const valids = [name, mail, phone]
let validate = true
const err = (inp) => {
//console.log('THIS IS ERROR', inp, inp.value.length)
inp.classList.add('error')
validate = false
setTimeout(() => {
inp.classList.remove('error')
}, 1000)
}
valids.map(inp=>{
if(inp.value === ''){
err(inp)
validate = false
}
if(inp.id === 'phone' && inp.value.length != 18){
err(inp)
validate = false
}
if(inp.id === 'mail'){
let atVar = false
inp.value.split('').map(l =>{
if(l === '@'){
atVar = true
}
})
if(!atVar){
err(inp)
}
}
})
if(validate){
window.scrollTo(0, 0)
const fields = document.querySelector('.fields')
const thx = document.querySelector('.thx')
fields.classList.add('fakeFadeOut')
setTimeout(()=>{
fields.style.display = 'none'
},600)
setTimeout(() => {
thx.style.display = 'block'
setTimeout(() => {
thx.classList.add('fakeFadeIn')
}, 100)
}, 600)
fetch('write_api/api.php', {
method:'POST',
mode: 'no-cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: name.value,
phone: phone.value,
mail: mail.value,
formTitle,
param,
info
})
})
.then(response => response.text())
.then((data) => {
//console.log(data)
})
}else{
//console.log('NOTHING')
}
}
render(){
window.scrollTo(0, 0)
const param = this.state.param
const title = this.state.formTitle
const info = this.state.info
const buttonName = this.state.buttonName
//console.log(param, title, info)
return(
<div className="pageClass">
<div className="inner">
<div className="fields">
<h1>{title}</h1>
<div className="formBlock">
<div className="formHalf">
<h2>Заполните форму</h2>
<div className="formBox">
<div className="inpBox"><input type="text" id="name" className="formInp" autoComplete="off" placeholder="Ваше имя и фамилия"/></div>
<div className="inpBox"><input type="text" id="mail" className="formInp" autoComplete="off" placeholder="Электронная почта"/></div>
<div className="inpBox"><PhoneInput id="phone" className="formInp" placeholder="Номер телефона"/></div>
</div>
<div className="solid_white_btn fullwidthBtn" onClick={this.sendForm(param, title, info)}>{buttonName}</div>
</div>
<div className="or_or"><h2>или</h2></div>
<div className="formHalf">
<h2>запишитесь по телефону</h2>
<div className="formBox callBox">
Позвоните в наш отдел продаж по телефону<br /><span><a href="tel:89858005000">8 (985) 800 5000</a></span>
</div>
</div>
</div>
</div>
<div className="thx">
<h1>Заявка успешно отправлена!</h1>
<div className="thx_icon"></div>
<div className="thx_text">
В ближайшее время с Вами свяжется менеджер для уточнения деталей.
</div>
<Link to="/"><div className="thx_btn solid_white_btn">Вернуться на главную</div></Link>
</div>
</div>
</div>
)
}
}
export default Order