File: /var/www/quadcode.com/builds/-DFbjr9L/0/foach/quadcode.com/src/components/popup/PopupForm.svelte
<script lang="ts">
import InputField from '../../components/form/input/InputField.svelte';
import InputFieldPhone from '../../components/form/input/InputFieldPhone.svelte';
import TextareaField from '../../components/form/input/TextareaField.svelte';
import CheckboxField from '../../components/form/input/CheckboxField.svelte';
import back from '../../assets/icons/back.svg';
import Button from '../../components/button/Button.svelte';
import Recaptcha from '../../components/form/input/Recaptcha.svelte';
import Message from '../../components/form/message/Message.svelte';
import { browser } from '$app/environment';
import type { IForm } from '../../type/form';
import { env } from '$env/dynamic/public';
import Validation from '../../utils/Validation';
import { popupForm } from '../../store';
import createEvent from '../../utils/createEvents';
if (browser) {
const urlParams = new URLSearchParams(window.location.search);
const entries = urlParams.entries();
for (const entry of entries) {
localStorage.setItem('param__' + entry[0], entry[1]);
}
}
const formState: IForm = {
loading: false,
error: false,
data: {
name: '',
email: '',
phone: '',
text: '',
agreement: false,
},
response: {},
status: 0,
};
createEvent({ event: 'saas_form_opening' });
const sendForm = async () => {
formState.loading = true;
const code = document.querySelector('.iti__selected-dial-code');
const token = document.querySelector('.g-recaptcha-response');
for (let i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i);
if (key && key.includes('param__')) {
formState.data[key.replace('param__', '')] = localStorage.getItem(key) || null;
}
}
if (code) {
formState.data.code = code.innerHTML;
}
let phone = formState.data.phone;
if (phone) {
if (String(phone).includes(String(formState.data.code))) {
phone = formState.data.phone;
} else {
phone = String(formState.data.code) + String(formState.data.phone);
}
delete formState.data.code;
}
if (token) {
formState.data.token = token?.value;
}
formState.data['landing_url'] = window.location.host + window.location.pathname;
formState.data['language'] = document.documentElement.lang;
for (const [key, value] of Object.entries(formState.data)) {
Validation({ name: key, value: value, formState });
}
if (Object.values(formState.response).length) {
formState.loading = false;
return;
}
createEvent({ event: 'saas_form_sent' });
await fetch(`/api/send`, {
method: 'POST',
body: JSON.stringify({
...formState.data,
phone: String(phone).replace(/[^+\d]/g, ''),
}),
})
.then((response) => {
formState.status = response.status;
return response.json();
})
.then((response) => {
formState.response = response;
})
.finally(() => {
formState.loading = false;
const grecaptcha = window?.grecaptcha;
if (grecaptcha && grecaptcha?.ready && env?.PUBLIC_RECAPTCHA_SITE_KEY && env?.PUBLIC_RECAPTCHA_SECRET) {
grecaptcha?.reset();
}
});
};
const clickSendMore = () => {
formState.data = {};
formState.response = {};
formState.status = 0;
const grecaptcha = window?.grecaptcha;
if (grecaptcha && grecaptcha?.ready && env?.PUBLIC_RECAPTCHA_SITE_KEY && env?.PUBLIC_RECAPTCHA_SECRET) {
grecaptcha?.reset();
}
};
</script>
<div class="popupForm">
<div class="container">
<div class="block-feedback">
<div class="block-feedback__wrapper">
<div class="block-feedback__content">
<div
class="back block-feedback__back"
on:click={() => popupForm.set(false)}
on:keydown={() => false}
role="button"
tabindex="0"
>
<img alt="Back icon" class="back__icon" src={back} />
<p class="back__text">Back</p>
</div>
<h1 class="block-feedback__title">Kickstart your broker within <span>14 days</span></h1>
<div class="block-feedback__contentBlock">
<div class="block-feedback__grid">
<p class="block-feedback__gridItem">01</p>
<p class="block-feedback__gridItem">02</p>
<p class="block-feedback__gridItem">03</p>
<p class="block-feedback__gridItem">04</p>
<p class="block-feedback__gridItem">05</p>
</div>
<div class="block-feedback__text">
<p class="block-feedback__textItem">
Leave <br />
your request
</p>
<p class="block-feedback__textItem">
Check out <br />
the demo
</p>
<p class="block-feedback__textItem">
Customise <br />
the platform
</p>
<p class="block-feedback__textItem">
Sign <br />
the contract
</p>
<p class="block-feedback__textItem">Get brokerage solution</p>
</div>
</div>
</div>
<div class="block-feedback__form">
<p class="block-feedback__formTitle">Leave your request</p>
<div class="block-feedback__formItems">
<div class="block-feedback__formItem">
<InputField
placeholder="Name/Last name *"
name="name"
error={formState.response.name}
value={String(formState.data.name || '')}
onChange={(e) => {
formState.data.name = e.currentTarget.value;
Validation({ name: 'name', value: e.currentTarget.value, formState });
}}
/>
</div>
<div class="block-feedback__formItem">
<InputField
placeholder="Email *"
name="email"
error={formState.response.email}
value={String(formState.data.email || '')}
onChange={(e) => {
formState.data.email = e.currentTarget.value;
Validation({ name: 'email', value: e.currentTarget.value, formState });
}}
/>
</div>
<div class="block-feedback__formItem">
<InputFieldPhone
placeholder="Phone"
name="phone"
error={formState.response.phone}
value={String(formState.data.phone || '')}
onChange={(e) => {
formState.data.phone = e.currentTarget.value;
Validation({ name: 'phone', value: e.currentTarget.value, formState });
}}
/>
</div>
<div class="block-feedback__formItem">
<TextareaField
placeholder="Message"
name="text"
error={formState.response.text}
value={String(formState.data.text || '')}
onChange={(e) => {
formState.data.text = e.currentTarget.value;
}}
/>
</div>
<div class="block-feedback__formItem">
<CheckboxField
placeholder="I read and agree with <a href='/terms-and-conditions'>terms and conditions</a> and <a href='/privacy-policy'>privacy policy</a> of this website"
name="agreement"
error={formState.response.agreement}
checked={Boolean(formState.data.agreement)}
onChange={(e) => {
formState.data.agreement = e.currentTarget.checked;
Validation({ name: 'agreement', value: e.currentTarget.checked, formState });
}}
/>
</div>
<div class="block-feedback__formItem recaptcha">
<Recaptcha error={formState.response.token} />
</div>
<div class="block-feedback__formItem">
<Button
text="Get in touch"
className="block-feedback__button"
onClick={sendForm}
loading={formState.loading}
/>
</div>
</div>
{#if formState.response?.status === 'ok'}
<Message
onClick={clickSendMore}
text="Thank you for your interest! Our team will contact you shortly to discuss the details."
/>
{/if}
{#if [500, 502, 429].includes(formState.status)}
<Message
error={true}
onClick={clickSendMore}
text={formState.response.error || formState.response.message || ''}
/>
{/if}
</div>
</div>
</div>
</div>
</div>
<style lang="scss">
@import 'src/scss/media';
@import 'src/scss/mixins';
@import 'src/scss/variables';
.popupForm {
position: fixed;
z-index: 101;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: $techBlue2;
overflow-y: auto;
padding: 100px 0;
@include breakpoint-down('tabM') {
padding: 40px 0 80px;
}
.container {
height: max-content;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
@include breakpoint-down('tabM') {
top: 0;
transform: translateX(-50%);
}
}
&::-webkit-scrollbar {
width: 0;
opacity: 0;
display: none;
}
}
.block-feedback {
&__wrapper {
display: flex;
align-items: flex-start;
gap: 40px;
@include breakpoint-down('deskL') {
gap: 32px;
}
@include breakpoint-down('deskS') {
gap: 20px;
}
@include breakpoint-down('tabM') {
flex-direction: column;
gap: 34px;
}
}
&__content {
padding-top: 30px;
width: 800px;
@include breakpoint-down('deskL') {
padding-top: 0;
width: 639px;
}
@include breakpoint-down('deskS') {
width: 100%;
max-width: 43%;
}
@include breakpoint-down('tabM') {
max-width: none;
}
}
&__contentBlock {
@include breakpoint-down('deskS') {
display: flex;
gap: 16px;
}
@include breakpoint-down('tabM') {
display: none;
}
}
&__form {
width: 561px;
@include breakpoint-down('deskL') {
width: 448px;
}
@include breakpoint-down('deskS') {
width: 100%;
max-width: 55%;
}
@include breakpoint-down('tabM') {
max-width: none;
width: calc(100% + 40px);
margin-left: -20px;
}
}
&__title {
@include titleXL;
max-width: 80%;
margin-bottom: 64px;
@include breakpoint-down('deskL') {
margin-bottom: 40px;
}
@include breakpoint-down('deskS') {
margin-bottom: 36px;
}
@include breakpoint-down('tabM') {
display: none;
}
> span {
color: $redPrimary;
}
}
&__grid {
display: flex;
align-items: center;
width: 100%;
max-width: 680px;
gap: 27px;
margin-bottom: 24px;
user-select: none;
@include breakpoint-down('deskL') {
margin-bottom: 16px;
}
@include breakpoint-down('deskS') {
flex-direction: column;
margin-bottom: 0;
width: max-content;
gap: 24px;
}
}
&__gridItem {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
width: 83px;
min-width: 83px;
height: 83px;
background-image: url("data:image/svg+xml,%3Csvg width='83' height='83' viewBox='0 0 83 83' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='41.5' cy='41.5' r='41.5' fill='white'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
font-family: $Inter;
font-size: 32px;
font-weight: 400;
line-height: 35px;
@include breakpoint-down('deskL') {
width: 64px;
min-width: 64px;
height: 64px;
font-size: 24px;
line-height: 26px;
}
@include breakpoint-down('deskS') {
flex: none;
width: 48px;
min-width: 48px;
height: 48px;
font-size: 21px;
line-height: 23px;
}
&:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 1px;
width: 80%;
background-image: url("data:image/svg+xml,%3Csvg width='70' height='1' viewBox='0 0 70 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0.5' y1='0.5' x2='69.5' y2='0.5' stroke='%23CFDAE1' stroke-linecap='round' stroke-dasharray='1 7'/%3E%3C/svg%3E%0A");
background-size: contain;
z-index: -1;
left: 100%;
@include breakpoint-down('deskL') {
width: 80%;
left: 85%;
background-image: url("data:image/svg+xml,%3Csvg width='68' height='1' viewBox='0 0 68 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0.5' y1='0.5' x2='67.5' y2='0.500006' stroke='%23CFDAE1' stroke-linecap='round' stroke-dasharray='1 7'/%3E%3C/svg%3E%0A");
}
}
&:first-of-type {
margin-right: 34px;
width: 115px;
min-width: 115px;
height: 115px;
background-image: url("data:image/svg+xml,%3Csvg width='116' height='115' viewBox='0 0 116 115' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='58' cy='57.5' r='57.5' fill='url(%23paint0_linear_10220_19321)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_10220_19321' x1='58' y1='0' x2='58' y2='115' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2340454E'/%3E%3Cstop offset='1' stop-color='%23313840'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
color: $techWhite;
font-size: 48px;
font-weight: 500;
line-height: 53px;
@include breakpoint-down('deskL') {
width: 80px;
min-width: 80px;
height: 80px;
font-size: 36px;
line-height: 40px;
margin-left: 10px;
margin-right: -4px;
}
@include breakpoint-down('deskS') {
margin-left: 0;
margin-right: 0;
width: 64px;
min-width: 64px;
height: 64px;
font-size: 28px;
line-height: 30px;
}
&:after {
@include breakpoint-down('deskL') {
left: 90%;
}
}
}
&:last-of-type {
&:after {
display: none;
}
}
}
&__text {
display: flex;
align-items: flex-start;
width: 100%;
max-width: 680px;
gap: 27px;
@include breakpoint-down('deskS') {
flex-direction: column;
width: calc((100% - 64px));
gap: 24px;
}
}
&__textItem {
@include smallDefault;
flex: 1;
text-align: center;
@include breakpoint-down('deskS') {
display: flex;
align-items: center;
text-align: left;
flex: none;
min-height: 48px;
}
&:first-of-type {
@include baseTitle;
min-width: 115px;
margin-right: 34px;
@include breakpoint-down('deskL') {
margin-left: 3px;
margin-right: -8px;
}
@include breakpoint-down('deskS') {
min-height: 64px;
min-width: auto;
margin-left: 0;
margin-right: 0;
}
}
}
& :global(.block-feedback__back) {
margin-bottom: 40px;
@include breakpoint-down('tabM') {
margin-bottom: 0;
}
}
&__form {
position: relative;
padding: 40px 32px;
border-radius: 16px;
background: $techWhite;
box-shadow: 0 4px 10px 4px #ebf0f4;
@include breakpoint-down('deskS') {
padding-left: 20px;
padding-right: 20px;
}
}
&__formTitle {
@include titleM;
text-align: center;
margin-bottom: 40px;
@include breakpoint-down('deskL') {
margin-bottom: 32px;
}
}
&__formItems {
display: flex;
flex-direction: column;
gap: 16px;
@include breakpoint-down('deskS') {
gap: 24px;
}
}
&__formItem {
width: 100%;
& :global(.checkboxContainer) {
@include breakpoint-down('deskS') {
margin-top: -16px;
}
}
&.recaptcha {
display: flex;
justify-content: center;
}
}
& :global(.block-feedback__button) {
@include baseCTA;
margin-inline: auto;
margin-top: 8px;
min-width: 260px;
}
}
.back {
display: flex;
align-items: center;
width: max-content;
gap: 10px;
cursor: pointer;
@include breakpoint-down('deskS') {
gap: 8px;
}
&__icon {
width: 34px;
height: 19px;
}
&__text {
@include baseTitle;
}
}
</style>