# wpfunnels/2.8.16/admin/class-wpfnl-banner.php

WPFunnels – Funnel Builder for WooCommerce with Checkout & One Click Upsell, version 2.8.16. 496 lines.

- Page: https://pluginprobe.com/plugins/wpfunnels/2.8.16/code/admin/class-wpfnl-banner.php
- Raw: https://pluginprobe.com/plugins/wpfunnels/2.8.16/raw/admin/class-wpfnl-banner.php
- Modified: 2023-11-23T06:31:18+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/wpfunnels/2.8.16/code/admin/class-wpfnl-banner.php#L10-L20`.

```php
<?php
namespace WPFunnels\Admin\Banner;

/**
 * SpecialOccasionBanner Class
 *
 * This class is responsible for displaying a special occasion banner in the WordPress admin.
 *
 * @package WPFunnels\Admin\Banner
 */
class SpecialOccasionBanner {

    /**
     * The occasion identifier.
     *
     * @var string
     */
    private $occasion;
    
    /**
     * The button link.
     *
     * @var string
     */
    private $btn_link;

    /**
     * The start date and time for displaying the banner.
     *
     * @var int
     */
    private $start_date;

    /**
     * The end date and time for displaying the banner.
     *
     * @var int
     */
    private $end_date;

    /**
     * Constructor method for SpecialOccasionBanner class.
     *
     * @param string $occasion   The occasion identifier.
     * @param string $start_date The start date and time for displaying the banner.
     * @param string $end_date   The end date and time for displaying the banner.
     */
    public function __construct($occasion, $start_date, $end_date, $btn_link = '#' ) {
        $this->occasion     = $occasion;
        $this->btn_link     = $btn_link;
        $this->start_date   = strtotime($start_date);
        $this->end_date     = strtotime($end_date);

        if ( !defined('WPFNL_PRO_VERSION') && 'yes' === get_option( '_is_wpfnl_black_friday_promotion', 'yes' )) {

            // Hook into the admin_notices action to display the banner
            add_action('admin_notices', [$this, 'display_banner']);

            // Add styles
            add_action('admin_head', array($this, 'add_styles'));
        }

        
    }


    /**
     * Displays the special occasion banner if the current date and time are within the specified range.
     */
    public function display_banner() {
        $screen                     = get_current_screen();
        $promotional_notice_pages   = ['dashboard', 'plugins', 'toplevel_page_wp_funnels', 'wp-funnels_page_wpfnl_settings'];
        $current_date_time          = current_time('timestamp');

        if (!in_array($screen->id, $promotional_notice_pages)) {
            return;
        }

        if ( $current_date_time < $this->start_date || $current_date_time > $this->end_date ) {
            return;
        }
        // Calculate the time remaining in seconds
        $time_remaining = $this->end_date - $current_date_time;

        ?>
        <div class="<?php echo esc_attr($this->occasion); ?>-banner notice">
            <div class="wpfnl-promotional-banner">
                <div class="banner-overflow">
                    
                    <div class="wpfnl-promotional-banner-wrapper">
                        <figure class="promotional-logo">
                            <img src="<?php echo esc_url( WPFNL_URL.'admin/assets/images/blackfriday-logo.webp' ); ?>" alt="black friday logo" />
                        </figure>

                        <div class="promotional-content">
                            <h4>
                                Super Sale <span>Is Live!</span>
                            </h4>
                        </div>
                        
                        <div class="promotional-discount">
                            <figure>
                                <img src="<?php echo esc_url( WPFNL_URL.'admin/assets/images/blackfriday-discount-percent.webp' ); ?>" alt="black friday 35% off" />
                            </figure>
                        </div>

                        <div class="promotional-counter">
                            <ul class="countdown" id="wpfnl_countdown">
                                <li><span id="wpfnl_days">00</span> days</li>
                                <li><span id="wpfnl_hours">00</span> hours</li>
                                <li><span id="wpfnl_minutes">00</span> mins</li>
                                <!-- <li><span id="seconds">59</span> seconds</li> -->
                            </ul>
                        </div>

                        <div class="get-plugin-btn">
                            <a href="<?php echo esc_url($this->btn_link); ?>" target="_blank">
                            Flat <span>35%</span> OFF
                            </a>
                        </div>
                    </div>
                </div>

                <button class="close-promotional-banner" type="button" aria-label="close banner">
                    <svg width="12" height="13" fill="none" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg"><path stroke="#7A8B9A" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 1.97L1 11.96m0-9.99l10 9.99"/></svg>
                </button>
            </div>
        </div>

        <script>
            var timeRemaining = <?php echo esc_js($time_remaining); ?>;

            // Update the countdown every second
            setInterval(function() {
                var countdownElement    = document.getElementById('wpfnl_countdown');
                var daysElement         = document.getElementById('wpfnl_days');
                var hoursElement        = document.getElementById('wpfnl_hours');
                var minutesElement      = document.getElementById('wpfnl_minutes');

                // Decrease the remaining time
                timeRemaining--;

                // Calculate new days, hours, and minutes
                var days = Math.floor(timeRemaining / (60 * 60 * 24));
                var hours = Math.floor((timeRemaining % (60 * 60 * 24)) / (60 * 60));
                var minutes = Math.floor((timeRemaining % (60 * 60)) / 60);


                // Format values with leading zeros
                days = (days < 10) ? '0' + days : days;
                hours = (hours < 10) ? '0' + hours : hours;
                minutes = (minutes < 10) ? '0' + minutes : minutes;

                // Update the HTML
                daysElement.textContent = days;
                hoursElement.textContent = hours;
                minutesElement.textContent = minutes;

                // Check if the countdown has ended
                if (timeRemaining <= 0) {
                    countdownElement.innerHTML = 'Campaign Ended';
                }
            }, 1000); // Update every second
        </script>
        <?php
    }

    /**
     * Adds internal CSS styles for the special occasion banners.
     */
    public function add_styles() {
        ?>
        <style type="text/css">
            @font-face {
                font-family: "Circular Std Bold";
                src: url(<?php echo plugin_dir_url(__FILE__).'assets/fonts/circularstd-bold.woff2'; ?>) format("woff2"),
                url(<?php echo plugin_dir_url(__FILE__).'assets/fonts/circularstd-bold.woff'; ?>) format("woff");
                font-weight: 700;
                font-style: normal;
                font-display: swap; 
            }

            @font-face {
                font-family: "Circular Std Book";
                src: url(<?php echo plugin_dir_url(__FILE__).'assets/fonts/CircularStd-Book.woff2'; ?>) format("woff2"),
                url(<?php echo plugin_dir_url(__FILE__).'assets/fonts/CircularStd-Book.woff'; ?>) format("woff");
                font-weight: normal;
                font-style: normal;
                font-display: swap; 
            }

            @font-face {
                font-family: "Inter";
                src: url(<?php echo plugin_dir_url(__FILE__).'assets/fonts/Inter-Bold.woff2'; ?>) format("woff2"), 
                url(<?php echo plugin_dir_url(__FILE__).'assets/fonts/Inter-Bold.woff'; ?>) format("woff");
                font-weight: 700;
                font-style: normal;
                font-display: swap;
            }

            @font-face {
                font-family: 'Lexend Deca';
                src: url(<?php echo plugin_dir_url(__FILE__).'assets/fonts/LexendDeca-SemiBold.woff2'; ?>) format("woff2"), 
                url(<?php echo plugin_dir_url(__FILE__).'assets/fonts/LexendDeca-SemiBold.woff'; ?>) format("woff");
                font-weight: 600;
                font-style: normal;
                font-display: swap;
            }

            @font-face {
                font-family: 'Lexend Deca';
                src: url(<?php echo plugin_dir_url(__FILE__).'assets/fonts/LexendDeca-Bold.woff2'; ?>) format("woff2"), 
                url(<?php echo plugin_dir_url(__FILE__).'assets/fonts/LexendDeca-Bold.woff'; ?>) format("woff");
                font-weight: 700;
                font-style: normal;
                font-display: swap;
            }

            .wpfnl-promotional-banner, 
            .wpfnl-promotional-banner * {
                box-sizing: border-box;
            }
            
            .wp-funnels_page_wpfnl_settings .wpfnl-promotional-banner,
            .toplevel_page_wp_funnels .wpfnl-promotional-banner {
                margin: 20px 0;
                width: calc(100% - 20px);
            }

            .wp-funnels_page_wpfnl_settings .black-friday-banner.notice,
            .toplevel_page_wp_funnels .black-friday-banner.notice {
                margin: 0;
            }
            
            .black-friday-banner.notice {
                border: none;
                padding: 0;
                display: block;
                background: transparent;
            }

            .wpfnl-promotional-banner {
                background-color: #100E1A;
                width: 100%;
                background-image: url(<?php echo WPFNL_URL.'admin/assets/images/blckfriday-23-bg.webp'; ?>);
                background-position: center;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                position: relative;
                border: none;
                padding: 9px 0;
                box-shadow: none;
                display: block;
            }

            .wpfnl-promotional-banner .banner-overflow {
                overflow: hidden;
                position: relative;
                width: 100%;
            }

            .wpfnl-promotional-banner figure {
                margin: 0;
            }

            .wpfnl-promotional-banner-wrapper {
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                justify-content: space-between;
                gap: 30px;
                max-width: 1400px;
                margin: 0 auto;
                padding: 0 15px;
                z-index: 1;
                position: relative;
                height: 100%;
            }

            .wpfnl-promotional-banner-wrapper .promotional-content {
                max-width: 420px;
            }

            .wpfnl-promotional-banner-wrapper .promotional-logo img {
                max-width: 230px;
                position: relative;
                top: 3px;
            }

            .wpfnl-promotional-banner-wrapper .promotional-content h4 {
                margin: 0;
                text-transform: none;
                color: #ED8136;
                font-family: 'Lexend Deca';
                font-size: 30px;
                font-style: normal;
                font-weight: 700;
                line-height: 1.37;
            }

            .wpfnl-promotional-banner-wrapper .promotional-content h4 span {
                display: block;
                color: #BEB4F4;
                font-family: 'Lexend Deca';
                font-size: 24px;
                font-style: normal;
                font-weight: 600;
                line-height: 1.1;
                letter-spacing: 1.68px;
                text-transform: uppercase;
            }

            .promotional-discount {
                position: relative;
                top: 3px;
            }

            .wpfnl-promotional-banner-wrapper .countdown {
                position: relative;
                top: 3px;
            }
            .wpfnl-promotional-banner-wrapper .countdown {
                display: flex;
                justify-content: center;
                gap: 20px;
                margin: 0;
                padding: 0;
            }

            .wpfnl-promotional-banner-wrapper .countdown li {
                display: flex;
                flex-direction: column;
                text-align: center;
                width: 68.5px;
                font-size: 16px;
                list-style-type: none;
                font-family: "Circular Std Book";
                line-height: 1.2;
                font-weight: 500;
                letter-spacing: 1.6px;
                text-transform: uppercase;
                text-align: center;
                color: #A89CC3;
                margin: 0;
            }

            .wpfnl-promotional-banner-wrapper .countdown li span {
                font-size: 44px;
                font-family: 'Inter', sans-serif;
                font-weight: 700;
                line-height: 1;
                color: #fff;
                text-align: center;
                margin-bottom: 10px;
                padding: 4px 2px;

                border-radius: 10px;
                border: 1px solid #FF0083;
                background: linear-gradient(148deg, #2A0856 21.92%, #140102 80.41%);
                box-shadow: 0px 5px 0px 0px #C90369;

            }

            .wpfnl-promotional-banner-wrapper .get-plugin-btn a {
                text-decoration: none;
                padding: 18px 31px 16px;
                border-radius: 15px;
                background: #ED8136;
                color: #FFF;
                text-align: center;
                font-family: 'Lexend Deca';
                font-size: 20px;
                font-weight: 700;
                line-height: 1;
                display: block;
                outline: none;
                box-shadow: none;
            }
            .wpfnl-promotional-banner-wrapper .get-plugin-btn a:focus {
                outline: none;
                box-shadow: none;
            }

            .wpfnl-promotional-banner-wrapper .get-plugin-btn span {
                font-family: 'Lexend Deca';
                font-size: 26px;
                font-weight: 700;
                line-height: 1;
            }

            .wpfnl-promotional-banner .close-promotional-banner {
                position: absolute;
                top: -10px;
                right: -9px;
                background: #fff;
                border: none;
                padding: 8px 9px;
                border-radius: 50%;
                cursor: pointer;
            }

            .wpfnl-promotional-banner .close-promotional-banner svg {
                display: block;
                width: 10px;
            }

            @media only screen and (max-width: 1399px) {
                .wpfnl-promotional-banner-wrapper .promotional-logo img {
                    max-width: 180px;
                }
                .wpfnl-promotional-banner .promotional-discount img {
                    max-width: 120px;
                }

                .wpfnl-promotional-banner-wrapper .promotional-content h4 {
                    font-size: 26px;
                }
                .wpfnl-promotional-banner-wrapper .promotional-content h4 span {
                    font-size: 20px;
                }

                .wpfnl-promotional-banner-wrapper .get-plugin-btn span {
                    font-size: 22px;
                }

                .wpfnl-promotional-banner-wrapper .countdown {
                    gap: 10px;
                }
                .wpfnl-promotional-banner-wrapper .countdown li {
                    width: 58px;
                    font-size: 14px;
                }
                .wpfnl-promotional-banner-wrapper .countdown li span {
                    font-size: 36px;
                    box-shadow: 0px 3px 0px 0px #C90369;
                }

                .wpfnl-promotional-banner-wrapper .get-plugin-btn a {
                    padding: 14px 18px 14px;
                    font-size: 18px;
                    font-weight: 600;
                    border-radius: 10px;
                }
            }

            @media only screen and (max-width: 1199px) {
                .wpfnl-promotional-banner-wrapper {
                    gap: 24px;
                }

                .wpfnl-promotional-banner-wrapper .promotional-logo img {
                    max-width: 140px;
                }
                .wpfnl-promotional-banner .promotional-discount img {
                    max-width: 90px;
                }

                .wpfnl-promotional-banner-wrapper .promotional-content h4 {
                    font-size: 22px;
                }
                .wpfnl-promotional-banner-wrapper .promotional-content h4 span {
                    font-size: 17px;
                }

                .wpfnl-promotional-banner-wrapper .countdown li {
                    width: 47px;
                    font-size: 11px;
                }
                .wpfnl-promotional-banner-wrapper .countdown li span {
                    font-size: 26px;
                }

                .wpfnl-promotional-banner-wrapper .get-plugin-btn a {
                    padding: 12px 14px 11px;
                    font-size: 15px;
                    border-radius: 10px;
                }
                .wpfnl-promotional-banner-wrapper .get-plugin-btn span {
                    font-size: 18px;
                }
                
            }

            @media only screen and (max-width: 991px) {
                .wpfnl-promotional-banner-wrapper .promotional-logo img {
                    max-width: 120px;
                }
                .wpfnl-promotional-banner .promotional-discount img {
                    max-width: 75px;
                }
                
            }
        </style>
        <?php
    }
}
```