From 49103232e9aeaa1800d987032d652a216e087a80 Mon Sep 17 00:00:00 2001
From: Guilherme Pressutto <gpressutto5@gmail.com>
Date: Thu, 3 Oct 2024 19:12:02 -0300
Subject: [PATCH] Converting text color rgba to hex to prevent Stripe warning
 (#9511)

---
 changelog/fix-convert-rgba-text-color    |  4 ++++
 client/checkout/upe-styles/index.js      |  9 +++++---
 client/checkout/upe-styles/test/utils.js | 26 ++++++++++++++++++++++++
 client/checkout/upe-styles/utils.js      | 20 ++++++++++++++++++
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 changelog/fix-convert-rgba-text-color

diff --git a/changelog/fix-convert-rgba-text-color b/changelog/fix-convert-rgba-text-color
new file mode 100644
index 00000000000..3c5b8f8c52e
--- /dev/null
+++ b/changelog/fix-convert-rgba-text-color
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Converting text color rgba to hex to prevent Stripe warning
diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js
index 3636c4cbbe2..de2c41e93aa 100644
--- a/client/checkout/upe-styles/index.js
+++ b/client/checkout/upe-styles/index.js
@@ -8,6 +8,7 @@ import {
 	dashedToCamelCase,
 	isColorLight,
 	getBackgroundColor,
+	maybeConvertRGBAtoRGB,
 	handleAppearanceForFloatingLabel,
 } from './utils.js';
 
@@ -387,9 +388,11 @@ export const getFieldStyles = (
 	for ( let i = 0; i < styles.length; i++ ) {
 		const camelCase = dashedToCamelCase( styles[ i ] );
 		if ( validProperties.includes( camelCase ) ) {
-			filteredStyles[ camelCase ] = styles.getPropertyValue(
-				styles[ i ]
-			);
+			let propertyValue = styles.getPropertyValue( styles[ i ] );
+			if ( camelCase === 'color' ) {
+				propertyValue = maybeConvertRGBAtoRGB( propertyValue );
+			}
+			filteredStyles[ camelCase ] = propertyValue;
 		}
 	}
 
diff --git a/client/checkout/upe-styles/test/utils.js b/client/checkout/upe-styles/test/utils.js
index c8b8398f3cf..83784c9ee13 100644
--- a/client/checkout/upe-styles/test/utils.js
+++ b/client/checkout/upe-styles/test/utils.js
@@ -111,4 +111,30 @@ describe( 'UPE Utilities to generate UPE styles', () => {
 		expect( upeUtils.isColorLight( darkGrey ) ).toEqual( false );
 		expect( upeUtils.isColorLight( lightGrey ) ).toEqual( true );
 	} );
+
+	test( 'maybeConvertRGBAtoRGB returns valid colors', () => {
+		const hex = '#ffffff';
+		const color = 'red';
+		const rgb = 'rgb(1, 2, 3)';
+		const rgbNoSpaces = 'rgb(1,2,3)';
+		const rgba = 'rgba(1, 2, 3, 1)';
+		const rgbaNoSpaces = 'rgba(1,2,3,1)';
+		const shadow = 'rgb(1,2,3) 0px 1px 1px 0px';
+		const shadowTransparent = 'rgba(1,2,3,1) 0px 1px 1px 0px';
+		const pixel = '0px';
+
+		expect( upeUtils.maybeConvertRGBAtoRGB( hex ) ).toEqual( hex );
+		expect( upeUtils.maybeConvertRGBAtoRGB( color ) ).toEqual( color );
+		expect( upeUtils.maybeConvertRGBAtoRGB( rgb ) ).toEqual( rgb );
+		expect( upeUtils.maybeConvertRGBAtoRGB( rgbNoSpaces ) ).toEqual(
+			rgbNoSpaces
+		);
+		expect( upeUtils.maybeConvertRGBAtoRGB( rgba ) ).toEqual( rgb );
+		expect( upeUtils.maybeConvertRGBAtoRGB( rgbaNoSpaces ) ).toEqual( rgb );
+		expect( upeUtils.maybeConvertRGBAtoRGB( shadow ) ).toEqual( shadow );
+		expect( upeUtils.maybeConvertRGBAtoRGB( shadowTransparent ) ).toEqual(
+			shadowTransparent
+		);
+		expect( upeUtils.maybeConvertRGBAtoRGB( pixel ) ).toEqual( pixel );
+	} );
 } );
diff --git a/client/checkout/upe-styles/utils.js b/client/checkout/upe-styles/utils.js
index 5db80b42a19..7546a899653 100644
--- a/client/checkout/upe-styles/utils.js
+++ b/client/checkout/upe-styles/utils.js
@@ -139,6 +139,26 @@ export const isColorLight = ( color ) => {
 	return tinycolor( color ).getBrightness() > 125;
 };
 
+/**
+ * Converts rgba to rgb format, since Stripe Appearances API does not accept rgba format for text color.
+ *
+ * @param {string} color CSS color value.
+ * @return {string} Accepted CSS color value.
+ */
+export const maybeConvertRGBAtoRGB = ( color ) => {
+	const colorParts = color.match(
+		/^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(0?(\.\d+)?|1?(\.0+)?)\s*\)$/
+	);
+	if ( colorParts ) {
+		const alpha = colorParts[ 4 ] || 1;
+		const newColorParts = colorParts.slice( 1, 4 ).map( ( part ) => {
+			return Math.round( part * alpha + 255 * ( 1 - alpha ) );
+		} );
+		color = `rgb(${ newColorParts.join( ', ' ) })`;
+	}
+	return color;
+};
+
 /**
  * Modifies the appearance object to include styles for floating label.
  *