Release/6.0.0 trunk update (#2264)

* Use node version from .nvmrc (#2221)

* Use node version from .nvmrc
* Use node versin from .nvmrc for linting

* Reword "Stripe docs" to "Stripe plugin docs" (#2219)

Rewording "Stripe docs" to "Stripe plugin docs" in order to avoid any
confusion as to which documentation these links will navigate to.

* Fix payment methods' capitalization (#2218)

* Fix payment method names in sections: iDEAL, giropay, & Sofort

Before, when managing WooCommerce payment methods, the section names of
iDEAL, giropay, & Sofort were incorrectly capitalized. This fixes that
and also updates the POT extension file so that the reference links are
correct.

* Fix payment method names in "Get started with Stripe" description

Before, if one was not connected to Stripe, a card that allowed one to
connect to Stripe would appear. In that card, a description was
displayed where iDEAL and Sofort were not capitalized correctly. This
fixes the capitalization of these payment methods.

* Fix payment method names in admin notices: giropay, iDEAL, & Sofort

Before, if a payment method was enabled but the incorrect currency was
set, a notice would appear in the WooCommerce admin panel. These notices
had payment method names with incorrect capitalization. This has now
been fixed.

* Fix payment method names in customer checkout: iDEAL, giropay, Sofort

Before, when a customer was checking out with either iDEAL, giropay, or
Sofort, an icon would appear but the icon's "alt" text had the payment
method names incorrectly capitalized. This commit fixes that.

* Fix payment method names in payments tab: iDEAL, giropay, & Sofort

Before, when visiting the "Payments" tab of WooCommerce, the title of
the tab would have the payment method names incorrectly capitalized.
This commit fixes that.

Also, the POT extension file's references were updated to point to the
correct file-lines. And, log statements were updated to reflect the
correct capitalization of the payment methods.

* Fix Sofort's capitalization in invalid_sofort_country value

Before, at checkout, if a non-supported country was selected for Sofort,
a message indicating invalid country would appear but the capitalization
was incorrect. This commit fixes that.

* Fix payment method names in WC "Payments" tab: iDEAL, giropay, & Sofort

Before, in WooCommerce (WC) "Payments" tab, the names of some payment
methods were capitalized incorrectly. This commit fixes that.

* Fix Sofort payment method name's capitalization in title and label

Also, fix the corresponding tests.

* Fix payment method names in WC "Payments" tab: iDEAL and Sofort

Also, fix the capitalization of iDEAL in the tests file.

* Fix payment method names in comments: iDEAL, giropay, Sofort

Before, there was an inconsistency between the capitalization of the
payment method names that were displayed to the user versus what was in
the comments. This commit removes that inconsistency.

* Fix payment method names in readme.txt: Sofort, iDEAL, & giropay

This update fixes the capitalization of the payment methods: Sofort,
iDEAL, and giropay in the readme.txt file.

* Fix payment method names in the manual testing instructions

Before, some of the payment methods (iDEAL, giropay, Sofort) were
incorrectly capitalized in the plugin. So, the instructions were also
incorrectly capitalized. But since these payment methods' names have
been updated to reflect correct capitalization, these testing
instructions also need to be updated in order to stay consistent.

* Update changelog: Fixed capitalization for payment method names

* Update changelog

* Add webhook information to api key dialog (#2213)

* Add additional tests for payment capture failure cases (#2215)

* Add additional tests for payment capture failure cases

* Fix error code for refunded order capture

* Add tests for error codes

* Fix phpcs warnings

Co-authored-by: César Costa <[email protected]>

* Fix fragile payment gateway names (#2230)

* Use payment gateway label instead of array key, for gateway name

Before, payment gateway names were retrieved from array keys. This made
the code a bit fragile and required lowercasing the name for some use-
cases. Now, a label property was added into WC_Stripe_Payment_Gateway
class and that property is used to store the payment gateway
name, instead.

* Remove redundant lowercase call for UPE payment method names

Before, payment method names were being lowercased, even though the name
was already lowercase in all the respective payment method classes.

* Reuse method_title property, as opposed to adding a label property

Because the WC_Stripe_Payment_Gateway class already had a `method_title`
property that has the name of the payment gateway, it was a bit
redundant to add the `label` property. This commit removes the `label`
property and reuses the `method_title` property, instead. This does mean
that the payment method/gateway will read slightly different when UPE is
enabled/disabled.

See the following GH comment for more info:
#2230 (comment)

* chore: add listen npm script (#2236)

* Redirect to settings tab after account is connected (#2226)

* Change OAuth return URL for the settings page

* Redirect to settings page after keys are added

* Update changelog

* Remove code to enable Stripe after OAuth connect

* Correct the Stripe Account link URL on the Update Now Button (#2242)

* Correct the Stripe Account link URL

Fixes #2241 so that the link takes the customer to the Stripe Account page

* Fix linting errors on index.js

Fixed linting errors preventing #2242 from being merged

* Add conditional before trying to add mask to CPF/CNPJ field (#2237)

* added validation to prevent applying mask on non existent element when boleto is not active #2233

* added changelog entry #2233

* Show toast when payment methods list is updated (#2235)

* Add selectors to help with account capabilities

* Add filter to capability name

* Update tests

* Update changelog

* Update translation instructions

* Update pull request template (#2246)

* fixed bug that would require customer to click on use new payment met… (#2216)

* fixed bug that would require customer to click on use new payment method on pay order page when no payment card was saved #2163

* added changelog #2163

* change how the "Use new payment method" input is hidden on pay order #2163

* moved changelog entry to latest version

* Prompt message when navigating out Stripe settings with unsaved changes (#2243)

* Prompt message when navigating away with unsaved changes

* Do not prompt message on navigation triggered by WooCommerce

* Add changelog entries

* Typo

* Reset initial settings after form is saved

* Update copy

* Add missing changelog entries in readme.txt

* Add a reference to the transpiled JS file in POT file reference comments (#2250)

* Add wp-cli as dev dependency to composer
* Generate hidden-source-maps during production build
* Add the combine/update POT script from wc payments
* Update package.json scripts to inlcude POT combination during build
* Remove @wordpress/babel-plugin-makepot plugin from babel config

* Tweaks in the connect account modal (#2245)

* Disable autocomplete on account keys fields

* Does not close the modal when keys are invalid

* Refresh account before closing the modal

* Disable autocomplete on webhook url field

* Fix tests

* Update changelog

* Update version date

* Update release date placeholder to 2022

* Update readme.txt

* Product version bump update

Co-authored-by: Diego Curbelo <[email protected]>
Co-authored-by: Hector Lovo <[email protected]>
Co-authored-by: César Costa <[email protected]>
Co-authored-by: Kristófer Reykjalín <[email protected]>
Co-authored-by: Brian Yu <[email protected]>
Co-authored-by: Joash Rajin <[email protected]>
Co-authored-by: leonardo lopes de albuquerque <[email protected]>
Co-authored-by: Alfredo Sumaran <[email protected]>

Author: 9 people

.github/PULL_REQUEST_TEMPLATE.md

@@ -42,7 +42,7 @@ Please follow the following guidelines when writing testing instructions:
 ---
 
 -   [ ] Covered with tests (or have a good reason not to test in description ☝️)
--   [ ] Added changelog entry (or does not apply)
+-   [ ] Added changelog entry **in both** `changelog.txt` and `readme.txt` (or does not apply)
 -   [ ] Tested on mobile (or does not apply)
 
 **Post merge**

.github/workflows/js-tests.yml

@@ -10,6 +10,10 @@ jobs:
     steps:
       # clone the repository
       - uses: actions/checkout@v2
+      # use the node version defined in nvmrc
+      - uses: actions/setup-node@v2
+        with:
+          node-version-file: '.nvmrc'
       # enable dependencies caching
       - uses: actions/cache@v2
         with:

.github/workflows/linting.yml

@@ -33,6 +33,10 @@ jobs:
     steps:
       # clone the repository
       - uses: actions/checkout@v2
+      # use the node version defined in nvmrc
+      - uses: actions/setup-node@v2
+        with:
+          node-version-file: '.nvmrc'
       # enable dependencies caching
       - uses: actions/cache@v2
         with:

.gitignore

@@ -15,6 +15,7 @@ vendor
 release/
 build/
 woocommerce-gateway-stripe.zip
+languages/woocommerce-gateway-stripe.pot
 
 # Ignore all log files except for .htaccess
 /logs/*

assets/js/stripe.js

@@ -267,6 +267,10 @@ jQuery( function( $ ) {
 
 			//Mask CPF/CNPJ field when using Boleto
 			$( document ).on( 'change', '.wc_payment_methods', function () {
+				if ( ! $( '#stripe_boleto_tax_id' ).length ) {
+					return;
+				}
+
 				var TaxIdMaskBehavior = function ( val ) {
 						return val.replace( /\D/g, '' ).length >= 12 ? '00.000.000/0000-00' : '000.000.000-009999';
 					},
@@ -325,7 +329,7 @@ jQuery( function( $ ) {
 		},
 
 		/**
-		 * Check if Stripe Giropay is being used.
+		 * Check if Stripe giropay is being used.
 		 *
 		 * @return {boolean}
 		 */
@@ -334,7 +338,7 @@ jQuery( function( $ ) {
 		},
 
 		/**
-		 * Check if Stripe iDeal is being used.
+		 * Check if Stripe iDEAL is being used.
 		 *
 		 * @return {boolean}
 		 */
@@ -343,7 +347,7 @@ jQuery( function( $ ) {
 		},
 
 		/**
-		 * Check if Stripe SOFORT is being used.
+		 * Check if Stripe Sofort is being used.
 		 *
 		 * @return {boolean}
 		 */

assets/js/stripe.min.js

@@ -9,17 +9,4 @@ module.exports = {
 		'@babel/plugin-proposal-optional-chaining',
 		'@babel/plugin-proposal-nullish-coalescing-operator',
 	],
-	env: {
-		production: {
-			plugins: [
-				'@emotion',
-				[
-					'@wordpress/babel-plugin-makepot',
-					{
-						output: 'languages/woocommerce-gateway-stripe.pot',
-					},
-				],
-			],
-		},
-	},
 };

babel.config.js

@@ -0,0 +1,160 @@
+<?php
+// phpcs:ignoreFile - This is an auxiliary build tool, and not part of the plugin.
+
+/**
+ * Command line script for updating the file references of JS files in a .pot file.
+ */
+
+/**
+ * Get the file name from the command line.
+ */
+if ( $argc !== 2 ) {
+	echo "Usage: {$argc} php -f {$argv[0]} file.pot\n";
+	exit;
+}
+
+$pot_filename = $argv[1];
+
+if ( ! is_file( $pot_filename ) ) {
+	echo "[ERROR] File not found: {$pot_filename}\n";
+	exit;
+}
+
+/**
+ * Parses a .pot file into an array.
+ *
+ * @param string $file_name Pot file name.
+ * @return array Translation messages
+ */
+function read_pot_translations( string $file_name ): array {
+	$fh         = fopen( $file_name, 'r' );
+	$originals  = [];
+	$references = [];
+	$messages   = [];
+	$have_msgid = false;
+
+	while ( ! feof( $fh ) ) {
+		$line = trim( fgets( $fh ) );
+		if ( ! $line ) {
+			$message               = implode( "\n", $messages );
+			$originals[ $message ] = $references;
+			$references            = [];
+			$messages              = [];
+			$have_msgid            = false;
+			continue;
+		}
+
+		if ( 'msgid' == substr( $line, 0, 5 ) ) {
+			$have_msgid = true;
+		}
+
+		if ( $have_msgid ) {
+			$messages[] = $line;
+		} else {
+			$references[] = $line;
+		}
+	}
+
+	fclose( $fh );
+
+	$message               = implode( "\n", $messages );
+	$originals[ $message ] = $references;
+	return $originals;
+}
+
+/**
+ * Generates a map with the mapping for 'original source file' -> final transpiled/minified file in the 'dist' folder.
+ * Format example:
+ * [
+ *   'client/card-readers/settings/file-upload.js' => [
+ *     'build/index.js',
+ *     'build/tos.js',
+ *   ]
+ * ]
+ *
+ * @return array Mapping of source js files and the generated files that use them.
+ */
+function load_js_transpiling_source_maps(): array {
+	$mappings = [];
+	foreach ( glob( "build/*.js.map", GLOB_NOSORT ) as $filename ) {
+		$file_content = file_get_contents( $filename );
+		if ( $file_content === false ) {
+			echo "[WARN] Unable to read file '". $filename . "'. Some translation strings might not have the correct references as a result.\n";
+			continue;
+		}
+		$file_json = json_decode( $file_content, true );
+		if ( $file_json === null ) {
+			echo "[WARN] Unable to parse JSON file: '". $filename . "'. Some translation strings might not have the correct references as a result.\n";
+			continue;
+		}
+
+		foreach ( $file_json[ 'sources' ] as $source ) {
+			$source = preg_replace( '%^webpack:///\./(client/.*)$%', '${1}', $source );
+			if ( 'webpack' !== substr( $source, 0, 7 ) ) {
+				$mappings[ $source ][] = $file_json[ 'file' ];
+			}
+		}
+	}
+
+	if ( empty( $mappings ) ) {
+		echo "[ERROR] Unable to load JS transpiling mappings from 'build/*.js.map' files. Make sure the JS assets compilation was successful (e.g. npm run build:webpack).\n";
+		die();
+	}
+
+	return $mappings;
+}
+
+/**
+ * For each file reference to a javascript/typescript file (from the client folder) in the comments, it adds file
+ * references to the generated files (from the build folder) that use that particular javascript/typescript as source.
+ *
+ * @param array $js_mappings Mapping of source js files and the generated files that use them.
+ * @param array $translations POT translations (including references/comments).
+ * @return array Translation messages
+ */
+function add_transpiled_filepath_reference_to_comments( array $js_mappings, array $translations ): array {
+	foreach ( $translations as $message => $references ) {
+		// Check references for js/jsx/ts/tsx files
+		$dist_js_to_add = [];
+		foreach ( $references as $ref ) {
+			if ( preg_match( '%^#: (.+\.(js|jsx|ts|tsx)):\d+$%', $ref, $m ) ) {
+				if ( ! array_key_exists( $m[1], $js_mappings ) ) {
+					// The file $m[1] is not used in any of the generated client JS files. Skip it.
+					continue;
+				}
+
+				foreach ( $js_mappings[ $m[1] ] as $mapping ) {
+					$dist_js_to_add[] = '#: build/' . $mapping . ':1';
+				}
+			}
+		}
+
+		// Add the new file references to the top of the list.
+		if ( ! empty( $dist_js_to_add ) ) {
+			array_splice( $translations[ $message], 0, 0, array_unique( $dist_js_to_add ) );
+		}
+	}
+
+	return $translations;
+}
+
+// Read the translation .pot file.
+$originals = read_pot_translations( $pot_filename );
+
+// For transpiled JS client files, we need to add a reference to the generated build file.
+$js_source_maps = load_js_transpiling_source_maps();
+$originals = add_transpiled_filepath_reference_to_comments( $js_source_maps, $originals );
+
+// Delete the original source.
+unlink( $pot_filename );
+
+$fh = fopen( $pot_filename, 'w' );
+
+foreach ( $originals as $message => $original ) {
+	fwrite( $fh, implode( "\n", $original ) );
+	fwrite( $fh, "\n" . $message . "\n\n" );
+}
+
+fclose( $fh );
+
+echo "Updated {$pot_filename}\n";

bin/update-pot-file-references.php

@@ -1,5 +1,16 @@
 *** Changelog ***
 
+= 6.0.0 - 2022-01-05 =
+* Fix - Fixed capitalization for payment method names: iDEAL, giropay, and Sofort.
+* Add - Text to explain how to enable webhooks when manually entering your API keys in the new Stripe settings.
+* Tweak - Redirect to the settings tab after an account is connected.
+* Tweak - Prompt message when navigating out Stripe settings with unsaved changes
+* Tweak - Show toast when payment methods list is updated with new payment methods.
+* Fix - JS error on checkout when Boleto method was not active.
+* Fix - Fixed bug that show "Use new payment method" on pay order page when there were no saved card was.
+* Tweak - Autocomplete for account keys and webhooks fields were disabled.
+* Fix - The settings page is not reloaded when the user enters invalid account keys.
+
 = 5.9.0 - 2021-12-09 =
 * Add - Add Stripe API to generate connection tokens, manage terminal locations, create customers, get account summary, capture payment.
 * Tweak - Remove `_wcstripe_feature_upe` flag and all traces of old settings.

changelog.txt

@@ -336,6 +336,17 @@ jQuery( function ( $ ) {
 					setSelectedUPEPaymentType( selectedUPEPaymentType );
 					isUPEComplete = event.complete;
 				} );
+
+				/*
+				 * Trigger this event to ensure the tokenization-form.js init
+				 * is executed.
+				 *
+				 * This script handles the radio input interaction when toggling
+				 * between the user's saved card / entering new card details.
+				 *
+				 * Ref: https://github.com/woocommerce/woocommerce/blob/2429498/assets/js/frontend/tokenization-form.js#L109
+				 */
+				$( document.body ).trigger( 'wc-credit-card-form-init' );
 			} )
 			.catch( ( error ) => {
 				unblockUI( $( upeLoadingSelector ) );