Fix full bank statement field description (#2283)

* Fix typo: spacing between words and the dash line

* Add tooltip to bank statement field, indicating acceptable input

The tooltip indicates what input is acceptable in the bank statement
field.

* Update changelog: Fixed full bank statement field description

* Rephrase bank statement input requirement messages

Rephrasing in order to clarify what characters can be input for the
bank statement field.

* Remove unneeded style: flex-shrink

Author: lovo-h

changelog.txt

@@ -4,6 +4,7 @@
 * Tweak - Use the newly exposed LoadableMask component provided by WooCommerce Blocks to trigger the loading state for Payment Request Buttons.
 * Add - Add filter call when updating an existent intent (wc_stripe_update_existing_intent_request).
 * Add - Add ability to test Stripe account keys' validity.
+* Fix - Fixed full bank statement field description.
 
 = 6.0.0 - 2022-01-05 =
 * Fix - Fixed capitalization for payment method names: iDEAL, giropay, and Sofort.

client/settings/payments-and-transactions-section/index.js

@@ -1,11 +1,13 @@
 import { __ } from '@wordpress/i18n';
 import React, { useContext } from 'react';
 import { Card, CheckboxControl, TextControl } from '@wordpress/components';
+import { Icon, help } from '@wordpress/icons';
 import CardBody from '../card-body';
 import TextLengthHelpInputWrapper from './text-length-help-input-wrapper';
 import StatementPreviewsWrapper from './statement-previews-wrapper';
 import StatementPreview from './statement-preview';
 import ManualCaptureControl from './manual-capture-control';
+import Tooltip from 'wcstripe/components/tooltip';
 import {
 	useSavedCards,
 	useSeparateCardForm,
@@ -17,6 +19,19 @@ import {
 import InlineNotice from 'wcstripe/components/inline-notice';
 import UpeToggleContext from 'wcstripe/settings/upe-toggle/context';
 
+const TooltipBankStatementHelp = () => (
+	<Tooltip
+		content={ __(
+			'The bank statement must contain only Latin characters, be between 5 and 22 characters, and not contain any of the special characters: \' " * < >',
+			'woocommerce-gateway-stripe'
+		) }
+	>
+		<span>
+			<Icon style={ { fill: '#949494' } } icon={ help } />
+		</span>
+	</Tooltip>
+);
+
 const PaymentsAndTransactionsSection = () => {
 	const [ isSavedCardsEnabled, setIsSavedCardsEnabled ] = useSavedCards();
 	const [
@@ -104,10 +119,11 @@ const PaymentsAndTransactionsSection = () => {
 				<TextLengthHelpInputWrapper
 					textLength={ accountStatementDescriptor.length }
 					maxLength={ 22 }
+					iconSlot={ <TooltipBankStatementHelp /> }
 				>
 					<TextControl
 						help={ __(
-							'Enter the name your customers will see on their transactions. Use a recognizable name – e.g. the legal entity name or website address–to avoid potential disputes and chargebacks.',
+							'Enter the name your customers will see on their transactions. Use a recognizable name – e.g. the legal entity name or website address – to avoid potential disputes and chargebacks.',
 							'woocommerce-gateway-stripe'
 						) }
 						label={ __(

client/settings/payments-and-transactions-section/text-length-help-input-wrapper.js

@@ -29,16 +29,32 @@ const HelpText = styled.span`
 	}
 `;
 
+const DivIcon = styled.div`
+	position: absolute;
+	top: 33px;
+	right: -24px;
+
+	width: 1.5rem;
+	height: 1.5rem;
+
+	@media ( min-width: 783px ) {
+		top: 28px;
+		right: calc( 50% - 28px );
+	}
+`;
+
 const TextLengthHelpInputWrapper = ( {
 	children,
 	textLength = 0,
 	maxLength,
+	iconSlot = null,
 } ) => (
-	<Wrapper>
+	<Wrapper style={ { width: iconSlot ? 'calc( 100% - 24px )' : null } }>
 		{ children }
 		<HelpText aria-hidden="true">
 			{ `${ textLength } / ${ maxLength }` }
 		</HelpText>
+		{ iconSlot && <DivIcon>{ iconSlot }</DivIcon> }
 	</Wrapper>
 );
 

includes/class-wc-gateway-stripe.php

@@ -1134,10 +1134,10 @@ public function is_automatic_capture_enabled() {
 	public function validate_account_statement_descriptor_field( $param, $value, $max_length ) {
 		// Since the value is escaped, and we are saving in a place that does not require escaping, apply stripslashes.
 		$value = trim( stripslashes( $value ) );
-		$field = __( 'Customer bank statement', 'woocommerce-gateway-stripe' );
+		$field = __( 'customer bank statement', 'woocommerce-gateway-stripe' );
 
 		if ( 'short_statement_descriptor' === $param ) {
-			$field = __( 'Shortened customer bank statement', 'woocommerce-gateway-stripe' );
+			$field = __( 'shortened customer bank statement', 'woocommerce-gateway-stripe' );
 		}
 
 		// Validation can be done with a single regex but splitting into multiple for better readability.
@@ -1153,7 +1153,7 @@ public function validate_account_statement_descriptor_field( $param, $value, $ma
 			throw new InvalidArgumentException(
 				sprintf(
 					/* translators: %1 field name, %2 Number of the maximum characters allowed */
-					__( '%1$s is invalid. Statement should be between 5 and %2$u characters long, contain at least single Latin character and does not contain special characters: \' " * < >', 'woocommerce-gateway-stripe' ),
+					__( 'The %1$s is invalid. The bank statement must contain only Latin characters, be between 5 and %2$u characters, contain at least one letter, and not contain any of the special characters: \' " * < >', 'woocommerce-gateway-stripe' ),
 					$field,
 					$max_length
 				)

readme.txt

@@ -132,5 +132,6 @@ If you get stuck, you can ask for help in the Plugin Forum.
 * Tweak - Use the newly exposed LoadableMask component provided by WooCommerce Blocks to trigger the loading state for Payment Request Buttons.
 * Add - Add filter call when updating an existent intent (wc_stripe_update_existing_intent_request).
 * Add - Add ability to test Stripe account keys' validity.
+* Fix - Fixed full bank statement field description.
 
 [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).