laybuy_transaction.twig (17220B)
1 {{ header }}{{ column_left }} 2 <div id="content"> 3 <div class="page-header"> 4 <div class="container-fluid"> 5 <div class="pull-right"> <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div> 6 <h1>{{ heading_title }}</h1> 7 <ul class="breadcrumb"> 8 {% for breadcrumb in breadcrumbs %} 9 <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li> 10 {% endfor %} 11 </ul> 12 </div> 13 </div> 14 <div class="container-fluid"> 15 {% if error_warning %} 16 <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }} 17 <button type="button" class="close" data-dismiss="alert">×</button> 18 </div> 19 {% endif %} 20 {% if success %} 21 <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }} 22 <button type="button" class="close" data-dismiss="alert">×</button> 23 </div> 24 {% endif %} 25 <div class="panel panel-default"> 26 <div class="panel-heading"> 27 <h3 class="panel-title"><i class="fa fa-info-circle"></i> {{ text_transaction_details }}</h3> 28 </div> 29 <div class="panel-body"> 30 {% if transaction %} 31 <form action="" method="post" enctype="multipart/form-data" id="form-laybuy-transaction" class="form-horizontal"> 32 <ul class="nav nav-tabs"> 33 <li class="active"><a href="#tab-reference" data-toggle="tab">{{ tab_reference }}</a></li> 34 <li class=""><a href="#tab-customer" data-toggle="tab">{{ tab_customer }}</a></li> 35 <li class=""><a href="#tab-payment-plan" data-toggle="tab">{{ tab_payment }}</a></li> 36 {% if transaction.status_id == 1 %} 37 <li class=""><a href="#tab-modify" data-toggle="tab">{{ tab_modify }}</a></li> 38 {% endif %} 39 </ul> 40 <div class="tab-content"> 41 <div class="tab-pane active" id="tab-reference"> 42 <div class="form-group"> 43 <label class="col-sm-2 control-label">{{ text_paypal_profile_id }}</label> 44 <div class="col-sm-10"> {{ transaction.paypal_profile_id }} </div> 45 </div> 46 <div class="form-group"> 47 <label class="col-sm-2 control-label">{{ text_laybuy_ref_no }}</label> 48 <div class="col-sm-10"> {{ transaction.laybuy_ref_no }} </div> 49 </div> 50 <div class="form-group"> 51 <label class="col-sm-2 control-label">{{ text_order_id }}</label> 52 <div class="col-sm-10"> {{ transaction.order_id }} </div> 53 </div> 54 </div> 55 <div class="tab-pane" id="tab-customer"> 56 <div class="form-group"> 57 <label class="col-sm-2 control-label">{{ text_firstname }}</label> 58 <div class="col-sm-10"> {{ transaction.firstname }} </div> 59 </div> 60 <div class="form-group"> 61 <label class="col-sm-2 control-label">{{ text_lastname }}</label> 62 <div class="col-sm-10"> {{ transaction.lastname }} </div> 63 </div> 64 <div class="form-group"> 65 <label class="col-sm-2 control-label">{{ text_email }}</label> 66 <div class="col-sm-10"> {{ transaction.email }} </div> 67 </div> 68 <div class="form-group"> 69 <label class="col-sm-2 control-label">{{ text_address }}</label> 70 <div class="col-sm-10"> {{ transaction.address }} </div> 71 </div> 72 <div class="form-group"> 73 <label class="col-sm-2 control-label">{{ text_suburb }}</label> 74 <div class="col-sm-10"> {{ transaction.suburb }} </div> 75 </div> 76 <div class="form-group"> 77 <label class="col-sm-2 control-label">{{ text_state }}</label> 78 <div class="col-sm-10"> {{ transaction.state }} </div> 79 </div> 80 <div class="form-group"> 81 <label class="col-sm-2 control-label">{{ text_country }}</label> 82 <div class="col-sm-10"> {{ transaction.country }} </div> 83 </div> 84 <div class="form-group"> 85 <label class="col-sm-2 control-label">{{ text_postcode }}</label> 86 <div class="col-sm-10"> {{ transaction.postcode }} </div> 87 </div> 88 </div> 89 <div class="tab-pane" id="tab-payment-plan"> 90 <div class="form-group"> 91 <label class="col-sm-2 control-label">{{ text_status }}</label> 92 <div class="col-sm-10"> {{ transaction.status }} </div> 93 </div> 94 <div class="form-group"> 95 <label class="col-sm-2 control-label">{{ text_amount }}</label> 96 <div class="col-sm-10"> {{ transaction.amount }} </div> 97 </div> 98 <div class="form-group"> 99 <label class="col-sm-2 control-label">{{ text_downpayment_percent }}</label> 100 <div class="col-sm-10"> {{ transaction.downpayment ~ '%' }} </div> 101 </div> 102 <div class="form-group"> 103 <label class="col-sm-2 control-label">{{ text_months }}</label> 104 <div class="col-sm-10"> {{ transaction.months }} </div> 105 </div> 106 <div class="form-group"> 107 <label class="col-sm-2 control-label">{{ text_downpayment_amount }}</label> 108 <div class="col-sm-10"> {{ transaction.downpayment_amount }} </div> 109 </div> 110 <div class="form-group"> 111 <label class="col-sm-2 control-label">{{ text_payment_amounts }}</label> 112 <div class="col-sm-10"> {{ transaction.payment_amounts }} </div> 113 </div> 114 <div class="form-group"> 115 <label class="col-sm-2 control-label">{{ text_first_payment_due }}</label> 116 <div class="col-sm-10"> {{ transaction.first_payment_due }} </div> 117 </div> 118 <div class="form-group"> 119 <label class="col-sm-2 control-label">{{ text_last_payment_due }}</label> 120 <div class="col-sm-10"> {{ transaction.last_payment_due }} </div> 121 </div> 122 <div class="form-group"> 123 <label class="col-sm-2 control-label">{{ text_report }}</label> 124 <div class="col-sm-10"> 125 <table class="table table-striped"> 126 <thead> 127 <tr> 128 <th>{{ text_instalment }}</th> 129 <th>{{ text_amount }}</th> 130 <th>{{ text_date }}</th> 131 <th>{{ text_pp_trans_id }}</th> 132 <th>{{ text_status }}</th> 133 </tr> 134 </thead> 135 <tbody> 136 {% for report in transaction.report %} 137 {% if report.instalment == '0' %} 138 <tr> 139 <td>{{ text_downpayment }}</td> 140 <td>{{ report.amount }}</td> 141 <td>{{ report.date }}</td> 142 <td>{{ report.pp_trans_id }}</td> 143 <td>{{ report.status }}</td> 144 </tr> 145 {% else %} 146 <tr> 147 <td>{{ text_month ~ ' ' ~ report.instalment }}</td> 148 <td>{{ report.amount }}</td> 149 <td>{{ report.date }}</td> 150 <td>{{ report.pp_trans_id }}</td> 151 <td>{{ report.status }}</td> 152 </tr> 153 {% endif %} 154 {% endfor %} 155 </tbody> 156 </table> 157 </div> 158 </div> 159 </div> 160 {% if transaction.status_id == 1 %} 161 <div class="tab-pane" id="tab-modify"> 162 <div class="form-group"> 163 <label class="col-sm-2 control-label">{{ text_cancel_plan }}</label> 164 <div class="col-sm-10"> 165 <button class="btn btn-primary btn-xs" id="cancel-plan">{{ button_cancel_plan }}</button> 166 </div> 167 </div> 168 <div class="form-group"> 169 <label class="col-sm-2 control-label">{{ text_revise_plan }}</label> 170 <div class="col-sm-10"> 171 <button class="btn btn-primary btn-xs" id="revise-plan" style="margin-bottom:10px">{{ button_revise_plan }}</button> 172 <div class="amount_remaining"> <b>{{ text_remaining }}</b> {{ transaction.remaining }} 173 <input type="hidden" id="amount" name="amount" value="{{ total }}" /> 174 </div> 175 <select name="payment_type" id="payment-type"> 176 <option value="1">{{ text_type_laybuy }}</option> 177 <option value="0">{{ text_type_buynow }}</option> 178 </select> 179 <div class="laybuy_section"> <br> 180 <select name="INIT" id="down-payment"> 181 {% for percent in initial_payments %} 182 {% if percent == transaction.downpayment %} 183 <option value="{{ percent }}" selected="selected">{{ percent }}%</option> 184 {% else %} 185 <option value="{{ percent }}">{{ percent }}%</option> 186 {% endif %} 187 {% endfor %} 188 </select> 189 <select name="MONTHS" id="months"> 190 {% for month in months %} 191 {% if month.value == transaction.months %} 192 <option value="{{ month.value }}" selected="selected">{{ month.label }}</option> 193 {% else %} 194 <option value="{{ month.value }}">{{ month.label }}</option> 195 {% endif %} 196 {% endfor %} 197 </select> 198 <div class="table-responsive"> 199 <table class="table table-striped table-responsive table-condensed" id="payment-table" style="margin-top:5px"> 200 <thead> 201 <th>{{ text_payment }}</th> 202 <th>{{ text_due_date }}</th> 203 <th class="text-right">{{ text_amount }}</th> 204 </thead> 205 <tbody> 206 <tr> 207 <td></td> 208 <td></td> 209 <td></td> 210 </tr> 211 </tbody> 212 </table> 213 </div> 214 </div> 215 </div> 216 </div> 217 </div> 218 {% endif %} </div> 219 </form> 220 {% else %} 221 {{ text_not_found }} 222 {% endif %} </div> 223 </div> 224 </div> 225 </div> 226 <style> 227 .form-horizontal .control-label { 228 padding-top: 0; 229 } 230 231 .amount_remaining { 232 margin-bottom: 10px; 233 } 234 </style> 235 <script type="text/javascript"><!-- 236 var token = ''; 237 238 // Login to the API 239 $.ajax({ 240 url: '{{ store_url }}index.php?route=api/login', 241 type: 'post', 242 dataType: 'json', 243 data: 'key={{ api_key }}', 244 crossDomain: true, 245 success: function(json) { 246 if (json['error']) { 247 if (json['error']['key']) { 248 alert(json['error']['key']); 249 } 250 251 if (json['error']['ip']) { 252 alert(json['error']['ip']); 253 } 254 } 255 256 if (json['user_token']) { 257 token = json['user_token']; 258 } 259 }, 260 error: function(xhr, ajaxOptions, thrownError) { 261 alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 262 } 263 }); 264 //--></script> 265 <script type="text/javascript"><!-- 266 $('#cancel-plan').on('click', function(e) { 267 e.preventDefault(); 268 269 $.ajax({ 270 url: 'index.php?route=extension/payment/laybuy/cancel&user_token={{ user_token }}&id={{ id }}&source=extension', 271 type: 'post', 272 dataType: 'json', 273 cache: false, 274 beforeSend: function() { 275 $('#cancel-plan, #revise-plan').attr('disabled', true); 276 $('#cancel-plan').after('<span class="laybuy-loading fa fa-spinner" style="margin-left:2px"></span>'); 277 }, 278 complete: function() { 279 $('#cancel-plan, #revise-plan').attr('disabled', false); 280 $('.laybuy-loading').remove(); 281 }, 282 success: function(json) { 283 if (json['error']) { 284 alert(json['error']); 285 } 286 287 if (json['success']) { 288 if (token) { 289 // Send order history to the API 290 $.ajax({ 291 url: '{{ store_url }}index.php?route=api/order/history&token=' + token + '&order_id=' + json['order_id'], 292 type: 'post', 293 dataType: 'json', 294 data: 'order_status_id=' + json['order_status_id'] + '¬ify=1&override=0&append=0&comment=' + encodeURIComponent(json['comment']), 295 success: function(json) { 296 if (json['error']) { 297 alert(json['error']); 298 } 299 }, 300 error: function(xhr, ajaxOptions, thrownError) { 301 alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 302 } 303 }); 304 } 305 306 alert(json['success']); 307 308 location = json['reload'].replace(/&/g, '&'); 309 } 310 }, 311 error: function(xhr, ajaxOptions, thrownError) { 312 alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 313 } 314 }); 315 }); 316 //--></script> 317 <script type="text/javascript"><!-- 318 $('#revise-plan').on('click', function(e) { 319 e.preventDefault(); 320 321 $.ajax({ 322 url: 'index.php?route=extension/payment/laybuy/revise&user_token={{ user_token }}&id={{ id }}&source=extension', 323 type: 'post', 324 data: $('#payment-type, #amount, #down-payment, #months'), 325 dataType: 'json', 326 cache: false, 327 beforeSend: function() { 328 $('#cancel-plan, #revise-plan').attr('disabled', true); 329 $('#revise-plan').after('<div class="laybuy-loading fa fa-spinner" style="margin-left:2px"></div>'); 330 }, 331 complete: function() { 332 $('#cancel-plan, #revise-plan').attr('disabled', false); 333 $('.laybuy-loading').remove(); 334 }, 335 success: function(json) { 336 if (json['error']) { 337 alert(json['error']); 338 } 339 340 if (json['success']) { 341 alert(json['success']); 342 343 location = json['reload'].replace(/&/g, '&'); 344 } 345 }, 346 error: function(xhr, ajaxOptions, thrownError) { 347 alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 348 } 349 }); 350 }); 351 //--></script> 352 <script type="text/javascript"><!-- 353 $('#payment-type').on('change', function() { 354 var payment_type = $('#payment-type').val(); 355 356 if (payment_type == '1') { 357 $('.laybuy_section').show(); 358 } else { 359 $('.laybuy_section').hide(); 360 } 361 }); 362 //--></script> 363 <script type="text/javascript"><!-- 364 $(document).ready(function() { 365 $('#tab-modify').on('change', 'select', function() { 366 calculate($('#down-payment').val(), $('#months').val()); 367 }); 368 369 var symbol_left = "{{ currency_symbol_left }}"; 370 var symbol_right = "{{ currency_symbol_right }}"; 371 var order = {{ order_info|json_encode() }}; 372 var total = parseFloat(parseFloat({{ total }}) * parseFloat(order.currency_value)).toFixed(4); 373 374 calculate($('#down-payment').val(), $('#months').val()); 375 376 function calculate(dp, months) { 377 var down_payment = getPercent(dp, total); 378 379 var remainder = total - down_payment; 380 381 var payments = getPayments(remainder, months); 382 payments[0] = { 383 payment: '{{ text_downpayment }}', 384 dueDate: '{{ text_today }}', 385 amount: parseFloat(down_payment).toFixed(2) 386 }; 387 388 replaceRows(payments); 389 } 390 391 function getPercent(percent, value) { 392 var result = (percent / 100) * value; 393 394 return result.toFixed(4); 395 } 396 397 function getPayments(amount, months) { 398 var payment_amount = amount / months; 399 400 var payments = {}; 401 402 for (i = 1; i <= months; i++) { 403 var new_date = new Date(); 404 405 new_date.setMonth(new_date.getMonth() + i); 406 407 payments[i] = { 408 payment: '{{ text_month }} ' + i, 409 dueDate: ('0' + new_date.getDate()).slice(-2) + '/' + ('0' + (new_date.getMonth() + 1)).slice(-2) + '/' + new_date.getFullYear(), 410 amount: parseFloat(payment_amount).toFixed(2) 411 } 412 } 413 414 return payments; 415 } 416 417 function replaceRows(payments) { 418 $('#payment-table').find('tbody').html(''); 419 420 for (payment in payments) { 421 addRow(payments[payment]); 422 } 423 } 424 425 function addRow(payment) { 426 var row; 427 428 row = '<tr>'; 429 row += '<td>' + payment.payment + '</td>'; 430 row += '<td>' + payment.dueDate + '</td>'; 431 row += '<td class="text-right">' + symbol_left + payment.amount + symbol_right + '</td>'; 432 row += '</tr>'; 433 434 $('#payment-table').find('tbody').append(row); 435 } 436 }); 437 //--></script> 438 {{ footer }}