MAGETWO-39881: [Tech Debt] Enable CC auto-detection for Braintree

- credit card autodetect in My Credit Cards Braintree vault
- spacer on credit cards images types, when vault is enabled, to not overlap the dropdown with the cards list

Author: Cristian Partica

app/code/Magento/Braintree/view/frontend/web/js/cc-edit-form.js

@@ -44,6 +44,15 @@ define([
         _create: function () {
             if (!this.preventDoubleInit()) {
                 var self = this;
+                this.ccTypes = {
+                    VI: [new RegExp('^4[0-9]{12}([0-9]{3})?$'), new RegExp('^[0-9]{3}$')],
+                    MC: [new RegExp('^5[1-5][0-9]{14}$'), new RegExp('^[0-9]{3}$')],
+                    AE: [new RegExp('^3[47][0-9]{13}$'), new RegExp('^[0-9]{4}$')],
+                    DI: [new RegExp('^6011[0-9]{12}$'), new RegExp('^[0-9]{3}$')],
+                    JCB: [new RegExp('^(3[0-9]{15}|(2131|1800)[0-9]{11})$'), new RegExp('^[0-9]{3,4}$')],
+                    OT: [false, new RegExp('^([0-9]{3}|[0-9]{4})?$')]
+                };
+
                 self.options.braintreeClient = new braintree.api.Client({clientToken: this.options.clientToken});
                 $(self.options.formId).on('submit', function (e) {
                     e.preventDefault();
@@ -57,6 +66,23 @@ define([
                 $(self.options.billingAddressCountry).on('change', function (e) {
                     self.populateCountrySpecificCCType();
                 });
+
+                $(self.options.creditCardNumber).on('input', function () {
+                    var ccNumber = $(this).val(),
+                        ccTypeField = $(self.options.creditCardTypeId).find('options');
+                    ccNumber = ccNumber.replace(/\D/g,''); //remove all but the digits
+                    for(var ccType in self.ccTypes) {
+                        if(self.ccTypes.hasOwnProperty(ccType)) {
+                            var ccRegex = self.ccTypes[ccType][0];
+                            if(ccRegex && ccNumber.match(ccRegex)) {
+                                if ($(self.options.creditCardTypeId).find('option').length>0) {
+                                        $(self.options.creditCardTypeId).val(ccType);
+                                }
+                            }
+                        }
+                    }
+                });
+
                 $(self.options.billingAddressCountry).trigger('change');
             }
 

app/code/Magento/Braintree/view/frontend/web/template/payment/cc-form.html

@@ -38,6 +38,7 @@
         </div>
     </div>
     <!-- /ko -->
+    <div>&nbsp;</div>
     <div class="field type required" data-bind="visible: isCcFormShown">
         <label data-bind="attr: {for: getCode() + '_cc_type'}" class="label">
             <span><!-- ko text: $t('Credit Card Type')--><!-- /ko --></span>