Edit File by line

/**

[0] Fix | Delete

* External dependencies

[1] Fix | Delete

[2] Fix | Delete

import React from 'react';

[3] Fix | Delete

[4] Fix | Delete

/**

[5] Fix | Delete

* WordPress dependencies

[6] Fix | Delete

[7] Fix | Delete

const { __ } = wp.i18n;

[8] Fix | Delete

[9] Fix | Delete

export default ({ currentStep, smushData }) => {

[10] Fix | Delete

const getStepClass = (step) => {

[11] Fix | Delete

const stepClass = 'smush-wizard-bar-step';

[12] Fix | Delete

[13] Fix | Delete

if (!smushData.isPro) {

[14] Fix | Delete

return stepClass + ' disabled';

[15] Fix | Delete

}

[16] Fix | Delete

[17] Fix | Delete

if (step > currentStep) {

[18] Fix | Delete

return stepClass;

[19] Fix | Delete

}

[20] Fix | Delete

[21] Fix | Delete

return (

[22] Fix | Delete

stepClass +

[23] Fix | Delete

(step === currentStep ? ' current' : ' sui-tooltip done')

[24] Fix | Delete

);

[25] Fix | Delete

};

[26] Fix | Delete

[27] Fix | Delete

const getStepNumber = (step) => {

[28] Fix | Delete

return currentStep > step ? (

[29] Fix | Delete

[30] Fix | Delete

) : (

[31] Fix | Delete

step

[32] Fix | Delete

);

[33] Fix | Delete

};

[34] Fix | Delete

[35] Fix | Delete

const steps = [

[36] Fix | Delete

{ number: 1, title: __('Server Type', 'wp-smushit') },

[37] Fix | Delete

{ number: 2, title: __('Add Rules', 'wp-smushit') },

[38] Fix | Delete

{ number: 3, title: __('Finish Setup', 'wp-smushit') },

[39] Fix | Delete

];

[40] Fix | Delete

[41] Fix | Delete

return (

[42] Fix | Delete

[43] Fix | Delete

[44] Fix | Delete

{__('Setup', 'wp-smushit')}

[45] Fix | Delete

</span>

[46] Fix | Delete

[47] Fix | Delete

<h4>{__('Local WebP', 'wp-smushit')}</h4>

[48] Fix | Delete

{!smushData.isPro && (

[49] Fix | Delete

[50] Fix | Delete

{__('Pro', 'wp-smushit')}

[51] Fix | Delete

</span>

[52] Fix | Delete

)}

[53] Fix | Delete

</div>

[54] Fix | Delete

[55] Fix | Delete

[56] Fix | Delete

<svg

[57] Fix | Delete

className="smush-svg-mobile"

[58] Fix | Delete

focusable="false"

[59] Fix | Delete

aria-hidden="true"

[60] Fix | Delete

[61] Fix | Delete

<line

[62] Fix | Delete

x1="0"

[63] Fix | Delete

x2="50%"

[64] Fix | Delete

stroke={1 !== currentStep ? '#1ABC9C' : '#E6E6E6'}

[65] Fix | Delete

[66] Fix | Delete

<line

[67] Fix | Delete

x1="50%"

[68] Fix | Delete

x2="100%"

[69] Fix | Delete

stroke={3 === currentStep ? '#1ABC9C' : '#E6E6E6'}

[70] Fix | Delete

[71] Fix | Delete

</svg>

[72] Fix | Delete

<ul>

[73] Fix | Delete

{steps.map((step) => (

[74] Fix | Delete

<React.Fragment key={step.number}>

[75] Fix | Delete

<li

[76] Fix | Delete

className={getStepClass(step.number)}

[77] Fix | Delete

data-tooltip={__(

[78] Fix | Delete

'This stage is already completed.',

[79] Fix | Delete

'wp-smushit'

[80] Fix | Delete

)}

[81] Fix | Delete

[82] Fix | Delete

[83] Fix | Delete

{getStepNumber(step.number)}

[84] Fix | Delete

</div>

[85] Fix | Delete

{step.title}

[86] Fix | Delete

</li>

[87] Fix | Delete

{3 !== step.number && (

[88] Fix | Delete

<svg

[89] Fix | Delete

data={step.number}

[90] Fix | Delete

data2={currentStep}

[91] Fix | Delete

className="smush-svg-desktop"

[92] Fix | Delete

focusable="false"

[93] Fix | Delete

aria-hidden="true"

[94] Fix | Delete

[95] Fix | Delete

<line

[96] Fix | Delete

y1="0"

[97] Fix | Delete

y2="40px"

[98] Fix | Delete

stroke={

[99] Fix | Delete

step.number < currentStep

[100] Fix | Delete

? '#1ABC9C'

[101] Fix | Delete

: '#E6E6E6'

[102] Fix | Delete

}

[103] Fix | Delete

[104] Fix | Delete

</svg>

[105] Fix | Delete

)}

[106] Fix | Delete

</React.Fragment>

[107] Fix | Delete

))}

[108] Fix | Delete

</ul>

[109] Fix | Delete

</div>

[110] Fix | Delete

</div>

[111] Fix | Delete

);

[112] Fix | Delete

};

[113] Fix | Delete

[114] Fix | Delete