mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-06 12:25:15 +08:00
Improve the warning in the new UI for multiple warnings
This commit is contained in:
Daniel Dudzic
parent
f657676832
commit
1e7d0cfb68
8 changed files with 74 additions and 52 deletions
|
|
@ -187,7 +187,7 @@
|
|||
}
|
||||
|
||||
/* Add invisible bridge to prevent gap between icon and popover */
|
||||
&::before {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
|
|
@ -202,6 +202,9 @@
|
|||
.ppcp--method-warning-message {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 15px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 250px;
|
||||
|
|
@ -216,7 +219,7 @@
|
|||
transition: opacity 0.2s ease, visibility 0.2s;
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
|
|
@ -249,6 +252,14 @@
|
|||
background: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: inside;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .ppcp--method-warning-message,
|
||||
|
|
@ -261,7 +272,7 @@
|
|||
|
||||
// For RTL support
|
||||
html[dir="rtl"] .ppcp--method-warning {
|
||||
&::before {
|
||||
&:before {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
|
|
@ -272,7 +283,7 @@ html[dir="rtl"] .ppcp--method-warning {
|
|||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
|
||||
&::after {
|
||||
&:after {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
margin-right: -6px;
|
||||
|
|
|
|||
|
|
@ -5,7 +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';
|
||||
import WarningMessages from '../../../Components/Screens/Settings/Components/Payment/WarningMessages';
|
||||
|
||||
const PaymentMethodItemBlock = ( {
|
||||
paymentMethod,
|
||||
|
|
@ -14,11 +14,12 @@ const PaymentMethodItemBlock = ( {
|
|||
isSelected,
|
||||
isDisabled,
|
||||
disabledMessage,
|
||||
warningMessage,
|
||||
warningMessages,
|
||||
} ) => {
|
||||
const { activeHighlight, setActiveHighlight } = useActiveHighlight();
|
||||
const isHighlighted = activeHighlight === paymentMethod.id;
|
||||
const hasWarning = !! warningMessage;
|
||||
const hasWarning =
|
||||
warningMessages && Object.keys( warningMessages ).length > 0;
|
||||
|
||||
// Reset the active highlight after 2 seconds
|
||||
useEffect( () => {
|
||||
|
|
@ -77,7 +78,9 @@ const PaymentMethodItemBlock = ( {
|
|||
onChange={ onSelect }
|
||||
/>
|
||||
{ hasWarning && ! isDisabled && isSelected && (
|
||||
<WarningMessage warningMessage={ warningMessage } />
|
||||
<WarningMessages
|
||||
warningMessages={ warningMessages }
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
{ paymentMethod?.fields && onTriggerModal && (
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const PaymentMethodsBlock = ( { paymentMethods = [], onTriggerModal } ) => {
|
|||
onTriggerModal={ () =>
|
||||
onTriggerModal?.( paymentMethod.id )
|
||||
}
|
||||
warningMessage={ paymentMethod.warningMessage }
|
||||
warningMessages={ paymentMethod.warningMessages }
|
||||
/>
|
||||
);
|
||||
} ) }
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
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;
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { Icon } from '@wordpress/components';
|
||||
import { warning } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Component to display warning messages for payment methods
|
||||
*
|
||||
* @param {Object} props - Component props
|
||||
* @param {Object} props.warningMessages - The warning messages to display
|
||||
* @return {JSX.Element|null} The formatted warning messages or null
|
||||
*/
|
||||
const WarningMessages = ( { warningMessages } ) => {
|
||||
const messages = Object.values( warningMessages || {} );
|
||||
|
||||
if ( messages.length === 0 ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="ppcp--method-warning">
|
||||
<Icon icon={ warning } />
|
||||
<div className="ppcp--method-warning-message">
|
||||
{ messages.map( ( message, index ) => (
|
||||
<div
|
||||
key={ index }
|
||||
className="ppcp--method-warning__item"
|
||||
dangerouslySetInnerHTML={ { __html: message } }
|
||||
/>
|
||||
) ) }
|
||||
</div>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default WarningMessages;
|
||||
|
|
@ -365,13 +365,10 @@ return array(
|
|||
)
|
||||
);
|
||||
|
||||
// Join notices if any exist.
|
||||
$axo_combined_notices = ! empty( $axo_notices ) ? implode( '', $axo_notices ) : '';
|
||||
|
||||
return new PaymentMethodsDefinition(
|
||||
$container->get( 'settings.data.payment' ),
|
||||
$container->get( 'settings.data.definition.method_dependencies' ),
|
||||
$axo_combined_notices
|
||||
$axo_notices
|
||||
);
|
||||
},
|
||||
'settings.data.definition.method_dependencies' => static function ( ContainerInterface $container ) : PaymentMethodsDependenciesDefinition {
|
||||
|
|
|
|||
|
|
@ -50,9 +50,9 @@ class PaymentMethodsDefinition {
|
|||
/**
|
||||
* Conflict notices for Axo gateway.
|
||||
*
|
||||
* @var string
|
||||
* @var array
|
||||
*/
|
||||
private string $axo_conflicts_notice = '';
|
||||
private array $axo_conflicts_notices;
|
||||
|
||||
/**
|
||||
* List of WooCommerce payment gateways.
|
||||
|
|
@ -66,16 +66,16 @@ class PaymentMethodsDefinition {
|
|||
*
|
||||
* @param PaymentSettings $settings Payment methods data model.
|
||||
* @param PaymentMethodsDependenciesDefinition $dependencies_definition Payment dependencies definition.
|
||||
* @param string $axo_conflicts_notice Conflicts notice for Axo.
|
||||
* @param array $axo_conflicts_notices Conflicts notices for Axo.
|
||||
*/
|
||||
public function __construct(
|
||||
PaymentSettings $settings,
|
||||
PaymentMethodsDependenciesDefinition $dependencies_definition,
|
||||
string $axo_conflicts_notice = ''
|
||||
array $axo_conflicts_notices = array()
|
||||
) {
|
||||
$this->settings = $settings;
|
||||
$this->dependencies_definition = $dependencies_definition;
|
||||
$this->axo_conflicts_notice = $axo_conflicts_notice;
|
||||
$this->axo_conflicts_notices = $axo_conflicts_notices;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -106,7 +106,7 @@ class PaymentMethodsDefinition {
|
|||
$method['icon'],
|
||||
$method['fields'] ?? array(),
|
||||
$depends_on,
|
||||
$method['warningMessage'] ?? null
|
||||
$method['warningMessages'] ?? array()
|
||||
);
|
||||
}
|
||||
// Add dependency maps to metadata.
|
||||
|
|
@ -128,7 +128,7 @@ class PaymentMethodsDefinition {
|
|||
* @param array|false $fields Optional. Additional fields to display in the edit modal.
|
||||
* Setting this to false omits all fields.
|
||||
* @param array $depends_on Optional. IDs of payment methods that this depends on.
|
||||
* @param string|null $warning_message Optional. Warning message to display in the UI.
|
||||
* @param array $warning_messages Optional. Warning messages to display in the UI.
|
||||
* @return array Payment method definition.
|
||||
*/
|
||||
private function build_method_definition(
|
||||
|
|
@ -138,7 +138,7 @@ class PaymentMethodsDefinition {
|
|||
string $icon,
|
||||
$fields = array(),
|
||||
array $depends_on = array(),
|
||||
$warning_message = null
|
||||
array $warning_messages = array()
|
||||
) : array {
|
||||
$gateway = $this->wc_gateways[ $gateway_id ] ?? null;
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ class PaymentMethodsDefinition {
|
|||
'icon' => $icon,
|
||||
'itemTitle' => $title,
|
||||
'itemDescription' => $description,
|
||||
'warningMessage' => $warning_message ?? null,
|
||||
'warningMessages' => $warning_messages ?? array(),
|
||||
);
|
||||
|
||||
// Add dependency information if provided - ensure it's included directly in the config.
|
||||
|
|
@ -283,11 +283,11 @@ class PaymentMethodsDefinition {
|
|||
),
|
||||
),
|
||||
array(
|
||||
'id' => AxoGateway::ID,
|
||||
'title' => __( 'Fastlane by PayPal', 'woocommerce-paypal-payments' ),
|
||||
'description' => __( "Tap into the scale and trust of PayPal's customer network to recognize shoppers and make guest checkout more seamless than ever.", 'woocommerce-paypal-payments' ),
|
||||
'icon' => 'payment-method-fastlane',
|
||||
'fields' => array(
|
||||
'id' => AxoGateway::ID,
|
||||
'title' => __( 'Fastlane by PayPal', 'woocommerce-paypal-payments' ),
|
||||
'description' => __( "Tap into the scale and trust of PayPal's customer network to recognize shoppers and make guest checkout more seamless than ever.", 'woocommerce-paypal-payments' ),
|
||||
'icon' => 'payment-method-fastlane',
|
||||
'fields' => array(
|
||||
'fastlaneCardholderName' => array(
|
||||
'type' => 'toggle',
|
||||
'default' => $this->settings->get_fastlane_cardholder_name(),
|
||||
|
|
@ -305,7 +305,7 @@ class PaymentMethodsDefinition {
|
|||
),
|
||||
),
|
||||
),
|
||||
'warningMessage' => $this->axo_conflicts_notice ?: '',
|
||||
'warningMessages' => $this->axo_conflicts_notices,
|
||||
),
|
||||
array(
|
||||
'id' => ApplePayGateway::ID,
|
||||
|
|
|
|||
|
|
@ -169,7 +169,7 @@ class PaymentRestEndpoint extends RestEndpoint {
|
|||
'icon' => $method['icon'],
|
||||
'itemTitle' => $method['itemTitle'],
|
||||
'itemDescription' => $method['itemDescription'],
|
||||
'warningMessage' => $method['warningMessage'],
|
||||
'warningMessages' => $method['warningMessages'],
|
||||
);
|
||||
|
||||
if ( isset( $method['fields'] ) ) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
