refactor: callback feedback trial expire time

components/UserProfile/CallbackFeedback.vue

@@ -22,7 +22,7 @@ const installKeyStore = useInstallKeyStore();
 
 const { accountActionStatus, accountActionStatusCopy } = storeToRefs(accountStore);
 const { callbackData, callbackStatus } = storeToRefs(callbackActionsStore);
-const { keyUrl, keyInstallStatus, keyInstallStatusCopy } = storeToRefs(installKeyStore);
+const { keyUrl, keyInstallStatus, keyInstallStatusCopy, keyType } = storeToRefs(installKeyStore);
 
 const heading = computed(() => callbackStatus.value === 'loading' ? 'Performing actions' : 'Finished performing actions');
 const subheading = computed(() => callbackStatus.value === 'loading' ? 'Please keep this window open' : '');
@@ -47,6 +47,12 @@ const modalSuccess = computed(() => {
 const reload = () => window.location.reload();
 
 const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value });
+
+watch(callbackStatus, (n, o) => console.debug('[callbackStatus]', n, o));
+watch(accountActionStatus, (n, o) => console.debug('[accountActionStatus]', n, o));
+watch(keyInstallStatus, (n, o) => console.debug('[keyInstallStatus]', n, o));
+watch(modalError, (n, o) => console.debug('[modalError]', n, o));
+watch(modalSuccess, (n, o) => console.debug('[modalSuccess]', n, o));
 </script>
 
 <template>
@@ -59,7 +65,7 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
     <div class="text-16px text-center relative w-full min-h-[20vh] flex flex-col justify-between gap-y-16px">
       <header>
         <h1 class="text-24px font-semibold">{{ heading }}</h1>
-        <p v-if="subheading" class="text-16px opacity-80">{{ subheading }}</p>
+        <p v-if="subheading" class="text-16px opacity-75">{{ subheading }}</p>
       </header>
 
       <!-- <BrandLoading v-if="callbackStatus === 'loading'" class="w-90px mx-auto" /> -->
@@ -70,6 +76,8 @@ const { text, copy, copied, isSupported } = useClipboard({ source: keyUrl.value
         :error="keyInstallStatus === 'failed'"
         :text="keyInstallStatusCopy.text"
       >
+        <UpcUptimeExpire v-if="keyType === 'Trial'" :for-expire="true" class="opacity-75 italic mt-4px" />
+
         <template v-if="keyInstallStatus === 'failed'">
           <div v-if="isSupported" class="flex justify-center">
             <BrandButton

components/UserProfile/UptimeExpire.vue

@@ -5,10 +5,21 @@ import dateFormat from '~/helpers/time/dateFormat';
 import buildStringFromValues from '~/helpers/time/buildTimeString';
 import { useServerStore } from '~/store/server';
 
+export interface Props {
+  forExpire?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  forExpire: false,
+});
+
 const serverStore = useServerStore();
 const { uptime, expireTime, state } = storeToRefs(serverStore);
 
-const uptimeOrExpiredTime = computed(() => {
+const time = computed(() => {
+  if (props.forExpire && expireTime.value) {
+    return expireTime.value;
+  }
   return (state.value === 'TRIAL' || state.value === 'EEXPIRED') && expireTime.value && expireTime.value > 0
     ? expireTime.value
     : uptime.value;
@@ -16,10 +27,15 @@ const uptimeOrExpiredTime = computed(() => {
 
 const parsedTime = ref<string>('');
 const formattedTime = computed<string>(() => {
-  return dateFormat(uptimeOrExpiredTime.value);
+  return dateFormat(time.value);
 });
 
-const countUp = computed<boolean>(() => state.value !== 'TRIAL' && state.value !== 'ENOCONN');
+const countUp = computed<boolean>(() => {
+  if (props.forExpire && expireTime.value) {
+    return false;
+  }
+  return state.value !== 'TRIAL' && state.value !== 'ENOCONN';
+});
 
 const output = computed(() => {
   if (!countUp.value || state.value === 'EEXPIRED') {
@@ -38,11 +54,11 @@ const output = computed(() => {
   };
 });
 
-const runDiff = () => parsedTime.value = buildStringFromValues(dateDiff((uptimeOrExpiredTime.value).toString(), countUp.value));
+const runDiff = () => parsedTime.value = buildStringFromValues(dateDiff((time.value).toString(), countUp.value));
 
 let interval: string | number | NodeJS.Timeout | undefined = undefined;
 onBeforeMount(() => {
-  console.debug('[uptimeOrExpiredTime]', uptimeOrExpiredTime.value);
+  console.debug('[time]', time.value);
   console.debug('[state]', state.value);
   console.debug('[countUp]', countUp.value);
   runDiff();

store/installKey.ts

@@ -97,8 +97,9 @@ export const useInstallKeyStore = defineStore('installKey', () => {
     // State
     keyInstallStatus,
     // getters
-    keyUrl,
     keyInstallStatusCopy,
+    keyType,
+    keyUrl,
     // Actions
     install,
   };