Skip to content

Commit 46fd9ea

Browse files
girishpanchal30girishpanchal30
committed
fix: reviewer feedback
1 parent 8950a11 commit 46fd9ea

File tree

3 files changed

+88
-57
lines changed

3 files changed

+88
-57
lines changed

‎assets/src/dashboard/parts/connected/OptimizationStatus.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/**
2+
* WordPress dependencies.
3+
*/
4+
import { Icon } from '@wordpress/components';
5+
import { closeSmall, check } from '@wordpress/icons';
6+
7+
import { useSelect } from '@wordpress/data';
8+
9+
const OptimizationStatus = () => {
10+
const {
11+
statuses
12+
} = useSelect( select => {
13+
const { getSiteSettings } = select( 'optimole' );
14+
15+
const siteSettings = getSiteSettings();
16+
17+
const statuses = [
18+
{
19+
active: 'enabled' === siteSettings?.image_replacer,
20+
label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
21+
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
22+
},
23+
{
24+
active: 'enabled' === siteSettings?.lazyload,
25+
label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
26+
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
27+
},
28+
{
29+
active: 'enabled' === siteSettings?.scale,
30+
label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
31+
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
32+
}
33+
];
34+
35+
return {
36+
statuses: statuses
37+
};
38+
});
39+
40+
return (
41+
<div className="bg-white flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
42+
<h3 className="text-base m-0">{ optimoleDashboardApp.strings.optimization_status.title }</h3>
43+
<ul>
44+
{ statuses.map( ( status, index ) => {
45+
let statusClass = status.active ? 'success' : 'danger';
46+
return (
47+
<li
48+
key={ index }
49+
className="flex items-start gap-2"
50+
>
51+
{ status.active ? (
52+
<Icon icon={check} className="fill-success bg-success/20 rounded-full" size={20} />
53+
) : (
54+
<Icon icon={closeSmall} className="fill-danger bg-danger/20 rounded-full" size={20} />
55+
) }
56+
57+
<div>
58+
<span className='text-gray-700 font-normal font-semibold'>
59+
{ status.label }
60+
</span>
61+
<p className="m-0">{ status.description }</p>
62+
</div>
63+
</li>
64+
);
65+
}) }
66+
</ul>
67+
<p
68+
className="m-0 mt-3"
69+
dangerouslySetInnerHTML={ {
70+
__html: optimoleDashboardApp.strings.optimization_tips
71+
} }
72+
/>
73+
</div>
74+
);
75+
};
76+
77+
export default OptimizationStatus;

‎assets/src/dashboard/parts/connected/Sidebar.js

Lines changed: 7 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import { useSelect } from '@wordpress/data';
1313
import { addQueryArgs } from '@wordpress/url';
1414

1515
import SPCRecommendation from './SPCRecommendation';
16+
import OptimizationStatus from './OptimizationStatus';
17+
1618
const reasons = [
1719
optimoleDashboardApp.strings.upgrade.reason_1,
1820
optimoleDashboardApp.strings.upgrade.reason_2,
@@ -24,31 +26,11 @@ const Sidebar = () => {
2426
const {
2527
name,
2628
domain,
27-
plan,
28-
statuses
29+
plan
2930
} = useSelect( select => {
30-
const { getUserData, getSiteSettings } = select( 'optimole' );
31+
const { getUserData } = select( 'optimole' );
3132

3233
const user = getUserData();
33-
const siteSettings = getSiteSettings();
34-
35-
const statuses = [
36-
{
37-
active: 'enabled' === siteSettings?.image_replacer,
38-
label: optimoleDashboardApp.strings.optimization_status.statusTitle1,
39-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle1
40-
},
41-
{
42-
active: 'enabled' === siteSettings?.lazyload,
43-
label: optimoleDashboardApp.strings.optimization_status.statusTitle2,
44-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle2
45-
},
46-
{
47-
active: 'enabled' === siteSettings?.scale,
48-
label: optimoleDashboardApp.strings.optimization_status.statusTitle3,
49-
description: optimoleDashboardApp.strings.optimization_status.statusSubTitle3
50-
}
51-
];
5234

5335
let domain = user?.cdn_key + '.i.optimole.com';
5436
if ( user?.domain !== undefined && '' !== user?.domain ) {
@@ -58,8 +40,7 @@ const Sidebar = () => {
5840
return {
5941
name: user?.display_name,
6042
domain,
61-
plan: user?.plan,
62-
statuses: statuses.filter( status => status.active )
43+
plan: user?.plan
6344
};
6445
});
6546

@@ -147,35 +128,8 @@ const Sidebar = () => {
147128
</Button>
148129
) }
149130

150-
{ 0 < statuses.length && (
151-
<div className="bg-white flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
152-
<h3 className="text-base m-0">{ optimoleDashboardApp.strings.optimization_status.title }</h3>
153-
<ul>
154-
{ statuses.map( ( status, index ) => (
155-
<li
156-
key={ index }
157-
className="flex items-start gap-2"
158-
>
159-
<Icon icon="yes-alt" className="text-light-black mt-1" />
160-
<div className="text-light-black font-normal text-base">
161-
<div className='font-semibold'>
162-
{ status.label }
163-
</div>
164-
<div>
165-
{ status.description }
166-
</div>
167-
</div>
168-
</li>
169-
) ) }
170-
</ul>
171-
<p
172-
className="m-0 -mt-3"
173-
dangerouslySetInnerHTML={ {
174-
__html: optimoleDashboardApp.strings.optimization_tips
175-
} }
176-
/>
177-
</div>
178-
) }
131+
<OptimizationStatus />
132+
179133
{ showSPCRecommendation && (
180134
<SPCRecommendation />
181135
) }

‎inc/admin.php

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2075,17 +2075,17 @@ private function get_dashboard_strings() {
20752075
'cancel' => __( 'Cancel', 'optimole-wp' ),
20762076
'optimization_status' => [
20772077
'title' => __( 'Optimization Status', 'optimole-wp' ),
2078-
'statusTitle1' => __( 'Image Handling Active', 'optimole-wp' ),
2078+
'statusTitle1' => __( 'Image Handling', 'optimole-wp' ),
20792079
'statusSubTitle1' => __( 'All images are optimized automatically', 'optimole-wp' ),
2080-
'statusTitle2' => __( 'Smart Lazy-Loading Enabled', 'optimole-wp' ),
2080+
'statusTitle2' => __( 'Smart Lazy-Loading', 'optimole-wp' ),
20812081
'statusSubTitle2' => __( 'Images load as visitors scroll', 'optimole-wp' ),
2082-
'statusTitle3' => __( 'Image Scalling Active', 'optimole-wp' ),
2082+
'statusTitle3' => __( 'Image Scalling', 'optimole-wp' ),
20832083
'statusSubTitle3' => __( 'All images are perfectly sized for devices', 'optimole-wp' ),
20842084
],
20852085
'optimization_tips' => sprintf(
20862086
/* translators: 1 is the opening anchor tag, 2 is the closing anchor tag */
20872087
__( '%1$sView all optimization tips%2$s', 'optimole-wp' ),
2088-
'<a style="white-space:nowrap; text-decoration: underline !important;" href="https://docs.optimole.com/article/2238-optimization-tips" target="_blank"> ',
2088+
'<a class="flex justify-center font-bold rounded hover:opacity-90 transition-opacity" href="https://docs.optimole.com/article/2238-optimization-tips" target="_blank"> ',
20892089
'<span style="text-decoration:none; font-size:15px; margin-top:2px;" class="dashicons dashicons-external"></span></a>'
20902090
),
20912091
];

0 commit comments

Comments
 (0)