Merge pull request #26 from woocommerce/issue-19-dcc-logos

Adds spacing to visible logos in checkout, and removes logos and related HTML from order confirmation page.

modules/ppcp-button/resources/css/hosted-fields.scss

@@ -0,0 +1,5 @@
+#payment ul.payment_methods li img.ppcp-card-icon {
+  padding: 0 0 3px 3px;
+  max-height: 25px;
+  display: inline-block;
+}

modules/ppcp-button/src/Assets/class-smartbutton.php

@@ -321,6 +321,14 @@ class SmartButton implements SmartButtonInterface {
 			$load_script = true;
 		}
 
+		if ( is_checkout() && $this->can_render_dcc() ) {
+			wp_enqueue_style(
+				'ppcp-hosted-fields',
+				$this->module_url . '/assets/css/hosted-fields.css',
+				array(),
+				1
+			);
+		}
 		if ( $load_script ) {
 			wp_enqueue_script(
 				'ppcp-smart-button',
@@ -459,17 +467,23 @@ class SmartButton implements SmartButtonInterface {
 	}
 
 	/**
-	 * Renders the HTML for the DCC fields.
+	 * Whether DCC fields can be rendered.
 	 *
-	 * @throws \WooCommerce\PayPalCommerce\WcGateway\Exception\NotFoundException When a setting hasnt been found.
+	 * @return bool
+	 * @throws \WooCommerce\PayPalCommerce\WcGateway\Exception\NotFoundException When a setting was not found.
+	 */
+	private function can_render_dcc() : bool {
+
+		return $this->settings->has( 'dcc_enabled' ) && $this->settings->get( 'dcc_enabled' ) && $this->settings->has( 'client_id' ) && $this->settings->get( 'client_id' ) && $this->dcc_applies->for_country_currency();
+	}
+
+	/**
+	 * Renders the HTML for the DCC fields.
 	 */
 	public function dcc_renderer() {
 
-		$id             = 'ppcp-hosted-fields';
-		$can_render_dcc = $this->dcc_applies->for_country_currency()
-				&& $this->settings->has( 'client_id' )
-				&& $this->settings->get( 'client_id' );
-		if ( ! $can_render_dcc ) {
+		$id = 'ppcp-hosted-fields';
+		if ( ! $this->can_render_dcc() ) {
 			return;
 		}
 
@@ -489,7 +503,7 @@ class SmartButton implements SmartButtonInterface {
 		) : '';
 
 		printf(
-			'<div id="%1$s">
+			'<div id="%1$s" style="display:none;">
                         <button class="button alt">%6$s</button>
                     </div><div id="payments-sdk__contingency-lightbox"></div><style id="ppcp-hide-dcc">.payment_method_ppcp-credit-card-gateway {display:none;}</style>',
 			esc_attr( $id ),

modules/ppcp-button/webpack.config.js

@@ -6,7 +6,8 @@ module.exports = {
     mode: isProduction ? 'production' : 'development',
     target: 'web',
     entry: {
-        button: path.resolve('./resources/js/button.js')
+        button: path.resolve('./resources/js/button.js'),
+        "hosted-fields": path.resolve('./resources/css/hosted-fields.scss')
     },
     output: {
         path: path.resolve(__dirname, 'assets/'),

modules/ppcp-onboarding/assets/js/settings.js

@@ -59,17 +59,55 @@ const groupToggleSelect = (selector, group) => {
     );
 }
 
+const disableOptions = (sourceSelector, targetSelector) => {
+
+    const source = jQuery(sourceSelector);
+    const target = document.querySelector(targetSelector);
+    if (! target) {
+        return;
+    }
+    const allOptions = Array.from(document.querySelectorAll('select[name="ppcp[disable_cards][]"] option'));
+    const replace = () => {
+        const validOptions = allOptions.filter(
+            (option) => {
+
+                return ! option.selected
+            }
+        );
+        const selectedValidOptions = validOptions.map(
+            (option) => {
+                option = option.cloneNode(true);
+                option.selected = target.querySelector('option[value="' + option.value + '"]') && target.querySelector('option[value="' + option.value + '"]').selected;
+                return option;
+            }
+        );
+        target.innerHTML = '';
+        selectedValidOptions.forEach(
+            (option) => {
+                target.append(option);
+            }
+        );
+    }
+
+    source.on('change',replace);
+    replace();
+}
+
 (() => {
-    document.querySelector('#field-toggle_manual_input').addEventListener(
-        'click',
-        (event) => {
-            event.preventDefault();
-            document.querySelector('#field-toggle_manual_input').classList.toggle('show');
-            document.querySelector('#field-merchant_id').classList.toggle('show');
-            document.querySelector('#field-client_id').classList.toggle('show');
-            document.querySelector('#field-client_secret').classList.toggle('show');
-        }
-    )
+    const manualInputToggle = document.querySelector('#field-toggle_manual_input');
+    if (manualInputToggle) {
+        manualInputToggle.addEventListener(
+            'click',
+            (event) => {
+                event.preventDefault();
+                document.querySelector('#field-toggle_manual_input').classList.toggle('show');
+                document.querySelector('#field-merchant_id').classList.toggle('show');
+                document.querySelector('#field-client_id').classList.toggle('show');
+                document.querySelector('#field-client_secret').classList.toggle('show');
+            }
+        )
+    }
+    disableOptions('select[name="ppcp[disable_cards][]"]', 'select[name="ppcp[card_icons][]"]');
 
     groupToggle(
         '#ppcp-button_enabled',

modules/ppcp-wc-gateway/src/Gateway/class-creditcardgateway.php

@@ -133,9 +133,11 @@ class CreditCardGateway extends \WC_Payment_Gateway_CC {
 	 */
 	public function get_title() {
 
-		if ( is_admin() ) {
+		//phpcs:disable WordPress.Security.NonceVerification.Recommended
+		if ( ! is_checkout() || ( is_ajax() && isset( $_GET['wc-ajax'] ) && 'update_order_review' !== $_GET['wc-ajax'] ) ) {
 			return parent::get_title();
 		}
+		//phpcs:enable WordPress.Security.NonceVerification.Recommended
 		$title = parent::get_title();
 		$icons = $this->config->has( 'card_icons' ) ? (array) $this->config->get( 'card_icons' ) : array();
 		if ( empty( $icons ) ) {