From 0ea57ea06f7df2921990e1d384bfafedb9cc785e Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Fri, 10 Jan 2025 16:43:01 +0100 Subject: [PATCH 1/5] Refactor ConnectionInfo component to use merchant data from CommonHooks --- .../ReusableComponents/ConnectionInfo.js | 90 +++++++++++-------- 1 file changed, 52 insertions(+), 38 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js index 5fbfdb1f1..0a10b4c17 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js @@ -1,10 +1,17 @@ import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; +import {CommonHooks} from "../../data"; -const ConnectionInfo = ( { connectionStatusDataDefault } ) => { - const [ connectionData, setConnectionData ] = useState( { - ...connectionStatusDataDefault, - } ); + +const ConnectionInfo = () => { + const { merchant } = CommonHooks.useMerchantInfo(); + const [connectionData, setConnectionData] = useState(getDefaultConnectionStatusData(merchant)); + + useEffect(() => { + if (merchant) { + setConnectionData(getDefaultConnectionStatusData(merchant)); + } + }, [merchant]); const toggleStatusClassName = [ 'ppcp-r-connection-status__status-toggle' ]; @@ -15,40 +22,47 @@ const ConnectionInfo = ( { connectionStatusDataDefault } ) => { } return ( -
-
- - { __( 'Merchant ID', 'woocommerce-paypal-payments' ) } - - - { connectionData.merchantId } - -
-
- - { __( 'Email address', 'woocommerce-paypal-payments' ) } - - - { connectionData.email } - -
-
- - { __( 'Client ID', 'woocommerce-paypal-payments' ) } - - - { connectionData.clientId } - -
-
- ); +
+ {renderStatusRow( + __('Merchant ID', 'woocommerce-paypal-payments'), + connectionData.merchantId + )} + {renderStatusRow( + __('Email address', 'woocommerce-paypal-payments'), + connectionData.email + )} + {renderStatusRow( + __('Client ID', 'woocommerce-paypal-payments'), + connectionData.clientId + )} +
+ ); }; export default ConnectionInfo; +export const getDefaultConnectionStatusData = (merchant = null) => { + if (!merchant) { + const contextMerchant = CommonHooks.useMerchantInfo()?.merchant || {}; + return { + connectionStatus: contextMerchant.isConnected || false, + showAllData: false, + email: contextMerchant.email || '', + merchantId: contextMerchant.id || '', + clientId: contextMerchant.clientId || '', + }; + } -export const connectionStatusDataDefault = { - connectionStatus: true, - showAllData: false, - email: 'bt_us@woocommerce.com', - merchantId: 'AT45V2DGMKLRY', - clientId: 'BAARTJLxtUNN4d2GMB6Eut3suMDYad72xQA-FntdIFuJ6FmFJITxAY8', + return { + connectionStatus: merchant.isConnected || false, + showAllData: false, + email: merchant.email || '', + merchantId: merchant.id || '', + clientId: merchant.clientId || '', + }; }; + +const renderStatusRow = (label, value) => ( +
+ {label} + {value} +
+); From 84fd823d84df1da3c67f35d5bb0ca0744fc244ce Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Fri, 10 Jan 2025 16:43:54 +0100 Subject: [PATCH 2/5] Use getDefaultConnectionStatusData and ConnectionInfo for displaying connection status and details --- .../Overview/TabSettingsElements/ConnectionStatus.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ConnectionStatus.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ConnectionStatus.js index b1018d44c..fa264a6ee 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ConnectionStatus.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ConnectionStatus.js @@ -1,7 +1,7 @@ import { __ } from '@wordpress/i18n'; import SettingsCard from '../../../ReusableComponents/SettingsCard'; import ConnectionInfo, { - connectionStatusDataDefault, + getDefaultConnectionStatusData, } from '../../../ReusableComponents/ConnectionInfo'; import TitleBadge, { TITLE_BADGE_NEGATIVE, @@ -20,7 +20,7 @@ const ConnectionStatus = () => {
- { connectionStatusDataDefault.connectionStatus ? ( + { getDefaultConnectionStatusData().connectionStatus ? ( { ) }
- { connectionStatusDataDefault.connectionStatus && ( + { getDefaultConnectionStatusData().connectionStatus && ( ) } From 8b88eaed4b1e8c6414045fd91a174ed4a4a48a58 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Fri, 10 Jan 2025 17:06:32 +0100 Subject: [PATCH 3/5] Remove unused showAllData --- .../js/Components/ReusableComponents/ConnectionInfo.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js index 0a10b4c17..4d06f16e4 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js @@ -13,14 +13,6 @@ const ConnectionInfo = () => { } }, [merchant]); - const toggleStatusClassName = [ 'ppcp-r-connection-status__status-toggle' ]; - - if ( connectionData.showAllData ) { - toggleStatusClassName.push( - 'ppcp-r-connection-status__status-toggle--toggled' - ); - } - return (
{renderStatusRow( @@ -44,7 +36,6 @@ export const getDefaultConnectionStatusData = (merchant = null) => { const contextMerchant = CommonHooks.useMerchantInfo()?.merchant || {}; return { connectionStatus: contextMerchant.isConnected || false, - showAllData: false, email: contextMerchant.email || '', merchantId: contextMerchant.id || '', clientId: contextMerchant.clientId || '', @@ -53,7 +44,6 @@ export const getDefaultConnectionStatusData = (merchant = null) => { return { connectionStatus: merchant.isConnected || false, - showAllData: false, email: merchant.email || '', merchantId: merchant.id || '', clientId: merchant.clientId || '', From c2c4347ce2491ab9faec1b2bcf55d3a155806e3a Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Mon, 13 Jan 2025 15:21:36 +0100 Subject: [PATCH 4/5] use merchant directly --- .../ReusableComponents/ConnectionInfo.js | 23 ++----------------- .../TabSettingsElements/ConnectionStatus.js | 16 +++++-------- 2 files changed, 8 insertions(+), 31 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js index 4d06f16e4..0c90bf58f 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js @@ -1,17 +1,8 @@ import { __ } from '@wordpress/i18n'; -import { useState, useEffect } from '@wordpress/element'; -import {CommonHooks} from "../../data"; - +import { CommonHooks } from '../../data'; const ConnectionInfo = () => { - const { merchant } = CommonHooks.useMerchantInfo(); - const [connectionData, setConnectionData] = useState(getDefaultConnectionStatusData(merchant)); - - useEffect(() => { - if (merchant) { - setConnectionData(getDefaultConnectionStatusData(merchant)); - } - }, [merchant]); + const { merchant } = CommonHooks.useMerchantInfo(); return (
@@ -31,16 +22,6 @@ const ConnectionInfo = () => { ); }; export default ConnectionInfo; -export const getDefaultConnectionStatusData = (merchant = null) => { - if (!merchant) { - const contextMerchant = CommonHooks.useMerchantInfo()?.merchant || {}; - return { - connectionStatus: contextMerchant.isConnected || false, - email: contextMerchant.email || '', - merchantId: contextMerchant.id || '', - clientId: contextMerchant.clientId || '', - }; - } return { connectionStatus: merchant.isConnected || false, diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ConnectionStatus.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ConnectionStatus.js index fa264a6ee..c765d8738 100644 --- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ConnectionStatus.js +++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/ConnectionStatus.js @@ -1,13 +1,13 @@ import { __ } from '@wordpress/i18n'; import SettingsCard from '../../../ReusableComponents/SettingsCard'; -import ConnectionInfo, { - getDefaultConnectionStatusData, -} from '../../../ReusableComponents/ConnectionInfo'; +import { CommonHooks } from '../../../../data'; import TitleBadge, { TITLE_BADGE_NEGATIVE, TITLE_BADGE_POSITIVE, } from '../../../ReusableComponents/TitleBadge'; +import ConnectionInfo from '../../../ReusableComponents/ConnectionInfo'; const ConnectionStatus = () => { + const { merchant } = CommonHooks.useMerchantInfo(); return ( {
- { getDefaultConnectionStatusData().connectionStatus ? ( + { merchant.isConnected ? ( { ) }
- { getDefaultConnectionStatusData().connectionStatus && ( - + { merchant.isConnected && ( + ) }
From f004be97ffc0b38c4cb9d880f24b8b00a5cb1d40 Mon Sep 17 00:00:00 2001 From: carmenmaymo Date: Mon, 13 Jan 2025 15:21:55 +0100 Subject: [PATCH 5/5] use component instead of function --- .../ReusableComponents/ConnectionInfo.js | 52 +++++++++---------- 1 file changed, 24 insertions(+), 28 deletions(-) diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js index 0c90bf58f..201681a5f 100644 --- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js +++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/ConnectionInfo.js @@ -5,35 +5,31 @@ const ConnectionInfo = () => { const { merchant } = CommonHooks.useMerchantInfo(); return ( -
- {renderStatusRow( - __('Merchant ID', 'woocommerce-paypal-payments'), - connectionData.merchantId - )} - {renderStatusRow( - __('Email address', 'woocommerce-paypal-payments'), - connectionData.email - )} - {renderStatusRow( - __('Client ID', 'woocommerce-paypal-payments'), - connectionData.clientId - )} -
- ); +
+ + + +
+ ); }; export default ConnectionInfo; - return { - connectionStatus: merchant.isConnected || false, - email: merchant.email || '', - merchantId: merchant.id || '', - clientId: merchant.clientId || '', - }; -}; - -const renderStatusRow = (label, value) => ( -
- {label} - {value} -
+const StatusRow = ( { label, value } ) => ( +
+ + { label } + + + { value } + +
);