Update Express Payment Button previews on the Block Checkout and Cart…

… edit pages (#3542)

* Update express payment button previews

* Centralize button previews to avoid duplication

* Rename files

* Update icon reference after file name change

* Add changelog entries

* Fix capitalisation

* Update the Stripe Link preview to the centralized approach

changelog.txt

@@ -10,6 +10,7 @@
 * Fix - Fix the display and usage of the Link payment method on the shortcode checkout page with the Stripe Express Checkout Element.
 * Fix - Prevent marking orders on-hold with order note "Process order to take payment" when the payment has failed.
 * Fix - Fix payment methods count on settings page.
+* Update - Improve Express Payment button previews on the edit Block Checkout and Cart pages for Google Pay and Apple Pay.
 * Tweak - Add error logging in ECE critical Ajax requests.
 * Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the block cart and block checkout pages.
 * Add - Add support for Stripe Link payments via the new Stripe Checkout Element on the product, cart, checkout and pay for order pages.

client/blocks/express-checkout/express-button-previews/index.js

@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import googlePayIcon from '../../../payment-method-icons/google-pay/icon-white.svg';
+import applePayIcon from '../../../payment-method-icons/apple-pay/icon-white.svg';
+import stripeLinkIcon from '../../../payment-method-icons/link/icon-black.svg';
+import './style.scss';
+
+/**
+ * Base PaymentButtonPreview Component
+ *
+ * @param {Object} props
+ * @param {string} props.icon - The icon to display.
+ * @param {string} [props.className] - Optional additional class names.
+ * @return {JSX.Element} The rendered component.
+ */
+const PaymentButtonPreview = ( { icon, className } ) => (
+	<div
+		className={ classNames(
+			'wc-stripe-payment-button-preview',
+			className
+		) }
+	>
+		<img src={ icon } alt="Payment Method Icon" />
+	</div>
+);
+
+/**
+ * GooglePayPreview Component
+ *
+ * @return {JSX.Element} The rendered component.
+ */
+export const GooglePayPreview = () => (
+	<PaymentButtonPreview
+		icon={ googlePayIcon }
+		className="wc-stripe-google-pay-preview"
+	/>
+);
+
+/**
+ * ApplePayPreview Component
+ *
+ * @return {JSX.Element} The rendered component.
+ */
+export const ApplePayPreview = () => (
+	<PaymentButtonPreview
+		icon={ applePayIcon }
+		className="wc-stripe-apple-pay-preview"
+	/>
+);
+
+/**
+ * StripeLinkPreview Component
+ *
+ * @return {JSX.Element} The rendered component.
+ */
+export const StripeLinkPreview = () => (
+	<PaymentButtonPreview
+		icon={ stripeLinkIcon }
+		className="wc-stripe-link-preview"
+	/>
+);

client/blocks/express-checkout/express-button-previews/style.scss

@@ -0,0 +1,22 @@
+.wc-stripe-payment-button-preview {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #000;
+	border-radius: 5px;
+	height: 40px;
+	img {
+		height: 22px;
+	}
+	&:hover {
+		cursor: pointer;
+		filter: opacity(0.7);
+	}
+	/* Stripe Link Overrides */
+	&.wc-stripe-link-preview {
+		background-color: #00d66f;
+		img {
+			height: 40px;
+		}
+	}
+}