fm-lp-factory/factory/templates/template1/extract/extractBaseTableListing.js

package created to build web ui components for FidelizarMais LP services

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

export default (component) => {
    css();

    const section = document.createElement("section");
    section.classList.add("fm-extract-base-table-listing", "fm-section-container");
    section.innerHTML = template.base
        .replace("%title%", component.title)
        .replace("%subtitle%", component.subtitle);
    document.querySelector("#fm-landing-page-content").appendChild(section);

    const searchExtractBtn = section.querySelector("[fm-action='searchExtractClick']");
    searchExtractBtn.addEventListener("click", (event) => searchExtract(event));

    const searchExtractSubmit = section.querySelector("[fm='searchExtractSubmit']");
    searchExtractSubmit.addEventListener("submit", (e) => {
        e.preventDefault();
        searchExtractBtn.click();
    });

    const showExtractFormsBtn = section.querySelector("[fm-action='showExtractForms']");
    showExtractFormsBtn.addEventListener("click", showExtractForms);

}


const template = {
    base: /*html*/ `
    <div class="fm-extract-base-table-listing-header">
    <div>
        <p class="fm-title">%title%</p>
        <p class="fm-subtitle">%subtitle%</p>
    </div>
    <strong fm-action="showExtractForms" class="fm-extract-base-table-listing-show-forms-btn">
        Procurar outro CNPJ/CPF
    </strong>
</div>
<div class="fm-extract-base-table-listing-body no-data">
    <div class="container forms">
        <img class="fm-extract-base-table-listing-body-search-img"
            src="https://cdns.fidelizarmais.com/files/production/3b03ece2-f7d3-4410-95d7-ebe989fc12bf/landing-page/magnifier-red.png"
            alt="">
        <div style="text-align: center;">
            <strong>Consultar meu extrato</strong>
            <p>Para verificar seu extrato de pontos preencha o campo abaixo</p>
        </div>
        <form class="fm-lp-input-container" fm="searchExtractSubmit">
            <input fm-data="document" autocomplete="username" 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="searchExtractClick">
                <span>Consultar</span>
            </div>
        </form>
        <div class="fm-alert disabled"></div>
    </div>
    <div class="container loading disabled">
        <img src="https://cdn.fidelizarmais.com/packages/img/spining-arrows-black.svg" id="fm-testimony-loading"
            class="rotate-img-slow" alt="">
        <strong>carregando extrato</strong>
    </div>
</div>
<div class="fm-extract-base-table-listing-body data disabled">
    <table class="fm-extract-base-table-listing">
        <thead>
            <tr>
                <th><strong></strong></th>
                <th><strong>Código</strong></th>
                <th><strong>Data</strong></th>
                <th><strong>Valor</strong></th>
                <th><strong>Expira</strong></th>
            </tr>
        </thead>
        <tbody> </tbody>
    </table>
</div>
    `,
    tableRow: /*html*/ `
<td>
    <div class="fm-lp-input-container" fm-action="copyCoupon">Copiar código<span class="fm-tooltip-text">Copiado!</span></div>
</td>
<td>%couponCode%</td>
<td>%couponDate%</td>
<td>%couponValue%</td>
<td>%expireIn%</td>
    `
}

function enableAlertExtract(status, alertContainer, text) {
    if (alertContainer) {
        alertContainer.innerHTML = "";
        if (status === true) {
            alertContainer.classList.remove("disabled");
            alertContainer.innerHTML = text;
        } else {
            alertContainer.classList.add("disabled");
        }
    }
}

const searchExtract = async (btn) => {
    const tableBody = btn.target.closest(".fm-extract-base-table-listing");
    const tableHead = tableBody.querySelector(".fm-extract-base-table-listing-show-forms-btn");
    const tableBodyForms = tableBody.querySelector(".fm-extract-base-table-listing-body.no-data");
    const tableBodyData = tableBody.querySelector(".fm-extract-base-table-listing-body.data");
    const inputValue = tableBodyForms.querySelector("input").value;
    const alertContainer = tableBody.querySelector(".fm-alert");
    const loadingContainer = tableBody.querySelector(".container.loading");
    const formsContainer = tableBody.querySelector(".container.forms");

    const extractTexts = {
        btnTextAction: "Consultar",
        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..."
    }

    const enableLoadingExtract = (status) => {
        if (loadingContainer) {
            if (status === true) {
                loadingContainer.classList.remove("disabled");
                formsContainer.classList.add("disabled");
            } else {
                loadingContainer.classList.add("disabled");
                formsContainer.classList.remove("disabled");
            }
        }
    }


    enableAlertExtract(false, alertContainer, "");
    if (inputValue.length === 0 || !LoyalJS.public.utils().validation.isValidCPForCNPJ(inputValue)) {
        const errorMessage = document.createElement("strong");
        errorMessage.textContent = extractTexts.invalid;
        enableAlertExtract(true, alertContainer, extractTexts.invalid);
        return;
    };
    enableLoadingExtract(true);

    const extractResponse = await LoyalJS.public.services().redeemedCoupons({
        document: inputValue,
        byEmail: "",
        cashback: true,
        offset: 0,
        limit: 100,
        xApplication: "lp-check-extract",

    });

    if (extractResponse.body.statusCode == 200 && extractResponse.body.data.items.length > 0) {
        const extractItems = extractResponse.body.data.items;
        tableBodyData.querySelector("tbody").innerHTML = "";
        extractItems.forEach((item) => {

            const row = document.createElement("tr");
            row.innerHTML = template.tableRow
                .replace("%couponCode%", item.code)
                .replace("%couponDate%", item.dateRegisterDescription.split(" ")[0])
                .replace("%couponValue%", `${extractContentInParentheses(item.descriptionType)} ${item.valueCoupon}`)
                .replace("%expireIn%", "n/a");

            row.querySelector("[fm-action='copyCoupon']").addEventListener("click", (event) => {
                navigator.clipboard.writeText(item.code);

                event.target.classList.add("active");

                setTimeout(() => {
                    event.target.classList.remove("active");
                }, 2000);
            });

            tableBodyData.querySelector("tbody").appendChild(row);
        });
        tableBodyData.classList.remove("disabled");
        tableBodyForms.classList.add("disabled");
        tableHead.classList.add("active");
        addPagination(tableBodyData, 5);

    } else {
        let errorMessage;
        if (extractResponse.body.statusCode == 200 && extractResponse.body.data.items.length === 0) {
            enableAlertExtract(true, alertContainer, "Nenhum cupom nesse documento encontrado.");
        }

        else enableAlertExtract(true, alertContainer, "Erro ao consultar seu extrato, tente novamente.");
    }
    enableLoadingExtract(false);
}

const extractContentInParentheses = (str) => {
    const match = str.match(/\((.*?)\)/);
    return match ? match[1] : "";
}

const showExtractForms = (btn) => {
    const tableBody = btn.target.closest(".fm-extract-base-table-listing");
    tableBody.querySelectorAll(".fm-extract-base-table-listing-pagination-and-rows").forEach(node => node.remove());
    const tableHead = tableBody.querySelector(".fm-extract-base-table-listing-show-forms-btn");
    const tableBodyForms = tableBody.querySelector(".fm-extract-base-table-listing-body.no-data");
    const tableBodyData = tableBody.querySelector(".fm-extract-base-table-listing-body.data");
    const inputValue = tableBodyForms.querySelector("input").value;
    const alertContainer = tableBodyForms.querySelector(".fm-extract-base-table-listing-body-error");
    const loadingContainer = tableBodyForms.querySelector(".container.loading");
    const formsContainer = tableBodyForms.querySelector(".container.forms");

    tableBodyData.classList.add("disabled");
    tableBodyForms.classList.remove("disabled");

    btn.target.classList.remove("active");
}

function addPagination(tableNode, rowsPerPage) {
    const tbody = tableNode.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));
    const totalPages = Math.ceil(rows.length / rowsPerPage);

    // Hide all rows initially
    rows.forEach(row => row.style.display = 'none');

    // Function to show rows for a specific page
    function showPage(page) {
        const start = (page - 1) * rowsPerPage;
        const end = start + rowsPerPage;
        rows.forEach((row, index) => {
            row.style.display = (index >= start && index < end) ? '' : 'none';
        });
    }

    const paginationAndRowsCounterContainer = document.createElement('div');
    paginationAndRowsCounterContainer.className = 'fm-extract-base-table-listing-pagination-and-rows';

    const rowsCounter = document.createElement('span');
    rowsCounter.className = 'fm-extract-base-table-listing-rows-counter';
    rowsCounter.innerText = `Mostrando ${rows.length} registros`;

    const paginationMobile = document.createElement('div');
    paginationMobile.className = 'fm-extract-base-table-listing-pagination-mobile';
    paginationMobile.setAttribute("pages", totalPages);
    paginationMobile.setAttribute("current-page", 1);


    const paginationMobileActualPage = document.createElement('span');
    paginationMobileActualPage.innerText = '1';

    const paginationMobileBtnPrev = document.createElement('a');
    paginationMobileBtnPrev.classList.add('fm-button');
    paginationMobileBtnPrev.href = '#';
    paginationMobileBtnPrev.innerHTML = '&#60;';
    paginationMobileBtnPrev.addEventListener('click', (event) => {
        event.preventDefault();
        const currentPage = parseInt(paginationMobile.getAttribute('current-page'));
        if (currentPage > 1) {
            showPage(currentPage + 1);
            paginationMobile.setAttribute('current-page', currentPage - 1);
            paginationMobileActualPage.innerText = currentPage - 1;
        }
    });

    const paginationMobileBtnNext = document.createElement('a');
    paginationMobileBtnNext.classList.add('fm-button');
    paginationMobileBtnNext.href = '#';
    // use '&gt;' for the next page button
    paginationMobileBtnNext.innerHTML = '&#62;';
    paginationMobileBtnNext.addEventListener('click', (event) => {
        event.preventDefault();
        const currentPage = parseInt(paginationMobile.getAttribute('current-page'));
        if (currentPage < totalPages) {
            showPage(currentPage + 1);
            paginationMobile.setAttribute('current-page', currentPage + 1);
            paginationMobileActualPage.innerText = currentPage + 1;
        }
    });



    paginationMobile.appendChild(paginationMobileBtnPrev);
    paginationMobile.appendChild(paginationMobileActualPage);
    paginationMobile.appendChild(paginationMobileBtnNext);

    // Create pagination controls
    const pagination = document.createElement('div');
    pagination.className = 'fm-extract-base-table-listing-pagination-desktop';
    for (let i = 1; i <= totalPages; i++) {
        const pageLink = document.createElement('a');
        pageLink.classList.add('fm-button', (i === 1 ? 'active' : 'a'));
        pageLink.href = '#';
        pageLink.innerText = i;
        pageLink.addEventListener('click', (event) => {
            event.preventDefault();
            pagination.querySelectorAll('.fm-button').forEach(link => link.classList.remove('active'));
            event.target.classList.add("active");
            showPage(i);
        });
        pagination.appendChild(pageLink);
    }

    const btnNext = document.createElement('a');
    btnNext.classList.add('fm-button');

    paginationAndRowsCounterContainer.appendChild(rowsCounter);
    paginationAndRowsCounterContainer.appendChild(pagination);
    paginationAndRowsCounterContainer.appendChild(paginationMobile);

    // Insert pagination controls after the table
    tableNode.parentNode.insertBefore(paginationAndRowsCounterContainer, tableNode.nextSibling);

    showPage(1);
}

const css = () => {
    updateFmTemplateCss(
      /*css*/ `
      .fm-extract-base-table-listing .container.forms.disabled {
        display: none;
      }
      .fm-extract-base-table-listing.fm-section-container {
        display: flex;
    }
      .fm-extract-base-table-listing-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }
    .fm-extract-base-table-listing-body .container.forms {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 25px 15px;
    }

    .fm-extract-base-table-listing-body .container.forms .fm-lp-input-container {
            width: 50%;
    }
    .fm-extract-base-table-listing-body.no-data {
        width: 100%;
        border: 1px solid #dedede;
        border-radius: var(--custom-fm-border-radius);
    }

    .fm-extract-base-table-listing-body.data {
        width: 100%;

    }

    .container.loading.disabled{
        display: none;
    }

    .container.loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 10px 0;
        min-height: 200px;
    }

    .container.loading img {
     width: 50px;
    }

    .fm-extract-base-table-listing-body.disabled {
        display: none;
    }

    .fm-extract-base-table-listing-header .fm-title {
        font-size: 24px;
        color: var(--fm-primary-color);
    }

    .fm-extract-base-table-listing-header .fm-subtitle {
        font-size: 16px;
        color: #000;
    }

    .fm-extract-base-table-listing.fm-section-container .fm-alert.disabled{
        display: none;
    }
    .fm-extract-base-table-listing.fm-section-container .fm-alert{
        margin: 10px 0;
        padding: 20px;
        border-radius: var(--fm-base-border-radius);
        background: #e4e4e4;
        color: red;
        font-weight: bold;
        text-align: center;
    }



    .fm-extract-base-table-listing .fm-extract-base-table-listing-show-forms-btn {
        cursor: pointer;
        color: var(--fm-primary-color);
        display: none;
    }

    .fm-extract-base-table-listing .fm-extract-base-table-listing-show-forms-btn.active {
        display: block;
    }

    @media (max-width: 768px) {
        .fm-extract-base-table-listing-body .container.forms .fm-button-container{
        width: 30%;
        }
        .fm-extract-base-table-listing-body .container.forms .fm-lp-input-container{
            width: 100%;
        }
        .fm-extract-base-table-listing-body.data{
            overflow: auto;
        }

      .fm-extract-base-table-listing.fm-section-container {
        padding: 15px;
      }
    }

    .fm-extract-base-table-listing-body table{
        border-collapse: collapse;
        width: 100%;
        text-align: center; 
    }

    .fm-extract-base-table-listing-body table{
        border-collapse: collapse;
        width: 100%;
        text-align: center; 
    }

    .fm-extract-base-table-listing-body table thead tr{
        align-items: center;
        padding: 10px;
        border-radius: 7px;
    }

    .fm-extract-base-table-listing-body table thead tr, .fm-extract-base-table-listing-body table thead th{
        background: var(--fm-primary-color);
        color: white;
    }

    .fm-extract-base-table-listing-body table td, .fm-extract-base-table-listing-body table th{
        padding: 8px;
    }
    .fm-extract-base-table-listing-body table, tr, th{
        border: none;
    }
    
    .fm-extract-base-table-listing-body table td{
        border: none;
        border-bottom: rgb(216, 215, 215) 1px solid;
        text-align: center;
    }


    .fm-extract-base-table-listing-pagination-and-rows{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px;
        width: 100%;
    }

    span.fm-extract-base-table-listing-pagination-and-rows-counter{
        font-size: 13px; 
    }

    .fm-extract-base-table-listing-pagination-and-rows-pagination{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .fm-extract-base-table-listing-pagination-and-rows .fm-button.active{
        background: var(--fm-primary-color);
        color: var(--fm-primary-light-color);
        padding: 5px 10px;
        border-radius: var(--fm-base-border-radius);
    }

    .fm-extract-base-table-listing-pagination-and-rows .fm-button{
        margin: auto;
        display: flex;
        padding: 9px;
        text-decoration: none;
        background: none;
        color: #000000;
    }
    .fm-extract-base-table-listing-pagination-desktop{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    
    .fm-extract-base-table-listing .fm-extract-base-table-listing .fm-lp-input-container .fm-tooltip-text::after{
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #4aa82b transparent transparent transparent;
    }
    .fm-extract-base-table-listing .fm-extract-base-table-listing .fm-lp-input-container .fm-tooltip-text{
        visibility: hidden;
        width: 120px;
        background-color: #4aa82b;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: all .5s ease;
    }

    .fm-extract-base-table-listing .fm-extract-base-table-listing .fm-lp-input-container.active .fm-tooltip-text{
        visibility: visible;
        opacity: 1;
    }
    .fm-extract-base-table-listing .fm-extract-base-table-listing .fm-lp-input-container{
        background: var(--fm-primary-button-color);
        color: var(--fm-primary-button-text-color);
        width: max-content;
        border-radius: var(--fm-base-border-radius);
        padding: 10px 20px;
        cursor: pointer;
        margin: auto;
    }


    .fm-extract-base-table-listing-pagination-mobile{
        display: none;
    }

    @media (max-width: 768px){
        .fm-extract-base-table-listing-pagination-mobile{
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }

        .fm-extract-base-table-listing-pagination-desktop{
            display: none;
        }

        .fm-extract-base-table-listing-pagination-mobile span{
            font-size: 16px;
        }

    }
      `
    );
}