Fix PO Notice not appearing when adding APMs (#7552)

changelog/dev-fix-po-notice-not-appearing

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Update to properly show tooltip on Payments > Settings page when account is in PO state.

client/components/payment-methods-list/payment-method.tsx

@@ -111,23 +111,29 @@ const PaymentMethod = ( {
 	isPoEnabled,
 	isPoComplete,
 }: PaymentMethodProps ): React.ReactElement => {
+	// We want to show a tooltip if PO is enabled and not yet complete. (We make an exception to not show this for card payments).
+	const isPoInProgress =
+		isPoEnabled &&
+		! isPoComplete &&
+		status !== upeCapabilityStatuses.ACTIVE;
+
 	// APMs are disabled if they are inactive or if Progressive Onboarding is enabled and not yet complete.
 	const disabled =
-		upeCapabilityStatuses.INACTIVE === status ||
-		( id !== 'card' && isPoEnabled && ! isPoComplete );
+		upeCapabilityStatuses.INACTIVE === status || isPoInProgress;
 	const {
 		accountFees,
 	}: { accountFees: Record< string, FeeStructure > } = useContext(
 		WCPaySettingsContext
 	);
 	const [ isManualCaptureEnabled ] = useManualCapture();
 
-	const needsAttention = [
+	const needsMoreInformation = [
 		upeCapabilityStatuses.INACTIVE,
 		upeCapabilityStatuses.PENDING_APPROVAL,
 		upeCapabilityStatuses.PENDING_VERIFICATION,
 	].includes( status );
 
+	const needsAttention = needsMoreInformation || isPoInProgress;
 	const shouldDisplayNotice = id === 'sofort';
 
 	const needsOverlay =
@@ -190,9 +196,13 @@ const PaymentMethod = ( {
 								'woocommerce-payments'
 							) }
 							/* eslint-disable-next-line max-len */
-							href={ getDocumentationUrlForDisabledPaymentMethod(
-								paymentMethodId
-							) }
+							href={
+								isPoInProgress
+									? 'https://woocommerce.com/document/woopayments/startup-guide/gradual-signup/#additional-payment-methods'
+									: getDocumentationUrlForDisabledPaymentMethod(
+											paymentMethodId
+									  )
+							}
 						/>
 					),
 				},