From f45ec160913d38525db4daa3dc1077e115b6f26f Mon Sep 17 00:00:00 2001
From: Arvind Tiwari <tiwariav@gmail.com>
Date: Wed, 30 Aug 2017 19:35:23 +0530
Subject: [PATCH] added options to card details

---
 hosting/static/hosting/css/commons.css      | 24 ++++++++++++++++++++-
 hosting/static/hosting/css/landing-page.css |  5 +++--
 hosting/static/hosting/img/delete.svg       |  7 ++++++
 hosting/templates/hosting/settings.html     | 17 +++++++++++++--
 4 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 hosting/static/hosting/img/delete.svg

diff --git a/hosting/static/hosting/css/commons.css b/hosting/static/hosting/css/commons.css
index dd81a423..18edfa22 100644
--- a/hosting/static/hosting/css/commons.css
+++ b/hosting/static/hosting/css/commons.css
@@ -246,7 +246,8 @@
 
 .settings-container h4 {
   margin-bottom: 15px;
-  color: #999;
+  color: #333;
+  font-size: 14px;
 }
 
 .settings-container .card-expiry-element,
@@ -287,4 +288,25 @@
 
 .btn-wide {
   min-width: 120px;
+}
+
+.caps_link {
+  font-weight: 600;
+  color: #8da4c0;
+  fill: #8da4c0;
+  padding: 6px 0;
+  display: block;
+}
+.caps_link:hover {
+  color: #627388;
+  fill: #627388;
+  text-decoration: none;
+}
+
+.settings-container .credit-card-details-opt {
+  padding-top: 15px;
+}
+
+.caps_link .un-icon {
+  margin-right: 5px;
 }
\ No newline at end of file
diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css
index d1dc657a..07e7490c 100644
--- a/hosting/static/hosting/css/landing-page.css
+++ b/hosting/static/hosting/css/landing-page.css
@@ -568,6 +568,7 @@ a.unlink:hover {
     border: 1px solid #a1a1a1;
     border-radius: 3px;
     padding: 5px;
+    margin-bottom: 15px;
 }
 .card-warning-error {
     border: 1px solid #EB4D5C;
@@ -725,12 +726,12 @@ a.unlink:hover {
 
 @media (min-width: 768px) {
     .dcl-billing {
-        padding-right: 50px;
+        padding-right: 65px;
         border-right: 1px solid #eee;
     }
 
     .dcl-creditcard {
-        padding-left: 50px;
+        padding-left: 65px;
     }
 
     .tbl-tot {
diff --git a/hosting/static/hosting/img/delete.svg b/hosting/static/hosting/img/delete.svg
new file mode 100644
index 00000000..31991c4a
--- /dev/null
+++ b/hosting/static/hosting/img/delete.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path d="M185,150h630c19.3,0,35-15.7,35-35s-15.7-35-35-35H605c0-38.7-31.3-70-70-70h-70c-38.7,0-70,31.3-70,70H185c-19.3,0-35,15.7-35,35S165.7,150,185,150z"/><path d="M885,220h-69.9c-0.1,0-0.3,0-0.4,0H395.1c0,0-0.1,0-0.1,0H185.3c-0.1,0-0.2,0-0.3,0h-70c-19.3,0-35,15.7-35,35c0,19.3,15.7,35,35,35h39.9l100.5,670.2C258,977.3,272.7,990,290,990h139.9c0,0,0,0,0,0c0,0,0,0,0,0h140c0,0,0,0,0,0c0,0,0,0,0,0H710c17.3,0,32-12.7,34.6-29.8L845.1,290H885c19.3,0,35-15.7,35-35C920,235.7,904.3,220,885,220z M463.3,920l-31.5-630h136.4l-31.5,630H463.3z M225.6,290h136.1l31.5,630h-73.1L225.6,290z M679.9,920h-73.1l31.5-630h136.1L679.9,920z"/></g>
+</svg>
\ No newline at end of file
diff --git a/hosting/templates/hosting/settings.html b/hosting/templates/hosting/settings.html
index 11283b94..04a2a017 100644
--- a/hosting/templates/hosting/settings.html
+++ b/hosting/templates/hosting/settings.html
@@ -27,14 +27,27 @@
                     <hr>
                     <div>
                         <div>
-                            {% if credit_card_data.last4 %}
+                            {% if not credit_card_data.last4 %}
                                 <div class="credit-card-details">
                                     <h5 class="billing-head">{% trans "Credit Card" %}</h5>
                                     <h5 class="membership-lead">{% trans "Last" %} 4: *****{{credit_card_data.last4}}</h5>
                                     <h5 class="membership-lead">{% trans "Type" %}: {{credit_card_data.cc_brand}}</h5>
+                                    <div class="credit-card-details-opt">
+                                        <div class="row">
+                                            <div class="col-xs-6">
+                                                <a class="caps_link" href=""><img src="{% static 'hosting/img/delete.svg' %}" class="un-icon">REMOVE CARD</a>
+                                            </div>
+                                            <div class="col-xs-6 text-right">
+                                                <a class="btn btn-sm btn-vm-contact" href="">{% trans "EDIT CARD" %}</a>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                             {% else %}
-                                <h4>{% trans "Add a new Card." %}</h4>
+                                <h4>
+                                    {% trans "Add a new Card." %}<br>
+                                    {% trans "We are using Stripe for payment and store your information in our database." %}
+                                </h4>
                                 <form action="" id="payment-form-new" class="credit-card-form" method="POST">
                                     <input type="hidden" name="token"/>
                                     <div class="credit-card-goup">