UI rework + premium check

app/http/endpoints/api/customisation/updatecolours.go

@@ -3,8 +3,11 @@ package customisation
 import (
 	"context"
 	"fmt"
+	"github.com/TicketsBot/GoPanel/botcontext"
 	dbclient "github.com/TicketsBot/GoPanel/database"
+	"github.com/TicketsBot/GoPanel/rpc"
 	"github.com/TicketsBot/GoPanel/utils"
+	"github.com/TicketsBot/common/premium"
 	"github.com/TicketsBot/worker/bot/customisation"
 	"github.com/gin-gonic/gin"
 	"golang.org/x/sync/errgroup"
@@ -14,6 +17,24 @@ import (
 func UpdateColours(ctx *gin.Context) {
 	guildId := ctx.Keys["guildid"].(uint64)
 
+	botContext, err := botcontext.ContextForGuild(guildId)
+	if err != nil {
+        ctx.JSON(500, utils.ErrorJson(err))
+        return
+    }
+
+	// Allow votes
+	premiumTier, err := rpc.PremiumClient.GetTierByGuildId(guildId, true, botContext.Token, botContext.RateLimiter)
+	if err != nil {
+		ctx.JSON(500, utils.ErrorJson(err))
+		return
+	}
+
+	if premiumTier < premium.Premium {
+		ctx.JSON(402, utils.ErrorStr("You must have premium to customise message appearance"))
+		return
+	}
+
 	var data map[customisation.Colour]utils.HexColour
 	if err := ctx.BindJSON(&data); err != nil {
 		ctx.JSON(400, utils.ErrorJson(err))

app/http/endpoints/api/premium.go

@@ -6,6 +6,7 @@ import (
 	"github.com/TicketsBot/GoPanel/utils"
 	"github.com/TicketsBot/common/premium"
 	"github.com/gin-gonic/gin"
+	"strconv"
 )
 
 func PremiumHandler(ctx *gin.Context) {
@@ -20,7 +21,10 @@ func PremiumHandler(ctx *gin.Context) {
 		return
 	}
 
-	premiumTier, err := rpc.PremiumClient.GetTierByGuildId(guildId, true, botContext.Token, botContext.RateLimiter)
+	// If error, will default to false
+	includeVoting, _ := strconv.ParseBool(ctx.Query("include_voting"))
+
+	premiumTier, err := rpc.PremiumClient.GetTierByGuildId(guildId, includeVoting, botContext.Token, botContext.RateLimiter)
 	if err != nil {
 		ctx.JSON(500, utils.ErrorJson(err))
 		return

frontend/src/components/NavElement.svelte

@@ -35,6 +35,12 @@
         cursor: pointer;
     }
 
+    :global(.link-blue) {
+        color: #3472f7;
+        text-decoration: none;
+        cursor: pointer;
+    }
+
     .icon {
         width: 24px;
     }

frontend/src/components/form/Colour.svelte

@@ -1,6 +1,6 @@
 <div class:col-1={col1} class:col-2={col2} class:col-3={col3} class:col-4={col4}>
   <label for="input" class="form-label">{label}</label>
-  <input id="input" class="form-input" type="color" on:input on:change bind:value={value}>
+  <input id="input" class="form-input" type="color" on:input on:change bind:value={value} {disabled}>
 </div>
 
 <style>
@@ -12,6 +12,7 @@
 <script>
     export let value;
     export let label;
+    export let disabled = false;
 
     export let col1 = false;
     export let col2 = false;

frontend/src/views/Appearance.svelte

@@ -1,24 +1,30 @@
 <div class="parent">
   <div class="content">
+    <div class="container">
       <Card footer={false}>
         <span slot="title">Looking for whitelabel?</span>
         <div slot="body" class="body-wrapper">
           <p>If you're looking for whitelabel settings (customising bot name and avatar), this is managed on a separate
-          page, <Navigate to="/whitelabel" styles="link row">available here</Navigate>.
+            page, <Navigate to="/whitelabel" styles="link-blue">available here</Navigate>.
           </p>
         </div>
       </Card>
-
-    <Card footer={false}>
-      <span slot="title">Colour Scheme</span>
-      <div slot="body" class="body-wrapper">
-        <form class="settings-form" on:submit|preventDefault={updateColours}>
-          <div class="row">
-            <Colour col3={true} label="Success" bind:value={colours["0"]} />
-            <Colour col3={true} label="Failure" bind:value={colours["1"]} />
     </div>
 
-          <div class="row">
+    <div class="container">
+      <Card footer={false}>
+        <div slot="title" class="row">
+          Colour Scheme
+          <Badge>Premium</Badge>
+        </div>
+        <div slot="body" class="body-wrapper">
+          <form class="settings-form" on:submit|preventDefault={updateColours}>
+            <div class="row colour-picker-row">
+              <Colour col3={true} label="Success" bind:value={colours["0"]} disabled={!isPremium} />
+              <Colour col3={true} label="Failure" bind:value={colours["1"]} disabled={!isPremium} />
+            </div>
+
+            <div class="row centre">
               <Button icon="fas fa-paper-plane">Submit</Button>
             </div>
           </form>
@@ -26,6 +32,7 @@
       </Card>
     </div>
   </div>
+</div>
 
 <script>
   import Card from "../components/Card.svelte";
@@ -36,11 +43,13 @@
   import {Navigate} from "svelte-router-spa";
   import Colour from "../components/form/Colour.svelte";
   import Button from "../components/Button.svelte";
+  import Badge from "../components/Badge.svelte";
 
   export let currentRoute;
   let guildId = currentRoute.namedParams.id;
 
   let colours = {};
+  let isPremium = false;
 
   async function updateColours() {
     const res = await axios.post(`${API_URL}/api/${guildId}/customisation/colours`, colours);
@@ -62,8 +71,19 @@
     colours = res.data;
   }
 
+  async function loadPremium() {
+    const res = await axios.get(`${API_URL}/api/${guildId}/premium?include_voting=true`);
+    if (res.status !== 200) {
+      notifyError(res.data.error);
+      return;
+    }
+
+    isPremium = res.data.premium;
+  }
+
   withLoadingScreen(async () => {
     setDefaultHeaders();
+    await loadPremium();
     await loadColours();
   });
 </script>
@@ -108,6 +128,20 @@
         margin-bottom: 2%;
     }
 
+    .container {
+        margin-top: 4%;
+    }
+
+    .colour-picker-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+    }
+
+    .centre {
+        justify-content: center;
+    }
+
     @media only screen and (max-width: 950px) {
         .row {
             flex-direction: column;

frontend/src/views/Panels.svelte

@@ -260,7 +260,7 @@
     }
 
     async function loadPremium() {
-        const res = await axios.get(`${API_URL}/api/${guildId}/premium`);
+        const res = await axios.get(`${API_URL}/api/${guildId}/premium?include_voting=false`);
         if (res.status !== 200) {
             notifyError(res.data.error);
             return;

frontend/src/views/TicketView.svelte

@@ -115,7 +115,7 @@
     }
 
     async function loadPremium() {
-        const res = await axios.get(`${API_URL}/api/${guildId}/premium`);
+        const res = await axios.get(`${API_URL}/api/${guildId}/premium?include_voting=true`);
         if (res.status !== 200) {
             notifyError(res.data.error);
             return;

frontend/src/views/Tickets.svelte

@@ -22,7 +22,7 @@
               {/if}
               <td>
                 <Navigate to="/manage/{guildId}/tickets/view/{ticket.id}" styles="link">
-                  <Button type="button"}>View</Button>
+                  <Button type="button">View</Button>
                 </Navigate>
               </td>
             </tr>

go.sum

@@ -13,7 +13,6 @@ github.com/TicketsBot/common v0.0.0-20210910205523-7ce93fba6fa5 h1:IfNrgUB35hs+M
 github.com/TicketsBot/common v0.0.0-20210910205523-7ce93fba6fa5/go.mod h1:SVwX6gKkxRCMbp+qwJIgvQiy/Ut0fUddexEqRB/NTzc=
 github.com/TicketsBot/database v0.0.0-20200516170158-fd8a949aec2c/go.mod h1:eky4tBL+IZ0svPgTT0N/9i6j7ygHDQH3784DW+HgfcA=
 github.com/TicketsBot/database v0.0.0-20210902172951-4e1f8ced84b7/go.mod h1:A4T2uQFIWC/ttCYpfgv7AkPjR09mMRgzG13lgoV/+aI=
-github.com/TicketsBot/database v0.0.0-20211108142700-c406ab0fc1bb h1:hDN153ofF4rmAnA9Rs/j3b/+xazi3QFzQqXSJ6HNgZI=
 github.com/TicketsBot/database v0.0.0-20211108142700-c406ab0fc1bb/go.mod h1:72oWvH/Gq1iKeXCZhVRZn1JFbNVC5iAgERZWTrEarEo=
 github.com/TicketsBot/database v0.0.0-20211109153802-24100e383d78 h1:zzjOyxCdXN1fGDL2Na6Q82EDU96Cfd1vnlafeY1utUQ=
 github.com/TicketsBot/database v0.0.0-20211109153802-24100e383d78/go.mod h1:72oWvH/Gq1iKeXCZhVRZn1JFbNVC5iAgERZWTrEarEo=