woocommerce/plugins/woocommerce-admin/client/tasks/fills/PaymentGatewaySuggestions/components/WCPay/UsageModal.js

63 lines
1.6 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { getQuery, updateQueryString } from '@woocommerce/navigation';
import interpolateComponents from 'interpolate-components';
import { Link } from '@woocommerce/components';
/**
* Internal dependencies
*/
import Modal from '~/profile-wizard/steps/usage-modal';
export const UsageModal = () => {
const query = getQuery();
const shouldDisplayModal = query[ 'wcpay-connection-success' ] === '1';
const [ isOpen, setIsOpen ] = useState( shouldDisplayModal );
if ( ! isOpen ) {
return null;
}
const closeModal = () => {
setIsOpen( false );
updateQueryString( { 'wcpay-connection-success': undefined } );
};
const title = __(
'Help us build a better WooCommerce Payments experience',
'woocommerce-admin'
);
const trackingMessage = interpolateComponents( {
mixedString: __(
'By agreeing to share non-sensitive {{link}}usage data{{/link}}, youll help us improve features and optimize the WooCommerce Payments experience. You can opt out at any time.',
'woocommerce-admin'
),
components: {
link: (
<Link
href="https://woocommerce.com/usage-tracking?utm_medium=product"
target="_blank"
type="external"
/>
),
},
} );
return (
<Modal
isDismissible={ false }
title={ title }
message={ trackingMessage }
acceptActionText={ __( 'I agree', 'woocommerce-admin' ) }
dismissActionText={ __( 'No thanks', 'woocommerce-admin' ) }
onContinue={ closeModal }
onClose={ closeModal }
/>
);
};
export default UsageModal;