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

♻️ Reuse SettingsBlocks in connection status

Browse source
This commit is contained in:
Philipp Stracker 2025-01-22 16:08:41 +01:00
parent ac9be2f8b5
commit 911d84204b
No known key found for this signature in database
3 changed files with 26 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

32
modules/ppcp-settings/resources/css/components/screens/settings/_setting-rows.scss
View file

@ -1,28 +1,6 @@
.ppcp-r-setting-value-rows { .ppcp--value-list {
display: flex; --block-item-gap: 0;
flex-direction: column; --block-separator-gap: 6px;
align-items: flex-start; --block-header-gap: 0;
gap: 12px; --block-separator-size: 0;
width: 100%;
}
.ppcp-r-setting-value-row {
display: flex;
flex-direction: column;
width: 100%;
.ppcp-r-setting-label {
@include font(11, 22, 600);
color: $color-gray-900;
display: block;
text-transform: uppercase;
}
.ppcp-r-setting-value {
@include font(13, 26, 400);
color: $color-text-tertiary;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }

41
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js
View file

@ -2,23 +2,24 @@ import { __ } from '@wordpress/i18n';
import SettingsCard from '../../../../ReusableComponents/SettingsCard'; import SettingsCard from '../../../../ReusableComponents/SettingsCard';
import { CommonHooks } from '../../../../../data'; import { CommonHooks } from '../../../../../data';
import SettingValueRow from './Parts/SettingValueRow';
import ConnectionStatusBadge from './Parts/ConnectionStatusBadge'; import ConnectionStatusBadge from './Parts/ConnectionStatusBadge';
import SettingsBlock from '../../../../ReusableComponents/SettingsBlock';
import { ControlStaticValue } from '../../../../ReusableComponents/SettingsBlocks';
const ConnectionStatus = () => { const ConnectionStatus = () => {
const { merchant } = CommonHooks.useMerchantInfo(); const { merchant } = CommonHooks.useMerchantInfo();
return ( return (
<SettingsCard <SettingsCard
className="ppcp-r-tab-connection-details" className="ppcp-connection-details ppcp--value-list"
title={ __( 'Connection status', 'woocommerce-paypal-payments' ) } title={ __( 'Connection status', 'woocommerce-paypal-payments' ) }
description={ __( description={ __(
'Your PayPal account connection details', 'Your PayPal account connection details',
'woocommerce-paypal-payments' 'woocommerce-paypal-payments'
) } ) }
> >
<div className="ppcp-r-setting-value-rows"> <SettingsBlock>
<SettingValueRow <ControlStaticValue
value={ value={
<ConnectionStatusBadge <ConnectionStatusBadge
isActive={ merchant.isConnected } isActive={ merchant.isConnected }
@ -26,22 +27,22 @@ const ConnectionStatus = () => {
/> />
} }
/> />
<SettingValueRow </SettingsBlock>
label={ __( 'Merchant ID', 'woocommerce-paypal-payments' ) } <SettingsBlock
value={ merchant.id } title={ __( 'Merchant ID', 'woocommerce-paypal-payments' ) }
/> >
<SettingValueRow <ControlStaticValue value={ merchant.id } />
label={ __( </SettingsBlock>
'Email address', <SettingsBlock
'woocommerce-paypal-payments' title={ __( 'Email address', 'woocommerce-paypal-payments' ) }
) } >
value={ merchant.email } <ControlStaticValue value={ merchant.email } />
/> </SettingsBlock>
<SettingValueRow <SettingsBlock
label={ __( 'Client ID', 'woocommerce-paypal-payments' ) } title={ __( 'Client ID', 'woocommerce-paypal-payments' ) }
value={ merchant.clientId } >
/> <ControlStaticValue value={ merchant.clientId } />
</div> </SettingsBlock>
</SettingsCard> </SettingsCard>
); );
}; };

8
modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Parts/SettingValueRow.js
View file

@ -1,8 +0,0 @@
const SettingValueRow = ( { label, value } ) => (
<div className="ppcp-r-setting-value-row">
{ label && <span className="ppcp-r-setting-label">{ label }</span> }
<span className="ppcp-r-setting-value">{ value }</span>
</div>
);
export default SettingValueRow;