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 { __, sprintf } = wp.i18n;

[8] Fix | Delete

[9] Fix | Delete

export default ({

[10] Fix | Delete

currentStep,

[11] Fix | Delete

serverType,

[12] Fix | Delete

rulesMethod,

[13] Fix | Delete

setRulesMethod,

[14] Fix | Delete

setServerType,

[15] Fix | Delete

rulesError,

[16] Fix | Delete

smushData,

[17] Fix | Delete

makeRequest,

[18] Fix | Delete

}) => {

[19] Fix | Delete

const stepsHeading = {

[20] Fix | Delete

1: {

[21] Fix | Delete

title: __('Choose Server Type', 'wp-smushit'),

[22] Fix | Delete

description: __(

[23] Fix | Delete

'Choose your server type. If you don’t know this, please contact your hosting provider.',

[24] Fix | Delete

'wp-smushit'

[25] Fix | Delete

[26] Fix | Delete

[27] Fix | Delete

2: {

[28] Fix | Delete

title: __('Add Rules', 'wp-smushit'),

[29] Fix | Delete

description:

[30] Fix | Delete

'apache' === serverType

[31] Fix | Delete

? __(

[32] Fix | Delete

'Smush can automatically apply WebP conversion rules for Apache servers by writing to your .htaccess file. Alternatively, switch to Manual to apply these rules yourself.',

[33] Fix | Delete

'wp-smushit'

[34] Fix | Delete

)

[35] Fix | Delete

: __(

[36] Fix | Delete

'The following configurations are for NGINX servers. If you do not have access to your NGINX config files you will need to contact your hosting provider to make these changes.',

[37] Fix | Delete

'wp-smushit'

[38] Fix | Delete

[39] Fix | Delete

[40] Fix | Delete

3: {

[41] Fix | Delete

title: __('Finish Setup', 'wp-smushit'),

[42] Fix | Delete

description: __(

[43] Fix | Delete

'The rules have been applied successfully.',

[44] Fix | Delete

'wp-smushit'

[45] Fix | Delete

[46] Fix | Delete

[47] Fix | Delete

};

[48] Fix | Delete

[49] Fix | Delete

const getTopNotice = () => {

[50] Fix | Delete

if (1 === currentStep && smushData.isS3Enabled) {

[51] Fix | Delete

return (

[52] Fix | Delete

[53] Fix | Delete

[54] Fix | Delete

[55] Fix | Delete

<span

[56] Fix | Delete

className="sui-notice-icon sui-icon-info sui-md"

[57] Fix | Delete

aria-hidden="true"

[58] Fix | Delete

></span>

[59] Fix | Delete

<p>

[60] Fix | Delete

{__(

[61] Fix | Delete

'We noticed the Amazon S3 Integration is enabled. Offloaded images will not be served in WebP format, but Smush will create local WebP copies of all images. If this is undesirable, you can quit the setup.',

[62] Fix | Delete

'wp-smushit'

[63] Fix | Delete

)}

[64] Fix | Delete

</p>

[65] Fix | Delete

</div>

[66] Fix | Delete

</div>

[67] Fix | Delete

</div>

[68] Fix | Delete

);

[69] Fix | Delete

}

[70] Fix | Delete

[71] Fix | Delete

if (2 === currentStep) {

[72] Fix | Delete

const switchDirectConversionMethod = ( e ) => {

[73] Fix | Delete

e.preventDefault();

[74] Fix | Delete

WP_Smush.WebP.switchMethod( 'direct_conversion' );

[75] Fix | Delete

};

[76] Fix | Delete

[77] Fix | Delete

const suggestionMessage = sprintf(

[78] Fix | Delete

/* translators: 1: Opening <button> tag, 2: Closing button, 3: Opening support link, 4: Closing the link */

[79] Fix | Delete

__( 'Please try the %1$sDirect Conversion%2$s method if you don’t have server access, or %3$scontact support%4$s for further assistance.', 'wp-smushit' ),

[80] Fix | Delete

'<button type="submit" style="text-decoration: none; color: #17A8E3; font-weight: 500; outline-color: transparent; outline-style: none; box-shadow: none;padding:0;margin:0;background:transparent;border:none;cursor:pointer;">',

[81] Fix | Delete

'</button>',

[82] Fix | Delete

'<a href="https://wpmudev.com/hub2/support/#get-support" target="_blank">',

[83] Fix | Delete

'</a>'

[84] Fix | Delete

);

[85] Fix | Delete

return (

[86] Fix | Delete

<div

[87] Fix | Delete

role="alert"

[88] Fix | Delete

className="sui-notice sui-notice-warning"

[89] Fix | Delete

aria-live="assertive"

[90] Fix | Delete

style={rulesError ? { display: 'block' } : {}}

[91] Fix | Delete

[92] Fix | Delete

{rulesError && (

[93] Fix | Delete

[94] Fix | Delete

[95] Fix | Delete

<span

[96] Fix | Delete

className="sui-notice-icon sui-icon-info sui-md"

[97] Fix | Delete

aria-hidden="true"

[98] Fix | Delete

></span>

[99] Fix | Delete

[100] Fix | Delete

dangerouslySetInnerHTML={{

[101] Fix | Delete

__html: rulesError,

[102] Fix | Delete

}}

[103] Fix | Delete

[104] Fix | Delete

[105] Fix | Delete

</div>

[106] Fix | Delete

</div>

[107] Fix | Delete

)}

[108] Fix | Delete

</div>

[109] Fix | Delete

);

[110] Fix | Delete

}

[111] Fix | Delete

[112] Fix | Delete

if (smushData.isWpmudevHost) {

[113] Fix | Delete

const message = !smushData.isWhitelabel

[114] Fix | Delete

? __(

[115] Fix | Delete

'Since your site is hosted with WPMU DEV, we already have done the configurations steps for you. The only step for you would be to create WebP images below.',

[116] Fix | Delete

'wp-smushit'

[117] Fix | Delete

)

[118] Fix | Delete

: __(

[119] Fix | Delete

'WebP conversion is active and working well. Your hosting has automatically pre-configured the conversion for you. The only step for you would be to create WebP images below.',

[120] Fix | Delete

'wp-smushit'

[121] Fix | Delete

);

[122] Fix | Delete

[123] Fix | Delete

return (

[124] Fix | Delete

[125] Fix | Delete

[126] Fix | Delete

[127] Fix | Delete

<span

[128] Fix | Delete

className="sui-notice-icon sui-icon-info sui-md"

[129] Fix | Delete

aria-hidden="true"

[130] Fix | Delete

></span>

[131] Fix | Delete

<p>{message}</p>

[132] Fix | Delete

</div>

[133] Fix | Delete

</div>

[134] Fix | Delete

</div>

[135] Fix | Delete

);

[136] Fix | Delete

}

[137] Fix | Delete

};

[138] Fix | Delete

[139] Fix | Delete

const getStepContent = () => {

[140] Fix | Delete

if (1 === currentStep) {

[141] Fix | Delete

return (

[142] Fix | Delete

<React.Fragment>

[143] Fix | Delete

[144] Fix | Delete

<ul>

[145] Fix | Delete

<li>

[146] Fix | Delete

<label

[147] Fix | Delete

htmlFor="smush-wizard-server-type-apache"

[148] Fix | Delete

className="sui-box-selector"

[149] Fix | Delete

[150] Fix | Delete

<input

[151] Fix | Delete

id="smush-wizard-server-type-apache"

[152] Fix | Delete

type="radio"

[153] Fix | Delete

value="apache"

[154] Fix | Delete

checked={'apache' === serverType}

[155] Fix | Delete

onChange={(e) =>

[156] Fix | Delete

setServerType(e.currentTarget.value)

[157] Fix | Delete

}

[158] Fix | Delete

[159] Fix | Delete

<span>{__('Apache', 'wp-smushit')}</span>

[160] Fix | Delete

</label>

[161] Fix | Delete

</li>

[162] Fix | Delete

[163] Fix | Delete

<li>

[164] Fix | Delete

<label

[165] Fix | Delete

htmlFor="smush-wizard-server-type-nginx"

[166] Fix | Delete

className="sui-box-selector"

[167] Fix | Delete

[168] Fix | Delete

<input

[169] Fix | Delete

id="smush-wizard-server-type-nginx"

[170] Fix | Delete

type="radio"

[171] Fix | Delete

value="nginx"

[172] Fix | Delete

checked={'nginx' === serverType}

[173] Fix | Delete

onChange={(e) =>

[174] Fix | Delete

setServerType(e.currentTarget.value)

[175] Fix | Delete

}

[176] Fix | Delete

[177] Fix | Delete

<span>{__('NGINX', 'wp-smushit')}</span>

[178] Fix | Delete

</label>

[179] Fix | Delete

</li>

[180] Fix | Delete

</ul>

[181] Fix | Delete

</div>

[182] Fix | Delete

[183] Fix | Delete

[184] Fix | Delete

[185] Fix | Delete

[186] Fix | Delete

<span

[187] Fix | Delete

className="sui-notice-icon sui-icon-info sui-md"

[188] Fix | Delete

aria-hidden="true"

[189] Fix | Delete

></span>

[190] Fix | Delete

<p>

[191] Fix | Delete

{sprintf(

[192] Fix | Delete

/* translators: server type */

[193] Fix | Delete

__(

[194] Fix | Delete

"We've automatically detected your server type is %s. If this is incorrect, manually select your server type to generate the relevant rules and instructions.",

[195] Fix | Delete

'wp-smushit'

[196] Fix | Delete

[197] Fix | Delete

'nginx' === smushData.detectedServer

[198] Fix | Delete

? 'NGINX'

[199] Fix | Delete

: 'Apache / LiteSpeed'

[200] Fix | Delete

)}

[201] Fix | Delete

</p>

[202] Fix | Delete

</div>

[203] Fix | Delete

</div>

[204] Fix | Delete

</div>

[205] Fix | Delete

</React.Fragment>

[206] Fix | Delete

);

[207] Fix | Delete

}

[208] Fix | Delete

[209] Fix | Delete

if (2 === currentStep) {

[210] Fix | Delete

if ('nginx' === serverType) {

[211] Fix | Delete

return (

[212] Fix | Delete

[213] Fix | Delete

[214] Fix | Delete

<li>

[215] Fix | Delete

{__(

[216] Fix | Delete

'Insert the following in the server context of your configuration file (usually found in /etc/nginx/sites-available). “The server context” refers to the part of the configuration that starts with “server {” and ends with the matching “}”.',

[217] Fix | Delete

'wp-smushit'

[218] Fix | Delete

)}

[219] Fix | Delete

</li>

[220] Fix | Delete

<li>

[221] Fix | Delete

{__(

[222] Fix | Delete

'Copy the generated code found below and paste it inside your http or server blocks.',

[223] Fix | Delete

'wp-smushit'

[224] Fix | Delete

)}

[225] Fix | Delete

</li>

[226] Fix | Delete

</ol>

[227] Fix | Delete

[228] Fix | Delete

<pre

[229] Fix | Delete

className="sui-code-snippet"

[230] Fix | Delete

style={{ marginLeft: '12px' }}

[231] Fix | Delete

[232] Fix | Delete

{smushData.nginxRules}

[233] Fix | Delete

</pre>

[234] Fix | Delete

[235] Fix | Delete

<li>{__('Reload NGINX.', 'wp-smushit')}</li>

[236] Fix | Delete

</ol>

[237] Fix | Delete

[238] Fix | Delete

[239] Fix | Delete

{__('Still having trouble?', 'wp_smushit')}{' '}

[240] Fix | Delete

[241] Fix | Delete

href={smushData.urls.support}

[242] Fix | Delete

target="_blank"

[243] Fix | Delete

rel="noreferrer"

[244] Fix | Delete

[245] Fix | Delete

{__('Get Support.', 'wp_smushit')}

[246] Fix | Delete

</a>

[247] Fix | Delete

</p>

[248] Fix | Delete

</div>

[249] Fix | Delete

);

[250] Fix | Delete

}

[251] Fix | Delete

[252] Fix | Delete

// TODO: The non-selected button isn't focusable this way. Why arrows don't workkkkkkk?

[253] Fix | Delete

return (

[254] Fix | Delete

[255] Fix | Delete

[256] Fix | Delete

<button

[257] Fix | Delete

type="button"

[258] Fix | Delete

role="tab"

[259] Fix | Delete

id="smush-tab-automatic"

[260] Fix | Delete

className={

[261] Fix | Delete

'sui-tab-item' +

[262] Fix | Delete

('automatic' === rulesMethod ? ' active' : '')

[263] Fix | Delete

}

[264] Fix | Delete

aria-controls="smush-tab-content-automatic"

[265] Fix | Delete

aria-selected={'automatic' === rulesMethod}

[266] Fix | Delete

onClick={() => setRulesMethod('automatic')}

[267] Fix | Delete

tabIndex={'automatic' === rulesMethod ? '0' : '-1'}

[268] Fix | Delete

[269] Fix | Delete

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

[270] Fix | Delete

</button>

[271] Fix | Delete

[272] Fix | Delete

<button

[273] Fix | Delete

type="button"

[274] Fix | Delete

role="tab"

[275] Fix | Delete

id="smush-tab-manual"

[276] Fix | Delete

className={

[277] Fix | Delete

'sui-tab-item' +

[278] Fix | Delete

('manual' === rulesMethod ? ' active' : '')

[279] Fix | Delete

}

[280] Fix | Delete

aria-controls="smush-tab-content-manual"

[281] Fix | Delete

aria-selected={'manual' === rulesMethod}

[282] Fix | Delete

onClick={() => setRulesMethod('manual')}

[283] Fix | Delete

tabIndex={'manual' === rulesMethod ? '0' : '-1'}

[284] Fix | Delete

[285] Fix | Delete

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

[286] Fix | Delete

</button>

[287] Fix | Delete

</div>

[288] Fix | Delete

[289] Fix | Delete

[290] Fix | Delete

<div

[291] Fix | Delete

role="tabpanel"

[292] Fix | Delete

tabIndex="0"

[293] Fix | Delete

id="smush-tab-content-automatic"

[294] Fix | Delete

className={

[295] Fix | Delete

'sui-tab-content' +

[296] Fix | Delete

('automatic' === rulesMethod ? ' active' : '')

[297] Fix | Delete

}

[298] Fix | Delete

aria-labelledby="smush-tab-automatic"

[299] Fix | Delete

hidden={'automatic' !== rulesMethod}

[300] Fix | Delete

[301] Fix | Delete

[302] Fix | Delete

className="sui-description"

[303] Fix | Delete

style={{ marginTop: '30px' }}

[304] Fix | Delete

[305] Fix | Delete

{__(

[306] Fix | Delete

'Please note: Some servers have both Apache and NGINX software which may not begin serving WebP images after applying the .htaccess rules. If errors occur after applying the rules, we recommend adding NGINX rules manually.',

[307] Fix | Delete

'wp-smushit'

[308] Fix | Delete

)}

[309] Fix | Delete

</p>

[310] Fix | Delete

</div>

[311] Fix | Delete

[312] Fix | Delete

<div

[313] Fix | Delete

role="tabpanel"

[314] Fix | Delete

tabIndex="0"

[315] Fix | Delete

id="smush-tab-content-manual"

[316] Fix | Delete

className={

[317] Fix | Delete

'sui-tab-content' +

[318] Fix | Delete

('manual' === rulesMethod ? ' active' : '')

[319] Fix | Delete

}

[320] Fix | Delete

aria-labelledby="smush-tab-manual"

[321] Fix | Delete

hidden={'manual' !== rulesMethod}

[322] Fix | Delete

[323] Fix | Delete

[324] Fix | Delete

{__(

[325] Fix | Delete

'If you are unable to get the automated method working, follow these steps:',

[326] Fix | Delete

'wp-smushit'

[327] Fix | Delete

)}

[328] Fix | Delete

</p>

[329] Fix | Delete

[330] Fix | Delete

[331] Fix | Delete

[332] Fix | Delete

<li>

[333] Fix | Delete

{__(

[334] Fix | Delete

'Copy the generated code below and paste it at the top of your .htaccess file (before any existing code) in the root directory.',

[335] Fix | Delete

'wp-smushit'

[336] Fix | Delete

)}

[337] Fix | Delete

</li>

[338] Fix | Delete

</ol>

[339] Fix | Delete

[340] Fix | Delete

<pre

[341] Fix | Delete

className="sui-code-snippet"

[342] Fix | Delete

style={{ marginLeft: '12px' }}

[343] Fix | Delete

[344] Fix | Delete

{smushData.apacheRules}

[345] Fix | Delete

</pre>

[346] Fix | Delete

[347] Fix | Delete

<li>

[348] Fix | Delete

{__(

[349] Fix | Delete

"Next, click Check Status button below to see if it's working.",

[350] Fix | Delete

'wp-smushit'

[351] Fix | Delete

)}

[352] Fix | Delete

</li>

[353] Fix | Delete

</ol>

[354] Fix | Delete

[355] Fix | Delete

<h5

[356] Fix | Delete

className="sui-settings-label"

[357] Fix | Delete

style={{

[358] Fix | Delete

marginTop: '30px',

[359] Fix | Delete

fontSize: '13px',

[360] Fix | Delete

color: '#333333',

[361] Fix | Delete

}}

[362] Fix | Delete

[363] Fix | Delete

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

[364] Fix | Delete

</h5>

[365] Fix | Delete

[366] Fix | Delete

[367] Fix | Delete

{__(

[368] Fix | Delete

'If .htaccess does not work, and you have access to vhosts.conf or httpd.conf, try this:',

[369] Fix | Delete

'wp-smushit'

[370] Fix | Delete

)}

[371] Fix | Delete

</p>

[372] Fix | Delete

[373] Fix | Delete

[374] Fix | Delete

<li>

[375] Fix | Delete

{__(

[376] Fix | Delete

'Look for your site in the file and find the line that starts with <Directory> - add the code above that line and into that section and save the file.',

[377] Fix | Delete

'wp-smushit'

[378] Fix | Delete

)}

[379] Fix | Delete

</li>

[380] Fix | Delete

<li>

[381] Fix | Delete

{__('Reload Apache.', 'wp-smushit')}

[382] Fix | Delete

</li>

[383] Fix | Delete

<li>

[384] Fix | Delete

{__(

[385] Fix | Delete

"If you don't know where those files are, or you aren't able to reload Apache, you would need to consult with your hosting provider or a system administrator who has access to change the configuration of your server.",

[386] Fix | Delete

'wp-smushit'

[387] Fix | Delete

)}

[388] Fix | Delete

</li>

[389] Fix | Delete

</ol>

[390] Fix | Delete

[391] Fix | Delete

[392] Fix | Delete

{__('Still having trouble?', 'wp_smushit')}{' '}

[393] Fix | Delete

[394] Fix | Delete

href={smushData.urls.support}

[395] Fix | Delete

target="_blank"

[396] Fix | Delete

rel="noreferrer"

[397] Fix | Delete

[398] Fix | Delete

{__('Get Support.', 'wp_smushit')}

[399] Fix | Delete

</a>

[400] Fix | Delete

</p>

[401] Fix | Delete

</div>

[402] Fix | Delete

</div>

[403] Fix | Delete

</div>

[404] Fix | Delete

</div>

[405] Fix | Delete

);

[406] Fix | Delete

}

[407] Fix | Delete

[408] Fix | Delete

const hideWizard = (e) => {

[409] Fix | Delete

e.preventDefault();

[410] Fix | Delete

makeRequest('smush_toggle_webp_wizard').then(() => {

[411] Fix | Delete

location.href = smushData.urls.bulkPage;

[412] Fix | Delete

});

[413] Fix | Delete

};

[414] Fix | Delete

[415] Fix | Delete

return (

[416] Fix | Delete

<React.Fragment>

[417] Fix | Delete

<p style={{ marginBottom: 0 }}><b>{__('Convert Images to WebP', 'wp-smushit')}</b></p>

[418] Fix | Delete

[419] Fix | Delete

{!smushData.isMultisite && (

[420] Fix | Delete

<p>

[421] Fix | Delete

[422] Fix | Delete

{__('Convert now', 'wp-smushit')}

[423] Fix | Delete

</a>

[424] Fix | Delete

</p>

[425] Fix | Delete

)}

[426] Fix | Delete

</React.Fragment>

[427] Fix | Delete

);

[428] Fix | Delete

};

[429] Fix | Delete

[430] Fix | Delete

const stepIndicatorText = sprintf(

[431] Fix | Delete

/* translators: currentStep/totalSteps indicator */

[432] Fix | Delete

__('Step %s', 'wp-smushit'),

[433] Fix | Delete

currentStep + '/3'

[434] Fix | Delete

);

[435] Fix | Delete

[436] Fix | Delete

return (

[437] Fix | Delete

<div

[438] Fix | Delete

className={`smush-wizard-steps-content-wrapper smush-wizard-step-${currentStep}`}

[439] Fix | Delete

[440] Fix | Delete

{getTopNotice()}

[441] Fix | Delete

[442] Fix | Delete

[443] Fix | Delete

{stepIndicatorText}

[444] Fix | Delete

</span>

[445] Fix | Delete

<h2>{stepsHeading[currentStep].title}</h2>

[446] Fix | Delete

[447] Fix | Delete

{stepsHeading[currentStep].description}

[448] Fix | Delete

</p>

[449] Fix | Delete

{getStepContent()}

[450] Fix | Delete

</div>

[451] Fix | Delete

</div>

[452] Fix | Delete

);

[453] Fix | Delete

};

[454] Fix | Delete

[455] Fix | Delete