fm-lp-factory
Version:
package created to build web ui components for FidelizarMais LP services
235 lines (205 loc) • 8.71 kB
JavaScript
import { basicArrowSpinningLoading } from "../../../assets/components/loaders.js";
import { updateFmTemplateCss } from "../index.js";
const cashbackTexts = {
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",
successResponse: 'Você tem <span class="fm-check-balance-with-text-success-response-text" style="color:var(--fm-primary-color);">%pointsWithPointsName%</span>',
};
let componentData;
export default (data) => {
componentData = 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)
.replace("%actionTitle%", data.action.title)
.replace("%actionSubTitle%", data.action.subtitle)
.replace("%actionButtonText%", data.action.buttonText);
;
section.querySelector("[fm-action='getCashbackClick']")
.addEventListener("click", (event) => getCashback(event.target));
section.querySelector("[fm='getCashbackSubmit']").addEventListener("submit", (event) => {
event.preventDefault();
getCashback(
event.target
.querySelector("[fm-action='getCashbackClick']")
)
});
createCss();
document.querySelector("#fm-landing-page-content").appendChild(section);
}
const template = /*html*/ `
<div class="fm-left-image-and-cashback-balance-inner">
<div class="fm-left-image-and-cashback-balance-banner">
<strong class="">
%title%
</strong>
<p>%subtitle%</p>
</div>
<div class="fm-card fm-input-card-checkout-container">
<div class="fm-input-card-checkout-container-header">
<h3>%actionTitle%</h3>
<p>%actionSubTitle%</p>
</div>
<form class="fm-lp-input-container" fm="getCashbackSubmit">
<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="getCashbackClick">
<span>%actionButtonText%</span>
</div>
</form>
<div class="fm-alert"></div>
</div>
</div>
`;
async function getCashback(sourceEvent) {
const parent = sourceEvent.closest(".fm-left-image-and-cashback-balance");
const btnFm = parent.querySelector("[fm-action='getCashbackClick']");
const documentValue = parent.querySelector("[fm-data='document']").value;
const alert = parent.querySelector(".fm-alert");
alert.innerHTML = "";
alert.classList.remove("active", "error");
if (documentValue.length === 0
|| !LoyalJS.public.utils().validation.isValidCPForCNPJ(documentValue)) {
const errorMessage = document.createElement("p");
errorMessage.textContent = cashbackTexts.invalid;
alert.appendChild(errorMessage);
alert.classList.add("error");
}
else try {
btnFm.innerHTML = basicArrowSpinningLoading;
btnFm.classList.add("disabled");
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;
alert.appendChild(text);
// 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 saldo = document.createElement("span");
saldo.setAttribute("fm-msg", "success");
saldo.style = `
display: flex;
justify-content: space-around;
`;
new JSConfetti().addConfetti();
saldo.style.color = getComputedStyle(document.body).getPropertyValue("-fm--btn-color");
saldo.textContent = cashbackTexts.successResponse;
saldo.innerHTML = cashbackTexts.successResponse.replace("%pointsWithPointsName%", `${getBalanceResponse.body.data.currentPointBalance.toString().replace(".", ",")} ${getBalanceResponse.body.data.pointsName}`);
alert.appendChild(saldo);
// make global event to update balance
document.dispatchEvent(new CustomEvent("fm-update-balance", {
detail: {
balance: getBalanceResponse.body.data.totalCashBalanceAvailable,
pointsName: getBalanceResponse.body.data.pointsName,
src: parent
}
}));
}
else {
const errorMessage = document.createElement("p");
errorMessage.textContent = cashbackTexts.error;
alert.appendChild(errorMessage);
}
} catch (error) {
console.log(error);
const errorMessage = document.createElement("p");
errorMessage.textContent = cashbackTexts.error;
alert.classList.add("error");
alert.appendChild(errorMessage);
}
btnFm.innerHTML = componentData.action.buttonText;
alert.classList.add("active");
btnFm.classList.remove("disabled");
}
const templateWrongDocument = /*html*/ `
<p class="fm-alert">CPF ou CNPJ inválido, tente novamente.</p>
`;
const createCss = () => {
updateFmTemplateCss( /*css*/ `
.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-primary-color);
border-radius: var(--fm-base-border-radius);
}
.fm-left-image-and-cashback-balance .fm-left-image-and-cashback-balance-banner{
flex-basis: 50%;
text-align: center;
}
.fm-left-image-and-cashback-balance .fm-left-image-and-cashback-balance-banner strong{
font-size: 3rem;
}
.fm-left-image-and-cashback-balance .fm-card {
flex-basis: 35%;
background: var(--fm-card-primary-background);
border-radius: var(--fm-base-border-radius);
}
.fm-left-image-and-cashback-balance [fm-action='getCashbackClick'].disabled {
cursor: not-allowed;
pointer-events: none;
}
.fm-left-image-and-cashback-balance .fm-left-image-and-cashback-balance-inner {
padding: 120px 30px;
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%;
}
@media screen and (max-width: 700px) {
.fm-left-image-and-cashback-balance {
width: 100% !important;
}
.fm-left-image-and-cashback-balance .fm-left-image-and-cashback-balance-inner {
flex-direction: column;
gap: 15px;
}
.fm-left-image-and-cashback-balance .fm-left-image-and-cashback-balance-banner strong{
font-size: 2rem;
}
.fm-left-image-and-cashback-balance .fm-left-image-and-cashback-balance-banner,
.fm-left-image-and-cashback-balance .fm-card {
flex-basis: 100%;
}
.fm-left-image-and-cashback-balance .fm-lp-input-container .fm-button-container{
width: 25%;
min-width: fit-content;
}
}
section.fm-section-container.fm-left-image-and-cashback-balance .fm-alert.active{
width: 95%;
}
@media (max-width: 768px) {
section.fm-section-container.fm-left-image-and-cashback-balance .fm-alert.active {
width: 90%;
margin: 15px 0;
}
}
`);
}