Update Outdated Express Checkout Settings Notification (#9207)

Automattic · Aug 5, 2024 · 6f22259 · 6f22259
1 parent 5fd5ff2
commit 6f22259
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 26 deletions.
diff --git a/changelog/update-9193-outdated-express-checkout-notification b/changelog/update-9193-outdated-express-checkout-notification
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Update outdated express checkout settings notification.
diff --git a/client/settings/express-checkout-settings/general-payment-request-button-settings.js b/client/settings/express-checkout-settings/general-payment-request-button-settings.js
@@ -9,7 +9,6 @@ import {
 	__experimentalNumberControl as NumberControl,
 	SelectControl,
 	RadioControl,
-	Notice,
 	RangeControl,
 } from '@wordpress/components';
 import { Elements } from '@stripe/react-stripe-js';
@@ -21,10 +20,10 @@ import { useContext } from '@wordpress/element';
  */
 import CardBody from '../card-body';
 import PaymentRequestButtonPreview from './payment-request-button-preview';
-import NoticeOutlineIcon from 'gridicons/dist/notice-outline';
 import interpolateComponents from '@automattic/interpolate-components';
 import { getPaymentRequestData } from 'utils/express-checkout';
 import WCPaySettingsContext from '../wcpay-settings-context';
+import InlineNotice from 'wcpay/components/inline-notice';
 import {
 	usePaymentRequestButtonType,
 	usePaymentRequestButtonSize,
@@ -169,33 +168,20 @@ const GeneralPaymentRequestButtonSettings = ( { type } ) => {
 	return (
 		<CardBody>
 			{ showWarning && (
-				<Notice
+				<InlineNotice
 					status="warning"
+					icon={ true }
 					isDismissible={ false }
-					className="express-checkout__notice"
 				>
-					<span>
-						<NoticeOutlineIcon
-							style={ {
-								color: '#F0B849',
-								fill: 'currentColor',
-								marginBottom: '-5px',
-								marginRight: '10px',
-							} }
-							size={ 20 }
-						/>
-					</span>
-					<span>
-						{ sprintf(
-							/* translators: %s type of button to which the settings will be applied */
-							__(
-								'These settings will also apply to the %s on your store.',
-								'woocommerce-payments'
-							),
-							otherButtons
-						) }
-					</span>
-				</Notice>
+					{ sprintf(
+						/* translators: %s type of button to which the settings will be applied */
+						__(
+							'These settings will also apply to the %s on your store.',
+							'woocommerce-payments'
+						),
+						otherButtons
+					) }
+				</InlineNotice>
 			) }
 			<h4>{ __( 'Call to action', 'woocommerce-payments' ) }</h4>
 			<SelectControl