woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 10:55:00 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Add the component and styling for the Warning Message for Payment Method items

Browse source
This commit is contained in:
Daniel Dudzic 2025-02-25 12:01:52 +01:00
parent 7e3463394a
commit 07e1e3b2d2
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
5 changed files with 159 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

32
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
View file

@ -5,6 +5,7 @@ import { useActiveHighlight } from '../../../data/common/hooks';
import SettingsBlock from '../SettingsBlock';
import PaymentMethodIcon from '../PaymentMethodIcon';
import WarningMessage from '../../../Components/Screens/Settings/Components/Payment/WarningMessage';
const PaymentMethodItemBlock = ( {
paymentMethod,
@ -13,9 +14,11 @@ const PaymentMethodItemBlock = ( {
isSelected,
isDisabled,
disabledMessage,
warningMessage,
} ) => {
const { activeHighlight, setActiveHighlight } = useActiveHighlight();
const isHighlighted = activeHighlight === paymentMethod.id;
const hasWarning = !! warningMessage;
// Reset the active highlight after 2 seconds
useEffect( () => {
@ -28,12 +31,20 @@ const PaymentMethodItemBlock = ( {
}
}, [ isHighlighted, setActiveHighlight ] );
// Determine class names based on states
const methodItemClasses = [
'ppcp--method-item',
isHighlighted ? 'ppcp-highlight' : '',
isDisabled ? 'ppcp--method-item--disabled' : '',
hasWarning && ! isDisabled ? 'ppcp--method-item--warning' : '',
]
.filter( Boolean )
.join( ' ' );
return (
<SettingsBlock
id={ paymentMethod.id }
className={ `ppcp--method-item ${
isHighlighted ? 'ppcp-highlight' : ''
} ${ isDisabled ? 'ppcp--method-item--disabled' : '' }` }
className={ methodItemClasses }
separatorAndGap={ false }
>
{ isDisabled && (
@ -59,11 +70,16 @@ const PaymentMethodItemBlock = ( {
{ paymentMethod.itemDescription }
</p>
<div className="ppcp--method-footer">
<ToggleControl
__nextHasNoMarginBottom
checked={ isSelected }
onChange={ onSelect }
/>
<div className="ppcp--method-toggle-wrapper">
<ToggleControl
__nextHasNoMarginBottom
checked={ isSelected }
onChange={ onSelect }
/>
{ hasWarning && ! isDisabled && isSelected && (
<WarningMessage warningMessage={ warningMessage } />
) }
</div>
{ paymentMethod?.fields && onTriggerModal && (
<Button
className="ppcp--method-settings"

3
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
View file

@ -33,6 +33,9 @@ const PaymentMethodsBlock = ( { paymentMethods = [], onTriggerModal } ) => {
onTriggerModal={ () =>
onTriggerModal?.( paymentMethod.id )
}
warningMessage={
'<strong>Note:</strong> The accelerated guest buyer experience provided by Fastlane may not be fully compatible with some of the following <a href="%1$s">active plugins</a>: <ul class="ppcp--method-notice-list"><li>WooCommerce Subscriptions 5.2.0</li><li>Product Add-Ons Premium 6.1.3</li><li>YITH WooCommerce Checkout Manager 3.4.0</li></ul>'
}
/>
) ) }
</SettingsBlock>