squareup_order.twig (12545B)
1 <div id="transaction-alert" data-message="{{ text_loading }}"></div> 2 <div class="text-right margin-bottom"> 3 </div> 4 <div class="table-responsive"> 5 <table class="table table-bordered table-hover"> 6 <thead> 7 <tr> 8 <th class="text-left hidden-xs">{{ column_transaction_id }}</th> 9 <th class="text-left hidden-xs">{{ column_type }}</th> 10 <th class="text-left hidden-xs">{{ column_amount }}</th> 11 <th class="text-left hidden-xs">{{ column_refunds }}</th> 12 <th class="text-left hidden-xs hidden-sm">{{ column_ip }}</th> 13 <th class="text-left">{{ column_date_created }}</th> 14 <th class="text-right">{{ column_action }}</th> 15 </tr> 16 </thead> 17 <tbody id="transactions"> 18 </tbody> 19 </table> 20 <div id="transactions_pagination"></div> 21 </div> 22 <div class="modal fade" id="squareup-confirm-modal"> 23 <div class="modal-dialog"> 24 <div class="modal-content"> 25 <div class="modal-header"> 26 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 27 <h4 class="modal-title">{{ text_confirm_action }}</h4> 28 </div> 29 <div class="modal-body"> 30 <h4 id="squareup-confirm-modal-content"></h4> 31 </div> 32 <div class="modal-footer"> 33 <button type="button" class="btn btn-default" data-dismiss="modal">{{ text_close }}</button> 34 <button id="squareup-confirm-ok" type="button" class="btn btn-primary">{{ text_ok }}</button> 35 </div> 36 </div> 37 </div> 38 </div> 39 <div class="modal fade" id="squareup-refund-modal"> 40 <div class="modal-dialog"> 41 <div class="modal-content"> 42 <div class="modal-header"> 43 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 44 <h4 class="modal-title">{{ text_refund_details }}</h4> 45 </div> 46 <div class="modal-body"> 47 <div class="form-group"> 48 <label class="control-label" id="squareup-refund-modal-content-reason"></label> 49 <textarea class="form-control" id="squareup-refund-reason" required></textarea> 50 </div> 51 <div class="form-group"> 52 <label class="control-label" id="squareup-refund-modal-content-amount"></label> 53 <input class="form-control" type="text" id="squareup-refund-amount" required /> 54 </div> 55 </div> 56 <div class="modal-footer"> 57 <button type="button" class="btn btn-default" data-dismiss="modal">{{ text_close }}</button> 58 <button id="squareup-refund-ok" type="button" class="btn btn-primary">{{ text_ok }}</button> 59 </div> 60 </div> 61 </div> 62 </div> 63 <script type="text/javascript"> 64 $(document).ready(function() { 65 var listTransactions = function(page) { 66 $.ajax({ 67 url : '{{ url_list_transactions }}'.replace('{PAGE}', page ? page : transactionListPage), 68 dataType : 'json', 69 beforeSend : function() { 70 $('#refresh_transactions').button('loading'); 71 $('#transactions_pagination').empty(); 72 $('#transactions').html('<tr><td colspan="9" class="text-center"><i class="fa fa-circle-o-notch fa-spin"></i> {{ text_loading }}</td></tr>'); 73 }, 74 success : function(data) { 75 var html = ''; 76 77 if (data.transactions.length) { 78 for (var i in data.transactions) { 79 var row = data.transactions[i]; 80 81 html += '<tr>'; 82 html += '<td class="text-left hidden-xs">' + row.transaction_id + '</td>'; 83 html += '<td class="text-left hidden-xs">' + row.type + '</td>'; 84 html += '<td class="text-left hidden-xs">' + row.amount + '</td>'; 85 html += '<td class="text-left hidden-xs">' + row.num_refunds + '</td>'; 86 html += '<td class="text-left hidden-xs hidden-sm">' + row.ip + '</td>'; 87 html += '<td class="text-left">' + row.date_created + '</td>'; 88 html += '<td class="text-right">'; 89 90 switch (row.type) { 91 case "AUTHORIZED" : { 92 html += '<a class="btn btn-success" data-url-transaction-capture="' + row.url_capture + '" data-confirm-capture="' + row.confirm_capture + '">{{ text_capture }}</a> '; 93 html += '<a class="btn btn-warning" data-url-transaction-void="' + row.url_void + '" data-confirm-void="' + row.confirm_void + '">{{ text_void }}</a> '; 94 } break; 95 96 case "CAPTURED" : { 97 html += '<a class="btn btn-danger" data-url-transaction-refund="' + row.url_refund + '" data-confirm-refund="' + row.confirm_refund + '" data-insert-amount="' + row.insert_amount + '">{{ text_refund }}</a> '; 98 } break; 99 } 100 101 html += ' <a class="btn btn-info" href="' + row.url_info + '">{{ text_view }}</a>'; 102 html += '</td>'; 103 html += '</tr>'; 104 } 105 } else { 106 html += '<tr>'; 107 html += '<td class="text-center" colspan="7">{{ text_no_transactions }}</td>'; 108 html += '</tr>'; 109 } 110 111 $('#transactions').html(html); 112 113 $('#transactions_pagination').html(data.pagination).find('a[href]').each(function(index,element) { 114 $(this).click(function(e) { 115 e.preventDefault(); 116 117 transactionListPage = isNaN($(this).attr('href')) ? 1 : $(this).attr('href'); 118 119 listTransactions(); 120 }) 121 }); 122 }, 123 complete : function() { 124 $('#refresh_transactions').button('reset'); 125 } 126 }); 127 } 128 129 var transactionLoading = function() { 130 var message = $('#transaction-alert').attr('data-message'); 131 132 $('#transaction-alert').html('<div class="text-center alert alert-info"><i class="fa fa-circle-o-notch fa-spin"></i> ' + message + '</div>'); 133 } 134 135 var transactionError = function(message) { 136 $('#transaction-alert').html('<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert" aria-label="X"><span aria-hidden="true">×</span></button><i class="fa fa-exclamation-circle"></i> ' + message + '</div>'); 137 } 138 139 var transactionSuccess = function(message) { 140 $('#transaction-alert').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert" aria-label="X"><span aria-hidden="true">×</span></button><i class="fa fa-exclamation-circle"></i> ' + message + '</div>'); 141 } 142 143 var addOrderHistory = function(data, success_callback) { 144 $.ajax({ 145 url: '{{ catalog }}index.php?route=api/order/history&api_token={{ api_token }}&order_id=' + data.order_id, 146 type: 'post', 147 dataType: 'json', 148 data: data, 149 success: function(json) { 150 if (json['error']) { 151 transactionError(json['error']); 152 enableTransactionButtons(); 153 } 154 155 if (json['success']) { 156 success_callback(); 157 } 158 }, 159 error: function(xhr, ajaxOptions, thrownError) { 160 transactionError(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 161 enableTransactionButtons(); 162 } 163 }); 164 } 165 166 var transactionRequest = function(type, url, data) { 167 $.ajax({ 168 url : url, 169 dataType : 'json', 170 type : type, 171 data : data, 172 beforeSend : transactionLoading, 173 success : function(json) { 174 if (json.error) { 175 transactionError(json.error); 176 enableTransactionButtons(); 177 } 178 179 if (json.success && json.order_history_data) { 180 addOrderHistory(json.order_history_data, function() { 181 transactionSuccess(json.success); 182 listTransactions(); 183 184 $('#history').load('index.php?route=sale/order/history&user_token={{ user_token }}&order_id={{ order_id }}'); 185 }); 186 } 187 }, 188 error : function(xhr, ajaxSettings, thrownError) { 189 transactionError(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 190 enableTransactionButtons(); 191 } 192 }); 193 } 194 195 var disableTransactionButtons = function() { 196 $('*[data-url-transaction-capture], *[data-url-transaction-void], *[data-url-transaction-refund]').attr('disabled', true); 197 } 198 199 var enableTransactionButtons = function() { 200 $('*[data-url-transaction-capture], *[data-url-transaction-void], *[data-url-transaction-refund]').attr('disabled', false); 201 } 202 203 var modalConfirm = function(url, text) { 204 var modal = '#squareup-confirm-modal'; 205 var content = '#squareup-confirm-modal-content'; 206 var button = '#squareup-confirm-ok'; 207 208 $(content).html(text); 209 $(button).unbind().click(function() { 210 disableTransactionButtons(); 211 212 $(modal).modal('hide'); 213 214 transactionRequest('GET', url); 215 }); 216 217 $(modal).modal('show'); 218 } 219 220 var refundInputValidate = function(reason_input, amount_input) { 221 var result = true; 222 223 if (!$(reason_input)[0].checkValidity()) { 224 $(reason_input).closest('.form-group').addClass('has-error'); 225 result = false; 226 } else { 227 $(reason_input).closest('.form-group').removeClass('has-error'); 228 } 229 230 if (!$(amount_input)[0].checkValidity()) { 231 $(amount_input).closest('.form-group').addClass('has-error'); 232 result = false; 233 } else { 234 $(amount_input).closest('.form-group').removeClass('has-error'); 235 } 236 237 return result; 238 } 239 240 var modalRefund = function(url, text_reason, text_amount) { 241 var modal = '#squareup-refund-modal'; 242 var content_reason = '#squareup-refund-modal-content-reason'; 243 var content_amount = '#squareup-refund-modal-content-amount'; 244 var button = '#squareup-refund-ok'; 245 var reason_input = '#squareup-refund-reason'; 246 var amount_input = '#squareup-refund-amount'; 247 248 $(content_reason).html(text_reason); 249 $(content_amount).html(text_amount); 250 251 $(reason_input).val(''); 252 $(amount_input).val(''); 253 254 $(button).unbind().click(function() { 255 if (!refundInputValidate(reason_input, amount_input)) { 256 return; 257 } 258 259 disableTransactionButtons(); 260 261 $(modal).modal('hide'); 262 263 transactionRequest('POST', url, { 264 reason : $(reason_input).val(), 265 amount : $(amount_input).val() 266 }); 267 }); 268 269 $(modal).modal('show'); 270 } 271 272 var transactionListPage = 1; 273 274 $(document).on('click', '*[data-url-transaction-capture]', function() { 275 if ($(this).attr('disabled')) return; 276 277 modalConfirm( 278 $(this).attr('data-url-transaction-capture'), 279 $(this).attr('data-confirm-capture') 280 ); 281 }); 282 283 $(document).on('click', '*[data-url-transaction-void]', function() { 284 if ($(this).attr('disabled')) return; 285 286 modalConfirm( 287 $(this).attr('data-url-transaction-void'), 288 $(this).attr('data-confirm-void') 289 ); 290 }); 291 292 $(document).on('click', '*[data-url-transaction-refund]', function() { 293 if ($(this).attr('disabled')) return; 294 295 modalRefund( 296 $(this).attr('data-url-transaction-refund'), 297 $(this).attr('data-confirm-refund'), 298 $(this).attr('data-insert-amount') 299 ); 300 }); 301 302 listTransactions(); 303 }); 304 </script>