From 55a9a4f496c5986ab1e779361c6aaa1e82270656 Mon Sep 17 00:00:00 2001
From: Mathieu Lutfy <mathieu@bidon.ca>
Date: Fri, 3 May 2013 12:06:04 -0400
Subject: [PATCH] CRM-12515: improving the credit card type in contribution
 forms.

---
 CRM/Core/Payment/Form.php           |  18 ++++++++++
 css/civicrm.css                     |  35 ++++++++++++++++++++
 i/cc-amex.gif                       | Bin 0 -> 645 bytes
 i/cc-discover.gif                   | Bin 0 -> 377 bytes
 i/cc-mastercard.gif                 | Bin 0 -> 808 bytes
 i/cc-visa.gif                       | Bin 0 -> 365 bytes
 templates/CRM/Core/BillingBlock.js  |  49 ++++++++++++++++++++++++++++
 templates/CRM/Core/BillingBlock.tpl |   5 ++-
 8 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 i/cc-amex.gif
 create mode 100644 i/cc-discover.gif
 create mode 100644 i/cc-mastercard.gif
 create mode 100644 i/cc-visa.gif
 create mode 100644 templates/CRM/Core/BillingBlock.js

diff --git a/CRM/Core/Payment/Form.php b/CRM/Core/Payment/Form.php
index 09ac4ef709..b6fdd3b86c 100644
--- a/CRM/Core/Payment/Form.php
+++ b/CRM/Core/Payment/Form.php
@@ -271,6 +271,24 @@ class CRM_Core_Payment_Form {
           'state_province' => "billing_state_province_id-{$form->_bltID}",
         ));
       CRM_Core_BAO_Address::addStateCountryMap($stateCountryMap);
+
+      // Add JS to show icons for the accepted credit cards
+      // the credit card pseudo constant results only the CC label, not the key ID
+      // so we normalize the name to use it as a CSS class.
+      $creditCardTypes = array();
+      foreach (CRM_Contribute_PseudoConstant::creditCard() as $key => $name) {
+        // Replace anything not css-friendly by an underscore
+        // Non-latin names will not like this, but so many things are wrong with
+        // the credit-card type configurations already.
+        $key = str_replace(' ', '', $key);
+        $key = preg_replace('/[^a-zA-Z0-9]/', '_', $key);
+        $key = strtolower($key);
+        $creditCardTypes[$key] = $name;
+      }
+
+      CRM_Core_Resources::singleton()
+        ->addSetting(array('config' => array('creditCardTypes' => $creditCardTypes)))
+        ->addScriptFile('civicrm', 'templates/CRM/Core/BillingBlock.js');
     }
 
     if ($form->_paymentProcessor['billing_mode'] & CRM_Core_Payment::BILLING_MODE_BUTTON) {
diff --git a/css/civicrm.css b/css/civicrm.css
index 67b07bd90d..38eb1e5a55 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3959,3 +3959,38 @@ span.crm-status-icon {
   border: 1px solid #000;
   text-align: center;
 }
+
+/* Styles for credit card payment logos (FIXME: replace with sprite?) */
+#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-visa {
+  background: url(../i/cc-visa.gif) no-repeat 0 0 transparent;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-mastercard {
+  background: url(../i/cc-mastercard.gif) no-repeat 0 0 transparent;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-amex {
+  background: url(../i/cc-amex.gif) no-repeat 0 0 transparent;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-discover {
+  background: url(../i/cc-discover.gif) no-repeat 0 0 transparent;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a {
+  display: block;
+  float: left;
+  width: 50px;
+  height: 22px;
+  text-indent: -20000px;
+}
+
+/* Avoid weird border around the images */
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a,
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a:link,
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a:hover,
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a:focus,
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a:active {
+  color: #fff;
+}
+
diff --git a/i/cc-amex.gif b/i/cc-amex.gif
new file mode 100644
index 0000000000000000000000000000000000000000..fd45ef04261ca4d4dfe75d30a407607e1f2a0112
GIT binary patch
literal 645
zcmV;00($*NNk%w1VI=?+0M!5h)#&s9XSD!nwMD4ccg5?7yxl~Y%xJsh0CKrksMNOA
z>Wj$d09&m9iN+>|!u9(8H>K8Hw&NCiyL-3W0+h{es@4Ag|2B=r>-PI&wci<n!C<7)
zP@2pDVXpvfw^Oj)JCn$p$mDda)dX_40C&8_;P4=X!77l+3wF6!pwD8f))}4Aq0;Pp
z%I|>9@ovEBX{Xc=c)Dw_*Cc(v4sNwJp49a8^!E4oVVud{>hdU{)8X&;0DizkjlrS8
z-v9sqA^8LW002J#EC2ui03`qw000L6z~ApcD7ucV;vw=GKy(yJqrs~pt{#Clz!eIK
z#-wuDgsh@dD>l3BdNbhSnCv`DscLq+<NZYraW8^&PiS}~h-+MneIHDJkW2%UP<MHI
ziyaJo10M^Ypq~T>5D-n1P6n#092c4w20ffC54E<o7!d@wyu2J0wtX2E02><s78Vm5
z1r{a9A{!wODk;_}1;0DBJ{%=|(-R;D6Uh!8Bqg;hS_2OrF(4NgECmc37C!e6eGfS?
zAwr-)c0$7d4#`eTK#|~`fo&L)>AOG!n2mk~E&u><q1=fJ?@F*h@E}HtcOxXI6p_rH
z17!TXl+-|z=7WzIG;9Fj4h2G@0U$mV*rq^b0G2U@6fp4tPy`bTOgMO8FMzrcKQAcQ
z3ZMkg9Wpvh$k9i_Nn0sS)NohAggXl+VBCx`;tB^24od9EVPHmxezhRH?M1k750>is
z$dF;6ih;$DRV+4E0S4vDm|?gI@C!#DEmsoh!KA4)gVU(Fp#B`XwW86aGi_+g#|!8+
fxM9auy#d3F+CpyY9-gUqan{7!C^ybrNDu%!L`@`-

literal 0
HcmV?d00001

diff --git a/i/cc-discover.gif b/i/cc-discover.gif
new file mode 100644
index 0000000000000000000000000000000000000000..b5d4e9ca084668927259894295968c77720f39c2
GIT binary patch
literal 377
zcmZ?wbhEHbRAmrlXc1<Rlb1C!Hwh07D=IGO>Mr`yq%v{F<YTkTe#{Bjv1a@4b-BOx
zb)7wP=I@n7ckjRW{p#eO*B?H8{P^$N$N$6u#h)yUTnzFIIt)MnvXg=Jn}Tv*O6I&3
z7He}}?=x6)tVGwiY~J}r#;!YNI;&RNsPV{O5{W#^!qA|=Xu!b4mc{VFp+b=PV2f9W
z6Eh>DfVrTAL?dH@fQQQlkCsIj17sNZn3&m^ctZFX9CPw=1Ne#pa#*?DxVf7;*)qd|
zeElPf88~?o3zNC3Yk5PGT0DZ1ytM-uSa=qO76it|aod*)&*`f$HsJH}(BT)-$uT)<
z$jq4^+01z<nAz9xf<YoP4_kjT+bqs310k-v$8`B_n+kEWvc9qU`1#A%bKgw`e*XIQ
sb@fLF#{&)De*JYW_>kZvEg)r(bK`?z4?DM7(2^O87Q2fmGB8*J0Ch&CX#fBK

literal 0
HcmV?d00001

diff --git a/i/cc-mastercard.gif b/i/cc-mastercard.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a2313881a1b8cbe5989a96f71beee4698ac4fd12
GIT binary patch
literal 808
zcmZ?wbhEHbRAmrlc$UWS{==7lT6`1Jts~w1|Az=f%J^Pjm6{-IeyBzD1C!v#1(FAk
zUj1Ju<ZT!1Ef;kE;Y&M(a68k8gKYATXUJW+eE%xDjDc>ffpYA>{f90bzHqHy`7x{b
zKYRXzTaRAYeDMF}&VQo3|4-!HpEU2^xr-Mg<^H{U|L@(Uf1e*V$2t6;Cvsu&rY2FF
zi@l2XnZ*u<W|xM!mYO^N?-YKos6V-D+2p9o|0O~jr>*%vS@_@2_x}&a{!`#P7^Qr0
z{j7iWt^c@r9~_+YZ~o$gZZYYS?*HyRSX}G<@A206Pp|!ZdE|kG#Ct=#HRXm|IaUA1
z3qClu;Qv1V_xlSjoV&1T_1XtLG82p}FQ`~PsL@)(r}O^8)e9|?4=&yIV4Cdz&4%wE
zoY=H%-u<M4QgNq$2A2Q+{Zmp+`oBWt9|I2q1H=FS|A8d6fZ|UUMh1p71|5)rpg3V*
z|KE_7mfF(V*51+C-qe(u)ITAKkCoktZ{h@AW+rCd8U3j}%`>#6Q<g91WEW2oW8zBQ
zxKUVR#=@Syem>C^dsiB4*mNjaYTklHI|VrRosls=e3(n{_>TTPXU^DZUN|Imr8g=5
z#$E-UXNGqU=_hS}u<Y@2E5^@^FE<IlIU$guBoQZ(P<8T!<AQ{PTCRO94cAm$TFRQa
zBshfIoMvbzx+QQhEAUL{QSxdrywvI~AsldM&H=^)CmA|YxdIk?Ts+3qB^gq&qQlsy
z&oD60u0o*AeTJ_7L{W}Q6EkM;IA;We2p)50XV5!TQz4Y*c$`(eu0?XPh&YRm`R0fv
zk%yAn4P06$pK0J;kSw7j>swRN;d4faxgpv^LT4dsf{L}r1O)|FMsAh~kv)xTSmk{T
z*&obha_sNi8^QD`RJfQ|j=lKyn@o<{$V*0NQ?hEp64q>8Qhr0ohx1r&li|e&3b7U+
vc1;)MNK(>hT;|Zw>ak5(G@|f<17p}kogATtqyy>?nngP0_n+`lV6X-Ns<=sx

literal 0
HcmV?d00001

diff --git a/i/cc-visa.gif b/i/cc-visa.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7dc08c09bc7992d0867257551b53474413c29e61
GIT binary patch
literal 365
zcmZ?wbhEHbRAmrlXpv-K2w%Wov{FBBt8ZRGd0Dh)%g&ZbK3RRoN*AAOUwdiSy6|61
zrN6AOTf6_ks<SWt9t}Nn=FG2i#V4=5{Cj25l}8_+y!rO~)yel?fByUN<Ucl`_>+Z^
zi$R`2hXDvcb~3QOQc&qj$(*-h#@d|M`wZ3`E75f>n|HqI|EGPTu1YI!xJ*8tv@=1G
zp~0Ey)(H=mfLEs`u3eWVaqQA2E(dK^4a3<}*IWu<=`L5$QIphLFySDR9(w@03#YiG
zXiiPMg*Gn(o1kPtXaM7+046t`Mus$o;-2;ZF7c^h0X2P*MUvuaO#Tdck`58f!3;&K
z*6e7K+`(DJ*{!=V((QmwMr3W_9QGqRRV(tdghZTjb0V28YA=oC)2<WuXDX<Ear@rm
z89HZPF))cN)83Ki5XN~>=Xa>+?{A%pAM~>xWclI5$~h^2VP6|x|B@LVA6+;YtN|}(
Br^WyP

literal 0
HcmV?d00001

diff --git a/templates/CRM/Core/BillingBlock.js b/templates/CRM/Core/BillingBlock.js
new file mode 100644
index 0000000000..33fdad0f21
--- /dev/null
+++ b/templates/CRM/Core/BillingBlock.js
@@ -0,0 +1,49 @@
+// http://civicrm.org/licensing
+(function($) {
+  function civicrm_billingblock_add_cc_logos() {
+    $.each(CRM.config.creditCardTypes, function(key, val) {
+      var html = '<a href="#" title="' + val + '" class="crm-credit_card_type-logo-' + key + '"><span>' + val + '</span></a>';
+      $('.crm-credit_card_type-logos').append(html);
+
+      cj('.crm-credit_card_type-logo-' + key).click(function() {
+        cj('#crm-container .credit_card_type-section #credit_card_type').val(val);
+        cj('#crm-container .credit_card_type-section a').css('opacity', 0.4);
+        cj('#crm-container .credit_card_type-section .crm-credit_card_type-logo-' + key).css('opacity', 1);
+        return false;
+      });
+
+      // Hide the CC type field (redundant)
+      $('#crm-container .credit_card_type-section select#credit_card_type').hide();
+      $('#crm-container .credit_card_type-section .label').hide();
+
+      // Select according to the number entered
+      cj('#crm-container input#credit_card_number').change(function() {
+        var ccnumtype = cj(this).val().substr(0, 4);
+
+        // Semi-hide all images, we will un-hide the right one afterwards
+        cj('#crm-container .credit_card_type-section a').css('opacity', 0.4);
+        cj('#credit_card_type').val('');
+
+        // https://en.wikipedia.org/wiki/Credit_card_numbers
+        if (ccnumtype.substr(0, 1) == '3') {
+          cj('#credit_card_type').val('Amex');
+          cj('#crm-container .credit_card_type-section .crm-credit_card_type-logo-visa').css('opacity', 1);
+        }
+        else if (ccnumtype.substr(0, 2) >= '51' && ccnumtype.substr(0, 2) <= '55') {
+          cj('#credit_card_type').val('MasterCard');
+          cj('#crm-container .credit_card_type-section .crm-credit_card_type-logo-mastercard').css('opacity', 1);
+        }
+        else if (ccnumtype.substr(0, 1) == '4') {
+          cj('#credit_card_type').val('Visa');
+          cj('#crm-container .credit_card_type-section .crm-credit_card_type-logo-visa').css('opacity', 1);
+        }
+      });
+    });
+  }
+
+  civicrm_billingblock_add_cc_logos();
+
+  $('#crm-container').on('crmFormLoad', '*', function() {
+    civicrm_billingblock_add_cc_logos();
+  });
+})(cj);
diff --git a/templates/CRM/Core/BillingBlock.tpl b/templates/CRM/Core/BillingBlock.tpl
index 3936b3562b..ec1fb2f26c 100644
--- a/templates/CRM/Core/BillingBlock.tpl
+++ b/templates/CRM/Core/BillingBlock.tpl
@@ -81,7 +81,10 @@
                     {else}
                         <div class="crm-section {$form.credit_card_type.name}-section">
                              <div class="label">{$form.credit_card_type.label} {$reqMark}</div>
-                             <div class="content">{$form.credit_card_type.html}</div>
+                             <div class="content">
+                                 {$form.credit_card_type.html}
+                                 <div class="crm-credit_card_type-logos"></div>
+                             </div>
                              <div class="clear"></div>
                         </div>
                         <div class="crm-section {$form.credit_card_number.name}-section">
-- 
2.25.1