New AccountDetals: Remove the payout icon status (#11093)

Author: htdat

changelog/update-remove-payout-status-icon

@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: New Account Details: Remove the payout icon status to be consistent with account status (without icon)
+
+

client/components/account-details/__tests__/index.test.tsx

@@ -47,7 +47,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Available',
 				background_color: 'green',
-				icon: 'published',
 			},
 			banner: null,
 		};
@@ -70,7 +69,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Disabled',
 				background_color: 'red',
-				icon: 'error',
 			},
 			banner: {
 				text: 'Your account has been restricted by Stripe.',
@@ -98,7 +96,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Disabled',
 				background_color: 'red',
-				icon: 'error',
 			},
 			banner: {
 				text: 'Your account has been rejected.',
@@ -127,7 +124,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Available in 2 days',
 				background_color: 'yellow',
-				icon: 'caution',
 				popover: {
 					text: 'Payouts are processed within 2 business days.',
 					cta_text: 'Learn more',
@@ -154,7 +150,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Available',
 				background_color: 'green',
-				icon: 'published',
 			},
 			banner: null,
 		};
@@ -180,7 +175,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Available',
 				background_color: 'green',
-				icon: 'published',
 			},
 			banner: null,
 		};
@@ -206,7 +200,6 @@ describe( 'AccountDetails', () => {
 			payout_status: {
 				text: 'Available',
 				background_color: 'green',
-				icon: 'published',
 			},
 			banner: null,
 		};

client/components/account-details/index.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import { Card, CardBody, CardHeader, Flex } from '@wordpress/components';
+import { Card, CardBody, CardHeader } from '@wordpress/components';
 
 /**
  * Internal dependencies

client/components/account-details/payout-status-wrapper.tsx

@@ -14,7 +14,7 @@ import HelpOutlineIcon from 'gridicons/dist/help-outline';
 import Chip from 'wcpay/components/chip';
 import { ClickTooltip } from 'wcpay/components/tooltip';
 import { AccountDetailsData } from 'wcpay/types/account/account-details';
-import { getChipTypeFromColor, getIconByName } from './utils';
+import { getChipTypeFromColor } from './utils';
 
 const PayoutStatus: React.FC< {
 	payoutStatus: AccountDetailsData[ 'payout_status' ];
@@ -23,11 +23,7 @@ const PayoutStatus: React.FC< {
 
 	return (
 		<Flex align="center" gap={ 0 } justify="flex-start">
-			<Chip
-				type={ chipType }
-				message={ payoutStatus.text }
-				icon={ getIconByName( payoutStatus.icon ) }
-			/>
+			<Chip type={ chipType } message={ payoutStatus.text } />
 			{ payoutStatus.popover && (
 				<ClickTooltip
 					className={ 'payout-click-tooltip' }

client/types/account/account-details.d.ts

@@ -16,11 +16,10 @@ export interface AccountDetailsData {
 	payout_status: {
 		text: string;
 		background_color: StatusBackgroundColor;
-		icon?: IconName;
 		popover?: {
 			text: string;
-			cta_text: string;
-			cta_link: string;
+			cta_text?: string;
+			cta_link?: string;
 		} | null;
 	};
 	banner?: {