Edit File by line

import { Component, unmountComponentAtNode } from '@wordpress/element';

[0] Fix | Delete

import PropTypes from 'prop-types';

[1] Fix | Delete

import { __ } from '@wordpress/i18n';

[2] Fix | Delete

import {

[3] Fix | Delete

Button,

[4] Fix | Delete

Card,

[5] Fix | Delete

CardBody,

[6] Fix | Delete

CardHeader,

[7] Fix | Delete

CardFooter,

[8] Fix | Delete

Spinner,

[9] Fix | Delete

} from '@wordpress/components';

[10] Fix | Delete

import {

[11] Fix | Delete

SelectAction,

[12] Fix | Delete

DisplayActionSettings,

[13] Fix | Delete

sendEmail,

[14] Fix | Delete

DisplayModal,

[15] Fix | Delete

DisplayNotice,

[16] Fix | Delete

selectScreenData,

[17] Fix | Delete

} from './';

[18] Fix | Delete

[19] Fix | Delete

export class TriggerEmailActionComponent extends Component {

[20] Fix | Delete

constructor( props ) {

[21] Fix | Delete

super( props );

[22] Fix | Delete

this.state = {

[23] Fix | Delete

form: false,

[24] Fix | Delete

submissionIds: false,

[25] Fix | Delete

action: false,

[26] Fix | Delete

processing: false,

[27] Fix | Delete

sent: -1,

[28] Fix | Delete

notSent: [],

[29] Fix | Delete

isModalOpen: false,

[30] Fix | Delete

emailsProcessed: 0,

[31] Fix | Delete

fetchAborted: false

[32] Fix | Delete

};

[33] Fix | Delete

this.setStateNewValue = this.setStateNewValue.bind(this);

[34] Fix | Delete

this.setModalOpen = this.setModalOpen.bind( this )

[35] Fix | Delete

this.setProcessing = this.setProcessing.bind( this );

[36] Fix | Delete

this.setSent = this.setSent.bind( this );

[37] Fix | Delete

this.setNotSent = this.setNotSent.bind( this );

[38] Fix | Delete

this.setEmailProcessed = this.setEmailProcessed.bind( this );

[39] Fix | Delete

this.cancelComp = this.cancelComp.bind( this );

[40] Fix | Delete

this.resetProcessing = this.resetProcessing.bind( this );

[41] Fix | Delete

this.abortFetch = this.abortFetch.bind(this);

[42] Fix | Delete

this.triggerEmailAction = this.triggerEmailAction.bind(this);

[43] Fix | Delete

}

[44] Fix | Delete

[45] Fix | Delete

//Component Ready event

[46] Fix | Delete

componentDidMount() {

[47] Fix | Delete

//gather props from screen

[48] Fix | Delete

selectScreenData( this.setStateNewValue, this.props );

[49] Fix | Delete

}

[50] Fix | Delete

//Catch when all submissions have been processed to set a new process state

[51] Fix | Delete

componentDidUpdate() {

[52] Fix | Delete

//Check process state to catch end of fetch tasks and display data

[53] Fix | Delete

if ( this.state.processing ) {

[54] Fix | Delete

if (

[55] Fix | Delete

typeof this.state.processing !== 'undefined' &&

[56] Fix | Delete

this.state.emailsProcessed === this.state.submissionIds.length

[57] Fix | Delete

) {

[58] Fix | Delete

//Set Process state to false without resetting data yet to have it displayed

[59] Fix | Delete

this.setProcessing( false );

[60] Fix | Delete

}

[61] Fix | Delete

}

[62] Fix | Delete

}

[63] Fix | Delete

//Prepare component to cancel all subscribtions before unmounting

[64] Fix | Delete

componentWillUnmount() {

[65] Fix | Delete

//Make sure all jobs are stopped

[66] Fix | Delete

this.abortFetch();

[67] Fix | Delete

this.resetProcessing();

[68] Fix | Delete

}

[69] Fix | Delete

[70] Fix | Delete

//Global state setter for states with new explicit value

[71] Fix | Delete

setStateNewValue( stateName, newValue ) {

[72] Fix | Delete

this.setState( { [stateName]: newValue } );

[73] Fix | Delete

}

[74] Fix | Delete

//Use a setter with an explicit name for the processing state

[75] Fix | Delete

setProcessing( newValue ) {

[76] Fix | Delete

this.setState( { processing: newValue } );

[77] Fix | Delete

}

[78] Fix | Delete

setModalOpen( newValue ) {

[79] Fix | Delete

this.setState( { isModalOpen: newValue } );

[80] Fix | Delete

}

[81] Fix | Delete

[82] Fix | Delete

// Store number of emails sent

[83] Fix | Delete

setSent( value ) {

[84] Fix | Delete

//Check if reset process or increment

[85] Fix | Delete

if( value == "undefined" && value === 0 ){

[86] Fix | Delete

this.setState( { sent: -1 } );

[87] Fix | Delete

} else {

[88] Fix | Delete

this.setState( ( prev ) => {

[89] Fix | Delete

return { sent: prev.sent + 1 }

[90] Fix | Delete

});

[91] Fix | Delete

}

[92] Fix | Delete

}

[93] Fix | Delete

//Store IDs of unsent emails

[94] Fix | Delete

setNotSent(submissionId) {

[95] Fix | Delete

//Check if reset process or array push

[96] Fix | Delete

if(!submissionId){

[97] Fix | Delete

this.setState( { notSent: [] } );

[98] Fix | Delete

} else {

[99] Fix | Delete

const newNotSent = this.state.notSent.concat(submissionId);

[100] Fix | Delete

this.setState( { notSent: newNotSent } );

[101] Fix | Delete

}

[102] Fix | Delete

}

[103] Fix | Delete

//Store number of emails processed ( sent or not )

[104] Fix | Delete

setEmailProcessed( value ) {

[105] Fix | Delete

//Check if reset process or increment

[106] Fix | Delete

if( typeof value !== "undefined" && value === 0 ){

[107] Fix | Delete

this.setState( { emailsProcessed: 0 } );

[108] Fix | Delete

[109] Fix | Delete

} else {

[110] Fix | Delete

this.setState( ( prev ) => {

[111] Fix | Delete

return { emailsProcessed: prev.emailsProcessed + 1 }

[112] Fix | Delete

});

[113] Fix | Delete

}

[114] Fix | Delete

}

[115] Fix | Delete

//Reset all state to default start of resending task

[116] Fix | Delete

resetProcessing() {

[117] Fix | Delete

this.setProcessing( false );

[118] Fix | Delete

this.setEmailProcessed( 0 );

[119] Fix | Delete

this.setSent( -1 );

[120] Fix | Delete

this.setNotSent( false );

[121] Fix | Delete

}

[122] Fix | Delete

//Abort fetch controller

[123] Fix | Delete

abortFetch(){

[124] Fix | Delete

this.props.fetchController.abort();

[125] Fix | Delete

this.setState( { fetchAborted: true });

[126] Fix | Delete

}

[127] Fix | Delete

[128] Fix | Delete

//Cancel emails or Remove Component via cancel button

[129] Fix | Delete

cancelComp() {

[130] Fix | Delete

//Unmount component

[131] Fix | Delete

if(this.state.processing){

[132] Fix | Delete

//Close Modal

[133] Fix | Delete

this.setStateNewValue( "isModalOpen", false );

[134] Fix | Delete

//exit Fetch operation

[135] Fix | Delete

this.setProcessing( false );

[136] Fix | Delete

this.abortFetch();

[137] Fix | Delete

} else {

[138] Fix | Delete

unmountComponentAtNode(

[139] Fix | Delete

document.getElementById( 'nf-trigger-emails-container' )

[140] Fix | Delete

);

[141] Fix | Delete

}

[142] Fix | Delete

[143] Fix | Delete

}

[144] Fix | Delete

[145] Fix | Delete

//Trigger email task

[146] Fix | Delete

async triggerEmailAction() {

[147] Fix | Delete

//Init spinner, remove button and start the proces state management

[148] Fix | Delete

this.setProcessing( true );

[149] Fix | Delete

this.setSent( 0 );

[150] Fix | Delete

//Define data needed to Fetch request

[151] Fix | Delete

const { state, props } = this;

[152] Fix | Delete

const restUrl = props.globalParams.restUrl;

[153] Fix | Delete

const {

[154] Fix | Delete

form,

[155] Fix | Delete

submissionIds,

[156] Fix | Delete

action

[157] Fix | Delete

} = state;

[158] Fix | Delete

const formID = form.formID;

[159] Fix | Delete

const signal = props.fetchController.signal;

[160] Fix | Delete

//Props for process

[161] Fix | Delete

const actionProps = {

[162] Fix | Delete

restUrl,

[163] Fix | Delete

action,

[164] Fix | Delete

formID,

[165] Fix | Delete

setSent: this.setSent,

[166] Fix | Delete

setNotSent: this.setNotSent,

[167] Fix | Delete

setEmailProcessed: this.setEmailProcessed,

[168] Fix | Delete

signal

[169] Fix | Delete

};

[170] Fix | Delete

[171] Fix | Delete

//Loop over each submission to trigger the email action

[172] Fix | Delete

for ( const [ key, value ] of Object.entries( submissionIds ) ) {

[173] Fix | Delete

await sendEmail( actionProps, value )

[174] Fix | Delete

.catch( (e) => {

[175] Fix | Delete

console.log( 'Email cancelled: ' + e.message );

[176] Fix | Delete

this.setNotSent( value );

[177] Fix | Delete

});

[178] Fix | Delete

}

[179] Fix | Delete

[180] Fix | Delete

};

[181] Fix | Delete

[182] Fix | Delete

[183] Fix | Delete

render() {

[184] Fix | Delete

const { state } = this;

[185] Fix | Delete

const {

[186] Fix | Delete

form,

[187] Fix | Delete

submissionIds,

[188] Fix | Delete

action,

[189] Fix | Delete

processing,

[190] Fix | Delete

sent,

[191] Fix | Delete

notSent,

[192] Fix | Delete

isModalOpen,

[193] Fix | Delete

fetchAborted

[194] Fix | Delete

} = state;

[195] Fix | Delete

[196] Fix | Delete

return (

[197] Fix | Delete

[198] Fix | Delete

[199] Fix | Delete

<br />

[200] Fix | Delete

<br />

[201] Fix | Delete

[202] Fix | Delete

{ form && (

[203] Fix | Delete

<SelectAction

[204] Fix | Delete

form={ form }

[205] Fix | Delete

setAction={ this.setStateNewValue }

[206] Fix | Delete

[207] Fix | Delete

) }

[208] Fix | Delete

</CardHeader>

[209] Fix | Delete

[210] Fix | Delete

[211] Fix | Delete

{ action ? (

[212] Fix | Delete

[213] Fix | Delete

<h3>

[214] Fix | Delete

{ __( 'Action Selected: ', 'ninja-forms' ) }

[215] Fix | Delete

{ action.label }

[216] Fix | Delete

</h3>

[217] Fix | Delete

[218] Fix | Delete

</>

[219] Fix | Delete

) : (

[220] Fix | Delete

<p>

[221] Fix | Delete

{ __(

[222] Fix | Delete

'No Email Action Selected',

[223] Fix | Delete

'ninja-forms'

[224] Fix | Delete

) }

[225] Fix | Delete

</p>

[226] Fix | Delete

) }

[227] Fix | Delete

</CardBody>

[228] Fix | Delete

[229] Fix | Delete

[230] Fix | Delete

<div>

[231] Fix | Delete

{fetchAborted && (

[232] Fix | Delete

<Button

[233] Fix | Delete

isPrimary

[234] Fix | Delete

onClick={ () => this.cancelComp() }

[235] Fix | Delete

[236] Fix | Delete

{ __( 'Reopen to allow resending process', 'ninja-forms' ) }

[237] Fix | Delete

</Button>

[238] Fix | Delete

)}

[239] Fix | Delete

{action && !processing && !fetchAborted && (

[240] Fix | Delete

<Button

[241] Fix | Delete

isPrimary

[242] Fix | Delete

onClick={ () =>

[243] Fix | Delete

this.triggerEmailAction()

[244] Fix | Delete

}

[245] Fix | Delete

style={ { marginRight: '1rem' } }

[246] Fix | Delete

[247] Fix | Delete

{ __( 'Resend ', 'ninja-forms' ) +

[248] Fix | Delete

submissionIds.length +

[249] Fix | Delete

__( ' emails', 'ninja-forms' ) }

[250] Fix | Delete

</Button>

[251] Fix | Delete

)}

[252] Fix | Delete

{!fetchAborted &&

[253] Fix | Delete

<Button

[254] Fix | Delete

isSecondary

[255] Fix | Delete

onClick={ () => this.setModalOpen( true ) }

[256] Fix | Delete

[257] Fix | Delete

{ __( 'Cancel', 'ninja-forms' ) }

[258] Fix | Delete

</Button>

[259] Fix | Delete

}

[260] Fix | Delete

{ isModalOpen && (

[261] Fix | Delete

<DisplayModal

[262] Fix | Delete

action={ this.cancelComp }

[263] Fix | Delete

title={ __(

[264] Fix | Delete

'Cancel Email Action?',

[265] Fix | Delete

'ninja-forms'

[266] Fix | Delete

) }

[267] Fix | Delete

actionText={ __( 'Yes', 'ninja-forms' ) }

[268] Fix | Delete

cancel={ this.setModalOpen }

[269] Fix | Delete

cancelText={ __( 'No', 'ninja-forms' ) }

[270] Fix | Delete

[271] Fix | Delete

) }

[272] Fix | Delete

[273] Fix | Delete

{ processing && <Spinner /> }

[274] Fix | Delete

[275] Fix | Delete

{ notSent.length > 0 && (

[276] Fix | Delete

<DisplayNotice

[277] Fix | Delete

status="error"

[278] Fix | Delete

isDismissible="false"

[279] Fix | Delete

text={

[280] Fix | Delete

__(

[281] Fix | Delete

'Emails failed to be sent for: ',

[282] Fix | Delete

'ninja-forms'

[283] Fix | Delete

) + Object.values( notSent )

[284] Fix | Delete

}

[285] Fix | Delete

[286] Fix | Delete

) }

[287] Fix | Delete

[288] Fix | Delete

{ sent >= 0 && (

[289] Fix | Delete

<DisplayNotice

[290] Fix | Delete

isDismissible="false"

[291] Fix | Delete

text={

[292] Fix | Delete

sent +

[293] Fix | Delete

' / ' +

[294] Fix | Delete

submissionIds.length +

[295] Fix | Delete

__( ' emails sent', 'ninja-forms' )

[296] Fix | Delete

}

[297] Fix | Delete

[298] Fix | Delete

) }

[299] Fix | Delete

</div>

[300] Fix | Delete

</CardFooter>

[301] Fix | Delete

</Card>

[302] Fix | Delete

</>

[303] Fix | Delete

);

[304] Fix | Delete

}

[305] Fix | Delete

}

[306] Fix | Delete

[307] Fix | Delete

TriggerEmailActionComponent.propTypes = {

[308] Fix | Delete

globalParams: PropTypes.object.isRequired,

[309] Fix | Delete

triggerEmailActionsParams: PropTypes.object.isRequired,

[310] Fix | Delete

fetchController: PropTypes.object.isRequired

[311] Fix | Delete

}

[312] Fix | Delete