MR-9: Add membership expiry warning banner for members

wordpress/wp-content/plugins/memberful-wp/js/src/expiry-banner.js

@@ -0,0 +1,71 @@
+(() => {
+  const dismissStorageKey = "memberful_expiry_banner_dismissed";
+  const hiddenClass = "memberful-expiry-banner--js-hidden";
+  const visibleClass = "memberful-expiry-banner-visible";
+  const banner = document.getElementById("memberful-expiry-banner");
+
+  if (!banner) {
+    return;
+  }
+
+  let bumpStyle = document.getElementById("memberful-expiry-banner-bump-style");
+
+  if (!bumpStyle) {
+    bumpStyle = document.createElement("style");
+    bumpStyle.id = "memberful-expiry-banner-bump-style";
+    document.head.appendChild(bumpStyle);
+  }
+
+  const refreshOffset = () => {
+    const height = banner.classList.contains(hiddenClass) ? 0 : banner.offsetHeight;
+
+    if (document.body) {
+      document.body.classList.toggle(visibleClass, height > 0);
+    }
+
+    bumpStyle.textContent = `@media screen { html { margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + ${height}px) !important; } }`;
+  };
+
+  const isDismissed = () => {
+    if (!window.sessionStorage) {
+      return false;
+    }
+
+    try {
+      return window.sessionStorage.getItem(dismissStorageKey) === "1";
+    } catch (error) {
+      return false;
+    }
+  };
+
+  const markDismissed = () => {
+    if (!window.sessionStorage) {
+      return;
+    }
+
+    try {
+      window.sessionStorage.setItem(dismissStorageKey, "1");
+    } catch (error) {
+      // Ignore session storage write failures.
+    }
+  };
+
+  if (isDismissed()) {
+    banner.classList.add(hiddenClass);
+  } else {
+    banner.classList.remove(hiddenClass);
+    const dismissButton = banner.querySelector(".memberful-expiry-banner__dismiss");
+
+    if (dismissButton) {
+      dismissButton.addEventListener("click", () => {
+        markDismissed();
+        banner.classList.add(hiddenClass);
+        refreshOffset();
+      });
+    }
+  }
+
+  window.addEventListener("resize", refreshOffset);
+  window.addEventListener("orientationchange", refreshOffset);
+  refreshOffset();
+})();

wordpress/wp-content/plugins/memberful-wp/memberful-wp.php

@@ -50,6 +50,7 @@
 require_once MEMBERFUL_DIR . '/src/search_filter.php';
 require_once MEMBERFUL_DIR . '/src/entities.php';
 require_once MEMBERFUL_DIR . '/src/embed.php';
+require_once MEMBERFUL_DIR . '/src/expiry_banner.php';
 require_once MEMBERFUL_DIR . '/src/api.php';
 require_once MEMBERFUL_DIR . '/src/roles.php';
 require_once MEMBERFUL_DIR . '/src/syncing.php';

wordpress/wp-content/plugins/memberful-wp/src/admin.php

@@ -273,6 +273,8 @@ function memberful_wp_options() {
       update_option( 'memberful_filter_account_menu_items', isset( $_POST['memberful_filter_account_menu_items'] ));
       update_option( 'memberful_auto_sync_display_names', isset( $_POST['memberful_auto_sync_display_names'] ) );
       update_option( 'memberful_show_protected_content_in_search', isset( $_POST['memberful_show_protected_content_in_search'] ) );
+      update_option( 'memberful_expiry_banner_enabled', isset( $_POST['memberful_expiry_banner_enabled'] ) );
+      update_option( 'memberful_expiry_banner_days', min( 90, max( 1, (int) ( $_POST['memberful_expiry_banner_days'] ?? 7 ) ) ) );
 
       return wp_redirect( admin_url( 'options-general.php?page=memberful_options' ) );
     }
@@ -310,6 +312,8 @@ function memberful_wp_options() {
   $filter_account_menu_items = get_option( 'memberful_filter_account_menu_items' );
   $auto_sync_display_names = get_option( 'memberful_auto_sync_display_names' );
   $show_protected_content_in_search = get_option( 'memberful_show_protected_content_in_search' );
+  $expiry_banner_enabled = get_option( 'memberful_expiry_banner_enabled' );
+  $expiry_banner_days = get_option( 'memberful_expiry_banner_days', 7 );
 
   memberful_wp_render (
     'options',
@@ -322,7 +326,9 @@ function memberful_wp_options() {
       'block_dashboard_access' => $block_dashboard_access,
       'filter_account_menu_items' => $filter_account_menu_items,
       'auto_sync_display_names' => $auto_sync_display_names,
-      'show_protected_content_in_search' => $show_protected_content_in_search
+      'show_protected_content_in_search' => $show_protected_content_in_search,
+      'expiry_banner_enabled' => $expiry_banner_enabled,
+      'expiry_banner_days' => $expiry_banner_days
     )
   );
 }