fm-lp-factory/factory/templates/template1/forms/formsSignIn.js

package created to build web ui components for FidelizarMais LP services

import { updateFmTemplateCss } from "../index.js";

/**
 * @typedef {Object} FormsData
 * @property {string} label - The label of the form field.
 * @property {string} type - The type of the form field.
 * @property {boolean} required - Whether the form field is required.
 */

/**
 * @typedef {Object} Component
 * @property {string} title - The title of the registration section.
 * @property {string} subtitle - The subtitle of the registration section.
 * @property {string} buttonText - The text for the submit button.
 * @property {FormsData[]} formsData - The array of form data objects.
 */

/**
 * Initializes the registration form and sets up event listeners.
 *
 * @param {Component} component - The component object containing the title, subtitle, buttonText, and formsData.
 */
export default (component) => {
    css();

    const section = document.createElement('section');
    section.className = 'fm-section-container fm-grid-2-col fm-left-title-and-sign-in-forms';

    template = template.replace("{{title}}", component.title)
        .replace("{{subtitle}}", component.subtitle)
        .replace("{{buttonText}}", component.buttonText);

    section.innerHTML = template;

    const forms = section.querySelector('.fm-registration-form-text-container');

    component.formsData.forEach((input) => {
        forms.appendChild(createdInput(input).container);
    });

    document.querySelector("#fm-landing-page-content").appendChild(section);
    document.querySelector(".fm-registration-form").addEventListener("submit", submitForms);
}

const submitForms = async (form) => {
    form.preventDefault();
    const formData = new FormData(form.target);
    const listOfInputs = Array.from(formData.entries()).map(([name, value]) => ({ name, value }));
    const alertElement = document.querySelector('#fm-registration-form-options-alert-container');

    alertElement.classList.remove('active');

    const checkboxes = [];
    const texts = [];

    listOfInputs.forEach(input => {
        const inputElement = form.target.querySelector(`[name="${input.name}"]`);

        if (inputElement.type === 'checkbox') {
            input.value = inputElement.checked;
            checkboxes.push(input);
        } else if (inputElement.type === 'text') {
            texts.push(input);
        } else if (inputElement.type === 'date') {
            texts.push(input);
        }
    });

    const inputsBody = [
        ...texts,
        ...checkboxes
    ].reduce((acc, { name, value }) => {
        acc[name] = value;

        return acc;
    }, {});

    if (inputsBody.accordingToLgpd) inputsBody.iAcceptRegulation = inputsBody.accordingToLgpd;
    if (!inputsBody.sex) inputsBody.sex = 0;
    if (!inputsBody.iAgreeToReceiveSms) inputsBody.iAgreeToReceiveSms = false;
    if (!inputsBody.accountManager) inputsBody.accountManager = inputsBody.document;

    inputsBody.type = "widget";

    inputsBody.partnerGroupId = LoyalJS.settings.groupPartnerId;
    inputsBody.storeId = LoyalJS.settings.storeId;

    var myHeaders = new Headers();
    myHeaders.append("x-secret-key", LoyalJS.settings.secretKey);
    myHeaders.append("x-store-key", LoyalJS.settings.storeId);
    myHeaders.append("x-partner-id", LoyalJS.settings.groupPartnerId);

    myHeaders.append("x-language-custom", LoyalJS.settings.lang);
    myHeaders.append("x-customer-document", inputsBody.document);
    myHeaders.append("x-token-external", "3a20fd07-a394-4ffc-bd0e-41762c888628");
    myHeaders.append("Origin", window.origin);
    myHeaders.append("Origin", window.origin);

    myHeaders.append("Content-Type", "application/json");
    var raw = JSON.stringify(inputsBody);
    var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
    };
    try {
        const response =await  (await fetch("https://zeus-member-mservice.fidelizarmais.com/api/v1/protected/client-member/partner", requestOptions)).json()

        if (response.success) {
            new JSConfetti().addConfetti();
            alertElement.innerHTML = `<p style="color: green;">Cadastro realizado com sucesso!</p>`;
        }
        else {
            alertElement.innerHTML = `<p style="color: red;">Erro no cadastro. Tente novamente mais tarde.</p>`;
        }

    } catch (error) {
        console.log(error);
    } finally {
        alertElement.classList.add('active');
    }
}

let template = /*html*/ `
<div id="fm-left-title-and-sign-in-forms-row-1">
    <p class="fm-title">{{title}}</p>
    <p class="fm-subtitle">{{subtitle}}</p>
</div>
<div id="fm-left-title-and-sign-in-forms-row-2">
    <form class="fm-registration-form fm-lp-input-container">
        <div class="fm-registration-form-text-container"></div>
        <button class="fm-button-container" fm-action="getCashbackClick" type="submit">
            <span type="submit">{{buttonText}}</span>
        </button>
    </form>
    <div id="fm-registration-form-options-alert-container">
    </div>
</div>
`;

const createdInput = ({ label, type, required }) => {
    let inputData;
    switch (type) {
        case 'firstname':
            inputData = createdInputText({ label, type, required, placeholder: "Digite seu nome" });
            break;
        case 'lastname':
            inputData = createdInputText({ label, type, required, placeholder: "Digite seu sobrenome" });
            break;
        case 'document':
            inputData = createdInputText({ label, type, required, placeholder: "000.000.000-00" });
            inputData.input.classList.add('fm-mask-cpf-cnpj');
            break;
        case 'birthDate':
            inputData = createdInputDate({ label, type, required, placeholder: "00/00/0000" });
            break;
        case 'telephone':
            inputData = createdInputText({ label, type, required, placeholder: "(00) 00000-0000" });
            inputData.input.classList.add('fm-mask-mobilephone');
            break;
        case 'email':
            inputData = createdInputText({ label, type, required, placeholder: "Digite seu e-mail" });
            break;
        case 'accordingToLgpd':
            inputData = createdInputCheckbox({ label, type, required })
            break;
        case 'iAgreeToReceiveSms':
            inputData = createdInputCheckbox({ label, type, required })
            break;
    }
    return inputData;
}

const createdInputText = ({ label, type, required, placeholder }) => {
    const container = document.createElement('div');
    container.className = 'fm-input-container';

    const labelInput = document.createElement('label');
    labelInput.innerHTML = label;
    labelInput.for = `${type}`;
    container.appendChild(labelInput);

    const input = document.createElement('input');
    input.type = 'text';
    input.name = `${type}`;
    input.required = required;
    input.placeholder = placeholder ? placeholder : "";

    container.appendChild(input);

    return { container, input, labelInput };
}

const createdInputDate = ({ label, type, required }) => {
    const container = document.createElement('div');
    container.className = 'fm-input-container';

    const labelInput = document.createElement('label');
    labelInput.innerHTML = label;
    labelInput.for = `${type}`;
    container.appendChild(labelInput);

    const input = document.createElement('input');
    input.type = 'date';
    input.name = `${type}`;
    input.required = required;
    input.placeholder = "00/00/0000";
    container.appendChild(input);

    return { container, input, labelInput };
}



const createdInputCheckbox = ({ label, type, required }) => {
    const container = document.createElement('div');
    container.className = 'fm-input-container fm-checkbox-container';

    const input = document.createElement('input');
    input.type = 'checkbox';
    input.name = `${type}`;
    input.required = required;

    container.appendChild(input);

    const labelInput = document.createElement('label');
    labelInput.innerHTML = label;
    labelInput.for = `${type}`;
    container.appendChild(labelInput);

    return { container, input, labelInput };
}

const css = () => updateFmTemplateCss( /*css*/
    `
    section.fm-section-container.fm-left-title-and-sign-in-forms {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 80px;
    }

    .fm-registration-form-text-container {
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 10px;
        width: 100%;
    }

    .fm-registration-form-text-container input, .fm-registration-form-text-container select {
        border-radius: var(--fm-base-border-radius);
        border: 1px solid #dfdfdf;
        padding: 10px;
    }

    .fm-registration-form-text-container .fm-input-container {
        display: flex;
        flex-direction: column;
    }

    #fm-left-title-and-sign-in-forms-row-1 .fm-title{
        font-size: 36px ;
        font-weight: bold;
    }

    @media (max-width:768px){
        .fm-left-title-and-sign-in-forms {
            flex-direction: column !important;
        }

        .fm-left-title-and-sign-in-forms .fm-registration-form-text-container{
            grid-template-columns: 100%;
        }

        #fm-left-title-and-sign-in-forms-row-2{
            width: 100%;
        }
    }

    .fm-registration-form.fm-lp-input-container .fm-button-container{
        position: relative;
        width: 100%;
        padding: 10px 0;
    }

    .fm-registration-form.fm-lp-input-container{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        position: relative;
    }

    .fm-registration-form .fm-checkbox-container{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        align-items: center;
        gap: 10px;
    }

    @media (min-width: 768px){
        .fm-registration-form .fm-checkbox-container{
            margin: 20px 0;
        }
    }

    @media (max-width: 768px){
        .fm-registration-form .fm-checkbox-container{
            margin: 5px 0;
        }
    }

    .fm-registration-form-text-container > div:last-child{
        margin-bottom: 20px;
    }

    div#fm-registration-form-options-alert-container {
        width: 100%;
        text-align: center;
        border-radius: var(--fm-base-border-radius);
        background: whitesmoke;
        padding: 5px 0;
        margin: 10px auto;
        display: none;
    }

    div#fm-registration-form-options-alert-container.active {
        display: block;
    }
    `
);