diff --git a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx index 7a734c7669b..abd7f85dc5f 100644 --- a/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx +++ b/plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/InstalledChannelCardBody.tsx @@ -104,6 +104,40 @@ const IssueStatus: React.FC< IssueStatusPropsType > = ( { export const InstalledChannelCardBody: React.FC< InstalledChannelCardBodyProps > = ( { installedChannel } ) => { + /** + * The description section in the channel card. + * + * If setup is not completed, this would be the channel description. + * + * If setup is completed, this would be an element with sync status and issue status. + */ + const description = ! installedChannel.isSetupCompleted ? ( + installedChannel.description + ) : ( +
+ +
+ +
+ ); + + /** + * The action button in the channel card. + * + * If setup is not completed, this would be a "Finish setup" primary button. + * + * If setup is completed, this would be a "Manage" secondary button. + */ + const button = ! installedChannel.isSetupCompleted ? ( + + ) : ( + + ); + return ( } name={ installedChannel.title } - description={ -
- -
- -
- } - button={ - - } + description={ description } + button={ button } /> ); };