added conditions for rendering

plugins/woocommerce-admin/client/index.js

@@ -56,9 +56,6 @@ const PaymentsGatewaysOptionsDescroption = () => {
 };
 
 registerPlugin( 'banner', { scope: 'my-scope', render: PaymentsBannerFill } );
-registerPlugin( 'banner2', { scope: 'my-scope', render: PaymentsGatewaysOptionsDescroption } );
-
-// TODO: move this to another module
 const Banner = () => {
 		return (
 			<>
@@ -111,16 +108,17 @@ if ( appRoot ) {
 	// Render notices just above the WP content div.
 	const wpBody = document.getElementById( 'wpbody-content' );
 
-	const mainform = document.getElementById(
+	const isWcAdminSettingsPaymentPage = document.getElementById(
 		'wc_payment_gateways_banner_slotfill'
 	);
+
+	isWcAdminSettingsPaymentPage ? render( Banner(), isWcAdminSettingsPaymentPage ) : null;
+	
 	const wrap =
 		wpBody.querySelector( '.wrap.woocommerce' ) ||
 		wpBody.querySelector( '.wrap' );
 	const noticeContainer = document.createElement( 'div' );
 
-	// TODO: note this slotfill is not part of the form
-	render( Banner(), mainform );
 
 	render(
 		<div className="woocommerce-layout">

plugins/woocommerce-admin/client/payments/payment-recommendations-banner.tsx

@@ -1,17 +1,53 @@
-import { Card, CardHeader, CardFooter, Button } from '@wordpress/components';
+import { Card, CardFooter, Button } from '@wordpress/components';
 import { Text } from '@woocommerce/experimental';
-import { EllipsisMenu, List, Pill } from '@woocommerce/components';
 import { __ } from '@wordpress/i18n';
 import Banner from './banner';
-import { PaymentMethods } from '../payments-welcome';
+import {
+	Visa,
+	MasterCard,
+	Amex,
+	ApplePay,
+	Giropay,
+	GooglePay,
+	CB,
+	DinersClub,
+	Discover,
+	UnionPay,
+	JCB,
+	Sofort,
+} from '../payments-welcome/cards';
+import { CardBody } from '@wordpress/components';
+import {
+	ONBOARDING_STORE_NAME,
+	PAYMENT_GATEWAYS_STORE_NAME,
+} from '@woocommerce/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './payment-recommendations.scss';
-import { CardBody } from '@wordpress/components';
 
-export const PaymentsRecommendationsBanner = () => {
+export const PaymentMethods = () => (
+	<div className="woocommerce-recommended-payments-banner__footer_icon_container">
+		<Visa />
+		<MasterCard />
+		<Amex />
+		<ApplePay />
+		<GooglePay />
+		<CB />
+		<Giropay />
+		<DinersClub />
+		<Discover />
+		<UnionPay />
+		<JCB />
+		<Sofort />
+	</div>
+);
+
+const WcPayBanner = () => {
+	const WC_PAY_SETUP_URL =
+		'./admin.php?page=wc-settings&tab=checkout&section=woocommerce_payments';
 	return (
 		<Card size="medium" className="woocommerce-recommended-payments-banner">
 			<CardBody className="woocommerce-recommended-payments-banner__body">
@@ -45,7 +81,7 @@ export const PaymentsRecommendationsBanner = () => {
 							'woocommerce'
 						) }
 					</Text>
-					<Button isPrimary>
+					<Button href={ WC_PAY_SETUP_URL } isPrimary>
 						{ __( 'Get started', 'woocommerce' ) }
 					</Button>
 				</div>
@@ -60,7 +96,7 @@ export const PaymentsRecommendationsBanner = () => {
 					</Text>
 				</div>
 				<div>
-					<PaymentMethods className="woocommerce-recommended-payments-banner__footer_icon_container" />
+					<PaymentMethods />
 				</div>
 				<div>
 					<Text variant="caption" as="p" size="12" lineHeight="16px">
@@ -71,3 +107,72 @@ export const PaymentsRecommendationsBanner = () => {
 		</Card>
 	);
 };
+
+export const PaymentsRecommendationsBanner = () => {
+	const boop = useSelect( ( select ) => {
+		return {
+			installedPaymentGateways: select(
+				PAYMENT_GATEWAYS_STORE_NAME
+			).getPaymentGateways(),
+			isResolving: select( ONBOARDING_STORE_NAME ).isResolving(
+				'getPaymentGatewaySuggestions'
+			),
+			paymentGatewaySuggestions: select(
+				ONBOARDING_STORE_NAME
+			).getPaymentGatewaySuggestions(),
+		};
+	} );
+
+	const {
+		installedPaymentGateways,
+		paymentGatewaySuggestions,
+		isResolving,
+	} = boop;
+
+	const supportsWCPayments =
+		paymentGatewaySuggestions &&
+		paymentGatewaySuggestions.filter( ( paymentGatewaySuggestion ) => {
+			return (
+				paymentGatewaySuggestion.id.indexOf(
+					'woocommerce_payments'
+				) === 0
+			);
+		} ).length === 1;
+
+	console.log( boop );
+	console.log( 'supports', supportsWCPayments );
+	const isWcPayInstalled = installedPaymentGateways.some( ( gateway ) => {
+		return gateway.id === 'woocommerce_payments';
+	} );
+
+	const isWcPayEnabled = installedPaymentGateways.find( ( gateway ) => {
+		gateway.id === 'woocommerce_payments' && gateway.enabled === true;
+	} );
+
+	const isWcPayBannerExplat = true;
+	if ( ! isResolving ) {
+		if (
+			supportsWCPayments &&
+			isWcPayInstalled &&
+			! isWcPayEnabled &&
+			isWcPayBannerExplat
+		) {
+			return <WcPayBanner />;
+		} else {
+			return (
+				<>
+					<h2>Payment Methods</h2>
+					<div id="payment_gateways_options-description">
+						<p>
+							Installed payment methods are listed below and can
+							be sorted to control their display order on the
+							frontend.
+						</p>
+					</div>
+				</>
+			);
+		}
+	} else {
+		return null;
+	}
+};