woocommerce/plugins/woocommerce-admin/client/homescreen/stats-overview/index.js

176 lines
4.3 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { Fragment } from '@wordpress/element';
import { TabPanel, Card, CardHeader, CardFooter } from '@wordpress/components';
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
import { get, xor } from 'lodash';
import {
EllipsisMenu,
MenuItem,
MenuTitle,
Link,
} from '@woocommerce/components';
import { useUserPreferences, PLUGINS_STORE_NAME } from '@woocommerce/data';
import { getNewPath } from '@woocommerce/navigation';
import { recordEvent } from '@woocommerce/tracks';
import { Text } from '@woocommerce/experimental';
import { Experiment } from '@woocommerce/explat';
/**
* Internal dependencies
*/
import './style.scss';
import { DEFAULT_STATS, DEFAULT_HIDDEN_STATS } from './defaults';
import StatsList from './stats-list';
import { InstallJetpackCTA } from './install-jetpack-cta';
import { getAdminSetting } from '~/utils/admin-settings';
const { performanceIndicators = [] } = getAdminSetting( 'dataEndpoints', {
performanceIndicators: [],
} );
const stats = performanceIndicators.filter( ( indicator ) => {
return DEFAULT_STATS.includes( indicator.stat );
} );
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
export const StatsOverview = () => {
const { updateUserPreferences, ...userPrefs } = useUserPreferences();
const hiddenStats = get(
userPrefs,
[ 'homepage_stats', 'hiddenStats' ],
DEFAULT_HIDDEN_STATS
);
const jetPackIsConnected = useSelect( ( select ) => {
return select( PLUGINS_STORE_NAME ).isJetpackConnected();
}, [] );
const homePageStats = userPrefs.homepage_stats || {};
const userDismissedJetpackInstall = homePageStats.installJetpackDismissed;
const toggleStat = ( stat ) => {
const nextHiddenStats = xor( hiddenStats, [ stat ] );
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
updateUserPreferences( {
homepage_stats: { hiddenStats: nextHiddenStats },
} );
recordEvent( 'statsoverview_indicators_toggle', {
indicator_name: stat,
status: nextHiddenStats.includes( stat ) ? 'off' : 'on',
} );
};
const activeStats = stats.filter(
( item ) => ! hiddenStats.includes( item.stat )
);
const HeaderText = (
<Text variant="title.small" size="20" lineHeight="28px">
{ __( 'Stats overview', 'woocommerce' ) }
</Text>
);
return (
<Card
size="large"
className="woocommerce-stats-overview woocommerce-homescreen-card"
>
<CardHeader size="medium">
<Experiment
name="woocommerce_test_experiment"
defaultExperience={ HeaderText }
treatmentExperience={ HeaderText }
loadingExperience={ HeaderText }
/>
<EllipsisMenu
label={ __(
'Choose which values to display',
'woocommerce'
) }
renderContent={ () => (
<Fragment>
<MenuTitle>
{ __( 'Display stats:', 'woocommerce' ) }
</MenuTitle>
{ stats.map( ( item ) => {
const checked = ! hiddenStats.includes(
item.stat
);
return (
<MenuItem
checked={ checked }
isCheckbox
isClickable
key={ item.stat }
onInvoke={ () =>
toggleStat( item.stat )
}
>
{ item.label }
</MenuItem>
);
} ) }
</Fragment>
) }
/>
</CardHeader>
<TabPanel
className="woocommerce-stats-overview__tabs"
onSelect={ ( period ) => {
recordEvent( 'statsoverview_date_picker_update', {
period,
} );
} }
tabs={ [
{
title: __( 'Today', 'woocommerce' ),
name: 'today',
},
{
title: __( 'Week to date', 'woocommerce' ),
name: 'week',
},
{
title: __( 'Month to date', 'woocommerce' ),
name: 'month',
},
] }
>
{ ( tab ) => (
<Fragment>
{ ! jetPackIsConnected &&
! userDismissedJetpackInstall && (
<InstallJetpackCTA />
) }
<StatsList
query={ {
period: tab.name,
compare: 'previous_period',
} }
stats={ activeStats }
/>
</Fragment>
) }
</TabPanel>
<CardFooter>
<Link
className="woocommerce-stats-overview__more-btn"
href={ getNewPath( {}, '/analytics/overview' ) }
type="wc-admin"
onClick={ () => {
recordEvent( 'statsoverview_indicators_click', {
key: 'view_detailed_stats',
} );
} }
>
{ __( 'View detailed stats', 'woocommerce' ) }
</Link>
</CardFooter>
</Card>
);
};
Migrate user store to wp.data (https://github.com/woocommerce/woocommerce-admin/pull/4505) * Initial user preferences custom hook (wc meta). * Organize dependencies. * Specify dependencies in useSelect() call. * Remove specifying preference keys. There's currently no performance benefit to be had. * Add HoC for hydrating current user data. * Add user prefs update method. * Export user prefs hook and HoC in data package. * Handle error condition when updating user preferences. * Use closure to get user ID for prefs update. * Refactor analytics dashboard to use new user hook. * Refactor ReportTable component to use new user hook. * Move prop access to top of function component. * Add todo for potential manual resolution logic. * Refactor DashboardCharts component to use new user preferences hook. * Move code out of functional component where possible. * Fix chart interval query property. * Refactor Leaderboards component to use new user preferences hook. * Move code out of functional component where possible. * Refactor Inbox panel to use user prefs hook. @todo - updating last read isn't working. * Use user prefs hook in StatsOverview component. * Export user preferences store name. * Use new store for unread inbox indicator. * Hydrate current user data higher up in the app. * Update "last read" timestamp in inbox panel. * Fix StatsOverview test. * Remove unused dispatch method from StorePerformance component. * Remove now defunct user methods from wc-api spec. * Add tests for isRequesting. * JSON decode WC meta on updated user object. * Test user prefs retrieval and save. * Remove todo comment. * Use user prefs hook in Jetpack install CTA on homepage.
2020-06-10 16:46:46 +00:00
export default StatsOverview;