76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { Button } from '@wordpress/components';
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { PluginCardBody } from '~/marketing/components';
|
|
import { RegisteredChannel } from '~/marketing/types';
|
|
import { SyncStatus } from './SyncStatus';
|
|
import { IssueStatus } from './IssueStatus';
|
|
import './RegisteredChannelCardBody.scss';
|
|
|
|
type RegisteredChannelCardBodyProps = {
|
|
registeredChannel: RegisteredChannel;
|
|
};
|
|
|
|
export const RegisteredChannelCardBody: React.FC<
|
|
RegisteredChannelCardBodyProps
|
|
> = ( { registeredChannel } ) => {
|
|
/**
|
|
* 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 = ! registeredChannel.isSetupCompleted ? (
|
|
registeredChannel.description
|
|
) : (
|
|
<div className="woocommerce-marketing-registered-channel-description">
|
|
{ !! registeredChannel.syncStatus && (
|
|
<>
|
|
<SyncStatus status={ registeredChannel.syncStatus } />
|
|
<div className="woocommerce-marketing-registered-channel-description__separator" />
|
|
</>
|
|
) }
|
|
<IssueStatus registeredChannel={ registeredChannel } />
|
|
</div>
|
|
);
|
|
|
|
/**
|
|
* 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 = ! registeredChannel.isSetupCompleted ? (
|
|
<Button variant="primary" href={ registeredChannel.setupUrl }>
|
|
{ __( 'Finish setup', 'woocommerce' ) }
|
|
</Button>
|
|
) : (
|
|
<Button variant="secondary" href={ registeredChannel.manageUrl }>
|
|
{ __( 'Manage', 'woocommerce' ) }
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<PluginCardBody
|
|
className="woocommerce-marketing-registered-channel-card-body"
|
|
icon={
|
|
<img
|
|
src={ registeredChannel.icon }
|
|
alt={ registeredChannel.title }
|
|
/>
|
|
}
|
|
name={ registeredChannel.title }
|
|
description={ description }
|
|
button={ button }
|
|
/>
|
|
);
|
|
};
|