From 7f4993c3f0fc07a136447ca72d428a21afbc3f69 Mon Sep 17 00:00:00 2001
From: PCoder <purple.coder@yahoo.co.uk>
Date: Sat, 21 Oct 2017 23:12:53 +0200
Subject: [PATCH] Update hosting payment template to use added cards

---
 hosting/static/hosting/css/commons.css | 20 ++++++++++
 hosting/templates/hosting/payment.html | 52 ++++++++++----------------
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index ca320afa..33381370 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -294,6 +294,26 @@
   font-size: 16px;
 }
 
+.payment-container .credit-card-info {
+  padding-bottom: 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.credit-card-info {
+  display: flex;
+}
+
+.credit-card-info .align-bottom{
+  align-self: flex-end;
+  padding-right: 0 !important;
+}
+
+.another-card-text {
+  padding: 20px 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+
 .credit-card-form {
   max-width: 360px;
 }
diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html
index a10cfbca..7cadb530 100644
--- a/hosting/templates/hosting/payment.html
+++ b/hosting/templates/hosting/payment.html
@@ -66,49 +66,37 @@
                     </form>
                 </div>
                 <div class="col-xs-12 col-sm-7 col-md-6 creditcard-box dcl-creditcard">
+                    {% with card_list_len=cards_list|length %}
                     <h3><b>{%trans "Credit Card"%}</b></h3>
                     <hr>
                     <div>
                         <p>
+                            {% if card_list_len > 0 %}
+                            {% blocktrans %}Please select one of the previous cards that you used or fill in your credit card information below. We are using <a href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %}
+                            {% else %}
                             {% blocktrans %}Please fill in your credit card information below. We are using <a href="https://stripe.com" target="_blank">Stripe</a> for payment and do not store your information in our database.{% endblocktrans %}
+                            {% endif %}
                         </p>
                         <div>
-                            {% if credit_card_data.last4 %}
-                                <form role="form" id="payment-form-with-creditcard" novalidate>
-                                    <h5 class="billing-head">Credit Card</h5>
-                                    <h5 class="membership-lead">Last 4: *****{{credit_card_data.last4}}</h5>
-                                    <h5 class="membership-lead">Type: {{credit_card_data.cc_brand}}</h5>
-                                    <input type="hidden" name="credit_card_needed" value="false"/>
-                                </form>
-                                {% if not messages and not form.non_field_errors %}
-                                    <p class="card-warning-content card-warning-addtional-margin">
-                                        {% trans "You are not making any payment yet. After submitting your card information, you will be taken to the Confirm Order Page." %}
-                                    </p>
-                                {% endif %}
-                                <div id='payment_error'>
-                                    {% for message in messages %}
-                                        {% if 'failed_payment' or 'make_charge_error' in message.tags %}
-                                         <ul class="list-unstyled">
-                                            <li>
-                                                <p class="card-warning-content card-warning-error">{{ message|safe }}</p>
-                                            </li>
-                                        </ul>
-                                        {% endif %}
-                                    {% endfor %}
-                                    {% for error in form.non_field_errors %}
-                                        <p class="card-warning-content card-warning-error">
-                                            {{ error|escape }}
-                                        </p>
-                                    {% endfor %}
+                            {% for card in cards_list %}
+                                <div class="credit-card-info">
+                                    <div class="col-xs-6 no-padding">
+                                        <h5 class="billing-head">{% trans "Credit Card" %}</h5>
+                                        <h5 class="membership-lead">{% trans "Last" %} 4: ***** {{card.last4}}</h5>
+                                        <h5 class="membership-lead">{% trans "Type" %}: {{card.brand}}</h5>
+                                    </div>
+                                    <div class="col-xs-6 text-right align-bottom">
+                                        <a class="btn choice-btn choice-btn-faded" href="">{% trans "SELECT" %}</a>
+                                    </div>
                                 </div>
-                                <div class="text-right">
-                                    <button id="payment_button_with_creditcard" class="btn btn-vm-contact" type="submit">{%trans "SUBMIT" %}</button>
-                                </div>
-                            {% else %}
-                                {% include "hosting/includes/_card_input.html" %}
+                            {% endfor %}
+                            {% if card_list_len > 0 %}
+                            <div class="another-card-text">Use another card</div>
                             {% endif %}
+                            {% include "hosting/includes/_card_input.html" %}
                         </div>
                     </div>
+                    {% endwith %}
                 </div>
             </div>
         </div>