Skip to content

Commit fdc42f6

Browse files
Soare-Robert-DanielSoare-Robert-Daniel
authored
refactor: UI upsell modal for export/import, clone, import (#1138)
1 parent eca2036 commit fdc42f6

File tree

7 files changed

+319
-265
lines changed

7 files changed

+319
-265
lines changed

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

Lines changed: 162 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -463,7 +463,7 @@ public function add_modals() {
463463
openModal('#feedzy-add-new-import');
464464
event.preventDefault();
465465
});
466-
466+
467467
// Function to open the modal
468468
function openModal(modal) {
469469
jQuery(modal).show();
@@ -488,26 +488,50 @@ function closeModal(e) {
488488
</script>
489489
<div id="feedzy-add-new-import" class="wp-core-ui feedzy-modal" style="display:none;">
490490
<div class="modal-content">
491-
<button type="button" class="notice-dismiss fz-notice close-modal">
492-
<span class="screen-reader-text"><?php esc_html_e( 'Dismiss this dialog', 'feedzy-rss-feeds' ); ?></span>
491+
<button type="button" class="fz-notice close-modal">
492+
<span class="dashicons dashicons-no-alt"></span>
493+
<span class="screen-reader-text">
494+
<?php esc_html_e( 'Dismiss this dialog', 'feedzy-rss-feeds' ); ?>
495+
</span>
493496
</button>
494497
<div class="modal-header">
495498
<h2>
496-
<span class="dashicons dashicons-lock"></span> <?php esc_html_e( 'Upgrade to Use Unlimited Imports', 'feedzy-rss-feeds' ); ?>
499+
<?php esc_html_e( 'Upgrade to Use Unlimited Imports', 'feedzy-rss-feeds' ); ?>
497500
</h2>
501+
<p style="color: red;">
502+
<?php esc_html_e( 'Import limit reached', 'feedzy-rss-feeds' ); ?>
503+
<span>
504+
<?php
505+
// translators: %1$s is the number of imports used, %2$s is the total number of imports allowed.
506+
echo esc_html( '(' . sprintf( __( '%1$s/%2$s used', 'feedzy-rss-feeds' ), '1', '1' ) . ')' );
507+
?>
508+
</span>
509+
</p>
498510
</div>
499511
<div class="modal-body">
500-
<p><?php esc_html_e( 'We’re sorry, but your current plan supports only one import setup. Upgrade to unlock unlimited import configurations and make the most of Feedzy’s powerful features!', 'feedzy-rss-feeds' ); ?></p>
512+
<p>
513+
<?php esc_html_e( 'Your current plan supports only one import setup. Upgrade to unlock unlimited import configurations and make the most of Feedzy\'s powerful features!', 'feedzy-rss-feeds' ); ?>
514+
</p>
501515
</div>
502516
<div class="modal-footer">
503-
<div class="button-container"><a
504-
href="<?php echo esc_url( tsdk_utmify( tsdk_translate_link( FEEDZY_UPSELL_LINK ), 'add-new-import' ) ); ?>"
505-
target="_blank" rel="noopener "
506-
class="button button-primary button-large"><?php esc_html_e( 'Upgrade to PRO', 'feedzy-rss-feeds' ); ?>
507-
<span aria-hidden="true" class="dashicons dashicons-external"></span></a></div>
517+
<div class="button-container">
518+
<a
519+
href="<?php echo esc_url( tsdk_utmify( tsdk_translate_link( FEEDZY_UPSELL_LINK ), 'add-new-import' ) ); ?>"
520+
target="_blank" rel="noopener "
521+
class="button button-primary button-large"
522+
>
523+
<?php esc_html_e( 'Upgrade to PRO', 'feedzy-rss-feeds' ); ?>
524+
</a>
525+
</div>
526+
<span>
527+
<?php
528+
esc_html_e( '30-day money-back guarantee. No questions asked.', 'feedzy-rss-feeds' );
529+
?>
530+
</span>
508531
</div>
509532
</div>
510533
</div>
534+
511535
<?php
512536
$license_key = apply_filters( 'product_feedzy_license_key', '' );
513537
$renew_license_url = tsdk_utmify( tsdk_translate_link( FEEDZY_UPSELL_LINK ), 'renew' );
@@ -518,48 +542,115 @@ class="button button-primary button-large"><?php esc_html_e( 'Upgrade to PRO', '
518542
?>
519543
<div id="feedzy-renew-edit" class="wp-core-ui feedzy-modal" style="display:none;">
520544
<div class="modal-content">
521-
<button type="button" class="notice-dismiss fz-notice close-modal">
545+
<button type="button" class="fz-notice close-modal">
546+
<span class="dashicons dashicons-no-alt"></span>
522547
<span class="screen-reader-text"><?php esc_html_e( 'Dismiss this dialog', 'feedzy-rss-feeds' ); ?></span>
523548
</button>
524549
<div class="modal-header">
525550
<h2>
526-
<span class="dashicons dashicons-lock"></span> <?php esc_html_e( 'Alert!', 'feedzy-rss-feeds' ); ?>
551+
<?php esc_html_e( 'Alert!', 'feedzy-rss-feeds' ); ?>
527552
</h2>
528553
</div>
529554
<div class="modal-body">
530-
<p><?php esc_html_e( 'In order to edit premium import setups, benefit from updates and support for Feedzy Premium plugin, please renew your license code or activate it.', 'feedzy-rss-feeds' ); ?></p>
555+
<p>
556+
<?php esc_html_e( 'In order to edit premium import setups, benefit from updates and support for Feedzy Premium plugin, please renew your license code or activate it.', 'feedzy-rss-feeds' ); ?>
557+
</p>
531558
</div>
532559
<div class="modal-footer">
533560
<div class="button-container">
534-
<a href="<?php echo esc_url( $renew_license_url ); ?>" target="_blank" rel="noopener "
535-
class="button button-primary button-large"><?php esc_html_e( 'Renew License', 'feedzy-rss-feeds' ); ?><span
536-
aria-hidden="true" class="dashicons dashicons-external"></span></a>
537-
<a href="<?php echo esc_url( admin_url( 'options-general.php#feedzy_rss_feeds_pro_license' ) ); ?>" target="_blank"
561+
<a
562+
href="<?php echo esc_url( $renew_license_url ); ?>"
563+
target="_blank"
564+
rel="noopener "
565+
class="button button-primary button-large"
566+
>
567+
<?php esc_html_e( 'Renew License', 'feedzy-rss-feeds' ); ?><span aria-hidden="true" class="dashicons dashicons-external"></span>
568+
</a>
569+
<a
570+
href="<?php echo esc_url( admin_url( 'options-general.php#feedzy_rss_feeds_pro_license' ) ); ?>"
571+
target="_blank"
538572
rel="noopener "
539-
class="button button-secondary button-large"><?php esc_html_e( 'Activate License', 'feedzy-rss-feeds' ); ?></a>
540-
</div>
573+
class="button button-secondary button-large"
574+
>
575+
<?php esc_html_e( 'Activate License', 'feedzy-rss-feeds' ); ?>
576+
</a>
577+
</div>
541578
</div>
542579
</div>
543580
</div>
544581
<div id="feedzy-clone-modal" class="wp-core-ui feedzy-modal" style="display:none;">
545582
<div class="modal-content">
546-
<button type="button" class="notice-dismiss fz-notice close-modal">
583+
<button type="button" class="fz-notice close-modal">
584+
<span class="dashicons dashicons-no-alt"></span>
547585
<span class="screen-reader-text"><?php esc_html_e( 'Dismiss this dialog', 'feedzy-rss-feeds' ); ?></span>
548586
</button>
549587
<div class="modal-header">
550588
<h2>
551-
<span class="dashicons dashicons-lock"></span> <?php esc_html_e( 'Cloning import setups is a PRO feature', 'feedzy-rss-feeds' ); ?>
589+
<?php esc_html_e( 'Unlock Cloning with Feedzy PRO', 'feedzy-rss-feeds' ); ?>
552590
</h2>
591+
<p>
592+
<?php esc_html_e( 'Duplicate your imports with one click', 'feedzy-rss-feeds' ); ?>
593+
</p>
553594
</div>
554595
<div class="modal-body">
555-
<p><?php esc_html_e( 'We\'re sorry, cloning import setups is not available on your plan. Upgrade to the Pro plan to unlock this feature and streamline your import setup process.', 'feedzy-rss-feeds' ); ?></p>
596+
<p>
597+
<?php esc_html_e( 'Cloning import setups are not available on your plan. Upgrade to the Pro plan to unlock this feature and streamline your import setup process.', 'feedzy-rss-feeds' ); ?>
598+
</p>
556599
</div>
557600
<div class="modal-footer">
558-
<div class="button-container"><a
559-
href="<?php echo esc_url( tsdk_utmify( tsdk_translate_link( FEEDZY_UPSELL_LINK ), 'clone' ) ); ?>"
560-
target="_blank" rel="noopener "
561-
class="button button-primary button-large"><?php esc_html_e( 'Upgrade to PRO', 'feedzy-rss-feeds' ); ?>
562-
<span aria-hidden="true" class="dashicons dashicons-external"></span></a></div>
601+
<div class="button-container">
602+
<a
603+
href="<?php echo esc_url( tsdk_utmify( tsdk_translate_link( FEEDZY_UPSELL_LINK ), 'clone' ) ); ?>"
604+
target="_blank" rel="noopener "
605+
class="button button-primary button-large"
606+
>
607+
<?php esc_html_e( 'Upgrade to PRO', 'feedzy-rss-feeds' ); ?>
608+
</a>
609+
</div>
610+
<span>
611+
<?php
612+
esc_html_e( '30-day money-back guarantee. No questions asked.', 'feedzy-rss-feeds' );
613+
?>
614+
</span>
615+
</div>
616+
</div>
617+
</div>
618+
<div id="fz_import_export_upsell" class="wp-core-ui feedzy-modal" style="display:none;">
619+
<div class="modal-content">
620+
<span class="fz-notice close-modal">
621+
<span class="dashicons dashicons-no-alt"></span>
622+
<span class="screen-reader-text">
623+
<?php esc_html_e( 'Dismiss this dialog', 'feedzy-rss-feeds' ); ?>
624+
</span>
625+
</span>
626+
<div class="modal-header">
627+
<h2>
628+
<?php esc_html_e( 'Unlock Upload & Export with Feedzy PRO', 'feedzy-rss-feeds' ); ?>
629+
</h2>
630+
<p>
631+
<?php esc_html_e( 'Save time by reusing your import setups', 'feedzy-rss-feeds' ); ?>
632+
</p>
633+
</div>
634+
<div class="modal-body">
635+
<p>
636+
<?php esc_html_e( 'Upload/export of import configuration is not available on your plan. Please upgrade to the Pro plan to unlock all these features.', 'feedzy-rss-feeds' ); ?>
637+
</p>
638+
</div>
639+
<div class="modal-footer">
640+
<div class="button-container">
641+
<a
642+
href="<?php echo esc_url( tsdk_translate_link( tsdk_utmify( FEEDZY_UPSELL_LINK, 'importExport' ) ) ); ?>"
643+
target="_blank" rel="noopener "
644+
class="button button-primary button-large"
645+
>
646+
<?php esc_html_e( 'Upgrade to PRO', 'feedzy-rss-feeds' ); ?>
647+
</a>
648+
</div>
649+
<span>
650+
<?php
651+
esc_html_e( '30-day money-back guarantee. No questions asked.', 'feedzy-rss-feeds' );
652+
?>
653+
</span>
563654
</div>
564655
</div>
565656
</div>
@@ -594,36 +685,59 @@ class="button button-primary button-large"><?php esc_html_e( 'Upgrade to PRO', '
594685
.feedzy-modal .modal-content {
595686
position: relative;
596687
background: #fff;
597-
padding: 20px;
598-
border-radius: 3px;
688+
padding: 0;
689+
border-radius: 8px;
599690
max-width: 500px;
600691
width: auto;
601692
margin: 6.75rem auto;
602693
}
603694

604695
.feedzy-modal .modal-body {
605-
text-align: center;
696+
padding: 0 25px;
697+
padding-top: 25px;
698+
}
699+
700+
.feedzy-modal .modal-body p {
701+
margin: 0;
702+
font-size: 16px;
703+
line-height: 1.2;
606704
}
607705

608706
.feedzy-modal .modal-header {
609-
padding-bottom: 10px;
610-
margin-bottom: 10px;
707+
display: flex;
708+
flex-direction: column;
709+
align-items: flex-start;
710+
gap: 0.5rem;
711+
611712
position: relative;
713+
background-color: rgb(248, 250, 252);
714+
padding: 20px 25px;
715+
border-radius: 8px;
612716
}
613717

614718
.feedzy-modal .modal-header .dashicons {
615719
font-size: 1.3em;
616720
line-height: inherit;
617721
}
618722

723+
.feedzy-modal .modal-header :is(h2,p) {
724+
margin: 0;
725+
font-weight: 500;
726+
}
727+
619728
.feedzy-modal .modal-header h2 {
620-
text-align: center;
729+
font-size: 20px;
621730
}
622731

623732
.feedzy-modal .close-modal {
624733
position: absolute;
625734
top: 0;
626735
right: 0;
736+
z-index: 10;
737+
background: transparent;
738+
border: none;
739+
cursor: pointer;
740+
padding: 10px;
627741
}
628742

629743
.feedzy-modal .modal-footer .dashicons {
@@ -633,10 +747,23 @@ class="button button-primary button-large"><?php esc_html_e( 'Upgrade to PRO', '
633747
}
634748

635749
.feedzy-modal .modal-footer {
636-
padding-top: 10px;
637-
margin-top: 10px;
750+
padding: 25px;
638751
text-align: center;
752+
flex-direction: column;
753+
display: flex;
754+
gap: 1rem;
639755
}
756+
757+
.feedzy-modal .modal-footer a {
758+
display: flex;
759+
align-items: center;
760+
justify-content: center;
761+
background-color: rgb(89, 127, 230);
762+
padding: 10px;
763+
border-radius: 6px;
764+
font-size: medium;
765+
}
766+
640767
#toplevel_page_feedzy-admin-menu span.tsdk-upg-menu-item{
641768
color:#fff;
642769
}

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

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3683,39 +3683,7 @@ public function load_edit_screen() {
36833683
* Add import export section.
36843684
*/
36853685
public function add_import_export_section() {
3686-
if ( ! feedzy_is_pro() ) :
3687-
?>
3688-
<div id="fz_import_export_upsell" class="hidden" style="max-width:450px">
3689-
<div class="modal-content">
3690-
<span class="notice-dismiss fz-notice close-modal">
3691-
<span class="screen-reader-text"><?php esc_html_e( 'Dismiss this dialog', 'feedzy-rss-feeds' ); ?></span>
3692-
</span>
3693-
<div class="modal-header">
3694-
<h2>
3695-
<span class="dashicons dashicons-lock"></span>
3696-
<?php esc_html_e( 'Upload/Export is a PRO feature', 'feedzy-rss-feeds' ); ?>
3697-
</h2>
3698-
</div>
3699-
<div class="modal-body">
3700-
<p>
3701-
<?php esc_html_e( 'We\'re sorry, upload/export of import configuration is not available on your plan. Please upgrade to the Pro plan to unlock all these features.', 'feedzy-rss-feeds' ); ?>
3702-
</p>
3703-
</div>
3704-
<div class="modal-footer">
3705-
<div class="button-container">
3706-
<a
3707-
href="<?php echo esc_url( tsdk_translate_link( tsdk_utmify( FEEDZY_UPSELL_LINK, 'importExport' ) ) ); ?>"
3708-
target="_blank" rel="noopener "
3709-
class="button button-primary button-large"
3710-
>
3711-
<?php esc_html_e( 'Upgrade to PRO', 'feedzy-rss-feeds' ); ?>
3712-
<span aria-hidden="true" class="dashicons dashicons-external"></span>
3713-
</a>
3714-
</div>
3715-
</div>
3716-
</div>
3717-
</div>
3718-
<?php endif; ?>
3686+
?>
37193687
<script type="template/text" id="fz_import_field_section">
37203688
<div class="fz-import-field hidden">
37213689
<form method="post" enctype="multipart/form-data" action="<?php echo esc_url( add_query_arg( array( 'action' => 'fz_import_job' ), admin_url( 'admin.php' ) ) ); ?>">

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

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -150,42 +150,6 @@ span.feedzy-spinner {
150150
gap: 8px;
151151
}
152152

153-
#fz_import_export_upsell .modal-content {
154-
background: #fff;
155-
border-radius: 3px;]
156-
width: auto;
157-
margin: 1.75rem auto ;
158-
}
159-
#fz_import_export_upsell .modal-body {
160-
text-align: center;
161-
}
162-
#fz_import_export_upsell .modal-header {
163-
padding-bottom: 10px;
164-
margin-bottom: 10px;
165-
position: relative;
166-
}
167-
#fz_import_export_upsell .modal-header .dashicons {
168-
font-size: 1.3em;
169-
line-height: inherit;
170-
}
171-
#fz_import_export_upsell .modal-header h2 {
172-
text-align: center;
173-
}
174-
#fz_import_export_upsell .close-modal {
175-
position: absolute;
176-
top: 0;
177-
right: 0;
178-
}
179-
#fz_import_export_upsell .modal-footer .dashicons{
180-
181-
vertical-align: middle;
182-
font-size: initial;
183-
}
184-
#fz_import_export_upsell .modal-footer {
185-
padding-top: 10px;
186-
margin-top: 10px;
187-
text-align: center;
188-
}
189153
.fz-import-field {
190154
background-color: #fff;
191155
max-width: 400px;

0 commit comments

Comments
 (0)