mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 14:57:26 +08:00
Add the component and styling for the Warning Message for Payment Method items
This commit is contained in:
Daniel Dudzic
parent
7e3463394a
commit
07e1e3b2d2
5 changed files with 159 additions and 10 deletions
|
|
@ -17,6 +17,7 @@ $color-text-text: #070707;
|
|||
$color-border: #AEAEAE;
|
||||
$color-divider: #F0F0F0;
|
||||
$color-error-red: #cc1818;
|
||||
$color-warning: #e2a030;
|
||||
|
||||
$shadow-card: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
|
||||
$color-gradient-dark: #001435;
|
||||
|
|
@ -66,6 +67,7 @@ $card-vertical-gap: 48px;
|
|||
--color-text-teriary: #{$color-text-tertiary};
|
||||
--color-text-description: #{$color-gray-700};
|
||||
--color-error: #{$color-error-red};
|
||||
--color-warning: #{$color-warning};
|
||||
|
||||
// Default settings-block theme.
|
||||
--block-item-gap: 16px;
|
||||
|
|
|
|||
|
|
@ -80,6 +80,11 @@
|
|||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.ppcp--method-toggle-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -140,7 +145,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 50;
|
||||
z-index: 8;
|
||||
border-radius: var(--container-border-radius);
|
||||
pointer-events: auto;
|
||||
opacity: 0;
|
||||
|
|
@ -157,10 +162,110 @@
|
|||
@include font(13, 20, 500);
|
||||
color: $color-text-tertiary;
|
||||
position: relative;
|
||||
z-index: 51;
|
||||
z-index: 9;
|
||||
border: none;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Warning message */
|
||||
.ppcp--method-warning {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
cursor: help;
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
color: $color-warning;
|
||||
}
|
||||
|
||||
/* Add invisible bridge to prevent gap between icon and popover */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 30px;
|
||||
height: 15px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
// Popover bubble
|
||||
.ppcp--method-warning-message {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 15px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 250px;
|
||||
padding: 16px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray-200;
|
||||
border-radius: 4px;
|
||||
z-index: 9;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.2s ease, visibility 0.2s;
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: $color-white;
|
||||
border-right: 1px solid $color-gray-200;
|
||||
border-bottom: 1px solid $color-gray-200;
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.01);
|
||||
transform: rotate(45deg);
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp--method-notice-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .ppcp--method-warning-message,
|
||||
& .ppcp--method-warning-message:hover {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// For RTL support
|
||||
html[dir="rtl"] .ppcp--method-warning {
|
||||
&::before {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
.ppcp--method-warning-message {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
|
||||
&::after {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
margin-right: -6px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
import { Icon } from '@wordpress/components';
|
||||
import { warning } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Component to display a warning message for payment methods
|
||||
*
|
||||
* @param {Object} props - Component props
|
||||
* @param {string} props.warningMessage - The warning message to display
|
||||
* @return {JSX.Element} The formatted warning message with icon
|
||||
*/
|
||||
const WarningMessage = ( { warningMessage } ) => {
|
||||
return (
|
||||
<span className="ppcp--method-warning">
|
||||
<Icon icon={ warning } />
|
||||
<div
|
||||
className="ppcp--method-warning-message"
|
||||
dangerouslySetInnerHTML={ { __html: warningMessage } }
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default WarningMessage;
|
||||
Loading…
Add table
Add a link
Reference in a new issue
