2b6d65b9a9445c4271ab9076ead5605a

Edit file

File name : index.jsx

Content :

import { Button, Gridicon, getProductCheckoutUrl } from '@automattic/jetpack-components';
import { ExternalLink, Popover } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { createInterpolateElement, useCallback, useRef, useState } from '@wordpress/element';
import { __, _n, sprintf } from '@wordpress/i18n';
import useAnalytics from '../../../hooks/useAnalytics';
import { STORE_ID } from '../../../store';
import './style.scss';

const StorageHelpPopover = ( { className, forecastInDays } ) => {
	const STORAGE_USAGE_HELP_POPOVER_STATE_KEY = 'storage_usage_help_popover_state';
	const popoverState = null === localStorage.getItem( STORAGE_USAGE_HELP_POPOVER_STATE_KEY );
	const [ isPopoverVisible, setPopoverVisible ] = useState( popoverState );
	const addonSlug = useSelect( select => select( STORE_ID ).getStorageAddonOfferSlug() );
	const siteSlug = useSelect( select => select( STORE_ID ).getCalypsoSlug() );
	const adminUrl = useSelect( select => select( STORE_ID ).getSiteData().adminUrl );

const popover = useRef( null );

const { tracks } = useAnalytics();
	const trackUpgradeStorageClick = useCallback( () => {
		tracks.recordEvent( 'jetpack_backup_upgrade_storage_prompt_from_popover_cta', {
			site: siteSlug,
		} );
	}, [ tracks, siteSlug ] );

const toggleHelpPopover = useCallback(
		event => {
			setPopoverVisible( ! isPopoverVisible );
			localStorage.setItem( STORAGE_USAGE_HELP_POPOVER_STATE_KEY, 'shown' );
			// when the info popover inside a button, we don't want clicking it to propagate up
			event.stopPropagation();
		},
		[ isPopoverVisible ]
	);

if ( ! forecastInDays ) {
		return null;
	}

const storageUpgradeUrl = getProductCheckoutUrl(
		addonSlug,
		siteSlug,
		`${ adminUrl }admin.php?page=jetpack-backup`,
		true
	);

export default StorageHelpPopover;

Gel4y Mini Shell

Edit file