Add dynamic header title and version for Pro mode

[arifulhoque7]

Introduces computed properties to display 'WP User Frontend Pro' and the Pro version when the isPro prop and Pro activation are true. Falls back to the standard title and version otherwise, improving header context for both free and Pro users. Related PRO PR

Summary by CodeRabbit

• New Features
  • Header now adapts its displayed title and version based on whether the Pro edition is active, giving clearer visibility of product tier.
  • Existing tracking/UTM links and header behaviors remain unchanged.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Header.vue now imports Vue's computed and adds two computed properties, headerTitle and headerVersion, which derive displayed title and version from the wpuf configuration (e.g., wpuf.isProActive and related version fields), replacing previously hardcoded template values.

Changes

Cohort / File(s)	Summary
Header component update assets/js/components/Header.vue	Added computed import from 'vue'; introduced headerTitle and headerVersion computed properties that use wpuf fields (e.g., wpuf.isProActive, version fields); replaced hardcoded title and version in template with these computed bindings.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single-file change, small scope, low logic density
• Check computed conditions for correct property names and template bindings

Suggested labels

needs: dev review

Suggested reviewers

• sapayth

Poem

🐰 I hopped in code to tweak the head,

Titles now change with what wpuf said.
Pro or not, the version sings,
Computed magic flutters in my wings. 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: adding dynamic header title and version that varies based on Pro mode activation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 47b6597 and 1c0611b.

📒 Files selected for processing (1)

• assets/js/components/Header.vue (1 hunks)

🔇 Additional comments (1)

assets/js/components/Header.vue (1)

37-38: Good separation of display logic into computed header bindings

Using headerTitle and headerVersion in the template instead of hardcoded strings/values keeps the markup clean and centralizes the Pro/free display logic in one place. This will make future changes to naming/version rules easier.

[sapayth]

when Pro is active, we need to show WP User Frontend Pro on every pages header

[arifulhoque7]

when Pro is active, we need to show WP User Frontend Pro on every pages header

done @sapayth vai

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

assets/js/components/Header.vue (1)

19-21: Consider internationalizing the Pro title string.

The string 'WP User Frontend Pro' is hard-coded. While brand names often don't require translation, consider wrapping it with __() for consistency with other user-facing strings in the component, or add a comment explaining why it's excluded from i18n.

Apply this diff to internationalize the string:

 const headerTitle = computed(() => {
-    return wpuf.isProActive ? 'WP User Frontend Pro' : 'WP User Frontend';
+    return wpuf.isProActive ? __('WP User Frontend Pro', 'wp-user-frontend') : __('WP User Frontend', 'wp-user-frontend');
 });

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1c0611b and 507e13c.

📒 Files selected for processing (1)

• assets/js/components/Header.vue (2 hunks)

🔇 Additional comments (3)

assets/js/components/Header.vue (3)

3-3: LGTM!

The import of computed from Vue is correct and necessary for the computed properties introduced below.

---

23-25: LGTM! Pro activation check is correctly aligned.

The version logic now correctly checks wpuf.isProActive alongside wpuf.pro_version, which addresses the concern from the previous review about ensuring version and title logic remain consistent. The fallback to wpuf.version provides appropriate default behavior.

---

32-33: LGTM!

The template correctly binds the computed properties using Vue interpolation syntax. The header title and version will now dynamically reflect the Pro status.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Clarify discrepancy between PR description and implementation.

The PR description states the header should display Pro title "when the isPro prop and Pro activation are true," but the implementation only checks wpuf.isProActive without an isPro prop. The component's props definition (lines 5-11) doesn't include isPro.

If relying solely on wpuf.isProActive is intentional, consider updating the PR description to reflect the actual implementation.

🤖 Prompt for AI Agents

assets/js/components/Header.vue lines 19-21: the computed headerTitle only
checks wpuf.isProActive but the PR description mentions an isPro prop that
doesn't exist in the component props (lines 5-11); either add an isPro boolean
prop and include it in the computed (e.g., check both props.isPro and
wpuf.isProActive) or, if the intention is to rely solely on wpuf.isProActive,
update the PR description to remove mention of an isPro prop and clarify that
only wpuf.isProActive controls the Pro title.