137 lines
3.2 KiB
TypeScript
137 lines
3.2 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { List } from '@woocommerce/components';
|
|
import { download, Icon } from '@wordpress/icons';
|
|
|
|
import {
|
|
Card,
|
|
CardBody,
|
|
CardFooter,
|
|
CardHeader,
|
|
ExternalLink,
|
|
Notice,
|
|
ToggleControl,
|
|
} from '@wordpress/components';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import strings from './strings';
|
|
import { WC_ASSET_URL } from '~/utils/admin-settings';
|
|
|
|
export interface Apm {
|
|
id: string;
|
|
title: string;
|
|
icon: string;
|
|
description: string;
|
|
link: string;
|
|
extension: string;
|
|
}
|
|
|
|
export const apms: Apm[] = [
|
|
{
|
|
id: 'paypal',
|
|
title: strings.apms.paypal.title,
|
|
icon: `${ WC_ASSET_URL }images/payment_methods/72x72/paypal.png`,
|
|
description: strings.apms.paypal.description,
|
|
link: 'https://woocommerce.com/products/woocommerce-paypal-payments/',
|
|
extension: 'woocommerce-paypal-payments',
|
|
},
|
|
{
|
|
id: 'amazonpay',
|
|
title: strings.apms.amazonpay.title,
|
|
icon: `${ WC_ASSET_URL }images/payment_methods/72x72/amazonpay.png`,
|
|
description: strings.apms.amazonpay.description,
|
|
link: 'https://woocommerce.com/products/pay-with-amazon/',
|
|
extension: 'woocommerce-gateway-amazon-payments-advanced',
|
|
},
|
|
{
|
|
id: 'klarna',
|
|
title: strings.apms.klarna.title,
|
|
icon: `${ WC_ASSET_URL }images/payment_methods/72x72/klarna.png`,
|
|
description: strings.apms.klarna.description,
|
|
link: 'https://woocommerce.com/products/klarna-payments/',
|
|
extension: 'klarna-payments-for-woocommerce',
|
|
},
|
|
];
|
|
|
|
interface ApmListProps {
|
|
enabledApms: Set< Apm >;
|
|
setEnabledApms: ( value: Set< Apm > ) => void;
|
|
}
|
|
|
|
const ApmNotice = ( { enabledApms }: { enabledApms: Set< Apm > } ) => {
|
|
if ( ! enabledApms.size ) {
|
|
return null;
|
|
}
|
|
|
|
const extensions = [ ...enabledApms ]
|
|
.map( ( apm ) => apm.title )
|
|
.join( ', ' );
|
|
return (
|
|
<Card className="connect-account__apms-notice">
|
|
<CardBody>
|
|
<Notice status={ 'info' } isDismissible={ false }>
|
|
<Icon icon={ download } />
|
|
<div>{ strings.apms.installText( extensions ) }</div>
|
|
</Notice>
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const ApmList: React.FunctionComponent< ApmListProps > = ( {
|
|
enabledApms,
|
|
setEnabledApms,
|
|
} ) => {
|
|
const handleToggleChange = ( apm: Apm ) => {
|
|
if ( enabledApms.has( apm ) ) {
|
|
enabledApms.delete( apm );
|
|
} else {
|
|
enabledApms.add( apm );
|
|
}
|
|
setEnabledApms( new Set< Apm >( enabledApms ) );
|
|
};
|
|
|
|
const apmsList = apms.map( ( apm ) => ( {
|
|
key: apm.id,
|
|
title: apm.title,
|
|
content: (
|
|
<>
|
|
{ apm.description }{ ' ' }
|
|
<a href={ apm.link } target="_blank" rel="noreferrer">
|
|
{ strings.learnMore }
|
|
</a>
|
|
</>
|
|
),
|
|
before: <img src={ apm.icon } alt="" />,
|
|
after: (
|
|
<ToggleControl
|
|
checked={ enabledApms.has( apm ) }
|
|
onChange={ () => handleToggleChange( apm ) }
|
|
/>
|
|
),
|
|
} ) );
|
|
return (
|
|
<>
|
|
<ApmNotice enabledApms={ enabledApms } />
|
|
<Card size="large" className="connect-account__apms">
|
|
<CardHeader>
|
|
<h1>{ strings.apms.addMoreWaysToPay }</h1>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<List items={ apmsList } />
|
|
</CardBody>
|
|
<CardFooter>
|
|
<ExternalLink href="https://woocommerce.com/product-category/woocommerce-extensions/payment-gateways/wallets/?categoryIds=28682&collections=product&page=1">
|
|
{ strings.apms.seeMore }
|
|
</ExternalLink>
|
|
</CardFooter>
|
|
</Card>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ApmList;
|