feat: login integration for live preview edit

devvaannsh · devvaannsh · commit 3a1c0f958c19 · 2025-11-21T16:54:57.000+05:30
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
@@ -48,14 +48,14 @@ define(function main(require, exports, module) {
         EditorManager      = require("editor/EditorManager");
 
 
-    // this is responsible to make the advanced live preview features active or inactive
-    // @abose (make the first value true when its a paid user, everything rest is handled automatically)
-    let isProUser = window.KernalModeTrust ? true : false;
-    // when isFreeTrialUser is true isProUser should also be true
-    // when its false, isProUser can be true/false doesn't matter
-    let isFreeTrialUser = true;
+    const KernalModeTrust = window.KernalModeTrust;
+
+    // this will later be assigned its correct values once entitlementsManager loads
+    let isProUser = false;
+    let isFreeTrialUser = false;
 
     const EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = "liveHighlightPrefChange";
+    const PREFERENCE_LIVE_PREVIEW_MODE = "livePreviewMode";
 
     // state manager key to track image gallery selected state, by default we keep this as selected
     // if this is true we show the image gallery when an image element is clicked
@@ -316,6 +316,70 @@ define(function main(require, exports, module) {
         return false;
     }
 
+    // default mode means on first load for pro user we have edit mode
+    // for free user we have highlight mode
+    function _getDefaultMode() {
+        return isProUser ? "edit" : "highlight";
+    }
+
+    // to set that mode in the preferences
+    function _initializeMode() {
+        if (isFreeTrialUser) {
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
+            return;
+        }
+
+        const savedMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
+
+        if (savedMode === "highlight" && isProUser) {
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
+        } else if (savedMode === "edit" && !isProUser) {
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
+        }
+    }
+
+    // this is called everytime there is a change in entitlements
+    async function _updateProUserStatus() {
+        if (!KernalModeTrust) {
+            return;
+        }
+
+        try {
+            const entitlement = await KernalModeTrust.EntitlementsManager.getLiveEditEntitlement();
+            const isPaidSub = await KernalModeTrust.EntitlementsManager.isPaidSubscriber();
+
+            isProUser = entitlement.activated || isPaidSub;
+            isFreeTrialUser = await KernalModeTrust.EntitlementsManager.isInProTrial();
+
+            config.isProUser = isProUser;
+            exports.isProUser = isProUser;
+            exports.isFreeTrialUser = isFreeTrialUser;
+
+            _initializeMode();
+
+            if (MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
+                MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
+                MultiBrowserLiveDev.registerHandlers();
+            }
+        } catch (error) {
+            console.error("Error updating pro user status:", error);
+            isProUser = false;
+            isFreeTrialUser = false;
+        }
+    }
+
+    function setMode(mode) {
+        if (mode === "edit" && !exports.isProUser) {
+            return false;
+        }
+        PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, mode);
+        return true;
+    }
+
+    function getCurrentMode() {
+        return PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
+    }
+
     /** Initialize LiveDevelopment */
     AppInit.appReady(function () {
         params.parse();
@@ -330,6 +394,15 @@ define(function main(require, exports, module) {
         _loadStyles();
         _updateHighlightCheckmark();
 
+        // init pro user status and listen for changes
+        if (KernalModeTrust) {
+            _updateProUserStatus();
+            KernalModeTrust.EntitlementsManager.on(
+                KernalModeTrust.EntitlementsManager.EVENT_ENTITLEMENTS_CHANGED,
+                _updateProUserStatus
+            );
+        }
+
         // update styles for UI status
         _status = [
             { tooltip: Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED, style: "warning" },
@@ -385,6 +458,11 @@ define(function main(require, exports, module) {
             }
         });
 
+    PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_MODE, "string", _getDefaultMode(), {
+        description: StringUtils.format(Strings.LIVE_PREVIEW_MODE_PREFERENCE, "'preview'", "'highlight'", "'edit'"),
+        values: ["preview", "highlight", "edit"]
+    });
+
     config.highlight = PreferencesManager.getViewState("livedevHighlight");
 
     function setLivePreviewEditFeaturesActive(enabled) {
@@ -441,4 +519,6 @@ define(function main(require, exports, module) {
     exports.getLivePreviewDetails = MultiBrowserLiveDev.getLivePreviewDetails;
     exports.hideHighlight = MultiBrowserLiveDev.hideHighlight;
     exports.dismissLivePreviewBoxes = MultiBrowserLiveDev.dismissLivePreviewBoxes;
+    exports.setMode = setMode;
+    exports.getCurrentMode = getCurrentMode;
 });
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js
@@ -87,25 +87,9 @@ define(function (require, exports, module) {
     const PREVIEW_TRUSTED_PROJECT_KEY = "preview_trusted";
     const PREVIEW_PROJECT_README_KEY = "preview_readme";
 
-    // live preview mode pref
-    const PREFERENCE_LIVE_PREVIEW_MODE = "livePreviewMode";
-
     // holds the dropdown instance
     let $dropdown = null;
-
-    /**
-     * Get the appropriate default mode based on whether edit features are active
-     * @returns {string} "highlight" if edit features inactive, "edit" if active
-     */
-    function _getDefaultMode() {
-        return LiveDevelopment.isProUser ? "edit" : "highlight";
-    }
-
-    // define the live preview mode preference
-    PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_MODE, "string", _getDefaultMode(), {
-        description: StringUtils.format(Strings.LIVE_PREVIEW_MODE_PREFERENCE, "'preview'", "'highlight'", "'edit'"),
-        values: ["preview", "highlight", "edit"]
-    });
+    const PREFERENCE_LIVE_PREVIEW_MODE = "livePreviewMode";
 
     // live preview element highlights preference (whether on hover or click)
     const PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT = "livePreviewElementHighlights";
@@ -372,43 +356,21 @@ define(function (require, exports, module) {
         }
     }
 
-    /**
-     * init live preview mode from saved preferences
-     */
     function _initializeMode() {
-        // when user is on free trial we just push the edit mode to them every time they open/reload Phoenix
-        if(LiveDevelopment.isFreeTrialUser) {
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
-            _LPEditMode();
-            $previewBtn.removeClass('selected');
-            _updateModeButton("edit");
-            return;
-        }
-
-        const savedMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
-        const isEditFeaturesActive = LiveDevelopment.isProUser;
+        const currentMode = LiveDevelopment.getCurrentMode();
 
-        // If user has edit mode saved but edit features are not active, default to highlight
-        let effectiveMode = savedMode;
-        if (savedMode === "edit" && !isEditFeaturesActive) {
-            effectiveMode = "highlight";
-            // Update the preference to reflect the actual mode being used
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
-        }
-
-        // apply the effective mode
-        if (effectiveMode === "highlight") {
+        if (currentMode === "highlight") {
             _LPHighlightMode();
             $previewBtn.removeClass('selected');
-        } else if (effectiveMode === "edit" && isEditFeaturesActive) {
+        } else if (currentMode === "edit") {
             _LPEditMode();
             $previewBtn.removeClass('selected');
         } else {
             _LPPreviewMode();
             $previewBtn.addClass('selected');
         }
 
-        _updateModeButton(effectiveMode);
+        _updateModeButton(currentMode);
     }
 
     function _showModeSelectionDropdown(event) {
@@ -425,9 +387,7 @@ define(function (require, exports, module) {
             items.push(Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON);
         }
 
-        const rawMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
-        // this is to take care of invalid values in the pref file
-        const currentMode = ["preview", "highlight", "edit"].includes(rawMode) ? rawMode : _getDefaultMode();
+        const currentMode = LiveDevelopment.getCurrentMode();
 
         $dropdown = new DropdownButton.DropdownButton("", items, function(item, index) {
             if (item === Strings.LIVE_PREVIEW_MODE_PREVIEW) {
@@ -472,28 +432,22 @@ define(function (require, exports, module) {
 
         // handle the option selection
         $dropdown.on("select", function (e, item, index) {
-            // here we just set the preference
-            // as the preferences listener will automatically handle the required changes
             if (index === 0) {
-                PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "preview");
+                LiveDevelopment.setMode("preview");
             } else if (index === 1) {
-                PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
+                LiveDevelopment.setMode("highlight");
             } else if (index === 2) {
-                if (!isEditFeaturesActive) {
-                    // when the feature is not active we need to show a dialog to the user asking
-                    // them to subscribe to pro
+                if (!LiveDevelopment.setMode("edit")) {
                     _showProFeatureDialog();
-                } else {
-                    PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "edit");
                 }
             } else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
                 // Don't allow edit highlight toggle if edit features are not active
                 if (!isEditFeaturesActive) {
                     return;
                 }
                 // Toggle between hover and click
-                const currentMode = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
-                const newMode = currentMode !== "click" ? "click" : "hover";
+                const currMode = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
+                const newMode = currMode !== "click" ? "click" : "hover";
                 PreferencesManager.set(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, newMode);
                 return; // Don't dismiss highlights for this option
             }
@@ -1268,32 +1222,8 @@ define(function (require, exports, module) {
         // init live preview mode from saved preferences
         _initializeMode();
         // listen for pref changes
-        PreferencesManager.on("change", PREFERENCE_LIVE_PREVIEW_MODE, function () {
-            // Get the current preference value directly
-            const newMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE);
-            const isEditFeaturesActive = LiveDevelopment.isProUser;
-
-            // If user tries to set edit mode but edit features are not active, default to highlight
-            let effectiveMode = newMode;
-            if (newMode === "edit" && !isEditFeaturesActive) {
-                effectiveMode = "highlight";
-                // Update the preference to reflect the actual mode being used
-                PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "highlight");
-                return; // Return to avoid infinite loop
-            }
-
-            if (effectiveMode === "highlight") {
-                _LPHighlightMode();
-                $previewBtn.removeClass('selected');
-            } else if (effectiveMode === "edit" && isEditFeaturesActive) {
-                _LPEditMode();
-                $previewBtn.removeClass('selected');
-            } else {
-                _LPPreviewMode();
-                $previewBtn.addClass('selected');
-            }
-
-            _updateModeButton(effectiveMode);
+        PreferencesManager.on("change", "livePreviewMode", function () {
+            _initializeMode();
         });
 
         // Handle element highlight preference changes from this extension
