@gudhub/ssg-web-components-library 1.0.0

package/src/components/get-in-touch-form/get-in-touch-form.readme.md

@@ -0,0 +1,45 @@
+# Config: 
+The form field settings are defined in the site's config.mjs, when rendered on the server it is stored in "window.constants.form_config", and this config is also defined in the client's "window.website_config.form" and is used when rendering the form on the client. If the config in "window" is not available, then the config is taken from "get-in-touch-form-data.json". There can be several settings for forms, the form selects it by id (it is defined in the "data-form-id" attribute of the form component), this allows you to customize the fields of several forms in different ways (for example, on the page the form has all the fields, and in the popup the form has other types of fields)
+
+# Form in popup:
+if form will be rendered in popup we need to define attribute "data-in-popup", that will change some styles of form to fit the popup styles.
+
+# Placement:
+The "placement" variable is needed to track conversions. If the form is in a popup, then "placement" determined by the button that opened the popup with the form. If the form is already on the page, this value is defined in the form constructor (currently "this.placement = 'main' ").
+
+# Data-attributes:
+data-in-popup: if form is on popup
+data-form-id="form-id": determine id of config that will be applyed to form
+
+# Config object: 
+("?" means "unnecessary")
+```json
+{
+        "id": "string",
+        "title?": "string",
+        "subtitle?": "string",
+        "mailConfig": {
+            "to": "string",
+            "from": "string",
+            "subject": "string"
+        },
+        "inputs": [
+            {
+                "name": "string",
+                "type": "type",
+                "required": "boolean",
+                "placeholder": "Ім'я *",
+                "width": "number from 1 to 12"
+            }
+        ]
+    },
+```
+## Types description:
+email: will be checked by email rules;
+phone: will be checked by phone number rules;
+short: max length 64 symbols;
+long: max length 128 symbols;
+textarea: tag "<textarea>";
+
+## Width:
+defines the width of the field in the row. The total width of the row is 12. That is, if 2 fields have a width of 6, then they will take up half of the line each

package/src/components/get-in-touch-form/get-in-touch-form.scss

@@ -0,0 +1,334 @@
+get-in-touch-popup {
+    get-in-touch-form {
+        background-color: transparent;
+    }
+}
+
+@keyframes loading {
+    0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+get-in-touch-form {
+    .get-in-touch-form {
+        position: relative;
+        width: 100%;
+        max-width: 600px;
+        background-color: var(--primary-bg-color);
+        display: block;
+        padding: 30px;
+        border-radius: var(--block-primary-border-radius);
+
+        .like_title {
+            font-size: var(--h3-font-size);
+            font-weight: 700;
+            line-height: 120%;
+            letter-spacing: 0em;
+            text-align: center;
+            color: var(--h-color);
+            margin-bottom: 20px;
+        }
+        .subtitle {
+            font-size: var(--text-font-size);
+            font-weight: var(--text-font-weight);
+            line-height: 120%;
+            letter-spacing: 0em;
+            text-align: center;
+            color: var(--subtitle-color);
+            margin-bottom: 20px;
+        }
+        $grid-columns: 12;
+        @for $i from 1 through $grid-columns {
+            .col-#{$i} {
+                width: percentage($i / $grid-columns);
+            }
+        }
+        form {
+            width: 100%;
+            max-width: 950px;
+            margin-right: 24px;
+            .btn_wrapper {
+                width: 100%;
+                padding-left: 8px;
+                padding-right: 8px;
+                padding-top: 4px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                .btn {
+                    font-size: 16px;
+                }
+            }
+            .form_wrap {
+                display: flex;
+                flex-wrap: wrap;
+            }
+            .input-wrap {
+                position: relative;
+                padding: 8px;
+                flex: 0 0 auto;
+            }
+            input {
+                font-family: Roboto, sans-serif;
+                outline: none;
+                border-radius: 10px;
+                font-size: 14px;
+                width: 100%;
+                height: 100%;
+                background-color: var(--input-bg-color);
+                border: 1px solid var(--input-border-color);
+                padding: 7px 17px;
+                color: var(--input-text-color);
+                height: 50px;
+                margin-bottom: 8px;
+                transition: all .2s ease;
+                &:hover, &:focus {
+                    border-color: var(--input-active-border-color);
+                }
+                &::placeholder {
+                    color: var(--input-placeholder-color);
+                }
+                &:-webkit-autofill,
+                &:-webkit-autofill:hover, 
+                &:-webkit-autofill:focus, 
+                &:-webkit-autofill:active {
+                    background-color: transparent;
+                    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
+                    -webkit-text-fill-color: var(--input-text-color);
+                    // background-color: var(--input-bg-color);
+                    // -webkit-box-shadow: 0 0 0 30px var(--input-bg-color) inset !important;
+                    // -webkit-text-fill-color: var(--input-text-color);
+                }
+            }
+            input.error {
+                & + .email-error, & + .phone-error {
+                    color: #FF7D7D;
+                }
+            }
+            .email-error, .phone-error {
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 120%;
+            }
+            span {
+                display: block;
+                position: absolute;
+                left: 10px;
+                bottom: -2px;
+                color: transparent;
+                transition: all .2s ease;
+            }
+            textarea {
+                width: 100%;
+                font-family: Roboto, sans-serif;
+                height: 145px;
+                background-color: var(--input-bg-color);
+                border: 1px solid var(--input-border-color);
+                padding: 7px 17px;
+                color: var(--input-text-color);
+                outline: none;
+                border-radius: 10px;
+                margin-bottom: 10px;
+                resize: none;
+                font-weight: 300;
+                font-size: 14px;
+                line-height: 36px;
+                &::placeholder {
+                    font-weight: 300;
+                    font-size: 14px;
+                    line-height: 36px;
+                    color: var(--input-placeholder-color);
+                }
+                transition: all .2s ease;
+                &:hover {
+                    border-color: var(--input-active-border-color);
+                }
+            }
+            .success_text {
+                position: relative;
+                top: -50px;
+                color: transparent;
+                transition: all .2s ease;
+                display: none;
+            }
+            &.success .success_text {
+                display: block;
+                top: -12px;
+                color: green;
+            }
+        }
+        .success-overflow {
+            opacity: 0;
+            z-index: -1;
+
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            
+            background-color: #fff;
+            border-radius: calc(var(--block-primary-border-radius) - 5px);
+            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+
+            transition: opacity .5s ease;
+            .icon_wrapper {
+                width: 100%;
+                padding-bottom: 10px;
+                margin-bottom: 15px;
+
+                display: flex;
+                justify-content: center;
+
+                border-bottom: solid 4px var(--primary-color);
+                .icon {
+                    margin-left: 10px;
+                    width: 150px;
+                    svg {
+                        width: 100%;
+                        height: auto;
+                        path {
+                            fill: var(--primary-color);
+                        }
+                    }
+                }
+            }
+            .success_middle {
+                max-width: 340px;
+                text-align: center;
+                padding-left: 10px;
+                padding-right: 10px;
+
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+
+                gap: 20px;
+                margin-bottom: 35px;
+
+                .bold {
+                    font-size: var(--h1-font-size);
+                }
+                .check_entity {
+                    span:first-child {
+                        color: var(--primary-color);
+                    }
+                    &.phone_entity {
+                        display: none;
+                        &.provided {
+                            display: block;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    &[data-in-popup] {
+        .get-in-touch-form {
+            padding-top: 0;
+            padding-bottom: 10px;
+            margin-bottom: 10px;
+        }
+        .success-overflow {
+            box-shadow: none;
+        }
+    }
+    &.loading {
+        .btn_wrapper {
+            position: relative;
+            button[type="submit"] {
+                opacity: 0;
+                transition: none;
+                cursor: none;
+            }
+            .loader {
+                position: absolute;
+                top: calc(50% - 25px);
+                left: calc(50% - 25px);
+                width: 50px;
+                height: 50px;
+                border: 10px solid var(--primary-color);
+                border-bottom-color: #fff;
+                border-radius: 50%;
+                z-index: 11;
+                animation: loading 2s linear infinite;
+            }
+        }
+    }
+    &.success {
+        button[type="submit"] {
+            opacity: 0;
+        }
+
+        .success-overflow {
+            opacity: 1;
+            z-index: 1;
+        }
+    }
+
+    @media screen and (max-width: 650px) {
+        .get-in-touch-form {
+            form {
+                .input-wrap {
+                    width: 100%;
+                    padding: 4px;
+                }
+                .btn_wrapper {
+                    .btn {
+                        width: 100%
+                    }
+                }
+            }
+        }
+    }
+}
+popup-container[data-position="bottom-right"] {
+    .popup_top {
+        margin-bottom: 10px;
+    }
+    get-in-touch-form .get-in-touch-form {
+        padding-left: 15px;
+        padding-right: 15px;
+        padding-bottom: 10px;
+        .popup_text {
+            margin-bottom: 5px;
+        }
+        .btn {
+            width: 100%;
+            padding-top: 15px;
+            padding-bottom: 15px;
+        }
+        .success-overflow {
+            .bold {
+                font-size: 42px;
+            }
+            .icon {
+                width: 100px;
+            }
+        }
+        @media screen and (max-width: 400px) {
+            padding: 15px;
+            .btn {
+                padding: 15px 20px;
+            }
+        }
+    }
+}
+
+get-in-touch-form[data-theme="dark"] {
+    .get-in-touch-form form {
+        .form_flex input, textarea {
+            color: var(--input-text-color);
+        }
+    }
+    .get-in-touch-form form .form_flex input:-webkit-autofill, .get-in-touch-form form .form_flex input:-webkit-autofill:hover, .get-in-touch-form form .form_flex input:-webkit-autofill:focus, .get-in-touch-form form .form_flex input:-webkit-autofill:active {
+        -webkit-box-shadow: initial !important;
+        -webkit-text-fill-color: initial !important;
+    }
+}

package/src/components/get-in-touch-form/sendEmail.js

@@ -0,0 +1,161 @@
+export async function sendEmail(form, formConfig, placement) {
+    if (validate(form)) {
+
+        const response = await sendRequest(form, formConfig.mailConfig, formConfig.id, placement);
+        if (response.status == 'success') {
+            return true;
+        } else {
+            if (response.error) {
+                console.error(response.error)
+            }
+            return false;
+        }
+    }
+}
+
+async function sendRequest(form, mailConfig, formId, placement) {
+    const formData = {};
+    for (const [name, value] of (new FormData(form)).entries()) {
+        formData[name] = value;
+    }
+
+    const searchParams = getQueryParams();
+    
+    const formDataObj = {
+        Name: formData.name,
+        Phone: formData.phone,
+        Email: formData.email,
+        Companty: formData.company,
+        Message: formData.message,
+        Website:  window.location.hostname,
+        Url: window.location.pathname,
+        FormId: formId,
+        FormPlacement: 'Body',
+        SearchParams: {
+            ...searchParams
+        },
+        Referrer: localStorage.getItem('referrer'),
+    };
+    
+    window.dispatchEvent(new CustomEvent('submitForm', {detail: {formDataObj}}));
+
+    const template = {
+        ...mailConfig,
+        replyTo: formData.email ? formData.email : 'none',
+        html: "<!DOCTYPE html>" +
+            "<html>" +
+            "<head>" +
+            `<title>${mailConfig.subject}</title>` +
+            "</head>" +
+            "<body>" +
+            "<ul>" +
+            "<li><strong>" +
+            "subject: </strong>" + `${mailConfig.subject}` +
+            "</li>" +
+            "<li><strong>" +
+            "formId: </strong>" + `${formId}` +
+            "</li>" +
+            "<li><strong>" +
+            "placement: </strong>" + `${placement}` +
+            "</li>" +
+            `${Object.entries(formData).reduce((acc, [name, value]) => acc + `<li><strong>${name}: </strong>${value}</li>`, '')}` +
+            "<li> <strong>" +
+            "Url: </strong>" + window.location.pathname +
+            "</li>" +
+            "</ul>" +
+            "</body>" +
+            "</html>"
+    };
+
+    console.log(formDataObj);
+    console.log(template);
+
+    return new Promise(res => {
+        setTimeout(() => {
+            res({status: 'success'});
+        }, 1000)
+    })
+
+    // try {
+    //     const response = await fetch('https://development.gudhub.com/api/services/send-email', {
+    //         method: 'POST',
+    //         body: JSON.stringify(template),
+    //         headers: {
+    //             'Content-Type': 'application/json'
+    //         },
+    //     })
+    //     if (response.status == 200) {
+    //         return {
+    //             status: 'success'
+    //         }
+    //     } else {
+    //         return {
+    //             status: 'error'
+    //         }
+    //     }
+    // } catch (error) {
+    //     return {
+    //         status: 'error',
+    //         error
+    //     }
+    // }
+}
+
+function getQueryParams() {
+  var url = window.location.search.substring(1);
+  var queryParamsArray = url.split("&");
+  if (queryParamsArray.length <= 1) {
+    return {};
+  }
+  var queryParams = {};
+  for (var i = 0; i < queryParamsArray.length; i++) {
+    var param = queryParamsArray[i].split("=");
+    queryParams[param[0]] = param[1];
+  }
+  return queryParams;
+}
+
+function validate(form) {
+    const emailInput = form.querySelector('input[name="email"]');
+    const email = emailInput.value;
+    const phoneInput = form.querySelector('input[name="phone"]');
+    let errorEmail = false;
+    let errorPhone = false;
+    
+    let emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+    if (!email.match(emailRegex)) {
+        emailInput.classList.add('error');
+        emailInput.parentElement.classList.add('error-input');
+        errorEmail = true;
+    } else {
+        emailInput.classList.remove('error');
+        emailInput.parentElement.classList.remove('error-input');
+        errorEmail = false;
+    }
+
+    if (phoneInput && phoneInput.value) {
+        const phone = phoneInput.value;
+        let phoneRegex = /^[0-9 ()+-]+$/;
+        if (!phone.match(phoneRegex)) {
+            phoneInput.classList.add('error');
+            phoneInput.parentElement.classList.add('error-input');
+            errorPhone = true;
+        } else {
+            phoneInput.classList.remove('error');
+            phoneInput.parentElement.classList.remove('error-input');
+            errorPhone = false;
+        }
+    }
+    if (errorPhone || errorEmail) {
+        return false;
+    } else {
+        let errors = document.querySelectorAll('.error-input');
+        if (errors.length) {
+            for (let error in errors) {
+                errors[error].classList.remove('error-input');
+            }
+        }
+    }
+
+    return true;
+}

package/src/components/grid/config.js

@@ -0,0 +1,5 @@
+export const gridOld = {
+  tag: 'grid-old',
+  src: '@gudhub/ssg-web-component-library/src/components/grid/grid.js',
+  serverOnly: false
+}

package/src/components/grid/grid.html

@@ -0,0 +1,51 @@
+<section class="grid ${backgroundImage != 'none' ? 'transparentBackground' : ''}">
+    <div class="container">
+        <h2 gh-id="${ghId}.title"> TITLE </h2>
+        
+        ${jsonData.subtitle ? `
+            <p class="subtitle" gh-id="${ghId}.subtitle">
+                SUBTITLE
+            </p>
+        ` : ''}
+        <div class="grid_slider ${beSlider ? 'swiper' : ''}">
+            <div class="${beSlider ? 'swiper-wrapper' : ''} grid_wrapper">
+                ${
+                items.reduce((acc, item, index) => {
+                return acc + `
+                <div class="grid_item ${backgroundImage != 'none' ? 'transparentBackground' : ''}" onclick="openItem()">
+                    <div class="absolute_wrap">
+                        <div class="absolute_wrap_top">
+                            ${ type.includes('number') ? `
+                            <div class="number">${index + 1}</div>
+                            ` : '' }
+                            ${ items[index].title ? `
+                            <h3 gh-id="${ghId}.items.${index}.title"> ITEM TITLE </h3>
+                            ` : ''}
+                            ${ item.text != undefined? `
+                                <div class="grid_item_text" gh-id="${ghId}.items.${index}.text">
+                                    ITEM TEXT
+                                </div>
+                            ` : ''}
+                        </div>
+                        ${ collapse ? `
+                        <div class="collapse_icon">
+                            <div class="plus"></div>
+                        </div>
+                        ` : ''}
+                    </div>
+                </div>
+                `
+                }, '')
+                }
+            </div>
+            <div class="navigation_wrapper">
+                <div class="grids_slider_prev swiper-button-prev">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none"><path d="M8 13L2 7M2 7L8 0.999999M2 7L18 7" stroke="#B3BABF" stroke-width="2"/></svg>
+                </div>
+                <div class="grids_slider_next swiper-button-next">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14" fill="none"><path d="M8 13L2 7M2 7L8 0.999999M2 7L18 7" stroke="#B3BABF" stroke-width="2"/></svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>