/**

[0] Fix | Delete

* External dependencies

[1] Fix | Delete

*/

[2] Fix | Delete

import React from 'react';

[3] Fix | Delete

import tracker from '../../../js/utils/tracker';

[4] Fix | Delete

[5] Fix | Delete

/**

[6] Fix | Delete

* WordPress dependencies

[7] Fix | Delete

*/

[8] Fix | Delete

const {__} = wp.i18n;

[9] Fix | Delete

[10] Fix | Delete

export default ({smushData}) => {

[11] Fix | Delete

[12] Fix | Delete

return (

[13] Fix | Delete

<React.Fragment>

[14] Fix | Delete

<div className="sui-box-header">

[15] Fix | Delete

<h3 className="sui-box-title">

[16] Fix | Delete

{__('Local WebP', 'wp-smushit')}

[17] Fix | Delete

</h3>

[18] Fix | Delete

</div>

[19] Fix | Delete

<div className="sui-box-body">

[20] Fix | Delete

<div className="sui-message">

[21] Fix | Delete

<img

[22] Fix | Delete

className="sui-image"

[23] Fix | Delete

src={smushData.urls.freeImg}

[24] Fix | Delete

srcSet={smushData.urls.freeImg2x + ' 2x'}

[25] Fix | Delete

alt={__('Smush WebP', 'wp-smushit')}

[26] Fix | Delete

/>

[27] Fix | Delete

[28] Fix | Delete

<div className="sui-message-content">

[29] Fix | Delete

<p>

[30] Fix | Delete

{__(

[31] Fix | Delete

'Fix the "Serve images in next-gen format" Google PageSpeed recommendation with a single click! Serve WebP images directly from your server to supported browsers, while seamlessly switching to original images for those without WebP support. All without relying on a CDN or any server configuration.',

[32] Fix | Delete

'wp-smushit'

[33] Fix | Delete

)}

[34] Fix | Delete

</p>

[35] Fix | Delete

[36] Fix | Delete

<ol className="sui-upsell-list">

[37] Fix | Delete

<li>

[38] Fix | Delete

<span

[39] Fix | Delete

className="sui-icon-check sui-sm"

[40] Fix | Delete

aria-hidden="true"

[41] Fix | Delete

/>

[42] Fix | Delete

{__(

[43] Fix | Delete

'Activate the Local WebP feature with a single click; no server configuration required.',

[44] Fix | Delete

'wp-smushit'

[45] Fix | Delete

)}

[46] Fix | Delete

</li>

[47] Fix | Delete

<li>

[48] Fix | Delete

<span

[49] Fix | Delete

className="sui-icon-check sui-sm"

[50] Fix | Delete

aria-hidden="true"

[51] Fix | Delete

/>

[52] Fix | Delete

{__(

[53] Fix | Delete

'Fix “Serve images in next-gen format" Google PageSpeed recommendation.',

[54] Fix | Delete

'wp-smushit'

[55] Fix | Delete

)}

[56] Fix | Delete

</li>

[57] Fix | Delete

<li>

[58] Fix | Delete

<span

[59] Fix | Delete

className="sui-icon-check sui-sm"

[60] Fix | Delete

aria-hidden="true"

[61] Fix | Delete

/>

[62] Fix | Delete

{__(

[63] Fix | Delete

'Serve WebP version of images in the browsers that support it and fall back to JPEGs and PNGs for unsupported browsers.',

[64] Fix | Delete

'wp-smushit'

[65] Fix | Delete

)}

[66] Fix | Delete

</li>

[67] Fix | Delete

</ol>

[68] Fix | Delete

[69] Fix | Delete

<p className="sui-margin-top">

[70] Fix | Delete

<a

[71] Fix | Delete

href={smushData.urls.upsell}

[72] Fix | Delete

className="sui-button sui-button-purple"

[73] Fix | Delete

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

[74] Fix | Delete

target="_blank"

[75] Fix | Delete

rel="noreferrer"

[76] Fix | Delete

onClick={ () => {

[77] Fix | Delete

tracker.track( 'local_webp_upsell', {

[78] Fix | Delete

Location: 'local_webp_page',

[79] Fix | Delete

} );

[80] Fix | Delete

} }

[81] Fix | Delete

>

[82] Fix | Delete

{__('UNLOCK WEBP WITH PRO', 'wp-smushit')}

[83] Fix | Delete

</a>

[84] Fix | Delete

</p>

[85] Fix | Delete

</div>

[86] Fix | Delete

</div>

[87] Fix | Delete

</div>

[88] Fix | Delete

</React.Fragment>

[89] Fix | Delete

);

[90] Fix | Delete

};

[91] Fix | Delete

[92] Fix | Delete