From 7ad55473281d4e8e300386f9113a444d1b55b912 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 1 Jun 2023 00:27:07 -0700
Subject: [PATCH] fix: server state buy component

---
 components/UserProfile/ServerState.vue    | 69 ++++++++++-------------
 components/UserProfile/ServerStateBuy.vue |  6 ++
 2 files changed, 37 insertions(+), 38 deletions(-)
 create mode 100644 components/UserProfile/ServerStateBuy.vue

diff --git a/components/UserProfile/ServerState.vue b/components/UserProfile/ServerState.vue
index 5392cfcb3..6853510c6 100644
--- a/components/UserProfile/ServerState.vue
+++ b/components/UserProfile/ServerState.vue
@@ -1,46 +1,39 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { useServerStore } from '~/store/server';
-const serverStore = useServerStore();
-const { state, stateData } = storeToRefs(serverStore);
+import type { ServerStateDataAction } from '~/types/server';
+
+const { state, stateData } = storeToRefs(useServerStore());
+
+const purchaseAction = computed((): ServerStateDataAction | undefined => {
+  return stateData.value.actions && stateData.value.actions.find(action => action.name === 'purchase');
+});
+const upgradeAction = computed((): ServerStateDataAction | undefined => {
+  return stateData.value.actions && stateData.value.actions.find(action => action.name === 'upgrade');
+});
 </script>
 
 <template>
-  <template v-if="stateData.actions.includes('upgrade')">
-    <button
-      @click="console.log('TODO-UPGRADE_LINK')"
-      class="link text-gamma"
-      :title="'Upgrade'"
-    >
-      <h5>Unraid OS <em><strong>{{ stateData.humanReadable }}</strong></em></h5>
-    </button>
-  </template>
-  <h5 v-else>
-    Unraid OS <em :class="{ 'text-red': stateData.error || state === 'EEXPIRED' }"><strong>{{ stateData.humanReadable }}</strong></em>
-  </h5>
+  <span class="flex flex-row items-center gap-x-8px">
+    <template v-if="upgradeAction">
+      <UpcServerStateBuy
+        @click="upgradeAction.click()"
+        class="text-gamma"
+        :title="'Upgrade'"
+      >
+        <h5>Unraid OS <em><strong>{{ stateData.humanReadable }}</strong></em></h5>
+      </UpcServerStateBuy>
+    </template>
+    <h5 v-else>
+      Unraid OS <em :class="{ 'text-red': stateData.error || state === 'EEXPIRED' }"><strong>{{ stateData.humanReadable }}</strong></em>
+    </h5>
 
-  <template v-if="stateData.actions.includes('purchase')">
-    <button
-      @click="console.log('TODO-PURCHASE_LINK')"
-      class="link text-orange-dark ml-3"
-      :title="'Purchase'"
-    >{{ 'Purchase' }}</button>
-  </template>
+    <template v-if="purchaseAction">
+      <UpcServerStateBuy
+        @click="purchaseAction.click()"
+        class="text-orange-dark"
+        :title="'Purchase'"
+      >{{ 'Purchase' }}</UpcServerStateBuy>
+    </template>
+  </span>
 </template>
-
-
-<style lang="postcss" scoped>
-.link {
-  @apply text-sm font-semibold transition-colors duration-150 ease-in-out border-t-0 border-l-0 border-r-0 border-b-2 border-transparent;
-}
-
-.link:hover,
-.link:focus {
-  /* @apply text-alpha; */
-  @apply border-orange-dark;
-}
-
-.link:focus {
-  @apply outline-none;
-}
-</style>
\ No newline at end of file
diff --git a/components/UserProfile/ServerStateBuy.vue b/components/UserProfile/ServerStateBuy.vue
new file mode 100644
index 000000000..d5f9117c9
--- /dev/null
+++ b/components/UserProfile/ServerStateBuy.vue
@@ -0,0 +1,6 @@
+
+<template>
+  <button class="text-sm font-semibold transition-colors duration-150 ease-in-out border-t-0 border-l-0 border-r-0 border-b-2 border-transparent hover:border-orange-dark focus:border-orange-dark focus:outline-none">
+    <slot />
+  </button>
+</template>