38 lines
1.4 KiB
JavaScript
38 lines
1.4 KiB
JavaScript
import { __ } from '@wordpress/i18n';
|
|
import { Dashicon } from '@wordpress/components';
|
|
import styles from './RangePicker.module.scss';
|
|
import { format, subDays } from 'date-fns';
|
|
|
|
export default function UpsellRangePicker() {
|
|
const yesterday = subDays( new Date(), 1 );
|
|
const startDate = subDays( yesterday, 6 );
|
|
const endDate = yesterday;
|
|
const compareEnd = subDays( new Date(), 8 );
|
|
const compareStart = subDays( compareEnd, 6 );
|
|
|
|
const displayValue = `${ format( startDate, 'MMM dd, yyyy' ) } - ${ format( endDate, 'MMM dd, yyyy' ) }`;
|
|
const compareValue = `${ format( compareStart, 'MMM dd, yyyy' ) } - ${ format( compareEnd, 'MMM dd, yyyy' ) }`;
|
|
const link = 'https://www.download-monitor.com/pricing/?utm_source=reports_page&utm_medium=lite-vs-pro&utm_campaign=dlm-enhanced_metrics';
|
|
|
|
return (
|
|
<div className={ styles.wrapper }>
|
|
<div
|
|
className={ styles.input }
|
|
>
|
|
<div className={ styles.inputWrapper }>
|
|
<span className={ styles.displayValue } >{ displayValue }</span>
|
|
<span className={ styles.compareValue }>
|
|
{ __( 'Compared to:', 'download-monitor' ) } { compareValue }
|
|
</span>
|
|
</div>
|
|
<div className={ styles.iconWrapper }>
|
|
<Dashicon icon="arrow-down-alt2" className={ styles.icon } />
|
|
</div>
|
|
</div>
|
|
<a className={ styles.badge } href={ link } target="_BLANK" rel="noreferrer">
|
|
{ __( 'Paid', 'download-monitor' ) }
|
|
</a>
|
|
</div>
|
|
);
|
|
}
|