From c73d7fbc3774ce0f26b188dce45fe31c790be6bd Mon Sep 17 00:00:00 2001
From: Darren Ethier <darren@roughsmootheng.in>
Date: Fri, 10 Jan 2020 16:17:11 -0500
Subject: [PATCH] fix errors caused by demo payment methods

---
 .../express-payment/index.js                  |  4 +--
 assets/js/payment-methods-demo/index.js       |  6 ++--
 .../payment-methods/index.js                  | 28 ++++++++++++-------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/assets/js/payment-methods-demo/express-payment/index.js b/assets/js/payment-methods-demo/express-payment/index.js
index cec4aa10920..a677003ee66 100644
--- a/assets/js/payment-methods-demo/express-payment/index.js
+++ b/assets/js/payment-methods-demo/express-payment/index.js
@@ -4,6 +4,6 @@
 import { applePayImage } from './apple-pay';
 import { paypalImage } from './paypal';
 
-export const expressApplePay = <img src={ applePayImage } alt="" />;
+export const ExpressApplePay = () => <img src={ applePayImage } alt="" />;
 
-export const expressPaypal = <img src={ paypalImage } alt="" />;
+export const ExpressPaypal = () => <img src={ paypalImage } alt="" />;
diff --git a/assets/js/payment-methods-demo/index.js b/assets/js/payment-methods-demo/index.js
index 80a1ce7f449..631df20bc9b 100644
--- a/assets/js/payment-methods-demo/index.js
+++ b/assets/js/payment-methods-demo/index.js
@@ -9,14 +9,14 @@ import {
 /**
  * Internal dependencies
  */
-import { expressApplePay, expressPaypal } from './express-payment';
+import { ExpressApplePay, ExpressPaypal } from './express-payment';
 import { paypalPaymentMethod, ccPaymentMethod } from './payment-methods';
 
 registerExpressPaymentMethod(
 	( Config ) =>
 		new Config( {
 			id: 'applepay',
-			activeContent: expressApplePay,
+			activeContent: <ExpressApplePay />,
 			canMakePayment: Promise.resolve( true ),
 		} )
 );
@@ -24,7 +24,7 @@ registerExpressPaymentMethod(
 	( Config ) =>
 		new Config( {
 			id: 'paypal',
-			activeContent: expressPaypal,
+			activeContent: <ExpressPaypal />,
 			canMakePayment: Promise.resolve( true ),
 		} )
 );
diff --git a/assets/js/payment-methods-demo/payment-methods/index.js b/assets/js/payment-methods-demo/payment-methods/index.js
index 54f5bd8f3cd..46638d65379 100644
--- a/assets/js/payment-methods-demo/payment-methods/index.js
+++ b/assets/js/payment-methods-demo/payment-methods/index.js
@@ -4,15 +4,27 @@
 import { paypalSvg } from './paypal';
 import { ccSvg } from './cc';
 
+const PaypalActivePaymentMethod = () => {
+	return (
+		<div>
+			<p>This is where paypal payment method stuff would be.</p>
+		</div>
+	);
+};
+
+const CreditCardActivePaymentMethod = () => {
+	return (
+		<div>
+			<p>This is where cc payment method stuff would be.</p>
+		</div>
+	);
+};
+
 export const paypalPaymentMethod = {
 	id: 'paypal',
 	label: <img src={ paypalSvg } alt="" />,
 	stepContent: <div>Billing steps</div>,
-	activeContent: (
-		<div>
-			<p>This is where paypal payment method stuff would be.</p>
-		</div>
-	),
+	activeContent: <PaypalActivePaymentMethod />,
 	canMakePayment: Promise.resolve( true ),
 	ariaLabel: 'paypal payment method',
 };
@@ -21,11 +33,7 @@ export const ccPaymentMethod = {
 	id: 'cc',
 	label: <img src={ ccSvg } alt="" />,
 	stepContent: null,
-	activeContent: (
-		<div>
-			<p>This is where cc payment method stuff would be.</p>
-		</div>
-	),
+	activeContent: <CreditCardActivePaymentMethod />,
 	canMakePayment: Promise.resolve( true ),
 	ariaLabel: 'credit-card-payment-method',
 };