-
+
@@ -852,11 +978,13 @@ public function profile_subscription_details( $profileuser ) {
}
?>
-
+
$each_time_type_val ) {
?>
- >
+ >
+
@@ -872,17 +1000,18 @@ public function profile_subscription_details( $profileuser ) {
@@ -960,9 +1092,11 @@ public function profile_subscription_details( $profileuser ) {
wp_nonce_field( 'update-profile_' . $userdata->ID, 'wpuf-subscription-nonce' );
do_action( 'wpuf_admin_subscription_content', $userdata->ID );
?>
-
+
@@ -972,7 +1106,7 @@ public function profile_subscription_details( $profileuser ) {
public function lenght_type_option( $selected ) {
for ( $i = 1; $i <= 30; $i++ ) {
?>
- >
+ >
recurring_change_status( $userid, 'Cancel' );
- if ( isset( $_POST['packid'] ) ) {
- $pack_id = intval( wp_unslash( $_POST['packid'] ) );
+ if ( isset( $_POST[ 'packid' ] ) ) {
+ $pack_id = intval( wp_unslash( $_POST[ 'packid' ] ) );
wpuf()->subscription->subscriber_cancel( $userid, $pack_id );
}
exit;
@@ -1023,12 +1157,14 @@ public function add_help_link() {
Subscription ', 'wp-user-frontend' ) ),
+ 'https://wedevs.com/docs/wp-user-frontend-pro/subscription-payment/?utm_source=wpuf-footer-help&utm_medium=text-link&utm_campaign=learn-more-subscription'
+ ); ?>
@@ -1070,7 +1206,8 @@ public function get_sections() {
*/
public function get_sub_sections() {
$subscription_details = apply_filters(
- 'wpuf_subscription_section_details', [
+ 'wpuf_subscription_section_details',
+ [
'subscription_details' => [
[
'id' => 'overview',
@@ -1089,7 +1226,8 @@ public function get_sub_sections() {
);
$payment = apply_filters(
- 'wpuf_subscription_section_payment', [
+ 'wpuf_subscription_section_payment',
+ [
'payment_settings' => [
[
'id' => 'payment_details',
@@ -1101,7 +1239,8 @@ public function get_sub_sections() {
__(
'For subscriptions to work correctly, please ensure the payment gateway and related settings are properly configured in the Payment Settings ',
'wp-user-frontend'
- ), admin_url( 'admin.php?page=wpuf-settings' )
+ ),
+ admin_url( 'admin.php?page=wpuf-settings' )
),
],
],
@@ -1110,7 +1249,8 @@ public function get_sub_sections() {
);
$advanced = apply_filters(
- 'wpuf_subscription_section_advanced', [
+ 'wpuf_subscription_section_advanced',
+ [
'advanced_configuration' => [
[
'id' => 'content_limit',
@@ -1140,7 +1280,8 @@ public function get_sub_sections() {
*/
public function get_fields() {
$overview = apply_filters(
- 'wpuf_subscription_overview_fields', [
+ 'wpuf_subscription_overview_fields',
+ [
'overview' => [
'plan_name' => [
'id' => 'plan-name',
@@ -1172,7 +1313,8 @@ public function get_fields() {
]
);
$access = apply_filters(
- 'wpuf_subscription_access_fields', [
+ 'wpuf_subscription_access_fields',
+ [
'access_and_visibility' => [
'plan_slug' => [
'id' => 'plan-slug',
@@ -1205,20 +1347,21 @@ public function get_fields() {
],
],
'publish_time' => [
- 'id' => 'publish-time',
- 'name' => 'publish-time',
- 'db_key' => 'post_date',
- 'db_type' => 'post',
- 'type' => 'time-date',
- 'label' => __( 'Publish Time', 'wp-user-frontend' ),
- 'tooltip' => __( 'Specify the time when you want the subscription to be published', 'wp-user-frontend' ),
- 'default' => wpuf_current_datetime()->format( 'Y-m-d H:i:s' ),
+ 'id' => 'publish-time',
+ 'name' => 'publish-time',
+ 'db_key' => 'post_date',
+ 'db_type' => 'post',
+ 'type' => 'time-date',
+ 'label' => __( 'Publish Time', 'wp-user-frontend' ),
+ 'tooltip' => __( 'Specify the time when you want the subscription to be published', 'wp-user-frontend' ),
+ 'default' => wpuf_current_datetime()->format( 'Y-m-d H:i:s' ),
],
],
]
);
$expiration = apply_filters(
- 'wpuf_subscription_expiration_fields', [
+ 'wpuf_subscription_expiration_fields',
+ [
'post_expiration' => [
'post_expiration' => [
'id' => 'post-expiration',
@@ -1301,7 +1444,8 @@ public function get_fields() {
'type' => 'switcher',
'label' => __( 'Send Expiration Mail', 'wp-user-frontend' ),
'tooltip' => __(
- 'Send an e-mail to the author after exceeding post expiration time', 'wp-user-frontend'
+ 'Send an e-mail to the author after exceeding post expiration time',
+ 'wp-user-frontend'
),
'key_id' => 'send_mail',
'default' => '',
@@ -1336,7 +1480,8 @@ public function get_fields() {
'type' => 'switcher',
'label' => __( 'Enable Post Number Rollback', 'wp-user-frontend' ),
'tooltip' => __(
- 'If enabled, number of posts will be restored if the post is deleted.', 'wp-user-frontend'
+ 'If enabled, number of posts will be restored if the post is deleted.',
+ 'wp-user-frontend'
),
'default' => false,
'is_pro' => true,
@@ -1345,7 +1490,8 @@ public function get_fields() {
]
);
$payment = apply_filters(
- 'wpuf_subscription_payment_fields', [
+ 'wpuf_subscription_payment_fields',
+ [
'payment_details' => [
'billing_amount' => [
'id' => 'billing-amount',
@@ -1391,7 +1537,8 @@ public function get_fields() {
'key_id' => 'expiration_time',
'label' => __( 'Expire In', 'wp-user-frontend' ),
'tooltip' => __(
- 'Set the duration for the subscription to remain active before expiring. Enter -1 for no expiration', 'wp-user-frontend'
+ 'Set the duration for the subscription to remain active before expiring. Enter -1 for no expiration',
+ 'wp-user-frontend'
),
],
'enable_recurring' => [
@@ -1408,7 +1555,8 @@ public function get_fields() {
]
);
$content_limit = apply_filters(
- 'wpuf_subscription_content_limits_fields', [
+ 'wpuf_subscription_content_limits_fields',
+ [
'content_limit' => [
'number_of_posts' => [
'id' => 'number-of-posts',
@@ -1456,7 +1604,8 @@ public function get_fields() {
]
);
$design_element = apply_filters(
- 'wpuf_subscription_design_elements_fields', [
+ 'wpuf_subscription_design_elements_fields',
+ [
'design_elements' => [
'number_of_blocks' => [
'id' => 'number-of-blocks',
@@ -1518,7 +1667,8 @@ public function get_fields() {
]
);
$additional_options = apply_filters(
- 'wpuf_subscription_additional_fields', [
+ 'wpuf_subscription_additional_fields',
+ [
'additional' => [
'number_of_featured_items' => [
'id' => 'number-of-featured-items',
@@ -1575,13 +1725,13 @@ public function get_dependent_fields() {
'expiration_message' => true,
],
'enable_recurring' => [
- 'payment_cycle' => true,
- 'stop_cycle' => true,
- 'billing_limit' => true,
- 'trial' => true,
- 'trial_period' => true,
- 'billing_cycle' => true,
- 'expire_in' => false,
+ 'payment_cycle' => true,
+ 'stop_cycle' => true,
+ 'billing_limit' => true,
+ 'trial' => true,
+ 'trial_period' => true,
+ 'billing_cycle' => true,
+ 'expire_in' => false,
],
'stop_cycle' => [
'billing_limit' => true,
@@ -1615,10 +1765,11 @@ public function modify_admin_footer_text() {
* @return string
*/
public function admin_footer_text( $footer_text ) {
- $footer_text = __( 'Thank you for using WP User Frontend .', 'wp-user-frontend' );
+ $footer_text = __( 'Thank you for using WP User Frontend .', 'wp-user-frontend' );
$footer_text .= ' ' . sprintf(
// Translators: %s: link to the classic UI
- __( 'Use the classic UI .', 'wp-user-frontend' ), admin_url( 'edit.php?post_type=wpuf_subscription' )
+ __( 'Use the classic UI .', 'wp-user-frontend' ),
+ admin_url( 'edit.php?post_type=wpuf_subscription' )
);
return $footer_text;
@@ -1638,7 +1789,7 @@ public function set_default_sort_order_for_existing_subscriptions() {
$args = [
'post_type' => 'wpuf_subscription',
'posts_per_page' => -1,
- 'post_status' => ['publish', 'draft', 'private'],
+ 'post_status' => [ 'publish', 'draft', 'private' ],
'meta_query' => [
'relation' => 'OR',
[
diff --git a/includes/Admin/Menu.php b/includes/Admin/Menu.php
index 629286c65..498520e0c 100644
--- a/includes/Admin/Menu.php
+++ b/includes/Admin/Menu.php
@@ -11,13 +11,10 @@ public function __construct() {
add_action( 'admin_menu', [ $this, 'admin_menu' ] );
add_filter( 'parent_file', [ $this, 'fix_parent_menu' ] );
- add_filter( 'submenu_file', [ $this, 'fix_submenu_file' ] );
add_filter( 'script_loader_tag', [ $this , 'add_async_attribute' ], 10, 3 );
}
public function admin_menu() {
- global $_registered_pages;
-
$capability = wpuf_admin_role();
$wpuf_icon = 'data:image/svg+xml;base64,' . base64_encode( '
+
+
+
+
+
+
+
...
+
diff --git a/includes/Api/Subscription.php b/includes/Api/Subscription.php
index dbc9fb2af..d5acd1e19 100644
--- a/includes/Api/Subscription.php
+++ b/includes/Api/Subscription.php
@@ -53,6 +53,11 @@ public function register_routes() {
$this->namespace,
'/' . $this->base . '/(?P\d+)',
[
+ [
+ 'methods' => WP_REST_Server::READABLE,
+ 'callback' => [ $this, 'get_item' ],
+ 'permission_callback' => [ $this, 'permission_check' ],
+ ],
[
'methods' => WP_REST_Server::EDITABLE,
'callback' => [ $this, 'edit_item' ],
@@ -247,6 +252,52 @@ public function get_subscribers_count( $request ) {
);
}
+ /**
+ * Get a single subscription by ID
+ *
+ * @since 4.2.7
+ *
+ * @param WP_REST_Request $request Full details about the request.
+ *
+ * @return WP_REST_Response
+ */
+ public function get_item( $request ) {
+ $subscription_id = ! empty( $request['subscription_id'] ) ? (int) sanitize_text_field( $request['subscription_id'] ) : 0;
+
+ if ( ! $subscription_id ) {
+ return new WP_REST_Response(
+ [
+ 'success' => false,
+ 'message' => __( 'Subscription ID is required', 'wp-user-frontend' ),
+ ]
+ );
+ }
+
+ $args = [
+ 'post_status' => 'any',
+ 'posts_per_page' => 1,
+ 'p' => $subscription_id,
+ ];
+
+ $subscriptions = wpuf()->subscription->get_subscriptions( $args );
+
+ if ( ! is_array( $subscriptions ) || empty( $subscriptions ) ) {
+ return new WP_REST_Response(
+ [
+ 'success' => false,
+ 'message' => __( 'Subscription not found', 'wp-user-frontend' ),
+ ]
+ );
+ }
+
+ return new WP_REST_Response(
+ [
+ 'success' => true,
+ 'subscription' => $subscriptions[0],
+ ]
+ );
+ }
+
/**
* Retrieves a collection of posts.
*
diff --git a/package.json b/package.json
index d879d89f4..2c28150b8 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
"release": "grunt release",
"build": "npm run build:forms-list && npm run build:subscriptions && npm run build:frontend-subscriptions && npm run build:ai-form-builder && npm run build:account && npm run build:user-directory && npm run build:css",
"build:forms-list": "ENTRY=forms-list vite build",
- "build:subscriptions": "ENTRY=subscriptions vite build",
+ "build:subscriptions": "wp-scripts build",
+ "watch:subscriptions": "wp-scripts start",
"build:frontend-subscriptions": "ENTRY=frontend-subscriptions vite build",
"build:ai-form-builder": "ENTRY=ai-form-builder vite build",
"build:user-directory": "cd modules/user-directory && npm ci && npm run build",
@@ -21,8 +22,8 @@
"@tailwindcss/forms": "0.5.7",
"@types/node": "^18.11.18",
"@vitejs/plugin-vue": "^5.0.4",
+ "@wordpress/scripts": "^27.0.0",
"autoprefixer": "^10.4.16",
- "daisyui": "^4.12.2",
"grunt": "^1.5.3",
"grunt-contrib-clean": "~1.0.0",
"grunt-contrib-compress": "~1.3.0",
@@ -44,21 +45,34 @@
"postcss": "^8.4.31",
"prettier": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.5.11",
- "tailwindcss": "^3.3.5",
+ "tailwindcss-scoped-preflight": "^3.4.12",
"vitawind": "^2.3.0",
- "vite": "^5.1.4",
- "tailwindcss-scoped-preflight": "^3.4.12"
+ "vite": "^5.1.4"
},
"dependencies": {
+ "@headlessui/react": "^1.7.18",
"@headlessui/vue": "^1.7.23",
+ "@heroicons/react": "^2.1.1",
"@heroicons/vue": "^2.1.1",
"@vueform/multiselect": "^2.6.8",
"@vuepic/vue-datepicker": "^8.2.0",
"@wordpress/api-fetch": "^6.49.0",
+ "@wordpress/compose": "^6.0.0",
+ "@wordpress/data": "^9.0.0",
+ "@wordpress/element": "^5.0.0",
"@wordpress/i18n": "^4.52.0",
+ "@wordpress/icons": "^11.6.0",
+ "@wordpress/router": "^1.37.0",
+ "array-uniq": "^3.0.0",
"cli": "^1.0.1",
+ "clsx": "^2.1.0",
+ "daisyui": "^5.5.18",
"epic-spinners": "^2.0.0",
"pinia": "^2.1.7",
+ "react": "^18.2.0",
+ "react-datepicker": "^6.0.0",
+ "react-dom": "^18.2.0",
+ "react-select": "^5.8.0",
"vue": "^3.4.19",
"vue-router": "^4.3.2"
}
diff --git a/postcss.config.react.js b/postcss.config.react.js
new file mode 100644
index 000000000..fef1b2256
--- /dev/null
+++ b/postcss.config.react.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/src/css/frontend/account.css b/src/css/frontend/account.css
index 40cbc944c..d6929bda5 100644
--- a/src/css/frontend/account.css
+++ b/src/css/frontend/account.css
@@ -35,12 +35,12 @@
}
.wpuf-edit-profile-btn {
- @apply wpuf-inline-flex wpuf-items-center wpuf-justify-center wpuf-gap-[10px] wpuf-bg-[#111827] wpuf-text-white wpuf-px-6 wpuf-py-[10px] wpuf-rounded-lg wpuf-transition-colors wpuf-font-normal wpuf-text-base wpuf-leading-6 wpuf-tracking-[0.13px] wpuf-no-underline wpuf-w-[166px] wpuf-h-[44px];
+ @apply wpuf-inline-flex wpuf-items-center wpuf-justify-center wpuf-gap-[10px] wpuf-bg-[#99A7B2] wpuf-text-white wpuf-px-6 wpuf-py-[10px] wpuf-rounded-lg wpuf-transition-colors wpuf-font-normal wpuf-text-base wpuf-leading-6 wpuf-tracking-[0.13px] wpuf-no-underline wpuf-w-[166px] wpuf-h-[44px];
text-shadow: unset!important;
}
.wpuf-edit-profile-btn:hover {
- background-color: #06090e !important;
+ background-color: #7F8C96 !important;
}
/* Navigation Styles */
@@ -53,7 +53,7 @@
}
.wpuf-account-nav-item {
- @apply wpuf-flex wpuf-items-center wpuf-gap-3 wpuf-px-4 wpuf-py-3 wpuf-text-[#374151] wpuf-rounded-md hover:wpuf-bg-[#E1E6EA] wpuf-transition-colors wpuf-no-underline wpuf-text-base wpuf-leading-none focus:wpuf-outline-none;
+ @apply wpuf-flex wpuf-items-center wpuf-gap-3 wpuf-px-4 wpuf-py-3 wpuf-text-[#2C3A41] wpuf-rounded-md hover:wpuf-bg-[#E1E6EA] wpuf-transition-colors wpuf-no-underline wpuf-text-base wpuf-leading-none focus:wpuf-outline-none;
}
.wpuf-account-nav-item svg {
@@ -65,12 +65,11 @@
}
.wpuf-account-nav-item.active {
- @apply wpuf-flex wpuf-items-center wpuf-gap-[10px] wpuf-px-4 wpuf-py-3 !wpuf-bg-[#F3F4F6] !wpuf-text-gray-900 wpuf-rounded-lg wpuf-transition-colors wpuf-no-underline wpuf-text-base wpuf-leading-none focus:wpuf-outline-none wpuf-w-[260px] wpuf-h-[48px];
+ @apply wpuf-flex wpuf-items-center wpuf-gap-[10px] wpuf-px-4 wpuf-py-3 !wpuf-bg-[#E1E6EA] !wpuf-text-gray-800 wpuf-rounded-lg wpuf-transition-colors wpuf-no-underline wpuf-text-base wpuf-leading-none focus:wpuf-outline-none wpuf-w-[260px] wpuf-h-[48px];
}
.wpuf-account-nav-item:hover {
- background-color: #F3F4F6 !important;
- color: #06090e !important;
+ color: #99A7B2 !important;
}
/* Logout Section */
@@ -464,7 +463,7 @@
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
border: none !important;
- background-color: #111827 !important;
+ background-color: #99A7B2 !important;
color: rgb(255, 255, 255) !important;
text-shadow: unset !important;
}
diff --git a/src/css/subscriptions.css b/src/css/subscriptions.css
new file mode 100644
index 000000000..ba9e9ffbd
--- /dev/null
+++ b/src/css/subscriptions.css
@@ -0,0 +1,50 @@
+/* DESCRIPTION: Subscriptions React page styles with Tailwind CSS v3 */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Tooltip styles — DaisyUI's .tooltip class doesn't work with the wpuf- prefix,
+ so we define .wpuf-tooltip manually using data-tip + ::before pseudo-element. */
+.wpuf-tooltip {
+ position: relative;
+ display: inline-flex;
+}
+
+.wpuf-tooltip[data-tip]::before {
+ content: attr(data-tip);
+ position: absolute;
+ bottom: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%);
+ white-space: normal;
+ max-width: 20rem;
+ width: max-content;
+ padding: 0.375rem 0.625rem;
+ font-size: 0.75rem;
+ line-height: 1.25;
+ border-radius: 0.375rem;
+ opacity: 0;
+ pointer-events: none;
+ z-index: 50;
+ transition: opacity 0.2s ease-in-out;
+}
+
+.wpuf-tooltip[data-tip]::after {
+ content: "";
+ position: absolute;
+ bottom: calc(100% + 0.125rem);
+ left: 50%;
+ transform: translateX(-50%);
+ border-width: 0.375rem;
+ border-style: solid;
+ border-color: transparent;
+ opacity: 0;
+ pointer-events: none;
+ z-index: 50;
+ transition: opacity 0.2s ease-in-out;
+}
+
+.wpuf-tooltip[data-tip]:hover::before,
+.wpuf-tooltip[data-tip]:hover::after {
+ opacity: 1;
+}
diff --git a/src/js/api/subscription.js b/src/js/api/subscription.js
new file mode 100644
index 000000000..9708e0419
--- /dev/null
+++ b/src/js/api/subscription.js
@@ -0,0 +1,122 @@
+/**
+ * Subscriptions API
+ * Centralizes all apiFetch calls for the subscriptions module
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+const NAMESPACE = '/wpuf/v1';
+const ENDPOINT = `${NAMESPACE}/wpuf_subscription`;
+
+/**
+ * Fetch subscriptions list
+ *
+ * @param {Object} params - Query parameters (status, offset, per_page)
+ * @return {Promise} API response
+ */
+export const fetchSubscriptions = async (params = {}) => {
+ return apiFetch({
+ path: addQueryArgs(ENDPOINT, params),
+ method: 'GET',
+ });
+};
+
+/**
+ * Fetch single subscription
+ *
+ * @param {number} id - Subscription ID
+ * @return {Promise} API response
+ */
+export const fetchSubscription = async (id) => {
+ return apiFetch({
+ path: `${ENDPOINT}/${id}`,
+ method: 'GET',
+ });
+};
+
+/**
+ * Fetch subscription counts
+ *
+ * @param {string} status - Optional status filter
+ * @return {Promise} API response
+ */
+export const fetchSubscriptionCounts = async (status = 'all') => {
+ let path = `${ENDPOINT}/count`;
+ if (status && status !== 'all') {
+ path += `/${status}`;
+ }
+ return apiFetch({
+ path,
+ method: 'GET',
+ });
+};
+
+/**
+ * Create or Update subscription
+ *
+ * @param {Object} data - Subscription data
+ * @return {Promise} API response
+ */
+export const updateSubscription = async (data) => {
+ let path = ENDPOINT;
+ if (data.ID) {
+ path += `/${data.ID}`;
+ }
+ return apiFetch({
+ path,
+ method: 'POST',
+ data: { subscription: data },
+ });
+};
+
+/**
+ * Delete subscription
+ *
+ * @param {number} id - Subscription ID
+ * @return {Promise} API response
+ */
+export const deleteSubscription = async (id) => {
+ return apiFetch({
+ path: `${ENDPOINT}/${id}`,
+ method: 'DELETE',
+ });
+};
+
+/**
+ * Fetch subscribers for a subscription
+ *
+ * @param {number} subscriptionId - Subscription ID
+ * @return {Promise} API response
+ */
+export const fetchSubscribers = async (subscriptionId) => {
+ return apiFetch({
+ path: addQueryArgs(`${ENDPOINT}/subscribers`, { subscription_id: subscriptionId }),
+ method: 'GET',
+ });
+};
+
+/**
+ * Fetch subscription settings
+ *
+ * @return {Promise} API response
+ */
+export const fetchSubscriptionSettings = async () => {
+ return apiFetch({
+ path: `${NAMESPACE}/subscription-settings`,
+ method: 'GET',
+ });
+};
+
+/**
+ * Save subscription settings
+ *
+ * @param {Object} settings - Settings data
+ * @return {Promise} API response
+ */
+export const saveSubscriptionSettings = async (settings) => {
+ return apiFetch({
+ path: `${NAMESPACE}/subscription-settings`,
+ method: 'POST',
+ data: settings,
+ });
+};
diff --git a/src/js/components/Header.jsx b/src/js/components/Header.jsx
new file mode 100644
index 000000000..9b420980c
--- /dev/null
+++ b/src/js/components/Header.jsx
@@ -0,0 +1,60 @@
+/**
+ * DESCRIPTION: Header component for WP User Frontend admin pages
+ * DESCRIPTION: Displays logo, version, upgrade link, and support links
+ */
+import { __ } from '@wordpress/i18n';
+
+const Header = ( { utm = 'wpuf-header' } ) => {
+ const wpuf = window.wpuf_admin_script;
+ const logoUrl = wpuf.asset_url + '/images/wpuf-icon-circle.svg';
+ const upgradeUrl = wpuf.upgradeUrl + '?utm_source=' + utm + '&utm_medium=wpuf-header';
+ const supportUrl = wpuf.support_url;
+
+ return (
+
+ );
+};
+
+export default Header;
diff --git a/src/js/components/subscriptions/ContentHeader.jsx b/src/js/components/subscriptions/ContentHeader.jsx
new file mode 100644
index 000000000..57b0137af
--- /dev/null
+++ b/src/js/components/subscriptions/ContentHeader.jsx
@@ -0,0 +1,38 @@
+/**
+ * DESCRIPTION: ContentHeader component for Subscriptions page
+ * DESCRIPTION: Displays title and "Add Subscription" button
+ */
+import { __ } from '@wordpress/i18n';
+
+const ContentHeader = ( { currentSubscriptionStatus = 'all', allCount = {}, onAddSubscription } ) => {
+ const shouldShowButton = ! (
+ currentSubscriptionStatus === 'trash'
+ );
+
+ return (
+
+
+ { __( 'Subscriptions', 'wp-user-frontend' ) }
+
+
+
+ { shouldShowButton && onAddSubscription && (
+
+
+
+
+
+ { __( 'Add Subscription', 'wp-user-frontend' ) }
+
+ ) }
+
+
+
+ { currentSubscriptionStatus === 'all' && (
+
+
+ ) }
+ { currentSubscriptionStatus === 'all' && (
+
+ { __( 'No Subscription created yet!', 'wp-user-frontend' ) }
+
+ ) }
+
+ { message }
+
+ { currentSubscriptionStatus === 'all' && onAddSubscription && (
+
+
+
+
+ ) }
+
+
{ getStatusTitle( message?.status || 'all' ) }
+ { message?.text || __( 'Explore and manage all subscriptions in one place', 'wp-user-frontend' ) }
+
+ );
+};
+
+export default ListHeader;
diff --git a/src/js/components/subscriptions/LoadingSpinner.jsx b/src/js/components/subscriptions/LoadingSpinner.jsx
new file mode 100644
index 000000000..4f6c6f162
--- /dev/null
+++ b/src/js/components/subscriptions/LoadingSpinner.jsx
@@ -0,0 +1,19 @@
+/**
+ * DESCRIPTION: Loading spinner component for async operations
+ * DESCRIPTION: Displays centered spinning loader for subscription data fetching
+ */
+
+/**
+ * Loading spinner component
+ *
+ * @return {JSX.Element} Loading spinner element
+ */
+const LoadingSpinner = () => {
+ return (
+
+ );
+};
+
+export default LoadingSpinner;
diff --git a/src/js/components/subscriptions/MultiSelect.jsx b/src/js/components/subscriptions/MultiSelect.jsx
new file mode 100644
index 000000000..78345c323
--- /dev/null
+++ b/src/js/components/subscriptions/MultiSelect.jsx
@@ -0,0 +1,252 @@
+/**
+ * DESCRIPTION: MultiSelect dropdown component with search, pills, and drag-to-reorder.
+ * DESCRIPTION: Adapted from wpuf-pro user-directory module for subscription taxonomy fields.
+ */
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const MultiSelect = ( { options, value, onChange, placeholder, sortable = false, searchable = true, selectedLabel = 'items', exclusiveOptions = [ 'all' ], disabled = false } ) => {
+ const [ isOpen, setIsOpen ] = useState( false );
+ const [ dragIndex, setDragIndex ] = useState( null );
+ const [ searchTerm, setSearchTerm ] = useState( '' );
+ const dropdownRef = useRef( null );
+ const searchInputRef = useRef( null );
+
+ // Helper function to get display text from option value
+ const getOptionDisplayText = ( key ) => {
+ const option = options[ key ];
+ if ( typeof option === 'string' ) {
+ return option;
+ }
+ if ( option && typeof option === 'object' && option.label ) {
+ return option.label;
+ }
+ return key;
+ };
+
+ // Close dropdown on outside click
+ useEffect( () => {
+ const handleClick = ( e ) => {
+ if ( dropdownRef.current && ! dropdownRef.current.contains( e.target ) ) {
+ setIsOpen( false );
+ setSearchTerm( '' );
+ }
+ };
+ document.addEventListener( 'mousedown', handleClick );
+ return () => document.removeEventListener( 'mousedown', handleClick );
+ }, [] );
+
+ // Focus search input when dropdown opens
+ useEffect( () => {
+ if ( isOpen && searchable && searchInputRef.current ) {
+ setTimeout( () => {
+ searchInputRef.current?.focus();
+ }, 100 );
+ }
+ }, [ isOpen, searchable ] );
+
+ // Handle select/deselect with exclusive options logic
+ const handleSelect = ( key ) => {
+ if ( disabled ) {
+ return;
+ }
+
+ // Check if the selected key is an exclusive option
+ if ( exclusiveOptions.includes( key ) ) {
+ onChange( [ key ] );
+ setIsOpen( false );
+ setSearchTerm( '' );
+ return;
+ }
+ // Remove all exclusive options when selecting a non-exclusive option
+ let newValue = value.filter( ( k ) => ! exclusiveOptions.includes( k ) );
+ if ( ! newValue.includes( key ) ) {
+ newValue = [ ...newValue, key ];
+ }
+ onChange( newValue );
+ setIsOpen( false );
+ setSearchTerm( '' );
+ };
+
+ const handleRemove = ( key ) => {
+ if ( disabled ) {
+ return;
+ }
+
+ // If removing an exclusive option, clear all selections
+ if ( exclusiveOptions.includes( key ) ) {
+ onChange( [] );
+ } else {
+ const newValue = value.filter( ( k ) => k !== key );
+ onChange( newValue );
+ }
+ };
+
+ // Drag and drop handlers (only if sortable)
+ const handleDragStart = ( index ) => sortable && setDragIndex( index );
+ const handleDragOver = ( index ) => {
+ if ( ! sortable || dragIndex === null || dragIndex === index ) {
+ return;
+ }
+ const newValue = [ ...value ];
+ const [ removed ] = newValue.splice( dragIndex, 1 );
+ newValue.splice( index, 0, removed );
+ setDragIndex( index );
+ onChange( newValue );
+ };
+ const handleDragEnd = () => sortable && setDragIndex( null );
+
+ // Filter options based on search term and already selected values
+ const getFilteredOptions = () => {
+ let filtered = Object.keys( options ).filter( ( key ) => ! value.includes( key ) );
+
+ if ( searchable && searchTerm.trim() ) {
+ const searchLower = searchTerm.toLowerCase();
+ filtered = filtered.filter( ( key ) => {
+ const displayText = getOptionDisplayText( key );
+ return displayText.toLowerCase().includes( searchLower );
+ } );
+ }
+
+ return filtered;
+ };
+
+ const availableOptions = getFilteredOptions();
+
+ // Get display text for selected values
+ const getDisplayText = () => {
+ if ( value.length === 0 ) {
+ return placeholder;
+ }
+ // Show count if more than 3 items selected
+ if ( value.length > 3 ) {
+ return `${ value.length } ${ selectedLabel } ${ __( 'selected', 'wp-user-frontend' ) }`;
+ }
+ // Show first 3 items if 3 or fewer selected
+ return value.slice( 0, 3 ).map( ( k ) => getOptionDisplayText( k ) ).join( ', ' );
+ };
+
+ // Handle search input change
+ const handleSearchChange = ( e ) => {
+ setSearchTerm( e.target.value );
+ };
+
+ // Handle search input keydown
+ const handleSearchKeyDown = ( e ) => {
+ if ( e.key === 'Escape' ) {
+ setIsOpen( false );
+ setSearchTerm( '' );
+ } else if ( e.key === 'Enter' && availableOptions.length > 0 ) {
+ handleSelect( availableOptions[ 0 ] );
+ }
+ };
+
+ return (
+
+
setIsOpen( ( open ) => ! open ) }
+ >
+
+ { getDisplayText() }
+
+
+
+
+ { isOpen && (
+
+ ) }
+ {/* Pills for selected items */}
+ { value.length > 0 && (
+
+ { value.map( ( key, idx ) => (
+
handleDragStart( idx ) : undefined }
+ onDragOver={ sortable ? ( e ) => {
+ e.preventDefault();
+ handleDragOver( idx );
+ } : undefined }
+ onDragEnd={ sortable ? handleDragEnd : undefined }
+ tabIndex={ 0 }
+ aria-label={ sortable ? __( 'Drag to reorder', 'wp-user-frontend' ) : undefined }
+ >
+
+ { getOptionDisplayText( key ) }
+
+ { ! disabled && (
+ handleRemove( key ) }
+ >
+ ×
+
+ ) }
+
+ ) ) }
+
+ ) }
+
+
+
+
+ Showing
+ { startNumber }
+ to
+ { endNumber }
+ of
+ { count }
+ results
+
+
+ { count > perPage && (
+
+
+ Previous
+
+
+
+ { pages.map( ( page ) => (
+ goToPage( page.name ) }
+ className={ `wpuf-relative wpuf-items-center wpuf-px-4 wpuf-py-2 wpuf-text-sm wpuf-font-semibold wpuf-text-gray-900 wpuf-ring-1 wpuf-ring-inset wpuf-ring-gray-300 hover:wpuf-bg-gray-50 focus:wpuf-z-20 focus:outline-offset-0 wpuf-inline-flex ${ currentPg === page.name ? 'wpuf-bg-primary wpuf-text-white hover:wpuf-bg-primaryHover' : '' }` }
+ >
+ { page.name }
+
+ ) ) }
+
+ Next
+
+
+
+
+ ) }
+
+
+
+
+ {__('Subscription Preferences', 'wp-user-frontend')}
+
+
+ {__('Configure subscription appearance preferences', 'wp-user-frontend')}
+
+
+
+
+
+ {/* Button Appearance Section */}
+
+
+ {__('Color Settings', 'wp-user-frontend')}
+
+
+
+
+
+ {__('Button Color', 'wp-user-frontend')}
+
+
+
+
+
+
+
+
+
+ {
+ if (buttonColor) {
+ e.target.style.filter = 'brightness(0.9)';
+ }
+ }}
+ onMouseOut={(e) => {
+ if (buttonColor) {
+ e.target.style.filter = 'brightness(1)';
+ }
+ }}
+ className="wpuf-subscription-buy-btn wpuf-block wpuf-w-full wpuf-rounded-md wpuf-px-3 wpuf-py-2 wpuf-text-center wpuf-text-sm wpuf-font-semibold wpuf-text-white wpuf-shadow-sm wpuf-ring-0 wpuf-transition-all wpuf-duration-200 wpuf-leading-6"
+ >
+ {__('Buy Now', 'wp-user-frontend')}
+
+
+
+
+ {__('Leave empty to use the default primary color from your Tailwind configuration.', 'wp-user-frontend')}
+
+
+
+
+ {/* Save Button */}
+
+
+ {isSaving ? __('Saving...', 'wp-user-frontend') : __('Save Preferences', 'wp-user-frontend')}
+
+
+
+
+
+ { __( 'Pro', 'wp-user-frontend' ) }
+
+ );
+};
+
+export default ProBadge;
diff --git a/src/js/components/subscriptions/ProTooltip.jsx b/src/js/components/subscriptions/ProTooltip.jsx
new file mode 100644
index 000000000..ef12cda3a
--- /dev/null
+++ b/src/js/components/subscriptions/ProTooltip.jsx
@@ -0,0 +1,40 @@
+/**
+ * DESCRIPTION: ProTooltip component for upgrade prompts
+ * DESCRIPTION: Shows tooltip with upgrade link on hover for Pro features
+ */
+import { __ } from '@wordpress/i18n';
+
+const ProTooltip = ( { isPro = true } ) => {
+ const wpufSubscriptions = window.wpufSubscriptions || {};
+
+ // Don't show tooltip if Pro is active or if not a Pro feature
+ if ( ! isPro || wpufSubscriptions.isProActive ) {
+ return null;
+ }
+
+ return (
+
+ );
+};
+
+export default ProTooltip;
diff --git a/src/js/components/subscriptions/QuickEdit.jsx b/src/js/components/subscriptions/QuickEdit.jsx
new file mode 100644
index 000000000..66ebc8d64
--- /dev/null
+++ b/src/js/components/subscriptions/QuickEdit.jsx
@@ -0,0 +1,223 @@
+/**
+ * DESCRIPTION: Quick Edit modal for subscription plan name and date
+ * DESCRIPTION: Allows quick editing without leaving the list view
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect, useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { ExclamationCircleIcon } from '@heroicons/react/20/solid';
+import UpdateButton from './UpdateButton';
+
+const QuickEdit = () => {
+ const [ title, setTitle ] = useState( '' );
+ const [ date, setDate ] = useState( '' );
+
+ // Get data from stores
+ const isQuickEdit = useSelect( ( select ) => select( 'wpuf/subscriptions-quick-edit' ).isQuickEdit(), [] );
+ const { item, errors, isUpdating, updateError } = useSelect( ( select ) => {
+ const store = select( 'wpuf/subscriptions' );
+ return {
+ item: store.getItem(),
+ errors: store.getErrors() || {},
+ isUpdating: store.isUpdating(),
+ updateError: store.getUpdateError(),
+ };
+ }, [] );
+
+ const { setItem, setError, resetErrors, updateItem } = useDispatch( 'wpuf/subscriptions' );
+ const { setQuickEditStatus } = useDispatch( 'wpuf/subscriptions-quick-edit' );
+ const { addNotice } = useDispatch( 'wpuf/subscriptions-notice' );
+
+ // Initialize form data when item changes
+ useEffect( () => {
+ if ( item ) {
+ setTitle( item.post_title || '' );
+ setDate( item.post_date || '' );
+ }
+ }, [ item ] );
+
+ // Format date for datetime-local input (YYYY-MM-DDTHH:mm)
+ const formatDateTimeForInput = useCallback( ( dateStr ) => {
+ if ( ! dateStr ) return '';
+ const date = new Date( dateStr );
+ const year = date.getFullYear();
+ const month = String( date.getMonth() + 1 ).padStart( 2, '0' );
+ const day = String( date.getDate() ).padStart( 2, '0' );
+ const hours = String( date.getHours() ).padStart( 2, '0' );
+ const minutes = String( date.getMinutes() ).padStart( 2, '0' );
+ return `${ year }-${ month }-${ day }T${ hours }:${ minutes }`;
+ }, [] );
+
+ // Format date for API (YYYY-MM-DD HH:mm:ss)
+ const formatDateTimeForAPI = useCallback( ( dateStr ) => {
+ if ( ! dateStr ) return '';
+ const date = new Date( dateStr );
+ const year = date.getFullYear();
+ const month = String( date.getMonth() + 1 ).padStart( 2, '0' );
+ const day = String( date.getDate() ).padStart( 2, '0' );
+ const hours = String( date.getHours() ).padStart( 2, '0' );
+ const minutes = String( date.getMinutes() ).padStart( 2, '0' );
+ const seconds = String( date.getSeconds() ).padStart( 2, '0' );
+ return `${ year }-${ month }-${ day } ${ hours }:${ minutes }:${ seconds }`;
+ }, [] );
+
+ // Common update function with status
+ const updateWithStatus = useCallback( ( newStatus ) => {
+ resetErrors();
+
+ // Validate plan name
+ if ( ! title || title.trim() === '' ) {
+ setError( 'planName', __( 'This field is required', 'wp-user-frontend' ) );
+ return;
+ }
+
+ if ( title.includes( '#' ) ) {
+ setError( 'planName', __( '# is not supported in plan name', 'wp-user-frontend' ) );
+ return;
+ }
+
+ // Update the item with new values
+ const updatedItem = {
+ ...item,
+ post_title: title,
+ post_date: formatDateTimeForAPI( date ),
+ post_status: newStatus,
+ };
+
+ setItem( updatedItem );
+
+ // Call updateItem action
+ updateItem().then( ( result ) => {
+ if ( result.success ) {
+ addNotice( {
+ content: result.message || __( 'Subscription updated successfully', 'wp-user-frontend' ),
+ type: 'success',
+ } );
+ setQuickEditStatus( false );
+ // Refresh the list after a short delay
+ setTimeout( () => {
+ window.location.reload();
+ }, 1000 );
+ } else {
+ setError( 'fetch', result.message || __( 'An error occurred while updating', 'wp-user-frontend' ) );
+ }
+ } );
+ }, [ item, title, date, setItem, setError, resetErrors, updateItem, setQuickEditStatus, addNotice, formatDateTimeForAPI ] );
+
+ // Handle publish
+ const handlePublish = useCallback( () => {
+ updateWithStatus( 'publish' );
+ }, [ updateWithStatus ] );
+
+ // Handle save as draft
+ const handleSaveDraft = useCallback( () => {
+ updateWithStatus( 'draft' );
+ }, [ updateWithStatus ] );
+
+ // Handle cancel
+ const handleCancel = useCallback( () => {
+ setQuickEditStatus( false );
+ resetErrors();
+ }, [ setQuickEditStatus, resetErrors ] );
+
+ if ( ! isQuickEdit ) {
+ return null;
+ }
+
+ return (
+ <>
+ {/* Backdrop */}
+
+
+ {/* Modal */}
+
+
+ {/* Plan Name Field */}
+
+
+ { __( 'Plan name', 'wp-user-frontend' ) }
+
+
+
setTitle( e.target.value ) }
+ className={ `wpuf-w-full wpuf-rounded-md wpuf-bg-white wpuf-py-1.5 wpuf-pl-3 wpuf-pr-10 wpuf-shadow-sm focus:wpuf-outline-none focus:wpuf-ring-1 sm:wpuf-text-sm ${
+ errors?.planName
+ ? '!wpuf-border-red-500 wpuf-ring-red-300 placeholder:wpuf-text-red-300 !wpuf-text-red-900 focus:wpuf-ring-red-500 wpuf-border-2'
+ : 'wpuf-ring-gray-300 focus:wpuf-ring-blue-500 wpuf-border-gray-300'
+ }` }
+ aria-invalid={ errors?.planName ? 'true' : 'false' }
+ />
+ { errors?.planName && (
+
+
+ ) }
+
+ { errors?.planName && (
+
+ { errors?.planName?.message }
+
+ ) }
+
+
+ {/* Date Field */}
+
+
+ { __( 'Date', 'wp-user-frontend' ) }
+
+
+
+ { errors?.date && (
+
+ { __( 'Not a valid date', 'wp-user-frontend' ) }
+
+ ) }
+
+
+ {/* Update Error */}
+ { updateError && updateError.status && (
+
+
{ updateError.message }
+
+ ) }
+
+ {/* Actions */}
+
+
+ { __( 'Cancel', 'wp-user-frontend' ) }
+
+
+
+
+
+
+ { statusItems.map( ( item ) => {
+ const count = allCount[ item.key ] || 0;
+ const isActive = currentSubscriptionStatus === item.key;
+
+ return (
+ onStatusClick && onStatusClick( item.key ) }
+ className={
+ 'wpuf-justify-between wpuf-text-gray-700 hover:wpuf-text-primary hover:wpuf-bg-gray-50 group wpuf-flex wpuf-gap-x-3 wpuf-rounded-md wpuf-py-2 wpuf-px-[20px] wpuf-text-sm wpuf-leading-6 hover:wpuf-cursor-pointer' +
+ ( isActive ? ' wpuf-bg-gray-50 wpuf-text-primary' : '' )
+ }
+ >
+ { item.label }
+ { count > 0 && (
+
+ { count }
+
+ ) }
+
+ );
+ } ) }
+
+
+
+
+
+
+ {subscription.post_title}
+ {isPasswordProtected && (
+
+
+ )}
+
+
+
+
+
+ {/* Quick Menu Button */}
+
+
+
+ {/* Status Pill and Recurring Icon */}
+
+
+ {postStatus}
+
+ {isRecurringSub && (
+
+
+ )}
+
+
+ {/* Subscribers Count */}
+
+
{__('Total Subscribers', 'wp-user-frontend')}
+
{subscribers}
+
+
+ {/* Extension slot: Pro and third-party plugins can add content to card footer */}
+
+
setShowTrashModal(false)}
+ className="wpuf-delete-modal"
+ >
+
+
+ {subscription.post_status === 'trash'
+ ? __('Are you sure you want to permanently delete this subscription? This action cannot be undone.', 'wp-user-frontend')
+ : __('Are you sure you want to move this subscription to trash?', 'wp-user-frontend')}
+
+
+
+ setShowTrashModal(false)}
+ className="wpuf-mr-2"
+ >
+ {__('Cancel', 'wp-user-frontend')}
+
+
+ {subscription.post_status === 'trash' ? __('Delete', 'wp-user-frontend') : __('Trash', 'wp-user-frontend')}
+
+
+
+
+ )}
+
+ );
+};
+
+export default SubscriptionBox;
diff --git a/src/js/components/subscriptions/SubscriptionDetails.jsx b/src/js/components/subscriptions/SubscriptionDetails.jsx
new file mode 100644
index 000000000..1c5b85062
--- /dev/null
+++ b/src/js/components/subscriptions/SubscriptionDetails.jsx
@@ -0,0 +1,123 @@
+/**
+ * DESCRIPTION: SubscriptionDetails component with tab navigation
+ * DESCRIPTION: Renders tabbed interface for subscription sections
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import SubscriptionSubsection from './SubscriptionSubsection';
+import { SubscriptionTabContent } from '../../slots';
+
+const SubscriptionDetails = ( { subscription, onFieldChange, currentTab: externalCurrentTab, onTabChange: externalOnTabChange } ) => {
+ const wpufSubscriptions = window.wpufSubscriptions || {};
+ const sections = wpufSubscriptions.sections || [];
+ const subSections = wpufSubscriptions.subSections || {};
+ const fields = wpufSubscriptions.fields || {};
+ const dependentFields = wpufSubscriptions.dependentFields || {};
+
+ // Use internal state if no external control provided
+ const [ internalCurrentTab, setInternalCurrentTab ] = useState( 'subscription_details' );
+
+ const currentTab = externalCurrentTab !== undefined ? externalCurrentTab : internalCurrentTab;
+ const setCurrentTab = externalOnTabChange !== undefined ? externalOnTabChange : setInternalCurrentTab;
+
+ const dispatch = useDispatch( 'wpuf/subscriptions-field-dependency' );
+
+ // Initialize dependent fields in store and calculate initial visibility
+ useEffect( () => {
+ if ( ! dependentFields || ! dispatch ) {
+ return;
+ }
+
+ dispatch.addDependentFields( dependentFields );
+
+ // Build initial modifier statuses from the subscription data and field definitions
+ const allFields = wpufSubscriptions.fields || {};
+ const initialStatuses = {};
+
+ for ( const modifierKey in dependentFields ) {
+ // Find the field definition for this modifier key across all sections/subsections
+ let fieldDef = null;
+
+ for ( const sectionId in allFields ) {
+ for ( const subSectionId in allFields[ sectionId ] ) {
+ if ( allFields[ sectionId ][ subSectionId ]?.[ modifierKey ] ) {
+ fieldDef = allFields[ sectionId ][ subSectionId ][ modifierKey ];
+ break;
+ }
+ }
+ if ( fieldDef ) {
+ break;
+ }
+ }
+
+ if ( ! fieldDef ) {
+ initialStatuses[ modifierKey ] = false;
+ continue;
+ }
+
+ // Read the current value from the subscription
+ let rawValue = fieldDef.default || '';
+
+ if ( subscription ) {
+ if ( fieldDef.db_type === 'meta' ) {
+ rawValue = subscription.meta_value?.[ fieldDef.db_key ] ?? fieldDef.default ?? '';
+ } else if ( fieldDef.db_type === 'post' ) {
+ rawValue = subscription[ fieldDef.db_key ] ?? fieldDef.default ?? '';
+ }
+ }
+
+ // Convert to boolean the same way SubscriptionField does
+ initialStatuses[ modifierKey ] = rawValue === 'on' || rawValue === 'yes' || rawValue === true;
+ }
+
+ dispatch.initializeFieldVisibility( initialStatuses );
+ }, [ dependentFields, dispatch, subscription ] );
+
+ return (
+ <>
+ {/* Tab Navigation */}
+
+
+ { sections.map( ( section ) => (
+
+ setCurrentTab( section.id ) }
+ className={ `active:wpuf-shadow-none focus:wpuf-shadow-none wpuf-inline-block wpuf-p-4 wpuf-rounded-t-lg hover:wpuf-text-primary hover:wpuf-border-b-2 hover:wpuf-border-primary wpuf-transition-all ${
+ currentTab === section.id
+ ? 'wpuf-border-b-2 wpuf-border-primary wpuf-text-primary'
+ : ''
+ }` }
+ >
+ { section.title }
+
+
+ ) ) }
+
+
+ {/* Label */}
+ { field.label && (
+
+
+ { field.tooltip && (
+
+
+
+
+ ) }
+
+
+
+ ) }
+
+ {/* Field Input */}
+