Merge pull request #4459 from woocommerce/dev/PCP-6286-pay-later-messaging-tab-merchant-identifier-error-is-showing-until-reloading-page-when-we-connect-manually

fix(pay-later-messaging): resolve merchant_identifier error after manual connection (6286)

Author: Dinamiko

modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabPayLaterMessaging.js

@@ -1,4 +1,4 @@
-import { PayLaterMessagingHooks } from '@ppcp-settings/data';
+import { PayLaterMessagingHooks, CommonHooks } from '@ppcp-settings/data';
 import { useEffect } from '@wordpress/element';
 
 const TabPayLaterMessaging = () => {
@@ -11,14 +11,15 @@ const TabPayLaterMessaging = () => {
 		setHome,
 		setCustom_placement,
 	} = PayLaterMessagingHooks.usePayLaterMessaging();
+	const { clientId: merchantClientId } = CommonHooks.useMerchant();
 	const PcpPayLaterConfigurator =
 		window.ppcpSettings?.PcpPayLaterConfigurator;
 
 	useEffect( () => {
 		if ( window.merchantConfigurators && PcpPayLaterConfigurator ) {
 			window.merchantConfigurators.Messaging( {
 				config,
-				merchantClientId: PcpPayLaterConfigurator.merchantClientId,
+				merchantClientId,
 				partnerClientId: PcpPayLaterConfigurator.partnerClientId,
 				partnerName: 'WooCommerce',
 				bnCode: PcpPayLaterConfigurator.bnCode,
@@ -45,7 +46,7 @@ const TabPayLaterMessaging = () => {
 				},
 			} );
 		}
-	}, [ PcpPayLaterConfigurator, config ] );
+	}, [ PcpPayLaterConfigurator, config, merchantClientId ] );
 
 	return (
 		<div