Subversion Repositories web.creative

<style>
.divido-calculator {
  padding:10px 20px 20px 20px;
  text-shadow:none;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px;
  -ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px;
  -o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0, rgba(0, 0, 0, 0.05) 0 0 0 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #555;
  border-color: #d9d7ce #c8c6c1 #B0AEA6;
  margin:20px;
}

#divido-checkout {
  margin:0px;
}

.divido-calculator h1 {
    color: white;
    font-size: 24px;
}

@media screen and (min-width: 550px) {
    .divido-calculator h1 {
        font-size: 33px;
    }
}

.divido-calculator dl {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0
}

.divido-calculator dt,.divido-calculator dd {
  float: left;
  padding: 2px 0px;
  margin: 0
}


.divido-calculator > dl > dt, .divido-calculator > dl > dd {
    min-width: 150px;
}

.divido-calculator > dl > dt, .divido-calculator > dl > dd {
    width: 100%;
}

.divido-calculator > dl > dt {
    margin-bottom: 20px;
}

@media screen and (min-width: 960px) {
    .divido-calculator > dl > dt, .divido-calculator > dl > dd {
        width: 50%;
    }

    .divido-calculator > dl > dt {
        margin-bottom: auto;
    }
}

.divido-calculator div.divido-info dl dt, .divido-calculator div.divido-info dl dd {
    width: 100%;
}
.divido-calculator div.divido-info dl dd {
    padding-left: 5px;
}
@media screen and (min-width: 350px) {
    .divido-calculator div.divido-info dl dt {
        width: 70%;
    }
    .divido-calculator div.divido-info dl dd {
        width: 30%;
    }
}
@media screen and (min-width: 450px) {
    .divido-calculator div.divido-info dl dt, .divido-calculator div.divido-info dl dd {
        width: 50%;
    }
}
@media screen and (min-width: 550px) {
    .divido-calculator div.divido-info dl dt {
        width: 40%;
    }
    .divido-calculator div.divido-info dl dd {
        width: 60%;
    }
}

@media screen and (min-width: 1080px) {
  .divido-calculator div.divido-info dl dt {
    width: 30%;
  }
  .divido-calculator div.divido-info dl dd {
    width: 70%;
  }
}

.divido-calculator input[type=range]{
  -webkit-appearance: none;
  display:inline-block;
  width:80%;
  border:0px;
  padding:0px;
}

@media screen and (min-width: 450px) {
    .divido-calculator input[type=range]{
      width:85%;
    }
}

@media screen and (min-width: 550px) {
    .divido-calculator input[type=range]{
      width:90%;
    }
}

.divido-calculator select {
  text-transform: none;
  width: 100%;
}

@media screen and (min-width: 960px) {
    .divido-calculator select {
        width: 80%;
    }
}

.divido-calculator div.description {
  font-size:13px;
  margin-top:15px;
  margin-bottom:20px;
}

.divido-calculator .divido-info {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.divido-calculator .divido-deposit span {
  display:inline-block;
  margin-left:4px;
  line-height:15px;
  vertical-align:top;
}

.divido-calculator input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  border: none;
  border-radius: 3px;
}

.divido-calculator label {
  display:block;
  clear:both;
  font-weight:bold;
}

.divido-calculator input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  margin-top: -4px;
}

.divido-calculator input[type=range]:focus {
  outline: none !important;
  border:0px !important;
}

.divido-calculator .divido-logo {
  width: 140px;
  height: 42px;
  display: block;
  font-size: 20px;
  line-height: 1;
  text-indent: -9999px;
  background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-black-140x42.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.divido-calculator .divido-logo-sm {
  width: 75px;
  height: 23px;
  background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-black-75x23.png');
}

.divido-calculator .divido-info {
  padding:20px;
}


/*      */

.divido-them-light .divido-info {
  background:#f9f9f9;
}

.divido-theme-light a.divido-logo {
  background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-blue-140x42.png');
}
.divido-theme-light a.divido-logo-sm {
  background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-blue-75x23.png');
}

.divido-theme-light {
  background-color:#fff;
  color:#3E4F8B;
}

.divido-theme-light p {
  color:#3E4F8B !important;
}

.divido-theme-light input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

.divido-theme-light input[type=range] {
  background-color:transparent;
}

.divido-theme-light input[type=range]::-webkit-slider-runnable-track {
  background: #999;
}

.divido-theme-light input[type=range]::-webkit-slider-thumb {
  background: #3E4F8B;
}


/*      */

.divido-theme-blue .divido-info {
  background:#f9f9f9;
  color:#000;
}

.divido-theme-blue a.divido-logo {
  background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-white-140x42.png');
}

.divido-theme-blue a.divido-logo-sm {
  background-image:url('//content.divido.com.s3-eu-west-1.amazonaws.com/images/logo-white-75x23.png');
}

.divido-theme-blue {
  background-color:#3E4F8B;
  color:#fff;
}

.divido-theme-blue p {
  color:#fff !important;
}

.divido-theme-blue input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

.divido-theme-blue input[type=range] {
  background-color:transparent;
}

.divido-theme-blue input[type=range]::-webkit-slider-runnable-track {
  background: #999;
}

.divido-theme-blue input[type=range]::-webkit-slider-thumb {
  background: #fff;
}


.divido-btn {
  -webkit-border-radius: 4  ;
    -moz-border-radius: 4;
    border-radius: 4px;
    font-family: Arial;
    color: #ffffff;
    font-size: 11px;
    background: #3E4F8B;
    padding: 3px 7px 5px 7px !important;
    text-decoration: none;
    border:1px solid #296AB3;
}

.divido-btn :hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    text-decoration: none;
}

.divido-widget img {
    display: inline-block;
}

.divido-calculator select {
        color: #000;
}
</style>
<div id="divido-checkout" data-divido-calculator class="divido-calculator divido-theme-blue" data-divido-amount="{{ grand_total }}" data-divido-plans="{{ plan_list }}">
    <h1>
        <a href="https://www.divido.com" target="_blank" class="divido-logo divido-logo-sm" style="float:right;">Divido</a>
        {{ text_checkout_title }}
    </h1>
    <div style="clear:both;"></div>
    <dl>
        <dt><span data-divido-choose-finance data-divido-label="{{ text_choose_plan }}" data-divido-form="divido_finance"></span></dt>
        <dd><span class="divido-deposit" data-divido-choose-deposit data-divido-label="{{ text_choose_deposit }}" data-divido-form="divido_deposit"></span></dd>
    </dl>
    <div class="description">
        <strong>
        <span data-divido-agreement-duration></span> {{ text_monthly_payments }} <span data-divido-monthly-instalment></span>
        </strong>
    </div>
    <div class="divido-info">
        <dl>
            <dt>{{ text_term }}</dt>
            <dd><span data-divido-agreement-duration></span> {{ text_months }}</dd>
            <dt>{{ text_monthly_installment }}</dt>
            <dd><span data-divido-monthly-instalment></span></dd>
            <dt>{{ text_deposit }}</dt>
            <dd><span data-divido-deposit></span></dd>
            <dt>{{ text_credit_amount }}</dt>
            <dd><span data-divido-credit-amount-rounded></span></dd>
            <dt>{{ text_amount_payable }}</dt>
            <dd><span data-divido-total-payable-rounded></span></dd>
            <dt>{{ text_total_interest }}</dt>
            <dd><span data-divido-interest-rate></span></dd>
        </dl>
    </div>
    <div class="clear"></div>
    <p>{{ text_redirection }}</p>
</div>

<div class="buttons">
    <div class="pull-right">
        <input type="button" value="{{ button_confirm }}" id="button-confirm" class="btn btn-primary" data-loading-text="{{ text_loading }}" />
    </div>
</div>

<script>
(function($) {
    $(function () {
        $.getScript('{{ merchant_script }}', function () {
            divido_calculator($('#divido-checkout'));
        });

        $('#button-confirm').on('click', function() {
            var finance_elem = $('select[name="divido_finance"]');
            var deposit      = $('[name="divido_deposit"]').val();

            var finance;
            if (finance_elem.length > 0) {
                finance = finance_elem.val();
            } else {
                finance = $('[data-divido-calculator]').data('divido-plans');
            }

            var data = {
                finance: finance,
                deposit: deposit
            };

            $.ajax({
                type     : 'post',
                url      : 'index.php?route=extension/payment/divido/confirm',
                data     : data,
                dataType : 'json',
                cache    : false,
                beforeSend: function() {
                    $('#button-confirm').button('loading');
                },
                complete: function() {
                    $('#button-confirm').button('reset');
                },
                success: function(data) {
                    if (data.status == 'ok') {
                        location = data.url;
                    } else {
                        message = data.message || '{{ generic_credit_req_error }}';
                        $('#divido-checkout').prepend('<div class="alert alert-warning alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + message + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                    }
                }
            });
        });
    });
})(jQuery);
</script>