Skip to content

Commit

Permalink
Merge pull request #1097 from xzzy/master2
Browse files Browse the repository at this point in the history 
Card and Order Information Alignment Fix
  • Loading branch information
@xzzy
xzzy authored Aug 19, 2024
2 parents 837b1da + f381df4 commit 2b9549a
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 93 deletions.
168 changes: 85 additions & 83 deletions ledger/templates/checkout/payment_details_api_wrapper.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,96 +34,98 @@
{% endblock %}

{% block payment_details %}
<div class='row'>
<div class="tab-content">
<div id="card" class="tab-pane active">
<div class='row'>
<div class="col-sm-6 col-lg-6" style='min-height: 70%; border: 0px solid #000; background-color: #FFF; '>
<div style='padding: 20px'>

<form id="stored_card_form" method="post" action="/ledger-api/process-payment" oldaction="{% url 'checkout:preview' %}" class="iihide form-stacked">
<input type="hidden" id='payment-csrfmiddlewaretoken' name="payment-csrfmiddlewaretoken" value="{{csrf_token}}">
<input type="hidden" name="checkout_token" id='checkout_token' readonly value="True"/>
<input type="hidden" name="payment_method" id='payment_method' readonly value="card"/>

<table style="width:100%;">
<tbody>
<tr>
<td style='padding: 5px;'><input type="radio" name="card" value="new" checked="checked"/> Enter new card</td>
</tr>
</tbody>
<tbody id='cardtokens'>

{% for card in cards %}
<tr>
<td style='padding: 5px;'><input type="radio" name="card" value="{{card.id}}" /> Use card ending {{card.last_digits}} with expiry {{card.expiry_date|date:'m/y'}} </td><td> <A href='javascript:void(0);' onclick="ledger.deleteCardToken('{{ card.id }}');">Delete this card</a></td>
</tr>
{% endfor %}
<tbody>

</table>

<fieldset id="storedcard_fieldset" style='display: none'>
<legend>Stored Cards</legend>
<table style="width:20%;">
<thead>
<tr>
<th></th>
<th>Ending</th>
<th>Expiry Date</th>
<th>Type</th>
</tr>
</thead>
<tbody>

{% for card in cards %}
<tr>
<td><input type="radio" name="card-oild" value="{{card.id}}" selected/></td>
<td>{{card.last_digits}}</td>
<td>{{card.expiry_date|date:'m/Y'}}</td>
<td>{{card.get_card_type_display}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</fieldset>
<div style='display:none' id='store-card-pay-button'>
<button type="button" id='pay-with-store-card' class="btn btn-primary pull-right btn-payment-large">{% trans "Pay" %}</button>
<div class='container'>
<div class='row' style="border: 1px solid #f3f3f3;">
<div class="tab-content">
<div id="card" class="tab-pane active">
<div class='row'>
<div class="col-sm-6 col-lg-6" style='min-height: 70%; border: 0px solid #000; background-color: #FFF; '>
<div style='padding: 20px'>

<form id="stored_card_form" method="post" action="/ledger-api/process-payment" oldaction="{% url 'checkout:preview' %}" class="iihide form-stacked">
<input type="hidden" id='payment-csrfmiddlewaretoken' name="payment-csrfmiddlewaretoken" value="{{csrf_token}}">
<input type="hidden" name="checkout_token" id='checkout_token' readonly value="True"/>
<input type="hidden" name="payment_method" id='payment_method' readonly value="card"/>

<table style="width:100%;">
<tbody>
<tr>
<td style='padding: 5px;'><input type="radio" name="card" value="new" checked="checked"/> Enter new card</td>
</tr>
</tbody>
<tbody id='cardtokens'>

{% for card in cards %}
<tr>
<td style='padding: 5px;'><input type="radio" name="card" value="{{card.id}}" /> Use card ending {{card.last_digits}} with expiry {{card.expiry_date|date:'m/y'}} </td><td> <A href='javascript:void(0);' onclick="ledger.deleteCardToken('{{ card.id }}');">Delete this card</a></td>
</tr>
{% endfor %}
<tbody>

</table>

<fieldset id="storedcard_fieldset" style='display: none'>
<legend>Stored Cards</legend>
<table style="width:20%;">
<thead>
<tr>
<th></th>
<th>Ending</th>
<th>Expiry Date</th>
<th>Type</th>
</tr>
</thead>
<tbody>

{% for card in cards %}
<tr>
<td><input type="radio" name="card-oild" value="{{card.id}}" selected/></td>
<td>{{card.last_digits}}</td>
<td>{{card.expiry_date|date:'m/Y'}}</td>
<td>{{card.get_card_type_display}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</fieldset>
<div style='display:none' id='store-card-pay-button'>
<button type="button" id='pay-with-store-card' class="btn btn-primary pull-right btn-payment-large">{% trans "Pay" %}</button>
</div>
</form>

<div id='card-wrapper' style='padding-top: 30px'>
<form id="new_card_form" method="post" action="/ledger-api/process-payment" oldaction="{% url 'checkout:preview' %}" class="form-stacked">
<input type="hidden" name="iiaction" value="place_order">
<input type="hidden" name="payment-csrfmiddlewaretoken" value="{{csrf_token}}">
<div class="clearfix">
<img src="{% static 'payments/img/visa-mastercard-2021.png' %}">
</div>
</form>

<div id='card-wrapper' style='padding-top: 30px'>
<form id="new_card_form" method="post" action="/ledger-api/process-payment" oldaction="{% url 'checkout:preview' %}" class="form-stacked">
<input type="hidden" name="iiaction" value="place_order">
<input type="hidden" name="payment-csrfmiddlewaretoken" value="{{csrf_token}}">
<div class="clearfix">
<img src="{% static 'payments/img/visa-mastercard-2021.png' %}">
</div>
{% include "partials/form_fields.html" with form=bankcard_form %}
{% if store_card %}
<div class="checkbox">
<label><input type="checkbox" name="store_card" value="True"/>Store Card</label>
</div>
{% endif %}
<input type="hidden" name="payment_method" readonly value="card"/>
<div id="new-card-pay-button">
<button type="button" id='pay-with-new-card' style='width:100px;margin-top: 30px; font-size: 20px; margin-right:30px;' class="btn btn-large btn-primary pull-right btn-payment-large">{% trans "Pay" %}</button>
</div>
</form>
</div>
</div>
</div>

{% include "partials/form_fields.html" with form=bankcard_form %}
{% if store_card %}
<div class="checkbox">
<label><input type="checkbox" name="store_card" value="True"/>Store Card</label>
<div class="col-lg-6 right-column">
<div style='padding: 20px'>
{% include "checkout/preview-basket.html" %}
</div>
{% endif %}
<input type="hidden" name="payment_method" readonly value="card"/>
<div id="new-card-pay-button">
<button type="button" id='pay-with-new-card' style='width:100px;margin-top: 30px; font-size: 20px; margin-right:30px;' class="btn btn-large btn-primary pull-right btn-payment-large">{% trans "Pay" %}</button>
</div>
</form>
</div>
</div>
</div>
</div>

<div class="col-lg-6 right-column">
<div style='padding: 20px'>
{% include "checkout/preview-basket.html" %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% include "checkout/payment_details_api_wrapper_js.html" %}

{% endblock %}
Expand Down
16 changes: 6 additions & 10 deletions ledger/templates/checkout/preview-ledger-api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,15 @@
{% else %}
<BR><BR>

<div class="container rounded" style='background-color: #FFFFFF;'>
<div class="container rounded m-2" style='background-color: #FFFFFF; position:fixed;'>
<div class="row">
<div class="col-1">
<div class='pt-3 ps-3'>
<i class="bi bi-x-circle-fill " style='color: red; font-size: 34px;'></i>
</div>
</div>
<div class="col-11">

<div class="col-12">
<div class="row pt-4">
<div class="col-6">
<h3>Payment Error</h3>
<div class="col-10">
<h3> <i class="bi bi-x-circle-fill " style='color: red; font-size: 34px;'></i> Payment Error</h3>
</div>
<div class="col-6 text-end">
<div class="col-2 text-end">
<button type="button" class="btn-close close-ledger-popup" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="col-12">
Expand Down

0 comments on commit 2b9549a

Please sign in to comment.