Add initial hooks for subscription required dialog on unpaid or expired

dashboard/src/Index.vue

@@ -9,6 +9,7 @@ import ProvisionModel from './models/ProvisionModel.js';
 import DashboardModel from './models/DashboardModel.js';
 import BrandingModel from './models/BrandingModel.js';
 import Headerbar from './components/Headerbar.vue';
+import SubscriptionRequiredDialog from './components/SubscriptionRequiredDialog.vue';
 import OfflineOverlay from './components/OfflineOverlay.vue';
 import AppsView from './views/AppsView.vue';
 import AppConfigureView from './views/AppConfigureView.vue';
@@ -98,6 +99,7 @@ const profileModel = ProfileModel.create();
 const provisionModel = ProvisionModel.create();
 
 const sidebar = useTemplateRef('sidebar');
+const subscriptionDialog = useTemplateRef('subscriptionDialog');
 const ready = ref(false);
 const view = ref('');
 const profile = ref({});
@@ -193,6 +195,10 @@ ProfileModel.onChange(ProfileModel.KEYS.AVATAR, (value) => {
   profile.value.avatarUrl = value;
 });
 
+function onSubscriptionRequired() {
+  subscriptionDialog.value.open();
+}
+
 onMounted(async () => {
   let [error, result] = await provisionModel.status();
   if (error) return console.error(error);
@@ -234,6 +240,7 @@ onMounted(async () => {
   <div style="overflow: hidden; height: 100%;">
     <Notification />
     <OfflineOverlay ref="offlineOverlay" @online="onOnline()"/>
+    <SubscriptionRequiredDialog ref="subscriptionDialog"/>
 
     <Transition name="pankow-animation-pop-up">
       <div v-if="ready" style="display: flex; flex-direction: row; overflow: hidden; height: 100%;">
@@ -279,7 +286,7 @@ onMounted(async () => {
         </SideBar>
 
         <div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
-          <Headerbar :config="config" :subscription="subscription" :profile="profile"/>
+          <Headerbar :config="config" :subscription="subscription" :profile="profile" @subscription-required="onSubscriptionRequired()"/>
 
           <div style="display: flex; justify-content: center; overflow: auto; flex-grow: 1; padding: 0 6px; position: relative;">
             <Transition name="slide-fade">

dashboard/src/components/Headerbar.vue

@@ -7,6 +7,7 @@ import { Button, Popover, Icon } from 'pankow';
 import NotificationsModel from '../models/NotificationsModel.js';
 
 const props = defineProps(['config', 'profile', 'subscription']);
+const emits = defineEmits(['subscriptionRequired']);
 
 const notificationModel = NotificationsModel.create();
 const notificationButton = useTemplateRef('notificationButton');
@@ -52,6 +53,10 @@ async function refresh() {
   notifications.value = result;
 }
 
+function onSubscriptionRequired() {
+  emits('subscriptionRequired');
+}
+
 onMounted(async () => {
   if (props.profile.isAtLeastAdmin) await refresh();
 });
@@ -89,14 +94,9 @@ onMounted(async () => {
 
     <div style="flex-grow: 1;"></div>
 
-    <div v-show="profile.isAtLeastOwner && (subscription.plan.id === 'free' || subscription.plan.id === 'expired')" ng-click="openSubscriptionSetup()" style="cursor: pointer">
-      <span class="badge" ng-class="{'badge-danger': subscription.plan.id !== 'free', 'badge-success': subscription.plan.id === 'free' }">
-        {{ $t(subscription.plan.id === 'free' ? 'settings.appstoreAccount.subscriptionSetupAction' : 'settings.appstoreAccount.subscriptionReactivateAction') }}
-      </span>
-    </div>
-    <div v-show="!profile.isAtLeastOwner && subscription.plan.id === 'expired'">
-      <span class="badge badge-danger">Subscription Expired</span>
-    </div>
+    <!-- Warnings if subscription is expired or unpaid -->
+    <div v-if="profile.isAtLeastOwner && subscription.plan.id === 'expired'" class="headerbar-action subscription-expired" style="gap: 6px" @click="onSubscriptionRequired()">Subscription Expired</div>
+
     <div class="headerbar-action" style="gap: 6px" v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton)"><Icon :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'"/> {{ notifications.length > 99 ? '99+' : notifications.length }}</div>
     <a class="headerbar-action"  v-if="profile.isAtLeastAdmin" href="#/support"><Icon icon="fa fa-question"/></a>
     <a class="headerbar-action" href="#/profile"><img :src="profile.avatarUrl" /> {{ profile.username }}</a>
@@ -155,4 +155,15 @@ onMounted(async () => {
   visibility: visible;
 }
 
+.subscription-expired {
+  background-color: var(--pankow-color-danger);
+  color: white;
+  border-radius: 20px;
+}
+
+.subscription-expired:hover {
+  color: white;
+  background-color: var(--pankow-color-danger-hover);
+}
+
 </style>

dashboard/src/components/SubscriptionRequiredDialog.vue

@@ -0,0 +1,21 @@
+<script setup>
+
+import { useTemplateRef } from 'vue';
+import { Dialog, Button } from 'pankow';
+
+const dialog = useTemplateRef('dialog');
+
+defineExpose({
+  async open() {
+    dialog.value.open();
+  }
+});
+
+</script>
+
+<template>
+  <Dialog ref="dialog" title="Subscription required" :show-x="true">
+    <p>To use this feature a Cloudron subscription needs to be set up</p>
+    <Button href="https://console.cloudron.io" target="_blank">Set up</Button>
+  </Dialog>
+</template>