Skip to content

Commit 9a1e210

Browse files
devvaannshabose
authored andcommitted
fix: remove hard-coded values for easier integration
1 parent 977d1bf commit 9a1e210

File tree

3 files changed

+60
-21
lines changed

3 files changed

+60
-21
lines changed

src/extensionsIntegrated/Phoenix/html/login-dialog.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<div class="profile-popup">
22
<div class="popup-header">
3-
<h1 class="popup-title">Welcome to Phoenix Code</h1>
3+
<h1 class="popup-title">{{welcomeTitle}}</h1>
44
</div>
55
<div class="popup-body">
66
<button id="phoenix-signin-btn" class="btn btn-primary" style="width: 100%; margin: 5px 0; padding: 10px 0;">
77
<i class="fa fa-sign-in-alt" style="margin-right: 5px;"></i>
8-
Sign in to your account
8+
{{signInBtnText}}
99
</button>
1010
<div style="margin-top: 20px; text-align: center;">
1111
<button id="phoenix-support-btn" class="btn btn-link" style="color: #adb9bd;">
1212
<i class="fa fa-question-circle" style="margin-right: 5px;"></i>
13-
Contact support
13+
{{supportBtnText}}
1414
</button>
1515
</div>
1616
</div>

src/extensionsIntegrated/Phoenix/html/profile-panel.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,38 @@
22
<div class="popup-header">
33
<div style="display: flex; align-items: center;">
44
<div style="width: 40px; height: 40px; border-radius: 50%; background-color: #0099ff; color: white; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-weight: bold; font-size: 16px;">
5-
CA
5+
{{initials}}
66
</div>
77
<div>
8-
<div>Charly A.</div>
9-
<div style="color: #3c3; font-weight: normal; font-size: 16px;">Paid Plan</div>
8+
<div>{{userName}}</div>
9+
<div style="color: #3c3; font-weight: normal; font-size: 16px;">{{planName}}</div>
1010
</div>
1111
</div>
1212
</div>
1313
<div class="popup-body">
1414
<div style="margin-bottom: 20px;">
1515
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
16-
<span>AI quota used</span>
17-
<span>7,000 / 10,000 tokens</span>
16+
<span>{{quotaLabel}}</span>
17+
<span>{{quotaUsed}} / {{quotaTotal}} {{quotaUnit}}</span>
1818
</div>
1919
<div style="width: 100%; height: 8px; background-color: #444; border-radius: 4px; overflow: hidden;">
20-
<div style="width: 70%; height: 100%; background-color: #3c3; border-radius: 4px;"></div>
20+
<div style="width: {{quotaPercent}}%; height: 100%; background-color: #3c3; border-radius: 4px;"></div>
2121
</div>
2222
</div>
2323

2424
<button id="phoenix-account-btn" class="btn btn-default" style="width: 100%; margin: 5px 0; padding: 8px 0; text-align: left;">
2525
<i class="fa fa-user" style="margin-right: 8px; width: 20px; text-align: center;"></i>
26-
Account details
26+
{{accountBtnText}}
2727
</button>
2828

2929
<button id="phoenix-support-btn" class="btn btn-default" style="width: 100%; margin: 5px 0; padding: 8px 0; text-align: left;">
3030
<i class="fa fa-question-circle" style="margin-right: 8px; width: 20px; text-align: center;"></i>
31-
Contact support
31+
{{supportBtnText}}
3232
</button>
3333

3434
<button id="phoenix-signout-btn" class="btn btn-default" style="width: 100%; margin: 5px 0; padding: 8px 0; text-align: left; color: #f55;">
3535
<i class="fa fa-sign-out-alt" style="margin-right: 8px; width: 20px; text-align: center;"></i>
36-
Sign out
36+
{{signOutBtnText}}
3737
</button>
3838
</div>
3939
</div>

src/extensionsIntegrated/Phoenix/profile-menu.js

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
define(function (require, exports, module) {
2+
const Mustache = require("thirdparty/mustache/mustache");
3+
4+
// HTML templates
25
const loginTemplate = require("text!./html/login-dialog.html");
36
const profileTemplate = require("text!./html/profile-panel.html");
47

@@ -9,7 +12,27 @@ define(function (require, exports, module) {
912
let isPopupVisible = false;
1013

1114
// if user is logged in we show the profile menu, otherwise we show the login menu
12-
const isLoggedIn = false;
15+
const isLoggedIn = true;
16+
17+
const defaultLoginData = {
18+
welcomeTitle: "Welcome to Phoenix Code",
19+
signInBtnText: "Sign in to your account",
20+
supportBtnText: "Contact support"
21+
};
22+
23+
const defaultProfileData = {
24+
initials: "CA",
25+
userName: "Charly A.",
26+
planName: "Paid Plan",
27+
quotaLabel: "AI quota used",
28+
quotaUsed: "7,000",
29+
quotaTotal: "10,000",
30+
quotaUnit: "tokens",
31+
quotaPercent: 70,
32+
accountBtnText: "Account details",
33+
supportBtnText: "Contact support",
34+
signOutBtnText: "Sign out"
35+
};
1336

1437
function _handleSignInBtnClick() {
1538
console.log("User clicked sign in button");
@@ -88,21 +111,28 @@ define(function (require, exports, module) {
88111

89112
/**
90113
* Shows the sign-in popup when the user is not logged in
114+
* @param {Object} loginData - Data to populate the template (optional)
91115
*/
92-
function showLoginPopup() {
116+
function showLoginPopup(loginData) {
93117
// If popup is already visible, just close it
94118
if (isPopupVisible) {
95119
closePopup();
96120
return;
97121
}
98122

123+
// Merge provided data with defaults
124+
const templateData = $.extend({}, defaultLoginData, loginData || {});
125+
99126
// create the popup element
100127
closePopup(); // close any existing popup first
101-
$popup = $(loginTemplate);
128+
129+
// Render template with data
130+
const renderedTemplate = Mustache.render(loginTemplate, templateData);
131+
$popup = $(renderedTemplate);
132+
102133
$("body").append($popup);
103134
isPopupVisible = true;
104135

105-
// Position the popup
106136
positionPopup();
107137

108138
// event handlers for buttons
@@ -125,16 +155,24 @@ define(function (require, exports, module) {
125155

126156
/**
127157
* Shows the user profile popup when the user is logged in
158+
* @param {Object} profileData - Data to populate the template (optional)
128159
*/
129-
function showProfilePopup() {
160+
function showProfilePopup(profileData) {
130161
// If popup is already visible, just close it
131162
if (isPopupVisible) {
132163
closePopup();
133164
return;
134165
}
135166

167+
// Merge provided data with defaults
168+
const templateData = $.extend({}, defaultProfileData, profileData || {});
169+
136170
closePopup();
137-
$popup = $(profileTemplate);
171+
172+
// Render template with data
173+
const renderedTemplate = Mustache.render(profileTemplate, templateData);
174+
$popup = $(renderedTemplate);
175+
138176
$("body").append($popup);
139177
isPopupVisible = true;
140178
positionPopup();
@@ -164,18 +202,19 @@ define(function (require, exports, module) {
164202
/**
165203
* Toggle the profile popup based on the user's login status
166204
* this function is called inside the src/extensionsIntegrated/Phoenix/main.js when user clicks on the profile icon
205+
* @param {Object} data - Data to populate the templates (optional)
167206
*/
168-
function init() {
207+
function init(data) {
169208
// check if the popup is already visible or not. if visible close it
170209
if (isPopupVisible) {
171210
closePopup();
172211
return;
173212
}
174213

175214
if (isLoggedIn) {
176-
showProfilePopup();
215+
showProfilePopup(data);
177216
} else {
178-
showLoginPopup();
217+
showLoginPopup(data);
179218
}
180219

181220
// handle window resize to reposition popup

0 commit comments

Comments
 (0)