chore: add different pro upsell dialogs

Author: abose

src/nls/root/strings.js

@@ -1668,7 +1668,6 @@ define({
     // promos
     "PROMO_UPGRADE_TITLE": "You’ve been upgraded to {0}",
     "PROMO_UPGRADE_MESSAGE": "Enjoy full access to all premium features for the next {0} days:",
-    "PROMO_ENDED_MESSAGE": "Subscribe now to continue using these advanced features:",
     "PROMO_CARD_1": "Drag & Drop Elements",
     "PROMO_CARD_1_MESSAGE": "Rearrange sections visually — Phoenix updates the HTML & CSS for you.",
     "PROMO_CARD_2": "Image Replacement",
@@ -1680,6 +1679,10 @@ define({
     "PROMO_LEARN_MORE": "Learn More\u2026",
     "PROMO_GET_APP_UPSELL_BUTTON": "Get {0}",
     "PROMO_PRO_ENDED_TITLE": "Your {0} Trial has ended",
+    "PROMO_ENDED_MESSAGE": "Subscribe now to continue using these advanced features:",
+    "PROMO_PRO_UNLOCK_PRO_TITLE": "Unlock the power of {0}",
+    "PROMO_PRO_UNLOCK_LIVE_EDIT_TITLE": "Unlock Live Edit with {0}",
+    "PROMO_PRO_UNLOCK_MESSAGE": "Subscribe now to unlock these advanced features:",
     "PROMO_PRO_TRIAL_DAYS_LEFT": "Phoenix Pro Trial ({0} days left)",
     "GET_PHOENIX_PRO": "Get Phoenix Pro",
     "USER_FREE_PLAN_NAME": "Free Plan"

src/services/entitlements.js

@@ -46,15 +46,17 @@ define(function (require, exports, module) {
     const EVENT_ENTITLEMENTS_CHANGED = "entitlements_changed";
 
     /**
-     * Check if user is logged in
+     * Check if user is logged in. Best to check after `EVENT_ENTITLEMENTS_CHANGED`.
      * @returns {*}
      */
     function isLoggedIn() {
         return LoginService.isLoggedIn();
     }
 
     /**
-     * Get the plan details from entitlements with fallback to free plan defaults
+     * Get the plan details from entitlements with fallback to free plan defaults. If the user is
+     * in pro trial(isInProTrial API), then paidSubscriber will always be true as we need to treat user as paid.
+     * you should use isInProTrial API to check if user is in pro trial if some trial-related logic needs to be done.
      * @returns {Promise<Object>} Plan details object
      */
     async function getPlanDetails() {
@@ -74,7 +76,7 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Check if user is in a pro trial
+     * Check if user is in a pro trial. IF the user is in pro trail, then `plan.paidSubscriber` will always be true.
      * @returns {Promise<boolean>} True if user is in pro trial, false otherwise
      */
     async function isInProTrial() {
@@ -92,16 +94,35 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Get raw entitlements from server
+     * Get current raw entitlements. Should not be used directly, use individual feature entitlement instead
+     * like getLiveEditEntitlement.
      * @returns {Promise<Object|null>} Raw entitlements object or null
      */
     async function getRawEntitlements() {
         return await LoginService.getEntitlements();
     }
 
     /**
-     * Get live edit entitlement with fallback defaults
-     * @returns {Promise<Object>} Live edit entitlement object
+     * Get live edit is enabled for user, based on his logged in pro-user/trial status.
+     *
+     * @returns {Promise<Object>} Live edit entitlement object with the following shape:
+     * @returns {Promise<Object>} entitlement
+     * @returns {Promise<boolean>} entitlement.activated - If true, enable live edit feature.
+     *                                                   If false, use promotions.showProUpsellDialog
+     *                                                   with UPSELL_TYPE_LIVE_EDIT to show an upgrade dialog if needed.
+     * @returns {Promise<string>} entitlement.subscribeURL - URL to subscribe/purchase if not activated
+     * @returns {Promise<string>} entitlement.upgradeToPlan - Plan name that includes live edit entitlement
+     * @returns {Promise<number>} [entitlement.validTill] - Timestamp when entitlement expires (if from server)
+     *
+     * @example
+     * const liveEditEntitlement = await Entitlements.getLiveEditEntitlement();
+     * if (liveEditEntitlement.activated) {
+     *     // Enable live edit feature
+     *     enableLiveEditFeature();
+     * } else {
+     *     // Show upgrade dialog when user tries to use live edit
+     *     promotions.showProUpsellDialog(promotions.UPSELL_TYPE_LIVE_EDIT);
+     * }
      */
     async function getLiveEditEntitlement() {
         const entitlements = await LoginService.getEffectiveEntitlements();

src/services/pro-dialogs.js

@@ -45,7 +45,11 @@ define(function (require, exports, module) {
     // save a copy of window.fetch so that extensions wont tamper with it.
     let fetchFn = window.fetch;
 
-    function showProUpgradeDialog(trialDays) {
+    const UPSELL_TYPE_LIVE_EDIT = "live_edit";
+    const UPSELL_TYPE_PRO_TRIAL_ENDED = "pro_trial_ended";
+    const UPSELL_TYPE_GET_PRO = "get_pro";
+
+    function showProTrialStartDialog(trialDays) {
         const title = StringUtils.format(Strings.PROMO_UPGRADE_TITLE, proTitle);
         const message = StringUtils.format(Strings.PROMO_UPGRADE_MESSAGE, trialDays);
         const $template = $(Mustache.render(proUpgradeHTML, {
@@ -65,12 +69,38 @@ define(function (require, exports, module) {
         });
     }
 
-    function _showLocalProEndedDialog() {
-        const title = StringUtils.format(Strings.PROMO_PRO_ENDED_TITLE, proTitle);
-        const buttonGetPro = StringUtils.format(Strings.PROMO_GET_APP_UPSELL_BUTTON, proTitlePlain);
+    function _getUpsellDialogText(upsellType) {
+        // our pro dialog has 2 flavors. Local which is shipped with the release for showing if user is offline
+        // and remote which is fetched from the server if we have a remote offer to show. This fn will be called
+        // by both of these flavors and we need to return the appropriate text for each.
+        const buttonGetProText = StringUtils.format(Strings.PROMO_GET_APP_UPSELL_BUTTON, proTitlePlain);
+        switch (upsellType) {
+        case UPSELL_TYPE_PRO_TRIAL_ENDED: return {
+            title: StringUtils.format(Strings.PROMO_PRO_ENDED_TITLE, proTitle),
+            localDialogMessage: Strings.PROMO_ENDED_MESSAGE, // this will be shown in the local dialog
+            buttonGetProText
+        };
+        case UPSELL_TYPE_LIVE_EDIT: return {
+            title: StringUtils.format(Strings.PROMO_PRO_UNLOCK_LIVE_EDIT_TITLE, proTitle),
+            localDialogMessage: Strings.PROMO_PRO_UNLOCK_MESSAGE,
+            buttonGetProText
+        };
+        case UPSELL_TYPE_GET_PRO:
+        default: return {
+            title: StringUtils.format(Strings.PROMO_PRO_UNLOCK_PRO_TITLE, proTitle),
+            localDialogMessage: Strings.PROMO_PRO_UNLOCK_MESSAGE,
+            buttonGetProText
+        };
+        }
+    }
+
+    function _showLocalProEndedDialog(upsellType) {
+        const dlgText = _getUpsellDialogText(upsellType);
+        const title = dlgText.title;
+        const buttonGetPro = dlgText.buttonGetProText;
         const $template = $(Mustache.render(proUpgradeHTML, {
             title, Strings,
-            message: Strings.PROMO_ENDED_MESSAGE,
+            message: dlgText.localDialogMessage,
             secondaryButton: Strings.CANCEL,
             primaryButton: buttonGetPro
         }));
@@ -86,13 +116,14 @@ define(function (require, exports, module) {
         });
     }
 
-    function _showRemoteProEndedDialog(currentVersion, promoHtmlURL, upsellPurchaseURL) {
-        const buttonGetPro = StringUtils.format(Strings.PROMO_GET_APP_UPSELL_BUTTON, proTitlePlain);
-        const title = StringUtils.format(Strings.PROMO_PRO_ENDED_TITLE, proTitle);
+    function _showRemoteProEndedDialog(upsellType, currentVersion, promoHtmlURL, upsellPurchaseURL) {
+        const dlgText = _getUpsellDialogText(upsellType);
+        const title = dlgText.title;
+        const buttonGetPro = dlgText.buttonGetProText;
         const currentTheme = ThemeManager.getCurrentTheme();
         const theme = currentTheme && currentTheme.dark ? "dark" : "light";
         const promoURL = `${promoHtmlURL}?lang=${
-            brackets.getLocale()}&theme=${theme}&version=${currentVersion}`;
+            brackets.getLocale()}&theme=${theme}&version=${currentVersion}&upsellType=${upsellType}`;
         const $template = $(Mustache.render(proEndedHTML, {Strings, title, buttonGetPro, promoURL}));
         Dialogs.showModalDialogUsingTemplate($template).done(function (id) {
             console.log("Dialog closed with id: " + id);
@@ -106,30 +137,31 @@ define(function (require, exports, module) {
         });
     }
 
-    async function showProEndedDialog() {
+    async function showProUpsellDialog(upsellType) {
         const currentVersion = window.AppConfig.apiVersion;
 
         if (!navigator.onLine) {
-            _showLocalProEndedDialog();
+            _showLocalProEndedDialog(upsellType);
             return;
         }
 
         try {
             const configURL = `${brackets.config.promotions_url}app/config.json`;
             const response = await fetchFn(configURL);
             if (!response.ok) {
-                _showLocalProEndedDialog();
+                _showLocalProEndedDialog(upsellType);
                 return;
             }
 
             const config = await response.json();
             if (config.upsell_after_trial_url) {
-                _showRemoteProEndedDialog(currentVersion, config.upsell_after_trial_url, config.upsell_purchase_url);
+                _showRemoteProEndedDialog(upsellType, currentVersion,
+                    config.upsell_after_trial_url, config.upsell_purchase_url);
             } else {
-                _showLocalProEndedDialog();
+                _showLocalProEndedDialog(upsellType);
             }
         } catch (error) {
-            _showLocalProEndedDialog();
+            _showLocalProEndedDialog(upsellType);
         }
     }
 
@@ -141,6 +173,9 @@ define(function (require, exports, module) {
         };
     }
 
-    exports.showProUpgradeDialog = showProUpgradeDialog;
-    exports.showProEndedDialog = showProEndedDialog;
+    exports.showProTrialStartDialog = showProTrialStartDialog;
+    exports.showProUpsellDialog = showProUpsellDialog;
+    exports.UPSELL_TYPE_PRO_TRIAL_ENDED = UPSELL_TYPE_PRO_TRIAL_ENDED;
+    exports.UPSELL_TYPE_GET_PRO = UPSELL_TYPE_GET_PRO;
+    exports.UPSELL_TYPE_LIVE_EDIT = UPSELL_TYPE_LIVE_EDIT;
 });

src/services/promotions.js

@@ -275,7 +275,7 @@ define(function (require, exports, module) {
             // For corruption, show trial ended dialog and create expired marker
             // Do not grant any new trial as possible tampering.
             console.warn("trial data corrupted");
-            ProDialogs.showProEndedDialog(); // Show ended dialog for security
+            ProDialogs.showProUpsellDialog(ProDialogs.UPSELL_TYPE_PRO_TRIAL_ENDED); // Show ended dialog for security
 
             // Create expired trial marker to prevent future trial grants
             await _setTrialData({
@@ -300,7 +300,7 @@ define(function (require, exports, module) {
                     const hasProSubscription = await _hasProSubscription();
                     if (!hasProSubscription) {
                         console.log("Existing trial expired, showing promo ended dialog");
-                        ProDialogs.showProEndedDialog();
+                        ProDialogs.showProUpsellDialog(ProDialogs.UPSELL_TYPE_PRO_TRIAL_ENDED);
                     } else {
                         console.log("Existing trial expired, but user has pro subscription - skipping promo dialog");
                     }
@@ -354,7 +354,7 @@ define(function (require, exports, module) {
         // Check if user has pro subscription before showing upgrade dialog
         const hasProSubscription = await _hasProSubscription();
         if (!hasProSubscription) {
-            ProDialogs.showProUpgradeDialog(trialDays);
+            ProDialogs.showProTrialStartDialog(trialDays);
         } else {
             console.log("Pro trial activated, but user has pro subscription - skipping upgrade dialog");
         }