woocommerce/plugins/woocommerce-admin/client/analytics/report/customers/table.js

306 lines
6.6 KiB
JavaScript
Raw Normal View History

2018-12-06 22:21:46 +00:00
/**
* External dependencies
*/
import { __, _n } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { Tooltip } from '@wordpress/components';
import { Date, Link } from '@woocommerce/components';
import { formatValue } from '@woocommerce/number';
import { getAdminLink } from '@woocommerce/settings';
import { defaultTableDateFormat } from '@woocommerce/date';
2018-12-06 22:21:46 +00:00
/**
* Internal dependencies
*/
import ReportTable from '../../components/report-table';
import { CurrencyContext } from '../../../lib/currency-context';
import { getAdminSetting } from '~/utils/admin-settings';
2018-12-06 22:21:46 +00:00
const { countries } = getAdminSetting( 'dataEndpoints', { countries: {} } );
class CustomersReportTable extends Component {
2018-12-06 22:21:46 +00:00
constructor() {
super();
this.getHeadersContent = this.getHeadersContent.bind( this );
this.getRowsContent = this.getRowsContent.bind( this );
this.getSummary = this.getSummary.bind( this );
2018-12-06 22:21:46 +00:00
}
getHeadersContent() {
return [
{
label: __( 'Name', 'woocommerce-admin' ),
2018-12-06 22:21:46 +00:00
key: 'name',
required: true,
isLeftAligned: true,
isSortable: true,
},
{
label: __( 'Username', 'woocommerce-admin' ),
2018-12-06 22:21:46 +00:00
key: 'username',
hiddenByDefault: true,
},
{
label: __( 'Last active', 'woocommerce-admin' ),
key: 'date_last_active',
defaultSort: true,
isSortable: true,
},
2018-12-06 22:21:46 +00:00
{
label: __( 'Date registered', 'woocommerce-admin' ),
key: 'date_registered',
2018-12-06 22:21:46 +00:00
isSortable: true,
},
{
label: __( 'Email', 'woocommerce-admin' ),
2018-12-06 22:21:46 +00:00
key: 'email',
},
{
label: __( 'Orders', 'woocommerce-admin' ),
2018-12-06 22:21:46 +00:00
key: 'orders_count',
isSortable: true,
isNumeric: true,
},
{
label: __( 'Total spend', 'woocommerce-admin' ),
2018-12-06 22:21:46 +00:00
key: 'total_spend',
isSortable: true,
isNumeric: true,
},
{
label: __( 'AOV', 'woocommerce-admin' ),
screenReaderLabel: __(
'Average order value',
'woocommerce-admin'
),
2018-12-12 14:46:40 +00:00
key: 'avg_order_value',
2018-12-06 22:21:46 +00:00
isNumeric: true,
},
{
Merge final `version/1.0` branch with `master` (https://github.com/woocommerce/woocommerce-admin/pull/3848) * Try: Moving Customers to main Woo Menu (https://github.com/woocommerce/woocommerce-admin/pull/3632) * Only add onboarding settings on wc-admin pages when task list should be shown. (https://github.com/woocommerce/woocommerce-admin/pull/3722) * Use cron for unsnoozing admin notes (https://github.com/woocommerce/woocommerce-admin/pull/3662) * Use wp-cron for admin note snoozing. * Remove "unsnooze" scheduled action. * Use correct version. * Avoid using deprecated method for unscheduling actions. * Onboarding: Fix toggle tracking events (https://github.com/woocommerce/woocommerce-admin/pull/3645) * Fix errant wcadmin prefix on event name * Track the onboarding toggle on the option in case enable_onboarding isn't used * Move toggle actions to separate function * Move onboarding actions * Move onboarding filters * Move help tab updates to add_toggle_actions * Only run onboarding actions when enabled * Onboarding: Add tracks events when profiler steps are completed (https://github.com/woocommerce/woocommerce-admin/pull/3726) * Add tracks for store profiler step completion * Record event when profiler is completed * Ensure continue setup loads the onboarding profiler (https://github.com/woocommerce/woocommerce-admin/pull/3646) * 'All that include' option removed when input field is empty (https://github.com/woocommerce/woocommerce-admin/pull/3700) * 'All that include' option removed when input field is empty Added a control to check that when the input field 'Search by customer name' is empty, the 'All that include' option is not appearing. * Const name improved The constant name hasValues was changed to optionsHaveValues (more descriptive) * Fix select text alignment (https://github.com/woocommerce/woocommerce-admin/pull/3723) * Stock panel indicator - cache and use lookup tables. (https://github.com/woocommerce/woocommerce-admin/pull/3729) * Stock panel indicator - cache and use lookup tables. * Revise query, clear transient on product update. * Fix error, ht Josh. * Checklist: Remove sideloaded images to reduce build size, take 2 (https://github.com/woocommerce/woocommerce-admin/pull/3731) * Remove homepage template images. * Use other-small on all industries, adjust text color. * Remove background dim and opacity set to 0 * Fix/3631 (https://github.com/woocommerce/woocommerce-admin/pull/3730) * Added CBD as an industry type CBD was added as an industry type in API * Industries options modified Modified the industries options. Now we are able to choose if we will use an input or not in the option. * API control changed for industries. API control changed for industries. Now it accepts the data type we need. * Added input in Industries list for the option "Other" Added an input for the option "Other" in the industries list * Added suggested changes in review comments. * Added data preparation for recordEvent * Changed variable to snake_case The variable "industriesWithDetail" was changed to "industries_with_detail" (snake_case) * Onboarding: Create homepage without redirect (https://github.com/woocommerce/woocommerce-admin/pull/3727) * Add link to edit homepage instead of redirect * Add busy state to homepage creation button * Publish homepage on create via API * Update homepage notice to show on first post update * Update homepage creation notice per design * Record event on customize homepage * Set homepage to frontpage on creation * Add deactivation note for feature plugin (https://github.com/woocommerce/woocommerce-admin/pull/3687) * Add version deactivation note * Add the note to deactivate if the version is older than the current WC version * Deactivate wc admin feature plugin on action click * Add notes version hooks * change the Package class namespace to exclude from standalone autoloader * add use statement for FeaturePlugin * add note explaining namespace * use wc-admin-deactivate-plugin note name * Rename file and class to WC_Admin_Notes_Deactivate_Plugin Co-authored-by: Ron Rennick <ron@ronandandrea.com> Co-authored-by: Paul Sealock <psealock@gmail.com> * Add Travis tests on GH for release branch (https://github.com/woocommerce/woocommerce-admin/pull/3751) * Add Travis tests on GH for release branch * fix linter errors * ActivityPanels.php -> use public static functions * Remove free text Search option when no query exists (https://github.com/woocommerce/woocommerce-admin/pull/3755) * Revert changes in woocommerce/woocommerce-admin#3700 * Don't add free text search if no query exists * Add tests for Search without query * Add test for showing free text search option * Fix image sideloading for store industries. (https://github.com/woocommerce/woocommerce-admin/pull/3743) * Fix image sideloading for store industries. Data format changed in https://github.com/woocommerce/woocommerce-admin/pull/3730 * Fix industry image sideload in cases where the count is less than requested. * Be backwards compatible with the old industry data format. * Added event props to identify stores with WCS and Jetpack installed (https://github.com/woocommerce/woocommerce-admin/pull/3750) * Added event props to identify stores with WCS and Jetpack installed Also, added Jeckpack connected status * Improved variable name * Simplified method Simplified method. "intersection" check was removed * Tests errors repeared The method "clear_low_out_of_stock_count_transient" now is static. * OBW: fix sideloading image test error (https://github.com/woocommerce/woocommerce-admin/pull/3762) * Release 0.26.0 changes (https://github.com/woocommerce/woocommerce-admin/pull/3753) * add deactivation hook to Package.php (https://github.com/woocommerce/woocommerce-admin/pull/3770) * Add active version functions (https://github.com/woocommerce/woocommerce-admin/pull/3772) * add active version functions to Package.php Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> * 0.26.1 changes (https://github.com/woocommerce/woocommerce-admin/pull/3773) * Customers Report: fix missing report param in search (https://github.com/woocommerce/woocommerce-admin/pull/3778) * Product titles include encoded entities (https://github.com/woocommerce/woocommerce-admin/pull/3765) * Stripped HTML from product titles and decoded before displaying them Stripped html from product titles and entities are decoded before displaying them * Stripped HTML from product titles and decoded in Stock report Stripped html from product titles and entities are decoded before displaying them. Now in Stock report * Added support for HTML tags and encoded entities on product titles Added support for HTML tags and encoded entities on filtered product list, dropdown menus and tag names. Also, strip_tags() function was replaced with wp_strip_all_tags() instead. * strip_tags() function was replaced with wp_strip_all_tags() instead. * Added control for a variable Added control for "item->data" before applying wp_strip_all_tags method. * pre-commit changes * Test text corrected * Enable taxes on automatic tax setup (https://github.com/woocommerce/woocommerce-admin/pull/3795) * Update Country Labeling to Match Core (https://github.com/woocommerce/woocommerce-admin/pull/3790) * Updated country labeling Country labeling on Customer Report was updated * Updated country labeling in other files * remove .jitm-card notice padding (https://github.com/woocommerce/woocommerce-admin/pull/3814) * OBW Connect: Fix requesting state (https://github.com/woocommerce/woocommerce-admin/pull/3786) * OBW Connect: Fix requesting state * pass down setIsPending * setIspending propType * defaultProps * test * Revert "test" This reverts commit e921092b19401931cc1aec8ee84fa53c53b67f36. * better comparison for redirect * Fixes Taxes Report search bug and adds initial documentation. (https://github.com/woocommerce/woocommerce-admin/pull/3816) * Initial Taxes Report documentation. * Fix taxes endpoint search parameter. * OBW: Fix retry plugin install button disappearing (https://github.com/woocommerce/woocommerce-admin/pull/3787) * OBW: Fix retry plugin install btn disappearing * try suggestion * Revert "try suggestion" This reverts commit 5b9386957a501ac3e729e5f16b0ee71c9d792859. * Fix special character escaping in search. (https://github.com/woocommerce/woocommerce-admin/pull/3826) * Properly prepare/escape special characters in Product search. * Properly prepare/escape special characters in Coupon search. * Properly prepare/escape special characters in Tax code search. * Fix tracking on migrated options (https://github.com/woocommerce/woocommerce-admin/pull/3828) * Don't track onboarding toggle if migrating options * Prevent WC_Tracks from recording event post types not yet registered * Activity Panels: Remove W Panel (https://github.com/woocommerce/woocommerce-admin/pull/3827) * Remove W Notif Panel. * Add back in trapping logic, and hide on non-embed pages. * add npm run test:zip command (https://github.com/woocommerce/woocommerce-admin/pull/3823) * add npm run test:zip command * 1.0.0 release changes🎉 (https://github.com/woocommerce/woocommerce-admin/pull/3831) * 1.0.0 release changes🎉 * changelog * 0.26.1 changelog * Add Report Extension Example: Add default props to ReportFilters (https://github.com/woocommerce/woocommerce-admin/pull/3830) * ReportFilters component: Add sane defaults * styles * add required column * add left join to sku ordering (https://github.com/woocommerce/woocommerce-admin/pull/3845) * Deal with lint errors, and improperly merged files * regenerate package-lock.json * attempting to resolve package lock conflict. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Joshua T Flowers <joshuatf@gmail.com> Co-authored-by: Ron Rennick <ron@ronandandrea.com> Co-authored-by: Fernando <ultimoround@gmail.com> Co-authored-by: edmundcwm <edmundcwm@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-03-10 02:47:39 +00:00
label: __( 'Country / Region', 'woocommerce-admin' ),
2018-12-06 22:21:46 +00:00
key: 'country',
isSortable: true,
2018-12-06 22:21:46 +00:00
},
{
label: __( 'City', 'woocommerce-admin' ),
2018-12-06 22:21:46 +00:00
key: 'city',
hiddenByDefault: true,
isSortable: true,
},
{
2019-06-28 16:41:22 +00:00
label: __( 'Region', 'woocommerce-admin' ),
key: 'state',
hiddenByDefault: true,
isSortable: true,
2018-12-06 22:21:46 +00:00
},
{
label: __( 'Postal code', 'woocommerce-admin' ),
key: 'postcode',
2018-12-06 22:21:46 +00:00
hiddenByDefault: true,
isSortable: true,
2018-12-06 22:21:46 +00:00
},
];
}
getCountryName( code ) {
return typeof countries[ code ] !== 'undefined'
? countries[ code ]
: null;
}
2018-12-06 22:21:46 +00:00
getRowsContent( customers ) {
const dateFormat = getAdminSetting(
'dateFormat',
defaultTableDateFormat
);
const {
formatAmount,
formatDecimal: getCurrencyFormatDecimal,
getCurrencyConfig,
} = this.context;
return customers?.map( ( customer ) => {
2018-12-06 22:21:46 +00:00
const {
avg_order_value: avgOrderValue,
date_last_active: dateLastActive,
date_registered: dateRegistered,
2018-12-06 22:21:46 +00:00
email,
name,
user_id: userId,
orders_count: ordersCount,
2018-12-06 22:21:46 +00:00
username,
total_spend: totalSpend,
postcode,
city,
state,
country,
2018-12-06 22:21:46 +00:00
} = customer;
const countryName = this.getCountryName( country );
2018-12-06 22:21:46 +00:00
const customerNameLink = userId ? (
<Link
href={ getAdminLink( 'user-edit.php?user_id=' + userId ) }
type="wp-admin"
>
2018-12-06 22:21:46 +00:00
{ name }
</Link>
) : (
name
2018-12-06 22:21:46 +00:00
);
const dateLastActiveDisplay = dateLastActive ? (
<Date date={ dateLastActive } visibleFormat={ dateFormat } />
) : (
'—'
);
const dateRegisteredDisplay = dateRegistered ? (
<Date date={ dateRegistered } visibleFormat={ dateFormat } />
) : (
'—'
);
const countryDisplay = (
<Fragment>
<Tooltip text={ countryName }>
<span aria-hidden="true">{ country }</span>
</Tooltip>
<span className="screen-reader-text">{ countryName }</span>
</Fragment>
);
2018-12-06 22:21:46 +00:00
return [
{
display: customerNameLink,
value: name,
},
{
display: username,
value: username,
},
{
display: dateLastActiveDisplay,
value: dateLastActive,
},
2018-12-06 22:21:46 +00:00
{
display: dateRegisteredDisplay,
value: dateRegistered,
2018-12-06 22:21:46 +00:00
},
{
display: <a href={ 'mailto:' + email }>{ email }</a>,
value: email,
},
{
display: formatValue(
getCurrencyConfig(),
'number',
ordersCount
),
value: ordersCount,
2018-12-06 22:21:46 +00:00
},
{
display: formatAmount( totalSpend ),
value: getCurrencyFormatDecimal( totalSpend ),
2018-12-06 22:21:46 +00:00
},
{
display: formatAmount( avgOrderValue ),
value: getCurrencyFormatDecimal( avgOrderValue ),
2018-12-06 22:21:46 +00:00
},
{
display: countryDisplay,
2018-12-06 22:21:46 +00:00
value: country,
},
{
display: city,
value: city,
},
{
display: state,
value: state,
},
2018-12-06 22:21:46 +00:00
{
display: postcode,
value: postcode,
2018-12-06 22:21:46 +00:00
},
];
} );
}
getSummary( totals ) {
const {
customers_count: customersCount = 0,
avg_orders_count: avgOrdersCount = 0,
avg_total_spend: avgTotalSpend = 0,
avg_avg_order_value: avgAvgOrderValue = 0,
} = totals;
const { formatAmount, getCurrencyConfig } = this.context;
const currency = getCurrencyConfig();
return [
{
label: _n(
'customer',
'customers',
customersCount,
'woocommerce-admin'
),
value: formatValue( currency, 'number', customersCount ),
},
{
label: _n(
'Average order',
'Average orders',
avgOrdersCount,
'woocommerce-admin'
),
value: formatValue( currency, 'number', avgOrdersCount ),
},
{
label: __( 'Average lifetime spend', 'woocommerce-admin' ),
value: formatAmount( avgTotalSpend ),
},
{
label: __( 'Average order value', 'woocommerce-admin' ),
value: formatAmount( avgAvgOrderValue ),
},
];
}
2018-12-06 22:21:46 +00:00
render() {
2019-03-21 03:25:05 +00:00
const { isRequesting, query, filters, advancedFilters } = this.props;
2018-12-06 22:21:46 +00:00
return (
<ReportTable
endpoint="customers"
getHeadersContent={ this.getHeadersContent }
getRowsContent={ this.getRowsContent }
getSummary={ this.getSummary }
summaryFields={ [
'customers_count',
'avg_orders_count',
'avg_total_spend',
'avg_avg_order_value',
] }
isRequesting={ isRequesting }
2018-12-06 22:21:46 +00:00
itemIdField="id"
query={ query }
labels={ {
placeholder: __(
'Search by customer name',
'woocommerce-admin'
),
} }
searchBy="customers"
title={ __( 'Customers', 'woocommerce-admin' ) }
columnPrefsKey="customers_report_columns"
2019-03-21 03:25:05 +00:00
filters={ filters }
advancedFilters={ advancedFilters }
2018-12-06 22:21:46 +00:00
/>
);
}
}
CustomersReportTable.contextType = CurrencyContext;
export default CustomersReportTable;