From 0735cae04fc5cfb6406673045d9de7ac8661bbe1 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 10 Jan 2025 19:12:22 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Make=20the=20send-only=20message?=
 =?UTF-8?q?=20look=20a=20bit=20nicer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/Components/Screens/SendOnlyMessage.js  | 54 +++++++++++++++----
 1 file changed, 45 insertions(+), 9 deletions(-)

diff --git a/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js b/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js
index 884f790fc..56d780250 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/SendOnlyMessage.js
@@ -1,18 +1,54 @@
 import { __, sprintf } from '@wordpress/i18n';
 
+import Container from '../ReusableComponents/Container';
+import SettingsCard from '../ReusableComponents/SettingsCard';
+import SettingsNavigation from './SettingsNavigation';
+
 const SendOnlyMessage = () => {
 	const settingsPageUrl = '/wp-admin/admin.php?page=wc-settings';
 
-	const message = sprintf(
-		/* translators: 1: URL to the WooCommerce store location settings */
-		__(
-			'Your current <a href="%1$s">WooCommerce store location</a> is in a "send-only" country, according to PayPal\'s policies. Sellers in these countries are unable to receive payments via PayPal. Since receiving payments is essential for using the PayPal Payments extension, you will not be able to connect your PayPal account while operating from a "send-only" country. To activate PayPal, please update your <a href="%1$s">WooCommerce store location</a> to a supported region and connect a PayPal account eligible for receiving payments.',
-			'woocommerce-paypal-payments'
-		),
-		settingsPageUrl
+	return (
+		<>
+			<SettingsNavigation />
+			<Container page="settings">
+				<SettingsCard
+					title={ __(
+						'"Send-only" Country',
+						'woocommerce-paypal-payments'
+					) }
+					description={ __(
+						'Sellers in your country are unable to receive payments via PayPal',
+						'woocommerce-paypal-payments'
+					) }
+				>
+					<p>
+						{ __(
+							'Your current WooCommerce store location is in a "send-only" country, according to PayPal\'s policies',
+							'woocommerce-paypal-payments'
+						) }
+					</p>
+					<p>
+						{ __(
+							'Since receiving payments is essential for using the PayPal Payments extension, you are unable to connect your PayPal account while operating from a "send-only" country.',
+							'woocommerce-paypal-payments'
+						) }
+					</p>
+					<p
+						dangerouslySetInnerHTML={ {
+							__html: sprintf(
+								/* translators: 1: URL to the WooCommerce store location settings */
+								__(
+									'To activate PayPal, please update your <a href="%1$s">WooCommerce store location</a> to a supported region and connect a PayPal account eligible for receiving payments.',
+									'woocommerce-paypal-payments'
+								),
+								settingsPageUrl
+							),
+						} }
+					/>
+				</SettingsCard>
+			</Container>
+		</>
 	);
-
-	return <p dangerouslySetInnerHTML={ { __html: message } } />;
 };
 
 export default SendOnlyMessage;