From 756fe32c048a6c8e4e81d33147398340e93adc84 Mon Sep 17 00:00:00 2001 From: Fernando Marichal Date: Thu, 23 Feb 2023 15:49:24 -0300 Subject: [PATCH] Create spotlight on analytics revenue report (#36653) * Add `RevenueReportDateTour` component * Add changelog * Fix styles * Rename RevenueReportDateTour to ReportDateTour to use it in two different reports: Orders and Revenue * Change default sort date to date_paid # Conflicts: # plugins/woocommerce/src/Admin/API/Reports/Orders/Stats/DataStore.php * Update changelog * Assign date_column_name before calling parent constructor * Remove date_type default value from configuration and show tour only if user didn't assign a value --------- Co-authored-by: Fernando Marichal Co-authored-by: Nathan Schneider --- .../client/analytics/report/orders/index.js | 9 ++ .../client/analytics/report/revenue/index.js | 9 ++ .../client/analytics/settings/config.js | 6 +- .../client/guided-tours/report-date-tour.scss | 7 ++ .../client/guided-tours/report-date-tour.tsx | 100 ++++++++++++++++++ ...pdate-35887_spotlight_on_analytics_revenue | 4 + .../API/Reports/Orders/Stats/DataStore.php | 2 +- .../src/Internal/Admin/Settings.php | 1 - 8 files changed, 135 insertions(+), 3 deletions(-) create mode 100644 plugins/woocommerce-admin/client/guided-tours/report-date-tour.scss create mode 100644 plugins/woocommerce-admin/client/guided-tours/report-date-tour.tsx create mode 100644 plugins/woocommerce/changelog/update-35887_spotlight_on_analytics_revenue diff --git a/plugins/woocommerce-admin/client/analytics/report/orders/index.js b/plugins/woocommerce-admin/client/analytics/report/orders/index.js index 93358fb841b..d447aa0e4eb 100644 --- a/plugins/woocommerce-admin/client/analytics/report/orders/index.js +++ b/plugins/woocommerce-admin/client/analytics/report/orders/index.js @@ -3,6 +3,7 @@ */ import { Component, Fragment } from '@wordpress/element'; import PropTypes from 'prop-types'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -13,6 +14,7 @@ import OrdersReportTable from './table'; import ReportChart from '../../components/report-chart'; import ReportSummary from '../../components/report-summary'; import ReportFilters from '../../components/report-filters'; +import { ReportDateTour } from '~/guided-tours/report-date-tour'; export default class OrdersReport extends Component { render() { @@ -49,6 +51,13 @@ export default class OrdersReport extends Component { filters={ filters } advancedFilters={ advancedFilters } /> + ); } diff --git a/plugins/woocommerce-admin/client/analytics/report/revenue/index.js b/plugins/woocommerce-admin/client/analytics/report/revenue/index.js index f7a68728bac..18f604222a1 100644 --- a/plugins/woocommerce-admin/client/analytics/report/revenue/index.js +++ b/plugins/woocommerce-admin/client/analytics/report/revenue/index.js @@ -3,6 +3,7 @@ */ import { Component, Fragment } from '@wordpress/element'; import PropTypes from 'prop-types'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -13,6 +14,7 @@ import ReportChart from '../../components/report-chart'; import ReportSummary from '../../components/report-summary'; import RevenueReportTable from './table'; import ReportFilters from '../../components/report-filters'; +import { ReportDateTour } from '~/guided-tours/report-date-tour'; export default class RevenueReport extends Component { render() { @@ -49,6 +51,13 @@ export default class RevenueReport extends Component { filters={ filters } advancedFilters={ advancedFilters } /> + ); } diff --git a/plugins/woocommerce-admin/client/analytics/settings/config.js b/plugins/woocommerce-admin/client/analytics/settings/config.js index 1de8237aa9f..4ecc1e39c02 100644 --- a/plugins/woocommerce-admin/client/analytics/settings/config.js +++ b/plugins/woocommerce-admin/client/analytics/settings/config.js @@ -123,6 +123,11 @@ export const config = applyFilters( SETTINGS_FILTER, { label: __( 'Date type:', 'woocommerce' ), inputType: 'select', options: [ + { + label: __( 'Select a date type', 'woocommerce' ), + value: '', + disabled: true, + }, { label: __( 'Date created', 'woocommerce' ), value: 'date_created', @@ -143,6 +148,5 @@ export const config = applyFilters( SETTINGS_FILTER, { 'Database date field considered for Revenue and Orders reports', 'woocommerce' ), - defaultValue: 'date_created', }, } ); diff --git a/plugins/woocommerce-admin/client/guided-tours/report-date-tour.scss b/plugins/woocommerce-admin/client/guided-tours/report-date-tour.scss new file mode 100644 index 00000000000..c99748afa84 --- /dev/null +++ b/plugins/woocommerce-admin/client/guided-tours/report-date-tour.scss @@ -0,0 +1,7 @@ +.woocommerce-revenue-report-date-tour { + h2.woocommerce-tour-kit-step__heading { + font-size: 1.5em; + line-height: 1.5em; + letter-spacing: 0.4px; + } +} diff --git a/plugins/woocommerce-admin/client/guided-tours/report-date-tour.tsx b/plugins/woocommerce-admin/client/guided-tours/report-date-tour.tsx new file mode 100644 index 00000000000..65fc92327e2 --- /dev/null +++ b/plugins/woocommerce-admin/client/guided-tours/report-date-tour.tsx @@ -0,0 +1,100 @@ +/** + * External dependencies + */ +import { TourKit, TourKitTypes } from '@woocommerce/components'; +import { __ } from '@wordpress/i18n'; +import { OPTIONS_STORE_NAME } from '@woocommerce/data'; +import { + createElement, + createInterpolateElement, + useState, +} from '@wordpress/element'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { getAdminLink } from '@woocommerce/settings'; + +/** + * Internal dependencies + */ +import './report-date-tour.scss'; + +const DATE_TYPE_OPTION = 'woocommerce_date_type'; + +export const ReportDateTour: React.FC< { + optionName: string; + headingText: string; +} > = ( { optionName, headingText } ) => { + const [ isDismissed, setIsDismissed ] = useState( false ); + const { updateOptions } = useDispatch( OPTIONS_STORE_NAME ); + + const { shouldShowTour, isResolving } = useSelect( ( select ) => { + const { getOption, hasFinishedResolution } = + select( OPTIONS_STORE_NAME ); + return { + shouldShowTour: + getOption( optionName ) !== 'yes' && + getOption( DATE_TYPE_OPTION ) === false, + isResolving: ! ( + hasFinishedResolution( 'getOption', [ optionName ] ) && + hasFinishedResolution( 'getOption', [ DATE_TYPE_OPTION ] ) + ), + }; + } ); + + if ( isDismissed || ! shouldShowTour || isResolving ) { + return null; + } + + const config: TourKitTypes.WooConfig = { + steps: [ + { + referenceElements: { + desktop: + '.woocommerce-filters-filter > .components-dropdown', + }, + focusElement: { + desktop: + '.woocommerce-filters-filter > .components-dropdown', + }, + meta: { + name: 'product-feedback-', + heading: headingText, + descriptions: { + desktop: createInterpolateElement( + __( + 'We now collect orders in this table based on when the payment went through, rather than when they were placed. You can change this in settings.', + 'woocommerce' + ), + { + link: createElement( 'a', { + href: getAdminLink( + 'admin.php?page=wc-admin&path=/analytics/settings' + ), + 'aria-label': __( + 'Analytics date settings', + 'woocommerce' + ), + } ), + } + ), + }, + primaryButton: { + text: __( 'Got it', 'woocommerce' ), + }, + }, + options: { + classNames: { + desktop: 'woocommerce-revenue-report-date-tour', + }, + }, + }, + ], + closeHandler: () => { + updateOptions( { + [ optionName ]: 'yes', + } ); + setIsDismissed( true ); + }, + }; + + return ; +}; diff --git a/plugins/woocommerce/changelog/update-35887_spotlight_on_analytics_revenue b/plugins/woocommerce/changelog/update-35887_spotlight_on_analytics_revenue new file mode 100644 index 00000000000..49596b65370 --- /dev/null +++ b/plugins/woocommerce/changelog/update-35887_spotlight_on_analytics_revenue @@ -0,0 +1,4 @@ +Significance: major +Type: update + +Change the default date used on Revenue and Orders report to 'date_paid' and create spotlight on both reports diff --git a/plugins/woocommerce/src/Admin/API/Reports/Orders/Stats/DataStore.php b/plugins/woocommerce/src/Admin/API/Reports/Orders/Stats/DataStore.php index 6902dee9eaf..53ab9ad08c7 100644 --- a/plugins/woocommerce/src/Admin/API/Reports/Orders/Stats/DataStore.php +++ b/plugins/woocommerce/src/Admin/API/Reports/Orders/Stats/DataStore.php @@ -73,7 +73,7 @@ class DataStore extends ReportsDataStore implements DataStoreInterface { * Dynamically sets the date column name based on configuration */ public function __construct() { - $this->date_column_name = get_option( 'woocommerce_date_type', 'date_created' ); + $this->date_column_name = get_option( 'woocommerce_date_type', 'date_paid' ); parent::__construct(); } diff --git a/plugins/woocommerce/src/Internal/Admin/Settings.php b/plugins/woocommerce/src/Internal/Admin/Settings.php index 772e4383134..516fb1f294b 100644 --- a/plugins/woocommerce/src/Internal/Admin/Settings.php +++ b/plugins/woocommerce/src/Internal/Admin/Settings.php @@ -293,7 +293,6 @@ class Settings { 'option_key' => 'woocommerce_date_type', 'label' => __( 'Date Type', 'woocommerce' ), 'description' => __( 'Database date field considered for Revenue and Orders reports', 'woocommerce' ), - 'default' => 'date_created', 'type' => 'select', 'options' => array( 'date_created' => 'date_created',