Merge pull request #2976 from woocommerce/fix/PCP-4093-real-data

Fix/pcp 4093 real data (4093)
This commit is contained in:
Philipp Stracker 2025-01-13 15:38:11 +01:00 committed by GitHub
commit 9aef5825a7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 54 deletions

View file

@ -1,54 +1,35 @@
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element'; import { CommonHooks } from '../../data';
const ConnectionInfo = ( { connectionStatusDataDefault } ) => { const ConnectionInfo = () => {
const [ connectionData, setConnectionData ] = useState( { const { merchant } = CommonHooks.useMerchantInfo();
...connectionStatusDataDefault,
} );
const toggleStatusClassName = [ 'ppcp-r-connection-status__status-toggle' ];
if ( connectionData.showAllData ) {
toggleStatusClassName.push(
'ppcp-r-connection-status__status-toggle--toggled'
);
}
return ( return (
<div className="ppcp-r-connection-status__data"> <div className="ppcp-r-connection-status__data">
<div className="ppcp-r-connection-status__status-row ppcp-r-connection-status__status-row--first"> <StatusRow
<span className="ppcp-r-connection-status__status-label"> label={ __( 'Merchant ID', 'woocommerce-paypal-payments' ) }
{ __( 'Merchant ID', 'woocommerce-paypal-payments' ) } value={ merchant.id }
</span> />
<span className="ppcp-r-connection-status__status-value"> <StatusRow
{ connectionData.merchantId } label={ __( 'Email address', 'woocommerce-paypal-payments' ) }
</span> value={ merchant.email }
</div> />
<div className="ppcp-r-connection-status__status-row"> <StatusRow
<span className="ppcp-r-connection-status__status-label"> label={ __( 'Client ID', 'woocommerce-paypal-payments' ) }
{ __( 'Email address', 'woocommerce-paypal-payments' ) } value={ merchant.clientId }
</span> />
<span className="ppcp-r-connection-status__status-value">
{ connectionData.email }
</span>
</div>
<div className="ppcp-r-connection-status__status-row">
<span className="ppcp-r-connection-status__status-label">
{ __( 'Client ID', 'woocommerce-paypal-payments' ) }
</span>
<span className="ppcp-r-connection-status__status-value">
{ connectionData.clientId }
</span>
</div>
</div> </div>
); );
}; };
export default ConnectionInfo; export default ConnectionInfo;
export const connectionStatusDataDefault = { const StatusRow = ( { label, value } ) => (
connectionStatus: true, <div className="ppcp-r-connection-status__status-row">
showAllData: false, <span className="ppcp-r-connection-status__status-label">
email: 'bt_us@woocommerce.com', { label }
merchantId: 'AT45V2DGMKLRY', </span>
clientId: 'BAARTJLxtUNN4d2GMB6Eut3suMDYad72xQA-FntdIFuJ6FmFJITxAY8', <span className="ppcp-r-connection-status__status-value">
}; { value }
</span>
</div>
);

View file

@ -1,13 +1,13 @@
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import SettingsCard from '../../../ReusableComponents/SettingsCard'; import SettingsCard from '../../../ReusableComponents/SettingsCard';
import ConnectionInfo, { import { CommonHooks } from '../../../../data';
connectionStatusDataDefault,
} from '../../../ReusableComponents/ConnectionInfo';
import TitleBadge, { import TitleBadge, {
TITLE_BADGE_NEGATIVE, TITLE_BADGE_NEGATIVE,
TITLE_BADGE_POSITIVE, TITLE_BADGE_POSITIVE,
} from '../../../ReusableComponents/TitleBadge'; } from '../../../ReusableComponents/TitleBadge';
import ConnectionInfo from '../../../ReusableComponents/ConnectionInfo';
const ConnectionStatus = () => { const ConnectionStatus = () => {
const { merchant } = CommonHooks.useMerchantInfo();
return ( return (
<SettingsCard <SettingsCard
className="ppcp-r-tab-overview-support" className="ppcp-r-tab-overview-support"
@ -20,7 +20,7 @@ const ConnectionStatus = () => {
<div className="ppcp-r-connection-status"> <div className="ppcp-r-connection-status">
<div className="ppcp-r-connection-status__status"> <div className="ppcp-r-connection-status__status">
<div className="ppcp-r-connection-status__status-status"> <div className="ppcp-r-connection-status__status-status">
{ connectionStatusDataDefault.connectionStatus ? ( { merchant.isConnected ? (
<TitleBadge <TitleBadge
type={ TITLE_BADGE_POSITIVE } type={ TITLE_BADGE_POSITIVE }
text={ __( text={ __(
@ -39,12 +39,8 @@ const ConnectionStatus = () => {
) } ) }
</div> </div>
</div> </div>
{ connectionStatusDataDefault.connectionStatus && ( { merchant.isConnected && (
<ConnectionInfo <ConnectionInfo connectionStatusDataDefault={ merchant } />
connectionStatusDataDefault={
connectionStatusDataDefault
}
/>
) } ) }
</div> </div>
</SettingsCard> </SettingsCard>