91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { WooFooterItem } from '@woocommerce/admin-layout';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { check, commentContent, lock } from '@wordpress/icons';
|
|
import { createInterpolateElement } from '@wordpress/element';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './footer.scss';
|
|
import IconWithText from '../icon-with-text/icon-with-text';
|
|
import WooIcon from '../../assets/images/woo-icon.svg';
|
|
import { MARKETPLACE_URL } from '../constants';
|
|
|
|
const refundPolicyTitle = createInterpolateElement(
|
|
__( '30 day <a>money back guarantee</a>', 'woocommerce' ),
|
|
{
|
|
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
a: <a href={ MARKETPLACE_URL + '/refund-policy/' } />,
|
|
}
|
|
);
|
|
|
|
const supportTitle = createInterpolateElement(
|
|
__( '<a>Support</a> teams across the world', 'woocommerce' ),
|
|
{
|
|
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
a: <a href={ MARKETPLACE_URL + '/docs/' } />,
|
|
}
|
|
);
|
|
|
|
const paymentTitle = createInterpolateElement(
|
|
__( '<a>Safe & Secure</a> online payment', 'woocommerce' ),
|
|
{
|
|
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
a: <a href={ MARKETPLACE_URL + '/woocommerce-payments/' } />,
|
|
}
|
|
);
|
|
|
|
function FooterContent(): JSX.Element {
|
|
return (
|
|
<div className="woocommerce-marketplace__footer">
|
|
<h2 className="woocommerce-marketplace__footer-title">
|
|
{ __(
|
|
'Grow your business with hundreds of solutions for your store.',
|
|
'woocommerce'
|
|
) }
|
|
</h2>
|
|
<div className="woocommerce-marketplace__footer-columns">
|
|
<IconWithText
|
|
icon={ check }
|
|
title={ refundPolicyTitle }
|
|
description={ __(
|
|
'For extensions and themes purchased from our Marketplace, we offer a full refund within 30 days of your date of purchase.',
|
|
'woocommerce'
|
|
) }
|
|
/>
|
|
<IconWithText
|
|
icon={ commentContent }
|
|
title={ supportTitle }
|
|
description={ __(
|
|
'We have happiness engineers around round the globe to help you at any given time.',
|
|
'woocommerce'
|
|
) }
|
|
/>
|
|
<IconWithText
|
|
icon={ lock }
|
|
title={ paymentTitle }
|
|
description={ __(
|
|
'Safety pay with WooCommerce payments, The only payment solution fully integrated to Woo.',
|
|
'woocommerce'
|
|
) }
|
|
/>
|
|
</div>
|
|
<div className="woocommerce-marketplace__footer-logo">
|
|
<img src={ WooIcon } alt="Woo Logo" aria-hidden="true" />
|
|
<span>{ __( 'Woo Marketplace', 'woocommerce' ) }</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Footer(): JSX.Element {
|
|
return (
|
|
<WooFooterItem>
|
|
<FooterContent />
|
|
</WooFooterItem>
|
|
);
|
|
}
|