refactor: callback progress

components/CallbackHandler.ce.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { useCallbackStore } from '~/store/callback';
+import { storeToRefs } from 'pinia';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
-import { storeToRefs } from 'pinia';
+
+import { useCallbackStore } from '~/store/callback';
 
 const callbackStore = useCallbackStore();
 

components/UserProfile.ce.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from 'pinia';
 import { OnClickOutside } from '@vueuse/components'
 
+import { useCallbackStore } from '~/store/callback';
 import { useDropdownStore } from '~/store/dropdown';
 import { useServerStore } from '~/store/server';
 import type { Server } from '~/types/server';
@@ -16,6 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
   showDescription: true,
 });
 
+const callbackStore = useCallbackStore();
 const dropdownStore = useDropdownStore()
 const serverStore = useServerStore();
 
@@ -57,10 +59,12 @@ watch(showCopyNotSupported, async (newVal, oldVal) => {
 onBeforeMount(() => {
   console.debug('[onBeforeMount]', { props }, typeof props.server);
   if (!props.server) return console.error('Server data not present');
-  // set props from web component in store so the data is available throughout other components
-  if (typeof props.server === 'object') { // handle the testing dev Vue component
+  /**
+   * Set props from web component in store so the data is available throughout other components
+   */
+  if (typeof props.server === 'object') { // Handles the testing dev Vue component
     serverStore.setServer(props.server);
-  } else if (typeof props.server === 'string') { // handle web component
+  } else if (typeof props.server === 'string') { // Handle web component
     try {
       const parsedServerProp = JSON.parse(props.server);
       serverStore.setServer(parsedServerProp);
@@ -68,10 +72,16 @@ onBeforeMount(() => {
       console.error(e);
     }
   }
+  /**
+   * Listen for callbacks, if we receive one that needs to be acted upon the store will display
+   * the feedback modal to show the user something is happening behind the scenes.
+   */
+  callbackStore.watcher();
 });
 </script>
 
 <template>
+  <UpcCallbackFeedback />
   <UpcPromo />
 
   <div id="UserProfile" class="text-alpha relative z-20 flex flex-col h-full gap-y-4px pl-40px rounded">
@@ -82,7 +92,7 @@ onBeforeMount(() => {
     </div>
 
     <div class="relative z-0 flex flex-row items-center justify-end gap-x-16px h-full">
-      <h1 class="relative text-18px border-t-0 border-r-0 border-l-0 border-b-2 border-transparent">
+      <h1 class="text-alpha relative text-18px border-t-0 border-r-0 border-l-0 border-b-2 border-transparent">
         <template v-if="showDescription">
           <span>{{ description }}</span>
           <span class="text-grey-mid px-8px">&bull;</span>
@@ -99,12 +109,10 @@ onBeforeMount(() => {
 
       <div class="block w-2px h-24px bg-grey-mid"></div>
 
-      <div class="flex items-center justify-end h-full">
-        <OnClickOutside @trigger="outsideDropdown" :options="{ ignore: [clickOutsideIgnoreTarget] }">
-          <UpcDropdownTrigger ref="clickOutsideIgnoreTarget" />
-          <UpcDropdown ref="clickOutsideTarget" />
-        </OnClickOutside>
-      </div>
+      <OnClickOutside class="flex items-center justify-end h-full" @trigger="outsideDropdown" :options="{ ignore: [clickOutsideIgnoreTarget] }">
+        <UpcDropdownTrigger ref="clickOutsideIgnoreTarget" />
+        <UpcDropdown ref="clickOutsideTarget" />
+      </OnClickOutside>
     </div>
   </div>
 </template>

components/UserProfile/CallbackFeedback.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia';
+import 'tailwindcss/tailwind.css';
+import '~/assets/main.css';
+
+import { useCallbackStore } from '~/store/callback';
+
+const callbackStore = useCallbackStore();
+const { callbackFeedbackVisible, decryptedData } = storeToRefs(callbackStore);
+onBeforeMount(() => {
+  callbackStore.watcher();
+});
+</script>
+
+<template>
+  <Modal
+    :open="callbackFeedbackVisible"
+    @close="callbackStore.hide()"
+    max-width="max-w-800px"
+  >
+    <div class="text-center relative w-full flex flex-col gap-y-16px">
+      <header>
+        <h1 class="text-24px font-semibold flex flex-wrap justify-center gap-x-1">Callback Feedback</h1>
+      </header>
+
+      <BrandLoading class="w-90px mx-auto" />
+      <pre class="text-left text-black p-8px w-full overflow-scroll bg-gray-400">{{ JSON.stringify(decryptedData, null, 2) }}</pre>
+
+      <div class="w-full max-w-xs flex flex-col gap-y-16px mx-auto">
+        <button
+          @click="callbackStore.hide()"
+          class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
+          :title="'Close Promo'"
+        >
+          {{ 'Close' }}
+        </button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style lang="postcss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>

components/UserProfile/DropdownError.vue

@@ -22,10 +22,10 @@ const links = ref<UserProfileLink[]>([
 </script>
 
 <template>
-  <ul v-if="stateData.error" class="list-reset flex flex-col gap-y-4px p-12px -mx-4px bg-red/20">
-    <h3>{{ stateData.error.heading }}</h3>
-    <p>{{ stateData.error.message }}</p>
-    <li v-for="(link, index) in links" :key="`link_${index}`" class="-mx-8px">
+  <ul v-if="stateData.error" class="list-reset flex flex-col gap-y-4px -mx-8px p-12px bg-red/40 rounded">
+    <h3 class="text-18px">{{ stateData.heading }}</h3>
+    <p class="text-14px opacity-85">{{ stateData.message }}</p>
+    <li v-for="(link, index) in links" :key="`link_${index}`" class="-mx-">
       <UpcDropdownItem :item="link" />
     </li>
   </ul>

components/UserProfile/DropdownTrigger.vue

@@ -44,12 +44,8 @@ const title = computed((): string => {
   >
     <InformationCircleIcon v-if="pluginOutdated" class="text-red fill-current relative w-24px h-24px" />
     <ExclamationTriangleIcon v-else-if="showErrorIcon" class="text-red fill-current relative w-24px h-24px" />
-
-    <span class="flex flex-row items-center gap-x-8px">
-      <span class="leading-none">{{ text }}</span>
-      <UpcDropdownTriggerMenuIcon :open="dropdownVisible" />
-    </span>
-
+    <span v-if="text" class="leading-none">{{ text }}</span>
+    <UpcDropdownTriggerMenuIcon :open="dropdownVisible" />
     <BrandAvatar />
   </button>
 </template>

components/UserProfile/Promo.vue

@@ -88,7 +88,7 @@ const installButtonClasses = 'text-white text-14px text-center w-full flex flex-
           <Switch v-model="installStaging" :class="[installStaging ? 'bg-indigo-600' : 'bg-gray-200', 'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2']">
             <span aria-hidden="true" :class="[installStaging ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out']" />
           </Switch>
-          <SwitchLabel as="span" class="ml-3 text-sm">
+          <SwitchLabel as="span" class="ml-3 text-12px">
             <span class="font-semibold">Install Staging</span>
           </SwitchLabel>
         </SwitchGroup>

components/UserProfile/ServerStateBuy.vue

@@ -1,6 +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">
+  <button class="text-12px 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>