fm-lp-factory/factory/templates/template1/balance/checkBalanceWithLeftImage.js

package created to build web ui components for FidelizarMais LP services

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

const cashbackTexts2 = {
    error: "Erro ao consultar seu saldo, tente novamente.",
    invalid: "CPF ou CPNJ inválido, tente novamente.",
    notFound: "Dados de cadastro não encontrado.",
    waitRequest: "Aguarde...",
    btnTextAction: "Consultar",
};

export default (data) => {
    const section = document.createElement('section');
    section.className = 'fm-section-container fm-left-image-and-cashback-balance';
    section.innerHTML = template
        .replace("%image%", data.image)
        .replace("%title%", data.title)
        .replace("%subtitle%", data.subtitle)
        .replace("%inputPlaceholder%", data.inputPlaceholder);

    section.querySelector("[fm-action='getCashbackClick']")
        .addEventListener("click", (event) => getCashback(event));

    section.querySelector("[fm='getCashbackSubmit']").addEventListener("submit", (event) => {
        event.preventDefault();
        getCashback(
            event.closest(".fm-left-image-and-cashback-balance")
                .querySelector("[fm='getCashbackClick']")
        )
    });

    createCss();
    document.querySelector("#fm-landing-page-content").appendChild(section);
}

const template =  /*html*/ `
<div class="fm-left-image-and-cashback-balance-inner">
    <img class="fm-left-image-and-cashback-balance-banner"
    src="%image%" alt="banner 1">
    <div class="fm-card fm-input-card-checkout-container">
        <div class="fm-input-card-checkout-container-header">
        <h3>%title%</h3>
        <p>%subtitle%</p>
        </div>
        <form class="fm-lp-input-container" fm="getCashbackSubmit">
            <input fm-data="document" class="fm-input-text fm-mask-cpf-cnpj"  type="text"
                maxlength="18" placeholder="Informe seu CPF ou CNPJ">
            <div class="fm-button-container" fm-action="getCashbackClick">
               <span>Consultar </span>
            </div>
        </form>
        <div class="fm-alert"></div>
    </div>
</div>
`;


async function getCashback(sourceEvent) {
    sourceEvent.preventDefault();
    const parent = sourceEvent.target.closest(".fm-left-image-and-cashback-balance");
    const documentValue = parent.querySelector("[fm-data='document']").value;
    const alert = parent.querySelector(".fm-alert");

    alert.innerHTML = "";
    alert.classList.remove("active");

    if (documentValue.length === 0
        || !LoyalJS.public.utils().validation.isValidCPForCNPJ(documentValue)) {
        const errorMessage = document.createElement("p");
        errorMessage.textContent = cashbackTexts2.invalid;

        return;
    };

    const getBalanceResponse = await LoyalJS.public.services().getBalance({
        document: documentValue,
        byEmail: "",
        cashback: true,
        xApplication: "lp-balance-check",
    })

    if (getBalanceResponse.body.statusCode === 200 && getBalanceResponse.body.success === false) {
        const text = document.createElement("p");
        text.style.fontSize = "1rem";
        text.textContent = getBalanceResponse.body.message;

        // make global event to success balance request but not found
        document.dispatchEvent(new CustomEvent("fm-200-error-balance", {
            detail: {
                balance: getBalanceResponse,
                src: parent
            }
        }));
    }
    else if (getBalanceResponse.body.statusCode === 200) {
        const jsConfetti = new JSConfetti()
        jsConfetti.addConfetti()
        const saldo = document.createElement("span");

        saldo.style.color = getComputedStyle(document.body).getPropertyValue("-fm--btn-color");
        saldo.textContent = `Você tem ${getBalanceResponse.body.data.currentPointBalance} ${getBalanceResponse.body.data.pointsName}`;
    }
    else { }
}


const templateWrongDocument = /*html*/ `
<p class="fm-alert">CPF ou CNPJ inválido, tente novamente.</p>
`;


const createCss = () => {
    updateFmTemplateCss( /*css*/`
    .fm-section-container.fm-left-image-and-cashback-balance {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        width: 90%;
        margin-top: 20px;
        background: var(--fm-secondary-color);
    }
    .fm-left-image-and-cashback-balance .fm-left-image-and-cashback-balance-banner{
        flex-basis: 50%;
    }
    .fm-left-image-and-cashback-balance .fm-card {
        flex-basis: 50%;
        background: var(--fm-primary-color);
        border-radius: 30px;
    }
    .fm-left-image-and-cashback-balance .fm-left-image-and-cashback-balance-inner {
        padding: 20px;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
       }
    .fm-left-image-and-cashback-balance-inner .fm-input-card-checkout-container-header{
        width: 100%;
    }
    `);
}