show upgrade button in settings page

src/popup/components/AppSettings.vue

@@ -5,6 +5,18 @@
         App Settings ({{ userEmail }})
       </p>
 
+      <div v-if="freeAccount">
+        <small>
+          Currently you have a free SimpleLogin account. Upgrade your account to
+          create unlimited aliases, add more mailboxes, create aliases
+          on-the-fly with your domain or SimpleLogin subdomain and more.
+        </small>
+        <button @click="upgrade" class="btn btn-primary btn-sm">
+          Upgrade your SimpleLogin account
+        </button>
+        <hr />
+      </div>
+
       <table class="settings-list">
         <tr>
           <td>
@@ -116,6 +128,7 @@ export default {
       extension_version: "development",
       userEmail: "",
       theme: "",
+      freeAccount: false,
       THEMES,
       THEME_LABELS,
     };
@@ -138,6 +151,11 @@ export default {
       API_ON_ERR.TOAST
     );
     this.userEmail = userInfo.data.email;
+    if (userInfo.data.in_trial) {
+      this.freeAccount = true;
+    } else {
+      this.freeAccount = !userInfo.data.is_premium;
+    }
   },
   methods: {
     async handleToggleSLButton() {
@@ -189,6 +207,22 @@ export default {
       );
       this.reportURISLButton = `mailto:extension@simplelogin.io?subject=${subject}&body=${body}`;
     },
+    async upgrade() {
+      try {
+        console.log("send upgrade event to host app");
+        let r = await browser.runtime.sendNativeMessage(
+          "application.id",
+          JSON.stringify({
+            upgrade: {},
+          })
+        );
+      } catch (error) {
+        console.info("can't send data to native app", error);
+        let apiUrl = await SLStorage.get(SLStorage.SETTINGS.API_URL);
+        let upgradeURL = apiUrl + "/dashboard/pricing";
+        browser.tabs.create({ url: upgradeURL });
+      }
+    },
   },
   computed: {},
   watch: {