fm-lp-factory
Version:
package created to build web ui components for FidelizarMais LP services
223 lines (211 loc) • 11.4 kB
JavaScript
import { updateFmTemplateCss } from "../index.js";
export default (component) => {
css();
const section = document.createElement('section');
section.className = 'fm-section-container fm-grid-2-col fm-left-image-and-sign-in-forms';
template = template.replace("{{title}}", component.title)
.replace("{{subtitle}}", component.subtitle)
.replace("{{buttonText}}", component.buttonText);
section.innerHTML = template;
document.querySelector("#fm-landing-page-content").appendChild(section);
document.querySelector(".fm-registration-form").addEventListener("submit", submitForms);
document.getElementById("fm-forms-cpf-cnpj").addEventListener("input", (input) => input.target.value = LoyalJS.public.utils.masks.maskKeyPressCNPJOrCPF(input.target.value))
document.getElementById("fm-forms-cellphone").addEventListener("input", (input) => input.target.value = LoyalJS.public.utils.masks.maskMobilephone(input.target.value))
}
function submitForms(form) {
form.preventDefault();
const formData = new FormData(form.target);
const externalId = "1234" || LoyalJS.public.utils.helpers.newGuid().replaceAll("-", "");
const name = formData.get("fm-forms-name");
const lastName = formData.get("fm-forms-lastName");
const cpfCnpj = formData.get("fm-forms-cpf-cnpj");
const birthDate = formData.get("fm-forms-birth-date");
const phoneNumber = formData.get("fm-forms-cellphone");
const email = formData.get("fm-forms-email");
const newsLetter = formData.get("fm-forms-newsletter");
const gender = formData.get("fm-forms-gender") == 0 ? null : formData.get("fm-forms-gender");
const address = formData.get("fm-forms-address");
const addressNumber = formData.get("fm-forms-address-number");
const addressDistrict = formData.get("fm-forms-address-neighborhood");
const addressCity = formData.get("fm-forms-address-city");
const addressZipCode = formData.get("fm-forms-address-zipCode");
const addressState = formData.get("fm-forms-address-state");
const addressComplement = formData.get("fm-forms-address-complement");
const termsOfUse = formData.get("fm-forms-terms-of-use");
var myHeaders = new Headers();
myHeaders.append("x-secret-key", LoyalJS.settings.secretKey);
myHeaders.append("x-store-key", LoyalJS.settings.storeId);
myHeaders.append("x-language-custom", LoyalJS.settings.lang);
myHeaders.append("x-token-external", "3a20fd07-a394-4ffc-bd0e-41762c888628");
myHeaders.append("Origin", window.origin);
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({
externalId,
storeId: LoyalJS.settings.storeId,
name: `${name} ${lastName}`,
email,
phoneNumber,
address,
addressNumber,
addressComplement,
addressCity,
addressDistrict,
addressZipCode,
addressState,
birthDate,
gender,
document: cpfCnpj,
agreedToRegulations: true,
partnerGroupId: LoyalJS.settings.groupPartnerId
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("https://zeus-gateway-pdv-objetivo.fidelizarmais.com/api/v1/protected/client-member", requestOptions)
.then(response => response.json())
.then(result => {
if (result.success) {
alert("Sucesso no seu cadastro!");
}
else {
alert("Ops! Ocorreu um erro no seu cadastro. Tente novamente mais tarde.")
}
}
)
.catch(error => alert("Erro no cadastro. Tente novamente mais tarde"));
}
let template = /*html*/ `
<div id="fm-left-image-and-sign-in-forms-row-1">
<p class="">{{title}}</p>
<p>{{subtitle}}</p>
</div>
<div class="fm-left-image-and-sign-in-forms-row-2">
<form class="fm-registration-form">
<div class="fm-registration-form-container">
<div class="fm-input-container">
<label for="fm-forms-name">Nome*</label>
<input type="text" id="fm-forms-name" name="fm-forms-name" required="">
</div>
<div class="fm-input-container">
<label for="fm-forms-lastName">Sobrenome*</label>
<input type="text" id="fm-forms-lastName" name="fm-forms-lastName" required="">
</div>
<div class="fm-input-container">
<label for="fm-forms-cpf-cnpj">CPF ou CNPJ*</label>
<input type="text" id="fm-forms-cpf-cnpj" name="fm-forms-cpf-cnpj" required="" maxlength="19">
</div>
<div class="fm-input-container">
<label for="fm-forms-gender">Gênero</label>
<select class="fm-select-input" name="fm-forms-gender" id="fm-forms-gender">
<option value="">Selecione seu gênero</option>
<option value="masculino">Masculino</option>
<option value="feminino">Feminino</option>
<option value="0">Prefiro não declarar</option>
</select>
</div>
<div class="fm-input-container">
<label for="fm-forms-birth-date">Data de Nascimento*</label>
<input type="date" id="fm-forms-birth-date" name="fm-forms-birth-date" required="" maxlength="10">
</div>
<div class="fm-input-container">
<label for="fm-forms-cellphone">Número de Celular*</label>
<input type="text" id="fm-forms-cellphone" name="fm-forms-cellphone" maxlength="14" required="">
</div>
<div class="fm-input-container">
<label for="fm-forms-email">E-mail*</label>
<input type="email" id="fm-forms-email" name="fm-forms-email" required="">
</div>
<div class="fm-input-container">
<label for="fm-forms-address">Endereço</label>
<input type="text" id="fm-forms-address" name="fm-forms-address">
</div>
<div class="fm-registration-form-container">
<div class="fm-input-container">
<label for="fm-forms-address-number">Número</label>
<input type="text" id="fm-forms-address-number" name="fm-forms-address-number">
</div>
<div class="fm-input-container">
<label for="fm-forms-address-zipCode">Cep</label>
<input type="text" id="fm-forms-address-zipCode" name="fm-forms-address-zipCode">
</div>
</div>
<div class="fm-input-container">
<label for="fm-forms-address-state">Estado</label>
<select class="fm-select-input" name="fm-forms-address-state" id="fm-forms-address-state">
<option value="">Selecione seu estado</option>
<option value="AC">Acre (AC)</option>
<option value="AL">Alagoas (AL)</option>
<option value="AP">Amapá (AP)</option>
<option value="AM">Amazonas (AM)</option>
<option value="BA">Bahia (BA)</option>
<option value="CE">Ceará (CE)</option>
<option value="DF">Distrito Federal (DF)</option>
<option value="ES">Espírito Santo (ES)</option>
<option value="GO">Goiás (GO)</option>
<option value="MA">Maranhão (MA)</option>
<option value="MT">Mato Grosso (MT)</option>
<option value="MS">Mato Grosso do Sul (MS)</option>
<option value="MG">Minas Gerais (MG)</option>
<option value="PA">Pará (PA)</option>
<option value="PB">Paraíba (PB)</option>
<option value="PR">Paraná (PR)</option>
<option value="PE">Pernambuco (PE)</option>
<option value="PI">Piauí (PI)</option>
<option value="RJ">Rio de Janeiro (RJ)</option>
<option value="RN">Rio Grande do Norte (RN)</option>
<option value="RS">Rio Grande do Sul (RS)</option>
<option value="RO">Rondônia (RO)</option>
<option value="RR">Roraima (RR)</option>
<option value="SC">Santa Catarina (SC)</option>
<option value="SP">São Paulo (SP)</option>
<option value="SE">Sergipe (SE)</option>
<option value="TO">Tocantins (TO)</option>
</select>
</div>
<div class="fm-registration-form-container">
<div class="fm-input-container">
<label for="fm-forms-address-neighborhood">Bairro</label>
<input type="text" id="fm-forms-address-neighborhood" name="fm-forms-address-neighborhood">
</div>
<div class="fm-input-container">
<label for="fm-forms-address-city">Cidade</label>
<input type="" id="fm-forms-address-city" name="fm-forms-address-city">
</div>
</div>
<div class="fm-input-container">
<label for="fm-forms-address-complement">Complemento</label>
<input type="text" id="fm-forms-address-complement" name="fm-forms-address-complement">
</div>
</div>
<div>
<div class="fm-flex fm-flex-spaced fm-mx-1" style="margin-top: 10px; margin-bottom: 10px;">
<div>
<input type="checkbox" id="fm-forms-terms-of-use" name="fm-forms-terms-of-use" required="">
<label for="fm-forms-terms-of-use">Aceito os <span class="fm-strong-text">Termos de
Uso</span></label>
</div>
<div>
<input type="checkbox" id="fm-forms-newsletter" name="fm-forms-newsletter">
<label for="fm-forms-newsletter">Quero receber e-mails</label>
</div>
</div>
<div>
<button class="fm-button fm-my-2" type="submit">{{buttonText}}</button>
</div>
</div>
</form>
</div>
`;
const css = () => updateFmTemplateCss( /*css*/
`
section.fm-section-container.fm-left-image-and-sign-in-forms {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
`
);