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 <contacto@fernandomarichal.com>
Co-authored-by: Nathan Schneider <nsschneider1@gmail.com>

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 }
 				/>
+				<ReportDateTour
+					optionName="woocommerce_orders_report_date_tour_shown"
+					headingText={ __(
+						'Orders are now reported based on the payment dates ✅',
+						'woocommerce'
+					) }
+				/>
 			</Fragment>
 		);
 	}

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 }
 				/>
+				<ReportDateTour
+					optionName="woocommerce_revenue_report_date_tour_shown"
+					headingText={ __(
+						'Revenue is now reported from paid orders ✅',
+						'woocommerce'
+					) }
+				/>
 			</Fragment>
 		);
 	}

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',
 	},
 } );

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;
+	}
+}

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 <link>settings</link>.',
+								'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 <TourKit config={ config } />;
+};

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

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();
 	}
 

plugins/woocommerce/src/Internal/Admin/Settings.php

@@ -293,7 +293,6 @@ public function add_settings( $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',