Skip to content

Commit 4dccdeb

Browse files
girishpanchal30girishpanchal30
committed
add popup for filter condition upsell
1 parent 88e8830 commit 4dccdeb

3 files changed

Lines changed: 221 additions & 118 deletions

File tree

‎includes/admin/feedzy-rss-feeds-admin.php‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -484,6 +484,11 @@ function closeModal(e) {
484484
jQuery(document).on('keyup', function (e) {
485485
if (e.key === "Escape") closeModal();
486486
});
487+
488+
jQuery('.fz-conditions').on('click', '.fz-action-btn.is-upsell', function (event) {
489+
openModal('#feedzy-add-filter-condition');
490+
event.preventDefault();
491+
});
487492
});
488493
</script>
489494
<div id="feedzy-add-new-import" class="wp-core-ui feedzy-modal" style="display:none;">
@@ -654,6 +659,51 @@ class="button button-primary button-large"
654659
</div>
655660
</div>
656661
</div>
662+
<div id="feedzy-add-filter-condition" class="wp-core-ui feedzy-modal" style="display:none;">
663+
<div class="modal-content">
664+
<span class="fz-notice close-modal">
665+
<span class="dashicons dashicons-no-alt"></span>
666+
<span class="screen-reader-text">
667+
<?php esc_html_e( 'Dismiss this dialog', 'feedzy-rss-feeds' ); ?>
668+
</span>
669+
</span>
670+
<div class="modal-header">
671+
<h2>
672+
<?php esc_html_e( 'Upgrade to Use Unlimited Conditions', 'feedzy-rss-feeds' ); ?>
673+
</h2>
674+
<p style="color: red;">
675+
<?php esc_html_e( 'Filter Condition limit reached', 'feedzy-rss-feeds' ); ?>
676+
<span>
677+
<?php
678+
// translators: %1$s is the number of imports used, %2$s is the total number of imports allowed.
679+
echo esc_html( '(' . sprintf( __( '%1$s/%2$s used', 'feedzy-rss-feeds' ), '1', '1' ) . ')' );
680+
?>
681+
</span>
682+
</p>
683+
</div>
684+
<div class="modal-body">
685+
<p>
686+
<?php esc_html_e( 'Your current plan supports only one filter condition. Upgrade to unlock unlimited import configurations and make the most of Feedzy\'s powerful features!', 'feedzy-rss-feeds' ); ?>
687+
</p>
688+
</div>
689+
<div class="modal-footer">
690+
<div class="button-container">
691+
<a
692+
href="<?php echo esc_url( tsdk_translate_link( tsdk_utmify( FEEDZY_UPSELL_LINK, 'filterCondition' ) ) ); ?>"
693+
target="_blank" rel="noopener "
694+
class="button button-primary button-large"
695+
>
696+
<?php esc_html_e( 'Upgrade to PRO', 'feedzy-rss-feeds' ); ?>
697+
</a>
698+
</div>
699+
<span>
700+
<?php
701+
esc_html_e( '30-day money-back guarantee. No questions asked.', 'feedzy-rss-feeds' );
702+
?>
703+
</span>
704+
</div>
705+
</div>
706+
</div>
657707
<style>
658708

659709
.feedzy-import-limit, .page-title-action.only-pro{

‎includes/views/import-metabox-edit.php‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,6 @@ class="dashicons dashicons-arrow-down-alt2"></span>
119119

120120
<input type="hidden" name="feedzy_meta_data[filter_conditions]" id="feed-post-filters-conditions" value="<?php echo esc_attr( $filter_conditions ); ?>">
121121
<div class="fz-conditions" id="fz-conditions"></div>
122-
<?php if ( ! feedzy_is_pro() ) : ?>
123-
<div class="fdz-upgrade-link"><span class="dashicons dashicons-lock"></span> <a href="<?php echo esc_url( feedzy_upgrade_link( 'filters', 'import' ) ); ?>"><?php __( 'Upgrade to Unlock Advanced Filtering', 'feedzy-rss-feeds' ); ?> </a></div>
124-
<?php endif; ?>
125122
</div>
126123
</div>
127124
</div>

‎js/Conditions/ConditionsControl.js‎

Lines changed: 171 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import classNames from 'classnames';
66
/**
77
* WordPress dependencies.
88
*/
9-
import { __ } from '@wordpress/i18n';
9+
import { __, sprintf } from '@wordpress/i18n';
1010

1111
import { Button, SelectControl, TextControl } from '@wordpress/components';
1212

@@ -18,6 +18,7 @@ import { Icon, plus } from '@wordpress/icons';
1818
import PanelTab from './PanelTab';
1919
import DateTimeControl from './DateTimeControl';
2020
import { cond } from 'lodash';
21+
import { useState } from 'react';
2122

2223
const SUPPORTED_FIELDS = [
2324
{
@@ -63,6 +64,7 @@ const SUPPORTED_FIELDS = [
6364
const isPro = window.feedzyData.isPro;
6465

6566
const ConditionsControl = ({ conditions, setConditions }) => {
67+
const [modalOpen, setModelOpen] = useState(false);
6668
const onChangeMatch = (value) => {
6769
setConditions({
6870
...conditions,
@@ -72,6 +74,10 @@ const ConditionsControl = ({ conditions, setConditions }) => {
7274

7375
const addCondition = () => {
7476
if (!isPro && 1 <= conditions.conditions.length) {
77+
// the Inspector panel use sticky position with their own stacking context,
78+
// which causes them to appear above our popup overlay. We set their z-index to 0 so the popup covers them.
79+
document.querySelector('.editor-sidebar__panel-tabs').style.zIndex = 0;
80+
setModelOpen(true);
7581
return;
7682
}
7783

@@ -125,124 +131,174 @@ const ConditionsControl = ({ conditions, setConditions }) => {
125131
});
126132
};
127133

134+
const closeModal = () => {
135+
document.querySelector('.editor-sidebar__panel-tabs').style.zIndex = 1;
136+
setModelOpen(false)
137+
}
138+
128139
return (
129-
<div
130-
className='fz-condition-control'
131-
>
132-
<SelectControl
133-
label={__('Include If', 'feedzy-rss-feeds')}
134-
value={conditions.match}
135-
options={[
136-
{
137-
label: __('All conditions are met', 'feedzy-rss-feeds'),
138-
value: 'all',
139-
},
140-
{
141-
label: __('Any condition is met', 'feedzy-rss-feeds'),
142-
value: 'any',
143-
},
144-
]}
145-
onChange={onChangeMatch}
146-
/>
147-
148-
{conditions.conditions.map((condition, index) => {
149-
const field = SUPPORTED_FIELDS.find(
150-
(i) => i.value === condition.field
151-
);
152-
const operators = Object.keys(
153-
window?.feedzyConditionsData?.operators
154-
).filter((key) => !field?.unsupportedOperators?.includes(key));
155-
156-
return (
157-
<PanelTab
158-
key={index}
159-
label={`${field?.label} ${window.feedzyConditionsData.operators[condition.operator]} ${condition?.value || ''}`}
160-
onDelete={() => removeCondition(index)}
161-
initialOpen={index === 0}
162-
>
163-
<SelectControl
164-
label={__('Field', 'feedzy-rss-feeds')}
165-
value={condition?.field}
166-
options={SUPPORTED_FIELDS}
167-
onChange={(value) =>
168-
onChangeCondition(index, value, 'field')
169-
}
170-
/>
171-
172-
<SelectControl
173-
label={__('Compare Operator', 'feedzy-rss-feeds')}
174-
options={operators.map((key) => ({
175-
label: window.feedzyConditionsData.operators[
176-
key
177-
],
178-
value: key,
179-
}))}
180-
help={
181-
['contains', 'not_contains'].includes(
182-
condition?.operator
183-
)
184-
? __(
185-
'You can use comma(,) and plus(+) keyword.',
186-
'feedzy-rss-feeds'
187-
)
188-
: ''
189-
}
190-
value={condition?.operator}
191-
onChange={(value) =>
192-
onChangeCondition(index, value, 'operator')
193-
}
194-
/>
195-
196-
{!['has_value', 'empty'].includes(
197-
condition?.operator
198-
) && (
199-
<>
200-
{condition?.field === 'date' ? (
201-
<DateTimeControl
202-
id={index}
203-
label={__('Value', 'feedzy-rss-feeds')}
204-
value={condition?.value}
205-
onChange={(value) =>
206-
onChangeCondition(
207-
index,
208-
value,
209-
'value'
210-
)
211-
}
212-
/>
213-
) : (
214-
<TextControl
215-
label={__('Value', 'feedzy-rss-feeds')}
216-
value={condition?.value}
217-
onChange={(value) =>
218-
onChangeCondition(
219-
index,
220-
value,
221-
'value'
222-
)
223-
}
224-
/>
225-
)}
226-
</>
227-
)}
228-
</PanelTab>
229-
);
230-
})}
231-
232-
<div className={classNames("fz-action-btn mt-24", {
233-
'is-upsell': !isPro && 1 <= conditions.conditions.length
234-
})}
140+
<>
141+
<div
142+
className='fz-condition-control'
235143
>
236-
<Button
237-
variant="secondary"
238-
onClick={addCondition}
239-
className="fz-new-action"
144+
<SelectControl
145+
label={__('Include If', 'feedzy-rss-feeds')}
146+
value={conditions.match}
147+
options={[
148+
{
149+
label: __('All conditions are met', 'feedzy-rss-feeds'),
150+
value: 'all',
151+
},
152+
{
153+
label: __('Any condition is met', 'feedzy-rss-feeds'),
154+
value: 'any',
155+
},
156+
]}
157+
onChange={onChangeMatch}
158+
/>
159+
160+
{conditions.conditions.map((condition, index) => {
161+
const field = SUPPORTED_FIELDS.find(
162+
(i) => i.value === condition.field
163+
);
164+
const operators = Object.keys(
165+
window?.feedzyConditionsData?.operators
166+
).filter((key) => !field?.unsupportedOperators?.includes(key));
167+
168+
return (
169+
<PanelTab
170+
key={index}
171+
label={`${field?.label} ${window.feedzyConditionsData.operators[condition.operator]} ${condition?.value || ''}`}
172+
onDelete={() => removeCondition(index)}
173+
initialOpen={index === 0}
174+
>
175+
<SelectControl
176+
label={__('Field', 'feedzy-rss-feeds')}
177+
value={condition?.field}
178+
options={SUPPORTED_FIELDS}
179+
onChange={(value) =>
180+
onChangeCondition(index, value, 'field')
181+
}
182+
/>
183+
184+
<SelectControl
185+
label={__('Compare Operator', 'feedzy-rss-feeds')}
186+
options={operators.map((key) => ({
187+
label: window.feedzyConditionsData.operators[
188+
key
189+
],
190+
value: key,
191+
}))}
192+
help={
193+
['contains', 'not_contains'].includes(
194+
condition?.operator
195+
)
196+
? __(
197+
'You can use comma(,) and plus(+) keyword.',
198+
'feedzy-rss-feeds'
199+
)
200+
: ''
201+
}
202+
value={condition?.operator}
203+
onChange={(value) =>
204+
onChangeCondition(index, value, 'operator')
205+
}
206+
/>
207+
208+
{!['has_value', 'empty'].includes(
209+
condition?.operator
210+
) && (
211+
<>
212+
{condition?.field === 'date' ? (
213+
<DateTimeControl
214+
id={index}
215+
label={__('Value', 'feedzy-rss-feeds')}
216+
value={condition?.value}
217+
onChange={(value) =>
218+
onChangeCondition(
219+
index,
220+
value,
221+
'value'
222+
)
223+
}
224+
/>
225+
) : (
226+
<TextControl
227+
label={__('Value', 'feedzy-rss-feeds')}
228+
value={condition?.value}
229+
onChange={(value) =>
230+
onChangeCondition(
231+
index,
232+
value,
233+
'value'
234+
)
235+
}
236+
/>
237+
)}
238+
</>
239+
)}
240+
</PanelTab>
241+
);
242+
})}
243+
244+
<div className={classNames("fz-action-btn mt-24", {
245+
'is-upsell': !isPro && 1 <= conditions.conditions.length
246+
})}
240247
>
241-
{__('Add Condition', 'feedzy-rss-feeds')}{' '}
242-
<Icon icon={plus} />
243-
</Button>
248+
<Button
249+
variant="secondary"
250+
onClick={addCondition}
251+
className="fz-new-action"
252+
>
253+
{__('Add Condition', 'feedzy-rss-feeds')}{' '}
254+
<Icon icon={plus} />
255+
</Button>
256+
</div>
244257
</div>
245-
</div>
258+
{ modalOpen &&
259+
<div id="feedzy-add-filter-condition" className="wp-core-ui feedzy-modal">
260+
<div className="modal-content">
261+
<button className="fz-notice close-modal" onClick={closeModal}>
262+
<span className="dashicons dashicons-no-alt"></span>
263+
<span className="screen-reader-text">
264+
{ __( 'Dismiss this dialog', 'feedzy-rss-feeds' ) }
265+
</span>
266+
</button>
267+
<div className="modal-header">
268+
<h2>
269+
{ __( 'Upgrade to Use Unlimited Conditions', 'feedzy-rss-feeds' ) }
270+
</h2>
271+
<p style={{color:'red'}}>
272+
{ __( 'Filter Condition limit reached', 'feedzy-rss-feeds' ) }
273+
<span>
274+
{/* translators: %1$s is the number of imports used, %2$s is the total number of imports allowed. */}
275+
{ __( '(' + sprintf( __( '%1$s/%2$s used', 'feedzy-rss-feeds' ), '1', '1' ) + ')' ) }
276+
</span>
277+
</p>
278+
</div>
279+
<div className="modal-body">
280+
<p>
281+
{ __( 'Your current plan supports only one filter condition. Upgrade to unlock unlimited import configurations and make the most of Feedzy\'s powerful features!', 'feedzy-rss-feeds' ) }
282+
</p>
283+
</div>
284+
<div className="modal-footer">
285+
<div className="button-container">
286+
<a
287+
href="https://themeisle.com/plugins/feedzy-rss-feeds/upgrade/?utm_source=wpadmin&utm_medium=post&utm_campaign=filterCondition&utm_content=feedzy-rss-feeds"
288+
target="_blank" rel="noopener "
289+
className="button button-primary button-large"
290+
>
291+
{ __( 'Upgrade to PRO', 'feedzy-rss-feeds' ) }
292+
</a>
293+
</div>
294+
<span>
295+
{ __( '30-day money-back guarantee. No questions asked.', 'feedzy-rss-feeds' ) }
296+
</span>
297+
</div>
298+
</div>
299+
</div>
300+
}
301+
</>
246302
);
247303
};
248304

0 commit comments

Comments
 (0)