New. Banners. New banner design

css/src/cleantalk-admin-settings-page.css

@@ -726,3 +726,172 @@ button[value="save_changes"]:disabled {
         flex-direction: column;
     }
 }
+
+/* Fullpage trial/renew banner */
+.apbct-trial-renew-fullpage {
+    display: flex;
+    position: fixed;
+    width: stretch;
+    top: 0;
+    bottom: 0;
+    overflow-y: auto;
+    justify-content: center;
+    align-items: flex-start;
+    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    color: #444;
+    background-color: #f0f0f0;
+    z-index: 99;
+}
+
+.apbct-trial-renew-fullpage-notice {
+	padding: 32px 64px 64px 64px !important;
+	margin-top: 5em !important;
+	margin-bottom: 5em !important;
+}
+
+.apbct-trial-renew-fullpage-body {
+	margin-top: 32px;
+	margin-left: 32px;
+}
+
+.apbct-banner-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.apbct-trial-renew-fullpage-body .apbct-banner-button-wrapper {
+    display: flex;
+    margin: 0;
+}
+
+.apbct-trial-renew-fullpage-image {
+	flex: 1 1 0;
+	min-width: 0;
+	max-width: 576px;
+	height: auto;
+	object-fit: contain;
+    margin: auto 0;
+	align-self: flex-start;
+}
+
+.apbct-banner-desc-block-row {
+	line-height: 22px;
+}
+
+.apbct-banner-red-point {
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	background-color: #BB3323;
+	border-radius: 50%;
+	margin-right: 8px;
+	vertical-align: middle;
+}
+
+.apbct-banner-error {
+    background-color: #ffffff !important;
+    box-shadow: 0px 4px 15px #84848440 !important;
+    border-left-color: #BB3323 !important;
+}
+
+.apbct-banner-background-container {
+	display: grid;
+    max-width: 644px;
+	gap: 16px;
+	padding: 32px;
+	background-color: #F3F6F9;
+	border-radius: 8px;
+}
+
+.apbct-banner-desc-block-title {
+	font-size: 18px;
+	font-weight: bold;
+	line-height: 22px;
+	color: #0A0A0A;
+	margin-bottom: 8px;
+}
+
+.apbct-banner-stat-value {
+	margin-bottom: 0px;
+	color: #444444;
+	vertical-align: middle;
+}
+
+.apbct-banner-desc-block-text {
+	font-size: 14px;
+	line-height: 22px;
+	color: #717182;
+	margin-left: 12px;
+	margin-top: 0;
+	vertical-align: middle;
+}
+
+.apbct-banner-desc-blocks {
+	display: grid;
+	gap: 16px;
+	flex: 1 1 0;
+	min-width: 0;
+}
+
+.apbct-banner-desc-blocks-content {
+	display: flex;
+	gap: 72px;
+	flex-wrap: wrap;
+	justify-content: center;
+	margin: 32px 0;
+}
+
+.apbct-banner-check {
+    vertical-align: middle;
+}
+
+.apbct-trial-renew-upgrade {
+    display: none;
+    text-align: center;
+}
+
+.apbct-trial-renew-upgrade-link {
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: 0%;
+    text-decoration: underline solid 0% #026E88 !important;
+    text-underline-offset: 25%;
+    color: #026E88 !important;
+}
+
+@media (max-width: 1366px) {
+    .apbct-banner-header {
+        display: grid;
+        gap: 16px;
+    }
+
+    .apbct-banner-desc-blocks-content {
+        display: grid;
+        gap: 38px;
+        place-items: center;
+    }
+
+    .apbct-trial-renew-upgrade {
+        display: block;
+    }
+}
+
+@media (max-width: 1200px) {
+	.apbct-banner-desc-blocks-content { gap: 32px; }
+}
+
+@media (max-width: 782px) {
+    .apbct-trial-renew-fullpage { padding-top: 50px; padding-bottom: 50px; }
+	.apbct-trial-renew-fullpage-notice { padding: 24px 24px 32px 24px !important; }
+	.apbct-trial-renew-fullpage-body { margin-top: 20px; margin-left: 0; }
+	.apbct-banner-desc-blocks-content { gap: 24px; }
+	.apbct-banner-background-container { padding: 20px; }
+	.apbct-trial-renew-fullpage-image { width: 100%; }
+}
+
+@media (max-width: 480px) {
+	.apbct-trial-renew-fullpage-notice { padding: 16px 12px 24px 12px !important; }
+	.apbct-banner-background-container { padding: 16px; }
+	.apbct-banner-desc-blocks-content { gap: 16px; }
+	.apbct-banner-desc-block-title { font-size: 16px; }
+}

css/src/cleantalk-admin.css

@@ -276,7 +276,7 @@
 
 .apbct-banner-button {
 	display: block;
-	padding: 16px 50px;
+	padding: 17px 53px;
 	color: #FFFFFF !important;
 	border-radius: 8px;
 	font-size: 16px;
@@ -286,14 +286,6 @@
 	align-content: center;
 }
 
-.apbct-banner-button-green {
-	background-color: #00BB5D !important;
-}
-
-.apbct-banner-button-green:hover {
-	background-color: #00a34f !important;
-}
-
 .apbct-banner-button-wrapper {
 	display: grid;
 	gap: 12px;
@@ -335,3 +327,31 @@
 	line-height: 22px;
 	color: #646464 !important;
 }
+
+/* Trial/Renew banner styles */
+.apbct-notice.apbct-banner-error {
+	padding: 16px 32px !important;
+	background-color: #ffffff !important;
+	box-shadow: 0px 4px 15px #84848440 !important;
+	border-left-color: #BB3323 !important;
+}
+
+.apbct-notice.apbct-banner-error .notice-dismiss::before {
+	color: #646464;
+}
+
+.apbct-banner-button-green {
+	background-color: #00BB5D !important;
+}
+
+.apbct-banner-button-green:hover {
+	background-color: #00a34f !important;
+}
+
+.apbct-banner-button-red {
+	background-color: #BB3323 !important;
+}
+
+.apbct-banner-button-red:hover {
+	background-color: #A82E20 !important;
+}

inc/cleantalk-settings.php

@@ -1466,9 +1466,18 @@ function apbct_settings__display()
         $actual_plugin_name = $apbct->data['wl_brandname'];
     }
 
+    // Show fullpage trial/renew banner instead of settings if conditions are met
+    $trial_or_renew_fullpage_banner = new \Cleantalk\ApbctWP\AdminBannersModule\AdminBannerTrialAndRenewFullpage();
+    $trial_fullpage_style = '';
+    if ($trial_or_renew_fullpage_banner->needToShow()) {
+        $trial_or_renew_fullpage_banner->display();
+        $trial_fullpage_style = 'display:none;';
+    }
+
     apbct_settings__render_react_mount();
 
     $settings_wrap_style = apbct_settings__is_signup_wizard() ? 'display:none;' : '';
+    $settings_wrap_style .= $trial_fullpage_style;
     echo '<div id="apbct-settings-page-wrap" style="' . esc_attr($settings_wrap_style) . '">';
 
     // Title

js/src/cleantalk-admin-settings-page.js

@@ -407,6 +407,14 @@ jQuery(document).ready(function() {
         const anchor = window.location.hash.substring(1);
         handleAnchorDetection(anchor);
     }
+
+    // Fullpage trial/renew banner dismiss handler
+    jQuery('body').on('click', '.apbct-trial-renew-fullpage .notice-dismiss', function(e) {
+        e.preventDefault();
+        sessionStorage.setItem('apbct_trial_fullpage_dismissed', '1');
+        jQuery('.apbct-trial-renew-fullpage').hide();
+        jQuery('#apbct-settings-page-wrap').show();
+    });
 });
 
 /**

js/src/react/components/SignupWizard/styles.css

@@ -1,5 +1,10 @@
 .apbct-signup-wizard {
     display: flex;
+    position: fixed;
+    width: stretch;
+    top: 0;
+    bottom: 0;
+    overflow-y: auto;
     justify-content: center;
     align-items: center;
     min-height: 100vh;

lib/Cleantalk/ApbctWP/AdminBannersModule/AdminBannerAbstract.php

@@ -0,0 +1,71 @@
+<?php
+
+namespace Cleantalk\ApbctWP\AdminBannersModule;
+
+abstract class AdminBannerAbstract
+{
+    /**
+     * @var string
+     */
+    protected $prefix = 'cleantalk_';
+
+    /**
+     * Hiding time in days
+     */
+    const HIDING_TIME = 14;
+
+    /**
+     * @var string
+     */
+    protected $banner_id;
+
+    /**
+     * Show the banner if conditions are met
+     *
+     * @return void
+     */
+    public function show()
+    {
+        if ($this->needToShow()) {
+            $this->display();
+        }
+    }
+
+    /**
+     * Check if banner needs to be shown
+     *
+     * @return bool
+     */
+    abstract protected function needToShow();
+
+    /**
+     * Output the banner HTML
+     *
+     * @return void
+     */
+    abstract protected function display();
+
+    /**
+     * Check if the banner was dismissed by the user
+     *
+     * @return bool
+     */
+    protected function isDismissed()
+    {
+        $uid = get_current_user_id();
+        $dismissed_date = get_option($this->banner_id . '_' . $uid . '_dismissed');
+
+        if ($dismissed_date !== false && \Cleantalk\Common\Helper::dateValidate($dismissed_date)) {
+            $current_date = date_create();
+            $notice_date = date_create($dismissed_date);
+
+            $diff = date_diff($current_date, $notice_date);
+
+            if ($diff->days <= static::HIDING_TIME) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+}