fix-popup design and nairobi and hanoi form connection

This commit is contained in:
2023-02-16 12:37:59 +00:00
parent 3df0fcbc49
commit 98a407aa27
7 changed files with 1166 additions and 32 deletions

View File

@@ -131,6 +131,53 @@
<!-- / .container -->
</section>
<!-- SHAPE -->
<!---------------------------------------------- payment form ------------------------------->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content" style="background-color:#D9D9D9">
<h1 style="color:#F68F51;text-align:center;font-weight:bold" class="pt-6">Book Seat</h1>
<div class="modal-header p-0 pr-7" style="border-bottom:none;margin-top:-50px">
<button type="button" class="close" style='color:black' data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body pb-0">
<div class="alert alert-danger" id="paymentWarning" style="display: none;">Fill all the fields!</div>
<div class="alert alert-success" id="paymentSuccess" style="display: none;">Thank You! We will contact you soon!</div>
<form class="" role="form" method="post">
<div class="row">
<div class="col-12 col-lg-12">
<div class="form-group mb-5">
<input type="text" aria-required="true" name="widget-contact-form-name" required class="form-control required name shadow-lg" style="border-radius:26px;min-height:0px;padding:6px;padding-left:16px" id="user" placeholder="Your Name">
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-4"><div style="margin-left:-40px" class="pt-7 d-none d-sm-block"><img src='/assets/img/book-a-seat.png'/></div></div>
<div class="col-12 col-sm-8">
<div class="form-group mb-5">
<!-- Input -->
<input type="email" id="paymentEmail" aria-required="true" name="widget-contact-form-email" required class="form-control required email shadow-lg" style="border-radius:26px;min-height:0px;padding:6px;padding-left:16px" placeholder="Your Email">
<p id="paymentEmailError" style="color: red; display: none;">Enter a valid email address</p>
</div>
<div class="form-group mb-5">
<input class="form-control shadow-lg" style="border-radius:26px;min-height:0px;padding:6px;padding-left:16px" id="contact" type="number" name="telephone" placeholder="Your Contact" required>
<p id="contactError" style="color: red; display: none;">Enter a valid phone number</p>
</div>
<div class="form-group mb-5">
<input type="text" id="city" aria-required="true" name="widget-contact-form-city" required class="form-control required name shadow-lg" style="border-radius:26px;min-height:0px;padding:6px;padding-left:16px" placeholder="Your City">
</div>
<div class="form-group mb-0 text-center">
<button style="background-color: #f7a325;margin:10px 0px;border-radius:26px;" class="btn btn-sm lift shadow-lg px-8" type="button" onclick="paymentSubmitForm()">&nbsp;Book a Seat</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!---------------------------------------------------course summary --------------------------------------->
<section data-jarallax data-speed=".8" class="pb-4">
<div class="container">
@@ -226,7 +273,7 @@
<clip/>
</p>
<div style="display:flex">
<button style="background-color: #f7a325" class="btn btn-xs mr-3" type="button">Book a Seat</button>
<button style="background-color: #f7a325" class="btn btn-xs mr-3" type="button" data-toggle="modal" data-target="#exampleModalCenter">Book a Seat</button>
<!-- <a href="#">
<div style="border:2px solid #f7a325;color:black;border-radius:6px;padding:4px 4px">Add to Cart</div>
</a> -->
@@ -529,5 +576,150 @@
})();
</script>
<!--End of Tawk.to Script-->
<script type="text/javascript">
var user = null;
var contact = null;
var paymentEmail = null;
var city = null;
var paymentWarning = document.getElementById('paymentWarning');
var paymentSuccess = document.getElementById('paymentSuccess');
var paymentEmailError = document.getElementById('paymentEmailError');
var req = document.getElementById("req");
function paymentSubmitForm() {
user = document.getElementById("user").value;
contact = document.getElementById("contact").value;
paymentEmail = document.getElementById("paymentEmail").value;
city = document.getElementById('city').value;
paymentSuccess.style.display = "none";
console.log('all details',user,contact,paymentEmail,city)
if (user == '' || contact == '' || paymentEmail == '' || city =='') {
paymentWarning.style.display = "block";
} else {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
// var mobile = /^\d{10}$/;
if (reg.test(paymentEmail) == false) {
paymentEmailError.style.display = "block";
}else
// if (mobile.test(contact) == false) {
// contactError.style.display = "block";
// } else
{
paymentEmailError.style.display = "none";
paymentWarning.style.display = "none";
let formData = new FormData();
formData.append('formName', 'IIMTT-Hanoi-Graduate-Diploma-Form');
formData.append('business_type', 'iimtt');
formData.append('Name', user);
formData.append('Email', paymentEmail);
formData.append('Phone', contact);
formData.append('Details', city)
fetch('https://api.teenybeans.in/API/contactFormProcessor/v1/', {
method: 'POST',
body: formData
})
fetch('https://app.buzzapp.tech/api/payments/createPaymentUrl', {
method: 'POST',
headers: {
accept: 'application.json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
"amount": "140",
"productinfo": "Graduate Diploma in Montessori Teacher Training",
"firstname": user,
"email": paymentEmail,
"phone": contact,
"additionalInfo": {
"orderId": "147ubiebpe"
},
"callbackUrl": "https://buzzapp.local/api/one/v1/commerce-payment/updateOrderPaymentCallback",
"currency": "USD"
})
})
.then(res => res.json())
.then(json => {
window.open(json.url)
// console.log(json);
sendPaymentMail("teenybeans.info@gmail.com");
sendPaymentMail("enquiry@beanstalkedu.com");
sendPaymentMail("nairobi@iimtt.org");
sendPaymentWelcomeMail(paymentEmail);
paymentSuccess.style.display = "block";
document.getElementById("user").value = "";
document.getElementById("contact").value = "";
document.getElementById("paymentEmail").value = "";
document.getElementById("city").value = "";
}
);
}
}
// if(name)
}
function sendPaymentMail(sendEmail) {
let formData = new FormData();
formData.append("sendMail", "true");
formData.append("reciever", sendEmail);
formData.append("sender", "IIMTT");
formData.append("senderMail", "enquiry@iimtt.org");
formData.append("subject", "New Contact Form Fillup");
formData.append(
"message",
"<html><body><p>New IIMTT Hanoi Graduate Diploma Contact form is filled up.</p><br><p>User Details:-</p><table><tr><th>Name:- </th><td>:- " +
user +
"</td></tr><tr><th>Email:- </th><td>:- " +
paymentEmail +
"</td></tr><tr><th>Phone:- </th><td>:- " +
contact +
"</td></tr><tr><th>City:- </th><td>:- " +
city +
"</td></tr></table></body></html>"
);
fetch("https://mailapi.teenybeans.in/009/", {
method: "POST",
body: formData
})
.then(function (response) {
response.json().then(function (data) {
// console.log(data);
});
})
.catch(function (err) {
console.log("Fetch Error :-S", err);
});
}
function sendPaymentWelcomeMail(sendEmail) {
let formData = new FormData();
formData.append("sendMail", "true");
formData.append("reciever", sendEmail);
formData.append("sender", "IIMTT");
formData.append("senderMail", "enquiry@iimtt.org");
formData.append("subject", "Thank you for choosing IIMTT Hanoi");
formData.append(
"message",'<html><body style="background-color:#f5f8f5;padding:16px;"><div style="text-align:center"><a href="#"><img style="width:150px;" src="https://iimtt.org/assets/img/iimtt-footer-logo.png"></a></div>'+
'<div><b style="font-size:20px">Hi '+user+'</b><p>Thank you for your interest in taking the Graduate Diploma in Montessori Teacher Training from IIMTT Hanoi.</p>'+
"<p>Whether you've just graduated from school or are seeking a truly inspirational career change, IIMTT offers a range of training opportunities, including internationally recognized UK qualifications to start your journey in Montessori education. </p>"+
'<p>Our representative will get in touch with you soon!</p><p>In the meantime, you can learn more about the course fees and duration.</p></div><div style="text-align:center"><a style="background-color:#f7a325;color:black;padding:4px 6px;text-decoration:none" class="btn btn-secondary btn-form display-4" href="https://drive.google.com/file/d/11JW1i7annvdjF6rG5vwSFBjIBaMDfAqZ/view?usp=sharing">Download Complete Fees Structure</a></div><p>Thanks<br>Team IIMTT</p>'+
'<div style="text-align:center"><p><b>Follow us</b><br><a href="https://www.facebook.com/IIMTT/" target="_blank"><img style="width:26px;margin-right:10px" src="https://iimtt.org/assets/img/fb.png" alt="Logo"></a><a href="https://www.instagram.com/iimtt.corporate/" target="_blank"><img style="width:26px;margin-right:10px" src="https://iimtt.org/assets/img/insta.png" alt="Logo"></a><a href="https://twitter.com/iimtt_corporate" target="_blank"><img style="width:26px;margin-right:10px" src="https://iimtt.org/assets/img/tw.png" alt="Logo"></a>'+
'<a href="https://www.linkedin.com/showcase/international-institute-of-montessori-teacher-training/" target="_blank"><img style="width:30px;" src="https://iimtt.org/assets/img/linkedin.png" alt="Logo"></a><br><hr><b>International Institute of Montessori Teacher Training</b><br>Eldama Ravine Cl, Nairobi, Kenya<br>© 2021 IIMTT All rights reserved.</p></div></body></html>'
);
fetch("https://mailapi.teenybeans.in/009/", {
method: "POST",
body: formData
})
.then(function (response) {
response.json().then(function (data) {
console.log(data);
});
})
.catch(function (err) {
console.log("Fetch Error :-S", err);
});
}
</script>
<!-- ------------------------------ -->
</body>
</html>