Increase the OC checkout font size (#4564)

* Increase the OC checkout font size

* Changelog and readme entries

* Unit test

* Fix parsing of decimal values

* Moving the font definition to getAppearance

* Update client/stripe-utils/utils.js

Co-authored-by: daledupreez <[email protected]>

* Fix method comment

* Update client/stripe-utils/__tests__/utils.test.js

Co-authored-by: daledupreez <[email protected]>

* Test case for decimals

---------

Co-authored-by: daledupreez <[email protected]>

Author: wjrosa

changelog.txt

@@ -1,6 +1,7 @@
 *** Changelog ***
 
 = 9.8.0 - xxxx-xx-xx =
+* Update - Increases the default font size for the Optimized Checkout payment element to match the rest of the checkout form
 * Fix - Checks for the subscription payment method (if it is Stripe) when verifying for the payment method detachment
 * Update - Removes the ability to change the title for the Optimized Checkout payment element, as it is now set to "Stripe" by default
 * Update - Copy for the Optimized Checkout settings and notices

client/stripe-utils/__tests__/utils.test.js

@@ -0,0 +1,42 @@
+import { getFontSizeBase } from '../utils';
+
+describe( 'utils', () => {
+	describe( 'getFontSizeBase', () => {
+		const globalValues = global.wc_stripe_upe_params;
+
+		beforeEach( () => {
+			global.wc_stripe_upe_params = {
+				isOCEnabled: false,
+			};
+		} );
+
+		afterEach( () => {
+			global.wc_stripe_upe_params = globalValues;
+		} );
+
+		it( 'Optimized Checkout - should increase the provided font size by 2', () => {
+			global.wc_stripe_upe_params = { isOCEnabled: true };
+
+			const fontSize = '16px';
+			const expectedFontSize = '18px';
+			const result = getFontSizeBase( fontSize );
+			expect( result ).toBe( expectedFontSize );
+		} );
+
+		it( 'Optimized Checkout - should increase the provided font size by 2 (decimal value)', () => {
+			global.wc_stripe_upe_params = { isOCEnabled: true };
+
+			const fontSize = '16.5px';
+			const expectedFontSize = '18.5px';
+			const result = getFontSizeBase( fontSize );
+			expect( result ).toBe( expectedFontSize );
+		} );
+
+		it( 'default size', () => {
+			const fontSize = '16px';
+			const expectedFontSize = '16px';
+			const result = getFontSizeBase( fontSize );
+			expect( result ).toBe( expectedFontSize );
+		} );
+	} );
+} );

client/stripe-utils/utils.js

@@ -842,3 +842,22 @@ export const maybeClearBlikCodeValidation = () => {
 		);
 	}
 };
+
+/**
+ * Gets the base font size for both the regular checkout and the Optimized Checkout (which is 2px larger than the default font size).
+ * So it matches the rest of the checkout form when it is scaled down.
+ *
+ * @param {string} defaultFontSize The default font size of the checkout form, e.g. '16px'.
+ * @return {string} The base font size.
+ */
+export const getFontSizeBase = ( defaultFontSize ) => {
+	if ( getStripeServerData()?.isOCEnabled ) {
+		// Find numbers for font size.
+		const matches = defaultFontSize.match( /(\d+(?:\.\d+)?)/ );
+		if ( matches.length > 0 ) {
+			return parseFloat( matches[ 0 ] ) + 2 + 'px';
+		}
+	}
+
+	return defaultFontSize;
+};

client/styles/upe/__tests__/index.js

@@ -24,6 +24,18 @@ describe( 'Getting styles for automated theming', () => {
 		},
 	};
 
+	const globalValues = global.wc_stripe_upe_params;
+
+	beforeEach( () => {
+		global.wc_stripe_upe_params = {
+			isOCEnabled: false,
+		};
+	} );
+
+	afterEach( () => {
+		global.wc_stripe_upe_params = globalValues;
+	} );
+
 	it( 'getFieldStyles returns correct styles for inputs', () => {
 		jest.spyOn( document, 'querySelector' ).mockImplementation( () => {
 			return mockElement;
@@ -103,6 +115,8 @@ describe( 'Getting styles for automated theming', () => {
 	} );
 
 	it( 'getAppearance returns the object with filtered CSS rules for UPE theming', () => {
+		global.wc_stripe_upe_params = { isOCEnabled: false };
+
 		jest.spyOn( document, 'querySelector' ).mockImplementation( () => {
 			return mockElement;
 		} );

client/styles/upe/index.js

@@ -5,6 +5,7 @@ import {
 	getBackgroundColor,
 	isColorLight,
 } from './utils.js';
+import { getFontSizeBase } from 'wcstripe/stripe-utils';
 
 const appearanceSelectors = {
 	default: {
@@ -387,7 +388,7 @@ export const getAppearance = ( isBlocksCheckout = false ) => {
 			? inputRules.color
 			: paragraphRules.color,
 		fontFamily: paragraphRules.fontFamily,
-		fontSizeBase: paragraphRules.fontSize,
+		fontSizeBase: getFontSizeBase( paragraphRules.fontSize ),
 	};
 
 	const appearance = {

readme.txt

@@ -111,6 +111,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 == Changelog ==
 
 = 9.8.0 - xxxx-xx-xx =
+* Update - Increases the default font size for the Optimized Checkout payment element to match the rest of the checkout form
 * Fix - Checks for the subscription payment method (if it is Stripe) when verifying for the payment method detachment
 * Update - Removes the ability to change the title for the Optimized Checkout payment element, as it is now set to "Stripe" by default
 * Update - Copy for the Optimized Checkout settings and notices