@lyonfinancial/loan-calculator
Version:
Loads a loan calculator into a specific div.
237 lines (228 loc) • 17.3 kB
JavaScript
"use strict";
/** Loads a loan calculator component. */
class LoanCalculator {
/** Creates a new instance of the loader. */
constructor(selector) {
this.componentUrl = "https://unpkg.com/@nvisionative/nvq-loan-calculator@latest/dist/nvq-loan-calculator/nvq-loan-calculator.esm.js";
this.showHeading = true;
this.selector = selector;
}
// Loads the calculator component and injects it into the DOM.
load(lid = "", urlPath = "", showHeading = true, version = "") {
this.showHeading = showHeading;
if (version.length > 0) {
this.componentUrl = `https://unpkg.com/@nvisionative/nvq-loan-calculator@${version}/dist/nvq-loan-calculator/nvq-loan-calculator.esm.js`;
}
var head = document.querySelector("head");
var script = document.createElement("script");
script.src = this.componentUrl;
script.type = "module";
script.onload = () => {
var _a;
var element = document.createElement("nvq-loan-calculator");
// Prepare the heading slot.
var heading = this.getHeading();
element.appendChild(heading);
// Prepare the examples slot.
var examples = this.getExamples();
element.appendChild(examples);
// Prepare monthly payment header slot.
var monthlyPaymentHeader = this.getMonthlyPaymentHeader();
element.appendChild(monthlyPaymentHeader);
// Prepare monthly payment disclaimer slot.
var monthlyPaymentDisclaimer = this.getMonthlyPaymentDisclaimer();
element.appendChild(monthlyPaymentDisclaimer);
// Prepare monthly payment footer slot.
var monthlyPaymentFooter = this.getMonthlyPaymentFooter(lid, urlPath);
element.appendChild(monthlyPaymentFooter);
// Prepare the disclaimer slot.
var disclaimer = this.getDisclaimer();
element.appendChild(disclaimer);
this.injectStyles();
(_a = document.querySelector(this.selector)) === null || _a === void 0 ? void 0 : _a.appendChild(element);
};
head === null || head === void 0 ? void 0 : head.appendChild(script);
}
getHeading() {
var headingSlot = document.createElement("div");
headingSlot.slot = "heading";
var heading = document.createElement("div");
heading.className = "heading";
if (this.showHeading) {
var paragraph1 = document.createElement("p");
var strong = document.createElement("strong");
strong.innerText = "Making your backyard dreams come true is more affordable than you think!";
paragraph1.appendChild(strong);
heading.appendChild(paragraph1);
var paragraph2 = document.createElement("p");
paragraph2.innerText = "Use our Monthly Payment Calculator to find your estimated monthly payment. Then contact one of our experienced and helpful loan representatives to discuss which program is best for you.";
heading.appendChild(paragraph2);
}
headingSlot.appendChild(heading);
return headingSlot;
}
getExamples() {
var examples = document.createElement("div");
examples.slot = "examples";
examples.className = "loan-examples";
examples.innerHTML = `
<div class="example">
<h5>Example A:</h5>
<ul>
<li><span>Total Amount</span> <span>$50,000</span></li>
<li><span>Down Payment:</span> <span>$0</span></li>
<li><span>Interest Rate:</span> <span>7.89%<sup>¶</sup></span></li>
<li><span>Amortization Period:</span> <span>15 Years</span></li>
<li><span>Monthly Payment<sup>*</sup>:</span> <span>$474.66</span></li>
</ul>
</div>
<div class="example">
<h5>Example B:</h5>
<ul>
<li><span>Total Amount</span> <span>$80,000</span></li>
<li><span>Down Payment:</span> <span>$0</span></li>
<li><span>Interest Rate:</span> <span>7.89%<sup>¶</sup></span></li>
<li><span>Amortization Period:</span> <span>20 Years</span></li>
<li><span>Monthly Payment<sup>*</sup>:</span> <span>$663.69</span></li>
</ul>
</div>
<div class="example">
<h5>Example C:</h5>
<ul>
<li><span>Total Amount</span> <span>$100,000</span></li>
<li><span>Down Payment:</span> <span>$0</span></li>
<li><span>Interest Rate:</span> <span>8.99%<sup>‡</sup></span></li>
<li><span>Amortization Period:</span> <span>30 Years</span></li>
<li><span>Monthly Payment<sup>*</sup>:</span> <span>$803.90</span></li>
</ul>
</div>
`;
return examples;
}
getMonthlyPaymentHeader() {
var monthlyPaymentHeader = document.createElement("div");
monthlyPaymentHeader.slot = "monthly-payment-header";
monthlyPaymentHeader.innerHTML = `
Monthly Payment<sup>*</sup>
`;
return monthlyPaymentHeader;
}
getMonthlyPaymentDisclaimer() {
var monthlyPaymentDisclaimer = document.createElement("div");
monthlyPaymentDisclaimer.slot = "monthly-payment-disclaimer";
monthlyPaymentDisclaimer.innerHTML = `
<sup>*</sup>estimated payment
`;
return monthlyPaymentDisclaimer;
}
getMonthlyPaymentFooter(lid, urlPath) {
var monthlyPaymentFooter = document.createElement("div");
monthlyPaymentFooter.slot = "monthly-payment-footer";
monthlyPaymentFooter.className = "monthly-payment-footer";
const url = this.getUrl(lid, urlPath);
monthlyPaymentFooter.innerHTML = `
${`<a href="${url}" rel="noopener noreferrer" target="_blank">`}
<img src="https://loan-calculator-widget.s3.us-west-004.backblazeb2.com/lyon-financial-logo-stacked-white-125.png" alt="Lyon Financial logo" style="padding: 1em 0;">
${`</a>`}
${`<a href="${url}" class="apply-today" rel="noopener noreferrer" target="_blank">`}
Apply Today
${`</a>`}
`;
return monthlyPaymentFooter;
}
getUrl(lid, urlPath) {
let url = new URL('https://www.lyonfinancial.net/');
if (lid.length === 0 && urlPath.length === 0) {
url.pathname += 'apply';
}
if (lid.length > 0) {
url.searchParams.append('lid', lid);
url.pathname += urlPath.length > 0 ? `dealer/${urlPath}` : 'apply';
}
if (lid.length === 0 && urlPath.length > 0) {
url.pathname += `dealer/${urlPath}`;
}
return url;
}
getDisclaimer() {
var disclaimer = document.createElement("div");
disclaimer.slot = "footnote";
disclaimer.className = "loan-footnote";
disclaimer.innerHTML = `
<p>
* Your APR and monthly payment may differ based on loan purpose, amount, term, and your credit profile. Subject to credit approval. Conditions and limitations apply. Advertised rates and terms are subject to change without notice. Exact interest rate determined by credit profile.<br /><br />
¶ Available on approved credit, not all will qualify. Minimum FICO of 800 required for 7.89% for a 15-year and 20 year loan term with a maximum loan amount of $150,000. Conditions and limitations apply, including state restrictions. Advertised terms are subject to change without notice. Loan terms may differ based on loan purpose and credit profile. Loans for non-pool/standalone home improvement projects may incur different rates and terms based on loan purpose. Payment example: Monthly payments for a $50,000 loan at 7.89% APR with a term of 15 years would result in 180 monthly payments of $474.66.<br /><br />
‡ Available on approved credit, not all will qualify. Minimum FICO of 800 required for 8.99% APR with a maximum loan term of 30 years and a maximum loan amount of $150,000. Term of 30 years requires a minimum FICO of 700. Conditions and limitations apply, including state restrictions. Advertised terms are subject to change without notice. Loan terms may differ based on loan purpose and credit profile. Loans for non-pool/standalone home improvement projects may incur different rates and terms based on loan purpose. Payment example: Monthly payments for a $100,000 loan at 8.99% APR with a term of 30 years would result in 360 monthly payments of $803.90.
</p>
`;
return disclaimer;
}
injectStyles() {
var style = document.createElement("style");
style.textContent = `
${this.selector} .heading{
text-align: start;
}
${this.selector} .loan-examples h3{
font-size: 1.75em;
margin: 0.5em 0;
font-weight: 500;
}
${this.selector} .loan-examples h5{
font-size: 1.25em;
text-align: left;
margin: 1.25em 0 0.5em;
font-weight: 700;
color: #ffffff;
}
${this.selector} .loan-examples ul{
list-style-type: none;
margin: 0;
padding: 0;
}
${this.selector} .loan-examples ul li{
display: flex;
justify-content: space-between;
align-items: baseline;
}
${this.selector} .loan-examples ul li:last-child{
font-weight: bold;
}
${this.selector} .loan-examples ul li span{
text-wrap: nowrap;
color: #ffffff;
}
${this.selector} .loan-examples ul li span:first-child{
padding-right: 0.5em;
}
${this.selector} .monthly-payment-footer{
display: flex;
flex-direction: column;
}
${this.selector} .monthly-payment-footer a.apply-today{
background-color: #3fbbd8;
border: none;
color: #ffffff;
display: inline-block;
font-size: 1em;
font-weight: bold;
margin-top: 2em;
padding: 1em 2em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
}
${this.selector} .loan-footnote p {
font-size: 10px;
line-height: 12px;
margin-top: 2rem;
border-top:1px solid #e9e9e9;
padding-top:1rem;
text-align: start;
}
`;
document.head.appendChild(style);
}
}
;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vc3JjL2xvYWRlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEseUNBQXlDO0FBQ3pDLE1BQU0sY0FBYztJQUtoQiw0Q0FBNEM7SUFDNUMsWUFBWSxRQUFnQjtRQUxwQixpQkFBWSxHQUFXLGdIQUFnSCxDQUFDO1FBRXhJLGdCQUFXLEdBQVksSUFBSSxDQUFDO1FBSWhDLElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO0lBQzdCLENBQUM7SUFFRCw4REFBOEQ7SUFDOUQsSUFBSSxDQUFDLE1BQWMsRUFBRSxFQUFFLFVBQWtCLEVBQUUsRUFBRSxjQUF1QixJQUFJLEVBQUUsVUFBa0IsRUFBRTtRQUMxRixJQUFJLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQztRQUMvQixJQUFJLE9BQU8sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFLENBQUM7WUFDckIsSUFBSSxDQUFDLFlBQVksR0FBRyx1REFBdUQsT0FBTyxzREFBc0QsQ0FBQztRQUM3SSxDQUFDO1FBQ0QsSUFBSSxJQUFJLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMxQyxJQUFJLE1BQU0sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzlDLE1BQU0sQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQztRQUMvQixNQUFNLENBQUMsSUFBSSxHQUFHLFFBQVEsQ0FBQztRQUN2QixNQUFNLENBQUMsTUFBTSxHQUFHLEdBQUcsRUFBRTs7WUFDakIsSUFBSSxPQUFPLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO1lBRTVELDRCQUE0QjtZQUM1QixJQUFJLE9BQU8sR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDaEMsT0FBTyxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUU3Qiw2QkFBNkI7WUFDN0Is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