Remove deprecated usages of @woocommerce/components <Card> (Automattic#2315)

Author: samueljseay

README.md

@@ -4,30 +4,32 @@ This is a feature plugin for accepting payments via a WooCommerce-branded paymen
 
 ## Dependencies
 
-- WooCommerce
+-   WooCommerce
 
 ## Development
 
 ### Install dependencies & build
 
-- `npm install`
-- `composer install`
-- `npm run build:client`
+-   `npm install`
+-   `composer install`
+-   `npm run build:client`, or if you're developing the client you can have it auto-update when changes are made: `npm start`
 
 ## Setup
 
 If you're using the Docker environment see setup instructions here:
 https://github.com/Automattic/woocommerce-payments/blob/trunk/docker/README.md
 
 Install the following plugins:
-- WooCommerce
+
+-   WooCommerce
+
 ## Test account setup
 
 For setting up a test account follow [these instructions](https://docs.woocommerce.com/document/payments/testing/dev-mode/).
 
 You will need a externally accessible URL to set up the plugin. You can use ngrok for this.
 
-```ngrok http 8082```
+`ngrok http 8082`
 
 See: https://github.com/Automattic/woocommerce-payments/blob/trunk/CONTRIBUTING.md (possibly move contents here for visibility sake)
 

client/connect-account-page/index.js

@@ -3,8 +3,7 @@
  * External dependencies
  */
 import React from 'react';
-import { Card } from '@woocommerce/components';
-import { Button, Notice } from '@wordpress/components';
+import { Button, Card, CardBody, Notice } from '@wordpress/components';
 import { render, useState, useEffect } from '@wordpress/element';
 
 /**
@@ -215,18 +214,22 @@ const ConnectAccountPage = () => {
 			<Page isNarrow className="connect-account">
 				<ConnectPageError />
 				<Card className="connect-account__card">
-					<Banner style="account-page" />
-					<div className="content">
-						{ wcpaySettings.onBoardingDisabled ? (
-							<ConnectPageOnboardingDisabled />
-						) : (
-							<ConnectPageOnboarding />
-						) }
-					</div>
+					<CardBody>
+						<Banner style="account-page" />
+						<div className="content">
+							{ wcpaySettings.onBoardingDisabled ? (
+								<ConnectPageOnboardingDisabled />
+							) : (
+								<ConnectPageOnboarding />
+							) }
+						</div>
+					</CardBody>
 				</Card>
 				{ ! wcpaySettings.onBoardingDisabled && (
 					<Card className="connect-account__steps">
-						<ConnectPageOnboardingSteps />
+						<CardBody>
+							<ConnectPageOnboardingSteps />
+						</CardBody>
 					</Card>
 				) }
 			</Page>

client/connect-account-page/style.scss

@@ -91,7 +91,7 @@
 		}
 
 		.connect-account__card {
-			.woocommerce-card__body {
+			> .components-card__body {
 				padding: 0;
 
 				.content {
@@ -116,7 +116,7 @@
 		}
 
 		.connect-account__steps {
-			.woocommerce-card__body {
+			.components-card__body {
 				padding: 24px;
 			}
 

client/connect-account-page/test/__snapshots__/index.js.snap

@@ -9,10 +9,10 @@ exports[`ConnectAccountPage should render correctly 1`] = `
       class="connect-account woocommerce-payments-page is-narrow"
     >
       <div
-        class="woocommerce-card connect-account__card"
+        class="components-card is-size-medium connect-account__card css-1xs3c37-CardUI e1q7k77g0"
       >
         <div
-          class="woocommerce-card__body"
+          class="components-card__body is-size-medium css-xmjzce-BodyUI e1q7k77g3"
         >
           <div
             class="components-card is-size-large woocommerce-payments-banner account-page css-1xs3c37-CardUI e1q7k77g0"
@@ -807,10 +807,10 @@ exports[`ConnectAccountPage should render correctly 1`] = `
         </div>
       </div>
       <div
-        class="woocommerce-card connect-account__steps"
+        class="components-card is-size-medium connect-account__steps css-1xs3c37-CardUI e1q7k77g0"
       >
         <div
-          class="woocommerce-card__body"
+          class="components-card__body is-size-medium css-xmjzce-BodyUI e1q7k77g3"
         >
           <h2>
             You’re only steps away from getting paid
@@ -880,10 +880,10 @@ exports[`ConnectAccountPage should render correctly when on-boarding disabled 1`
       class="connect-account woocommerce-payments-page is-narrow"
     >
       <div
-        class="woocommerce-card connect-account__card"
+        class="components-card is-size-medium connect-account__card css-1xs3c37-CardUI e1q7k77g0"
       >
         <div
-          class="woocommerce-card__body"
+          class="components-card__body is-size-medium css-xmjzce-BodyUI e1q7k77g3"
         >
           <div
             class="components-card is-size-large woocommerce-payments-banner account-page css-1xs3c37-CardUI e1q7k77g0"

client/payment-details/index.js

@@ -1,20 +1,16 @@
-/** @format **/
-
 /**
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Card } from '@woocommerce/components';
+import { Card, CardBody } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { useCharge } from '../data';
 import PaymentDetailsSummary from './summary';
 import PaymentDetailsTimeline from './timeline';
-import PaymentDetailsPayment from './payment';
 import PaymentDetailsPaymentMethod from './payment-method';
-import PaymentDetailsSession from './session';
 import Page from 'components/page';
 import { TestModeNotice, topics } from 'components/test-mode-notice';
 
@@ -29,12 +25,12 @@ const PaymentDetails = ( props ) => {
 			<Page maxWidth={ 1032 } className="wcpay-payment-details">
 				{ testModeNotice }
 				<Card>
-					<div>
+					<CardBody>
 						{ __(
 							'Payment details not loaded',
 							'woocommerce-payments'
 						) }
-					</div>
+					</CardBody>
 				</Card>
 			</Page>
 		);
@@ -47,18 +43,10 @@ const PaymentDetails = ( props ) => {
 			{ wcpaySettings.featureFlags.paymentTimeline && (
 				<PaymentDetailsTimeline chargeId={ chargeId } />
 			) }
-			{
-				// Hidden for the beta.
-				false && <PaymentDetailsPayment charge={ charge } />
-			}
 			<PaymentDetailsPaymentMethod
 				charge={ charge }
 				isLoading={ isLoading }
 			/>
-			{
-				// Hidden for the beta.
-				false && <PaymentDetailsSession charge={ charge } />
-			}
 		</Page>
 	);
 };