golden hour

/home/godaofbq/beyondhyperbarics.com/wp-content/plugins/sezzle-woocommerce-payment/js

File/Folder	Size	Actions
installment-widget.js	40.74 KB

Edit: installment-widget.js

// handles translations
            var translation = {
                'en': {
                    'today': 'today',
                    'days': 'days',
                    'week': 'week',
                    'month': 'month',
                    'installmentWidget': {
                        14: `4 interest-free payments over 6 weeks`,
                        30: `4 payments over 3 months. No Fee!`
                    },
                    'modalTitle': 'How it works',
                    'firstParagraph': {
                        14: `Split your entire order into 4 interest-free payments over 6 weeks. No fees if you pay on time with zero impact to your credit.`,
                        30: `Split your entire order into 4 payments over 3 months. No Fee!`
                    },
                    'secondParagraph': 'After clicking "Complete Order" on this site, you will be redirected to Sezzle to complete your purchase securely.',
                    'infoIcon': 'Learn More about Sezzle'
                },
                'fr': {
                    'today': 'aujourd\'hui',
                    'days': 'jours',
                    'week': 'semaine',
                    'month': 'mois',
                    'installmentWidget': {
                        14: `4 paiement sans inte&#769;re&#770;ts r&#233;partis sur 6 semaines`,
                        30: `4 paiement r&#233;partis sur 3 mois. Pas de frais!`,
                    },
                    'modalTitle': 'Comment &#231;a marche',
                    'firstParagraph': {
                        14: `R&#233;partissez le montant de votre commande en 4 versements sans int&#233;r&#234;ts &#233;tal&#233;s sur 6 semaines. Pas de frais si vous payez &#224; temps, pas d\'impact sur votre cote de cr&#233;dit.`,
                        30: `R&#233;partissez le montant de votre commande en 4 versements sur 3 mois. Pas de frais!`
                    },
                    'secondParagraph': 'Apr&#232;s avoir cliqu&#233; sur &#171;&nbsp;Terminer la commande&nbsp;&#187; sur ce site, vous serez redirig&#233;(e) vers Sezzle pour finaliser votre achat en toute s&#233;curit&#233;.',
                    'infoIcon': 'En savoir plus sur Sezzle'
                },
                'de': {
                    'today': 'heute',
                    'days': 'Tage',
                    'week': 'Woche',
                    'month': 'Monat',
                    'installmentWidget': {
                        14: `4 zinslose Raten &#252;ber 6 Wochen verteilt`,
                        30: `4 Raten &#252;ber 3 Monate verteilt - Kostenlos!`,
                    },
                    'modalTitle': 'So funktioniert\'s',
                    'firstParagraph': {
                        14: `Dein Gesamtbestellwert wird auf 4 Raten &#252;ber 6 Wochen verteilt. Diese sind komplett zinsfrei, sofern du p&#252;nktlich bezahlst. Kein Einfluss auf deine Kreditw&#252;rdigkeit.`,
                        30: `Dein Gesamtbestellwert wird auf 4 Raten &#252;ber 3 Monate verteilt. Diese sind komplett kostenlos.`
                    },
                    'secondParagraph': 'Sobald du auf den Button &#8222;Bestellung abschlie&#223;en&#8220; klickst, wirst du zu Sezzle umgeleitet ' + (interval === 30 ? 'um' : 'und kannst') + ' deinen Einkauf sicher ' + (interval === 30 ? 'abzuschlie&#223;en.' : 'abschlie&#223;en.'),
                    'infoIcon': 'Erfahren Sie mehr &#252;ber Sezzle'
                },
                'es': {
                    'today': 'hoy',
                    'days': 'dias',
                    'week': 'semana',
                    'month': 'mes',
                    'installmentWidget': {
                        14: `4 pagos sin intereses durante 6 semanas`,
                        30: `4 pagos durante 3 mes. &#161;Sin cargo!`
                    },
                    'modalTitle': 'C&#243;mo funciona',
                    'firstParagraph': {
                        14: `Divida su pedido completo en 4 pagos sin intereses durante 6 semanas. Sin cargos si paga a tiempo sin impacto en su cr&#233;dito.`,
                        30: `Divida su pedido completo en 4 pagos durante 3 meses. &#161;Sin cargo!`
                    },
                    'secondParagraph': 'Despu&#233;s de hacer clic en "Completar pedido" en este sitio, ser&#225; redirigido a Sezzle para completar su compra de forma segura.',
                    'infoIcon': 'M&#225;s informaci&#243;n sobre Sezzle'
                }
            };

}
		.sezzle-modal-payment-schedule span {
			color: #737373;
			font-size: 9px;
			font-family: Comfortaa !important;
			text-align: center;
			width: 25%;
		}
		@media only screen and (min-width: 520px){
			.sezzle-checkout-modal {
				// transform: scale(1.5) translate(-50%, -50%);
				// top: 55%;
				// left: 55%;
				width: 430px;
				max-width: 80%;
				max-height: 80%;
			}
			.sezzle-checkout-modal .close-sezzle-modal {
				font-size: 18px;
			}
			.sezzle-modal-logo {
				height: 30px;
			}
			.sezzle-modal-title {
				font-size: 30px;
			}
			.sezzle-modal-overview {
				font-size: 14px;
				line-height: 20px;
			}
			.sezzle-modal-overview p {
				margin: 10px 50px 0px 50px;
			}
			.sezzle-modal-installment-wrapper {
				margin: 0px 15px;
			}
			.sezzle-modal-payment-pie {
				height: 90px;
				margin: 70px 0px -55px 0px;
			}
			.sezzle-modal-payment-percent span {
				font-size: 18px;
			}
			.sezzle-modal-payment-schedule span {
				font-size: 12px;
			}
		}
		`;
            installmentBox.appendChild(sezzleStyle);

// creates the wrapper
            let installmentContainer = document.createElement('div');
            installmentContainer.className = 'sezzle-payment-schedule-container';
            installmentBox.appendChild(installmentContainer);

// creates the intro verbiage
            let installmentWidget = document.createElement('div');
            installmentWidget.className = 'sezzle-installment-widget';
            installmentContainer.appendChild(installmentWidget);
            installmentWidget.innerHTML = translation[language].installmentWidget[interval];

// creates the pie graphic
            let sezzlePie = document.createElement('div');
            sezzlePie.className = 'sezzle-payment-pie';
            installmentContainer.appendChild(sezzlePie);

// creates container to receive the installment prices
            let installmentPriceContainer = document.createElement('div');
            installmentPriceContainer.className = 'sezzle-payment-schedule-prices';
            installmentContainer.appendChild(installmentPriceContainer);

// checks if character is numeric
            function isNumeric(n) {
                return !isNaN(parseFloat(n)) && isFinite(n);
            }

// checks if price is comma (fr) format or period (en)
            function commaDelimited(priceText) {
                let priceOnly = '';
                for (let i = 0; i < priceText.length; i++) {
                    if (isNumeric(priceText[i]) || priceText[i] === '.' || priceText[i] === ',') {
                        priceOnly += priceText[i];
                    }
                }
                let isComma = false;
                if (priceOnly.indexOf(',') > -1 && priceOnly.indexOf('.') > -1) {
                    isComma = priceOnly.indexOf(',') > priceOnly.indexOf('.');
                } else if (priceOnly.indexOf(',') > -1) {
                    isComma = priceOnly[priceOnly.length - 3] === ',';
                } else if (priceOnly.indexOf('.') > -1) {
                    isComma = priceOnly[priceOnly.length - 3] !== '.';
                } else {
                    isComma = false;
                }
                return isComma;
            }

// parses the checkout total text to numerical digits only
            function parsePriceString(price, includeComma) {
                let formattedPrice = '';
                for (let i = 0; i < price.length; i++) {
                    if (isNumeric(price[i]) || (!includeComma && price[i] === '.') || (includeComma && price[i] === ',')) {
                        // If current is a . and previous is a character, it can be something like Rs, ignore it
                        if (i > 0 && price[i] === '.' && /^[a-zA-Z()]+$/.test(price[i - 1])) continue;
                        formattedPrice += price[i];
                    }
                }
                if (includeComma) {
                    formattedPrice.replace(',', '.');
                }
                return parseFloat(formattedPrice);
            }

// creates the installment price elements
            function createInstallmentPrice(installmentPrice, includeComma, currency) {
                var installmentElement = document.createElement('span');
                installmentElement.className = 'sezzle-installment-amount';
                installmentElement.innerText = currency + (includeComma ? installmentPrice.replace('.', ',') : installmentPrice);
                document.querySelector('.sezzle-payment-schedule-prices').appendChild(installmentElement);
            }

// calculates installment price from total price element content
            let totalPriceText = checkoutTotal.innerText;
            let currencySymbol = getCurrencySymbol(totalPriceText);
            let includeComma = commaDelimited(totalPriceText);
            let price = parsePriceString(totalPriceText, includeComma);
            let installmentAmount = (price / 4).toFixed(2);
            for (let i = 0; i < 3; i++) {
                createInstallmentPrice(installmentAmount, includeComma, currencySymbol);
            }
            // creates final installment as installment price + remainder if not divisible by 4
            let finalInstallmentAmount = (price - installmentAmount * 3).toFixed(2);
            createInstallmentPrice(finalInstallmentAmount, includeComma, currencySymbol);

// creates container to receive the installment dates
            let installmentPlanContainer = document.createElement('div');
            installmentPlanContainer.className = 'sezzle-payment-schedule-frequency';
            installmentContainer.appendChild(installmentPlanContainer);

// creates the installment date elements
            function createPaymentPlan(date) {
                var dateElement = document.createElement('span');
                dateElement.className = 'sezzle-payment-date';
                dateElement.innerText = date;
                document.querySelector('.sezzle-payment-schedule-frequency').appendChild(dateElement);
            }

// parses today's date to calculate each installment date
            // TODO: french date translation
            let todaysDate = new Date();
            createPaymentPlan(translation[language].today);
            for (let i = 0; i < 3; i++) {
                var installmentDate = new Date(todaysDate.setDate(todaysDate.getDate() + interval)).toLocaleDateString(language, {
                    month: 'short',
                    day: 'numeric'
                });
                createPaymentPlan(installmentDate);
            }

// create the modal container
            let modalOverlay = document.createElement('div');
            modalOverlay.className = 'sezzle-modal-overlay close-sezzle-modal';
            modalOverlay.style.display = 'none';
            document.body.appendChild(modalOverlay);

// creates the modal content wrapper
            let modalContent = document.createElement('div');
            modalContent.className = 'sezzle-checkout-modal';
            modalOverlay.appendChild(modalContent);

// creates the close modal button
            let closeModal = document.createElement('button');
            closeModal.className = 'close-sezzle-modal';
            closeModal.role = 'button';
            closeModal.type = 'button';
            closeModal.title = 'Close Modal';
            closeModal.innerText = 'X';
            modalContent.appendChild(closeModal);

// creates the Sezzle logo
            let sezzleLogo = document.createElement('div');
            sezzleLogo.className = 'sezzle-modal-logo';
            sezzleLogo.title = 'Sezzle Logo';
            modalContent.appendChild(sezzleLogo);

// creates the modal title
            let modalTitle = document.createElement('h4');
            modalTitle.className = 'sezzle-modal-title';
            modalContent.appendChild(modalTitle);

// creates the description container
            let overview = document.createElement('div');
            overview.className = 'sezzle-modal-overview';
            modalContent.appendChild(overview);

// creates the first overview paragraph
            let firstParagraph = document.createElement('p');
            overview.appendChild(firstParagraph);
            firstParagraph.innerHTML = translation[language].firstParagraph[interval];

// creates the second overview paragraph
            let secondParagraph = document.createElement('p');
            overview.appendChild(secondParagraph);

// creates the modal content wrapper
            let installmentWrapper = document.createElement('div');
            installmentWrapper.className = 'sezzle-modal-installment-wrapper';
            modalContent.appendChild(installmentWrapper);

// creates the modal pie graphic
            let modalPie = document.createElement('div');
            modalPie.className = 'sezzle-modal-payment-pie';
            installmentWrapper.appendChild(modalPie);

// creates the installment schedule container
            let percentages = document.createElement('div');
            percentages.className = 'sezzle-modal-payment-percent';
            installmentWrapper.appendChild(percentages);

// creates each percentage
            for (let i = 0; i < 4; i++) {
                let percent = document.createElement('span');
                percent.innerText = '25%';
                percentages.appendChild(percent);
            }

// creates the installment schedule container
            let sampleSchedule = document.createElement('div');
            sampleSchedule.className = 'sezzle-modal-payment-schedule';
            installmentWrapper.appendChild(sampleSchedule);

// creates each installment
            for (let i = 0; i < 4; i++) {
                var payment = document.createElement('span');
                if (i === 0) {
                    payment.innerHTML = translation[language].today;
                } else if (interval === 30) {
                    payment.innerHTML = (i * 30) + " " + translation[language].days;
                } else {
                    payment.innerHTML = translation[language].week + " " + (i * 2);
                }
                sampleSchedule.appendChild(payment);
            }

// creates the info icon to open the modal
            let infoIcon = document.createElement('button');
            infoIcon.className = 'sezzle-installment-info-icon';
            infoIcon.role = 'button';
            infoIcon.type = 'button';
            infoIcon.title = language === 'fr' ? 'En savoir plus sur Sezzle' : 'Learn More about Sezzle';
            infoIcon.innerHTML = '&#9432;';
            installmentWidget.appendChild(infoIcon);

// watches info icon for click event, opens modal
            function openSezzleModal() {
                document.querySelector('.sezzle-modal-overlay').style.display = "block";
                document.body.classList.add('sezzle-modal-open');
            }

infoIcon.addEventListener('click', openSezzleModal);

// watches overlay and modal X for click event, closes modal
            function closeSezzleModal() {
                document.querySelector('.sezzle-modal-overlay').style.display = "none";
                document.body.classList.remove('sezzle-modal-open')
            }

let sezzleModalClose = document.getElementsByClassName('close-sezzle-modal');
            if (sezzleModalClose.length) {
                for (let i = 0; i < sezzleModalClose.length; i++) {
                    sezzleModalClose[i].addEventListener('click', closeSezzleModal);
                }
            }
        }
    }, 250)
})