chore: pro upsell dialog remote config

Author: abose

src/nls/root/strings.js

@@ -1667,6 +1667,7 @@ 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",

src/services/html/pro-upgrade.html

@@ -50,7 +50,7 @@ <h2>{{Strings.PROMO_CARD_4}}</h2>
     </div>
 
     <div class="modal-footer">
-        <button class="dialog-button btn" data-button-id="learn_more">{{Strings.PROMO_LEARN_MORE}}</button>
-        <button class="dialog-button btn primary" data-button-id="ok">{{Strings.OK}}</button>
+        <button class="dialog-button btn" data-button-id="secondaryButton">{{secondaryButton}}</button>
+        <button class="dialog-button btn primary" data-button-id="ok">{{{primaryButton}}}</button>
     </div>
 </div>

src/services/pro-dialogs.js

@@ -44,33 +44,81 @@ define(function (require, exports, module) {
     function showProUpgradeDialog(trialDays) {
         const title = StringUtils.format(Strings.PROMO_UPGRADE_TITLE, proTitle);
         const message = StringUtils.format(Strings.PROMO_UPGRADE_MESSAGE, trialDays);
-        const $template = $(Mustache.render(proUpgradeHTML, {title, message, Strings}));
+        const $template = $(Mustache.render(proUpgradeHTML, {
+            title, message, Strings,
+            secondaryButton: Strings.PROMO_LEARN_MORE,
+            primaryButton: Strings.OK
+        }));
         Dialogs.showModalDialogUsingTemplate($template).done(function (id) {
             console.log("Dialog closed with id: " + id);
-            if(id === 'learn_more') {
+            if(id === 'secondaryButton') {
                 // todo add metrics
                 Phoenix.app.openURLInDefaultBrowser(brackets.config.purchase_url);
             }
         });
     }
 
-    function showProEndedDialog(currentVersion) {
-        currentVersion = currentVersion || window.AppConfig.apiVersion;
+    function _showLocalProEndedDialog() {
+        const title = StringUtils.format(Strings.PROMO_PRO_ENDED_TITLE, proTitle);
+        const buttonGetPro = StringUtils.format(Strings.PROMO_GET_APP_UPSELL_BUTTON, proTitlePlain);
+        const $template = $(Mustache.render(proUpgradeHTML, {
+            title, Strings,
+            message: Strings.PROMO_ENDED_MESSAGE,
+            secondaryButton: Strings.CANCEL,
+            primaryButton: buttonGetPro
+        }));
+        Dialogs.showModalDialogUsingTemplate($template).done(function (id) {
+            console.log("Dialog closed with id: " + id);
+            if(id === 'ok') {
+                // todo add metrics
+                Phoenix.app.openURLInDefaultBrowser(brackets.config.purchase_url);
+            }
+        });
+    }
+
+    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);
         const currentTheme = ThemeManager.getCurrentTheme();
         const theme = currentTheme && currentTheme.dark ? "dark" : "light";
-        const promoURL = `${brackets.config.promotions_url}app/upsell_after_trial.html?lang=${brackets.getLocale()}&theme=${theme}&version=${currentVersion}`;
+        const promoURL = `${promoHtmlURL}?lang=${
+            brackets.getLocale()}&theme=${theme}&version=${currentVersion}`;
         const $template = $(Mustache.render(proEndedHTML, {Strings, title, buttonGetPro, promoURL}));
         Dialogs.showModalDialogUsingTemplate($template).done(function (id) {
             console.log("Dialog closed with id: " + id);
             if(id === 'get_pro') {
-                // todo add metrics
-                Phoenix.app.openURLInDefaultBrowser(brackets.config.purchase_url);
+                Phoenix.app.openURLInDefaultBrowser(upsellPurchaseURL || brackets.config.purchase_url);
             }
         });
     }
 
+    async function showProEndedDialog() {
+        const currentVersion = window.AppConfig.apiVersion;
+
+        if (!navigator.onLine) {
+            _showLocalProEndedDialog();
+            return;
+        }
+
+        try {
+            const configURL = `${brackets.config.promotions_url}app/config.json`;
+            const response = await fetch(configURL);
+            if (!response.ok) {
+                _showLocalProEndedDialog();
+                return;
+            }
+
+            const config = await response.json();
+            if (config.upsell_after_trial_url) {
+                _showRemoteProEndedDialog(currentVersion, config.upsell_after_trial_url, config.upsell_purchase_url);
+            } else {
+                _showLocalProEndedDialog();
+            }
+        } catch (error) {
+            _showLocalProEndedDialog();
+        }
+    }
+
     exports.showProUpgradeDialog = showProUpgradeDialog;
     exports.showProEndedDialog = showProEndedDialog;
 });

src/services/promotions.js

@@ -208,7 +208,7 @@ define(function (require, exports, module) {
                     // todo we should not show this to logged in pro subscribers, but at startup time,
                     // we do not know if login is done yet.
                     console.log("Existing trial expired, showing promo ended dialog");
-                    ProDialogs.showProEndedDialog(currentVersion);
+                    ProDialogs.showProEndedDialog();
                     // Store that dialog was shown for this version
                     await _setTrialData({
                         ...existingTrialData,