MAGETWO-59196: Refactor Braintree Vault js on backend

 - Refactored Braintree Vault js component

Author: YevSent

app/code/Magento/Braintree/Model/Ui/Adminhtml/TokenUiComponentProvider.php

@@ -49,6 +49,7 @@ public function getComponentForToken(PaymentTokenInterface $paymentToken)
         $component = $this->componentFactory->create(
             [
                 'config' => [
+                    'code' => ConfigProvider::CC_VAULT_CODE,
                     'nonceUrl' => $this->getNonceRetrieveUrl(),
                     TokenUiComponentProviderInterface::COMPONENT_DETAILS => $data,
                     TokenUiComponentProviderInterface::COMPONENT_PUBLIC_HASH => $paymentToken->getPublicHash(),

app/code/Magento/Braintree/Test/Unit/Model/Ui/Adminhtml/TokenUiComponentProviderTest.php

@@ -7,10 +7,10 @@
 
 use Magento\Braintree\Model\Ui\Adminhtml\TokenUiComponentProvider;
 use Magento\Framework\UrlInterface;
-use Magento\Framework\View\Element\Template;
 use Magento\Vault\Api\Data\PaymentTokenInterface;
 use Magento\Vault\Model\Ui\TokenUiComponentInterface;
 use Magento\Vault\Model\Ui\TokenUiComponentInterfaceFactory;
+use PHPUnit_Framework_MockObject_MockObject as MockObject;
 
 /**
  * Class TokenUiComponentProviderTest
@@ -19,12 +19,12 @@ class TokenUiComponentProviderTest extends \PHPUnit_Framework_TestCase
 {
 
     /**
-     * @var TokenUiComponentInterfaceFactory|\PHPUnit_Framework_MockObject_MockObject
+     * @var TokenUiComponentInterfaceFactory|MockObject
      */
     private $componentFactory;
 
     /**
-     * @var UrlInterface|\PHPUnit_Framework_MockObject_MockObject
+     * @var UrlInterface|MockObject
      */
     private $urlBuilder;
 
@@ -59,6 +59,7 @@ public function testGetComponentForToken()
         $expirationDate = '12/2015';
 
         $expected = [
+            'code' => 'vault',
             'nonceUrl' => $nonceUrl,
             'details' => [
                 'type' => $type,

app/code/Magento/Braintree/view/adminhtml/templates/form/vault.phtml

@@ -7,14 +7,15 @@ use Magento\Vault\Model\Ui\TokenUiComponentProviderInterface;
 // @codingStandardsIgnoreFile
 
 /** @var \Magento\Framework\View\Element\Template $block */
-$details = $block->getData('details');
+$details = $block->getData(TokenUiComponentProviderInterface::COMPONENT_DETAILS);
 $icon = $block->getData('icons')[$details['type']];
 $id = $block->escapeHtml($block->getData('id'));
 ?>
 <div data-mage-init='{
         "Magento_Braintree/js/vault": {
             "container": "payment_<?php /* @noEscape */ echo $id; ?>",
             "publicHash": "<?php echo $block->escapeHtml($block->getData(TokenUiComponentProviderInterface::COMPONENT_PUBLIC_HASH)); ?>",
+            "code": "<?php echo $block->escapeHtml($block->getData('code')); ?>",
             "nonceUrl": "<?php echo $block->escapeUrl($block->getData('nonceUrl')); ?>"
         }
     }' id="payment_<?php /* @noEscape */ echo $id;?>" class="admin__field">

app/code/Magento/Braintree/view/adminhtml/web/js/vault.js

@@ -14,7 +14,8 @@ define([
     return Class.extend({
         defaults: {
             $selector: null,
-            selector: 'edit_form'
+            selector: 'edit_form',
+            $container: null
         },
 
         /**
@@ -25,32 +26,33 @@ define([
             var self = this;
 
             self.$selector = $('#' + self.selector);
+            self.$container =  $('#' + self.container);
             self.$selector.on(
                 'setVaultNotActive',
                 function () {
-                    self.$selector.off('submitOrder.braintree_vault');
+                    self.$selector.off('submitOrder.' + self.getCode());
                 }
             );
-            this._super();
+            self._super();
 
-            this.initEventHandlers();
+            self.initEventHandlers();
 
-            return this;
+            return self;
         },
 
         /**
          * Get payment code
          * @returns {String}
          */
         getCode: function () {
-            return 'braintree';
+            return this.code;
         },
 
         /**
          * Init event handlers
          */
         initEventHandlers: function () {
-            $('#' + this.container).find('[name="payment[token_switcher]"]')
+            $(this.$container).find('[name="payment[token_switcher]"]')
                 .on('click', this.selectPaymentMethod.bind(this));
         },
 
@@ -66,7 +68,7 @@ define([
          * Enable form event listeners
          */
         enableEventListeners: function () {
-            this.$selector.on('submitOrder.braintree_vault', this.submitOrder.bind(this));
+            this.$selector.on('submitOrder.' + this.getCode(), this.submitOrder.bind(this));
         },
 
         /**
@@ -129,7 +131,7 @@ define([
             this.createPublicHashSelector();
 
             this.$selector.find('[name="payment[public_hash]"]').val(this.publicHash);
-            this.$selector.find('#braintree_nonce').val(nonce);
+            this.$container.find('#' + this.getNonceSelectorName()).val(nonce);
         },
 
         /**
@@ -138,16 +140,16 @@ define([
         createPublicHashSelector: function () {
             var $input;
 
-            if (this.$selector.find('#braintree_nonce').size() === 0) {
+            if (this.$container.find('#' + this.getNonceSelectorName()).size() === 0) {
                 $input = $('<input>').attr(
                     {
                         type: 'hidden',
-                        id: 'braintree_nonce',
+                        id: this.getNonceSelectorName(),
                         name: 'payment[payment_method_nonce]'
                     }
                 );
 
-                $input.appendTo(this.$selector);
+                $input.appendTo(this.$container);
                 $input.prop('disabled', false);
             }
         },
@@ -160,6 +162,14 @@ define([
             alert({
                 content: message
             });
+        },
+
+        /**
+         * Get selector name for nonce input
+         * @returns {String}
+         */
+        getNonceSelectorName: function () {
+            return 'nonce_' + this.getCode();
         }
     });
 });