Added an upgrade modal to the custom theme activation failure scenario

no issue

- The modal only appears when the user hits a limitation trying to activate a custom theme not part of the allowlist (if the custom theme allowlist is configured)
- Changed the upgrade button to green to match the design

ghost/admin/app/components/modal-upgrade-host-limit-custom-theme.hbs

@@ -15,7 +15,7 @@
         <span>Cancel</span>
     </button>
 
-    <button {{on "click" (action "upgrade")}} class="gh-btn gh-btn-black" data-test-button="upgrade-plan">
+    <button {{on "click" (action "upgrade")}} class="gh-btn gh-btn-green" data-test-button="upgrade-plan">
         <span>Upgrade</span>
     </button>
 </div>

ghost/admin/app/controllers/settings/theme.js

@@ -44,6 +44,7 @@ export const MARKETPLACE_THEMES = [{
 export default Controller.extend({
     config: service(),
     ghostPaths: service(),
+    limit: service(),
     notifications: service(),
     session: service(),
     settings: service(),
@@ -53,6 +54,7 @@ export default Controller.extend({
     newSecondaryNavItem: null,
     themes: null,
     themeToDelete: null,
+    displayUpgradeModal: false,
 
     init() {
         this._super(...arguments);
@@ -68,7 +70,12 @@ export default Controller.extend({
     }),
 
     actions: {
-        activateTheme(theme) {
+        async activateTheme(theme) {
+            const isOverLimit = await this.limit.checkWouldGoOverLimit('customThemes', {value: theme.name});
+            if (isOverLimit) {
+                this.set('displayUpgradeModal', true);
+                return;
+            }
             return theme.activate().then((activatedTheme) => {
                 if (!isEmpty(activatedTheme.get('warnings'))) {
                     this.set('themeWarnings', activatedTheme.get('warnings'));
@@ -138,6 +145,10 @@ export default Controller.extend({
             this.set('showThemeErrorsModal', false);
         },
 
+        hideUpgradeModal() {
+            this.set('displayUpgradeModal', false);
+        },
+
         reset() {}
     },
 

ghost/admin/app/services/limit.js

@@ -59,6 +59,10 @@ export default class LimitsService extends Service {
         });
     }
 
+    async checkWouldGoOverLimit(limitName, metadata = {}) {
+        return this.limiter.checkWouldGoOverLimit(limitName, metadata);
+    }
+
     decorateWithCountQueries(limits) {
         if (limits.staff) {
             limits.staff.currentCountQuery = bind(this, this.getStaffUsersCount);

ghost/admin/app/templates/settings/theme.hbs

@@ -100,4 +100,10 @@
     </section>
 </section>
 
-{{outlet}}
+{{outlet}}
+
+{{#if this.displayUpgradeModal}}
+    <GhFullscreenModal @modal="upgrade-host-limit-custom-theme"
+        @close={{action "hideUpgradeModal"}}
+        @modifier="action wide" />
+{{/if}}