feat: start trial from upc

components/Modal.vue

@@ -98,7 +98,7 @@ const ariaLablledById = computed((): string|undefined => props.title ? `ModalTit
             </header>
             <slot name="main"></slot>
 
-            <footer class="text-14px relative -mx-16px -mb-16px sm:-mx-24px sm:-mb-24px p-4 sm:p-6">
+            <footer v-if="$slots['footer']" class="text-14px relative -mx-16px -mb-16px sm:-mx-24px sm:-mb-24px p-4 sm:p-6">
               <div class="absolute z-0 inset-0 opacity-10 bg-beta"></div>
               <div class="relative z-10">
                 <slot name="footer"></slot>

components/Modals.ce.vue

@@ -5,15 +5,18 @@ import '~/assets/main.css';
 
 import { useCallbackActionsStore } from '~/store/callbackActions';
 import { usePromoStore } from '~/store/promo';
+import { useTrialStore } from '~/store/trial';
 
 const { callbackStatus } = storeToRefs(useCallbackActionsStore());
 const { promoVisible } = storeToRefs(usePromoStore());
+const { trialStatus } = storeToRefs(useTrialStore());
 </script>
 
 <template>
   <div class="relative z-[99999]">
     <UpcCallbackFeedback :open="callbackStatus !== 'ready'" />
     <UpcPromo :open="promoVisible" />
+    <UpcTrial :open="trialStatus === 'requestNew' || trialStatus === 'failed'" />
   </div>
 </template>
 

components/UserProfile/CallbackFeedback.vue

@@ -83,6 +83,9 @@ const subheading = computed(() => {
   if (callbackStatus.value === 'success') {
     if (accountActionType.value === 'signIn') return `You're one step closer to enhancing your Unraid experience`;
     if (keyActionType.value === 'purchase') return `Thank you for purchasing an Unraid ${keyType.value} Key!`;
+    if (keyActionType.value === 'replace') return `Your ${keyType.value} Key has been replaced!`;
+    if (keyActionType.value === 'trialExtend') return `Your Trial key has been extended!`;
+    if (keyActionType.value === 'trialStart') return `Your free Trial key provides all the functionality of a Pro Registration key`;
     if (keyActionType.value === 'upgrade') return `Thank you for upgrading to an Unraid ${keyType.value} Key!`;
     return '';
   }
@@ -148,7 +151,7 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
         <UpcCallbackFeedbackStatus
           v-if="showPromoCta"
           :icon="InformationCircleIcon"
-          :text="'Enhance your Unraid experience with Unraid Connect'" />
+          :text="'Enhance your experience with Unraid Connect'" />
 
         <UpcCallbackFeedbackStatus
           v-if="showSignInCta"

components/UserProfile/DropdownLaunchpad.vue

@@ -4,15 +4,17 @@ import { useServerStore } from '~/store/server';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
-const { expireTime, pluginInstalled, state, stateData } = storeToRefs(useServerStore());
+const { expireTime, pluginInstalled, registered, state, stateData } = storeToRefs(useServerStore());
+
+const showConnectCopy = computed(() => (pluginInstalled.value && !registered.value));
 
 const heading = computed(() => {
-  if (pluginInstalled.value) return 'Thank you for installing Connect!';
+  if (showConnectCopy.value) return 'Thank you for installing Connect!';
   return stateData.value.heading;
 });
 
 const subheading = computed(() => {
-  if (pluginInstalled.value) return 'Sign In to your Unraid.net account to get started';
+  if (showConnectCopy.value) return 'Sign In to your Unraid.net account to get started';
   return stateData.value.message;
 });
 
@@ -23,7 +25,7 @@ const showExpireTime = computed(() => {
 
 <template>
   <div class="flex flex-col gap-y-24px w-full min-w-300px md:min-w-[500px] max-w-4xl p-16px">
-    <header :class="{ 'text-center': pluginInstalled }">
+    <header :class="{ 'text-center': showConnectCopy }">
       <h2 class="text-24px text-center font-semibold" v-html="heading" />
       <div v-html="subheading" class="flex flex-col gap-y-8px" />
       <UpcUptimeExpire v-if="showExpireTime" class="opacity-75 mt-12px" />

components/UserProfile/Trial.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { storeToRefs } from "pinia";
+import { useTrialStore } from "~/store/trial";
+
+export interface Props {
+  open?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  open: false,
+});
+
+const trialStore = useTrialStore();
+const { trialStatus } = storeToRefs(trialStore);
+
+const heading = computed(() => {
+  if (trialStatus.value === 'failed') return 'Failed to start your free 30 day trial';
+  if (trialStatus.value === 'requestNew') return 'Starting your free 30 day trial…';
+  if (trialStatus.value === 'success') return 'Free 30 Day Trial Created';
+  return '';
+});
+const subheading = computed(() => {
+  /** @todo show response error */
+  if (trialStatus.value === 'failed') return 'Key server did not return a trial key. Please try again later.';
+  if (trialStatus.value === 'requestNew') return 'Please wait while and keep this window open';
+  if (trialStatus.value === 'success') return 'Please wait while the page reloads to install your trial key';
+  return '';
+});
+
+const close = () => {
+  if (trialStatus.value === 'requestNew') return console.debug("[close] not allowed");
+  trialStore.setTrialStatus('ready');
+};
+</script>
+
+<template>
+  <Modal
+    @close="close"
+    :open="open"
+    :title="heading"
+    :description="subheading"
+    :show-close-x="trialStatus !== 'requestNew'"
+    max-width="max-w-640px"
+  >
+    <template #main>
+      <BrandLoading v-if="trialStatus === 'requestNew'" class="w-[150px] mx-auto my-24px" />
+      <div v-if="trialStatus === 'failed'" class="my-24px">
+        <p class="text-red"></p>
+      </div>
+    </template>
+
+    <template v-if="trialStatus !== 'requestNew'" #footer>
+      <div class="w-full max-w-xs flex flex-col items-center gap-y-16px mx-auto">
+        <div>
+          <button
+            @click="close"
+            class="text-12px tracking-wide inline-block mx-8px opacity-60 hover:opacity-100 focus:opacity-100 underline transition"
+            :title="'Close Modal'"
+          >
+            {{ "Close" }}
+          </button>
+        </div>
+      </div>
+    </template>
+  </Modal>
+</template>