geeparts-js
Version:
Code main page Geeparts
261 lines (227 loc) • 9.32 kB
JavaScript
/*! Geeparts Newsletter Widget v1.4.0 | MIT License | https://github.com/johnsi15/geeparts-js */
(()=>{var f=(p,b,a)=>new Promise((d,n)=>{var g=s=>{try{i(a.next(s))}catch(m){n(m)}},c=s=>{try{i(a.throw(s))}catch(m){n(m)}},i=s=>s.done?d(s.value):Promise.resolve(s.value).then(g,c);i((a=a.apply(p,b)).next())});(function(){"use strict";let p=`* {
margin: 0;
padding: 0;
box-sizing: border-box;
--main-color:
--secondary-color:
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
z-index: 1000;
animation: fadeIn 0.3s ease;
}
.modal-overlay.active {
display: flex;
align-items: center;
justify-content: center;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-newsletter .modal {
background: white;
border-radius: 16px;
padding: 40px;
max-width: 500px;
height: max-content;
width: 100%;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s ease;
}
.modal-newsletter .close-btn {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
font-size: 24px;
color:
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
}
.modal-newsletter .close-btn:hover {
background:
color:
}
.modal-newsletter .modal-content {
text-align: center;
}
.modal-newsletter .modal-title {
font-size: 28px;
font-weight: 700;
color:
margin-bottom: 15px;
line-height: 1.3;
}
.modal-newsletter .modal-description {
font-size: 16px;
color:
line-height: 1.6;
margin-bottom: 30px;
}
.modal-newsletter .form-group {
margin-bottom: 20px;
}
.modal-newsletter .email-input {
width: 100%;
padding: 15px 20px;
font-size: 16px;
border: 2px solid
border-radius: 8px;
outline: none;
transition: border-color 0.3s;
}
.modal-newsletter .email-input:focus {
border-color: var(--main-color);
}
.modal-newsletter .submit-btn {
width: 100%;
padding: 15px;
font-size: 16px;
font-weight: 600;
background: linear-gradient(135deg, var(--main-color) 0%, var(--secondary-color) 100%);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
transform: scale(1);
}
.modal-newsletter .submit-btn:hover:not(:disabled) {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.modal-newsletter .submit-btn:active {
transform: scale(0.95);
}
.modal-newsletter .submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.modal-newsletter .submit-btn:disabled:hover {
transform: scale(1);
}
.modal-newsletter .success-content {
display: none;
}
.modal-newsletter .success-content.active {
display: block;
}
.modal-newsletter .coupon-box {
background:
border: 2px dashed var(--main-color);
border-radius: 8px;
padding: 20px;
margin-top: 25px;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-newsletter .coupon-code {
font-size: 24px;
font-weight: 700;
color: var(--secondary-color);
letter-spacing: 2px;
}
.modal-newsletter .copy-btn {
background: var(--main-color);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
font-size: 18px;
}
.modal-newsletter .copy-btn:hover {
background:
}
.modal-newsletter .copy-btn.copied {
background:
}
.modal-newsletter .error-message {
color:
font-size: 14px;
margin-top: 10px;
display: none;
}
.modal-newsletter .error-message.active {
display: block;
}
.modal-newsletter .loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
`,b=`<div class="modal-overlay modal-newsletter" id="modalOverlay">
<div class="modal">
<button class="close-btn" onclick="closeModal()">×</button>
<!-- Contenido inicial: Formulario -->
<div class="modal-content" id="formContent">
<h2 class="modal-title">5% de descuento para la primera compra</h2>
<p class="modal-description">
Suscr\xEDbete a nuestro newsletter y recibe un 5% de descuento en toda la tienda en tu primera compra.
</p>
<form id="newsletterForm">
<div class="form-group">
<input type="email" class="email-input" id="emailInput" placeholder="tu@email.com" required />
</div>
<button type="submit" class="submit-btn" id="submitBtn">5% de descuento</button>
<div class="error-message" id="errorMessage"></div>
</form>
</div>
<!-- Contenido de \xE9xito -->
<div class="success-content" id="successContent">
<h2 class="modal-title">\xA1Gracias por unirte!</h2>
<p class="modal-description">
Ya puedes usar el cup\xF3n de 5% en tu primera compra. Esperamos que lo disfrutes.
</p>
<div class="coupon-box">
<span class="coupon-code" id="couponCode">WELCOME15</span>
<button class="copy-btn" onclick="copyCoupon()" id="copyBtn">\u{1F4CB}</button>
</div>
</div>`;if(!document.getElementById("geeparts-newsletter-styles")){let d=document.createElement("style");d.id="geeparts-newsletter-styles",d.textContent=p,document.head.appendChild(d)}function a(){document.getElementById("modalOverlay")||document.body.insertAdjacentHTML("beforeend",b);let n=Object.assign({},{autoOpen:!0,autoOpenDelay:3e3,couponCode:"WELCOME5",listId:12},window.geepartsNewsletterConfig||{}),g={listId:n.listId,apiUrl:"https://api.brevo.com/v3/contacts"};function c(){document.getElementById("modalOverlay").classList.add("active")}function i(){document.getElementById("modalOverlay").classList.remove("active"),setTimeout(()=>{s()},300)}function s(){document.getElementById("formContent").style.display="block",document.getElementById("successContent").classList.remove("active"),document.getElementById("newsletterForm").reset(),document.getElementById("errorMessage").classList.remove("active"),document.getElementById("submitBtn").disabled=!1}document.getElementById("modalOverlay").addEventListener("click",function(e){e.target===this&&i()});function m(){let e=document.getElementById("couponCode").textContent,t=document.getElementById("copyBtn");navigator.clipboard.writeText(e).then(()=>{t.textContent="\u2713",t.classList.add("copied"),setTimeout(()=>{t.textContent="\u{1F4CB}",t.classList.remove("copied")},2e3)})}function v(e){return f(this,null,function*(){let t="https://shy-fire-438e.jandreys15.workers.dev";try{let o=yield fetch(t,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email:e,listId:g.listId})}),r=yield o.json();if(!o.ok)throw new Error(r.error||"Error al suscribir");return r}catch(o){throw console.error("Error al suscribir:",o),o}})}document.getElementById("newsletterForm").addEventListener("submit",function(e){return f(this,null,function*(){e.preventDefault();let t=document.getElementById("emailInput"),o=document.getElementById("submitBtn"),r=t.value.trim();if(!r||!h(r)){y("Por favor, ingresa un email v\xE1lido");return}o.disabled=!0,o.innerHTML='<span class="loading"></span>';try{let l=yield v(r),{message:u,success:C,duplicate:x}=l;if(!C)throw new Error(l.message||"Error al suscribir");if(x){w({message:u,duplicate:x}),localStorage.setItem("newsletterSubmitted","true");return}w({message:u}),localStorage.setItem("newsletterSubmitted","true")}catch(l){console.error("Error:",l),y("Hubo un error al procesar tu suscripci\xF3n. Por favor, intenta de nuevo."),o.disabled=!1,o.textContent="5% de descuento"}})});function h(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)}function y(e){let t=document.getElementById("errorMessage");t.textContent=e,t.classList.add("active"),setTimeout(()=>{t.classList.remove("active")},3e3)}function w({message:e,duplicate:t=!1}){let o=document.getElementById("couponCode"),r=document.querySelector(".coupon-box"),l=document.querySelector("#successContent .modal-title");if(t){let u=document.querySelector("#successContent .modal-title");u&&(u.textContent=e),r&&(r.style.display="none")}else o&&n.couponCode&&(o.textContent=n.couponCode),e&&l&&(l.textContent=e);document.getElementById("formContent").style.display="none",document.getElementById("successContent").classList.add("active")}n.autoOpen&&!localStorage.getItem("newsletterSubmitted")&&setTimeout(()=>{c()},n.autoOpenDelay),window.openModal=c,window.closeModal=i,window.copyCoupon=m,window.geepartsNewsletter={config:n,openModal:c,closeModal:i}}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a):a()})();})();
//# sourceMappingURL=geeparts-newsletter.min.js.map