chore: pro trial ui branding

abose · abose · commit 030b638bbf36 · 2025-09-09T14:11:25.000+05:30
diff --git a/gulpfile.js/translateStrings.js b/gulpfile.js/translateStrings.js
@@ -80,9 +80,16 @@ function aggregateUtilizationMetrics(obj) {
     return globalUtilizationMetrics;
 }
 
+const translationContext =
+`This is a bunch of strings extracted from a JavaScript file used to develop our product with is a text editor.
+Some strings may have HTML or templates(mustache library used).
+The brand name “Phoenix Pro” must remain in English and should never be translated. 
+Please translate these strings accurately.
+`;
+
 function getTranslationrequest(stringsToTranslate, lang) {
     return {
-        translationContext: "This is a bunch of strings extracted from a JavaScript file used to develop our product with is a text editor. Some strings may have HTML or templates(mustache library used). Please translate these strings accurately.",
+        translationContext: translationContext,
         "source": stringsToTranslate,
         "provider": "vertex",
         "sourceContext": {
diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js
@@ -1678,5 +1678,6 @@ define({
     "PROMO_CARD_4_MESSAGE": "Edit headings, buttons, and copy directly in the preview.",
     "PROMO_LEARN_MORE": "Learn More\u2026",
     "PROMO_GET_APP_UPSELL_BUTTON": "Get {0}",
-    "PROMO_PRO_ENDED_TITLE": "Your {0} upgrade has ended"
+    "PROMO_PRO_ENDED_TITLE": "Your {0} upgrade has ended",
+    "PROMO_PRO_TRIAL_DAYS_LEFT": "Phoenix Pro Trial ({0} days left)"
 });
diff --git a/src/services/html/login-popup.html b/src/services/html/login-popup.html
@@ -1,6 +1,14 @@
 <div class="profile-popup">
     <div class="popup-header">
         <h1 class="popup-title">{{Strings.PROFILE_POP_TITLE}}</h1>
+        {{#trialInfo}}
+        <div class="trial-plan-info">
+            <span class="phoenix-pro-title-plain">
+                <span class="pro-plan-name">{{planName}}</span>
+                <i class="fa-solid fa-feather" style="margin-left: 3px;"></i>
+            </span>
+        </div>
+        {{/trialInfo}}
     </div>
     <div class="popup-body">
         <button id="phoenix-signin-btn" class="btn dialog-button primary">
diff --git a/src/services/login-service.js b/src/services/login-service.js
@@ -122,8 +122,57 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     * Get effective entitlements including trial enhancement for UI display
+     * Returns enhanced entitlements that treat trial users as pro users
+     */
+    async function getEffectiveEntitlements(forceRefresh = false) {
+        // Get raw server entitlements
+        const serverEntitlements = await getEntitlements(forceRefresh);
+
+        // Get trial days remaining
+        const trialDaysRemaining = await LoginService.getProTrialDaysRemaining();
+
+        // If no trial is active, return server entitlements as-is
+        if (trialDaysRemaining <= 0) {
+            return serverEntitlements;
+        }
+
+        // User has active trial
+        if (serverEntitlements && serverEntitlements.plan) {
+            // Logged-in user with trial
+            if (serverEntitlements.plan.paidSubscriber) {
+                // Already a paid subscriber, return as-is
+                return serverEntitlements;
+            } else {
+                // Enhance entitlements for trial user
+                return {
+                    ...serverEntitlements,
+                    plan: {
+                        ...serverEntitlements.plan,
+                        paidSubscriber: true,
+                        name: "Phoenix Pro"
+                    },
+                    isInProTrial: true,
+                    trialDaysRemaining: trialDaysRemaining
+                };
+            }
+        } else {
+            // Non-logged-in user with trial - return synthetic entitlements
+            return {
+                plan: {
+                    paidSubscriber: true,
+                    name: "Phoenix Pro"
+                },
+                isInProTrial: true,
+                trialDaysRemaining: trialDaysRemaining
+            };
+        }
+    }
+
     // Add functions to secure exports
     LoginService.getEntitlements = getEntitlements;
+    LoginService.getEffectiveEntitlements = getEffectiveEntitlements;
     LoginService.clearEntitlements = clearEntitlements;
     LoginService.EVENT_ENTITLEMENTS_CHANGED = EVENT_ENTITLEMENTS_CHANGED;
 });
diff --git a/src/services/profile-menu.js b/src/services/profile-menu.js
@@ -3,6 +3,7 @@ define(function (require, exports, module) {
         PopUpManager = require("widgets/PopUpManager"),
         ThemeManager = require("view/ThemeManager"),
         Strings      = require("strings"),
+        StringUtils = require("utils/StringUtils"),
         LoginService = require("./login-service");
 
     const KernalModeTrust = window.KernalModeTrust;
@@ -139,7 +140,7 @@ define(function (require, exports, module) {
     /**
      * Shows the sign-in popup when the user is not logged in
      */
-    function showLoginPopup() {
+    async function showLoginPopup() {
         // If popup is already visible, just close it
         if (isPopupVisible) {
             closePopup();
@@ -149,8 +150,19 @@ define(function (require, exports, module) {
         // create the popup element
         closePopup(); // close any existing popup first
 
+        // Check if non-logged-in user has trial entitlements
+        const effectiveEntitlements = await KernalModeTrust.loginService.getEffectiveEntitlements();
+        let templateData = {Strings};
+
+        if (effectiveEntitlements && effectiveEntitlements.isInProTrial) {
+            // Add trial information to template data
+            const planName = StringUtils.format(Strings.PROMO_PRO_TRIAL_DAYS_LEFT,
+                effectiveEntitlements.trialDaysRemaining);
+            templateData.trialInfo = {planName};
+        }
+
         // Render template with data
-        const renderedTemplate = Mustache.render(loginTemplate, {Strings});
+        const renderedTemplate = Mustache.render(loginTemplate, templateData);
         $popup = $(renderedTemplate);
 
         $("body").append($popup);
@@ -206,12 +218,15 @@ define(function (require, exports, module) {
             };
         }
         if (entitlements && entitlements.plan && entitlements.plan.paidSubscriber) {
-            // Paid subscriber: show plan name with feather icon
-            const planName = entitlements.plan.name || "Phoenix Pro";
+            // Pro user (paid subscriber or trial): show plan name with feather icon
+            let displayName = entitlements.plan.name || "Phoenix Pro";
+            if (entitlements.isInProTrial) {
+                displayName = `Phoenix Pro`; // Just "Phoenix Pro" for branding, not "Phoenix Pro Trial"
+            }
             $brandingLink
                 .attr("href", "https://account.phcode.dev")
                 .addClass("phoenix-pro")
-                .html(`${planName}<i class="fa-solid fa-feather orange-gold" style="margin-left: 3px;"></i>`);
+                .html(`${displayName}<i class="fa-solid fa-feather orange-gold" style="margin-left: 3px;"></i>`);
         } else {
             // Free user: show phcode.io branding
             $brandingLink
@@ -333,17 +348,29 @@ define(function (require, exports, module) {
         // Update plan information
         if (entitlements.plan) {
             const $planName = $popup.find('.user-plan-name');
-            
+
             // Update plan class and content based on paid subscriber status
             $planName.removeClass('user-plan-free user-plan-paid');
-            
+
             if (entitlements.plan.paidSubscriber) {
-                // Use pro styling with feather icon for paid subscribers
-                const proTitle = `<span class="phoenix-pro-title">
-                    <span class="pro-plan-name">${entitlements.plan.name}</span>
-                    <i class="fa-solid fa-feather orange-gold" style="margin-left: 3px;"></i>
-                </span>`;
-                $planName.addClass('user-plan-paid').html(proTitle);
+                // Use pro styling with feather icon for pro users (paid or trial)
+                if (entitlements.isInProTrial) {
+                    // For trial users: separate "Phoenix Pro" with icon from "(X days left)" text
+                    const planName = StringUtils.format(Strings.PROMO_PRO_TRIAL_DAYS_LEFT,
+                        entitlements.trialDaysRemaining);
+                    const proTitle = `<span class="phoenix-pro-title-plain">
+                        <span class="pro-plan-name">${planName}</span>
+                        <i class="fa-solid fa-feather" style="margin-left: 3px;"></i>
+                    </span>`;
+                    $planName.addClass('user-plan-paid').html(proTitle);
+                } else {
+                    // For paid users: regular plan name with icon
+                    const proTitle = `<span class="phoenix-pro-title-plain">
+                        <span class="pro-plan-name">${entitlements.plan.name}</span>
+                        <i class="fa-solid fa-feather" style="margin-left: 3px;"></i>
+                    </span>`;
+                    $planName.addClass('user-plan-paid').html(proTitle);
+                }
             } else {
                 // Use simple text for free users
                 $planName.addClass('user-plan-free').text(entitlements.plan.name);
@@ -412,8 +439,8 @@ define(function (require, exports, module) {
 
         positionPopup();
 
-        // Apply cached entitlements immediately if available (including quota/messages)
-        KernalModeTrust.loginService.getEntitlements(false).then(cachedEntitlements => {
+        // Apply cached effective entitlements immediately if available (including quota/messages)
+        KernalModeTrust.loginService.getEffectiveEntitlements(false).then(cachedEntitlements => {
             if (cachedEntitlements && isPopupVisible) {
                 _updatePopupWithEntitlements(cachedEntitlements);
             }
@@ -462,8 +489,7 @@ define(function (require, exports, module) {
      */
     async function _refreshEntitlementsInBackground() {
         try {
-            // Fetch fresh entitlements from API
-            const freshEntitlements = await KernalModeTrust.loginService.getEntitlements(true); // Force refresh to get latest data
+            const freshEntitlements = await KernalModeTrust.loginService.getEffectiveEntitlements(true);
 
             // Only update popup if it's still visible
             if (isPopupVisible && $popup && freshEntitlements) {
@@ -524,6 +550,23 @@ define(function (require, exports, module) {
         });
     }
 
+    /**
+     * Initialize branding for non-logged-in trial users on startup
+     */
+    async function _initializeBrandingForTrialUsers() {
+        // Only check if user is not logged in
+        if (!KernalModeTrust.loginService.isLoggedIn()) {
+            try {
+                const effectiveEntitlements = await KernalModeTrust.loginService.getEffectiveEntitlements();
+                if (effectiveEntitlements && effectiveEntitlements.isInProTrial) {
+                    _updateBranding(effectiveEntitlements);
+                }
+            } catch (error) {
+                console.error('Failed to initialize branding for trial users:', error);
+            }
+        }
+    }
+
     function init() {
         const helpButtonID = "user-profile-button";
         $icon = $("<a>")
@@ -537,6 +580,9 @@ define(function (require, exports, module) {
         $icon.on('click', ()=>{
             togglePopup();
         });
+
+        // Initialize branding for non-logged-in trial users
+        _initializeBrandingForTrialUsers();
     }
 
     function setNotLoggedIn() {
@@ -560,11 +606,11 @@ define(function (require, exports, module) {
         }
         _updateProfileIcon(initial, color);
 
-        // Preload entitlements when user logs in
-        KernalModeTrust.loginService.getEntitlements()
+        // Preload effective entitlements when user logs in
+        KernalModeTrust.loginService.getEffectiveEntitlements()
             .then(_updateBranding)
             .catch(error => {
-                console.error('Failed to preload entitlements on login:', error);
+                console.error('Failed to preload effective entitlements on login:', error);
             });
     }
 
diff --git a/src/services/promotions.js b/src/services/promotions.js
@@ -191,17 +191,16 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Check if pro trial is currently activated
+     * Get remaining pro trial days
+     * Returns 0 if no trial or trial expired
      */
-    async function isProTrialActivated() {
+    async function getProTrialDaysRemaining() {
         const trialData = await _getTrialData();
         if (!trialData) {
-            return false;
+            return 0;
         }
 
-        const remainingDays = _calculateRemainingTrialDays(trialData);
-
-        return remainingDays > 0;
+        return _calculateRemainingTrialDays(trialData);
     }
 
     async function activateProTrial() {
@@ -321,7 +320,7 @@ define(function (require, exports, module) {
     }, TRIAL_POLL_MS);
 
     // Add to secure exports
-    LoginService.isProTrialActivated = isProTrialActivated;
+    LoginService.getProTrialDaysRemaining = getProTrialDaysRemaining;
     LoginService.EVENT_PRO_UPGRADE_ON_INSTALL = EVENT_PRO_UPGRADE_ON_INSTALL;
 
     // no public exports to prevent extension tampering
diff --git a/src/styles/brackets_core_ui_variables.less b/src/styles/brackets_core_ui_variables.less
@@ -298,3 +298,6 @@
         #e6a600 75%,   /* darker amber */
         #c99700 100%   /* rich golden brown */
 );
+
+@phoenixPro-brand-light: #cc5500;
+@phoenixPro-brand-dark: #ff8c42;
diff --git a/src/styles/phoenix-pro.less b/src/styles/phoenix-pro.less
@@ -21,6 +21,14 @@
   }
 }
 
+.phoenix-pro-title-plain {
+  color: @phoenixPro-brand-light;
+
+  .dark & {
+    color: @phoenixPro-brand-dark;
+  }
+}
+
 /* Dialog styles with light default + .dark overrides */
 .browser-login-waiting-dialog, .pro-upgrade-dialog{
   /* ---- Layout ---- */

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,14 @@`
`21`	`21`	`}`
`22`	`22`	`}`
`23`	`23`
	`24`	`+.phoenix-pro-title-plain {`
	`25`	`+ color: @phoenixPro-brand-light;`
	`26`	`+`
	`27`	`+ .dark & {`
	`28`	`+ color: @phoenixPro-brand-dark;`
	`29`	`+ }`
	`30`	`+}`
	`31`	`+`
`24`	`32`	`/* Dialog styles with light default + .dark overrides */`
`25`	`33`	`.browser-login-waiting-dialog, .pro-upgrade-dialog{`
`26`	`34`	`/* ---- Layout ---- */`