diff --git a/assets/css/admin/facebook-for-woocommerce-whatsapp-banner.css b/assets/css/admin/facebook-for-woocommerce-whatsapp-banner.css new file mode 100644 index 000000000..29aac8249 --- /dev/null +++ b/assets/css/admin/facebook-for-woocommerce-whatsapp-banner.css @@ -0,0 +1,64 @@ +.fb-wa-banner { + display: block; + position: relative; + box-sizing: border-box; + width: 1000px; + margin-bottom: 20px; + padding: 16px; + color: #050505; + background: #fff; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); +} + +.fb-wa-banner p, +.fb-wa-banner h2 { + font-family: Helvetica, Arial, sans-serif; + font-size: 20px; + line-height: 24px; + color:#606770; +} + +.fb-wa-banner h2 { + font-weight: 600; + color: #1c1e21; +} + +.fb-wa-banner .wa-cta-button { + display: inline-block; + cursor: pointer; + border: 1px solid; + width: 151px; + border-radius: 6px; + text-decoration: none; + box-sizing: content-box; + font-size: 16px; + line-height: 34px; + -webkit-font-smoothing: antialiased; + font-weight: bold; + justify-content: center; + padding: 0 8px; + position: relative; + text-align: center; + text-shadow: none; + vertical-align: middle; + transition: 200ms cubic-bezier(.08, .52, .52, 1) background-color, 200ms cubic-bezier(.08, .52, .52, 1) box-shadow, 200ms cubic-bezier(.08, .52, .52, 1) transform; + padding: 0 16px; + color: #fff; + background-color: #1877f2; + border-color: #1877f2; +} + +.fb-wa-banner .wa-cta-button:hover { + background-color: #1763cf; + border-color: #1763cf; +} + +.fb-wa-banner .wa-close-button { + position: absolute; + display: block; + width: 16px; + height: 16px; + padding: 5px; + right: 16px; + top: 16px; +} diff --git a/assets/images/ico-close.svg b/assets/images/ico-close.svg new file mode 100644 index 000000000..4929537ca --- /dev/null +++ b/assets/images/ico-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/images/ico-whatsapp.png b/assets/images/ico-whatsapp.png new file mode 100644 index 000000000..9bf475436 Binary files /dev/null and b/assets/images/ico-whatsapp.png differ diff --git a/assets/js/admin/whatsapp-admin-banner.js b/assets/js/admin/whatsapp-admin-banner.js new file mode 100644 index 000000000..f11bb94a3 --- /dev/null +++ b/assets/js/admin/whatsapp-admin-banner.js @@ -0,0 +1,13 @@ +jQuery(function ($) { + $(document).on('click', '.fb-wa-banner .wa-close-button', function (e) { + e.preventDefault(); + + $.post(WCFBAdminBanner.ajax_url, { + action: 'wc_facebook_dismiss_banner', + nonce: WCFBAdminBanner.nonce, + banner_id: WCFBAdminBanner.banner_id + }).done(function (response) { + $('.fb-wa-banner').remove(); + }); + }); +}); diff --git a/facebook-commerce-admin-banner.php b/facebook-commerce-admin-banner.php new file mode 100644 index 000000000..d134cf561 --- /dev/null +++ b/facebook-commerce-admin-banner.php @@ -0,0 +1,128 @@ + admin_url( 'admin-ajax.php' ), + 'nonce' => wp_create_nonce( self::BANNER_ID ), + 'banner_id' => self::BANNER_ID, + ) + ); + } + + /** + * AJAX handler to dismiss the banner. + */ + public function ajax_dismiss_banner() { + check_ajax_referer( self::BANNER_ID, 'nonce' ); + update_user_meta( + get_current_user_id(), + self::BANNER_ID, + 1 + ); + } + + /** + * Output the banner HTML if it should be shown. + */ + public function render_banner() { + // Check if the WhatsApp admin banner should be shown. + if ( strtotime( 'now' ) > strtotime( '2025-06-15 23:59:59' ) ) { + return; + } + + if ( ! current_user_can( 'manage_woocommerce' ) ) { + return; + } + + if ( get_user_meta( + get_current_user_id(), + self::BANNER_ID, + true + ) ) { + return; + } + + $banner_html = '
'; + $banner_html .= 'WhatsApp Logo'; + $banner_html .= '

Sign up to test WhatsApp’s new integration with ' + . 'WooCommerce

'; + $banner_html .= '

We’re launching a brand new WhatsApp integration for ' + . 'WooCommerce allowing businesses to send order tracking notifications ' + . 'on WhatsApp. Sign up for a chance to join our testing program and get ' + . 'early access to this new feature. As a thank you, participants who ' + . 'complete testing will receive a $500 ad credit.

'; + $banner_html .= 'Sign Up'; + $banner_html .= 'Close button'; + $banner_html .= '
'; + + echo wp_kses_post( $banner_html ); + } +} diff --git a/facebook-for-woocommerce.php b/facebook-for-woocommerce.php index 36015a048..39a7ce137 100644 --- a/facebook-for-woocommerce.php +++ b/facebook-for-woocommerce.php @@ -38,6 +38,20 @@ function () { } } ); + +if ( is_admin() ) { + add_action( + 'admin_init', + function () { + if ( ! class_exists( 'WC_Facebookcommerce_Admin_Banner' ) ) { + require_once plugin_dir_path( __FILE__ ) . + 'facebook-commerce-admin-banner.php'; + } + new WC_Facebookcommerce_Admin_Banner(); + } + ); +} + /** * The plugin loader class. * diff --git a/includes/Admin/Settings_Screens/Advertise.php b/includes/Admin/Settings_Screens/Advertise.php index 90b4d7396..670a67d5c 100644 --- a/includes/Admin/Settings_Screens/Advertise.php +++ b/includes/Admin/Settings_Screens/Advertise.php @@ -70,6 +70,7 @@ public function enqueue_assets() { return; } wp_enqueue_style( 'wc-facebook-admin-advertise-settings', facebook_for_woocommerce()->get_plugin_url() . '/assets/css/admin/facebook-for-woocommerce-advertise.css', array(), \WC_Facebookcommerce::VERSION ); + wp_enqueue_style( 'wc-facebook-admin-whatsapp-banner', facebook_for_woocommerce()->get_plugin_url() . '/assets/css/admin/facebook-for-woocommerce-whatsapp-banner.css', array(), \WC_Facebookcommerce::VERSION ); } @@ -209,7 +210,11 @@ public function render() { $fbe_extras = wp_json_encode( $this->get_lwi_ads_configuration_data() ); + $wa_banner = new \WC_Facebookcommerce_Admin_Banner(); + $wa_banner->render_banner(); + $wa_banner->enqueue_banner_script(); ?> +