Skip to content

Commit f5f5a63

Browse files
Soare-Robert-DanielSoare-Robert-Daniel
committed
chore: trigger survey
1 parent afb587a commit f5f5a63

File tree

5 files changed

+87
-42
lines changed

5 files changed

+87
-42
lines changed

‎assets/src/dashboard/parts/connected/settings/General.js‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -77,21 +77,6 @@ const General = ({
7777

7878
<hr className="my-8 border-grayish-blue"/>
7979

80-
<ToggleControl
81-
label={ optimoleDashboardApp.strings.options_strings.toggle_lazyload }
82-
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.lazyload_desc } } /> }
83-
checked={ isLazyloadEnabled }
84-
disabled={ ! isReplacerEnabled || isLoading }
85-
className={ classnames(
86-
{
87-
'is-disabled': ! isReplacerEnabled || isLoading
88-
}
89-
) }
90-
onChange={ value => updateOption( 'lazyload', value ) }
91-
/>
92-
93-
<hr className="my-8 border-grayish-blue"/>
94-
9580
{ isUserActive && <>
9681
<ToggleControl
9782
label={ optimoleDashboardApp.strings.options_strings.enable_badge_title }

‎assets/src/dashboard/parts/connected/settings/Lazyload.js‎

Lines changed: 75 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@ import {
3333
GroupSettingsOption
3434
} from '../../components/GroupSettingsContainer';
3535
import Notice from '../../components/Notice';
36+
import Modal from '../../components/Modal';
37+
38+
const DISABLE_OPTION_MODAL_TYPE = {
39+
scale: 'image-scaling',
40+
lazyLoad: 'lazy-load',
41+
javascriptLoading: 'javascript-loading'
42+
};
3643

3744
const Lazyload = ({ settings, setSettings, setCanSave }) => {
3845
const { isLoading } = useSelect( ( select ) => {
@@ -43,19 +50,19 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
4350
};
4451
});
4552

46-
const isLazyloadPlaceholderEnabled = useMemo(
53+
const isLazyLoadPlaceholderEnabled = useMemo(
4754
() => 'disabled' !== settings['lazyload_placeholder'],
4855
[ settings ]
4956
);
50-
const isNativeLazyloadEnabled = useMemo(
57+
const isNativeLazyLoadEnabled = useMemo(
5158
() => 'disabled' !== settings['native_lazyload'],
5259
[ settings ]
5360
);
5461
const isBGReplacerEnabled = useMemo(
5562
() => 'disabled' !== settings['bg_replacer'],
5663
[ settings ]
5764
);
58-
const isVideoLazyloadEnabled = useMemo(
65+
const isVideoLazyLoadEnabled = useMemo(
5966
() => 'disabled' !== settings['video_lazyload'],
6067
[ settings ]
6168
);
@@ -71,7 +78,7 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
7178
() => 'disabled' === settings.scale,
7279
[ settings.scale ]
7380
);
74-
const isLazyloadEnabled = useMemo(
81+
const isLazyLoadEnabled = useMemo(
7582
() => 'disabled' !== settings.lazyload,
7683
[ settings.lazyload ]
7784
);
@@ -85,6 +92,7 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
8592
);
8693

8794
const [ phPicker, setPhPicker ] = useState( false );
95+
const [ showModal, setShowModal ] = useState( false );
8896

8997
const toggleOption = useCallback(
9098
( option, value ) => {
@@ -126,7 +134,6 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
126134
} else {
127135
setting.delete( slug );
128136
}
129-
console.log( setting );
130137
updateValue( 'lazyload_type', Array.from( setting ).toSorted().join( '|' ) );
131138
},
132139
[ settings?.lazyload_type ]
@@ -176,13 +183,13 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
176183
[ Tag ]
177184
);
178185

179-
if ( ! isLazyloadEnabled ) {
186+
if ( ! isLazyLoadEnabled ) {
180187
return (
181188
<>
182189
<ToggleControl
183190
label={optimoleDashboardApp.strings.options_strings.toggle_lazyload}
184191
help={optimoleDashboardApp.strings.options_strings.lazyload_desc}
185-
checked={isLazyloadEnabled}
192+
checked={isLazyLoadEnabled}
186193
disabled={isLoading}
187194
className={classnames({
188195
'is-disabled': isLoading
@@ -198,13 +205,46 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
198205
<ToggleControl
199206
label={optimoleDashboardApp.strings.options_strings.toggle_lazyload}
200207
help={optimoleDashboardApp.strings.options_strings.lazyload_desc}
201-
checked={isLazyloadEnabled}
208+
checked={isLazyLoadEnabled}
202209
disabled={isLoading}
203210
className={classnames({
204211
'is-disabled': isLoading
205212
})}
206-
onChange={( value ) => toggleOption( 'lazyload', value )}
213+
onChange={() => setShowModal( DISABLE_OPTION_MODAL_TYPE.lazyLoad )}
207214
/>
215+
{
216+
showModal && (
217+
<Modal
218+
icon="warning"
219+
variant="warning"
220+
labels={{
221+
title: optimoleDashboardApp.strings.options_strings.performance_impact_alert_title,
222+
description: 'scale' === showModal ? optimoleDashboardApp.strings.options_strings.performance_impact_alert_scale_desc : optimoleDashboardApp.strings.options_strings.performance_impact_alert_lazy_desc,
223+
action: optimoleDashboardApp.strings.options_strings.performance_impact_alert_action_label,
224+
secondaryAction: optimoleDashboardApp.strings.options_strings.performance_impact_alert_secondary_action_label
225+
}}
226+
onRequestClose={ () => setShowModal( false ) }
227+
onConfirm={ () => {
228+
window?.formbricks?.track( 'disable_lazy_load_feature', {
229+
hiddenFields: {
230+
feature: `${ showModal }`
231+
}
232+
});
233+
234+
if ( DISABLE_OPTION_MODAL_TYPE.javascriptLoading === showModal ) {
235+
toggleOption( 'native_lazyload', true );
236+
} else if ( DISABLE_OPTION_MODAL_TYPE.scale === showModal ) {
237+
toggleOption( 'scale', false );
238+
} else if ( DISABLE_OPTION_MODAL_TYPE.lazyLoad === showModal ) {
239+
toggleOption( 'lazyload', false );
240+
}
241+
242+
setShowModal( false );
243+
} }
244+
onSecondaryAction={ () => setShowModal( false ) }
245+
/>
246+
)
247+
}
208248
<hr className="my-8 border-grayish-blue" />
209249
<BaseControl
210250
className="mt-2"
@@ -271,10 +311,14 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
271311
value: 'enabled'
272312
}
273313
]}
274-
value={isNativeLazyloadEnabled ? 'enabled' : 'disabled'}
275-
onChange={( value ) =>
276-
toggleOption( 'native_lazyload', 'enabled' === value )
277-
}
314+
value={isNativeLazyLoadEnabled ? 'enabled' : 'disabled'}
315+
onChange={( value ) => {
316+
if ( 'disabled' === value ) {
317+
toggleOption( 'native_lazyload', false );
318+
} else {
319+
setShowModal( DISABLE_OPTION_MODAL_TYPE.javascriptLoading );
320+
}
321+
}}
278322
/>
279323

280324
<GroupSettingsContainer>
@@ -334,7 +378,7 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
334378
title={''}
335379
text={
336380
optimoleDashboardApp.strings.options_strings
337-
.vieport_skip_images_notice
381+
.viewport_skip_images_notice
338382
}
339383
/>
340384
)}
@@ -351,7 +395,7 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
351395
optimoleDashboardApp.strings.options_strings
352396
.enable_lazyload_placeholder_title
353397
}
354-
checked={isLazyloadPlaceholderEnabled}
398+
checked={isLazyLoadPlaceholderEnabled}
355399
onChange={( value ) =>
356400
toggleOption( 'lazyload_placeholder', value )
357401
}
@@ -360,7 +404,7 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
360404
/>
361405
</div>
362406

363-
{isLazyloadPlaceholderEnabled && (
407+
{isLazyLoadPlaceholderEnabled && (
364408
<div className="relative inline-block">
365409
<Button
366410
disabled={isLoading}
@@ -421,6 +465,19 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
421465
</div>
422466
</BaseControl>
423467

468+
{
469+
isNativeLazyLoadEnabled && (
470+
<Notice
471+
type="warning"
472+
title={''}
473+
text={
474+
optimoleDashboardApp.strings.options_strings
475+
.native_lazy_load_warning
476+
}
477+
/>
478+
)
479+
}
480+
424481
<hr className="my-8 border-grayish-blue" />
425482

426483
<ToggleControl
@@ -431,7 +488,7 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
431488
className={classnames({
432489
'is-disabled': isLoading
433490
})}
434-
onChange={( value ) => toggleOption( 'scale', ! value )}
491+
onChange={() => setShowModal( DISABLE_OPTION_MODAL_TYPE.scale ) }
435492
/>
436493

437494
<GroupSettingsContainer>
@@ -494,7 +551,7 @@ const Lazyload = ({ settings, setSettings, setCanSave }) => {
494551
}}
495552
/>
496553
)}
497-
checked={isVideoLazyloadEnabled}
554+
checked={isVideoLazyLoadEnabled}
498555
disabled={isLoading}
499556
className={classnames( 'mt-8', {
500557
'is-disabled': isLoading

‎assets/src/dashboard/parts/connected/settings/Menu.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,16 +59,12 @@ const menuItems = [
5959
const SubMenu = ({
6060
children,
6161
tab,
62-
settings,
6362
setTab
6463
}) => {
6564
return (
6665
<ul className="flex flex-col gap-1 m-0 mt-1">
6766
{children.map( item => {
6867
const { value, label } = item;
69-
if ( 'lazyload' === item.value && 'disabled' === settings.lazyload ) {
70-
return;
71-
}
7268
const classes = classnames(
7369
{
7470
'bg-light-blue hover:text-purple-gray': tab === value,

‎assets/src/global.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ export interface Strings {
127127
cancel: string
128128
optimization_status: OptimizationStatus
129129
optimization_tips: string
130+
native_lazy_load_warning: string
130131
}
131132

132133
export interface Conflicts {
@@ -398,9 +399,8 @@ export interface OptionsStrings {
398399
visual_settings: string
399400
extended_features: string
400401
global_option: string
401-
enable_lazy_loading_title: string
402402
not_recommended: string
403-
vieport_skip_images_notice: string
403+
viewport_skip_images_notice: string
404404
}
405405

406406
export interface Help {

‎inc/admin.php‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1973,7 +1973,7 @@ private function get_dashboard_strings() {
19731973
'cloud_site_title' => __( 'Show images only from these sites:', 'optimole-wp' ),
19741974
'cloud_site_desc' => __( 'Browse images only from the specified websites. Otherwise, images from all websites will appear in the library.', 'optimole-wp' ),
19751975
'toggle_ab_item' => __( 'Admin bar status', 'optimole-wp' ),
1976-
'toggle_lazyload' => __( 'Enable Lazy Loading', 'optimole-wp' ),
1976+
'toggle_lazyload' => __( 'Enable Lazy Loading & Scaling', 'optimole-wp' ),
19771977
'toggle_scale' => __( 'Smart Image Scaling', 'optimole-wp' ),
19781978
'toggle_native' => __( 'Browser Native Lazy Load', 'optimole-wp' ),
19791979
'on_toggle' => __( 'On', 'optimole-wp' ),
@@ -2073,10 +2073,17 @@ private function get_dashboard_strings() {
20732073
'extended_features' => __( 'Extended Features', 'optimole-wp' ),
20742074
// translators: mark that the options are aplied globally.
20752075
'global_option' => __( 'Global', 'optimole-wp' ),
2076-
'enable_lazy_loading_title' => __( 'Enable Lazy Loading', 'optimole-wp' ),
20772076
// translators: This option is discouraged from being used.
20782077
'not_recommended' => __( 'Not recommended', 'optimole-wp' ),
2079-
'vieport_skip_images_notice' => __( "When viewport-based loading and skip first images are both enabled: the skip rule applies on a user's first page view. On subsequent views, once viewport data exists, the skip rule is ignored in favor of the viewport data.", 'optimole-wp' ),
2078+
// translators: %1$s is the starting bold tag, %2$s is the ending bold tag.
2079+
'viewport_skip_images_notice' => sprintf( __( 'When %1$sviewport-based loading%2$s and %1$sskip first images%2$s are both enabled: the skip rule applies on a user\'s first page view. On subsequent views, once viewport data exists, the skip rule is ignored in favor of the viewport data.', 'optimole-wp' ), '<strong>', '</strong>' ),
2080+
// translators: %1$s is the starting bold tag, %2$s is the ending bold tag.
2081+
'native_lazy_load_warning' => sprintf( __( 'Native browser loading works with viewport detection, but it does not support smart image scaling. It can offer better cross-browser compatibility. Still, we do %1$snot recommend%2$s it for most sites due to fewer controls and features compared to Smart Loading.', 'optimole-wp' ), '<strong>', '</strong>' ),
2082+
'performance_impact_alert_title' => __( 'Performance Impact Alert', 'optimole-wp' ),
2083+
'performance_impact_alert_lazy_desc' => __( 'Disabling Lazy Load may significantly impact your site\'s loading speed and Core Web Vitals scores.', 'optimole-wp' ),
2084+
'performance_impact_alert_scale_desc' => __( 'Disabling Image Scaling may significantly impact your site\'s loading speed and Core Web Vitals scores.', 'optimole-wp' ),
2085+
'performance_impact_alert_action_label' => __( 'Continue with disabling', 'optimole-wp' ),
2086+
'performance_impact_alert_secondary_action_label' => __( 'Keep enabled', 'optimole-wp' ),
20802087
],
20812088
'help' => [
20822089
'section_one_title' => __( 'Help and Support', 'optimole-wp' ),

0 commit comments

Comments
 (0)