fm-lp-factory/factory/templates/template1/awards/listOfAllAwardsTable.js

package created to build web ui components for FidelizarMais LP services

import { updateFmTemplateCss } from "../index.js";
import { basicArrowSpinningLoading } from "../../../assets/components/loaders.js";

export default (component) => {
    const section = document.createElement("section");
    css();
    section.classList.add("fm-section-container", "fm-list-of-all-awards-table");
    section.innerHTML = template
        .replace("%subtitle%", component.subtitle)
        .replace("%title%", component.title)
        .replace("%pointsName%", LoyalJS.storeData.rules.customization.pointsName);

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

    const sectionBody = section.querySelector(".fm-awards-container-body");
    const bodyRow1 = section.querySelector(".fm-awards-container-body-row-1");
    const bodyRow2 = section.querySelector(".fm-awards-container-body-row-2");
    getAllPossibleAwards()
        .then((awards) => {
            section.querySelector(".fm-awards-loader").remove();
            sectionBody.classList.add("active");
            awards.forEach((award) => {
                const cardRow1 = document.createElement("div");
                cardRow1.classList.add("fm-awards-card");
                cardRow1.innerHTML = cardTemplateRow1
                    .replace("%cardName%", award.name)
                    .replaceAll("%couponImage%", component.image)

                const cardRow2 = document.createElement("div");
                cardRow2.classList.add("fm-awards-card");
                cardRow2.innerHTML = cardTemplateRow2
                    .replace("%cardPoints%", award.point);

                bodyRow1.appendChild(cardRow1);
                bodyRow2.appendChild(cardRow2);
            });
        })
        .catch((error) => {
            console.error(error);
        });
}

async function getAllPossibleAwards() {
    let awards = [];
    const categoryAwardIds = [
        { id: "5deab305-a72d-44e3-8248-0ace49c7e8c6", isCoupon: true, limit: 100, offset: 1, awardName: "" },
        { id: "9b51065c-e126-4e58-8574-11fa7ab6d73b", isCoupon: true, limit: 100, offset: 1, awardName: "" },
        { id: "6b9bf668-a3da-42ad-9e5c-bcd49fc0a946", isCoupon: true, limit: 100, offset: 1, awardName: "" },
    ];
    for (const categoryAwardId of categoryAwardIds) {
        try {
            const response = await LoyalJS.public.services().getAwards(
                {
                    categoryAwardId: categoryAwardId.id,
                    limit: categoryAwardId.limit,
                    offset: categoryAwardId.offset,
                    isCoupon: categoryAwardId.isCoupon,
                    awardName: categoryAwardId.awardName,
                    xApplication: "lp-rewards-redemption-coupons",
                }
            )
            if (response.body.data.items.length > 0) {
                awards = [...awards, ...response.body.data.items];
            }
        } catch (error2) {
        }
    }
    return awards;
}

const awardsLoader = /*html*/ `
<div class="fm-awards-loader">
    ${basicArrowSpinningLoading}
</div>
`;

const template = /*html*/ ` 
<div class="fm-awards-container">
    <div class="fm-awards-container-header" >
        <span class="subtitle">%subtitle%</span>
        <span class="title">%title%</span>
    </div>
    ${awardsLoader}
    <div class="fm-awards-container-body">
        <div class="fm-awards-container-body-row-1">
            <div class="fm-awards-card fm-table-header">
                <p>Nome</p>
            </div>
        </div>
        <div class="fm-awards-container-body-row-2">
            <div class="fm-awards-card fm-table-header">
                <p>%pointsName%</p>
            </div>
        </div>
    </div>
</div>
`;

const cardTemplateRow1 = /*html*/ `
<div class="fm-awards-card-body-1">
    <div class="card-coupon-img">
        <img src="%couponImage%" alt="%couponImage%">
    </div>
    <p>%cardName%</p>
</div>
`;
const cardTemplateRow2 = /*html*/ `
<div class="card-coupon-detail-extra fm-awards-card-body-2">
    <span class="card-coupon-value-points">%cardPoints%</span>
</div>
`;


const css = () => {
    updateFmTemplateCss(/*css*/ `
    .fm-section-container.fm-list-of-all-awards-table{
        width: 90%;
        background-color: var(--fm-primary-color);
        border-radius: var(--fm-base-border-radius);
    }

    .fm-list-of-all-awards-table .fm-awards-container-header {
        color: var(--fm-secondary-button-text-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        text-align: center;
    }
    .fm-list-of-all-awards-table .fm-awards-container-header .title {
        font-size: 1.5rem;
        font-weight: bold;
    }
    .fm-list-of-all-awards-table .fm-awards-container-header .subtitle {
        font-size: 1rem;

    }
   
    .fm-list-of-all-awards-table .fm-awards-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        margin: 40px;
        width: 100%;
    }

    .fm-awards-container .fm-awards-loader{
        margin: 15px auto;
    }
    .fm-awards-container .fm-awards-loader img  {
        width: 75px;
    }

    .fm-awards-container-body {
        display: none;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-direction: row;
        width: 100%;
    }
    .fm-awards-container-body.active {
        display: flex;
        align-items: flex-start;
    }

    .fm-awards-container-body .fm-awards-card .card-coupon-img{
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .fm-awards-container-body .fm-awards-card .card-coupon-img img{
        width: 100%;
        max-width: 100px;
    }
    .fm-awards-container-body .fm-awards-card .card-coupon-img .card-coupon-value-money{
        color: white;
        position: absolute;
    }

    .fm-list-of-all-awards-table .fm-awards-container-body .card-coupon-detail-extra {
        color: var(--fm-card-primary-text-color);
        font-weight: bold;
        padding: 5px;
        margin: auto;
    }

    
    .fm-awards-container-body-main {
        width: 100%;
    }
    
    .fm-awards-container-body .fm-awards-card {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        text-align: center;
        background: var(--fm-card-primary-background);
        border: 1px solid #e8e8e8;
        height: 60px;
        align-items: center;
    }
    
    .fm-awards-container-body-row-2, .fm-awards-card-body-2, {
        border-left: 1px solid #e8e8e8;
    }
    
    .fm-awards-container-body .fm-awards-card-body-1 {
        display: flex;
        gap: 15px;
        margin-left: 20px;
        align-items: center;
    }
    
    .fm-awards-container-body-row-1 .fm-awards-card:last-child {
        border-radius: 0  0 0 var(--fm-base-border-radius);
    }
    
    .fm-awards-container-body-row-2 .fm-awards-card:last-child {
        border-radius: 0  0 var(--fm-base-border-radius) 0;
    }
    
    .fm-awards-container-body-row-1 {
        flex-basis: 50%;
    }
    
    .fm-awards-container-body-row-2, .fm-awards-container-body .fm-awards-card-body-2 {
        flex-basis: 25%;
    }
    
    .fm-awards-container-body-row-1 .fm-awards-card.fm-table-header {
        border-radius: var(--fm-base-border-radius) 0 0 0;
    }
    
    .fm-awards-container-body-row-2 .fm-awards-card.fm-table-header {
        border-radius: 0 var(--fm-base-border-radius) 0 0;
        
    }
    
    .fm-awards-container-body-row-2 .fm-awards-card {
        display: flex;
        justify-content: center;
    }
    
    .fm-awards-card.fm-table-header p {
        margin-left: 20px;
        font-weight: bold;
    }

    @media (max-width: 768px) {
        .fm-awards-container-body .fm-awards-card:not(.fm-table-header) {
            overflow: overlay;
            width: 100%;
            height: 130px;
            align-items: center;
        }

        .fm-awards-card.fm-table-header p {
            margin: auto;
        }
    
        .fm-awards-container-body-row-1 {
            flex-basis: 65%;
        }
    }
    `);
}