Skip to content

Commit 0c33f9d

Browse files
selulselul
authored
Merge pull request #907 from Codeinwp/prf/hide-badge-if-inactive
feat: hide bagde toggle if the user is inactive [ref Codeinwp/optimole-service#1438]
2 parents 5c4a906 + bb476ce commit 0c33f9d

File tree

1 file changed

+80
-76
lines changed
  • assets/src/dashboard/parts/connected/settings

1 file changed

+80
-76
lines changed

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

+80-76
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,12 @@ const General = ({
3131
setSettings,
3232
setCanSave
3333
}) => {
34-
const { isLoading } = useSelect( select => {
35-
const { isLoading } = select( 'optimole' );
34+
const { isLoading, isUserActive } = useSelect( select => {
35+
const { isLoading, getUserStatus } = select( 'optimole' );
3636

3737
return {
38-
isLoading: isLoading()
38+
isLoading: isLoading(),
39+
isUserActive: 'active' === getUserStatus()
3940
};
4041
});
4142

@@ -91,88 +92,91 @@ const General = ({
9192

9293
<hr className="my-8 border-grayish-blue"/>
9394

94-
<ToggleControl
95-
label={ optimoleDashboardApp.strings.options_strings.enable_badge_title }
96-
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.enable_badge_description } } /> }
97-
checked={ isBannerEnabled }
98-
disabled={ isLoading }
99-
className={ classnames(
100-
{
101-
'is-disabled': isLoading
102-
}
103-
) }
104-
onChange={ ( value ) => {
105-
updateOption( 'banner_frontend', value );
106-
setBadgeSettings( value );
107-
} }
108-
/>
95+
{ isUserActive && <>
96+
<ToggleControl
97+
label={ optimoleDashboardApp.strings.options_strings.enable_badge_title }
98+
help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.enable_badge_description } } /> }
99+
checked={ isBannerEnabled }
100+
disabled={ isLoading }
101+
className={ classnames(
102+
{
103+
'is-disabled': isLoading
104+
}
105+
) }
106+
onChange={ ( value ) => {
107+
updateOption( 'banner_frontend', value );
108+
setBadgeSettings( value );
109+
} }
110+
/>
109111

110-
{ isBannerEnabled && (
111-
<div className="mt-4 badge-settings">
112-
<Button
113-
className={ classnames(
114-
'border border-none bg-transparent text-blue-500 px-2 py-1 rounded-sm flex items-center cursor-pointer',
115-
{
116-
'is-disabled': isLoading
117-
}
118-
) }
119-
onClick={ () => setBadgeSettings( ! showBadgeSettings ) }
120-
>
121-
<span>{ optimoleDashboardApp.strings.options_strings.enable_badge_settings }</span>
122-
<Icon
123-
icon={ showBadgeSettings ? chevronUp : chevronDown }
124-
className="h-5 w-5"
125-
style={{ fill: '#3b82f6' }}
126-
/>
127-
</Button>
128-
{ showBadgeSettings && (
129-
<div class="mt-4 space-y-4 pl-4 pt-2">
130-
<div class="flex items-center justify-between mb-4">
131-
<label class="text-gray-600 font-medium">{ optimoleDashboardApp.strings.options_strings.enable_badge_show_icon }</label>
132-
<ToggleControl
133-
label=""
134-
checked={ isShowBadgeIcon }
135-
disabled={ isLoading }
136-
className={ classnames(
137-
'flex items-center justify-between mb-4',
138-
{
139-
'is-disabled': isLoading
140-
}
141-
) }
142-
onChange={ value => updateOption( 'show_badge_icon', value ) }
143-
/>
144-
</div>
145-
<div class="flex items-center justify-between">
146-
<label class="text-gray-600 font-medium">{ optimoleDashboardApp.strings.options_strings.enable_badge_position }</label>
147-
<div class="flex space-x-2">
148-
<Button
149-
className={ classnames(
150-
'px-4 py-2 border rounded border-[1px]',
151-
'left' === activeBadgePosition ? 'border-blue-500 text-blue-500 bg-blue-100' : 'border-gray-300 text-gray-500 bg-gray-100',
152-
{
153-
'is-disabled': isLoading
154-
}
155-
) }
156-
onClick={ () => updateOption( 'badge_position', 'left' ) }
157-
>{ optimoleDashboardApp.strings.options_strings.badge_position_text_1 }</Button>
158-
<Button
112+
{ isBannerEnabled && (
113+
<div className="mt-4 badge-settings">
114+
<Button
115+
className={ classnames(
116+
'border border-none bg-transparent text-blue-500 px-2 py-1 rounded-sm flex items-center cursor-pointer',
117+
{
118+
'is-disabled': isLoading
119+
}
120+
) }
121+
onClick={ () => setBadgeSettings( ! showBadgeSettings ) }
122+
>
123+
<span>{ optimoleDashboardApp.strings.options_strings.enable_badge_settings }</span>
124+
<Icon
125+
icon={ showBadgeSettings ? chevronUp : chevronDown }
126+
className="h-5 w-5"
127+
style={{ fill: '#3b82f6' }}
128+
/>
129+
</Button>
130+
{ showBadgeSettings && (
131+
<div class="mt-4 space-y-4 pl-4 pt-2">
132+
<div class="flex items-center justify-between mb-4">
133+
<label class="text-gray-600 font-medium">{ optimoleDashboardApp.strings.options_strings.enable_badge_show_icon }</label>
134+
<ToggleControl
135+
label=""
136+
checked={ isShowBadgeIcon }
137+
disabled={ isLoading }
159138
className={ classnames(
160-
'px-4 py-2 border rounded',
161-
'right' === activeBadgePosition ? 'border-blue-500 text-blue-500 bg-blue-100' : 'border-gray-300 text-gray-500 bg-gray-100',
139+
'flex items-center justify-between mb-4',
162140
{
163141
'is-disabled': isLoading
164142
}
165143
) }
166-
onClick={ () => updateOption( 'badge_position', 'right' ) }
167-
>{ optimoleDashboardApp.strings.options_strings.badge_position_text_2 }</Button>
144+
onChange={ value => updateOption( 'show_badge_icon', value ) }
145+
/>
146+
</div>
147+
<div class="flex items-center justify-between">
148+
<label class="text-gray-600 font-medium">{ optimoleDashboardApp.strings.options_strings.enable_badge_position }</label>
149+
<div class="flex space-x-2">
150+
<Button
151+
className={ classnames(
152+
'px-4 py-2 border rounded border-[1px]',
153+
'left' === activeBadgePosition ? 'border-blue-500 text-blue-500 bg-blue-100' : 'border-gray-300 text-gray-500 bg-gray-100',
154+
{
155+
'is-disabled': isLoading
156+
}
157+
) }
158+
onClick={ () => updateOption( 'badge_position', 'left' ) }
159+
>{ optimoleDashboardApp.strings.options_strings.badge_position_text_1 }</Button>
160+
<Button
161+
className={ classnames(
162+
'px-4 py-2 border rounded',
163+
'right' === activeBadgePosition ? 'border-blue-500 text-blue-500 bg-blue-100' : 'border-gray-300 text-gray-500 bg-gray-100',
164+
{
165+
'is-disabled': isLoading
166+
}
167+
) }
168+
onClick={ () => updateOption( 'badge_position', 'right' ) }
169+
>{ optimoleDashboardApp.strings.options_strings.badge_position_text_2 }</Button>
170+
</div>
168171
</div>
169172
</div>
170-
</div>
171-
)}
172-
</div>
173-
)}
173+
)}
174+
</div>
175+
)}
174176

175-
<hr className="my-8 border-grayish-blue"/>
177+
<hr className="my-8 border-grayish-blue"/>
178+
179+
</>}
176180

177181
<BaseControl
178182
label={ optimoleDashboardApp.strings.options_strings.cache_title }

0 commit comments

Comments
 (0)