Edit File by line

/* eslint-disable camelcase */

[0] Fix | Delete

/* global flatpickr, Chart, moment, ajaxurl, wpforms_admin_payments_overview, wpforms_admin */

[1] Fix | Delete

[2] Fix | Delete

/**

[3] Fix | Delete

* Script for manipulating DOM events in the "Payments Overview" page.

[4] Fix | Delete

* This script will be accessible in the "WPForms" → "Payments" page.

[5] Fix | Delete

[6] Fix | Delete

* @since 1.8.2

[7] Fix | Delete

[8] Fix | Delete

[9] Fix | Delete

const WPFormsPaymentsOverview = window.WPFormsPaymentsOverview || ( function( document, window, $, ajaxurl, l10n ) {

[10] Fix | Delete

/**

[11] Fix | Delete

* Elements holder.

[12] Fix | Delete

[13] Fix | Delete

* @since 1.8.2

[14] Fix | Delete

[15] Fix | Delete

* @type {Object}

[16] Fix | Delete

[17] Fix | Delete

const el = {};

[18] Fix | Delete

[19] Fix | Delete

/**

[20] Fix | Delete

* Runtime variables.

[21] Fix | Delete

[22] Fix | Delete

* @since 1.8.2

[23] Fix | Delete

[24] Fix | Delete

* @type {Object}

[25] Fix | Delete

[26] Fix | Delete

const vars = {

[27] Fix | Delete

[28] Fix | Delete

/**

[29] Fix | Delete

* Chart.js instance.

[30] Fix | Delete

[31] Fix | Delete

* @since 1.8.2

[32] Fix | Delete

[33] Fix | Delete

chart: null,

[34] Fix | Delete

[35] Fix | Delete

/**

[36] Fix | Delete

* Flatpickr instance.

[37] Fix | Delete

[38] Fix | Delete

* @since 1.8.2

[39] Fix | Delete

[40] Fix | Delete

datepicker: null,

[41] Fix | Delete

[42] Fix | Delete

/**

[43] Fix | Delete

* The ISO 639-2 language code of the WordPress installation.

[44] Fix | Delete

[45] Fix | Delete

* @since 1.8.2

[46] Fix | Delete

[47] Fix | Delete

locale: l10n.locale,

[48] Fix | Delete

[49] Fix | Delete

/**

[50] Fix | Delete

* Get the base currency code.

[51] Fix | Delete

[52] Fix | Delete

* @since 1.8.2

[53] Fix | Delete

[54] Fix | Delete

currency: l10n.currency,

[55] Fix | Delete

[56] Fix | Delete

/**

[57] Fix | Delete

* Get the number of decimal points for the currency.

[58] Fix | Delete

[59] Fix | Delete

* @since 1.8.4

[60] Fix | Delete

[61] Fix | Delete

currencyDecimals: l10n.decimals,

[62] Fix | Delete

[63] Fix | Delete

/**

[64] Fix | Delete

* Cryptographic token for validating authorized Ajax data exchange.

[65] Fix | Delete

[66] Fix | Delete

* @since 1.8.2

[67] Fix | Delete

[68] Fix | Delete

nonce: l10n.nonce,

[69] Fix | Delete

[70] Fix | Delete

/**

[71] Fix | Delete

* Initial dataset that will appear on the chart.

[72] Fix | Delete

[73] Fix | Delete

* @since 1.8.2

[74] Fix | Delete

[75] Fix | Delete

data: [],

[76] Fix | Delete

[77] Fix | Delete

/**

[78] Fix | Delete

* Chart type. Options are "Line" or "Bar".

[79] Fix | Delete

* A line chart is a way of plotting data points on a line.

[80] Fix | Delete

* A bar chart provides a way of showing data values represented as vertical bars.

[81] Fix | Delete

[82] Fix | Delete

* 1: Bar.

[83] Fix | Delete

* 2: Line.

[84] Fix | Delete

[85] Fix | Delete

* @since 1.8.2

[86] Fix | Delete

[87] Fix | Delete

type: l10n.settings.graph_style === 1 ? 'bar' : 'line',

[88] Fix | Delete

[89] Fix | Delete

/**

[90] Fix | Delete

* Timespan (date range) delimiter. By default: ' - '.

[91] Fix | Delete

[92] Fix | Delete

* @since 1.8.2

[93] Fix | Delete

[94] Fix | Delete

delimiter: l10n.delimiter,

[95] Fix | Delete

[96] Fix | Delete

/**

[97] Fix | Delete

* The Moment.js compatible format string to use for the tooltip.

[98] Fix | Delete

[99] Fix | Delete

* @since 1.8.5.4

[100] Fix | Delete

[101] Fix | Delete

tooltipFormat: l10n.date_format,

[102] Fix | Delete

[103] Fix | Delete

/**

[104] Fix | Delete

* The current page URI.

[105] Fix | Delete

[106] Fix | Delete

* @since 1.8.2

[107] Fix | Delete

[108] Fix | Delete

* @return {URL} The current page URI.

[109] Fix | Delete

[110] Fix | Delete

get currentPageUri() {

[111] Fix | Delete

// eslint-disable-next-line compat/compat

[112] Fix | Delete

return new URL( l10n.page_uri );

[113] Fix | Delete

[114] Fix | Delete

[115] Fix | Delete

/**

[116] Fix | Delete

* Generic CSS class names for applying visual changes.

[117] Fix | Delete

[118] Fix | Delete

* @since 1.8.2

[119] Fix | Delete

[120] Fix | Delete

classNames: {

[121] Fix | Delete

hide: 'wpforms-hide',

[122] Fix | Delete

ready: 'is-ready',

[123] Fix | Delete

fetching: 'doing-ajax',

[124] Fix | Delete

selected: 'is-selected',

[125] Fix | Delete

calculated: 'is-calculated',

[126] Fix | Delete

[127] Fix | Delete

[128] Fix | Delete

/**

[129] Fix | Delete

* Start and end dates.

[130] Fix | Delete

[131] Fix | Delete

* @since 1.8.2

[132] Fix | Delete

[133] Fix | Delete

timespan: '',

[134] Fix | Delete

[135] Fix | Delete

/**

[136] Fix | Delete

* Report stats that are currently being viewed.

[137] Fix | Delete

[138] Fix | Delete

* @since 1.8.2

[139] Fix | Delete

[140] Fix | Delete

report: l10n.active_report,

[141] Fix | Delete

[142] Fix | Delete

/**

[143] Fix | Delete

* Whether the viewed stats are representing the price amounts.

[144] Fix | Delete

[145] Fix | Delete

* @since 1.8.2

[146] Fix | Delete

[147] Fix | Delete

isAmount: false,

[148] Fix | Delete

[149] Fix | Delete

/**

[150] Fix | Delete

* Chart color options.

[151] Fix | Delete

[152] Fix | Delete

* @since 1.8.2

[153] Fix | Delete

[154] Fix | Delete

* @return {Object} Colors object specified for the graph.

[155] Fix | Delete

[156] Fix | Delete

get colors() {

[157] Fix | Delete

const isLine = this.type === 'line';

[158] Fix | Delete

[159] Fix | Delete

return {

[160] Fix | Delete

[161] Fix | Delete

total_payments: { // Bahama Blue.

[162] Fix | Delete

hoverBorderColor: '#055f9a',

[163] Fix | Delete

hoverBackgroundColor: '#055f9a',

[164] Fix | Delete

borderColor: '#056aab',

[165] Fix | Delete

backgroundColor: isLine ? '#e6f0f7' : '#056aab',

[166] Fix | Delete

[167] Fix | Delete

total_sales: { // Fun Green.

[168] Fix | Delete

hoverBorderColor: '#00831e',

[169] Fix | Delete

hoverBackgroundColor: '#00831e',

[170] Fix | Delete

borderColor: '#008a20',

[171] Fix | Delete

backgroundColor: isLine ? '#e3f3e4' : '#008a20',

[172] Fix | Delete

[173] Fix | Delete

total_refunded: { // Bright Gray.

[174] Fix | Delete

hoverBorderColor: '#373e45',

[175] Fix | Delete

hoverBackgroundColor: '#373e45',

[176] Fix | Delete

borderColor: '#50575e',

[177] Fix | Delete

backgroundColor: isLine ? '#ebebec' : '#50575e',

[178] Fix | Delete

[179] Fix | Delete

default: { // Zest - WPForms.

[180] Fix | Delete

hoverBorderColor: '#cd6622',

[181] Fix | Delete

hoverBackgroundColor: '#cd6622',

[182] Fix | Delete

borderColor: '#e27730',

[183] Fix | Delete

backgroundColor: isLine ? '#fcf1ea' : '#e27730',

[184] Fix | Delete

[185] Fix | Delete

};

[186] Fix | Delete

[187] Fix | Delete

[188] Fix | Delete

/**

[189] Fix | Delete

* Translated texts.

[190] Fix | Delete

[191] Fix | Delete

* @since 1.8.2

[192] Fix | Delete

[193] Fix | Delete

* @return {Object} Localized strings.

[194] Fix | Delete

[195] Fix | Delete

get i18n() {

[196] Fix | Delete

return l10n.i18n;

[197] Fix | Delete

[198] Fix | Delete

[199] Fix | Delete

/**

[200] Fix | Delete

* In case the time span extends to other years, the xAxes date display format is updated to include the year identifier.

[201] Fix | Delete

[202] Fix | Delete

* @since 1.8.2

[203] Fix | Delete

[204] Fix | Delete

* @return {Object} Localized strings.

[205] Fix | Delete

[206] Fix | Delete

get xAxesDisplayFormat() {

[207] Fix | Delete

if ( ! this.timespan.length ) {

[208] Fix | Delete

return 'MMM D';

[209] Fix | Delete

}

[210] Fix | Delete

[211] Fix | Delete

const dates = this.timespan.split( this.delimiter );

[212] Fix | Delete

[213] Fix | Delete

if ( ! Array.isArray( dates ) || dates.length !== 2 ) {

[214] Fix | Delete

return 'MMM D';

[215] Fix | Delete

}

[216] Fix | Delete

[217] Fix | Delete

const startYear = moment( dates[ 0 ] ).format( 'YYYY' );

[218] Fix | Delete

const endYear = moment( dates[ 1 ] ).format( 'YYYY' );

[219] Fix | Delete

[220] Fix | Delete

return startYear === endYear ? 'MMM D' : 'MMM D YYYY';

[221] Fix | Delete

[222] Fix | Delete

[223] Fix | Delete

/**

[224] Fix | Delete

* Returns language-sensitive number formatting instance.

[225] Fix | Delete

[226] Fix | Delete

* @since 1.8.2

[227] Fix | Delete

[228] Fix | Delete

* @return {Object} Returns a new NumberFormat object.

[229] Fix | Delete

[230] Fix | Delete

get amountFormatter() {

[231] Fix | Delete

return new Intl.NumberFormat( this.locale, {

[232] Fix | Delete

style: 'currency',

[233] Fix | Delete

useGrouping: true,

[234] Fix | Delete

currencyDisplay: 'narrowSymbol',

[235] Fix | Delete

currency: this.currency,

[236] Fix | Delete

minimumFractionDigits: this.currencyDecimals,

[237] Fix | Delete

maximumFractionDigits: this.currencyDecimals,

[238] Fix | Delete

} );

[239] Fix | Delete

[240] Fix | Delete

[241] Fix | Delete

/**

[242] Fix | Delete

* Retrieves the previewed dataset label.

[243] Fix | Delete

[244] Fix | Delete

* @since 1.8.2.2

[245] Fix | Delete

[246] Fix | Delete

* @return {string} The dataset tooltip label.

[247] Fix | Delete

[248] Fix | Delete

get datasetLabel() {

[249] Fix | Delete

const $statcard = $( `[data-stats=${ this.report }]` );

[250] Fix | Delete

[251] Fix | Delete

if ( ! $statcard.length ) {

[252] Fix | Delete

return this.i18n?.label;

[253] Fix | Delete

}

[254] Fix | Delete

[255] Fix | Delete

return $statcard.find( '.statcard-label' ).text();

[256] Fix | Delete

[257] Fix | Delete

[258] Fix | Delete

/**

[259] Fix | Delete

* Chart.js settings.

[260] Fix | Delete

[261] Fix | Delete

* @since 1.8.2

[262] Fix | Delete

[263] Fix | Delete

* @return {Object} Scriptable options as a function which is called for the chart instances.

[264] Fix | Delete

[265] Fix | Delete

get settings() { /* eslint max-lines-per-function: ["error", 200] */

[266] Fix | Delete

return {

[267] Fix | Delete

[268] Fix | Delete

type: this.type,

[269] Fix | Delete

data: {

[270] Fix | Delete

labels: [],

[271] Fix | Delete

datasets: [

[272] Fix | Delete

{

[273] Fix | Delete

data: [],

[274] Fix | Delete

label: '',

[275] Fix | Delete

borderWidth: 2,

[276] Fix | Delete

pointRadius: 4,

[277] Fix | Delete

pointBorderWidth: 1,

[278] Fix | Delete

maxBarThickness: 100,

[279] Fix | Delete

...{

[280] Fix | Delete

pointBackgroundColor: '#ffffff',

[281] Fix | Delete

...( this.colors[ this.report ] || this.colors.default ),

[282] Fix | Delete

[283] Fix | Delete

[284] Fix | Delete

[285] Fix | Delete

[286] Fix | Delete

options: {

[287] Fix | Delete

layout: {

[288] Fix | Delete

padding: {

[289] Fix | Delete

left: 15,

[290] Fix | Delete

right: 19,

[291] Fix | Delete

top: 25,

[292] Fix | Delete

bottom: 9,

[293] Fix | Delete

[294] Fix | Delete

[295] Fix | Delete

scales: {

[296] Fix | Delete

xAxes: [

[297] Fix | Delete

{

[298] Fix | Delete

type: 'time',

[299] Fix | Delete

offset: this.type === 'bar',

[300] Fix | Delete

time: {

[301] Fix | Delete

unit: 'day',

[302] Fix | Delete

tooltipFormat: this.tooltipFormat,

[303] Fix | Delete

displayFormats: {

[304] Fix | Delete

day: this.xAxesDisplayFormat,

[305] Fix | Delete

[306] Fix | Delete

[307] Fix | Delete

distribution: 'series',

[308] Fix | Delete

ticks: {

[309] Fix | Delete

reverse: $( 'body' ).hasClass( 'rtl' ),

[310] Fix | Delete

beginAtZero: true,

[311] Fix | Delete

padding: 10,

[312] Fix | Delete

fontColor: '#a7aaad',

[313] Fix | Delete

labelOffset: 10,

[314] Fix | Delete

fontSize: 13,

[315] Fix | Delete

minRotation: 25,

[316] Fix | Delete

maxRotation: 25,

[317] Fix | Delete

callback( value, index, values ) {

[318] Fix | Delete

// Distribute the ticks equally starting from the right side of xAxis.

[319] Fix | Delete

const gap = Math.floor( values.length / 7 );

[320] Fix | Delete

[321] Fix | Delete

if ( gap < 1 ) {

[322] Fix | Delete

return value;

[323] Fix | Delete

}

[324] Fix | Delete

[325] Fix | Delete

if ( ( values.length - index - 1 ) % gap === 0 ) {

[326] Fix | Delete

return value;

[327] Fix | Delete

}

[328] Fix | Delete

[329] Fix | Delete

[330] Fix | Delete

[331] Fix | Delete

[332] Fix | Delete

yAxes: [

[333] Fix | Delete

{

[334] Fix | Delete

ticks: {

[335] Fix | Delete

beginAtZero: true,

[336] Fix | Delete

maxTicksLimit: 6,

[337] Fix | Delete

padding: 20,

[338] Fix | Delete

fontColor: '#a7aaad',

[339] Fix | Delete

fontSize: 13,

[340] Fix | Delete

callback: ( value ) => {

[341] Fix | Delete

// Update the scales if the dataset returned includes price amounts.

[342] Fix | Delete

if ( this.isAmount ) {

[343] Fix | Delete

return this.amountFormatter.format( value );

[344] Fix | Delete

}

[345] Fix | Delete

[346] Fix | Delete

// Make sure the tick value has no decimals.

[347] Fix | Delete

if ( Math.floor( value ) === value ) {

[348] Fix | Delete

return value;

[349] Fix | Delete

}

[350] Fix | Delete

[351] Fix | Delete

[352] Fix | Delete

[353] Fix | Delete

[354] Fix | Delete

[355] Fix | Delete

elements: {

[356] Fix | Delete

line: {

[357] Fix | Delete

tension: 0,

[358] Fix | Delete

[359] Fix | Delete

[360] Fix | Delete

animation: {

[361] Fix | Delete

duration: 0,

[362] Fix | Delete

[363] Fix | Delete

hover: {

[364] Fix | Delete

animationDuration: 0,

[365] Fix | Delete

[366] Fix | Delete

legend: {

[367] Fix | Delete

display: false,

[368] Fix | Delete

[369] Fix | Delete

tooltips: {

[370] Fix | Delete

displayColors: false,

[371] Fix | Delete

callbacks: {

[372] Fix | Delete

label: ( { yLabel: value } ) => {

[373] Fix | Delete

let label = `${ this.datasetLabel } `;

[374] Fix | Delete

[375] Fix | Delete

// Update the scales if the dataset returned includes price amounts.

[376] Fix | Delete

if ( this.isAmount ) {

[377] Fix | Delete

label += this.amountFormatter.format( value );

[378] Fix | Delete

return label;

[379] Fix | Delete

}

[380] Fix | Delete

[381] Fix | Delete

label += value;

[382] Fix | Delete

[383] Fix | Delete

return label;

[384] Fix | Delete

[385] Fix | Delete

[386] Fix | Delete

[387] Fix | Delete

responsiveAnimationDuration: 0,

[388] Fix | Delete

maintainAspectRatio: false,

[389] Fix | Delete

[390] Fix | Delete

};

[391] Fix | Delete

[392] Fix | Delete

};

[393] Fix | Delete

[394] Fix | Delete

/**

[395] Fix | Delete

* Public functions and properties.

[396] Fix | Delete

[397] Fix | Delete

* @since 1.8.2

[398] Fix | Delete

[399] Fix | Delete

const app = {

[400] Fix | Delete

[401] Fix | Delete

/**

[402] Fix | Delete

* Start the engine.

[403] Fix | Delete

[404] Fix | Delete

* @since 1.8.2

[405] Fix | Delete

[406] Fix | Delete

init() {

[407] Fix | Delete

$( app.ready );

[408] Fix | Delete

[409] Fix | Delete

[410] Fix | Delete

/**

[411] Fix | Delete

* Document ready.

[412] Fix | Delete

[413] Fix | Delete

* @since 1.8.2

[414] Fix | Delete

[415] Fix | Delete

ready() {

[416] Fix | Delete

app.setup();

[417] Fix | Delete

app.bindEvents();

[418] Fix | Delete

app.initDatePicker();

[419] Fix | Delete

app.initChart();

[420] Fix | Delete

app.initMultiSelect();

[421] Fix | Delete

[422] Fix | Delete

[423] Fix | Delete

/**

[424] Fix | Delete

* Setup. Prepare some variables.

[425] Fix | Delete

[426] Fix | Delete

* @since 1.8.2

[427] Fix | Delete

[428] Fix | Delete

setup() {

[429] Fix | Delete

// Cache DOM elements.

[430] Fix | Delete

el.$document = $( document );

[431] Fix | Delete

el.$wrapper = $( '.wpforms-payments-wrap-payments' );

[432] Fix | Delete

el.$form = $( '#wpforms-payments-table' );

[433] Fix | Delete

el.$spinner = $( '.wpforms-overview-chart .spinner' );

[434] Fix | Delete

el.$canvas = $( '#wpforms-payments-overview-canvas' );

[435] Fix | Delete

el.$filterBtn = $( '#wpforms-datepicker-popover-button' );

[436] Fix | Delete

el.$datepicker = $( '#wpforms-payments-overview-datepicker' );

[437] Fix | Delete

el.$filterForm = $( '.wpforms-overview-top-bar-filter-form' );

[438] Fix | Delete

el.$activeStat = el.$filterForm.find( 'input[name="statcard"]' );

[439] Fix | Delete

el.$table = $( '.wpforms-table-list' );

[440] Fix | Delete

el.$notice = $( '.wpforms-overview-chart-notice' );

[441] Fix | Delete

el.$reports = $( '.wpforms-payments-overview-reports' );

[442] Fix | Delete

el.$multiSelect = $( '.wpforms-multiselect' );

[443] Fix | Delete

[444] Fix | Delete

[445] Fix | Delete

/**

[446] Fix | Delete

* Bind events.

[447] Fix | Delete

[448] Fix | Delete

* @since 1.8.2

[449] Fix | Delete

[450] Fix | Delete

bindEvents() {

[451] Fix | Delete

el.$document

[452] Fix | Delete

.on( 'click', { selectors: [ '.wpforms-datepicker-popover', '.wpforms-dash-widget-settings-menu' ] }, app.handleOnClickOutside );

[453] Fix | Delete

el.$wrapper

[454] Fix | Delete

.on( 'submit', '.wpforms-overview-top-bar-filter-form', app.handleOnSubmitDatepicker )

[455] Fix | Delete

.on( 'submit', '#wpforms-payments-table', app.handleOnSubmitOverviewTable )

[456] Fix | Delete

.on( 'click', '#doaction', app.handleOnBulkAction )

[457] Fix | Delete

.on( 'click', '.wpforms-overview-top-bar-filter-form [type="reset"]', app.handleOnResetDatepicker )

[458] Fix | Delete

.on( 'change', '.wpforms-overview-top-bar-filter-form [type="radio"]', app.handleOnUpdateDatepicker )

[459] Fix | Delete

.on( 'click', '.wpforms-payments-overview-reports button', app.handleOnChangeStatCard )

[460] Fix | Delete

.on( 'click', '.wpforms-dash-widget-settings-menu-save', app.handleOnSaveSettings )

[461] Fix | Delete

.on( 'click', '#wpforms-payments-mode-toggle', app.handleOnToggleMode )

[462] Fix | Delete

.on( 'click', '#wpforms-dash-widget-settings-button', { selector: '.wpforms-dash-widget-settings-menu', hide: '.wpforms-datepicker-popover' }, app.handleOnToggle )

[463] Fix | Delete

.on( 'click', '#wpforms-datepicker-popover-button', { selector: '.wpforms-datepicker-popover', hide: '.wpforms-dash-widget-settings-menu' }, app.handleOnToggle );

[464] Fix | Delete

[465] Fix | Delete

[466] Fix | Delete

/**

[467] Fix | Delete

* Create an instance of "flatpickr".

[468] Fix | Delete

[469] Fix | Delete

* @since 1.8.2

[470] Fix | Delete

[471] Fix | Delete

initDatePicker() {

[472] Fix | Delete

if ( ! el.$datepicker.length ) {

[473] Fix | Delete

return;

[474] Fix | Delete

}

[475] Fix | Delete

[476] Fix | Delete

vars.timespan = el.$datepicker.val();

[477] Fix | Delete

vars.datepicker = flatpickr( el.$datepicker, {

[478] Fix | Delete

mode: 'range',

[479] Fix | Delete

inline: true,

[480] Fix | Delete

allowInput: false,

[481] Fix | Delete

enableTime: false,

[482] Fix | Delete

clickOpens: false,

[483] Fix | Delete

altInput: true,

[484] Fix | Delete

altFormat: 'M j, Y',

[485] Fix | Delete

dateFormat: 'Y-m-d',

[486] Fix | Delete

locale: {

[487] Fix | Delete

[488] Fix | Delete

// Localized per-instance, if applicable.

[489] Fix | Delete

...flatpickr.l10ns[ vars.locale ] || {},

[490] Fix | Delete

rangeSeparator: vars.delimiter,

[491] Fix | Delete

[492] Fix | Delete

onChange( selectedDates, dateStr, instance ) {

[493] Fix | Delete

// Immediately after a user interacts with the datepicker, ensure that the "Custom" option is chosen.

[494] Fix | Delete

const $custom = el.$filterForm.find( 'input[value="custom"]' );

[495] Fix | Delete

[496] Fix | Delete

$custom.prop( 'checked', true );

[497] Fix | Delete

app.selectDatepickerChoice( $custom.parent() );

[498] Fix | Delete

[499] Fix | Delete

12 3