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