143 lines
3.9 KiB
TypeScript
143 lines
3.9 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __, sprintf } from '@wordpress/i18n';
|
|
import { Button, Tooltip } from '@wordpress/components';
|
|
import { getNewPath } from '@woocommerce/navigation';
|
|
import { help } from '@wordpress/icons';
|
|
import { useContext } from '@wordpress/element';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { getAdminSetting } from '../../../utils/admin-settings';
|
|
import { Subscription } from './types';
|
|
import './my-subscriptions.scss';
|
|
import {
|
|
InstalledSubscriptionsTable,
|
|
AvailableSubscriptionsTable,
|
|
} from './table/table';
|
|
import {
|
|
installedSubscriptionRow,
|
|
availableSubscriptionRow,
|
|
} from './table/table-rows';
|
|
import { SubscriptionsContext } from '../../contexts/subscriptions-context';
|
|
|
|
export default function MySubscriptions(): JSX.Element {
|
|
const { subscriptions, isLoading } = useContext( SubscriptionsContext );
|
|
|
|
const updateConnectionUrl = getNewPath(
|
|
{
|
|
page: 'wc-addons',
|
|
section: 'helper',
|
|
filter: 'all',
|
|
'wc-helper-refresh': 1,
|
|
'wc-helper-nonce': getAdminSetting( 'wc_helper_nonces' ).refresh,
|
|
'redirect-to-wc-admin': 1,
|
|
},
|
|
''
|
|
);
|
|
const updateConnectionHTML = sprintf(
|
|
// translators: %s is a link to the update connection page.
|
|
__(
|
|
'If you don\'t see your subscription, try <a href="%s">updating</a> your connection.',
|
|
'woocommerce'
|
|
),
|
|
updateConnectionUrl
|
|
);
|
|
|
|
const subscriptionsInstalled: Array< Subscription > = subscriptions.filter(
|
|
( subscription: Subscription ) => subscription.local.installed
|
|
);
|
|
|
|
const subscriptionsAvailable: Array< Subscription > = subscriptions.filter(
|
|
( subscription: Subscription ) =>
|
|
! subscriptionsInstalled.includes( subscription )
|
|
);
|
|
|
|
return (
|
|
<div className="woocommerce-marketplace__my-subscriptions">
|
|
<section>
|
|
<h2 className="woocommerce-marketplace__my-subscriptions__header">
|
|
{ __( 'Installed on this store', 'woocommerce' ) }
|
|
</h2>
|
|
<p className="woocommerce-marketplace__my-subscriptions__table-description">
|
|
<span
|
|
dangerouslySetInnerHTML={ {
|
|
__html: updateConnectionHTML,
|
|
} }
|
|
/>
|
|
<Tooltip
|
|
text={
|
|
<>
|
|
<h3>
|
|
{ __(
|
|
"Still don't see your subscription?",
|
|
'woocommerce'
|
|
) }
|
|
</h3>
|
|
<p
|
|
dangerouslySetInnerHTML={ {
|
|
__html: __(
|
|
'To see all your subscriptions go to <a href="https://woocommerce.com/my-account/" target="_blank" class="woocommerce-marketplace__my-subscriptions__tooltip-external-link">your account</a> on WooCommerce.com.',
|
|
'woocommerce'
|
|
),
|
|
} }
|
|
/>
|
|
</>
|
|
}
|
|
>
|
|
<Button
|
|
icon={ help }
|
|
iconSize={ 20 }
|
|
isSmall={ true }
|
|
label={ __( 'Help', 'woocommerce' ) }
|
|
/>
|
|
</Tooltip>
|
|
</p>
|
|
<InstalledSubscriptionsTable
|
|
isLoading={ isLoading }
|
|
rows={ subscriptionsInstalled.map( ( item ) => {
|
|
return installedSubscriptionRow( item );
|
|
} ) }
|
|
/>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="woocommerce-marketplace__my-subscriptions__header">
|
|
{ __( 'Not in use', 'woocommerce' ) }
|
|
</h2>
|
|
<p className="woocommerce-marketplace__my-subscriptions__table-description">
|
|
{ __(
|
|
'Your unused WooCommerce.com subscriptions.',
|
|
'woocommerce'
|
|
) }
|
|
</p>
|
|
<AvailableSubscriptionsTable
|
|
isLoading={ isLoading }
|
|
rows={ subscriptionsAvailable.map( ( item ) => {
|
|
return availableSubscriptionRow( item );
|
|
} ) }
|
|
/>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="woocommerce-marketplace__my-subscriptions__header">
|
|
{ __( 'Free to install', 'woocommerce' ) }
|
|
</h2>
|
|
<p className="woocommerce-marketplace__my-subscriptions__table-description">
|
|
{ __(
|
|
'Easily install your existing free to install WooCommerce.com subscriptions across sites.',
|
|
'woocommerce'
|
|
) }
|
|
</p>
|
|
<AvailableSubscriptionsTable
|
|
isLoading={ isLoading }
|
|
// TODO: fetch free and uninstalled subscriptions.
|
|
rows={ [] }
|
|
/>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|