refactor: trial copy

components/Modals.ce.vue

@@ -9,14 +9,14 @@ import { useTrialStore } from '~/store/trial';
 
 const { callbackStatus } = storeToRefs(useCallbackActionsStore());
 const { promoVisible } = storeToRefs(usePromoStore());
-const { showModal } = storeToRefs(useTrialStore());
+const { trialModalVisible } = storeToRefs(useTrialStore());
 </script>
 
 <template>
   <div class="relative z-[99999]">
     <UpcCallbackFeedback :open="callbackStatus !== 'ready'" />
     <UpcPromo :open="promoVisible" />
-    <UpcTrial :open="showModal" />
+    <UpcTrial :open="trialModalVisible" />
   </div>
 </template>
 

components/UserProfile/Trial.vue

@@ -11,24 +11,7 @@ withDefaults(defineProps<Props>(), {
 });
 
 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 === 'trialExtend') return 'Extending your free trial by 15 days';
-  if (trialStatus.value === 'trialStart') 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 === 'trialExtend' || trialStatus.value === 'trialStart') return 'Please keep this window open';
-  if (trialStatus.value === 'success') return 'Please wait while the page reloads to install your trial key';
-  return '';
-});
-
-const loading = computed(() => trialStatus.value === 'trialExtend' || trialStatus.value === 'trialStart');
+const { trialModalLoading, trialStatus, trialStatusCopy } = storeToRefs(trialStore);
 
 const close = () => {
   if (trialStatus.value === 'trialStart') return console.debug("[close] not allowed");
@@ -40,16 +23,16 @@ const close = () => {
   <Modal
     @close="close"
     :open="open"
-    :title="heading"
-    :description="subheading"
-    :show-close-x="!loading"
+    :title="trialStatusCopy?.heading"
+    :description="trialStatusCopy?.subheading"
+    :show-close-x="!trialModalLoading"
     max-width="max-w-640px"
   >
     <template #main>
-      <BrandLoading v-if="loading" class="w-[150px] mx-auto my-24px" />
+      <BrandLoading v-if="trialModalLoading" class="w-[150px] mx-auto my-24px" />
     </template>
 
-    <template v-if="!loading" #footer>
+    <template v-if="!trialModalLoading" #footer>
       <div class="w-full max-w-xs flex flex-col items-center gap-y-16px mx-auto">
         <div>
           <button

store/trial.ts

@@ -23,17 +23,38 @@ export const useTrialStore = defineStore('trial', () => {
   type TrialStatus = 'failed' | 'ready' | TrialExtend | TrialStart | 'success';
   const trialStatus = ref<TrialStatus>('ready');
 
-  const showModal = computed(() => trialStatus.value === 'failed' || trialStatus.value === 'trialExtend' || trialStatus.value === 'trialStart');
-
-  // const extend = () => {
-  //   console.debug('[extend]');
-  //   callbackStore.send('https://localhost:8008/connect', [{
-  //     server: {
-  //       ...serverStore.serverAccountPayload,
-  //     },
-  //     type: 'trialExtend',
-  //   }]);
-  // };
+  const trialModalLoading = computed(() => trialStatus.value === 'trialExtend' || trialStatus.value === 'trialStart');
+  const trialModalVisible = computed(() => trialStatus.value === 'failed' || trialStatus.value === 'trialExtend' || trialStatus.value === 'trialStart');
+  interface TrialStatusCopy {
+    heading: string;
+    subheading?: string;
+  }
+  const trialStatusCopy = computed((): TrialStatusCopy | null => {
+    switch (trialStatus.value) {
+      case 'failed':
+        return {
+          heading: 'Trial Key Creation Failed',
+          subheading: 'Key server did not return a trial key. Please try again later.',
+        }
+      case 'trialExtend':
+        return {
+          heading: 'Extending your free trial by 15 days',
+          subheading: 'Please keep this window open',
+        }
+      case 'trialStart':
+        return {
+          heading: 'Starting your free 30 day trial',
+          subheading: 'Please keep this window open',
+        }
+      case 'success':
+        return {
+          heading: 'Trial Key Created',
+          subheading: 'Please wait while the page reloads to install your trial key',
+        }
+      case 'ready':
+        return null;
+    };
+  });
 
   const requestTrial = async (type?: TrialExtend | TrialStart) => {
     console.debug('[requestTrial]');
@@ -88,10 +109,12 @@ export const useTrialStore = defineStore('trial', () => {
 
   return {
     // State
-    showModal,
+    trialModalLoading,
+    trialModalVisible,
     trialStatus,
+    // Getters
+    trialStatusCopy,
     // Actions
-    // extend,
     requestTrial,
     setTrialStatus,
   };