Move modal fields config to data store

This commit is contained in:
Emili Castells Guasch 2025-01-22 12:09:21 +01:00
parent cca1313fec
commit 364f2548e0
6 changed files with 112 additions and 232 deletions

View file

@ -2,31 +2,27 @@ import { ToggleControl } from '@wordpress/components';
import SettingsBlock from './SettingsBlock';
import PaymentMethodIcon from '../PaymentMethodIcon';
import data from '../../../utils/data';
import { hasSettings } from '../../Screens/Overview/TabSettingsElements/Blocks/PaymentMethods';
const PaymentMethodItemBlock = ( {
id,
title,
description,
icon,
paymentMethod,
onTriggerModal,
onSelect,
isSelected,
} ) => {
// Only show settings icon if this method has fields configured
const hasModal = hasSettings( id );
return (
<SettingsBlock className="ppcp-r-settings-block__payment-methods__item">
<div className="ppcp-r-settings-block__payment-methods__item__inner">
<div className="ppcp-r-settings-block__payment-methods__item__title-wrapper">
<PaymentMethodIcon icons={ [ icon ] } type={ icon } />
<PaymentMethodIcon
icons={ [ paymentMethod.icon ] }
type={ paymentMethod.icon }
/>
<span className="ppcp-r-settings-block__payment-methods__item__title">
{ title }
{ paymentMethod.itemTitle }
</span>
</div>
<p className="ppcp-r-settings-block__payment-methods__item__description">
{ description }
{ paymentMethod.itemDescription }
</p>
<div className="ppcp-r-settings-block__payment-methods__item__footer">
<ToggleControl
@ -34,7 +30,7 @@ const PaymentMethodItemBlock = ( {
checked={ isSelected }
onChange={ onSelect }
/>
{ hasModal && onTriggerModal && (
{ paymentMethod?.fields && onTriggerModal && (
<div
className="ppcp-r-settings-block__payment-methods__item__settings"
onClick={ onTriggerModal }

View file

@ -27,9 +27,7 @@ const PaymentMethodsBlock = ( {
{ paymentMethods.map( ( paymentMethod ) => (
<PaymentMethodItemBlock
key={ paymentMethod.id }
title={ paymentMethod.item_title }
description={ paymentMethod.item_description }
icon={ paymentMethod.icon }
paymentMethod={ paymentMethod }
isSelected={ paymentMethod.enabled }
onSelect={ ( checked ) =>
handleSelect( paymentMethod, checked )