chore: add a get pro link in the profile popup

Author: abose

src/nls/root/strings.js

@@ -1679,5 +1679,6 @@ define({
     "PROMO_LEARN_MORE": "Learn More\u2026",
     "PROMO_GET_APP_UPSELL_BUTTON": "Get {0}",
     "PROMO_PRO_ENDED_TITLE": "Your {0} Trial has ended",
-    "PROMO_PRO_TRIAL_DAYS_LEFT": "Phoenix Pro Trial ({0} days left)"
+    "PROMO_PRO_TRIAL_DAYS_LEFT": "Phoenix Pro Trial ({0} days left)",
+    "GET_PHOENIX_PRO": "Get Phoenix Pro"
 });

src/services/html/login-popup.html

@@ -9,6 +9,10 @@ <h1 class="popup-title">{{Strings.PROFILE_POP_TITLE}}</h1>
             </span>
         </div>
         {{/trialInfo}}
+        <a href="{{getProLink}}" style="font-size: 13px;">
+            {{Strings.GET_PHOENIX_PRO}}
+            <i class="fa fa-arrow-right" style="font-size: 10px;margin-left: 4px;"></i>
+        </a>
     </div>
     <div class="popup-body">
         <button id="phoenix-signin-btn" class="btn dialog-button primary">

src/services/html/profile-popup.html

@@ -9,6 +9,10 @@
                 <div class="user-email"><secure-email></secure-email></div>
                 <iframe id="user-details-frame" class="user-details-iframe" style="display: none; padding: 0; border: none; background: transparent; width: 100%; height: auto; overflow: hidden;" scrolling="no"></iframe>
                 <div class="user-plan-name {{planClass}}">{{planName}}</div>
+                <a class="get-phoenix-pro-profile" href="{{getProLink}}" style="font-size: 13px;">
+                    {{Strings.GET_PHOENIX_PRO}}
+                    <i class="fa fa-arrow-right" style="font-size: 10px;margin-left: 4px;"></i>
+                </a>
             </div>
         </div>
     </div>

src/services/profile-menu.js

@@ -151,7 +151,10 @@ define(function (require, exports, module) {
         closePopup(); // close any existing popup first
 
         // Render template with basic data first for instant response
-        const renderedTemplate = Mustache.render(loginTemplate, {Strings});
+        const renderedTemplate = Mustache.render(loginTemplate, {
+            Strings,
+            getProLink: brackets.config.purchase_url
+        });
         $popup = $(renderedTemplate);
 
         $("body").append($popup);
@@ -352,8 +355,9 @@ define(function (require, exports, module) {
         if (!$popup || !entitlements) {
             return;
         }
-
+        // entitlements will always be present for login popup.
         // Update plan information
+        const $getProLink = $popup.find('.get-phoenix-pro-profile');
         if (entitlements.plan) {
             const $planName = $popup.find('.user-plan-name');
 
@@ -371,18 +375,22 @@ define(function (require, exports, module) {
                         <i class="fa-solid fa-feather" style="margin-left: 3px;"></i>
                     </span>`;
                     $planName.addClass('user-plan-paid').html(proTitle);
+                    $getProLink.removeClass('forced-hidden');
                 } else {
                     // For paid users: regular plan name with icon
                     const proTitle = `<span class="phoenix-pro-title">
                         <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);
+                    $getProLink.addClass('forced-hidden');
                 }
             } else {
                 // Use simple text for free users
                 $planName.addClass('user-plan-free').text(entitlements.plan.name);
             }
+        } else {
+            $getProLink.removeClass('forced-hidden');
         }
 
         // Update quota section if available
@@ -432,7 +440,8 @@ define(function (require, exports, module) {
             titleText: "Ai Quota Used",
             usageText: "100 / 200 credits",
             usedPercent: 0,
-            Strings: Strings
+            Strings: Strings,
+            getProLink: brackets.config.purchase_url
         };
 
         // Note: We don't await here to keep popup display instant

src/styles/brackets_core_ui_variables.less

@@ -300,4 +300,4 @@
 );
 
 @phoenixPro-brand-light: #cc5500;
-@phoenixPro-brand-dark: #ff8c42;
+@phoenixPro-brand-dark: #FD8C2F;