squareup_transaction_info.twig (15175B)
1 {{ header }}{{ column_left }} 2 <div id="content"> 3 <div class="page-header"> 4 <div class="container-fluid"> 5 <div class="pull-right"> 6 {% if is_authorized %} 7 <a id="transaction_capture" data-url-transaction-capture="{{ url_capture }}" data-confirm-capture="{{ confirm_capture }}" class="btn btn-success">{{ button_capture }}</a> 8 <a id="transaction_void" data-url-transaction-void="{{ url_void }}" data-confirm-void="{{ confirm_void }}" class="btn btn-warning">{{ button_void }}</a> 9 {% endif %} 10 11 {% if is_captured %} 12 <a id="transaction_refund" data-url-transaction-refund="{{ url_refund }}" data-confirm-refund="{{ confirm_refund }}" data-insert-amount="{{ insert_amount }}" class="btn btn-danger">{{ button_refund }}</a> 13 {% endif %} 14 15 <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div> 16 <h1>{{ heading_title }}</h1> 17 <ul class="breadcrumb"> 18 {% for breadcrumb in breadcrumbs %} 19 <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li> 20 {% endfor %} 21 </ul> 22 </div> 23 </div> 24 <div class="container-fluid"> 25 <div id="transaction-alert" data-message="{{ text_loading }}"> 26 {% for alert in alerts %} 27 <div class="alert alert-{{ alert.type }}"><i class="fa fa-{{ alert.icon }}"></i> {{ alert.text }} 28 <button type="button" class="close" data-dismiss="alert">×</button> 29 </div> 30 {% endfor %} 31 </div> 32 <div class="panel panel-default"> 33 <div class="panel-heading"> 34 <h3 class="panel-title"><i class="fa fa-info-circle"></i> {{ text_edit }}</h3> 35 </div> 36 <div class="panel-body"> 37 <form class="form-horizontal"> 38 <div class="form-group"> 39 <label class="col-sm-2 control-label">{{ entry_transaction_id }}</label> 40 <div class="col-sm-10"> 41 <div class="form-control-static"><a href="{{ url_transaction }}" target="_blank">{{ transaction_id }}</a></div> 42 </div> 43 </div> 44 <div class="form-group"> 45 <label class="col-sm-2 control-label">{{ entry_merchant }}</label> 46 <div class="col-sm-10"> 47 <div class="form-control-static">{{ merchant }}</div> 48 </div> 49 </div> 50 <div class="form-group"> 51 <label class="col-sm-2 control-label">{{ entry_order_id }}</label> 52 <div class="col-sm-10"> 53 <div class="form-control-static"><a href="{{ url_order }}" target="_blank">{{ order_id }}</a></div> 54 </div> 55 </div> 56 <div class="form-group"> 57 <label class="col-sm-2 control-label">{{ entry_type }}</label> 58 <div class="col-sm-10"> 59 <div class="form-control-static">{{ type }}</div> 60 </div> 61 </div> 62 <div class="form-group"> 63 <label class="col-sm-2 control-label">{{ entry_amount }}</label> 64 <div class="col-sm-10"> 65 <div class="form-control-static">{{ amount }}</div> 66 </div> 67 </div> 68 <div class="form-group"> 69 <label class="col-sm-2 control-label">{{ entry_billing_address_company }}</label> 70 <div class="col-sm-10"> 71 <div class="form-control-static">{{ billing_address_company }}</div> 72 </div> 73 </div> 74 <div class="form-group"> 75 <label class="col-sm-2 control-label">{{ entry_billing_address_street }}</label> 76 <div class="col-sm-10"> 77 <div class="form-control-static">{{ billing_address_street }}</div> 78 </div> 79 </div> 80 <div class="form-group"> 81 <label class="col-sm-2 control-label">{{ entry_billing_address_city }}</label> 82 <div class="col-sm-10"> 83 <div class="form-control-static">{{ billing_address_city }}</div> 84 </div> 85 </div> 86 <div class="form-group"> 87 <label class="col-sm-2 control-label">{{ entry_billing_address_postcode }}</label> 88 <div class="col-sm-10"> 89 <div class="form-control-static">{{ billing_address_postcode }}</div> 90 </div> 91 </div> 92 <div class="form-group"> 93 <label class="col-sm-2 control-label">{{ entry_billing_address_province }}</label> 94 <div class="col-sm-10"> 95 <div class="form-control-static">{{ billing_address_province }}</div> 96 </div> 97 </div> 98 <div class="form-group"> 99 <label class="col-sm-2 control-label">{{ entry_billing_address_country }}</label> 100 <div class="col-sm-10"> 101 <div class="form-control-static">{{ billing_address_country }}</div> 102 </div> 103 </div> 104 <div class="form-group"> 105 <label class="col-sm-2 control-label">{{ entry_browser }}</label> 106 <div class="col-sm-10"> 107 <div class="form-control-static">{{ browser }}</div> 108 </div> 109 </div> 110 <div class="form-group"> 111 <label class="col-sm-2 control-label">{{ entry_ip }}</label> 112 <div class="col-sm-10"> 113 <div class="form-control-static">{{ ip }}</div> 114 </div> 115 </div> 116 <div class="form-group"> 117 <label class="col-sm-2 control-label">{{ entry_date_created }}</label> 118 <div class="col-sm-10"> 119 <div class="form-control-static">{{ date_created }}</div> 120 </div> 121 </div> 122 {% if has_refunds %} 123 <hr /> 124 <h3>{{ text_refunds }}</h3> 125 <table class="table table-bordered table-striped"> 126 <thead> 127 <th>{{ column_date_created }}</th> 128 <th>{{ column_reason }}</th> 129 <th>{{ column_status }}</th> 130 <th>{{ column_amount }}</th> 131 <th>{{ column_fee }}</th> 132 </thead> 133 <tbody> 134 {% for refund in refunds %} 135 <tr> 136 <td>{{ refund.date_created }}</td> 137 <td>{{ refund.reason }}</td> 138 <td>{{ refund.status }}</td> 139 <td>{{ refund.amount }}</td> 140 <td>{{ refund.fee }}</td> 141 </tr> 142 {% endfor %} 143 </tbody> 144 </table> 145 {% endif %} 146 </form> 147 </div> 148 </div> 149 </div> 150 </div> 151 <div class="modal fade" id="squareup-confirm-modal"> 152 <div class="modal-dialog"> 153 <div class="modal-content"> 154 <div class="modal-header"> 155 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 156 <h4 class="modal-title">{{ text_confirm_action }}</h4> 157 </div> 158 <div class="modal-body"> 159 <h4 id="squareup-confirm-modal-content"></h4> 160 </div> 161 <div class="modal-footer"> 162 <button type="button" class="btn btn-default" data-dismiss="modal">{{ text_close }}</button> 163 <button id="squareup-confirm-ok" type="button" class="btn btn-primary">{{ text_ok }}</button> 164 </div> 165 </div> 166 </div> 167 </div> 168 <div class="modal fade" id="squareup-refund-modal"> 169 <div class="modal-dialog"> 170 <div class="modal-content"> 171 <div class="modal-header"> 172 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 173 <h4 class="modal-title">{{ text_refund_details }}</h4> 174 </div> 175 <div class="modal-body"> 176 <div class="form-group"> 177 <label class="control-label" id="squareup-refund-modal-content-reason"></label> 178 <textarea class="form-control" id="squareup-refund-reason" required></textarea> 179 </div> 180 <div class="form-group"> 181 <label class="control-label" id="squareup-refund-modal-content-amount"></label> 182 <input class="form-control" type="text" id="squareup-refund-amount" required /> 183 </div> 184 </div> 185 <div class="modal-footer"> 186 <button type="button" class="btn btn-default" data-dismiss="modal">{{ text_close }}</button> 187 <button id="squareup-refund-ok" type="button" class="btn btn-primary">{{ text_ok }}</button> 188 </div> 189 </div> 190 </div> 191 </div> 192 <script type="text/javascript"> 193 $(document).ready(function() { 194 var transactionLoading = function() { 195 var message = $('#transaction-alert').attr('data-message'); 196 197 $('#transaction-alert').html('<div class="text-center alert alert-info"><i class="fa fa-circle-o-notch fa-spin"></i> ' + message + '</div>'); 198 } 199 200 var refreshPage = function() { 201 document.location = document.location; 202 } 203 204 var transactionError = function(message) { 205 $('#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>'); 206 } 207 208 var addOrderHistory = function(data, success_callback) { 209 $.ajax({ 210 url: '{{ catalog }}index.php?route=api/order/history&api_token={{ api_token }}&order_id=' + data.order_id, 211 type: 'post', 212 dataType: 'json', 213 data: data, 214 success: function(json) { 215 if (json['error']) { 216 refreshPage(); 217 } 218 219 if (json['success']) { 220 success_callback(); 221 } 222 }, 223 error: function(xhr, ajaxOptions, thrownError) { 224 transactionError(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 225 enableTransactionButtons(); 226 } 227 }); 228 } 229 230 var transactionRequest = function(type, url, data) { 231 $.ajax({ 232 url : url, 233 dataType : 'json', 234 type : type, 235 data : data, 236 beforeSend : transactionLoading, 237 success : function(json) { 238 if (json.error) { 239 refreshPage(); 240 } 241 242 if (json.success && json.order_history_data) { 243 addOrderHistory(json.order_history_data, function() { 244 refreshPage(); 245 }); 246 } 247 }, 248 error : function(xhr, ajaxSettings, thrownError) { 249 transactionError(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 250 enableTransactionButtons(); 251 } 252 }); 253 } 254 255 var disableTransactionButtons = function() { 256 $('*[data-url-transaction-capture], *[data-url-transaction-void], *[data-url-transaction-refund]').attr('disabled', true); 257 } 258 259 var enableTransactionButtons = function() { 260 $('*[data-url-transaction-capture], *[data-url-transaction-void], *[data-url-transaction-refund]').attr('disabled', false); 261 } 262 263 var modalConfirm = function(url, text) { 264 var modal = '#squareup-confirm-modal'; 265 var content = '#squareup-confirm-modal-content'; 266 var button = '#squareup-confirm-ok'; 267 268 $(content).html(text); 269 $(button).unbind().click(function() { 270 disableTransactionButtons(); 271 272 $(modal).modal('hide'); 273 274 transactionRequest('GET', url); 275 }); 276 277 $(modal).modal('show'); 278 } 279 280 var refundInputValidate = function(reason_input, amount_input) { 281 var result = true; 282 283 if (!$(reason_input)[0].checkValidity()) { 284 $(reason_input).closest('.form-group').addClass('has-error'); 285 result = false; 286 } else { 287 $(reason_input).closest('.form-group').removeClass('has-error'); 288 } 289 290 if (!$(amount_input)[0].checkValidity()) { 291 $(amount_input).closest('.form-group').addClass('has-error'); 292 result = false; 293 } else { 294 $(amount_input).closest('.form-group').removeClass('has-error'); 295 } 296 297 return result; 298 } 299 300 var modalRefund = function(url, text_reason, text_amount) { 301 var modal = '#squareup-refund-modal'; 302 var content_reason = '#squareup-refund-modal-content-reason'; 303 var content_amount = '#squareup-refund-modal-content-amount'; 304 var button = '#squareup-refund-ok'; 305 var reason_input = '#squareup-refund-reason'; 306 var amount_input = '#squareup-refund-amount'; 307 308 $(content_reason).html(text_reason); 309 $(content_amount).html(text_amount); 310 311 $(reason_input).val(''); 312 $(amount_input).val(''); 313 314 $(button).unbind().click(function() { 315 if (!refundInputValidate(reason_input, amount_input)) { 316 return; 317 } 318 319 disableTransactionButtons(); 320 321 $(modal).modal('hide'); 322 323 transactionRequest('POST', url, { 324 reason : $(reason_input).val(), 325 amount : $(amount_input).val() 326 }); 327 }); 328 329 $(modal).modal('show'); 330 } 331 332 $(document).on('click', '*[data-url-transaction-capture]', function() { 333 if ($(this).attr('disabled')) return; 334 335 modalConfirm( 336 $(this).attr('data-url-transaction-capture'), 337 $(this).attr('data-confirm-capture') 338 ); 339 }); 340 341 $(document).on('click', '*[data-url-transaction-void]', function() { 342 if ($(this).attr('disabled')) return; 343 344 modalConfirm( 345 $(this).attr('data-url-transaction-void'), 346 $(this).attr('data-confirm-void') 347 ); 348 }); 349 350 $(document).on('click', '*[data-url-transaction-refund]', function() { 351 if ($(this).attr('disabled')) return; 352 353 modalRefund( 354 $(this).attr('data-url-transaction-refund'), 355 $(this).attr('data-confirm-refund'), 356 $(this).attr('data-insert-amount') 357 ); 358 }); 359 }); 360 </script> 361 {{ footer }}