// partpay-widget-0.1.1.js
(function(){
"use strict";
var $;
var calculator = function($script) {
var html = '
';
var css = '/* Widget */ @font-face { font-family: \'Montserrat\'; font-style: normal; font-weight: 400; src: local(\'Montserrat Regular\'), local(\'Montserrat-Regular\'), url(https://fonts.gstatic.com/s/montserrat/v13/JTUSjIg1_i6t8kCHKm459Wlhzg.ttf) format(\'truetype\'); } @font-face { font-family: \'Montserrat\'; font-style: normal; font-weight: 500; src: local(\'Montserrat Medium\'), local(\'Montserrat-Medium\'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_ZpC3gnD-w.ttf) format(\'truetype\'); } @font-face { font-family: \'Montserrat\'; font-style: normal; font-weight: 700; src: local(\'Montserrat Bold\'), local(\'Montserrat-Bold\'), url(https://fonts.gstatic.com/s/montserrat/v13/JTURjIg1_i6t8kCHKm45_dJE3gnD-w.ttf) format(\'truetype\'); } body.partPayWidgetDialogVisible { overflow: hidden; } .partPayCalculatorWidgetDialogHeadingLogo {padding:10px} #partPayCalculatorWidget1 { margin: 0; padding: 2px; width: 380px; min-height: 80px; background-color: #FFFFFF; /*background-image: url(\'Payflex_Widget_BG.png\');*/ color: #002751;; cursor: pointer; text-transform: none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .partPayCalculatorWidgetDialogHeadingLogo img{ background-color : #c8a6fa;padding:10px;border-radius:100px} #partPayCalculatorWidget1 #freetext { font-weight: bold; color: #002751; } #partPayCalculatorWidget1 #partPayCalculatorWidgetLogo {width: 125px; /*height: 39px;*/ float: right; /*margin-top: 3px;*/ top: -47px; position: relative; background-color: transparent; } #partPayCalculatorWidget1 #partPayCalculatorWidgetText { font-size: 15px; } #partPayCalculatorWidget1 #partPayCalculatorWidgetText #partPayCalculatorWidgetTextFromCopy > span { font-weight: bold; } #partPayCalculatorWidget1 #partPayCalculatorWidgetText #partPayCalculatorWidgetLearn { text-decoration: underline; font-size: 12px; font-style: normal; color: #0086EF; } #partPayCalculatorWidget1 #partPayCalculatorWidgetText #partPayCalculatorWidgetSlogen { font-size: 12px; font-style: normal; } #partPayCalculatorWidgetDialog { box-sizing: border-box; } #partPayCalculatorWidgetDialog *, #partPayCalculatorWidgetDialog *:before, #partPayCalculatorWidgetDialog *:after { box-sizing: inherit; } #partPayCalculatorWidgetDialog { z-index: 999999; font-family: \'Arial\', \'Helvetica\'; font-size: 14px; display: none; color: #002751; position: fixed; bottom: 0; left: 0; right: 0; top: 0; } .partPayCalculatorWidgetDialogOuter { background-color: rgba(0, 0, 0, 0.2); height: 100%; left: 0; position: absolute; text-align: center; top: 0; vertical-align: middle; width: 100%; z-index: 999999; overflow-x: hidden; overflow-y: auto; } .partPayCalculatorWidgetDialogInner { background-color: white; border: solid 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); max-width: 900px; margin: auto; position: relative; font-family: "Montserrat", sans-serif; margin: 30px auto; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .partPayCalculatorWidgetDialogInner #partPayCalculatorWidgetDialogClose { position: absolute; margin-right: 8px; margin-top: 8px; cursor: pointer; max-height: 28px; max-width: 28px; right: 0; top: 0; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHeading { padding: 50px; display: flex; /*border-bottom: dotted 1px #CECFD1;*/ padding-bottom: 24px; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHeading .partPayCalculatorWidgetDialogHeadingLogo { /*width: 300px; height: 64px; max-width: 300px; max-height: 64px; padding-top: 10px; flex: 1;background-color:#c8a6fa;border-radius:100px; */} .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHeading .partPayCalculatorWidgetDialogHeadingLogo img { /*max-width: 300px; max-height: 64px;*/ display: inline-block; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHeading .partPayCalculatorWidgetDialogHeadingTitle { font-size: 32px; text-align: left; flex: 1; margin-left: 2rem; font-style: italic; color: #002751; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHowItWorksTitle { padding: 10px 50px 0 50px; font-size: 28px; padding-top: 20px; text-align: left; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHowItWorksDesc { padding: 10px 50px 0 50px; font-size: 17px; text-align: left; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHowItWorks { display: flex; justify-content: space-between; padding: 30px 50px 0 50px; } @media (max-width: 768px) { #partPayCalculatorWidget1{min-height:100px; } #partPayCalculatorWidgetLogo{float:left !important;top:0 !important;margin-top:8px;padding-bottom:15px;} .partPayCalculatorWidgetDialogHeadingLogo{padding:0} #partPayCalculatorWidgetText {clear:both} #partPayCalculatorWidget1{width:100%} .partPayCalculatorWidgetDialogHeadingTitle{margin-top:40px;} .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHowItWorks { flex-direction: column; } } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHowItWorks .partPayCalculatorWidgetDialogHowItWorksBody { flex: 1; display: block; padding-top: 20px; /*padding-bottom: 20px;*/ } .nuumberingarea{margin:0 0 10px;padding:0;float:left;width:100%;text-align:center}.nuumberingarea strong{margin:0;padding:15px 0;width:100px;float:none;display:inline-block;border:none;border-radius:100%;font-size:50px;font-weight:700;color:#002751;background-color:#c8a6fa}.partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHowItWorks .partPayCalculatorWidgetDialogHowItWorksBody div img { max-width: 120px; max-height: 120px; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHowItWorks .partPayCalculatorWidgetDialogHowItWorksBody p { display: block; font-size: 15px; padding: 5px 15px; color: #002751; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter { /*background-color: #E5E5E6;*/ margin-top: 20px; border-top: solid 2px #002751; padding-bottom: 25px; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter .partPayCalculatorWidgetDialogFooterTitle { width: 100%; font-size: 15px; font-weight: 500; padding: 10px 0 0 15px; text-align: left; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter .partPayCalculatorWidgetDialogFooterBody { display: block; padding-top: 20px; /* padding-left: 50px; padding-right: 50px;*/ } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter .partPayCalculatorWidgetDialogFooterBody > ul { padding: 0; width: 100%; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter .partPayCalculatorWidgetDialogFooterBody > ul > li { display: inline-block; padding: 0 34px 0 30px; margin-left: 3px; margin-bottom: 13px; text-align: left; list-style: none; background-repeat: no-repeat; background-image: url(https://widgets.payflex.co.za/assets/tick.png); background-position: left center; background-size : 25px } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter .partPayCalculatorWidgetDialogFooterLinks { padding-top: 10px; font-size: 15px; font-style: italic; color: #002751; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter .partPayCalculatorWidgetDialogFooterLinks a { text-decoration: underline; color: #002751; } @media only screen and (max-width: 915px) { .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHeading { display: block; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHeading .partPayCalculatorWidgetDialogHeadingLogo { padding-top: 0; width: 100%; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHeading .partPayCalculatorWidgetDialogHeadingLogo img { max-width: 100%; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogHeading .partPayCalculatorWidgetDialogHeadingTitle { margin-left: 0; font-size: 24px; } } @media only screen and (max-width: 710px) { .partPayCalculatorWidgetDialogInner { max-width: 350px; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter { display: block; width: 100%; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter .partPayCalculatorWidgetDialogFooterBody > ul { width: 100%; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter .partPayCalculatorWidgetDialogFooterBody > ul > li { display: block; } .partPayCalculatorWidgetDialogInner .partPayCalculatorWidgetDialogFooter .partPayCalculatorWidgetDialogFooterLinks { padding-top: 10px; font-size: 10px; } } /* iPhone 5 in portrait & landscape: */ /* iPhone 5 in portrait: */ /* iPhone 5 in landscape: */ /* Explicit */';
var $widget = $(html);
$script.after($widget);
$widget.prepend('')
$widget.on('click', function(ev) {
ev.preventDefault();
var $body = $('body');
var $dialog = $('#partPayCalculatorWidgetDialog').show();
$body.addClass("partPayWidgetDialogVisible");
var $button = $dialog
.find("#partPayCalculatorWidgetDialogClose")
.on('click', function(e) {
e.preventDefault();
$dialog.hide();
$body.removeClass("partPayWidgetDialogVisible");
// Put back on the widget.
$('#partPayCalculatorWidgetDialog').append($dialog);
});
// Move to the body element.
$body.append($dialog);
$body.animate({ scrollTop: 0 }, 'fast');
});
// Disable calculator if disabled state set.
var disabled = + getParam($script.attr('src'), 'disabled');
// Set the min and max range - defined by customer - not looked up
var rangeMin = + getParam($script.attr('src'), 'min'),
rangeMax = + getParam($script.attr('src'), 'max');
if(!(rangeMin && rangeMax) || rangeMin < 10 || rangeMax < 25 || rangeMax > 2000001 ) {
rangeMin = 50;
rangeMax = 20000;
} else if( rangeMax < rangeMin ) {
var x = rangeMax;
rangeMax = rangeMin;
rangeMin = x;
}
var amount = parseAmount(getParam($script.attr('src'), 'amount'));
var installmentAmount = getInstallmentAmount(amount);
console.log(amount+'amount');
console.log(rangeMin+'rangeMin');
console.log(rangeMax+'rangeMax');
var html = '';
if(amount > 10000){
// if heavy basket
html = '';
$('.paypercentage').html('');
$('#heavybasketnote').html('* Higher first payment may apply on large purchases')
$('.heavyBasketText').html("Payflex lets you get what you need now, but pay for it over four interest-free instalments. "+
"You pay a larger amount upfront with the remainder spread across three payments over the following six weeks.");
}
else if (disabled == 1) {
html = 'of 25%';
} else if(amount < rangeMin) {
html = 'of 25% on orders over
R' + rangeMin;
} else if (amount > rangeMax) {
html = 'of 25% on orders R' + rangeMin + ' - R' + rangeMax;
} else {
html = 'of
R' + installmentAmount + '';
}
$('#partPayCalculatorWidgetTextFromCopy').html(html);
}
function parseAmount(value) {
if(!value) {
return 0;
}
value = value.replace('R', '');
var amount = parseFloat(value).toFixed(2);
if(isNaN(amount) || amount < 0) {
return 0;
}
return amount;
}
function getInstallmentAmount(value) {
value = + value;
if(isNaN(value) || value < 0 ) {
return 0;
}
var result = Math.floor(value * 100 / 4) / 100;
return endsWithZeroCents(result) ? result.toFixed(0) : result.toFixed(2);
}
function endsWithZeroCents(value) {
var fixed = value.toFixed(2);
var endsWith = fixed.lastIndexOf(".00") != -1;
return endsWith;
}
function getParam(url, name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(url);
return results && results.length > 1 ? results[1] : '';
}
function loadScript(url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
if (script.readyState)
{
// IE.
script.onreadystatechange = function() {
if (script.readyState == 'loaded' || script.readyState == 'complete')
{
script.onreadystatechange = null;
callback();
}
};
} else {
// Not IE.
script.onload = function() {
callback();
};
}
script.src = url;
setTimeout(function(){ document.getElementsByTagName('head')[0].appendChild(script) }, 500); }
loadScript('https://partpayassets.blob.core.windows.net/widgets/ppQuery-3.2.1.js', function() {
$ = ppQuery;
var $script = $("script[src*='partpay-widget-']");
var type = getParam($script.attr('src'), 'type') || 'calculator';
var fn = eval(type);
fn($script);
$script.remove();
});
})();
