From 93649d05574c20892071d2f11a936ae9b269a909 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Thu, 5 Oct 2023 17:45:41 -0700
Subject: [PATCH] refactor(web): update ineligible text + DateTime helper
 exports

---
 web/_data/serverState.ts                      |  3 +-
 web/components/DowngradeOs.ce.vue             |  2 +-
 web/components/Registration.ce.vue            |  6 +--
 .../Registration/UpdateExpiration.vue         | 34 ++++---------
 .../Registration/UpdateExpirationAction.vue   | 50 ++++++++-----------
 web/components/UpdateOs.ce.vue                |  5 +-
 web/components/UpdateOs/Downgrade.vue         | 13 ++---
 web/components/UpdateOs/Status.vue            | 38 +++++---------
 web/components/UpdateOs/Update.vue            | 15 ++----
 web/components/UpdateOs/UpdateIneligible.vue  | 45 ++++++++---------
 web/components/UserProfile/UptimeExpire.vue   | 44 ++++++----------
 web/composables/time.ts                       | 39 +++++++++++++--
 web/locales/en_US.json                        |  6 ++-
 web/store/updateOsActions.ts                  |  4 +-
 14 files changed, 139 insertions(+), 165 deletions(-)

diff --git a/web/_data/serverState.ts b/web/_data/serverState.ts
index 62bfa64d4..c840942c3 100644
--- a/web/_data/serverState.ts
+++ b/web/_data/serverState.ts
@@ -61,6 +61,7 @@ switch (state) {
 }
 
 const uptime = Date.now() - 60 * 60 * 1000; // 1 hour ago
+const twoDaysAgo = Date.now() - 2 * 24 * 60 * 60 * 1000; // 2 days ago
 const oneDayAgo = Date.now() - 24 * 60 * 60 * 1000; // 1 day ago
 const oneHourFromNow = Date.now() + 60 * 60 * 1000; // 1 hour from now
 const oneDayFromNow = Date.now() + 24 * 60 * 60 * 1000; // 1 day from now
@@ -106,7 +107,7 @@ export const serverState: Server = {
   // registered: connectPluginInstalled ? true : false,
   registered: connectPluginInstalled ? false : true,
   regGen: 0,
-  regTm: uptime,
+  regTm: twoDaysAgo,
   regTo: 'Zack Spear',
   regTy,
   regExp,
diff --git a/web/components/DowngradeOs.ce.vue b/web/components/DowngradeOs.ce.vue
index 638cfc976..9234e0c63 100644
--- a/web/components/DowngradeOs.ce.vue
+++ b/web/components/DowngradeOs.ce.vue
@@ -41,7 +41,7 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
 
 <template>
   <UiPageContainer>
-    <UpdateOsStatus :t="t" />
+    <UpdateOsStatus :title="t('Downgrade Unraid OS')" :t="t" />
     <UpdateOsDowngrade
       v-if="restoreVersion && rebootType === ''"
       :release-date="restoreReleaseDate"
diff --git a/web/components/Registration.ce.vue b/web/components/Registration.ce.vue
index 23025c857..5987bbad2 100644
--- a/web/components/Registration.ce.vue
+++ b/web/components/Registration.ce.vue
@@ -25,7 +25,7 @@ import dayjs from 'dayjs'
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
-import useTimeHelper from '~/composables/time';
+import useDateTimeHelper from '~/composables/time';
 import { useServerStore } from '~/store/server';
 import type { RegistrationItemProps } from '~/types/registration';
 
@@ -56,7 +56,7 @@ const {
   stateDataError,
 } = storeToRefs(serverStore);
 
-const { formatDate } = useTimeHelper(dateTimeFormat.value, t);
+const { outputDateTimeFormatted: formattedRegTm } = useDateTimeHelper(dateTimeFormat.value, t, false, regTm.value);
 
 const devicesAvailable = computed((): number => {
   switch(regTy.value) {
@@ -99,7 +99,7 @@ const items = computed((): RegistrationItemProps[] => {
        }] : []),
     ...(regTo.value && regTm.value ? [{
         label: t('Registered on'),
-        text: formatDate(regTm.value),
+        text: formattedRegTm.value,
       }] : []),
     ...(regExp.value && (state.value === 'STARTER' || state.value === 'UNLEASHED') ? [{
           label: t('OS Update Eligibility'),
diff --git a/web/components/Registration/UpdateExpiration.vue b/web/components/Registration/UpdateExpiration.vue
index db8e3e480..9b38c712d 100644
--- a/web/components/Registration/UpdateExpiration.vue
+++ b/web/components/Registration/UpdateExpiration.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 
-import useTimeHelper from '~/composables/time';
+import useDateTimeHelper from '~/composables/time';
 import { useServerStore } from '~/store/server';
 
 export interface Props {
@@ -16,10 +16,10 @@ const props = withDefaults(defineProps<Props>(), {
 const serverStore = useServerStore();
 const { dateTimeFormat, regExp, regUpdatesExpired } = storeToRefs(serverStore);
 
-const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t, true);
-
-const parsedTime = ref<string>('');
-const formattedTime = computed<string>(() => formatDate(regExp.value));
+const {
+  outputDateTimeReadableDiff,
+  outputDateTimeFormatted,
+} = useDateTimeHelper(dateTimeFormat.value, props.t, true, regExp.value);
 
 const output = computed(() => {
   if (!regExp.value) {
@@ -27,29 +27,13 @@ const output = computed(() => {
   }
   return {
     text: regUpdatesExpired.value
-      ? props.t('Ineligible for updates released after {0}', [formattedTime.value])
-      : props.t('Eligible for updates until {0}', [formattedTime.value]),
+      ? props.t('Ineligible for updates released after {0}', [outputDateTimeFormatted.value])
+      : props.t('Eligible for updates until {0}', [outputDateTimeFormatted.value]),
     title: regUpdatesExpired.value
-      ? props.t('Ineligible as of {0}', [parsedTime.value])
-      : props.t('Eligible for updates for {0}', [parsedTime.value]),
+      ? props.t('Ineligible as of {0}', [outputDateTimeReadableDiff.value])
+      : props.t('Eligible for updates for {0}', [outputDateTimeReadableDiff.value]),
   };
 });
-
-const runDiff = () => {
-  parsedTime.value = buildStringFromValues(dateDiff((regExp.value).toString(), false));
-};
-
-let interval: string | number | NodeJS.Timeout | undefined;
-onBeforeMount(() => {
-  runDiff();
-  interval = setInterval(() => {
-    runDiff();
-  }, 1000);
-});
-
-onBeforeUnmount(() => {
-  clearInterval(interval);
-});
 </script>
 
 <template>
diff --git a/web/components/Registration/UpdateExpirationAction.vue b/web/components/Registration/UpdateExpirationAction.vue
index 7d319986c..632985053 100644
--- a/web/components/Registration/UpdateExpirationAction.vue
+++ b/web/components/Registration/UpdateExpirationAction.vue
@@ -2,10 +2,11 @@
 import { ArrowPathIcon, ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
 import { storeToRefs } from 'pinia';
 
-import useTimeHelper from '~/composables/time';
+import useDateTimeHelper from '~/composables/time';
 import { DOCS_REGISTRATION_LICENSING } from '~/helpers/urls';
 import { useReplaceRenewStore } from '~/store/replaceRenew';
 import { useServerStore } from '~/store/server';
+import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
 
 export interface Props {
   t: any;
@@ -15,6 +16,8 @@ const props = defineProps<Props>();
 
 const replaceRenewStore = useReplaceRenewStore();
 const serverStore = useServerStore();
+const updateOsStore = useUpdateOsStore();
+const updateOsActionsStore = useUpdateOsActionsStore();
 
 const { renewStatus } = storeToRefs(replaceRenewStore);
 const {
@@ -22,16 +25,19 @@ const {
   regExp,
   regUpdatesExpired,
   renewAction,
+  regTy,
 } = storeToRefs(serverStore);
+const { availableWithRenewal } = storeToRefs(updateOsStore);
+const { ineligibleText } = storeToRefs(updateOsActionsStore);
 
 const reload = () => {
   window.location.reload();
 };
 
-const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t);
-
-const parsedTime = ref<string>('');
-const formattedTime = computed<string>(() => formatDate(regExp.value));
+const {
+  outputDateTimeReadableDiff: readableDiffRegExp,
+  outputDateTimeFormatted: formattedRegExp,
+} = useDateTimeHelper(dateTimeFormat.value, props.t, true, regExp.value);
 
 const output = computed(() => {
   if (!regExp.value) {
@@ -39,42 +45,26 @@ const output = computed(() => {
   }
   return {
     text: regUpdatesExpired.value
-      ? props.t('Ineligible for updates released after {0}', [formattedTime.value])
-      : props.t('Eligible for updates until {0}', [formattedTime.value]),
+      ? props.t('Ineligible for updates released after {0}', [formattedRegExp.value])
+      : props.t('Eligible for updates until {0}', [formattedRegExp.value]),
     title: regUpdatesExpired.value
-      ? props.t('Ineligible as of {0}', [parsedTime.value])
-      : props.t('Eligible for updates for {0}', [parsedTime.value]),
+      ? props.t('Ineligible as of {0}', [readableDiffRegExp.value])
+      : props.t('Eligible for updates for {0}', [readableDiffRegExp.value]),
   };
 });
-
-const runDiff = () => {
-  parsedTime.value = buildStringFromValues(dateDiff((regExp.value).toString(), false));
-};
-
-let interval: string | number | NodeJS.Timeout | undefined;
-onBeforeMount(() => {
-  runDiff();
-  interval = setInterval(() => {
-    runDiff();
-  }, 1000);
-});
-
-onBeforeUnmount(() => {
-  clearInterval(interval);
-});
 </script>
 
 <template>
   <div v-if="output" class="flex flex-col gap-8px">
     <RegistrationUpdateExpiration :t="t" />
 
-    <p v-if="renewStatus === 'installed' || regUpdatesExpired" class="text-14px opacity-90">
+    <p class="text-14px opacity-90">
       <template v-if="renewStatus === 'installed'">
         {{ t('Your license key was automatically renewed and installed. Reload the page to see updated details.') }}
       </template>
-      <em v-else-if="regUpdatesExpired">
-        {{ t('Pay your annual fee to continue receiving OS updates.') }} {{ t('You may still update to releases dated prior to your update expiration date.') }}
-      </em>
+      <template v-else-if="regUpdatesExpired && ineligibleText">
+        {{ t(ineligibleText, [regTy, formattedRegExp]) }}
+      </template>
     </p>
     <div class="flex flex-wrap items-start justify-between gap-8px">
       <BrandButton
@@ -91,7 +81,7 @@ onBeforeUnmount(() => {
         :icon="renewAction.icon"
         :icon-right="ArrowTopRightOnSquareIcon"
         :icon-right-hover-display="true"
-        :text="t('Renew Key')"
+        :text="t('Extend License')"
         @click="renewAction.click()"
         :title="t('Pay your annual fee to continue receiving OS updates.')"
         class="flex-grow"
diff --git a/web/components/UpdateOs.ce.vue b/web/components/UpdateOs.ce.vue
index 96e854c5f..95717cd30 100644
--- a/web/components/UpdateOs.ce.vue
+++ b/web/components/UpdateOs.ce.vue
@@ -34,7 +34,10 @@ const { rebootType } = storeToRefs(updateOsActionsStore);
 
 <template>
   <UiPageContainer>
-    <UpdateOsStatus :showUpdateCheck="true" :t="t" />
+    <UpdateOsStatus
+      :showUpdateCheck="true"
+      :title="t('Update Unraid OS')"
+      :t="t" />
     <UpdateOsUpdateIneligible
       v-if="availableWithRenewal && rebootType === ''"
       :t="t" />
diff --git a/web/components/UpdateOs/Downgrade.vue b/web/components/UpdateOs/Downgrade.vue
index f9d4cf2cd..129a131af 100644
--- a/web/components/UpdateOs/Downgrade.vue
+++ b/web/components/UpdateOs/Downgrade.vue
@@ -14,7 +14,7 @@ import { ref } from 'vue';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
-import useTimeHelper from '~/composables/time';
+import useDateTimeHelper from '~/composables/time';
 import { FORUMS_BUG_REPORT } from '~/helpers/urls';
 import { useServerStore } from '~/store/server';
 import type { UserProfileLink } from '~/types/userProfile';
@@ -27,14 +27,9 @@ const props = defineProps<{
 
 const serverStore = useServerStore();
 const { dateTimeFormat } = storeToRefs(serverStore);
-const { formatDate } = useTimeHelper(dateTimeFormat.value, props.t, true);
-
-const formattedReleaseDate = computed(() => {
-  if (props.releaseDate) {
-    return formatDate(dayjs(props.releaseDate, 'YYYY-MM-DD').valueOf());
-  }
-  return '';
-});
+const {
+  outputDateTimeFormatted: formattedReleaseDate,
+} = useDateTimeHelper(dateTimeFormat.value, props.t, true, dayjs(props.releaseDate, 'YYYY-MM-DD').valueOf());
 
 const downgradeButton = ref<UserProfileLink | undefined>({
   click: () => {
diff --git a/web/components/UpdateOs/Status.vue b/web/components/UpdateOs/Status.vue
index 82274ab86..2a0c06665 100644
--- a/web/components/UpdateOs/Status.vue
+++ b/web/components/UpdateOs/Status.vue
@@ -9,7 +9,7 @@ import {
 import { storeToRefs } from 'pinia';
 
 import { WEBGUI_TOOLS_REGISTRATION } from '~/helpers/urls';
-import useTimeHelper from '~/composables/time';
+import useDateTimeHelper from '~/composables/time';
 import { useServerStore } from '~/store/server';
 import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
 
@@ -17,10 +17,12 @@ export interface Props {
   restoreVersion?: string | undefined;
   showUpdateCheck?: boolean;
   t: any;
+  title?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
   restoreVersion: undefined,
   showUpdateCheck: false,
+  title: undefined,
 });
 
 const serverStore = useServerStore();
@@ -31,10 +33,10 @@ const { dateTimeFormat, osVersion, regExp, regUpdatesExpired } = storeToRefs(ser
 const { available, availableWithRenewal, parsedReleaseTimestamp } = storeToRefs(updateOsStore);
 const { ineligibleText, rebootType, rebootTypeText } = storeToRefs(updateOsActionsStore);
 
-const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t, true);
-
-const parsedTime = ref<string>('');
-const formattedTime = computed<string>(() => formatDate(regExp.value));
+const {
+  outputDateTimeReadableDiff: readableDiffRegExp,
+  outputDateTimeFormatted: formattedRegExp,
+} = useDateTimeHelper(dateTimeFormat.value, props.t, true, regExp.value);
 
 const regExpOutput = computed(() => {
   if (!regExp.value) {
@@ -42,34 +44,18 @@ const regExpOutput = computed(() => {
   }
   return {
     text: regUpdatesExpired.value
-      ? props.t('Ineligible for updates released after {0}', [formattedTime.value])
-      : props.t('Eligible for updates until {0}', [formattedTime.value]),
+      ? props.t('Ineligible for updates released after {0}', [formattedRegExp.value])
+      : props.t('Eligible for updates until {0}', [formattedRegExp.value]),
     title: regUpdatesExpired.value
-      ? props.t('Ineligible as of {0}', [parsedTime.value])
-      : props.t('Eligible for updates for {0}', [parsedTime.value]),
+      ? props.t('Ineligible as of {0}', [readableDiffRegExp.value])
+      : props.t('Eligible for updates for {0}', [readableDiffRegExp.value]),
   };
 });
-
-const runDiff = () => {
-  parsedTime.value = buildStringFromValues(dateDiff((regExp.value).toString(), false));
-};
-
-let interval: string | number | NodeJS.Timeout | undefined;
-onBeforeMount(() => {
-  runDiff();
-  interval = setInterval(() => {
-    runDiff();
-  }, 1000);
-});
-
-onBeforeUnmount(() => {
-  clearInterval(interval);
-});
 </script>
 
 <template>
   <div class="grid gap-y-16px">
-    <h1 class="text-24px">{{ t('Update Unraid OS') }}</h1>
+    <h1 v-if="title" class="text-24px">{{ title }}</h1>
     <div class="flex flex-col md:flex-row gap-16px justify-start md:items-start md:justify-between">
       <div class="inline-flex flex-wrap justify-start gap-8px">
         <button
diff --git a/web/components/UpdateOs/Update.vue b/web/components/UpdateOs/Update.vue
index 75a198d4a..1d3d71d6f 100644
--- a/web/components/UpdateOs/Update.vue
+++ b/web/components/UpdateOs/Update.vue
@@ -22,7 +22,7 @@ import { ref, watchEffect } from 'vue';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
-import useTimeHelper from '~/composables/time';
+import useDateTimeHelper from '~/composables/time';
 import { useServerStore } from '~/store/server';
 import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
 import type { UserProfileLink } from '~/types/userProfile';
@@ -34,7 +34,6 @@ const props = defineProps<{
 
 const serverStore = useServerStore();
 const { dateTimeFormat } = storeToRefs(serverStore);
-const { formatDate } = useTimeHelper(dateTimeFormat.value, props.t, true);
 
 const updateOsStore = useUpdateOsStore();
 const updateOsActionsStore = useUpdateOsActionsStore();
@@ -43,6 +42,9 @@ const { connectPluginInstalled, flashBackupActivated } = storeToRefs(useServerSt
 const { available } = storeToRefs(updateOsStore);
 
 const release = computed(() => updateOsStore.findRelease('version', available.value) ?? undefined);
+const {
+  outputDateTimeFormatted: formattedReleaseDate,
+} = useDateTimeHelper(dateTimeFormat.value, props.t, true, dayjs(release.value?.date ?? '', 'YYYY-MM-DD').valueOf());
 
 const updateButton = ref<UserProfileLink | undefined>();
 
@@ -60,13 +62,6 @@ const headingIcon = computed(() => {
   return ArrowPathIcon;
 });
 
-const formattedReleaseDate = computed(() => {
-  if (release.value?.date) {
-    return formatDate(dayjs(release.value?.date, 'YYYY-MM-DD').valueOf());
-  }
-  return '';
-});
-
 const flashBackupCopy = computed(() => {
   const base = props.t('We recommend backing up your USB Flash Boot Device before starting the update.');
   if (connectPluginInstalled.value && flashBackupActivated.value) {
@@ -149,7 +144,7 @@ watchEffect(() => {
               {{ heading }}
             </span>
             <span
-              v-if="formattedReleaseDate"
+              v-if="release && formattedReleaseDate"
               class="text-16px opacity-75 shrink"
             >
               {{ formattedReleaseDate }}
diff --git a/web/components/UpdateOs/UpdateIneligible.vue b/web/components/UpdateOs/UpdateIneligible.vue
index 5400cdfd3..58d344b4a 100644
--- a/web/components/UpdateOs/UpdateIneligible.vue
+++ b/web/components/UpdateOs/UpdateIneligible.vue
@@ -13,7 +13,7 @@ import { ref, watchEffect } from 'vue';
 import 'tailwindcss/tailwind.css';
 import '~/assets/main.css';
 
-import useTimeHelper from '~/composables/time';
+import useDateTimeHelper from '~/composables/time';
 import { useServerStore } from '~/store/server';
 import { useUpdateOsStore, useUpdateOsActionsStore } from '~/store/updateOsActions';
 import type { UserProfileLink } from '~/types/userProfile';
@@ -26,13 +26,12 @@ const serverStore = useServerStore();
 const updateOsStore = useUpdateOsStore();
 const updateOsActionsStore = useUpdateOsActionsStore();
 
-const { dateTimeFormat } = storeToRefs(serverStore);
-const { available, availableWithRenewal } = storeToRefs(updateOsStore);
+const { dateTimeFormat, regTy, renewAction } = storeToRefs(serverStore);
+const { availableWithRenewal } = storeToRefs(updateOsStore);
 const { ineligibleText } = storeToRefs(updateOsActionsStore);
 
-const { formatDate } = useTimeHelper(dateTimeFormat.value, props.t, true);
-
 const availableWithRenewalRelease = computed(() => updateOsStore.findRelease('version', availableWithRenewal.value) ?? undefined);
+const { outputDateTimeFormatted: formattedReleaseDate } = useDateTimeHelper(dateTimeFormat.value, props.t, true, dayjs(availableWithRenewalRelease.value?.date, 'YYYY-MM-DD').valueOf());
 
 const heading = computed((): string => {
   if (availableWithRenewal.value) {
@@ -41,20 +40,8 @@ const heading = computed((): string => {
   return props.t('License Key Updates Expired');
 });
 
-// const subheading = computed(() => {
-//   if (availableWithRenewal.value) {
-//     return props.t('Your license key is not eligible for Unraid OS {0}', [availableWithRenewal.value]);
-//   }
-//   return '';
-// });
-
-const text = computed((): string => {
-  const base = ineligibleText.value;
-  if (available.value) {
-    return `<p>${base}</p>
-            <p>${props.t('You may still update to releases dated prior to your update expiration date.')}</p>`;
-  }
-  return base;
+const text = computed(() => {
+  return props.t(ineligibleText.value, [regTy.value, formattedReleaseDate.value]);
 });
 
 const updateButton = ref<UserProfileLink | undefined>();
@@ -81,10 +68,10 @@ watchEffect(() => {
               {{ heading }}
             </span>
             <span
-              v-if="availableWithRenewalRelease && availableWithRenewalRelease.date"
+              v-if="availableWithRenewalRelease && availableWithRenewalRelease.date && formattedReleaseDate"
               class="text-16px opacity-75 shrink"
             >
-              {{ formatDate(dayjs(availableWithRenewalRelease.date, 'YYYY-MM-DD').valueOf()) }}
+              {{ formattedReleaseDate }}
             </span>
           </span>
         </h3>
@@ -93,17 +80,29 @@ watchEffect(() => {
           <RegistrationUpdateExpiration :t="t" />
         </h4>
 
-        <div class="prose text-black text-16px leading-relaxed whitespace-normal" v-html="text" />
+        <div
+          class="prose text-black text-16px leading-relaxed whitespace-normal"
+          v-html="text" />
       </div>
 
       <div class="flex flex-col sm:flex-shrink-0 items-center gap-16px">
         <BrandButton
+          :disabled="renewAction?.disabled"
+          :external="renewAction?.external"
+          :icon="renewAction.icon"
+          :icon-right="ArrowTopRightOnSquareIcon"
+          :text="t('Extend License')"
+          @click="renewAction.click()"
+          :title="t('Pay your annual fee to continue receiving OS updates.')"
+          class="flex-grow"
+        />
+        <!-- <BrandButton
           btn-style="black"
           href="/Tools/Registration"
           :icon="WrenchScrewdriverIcon"
           :icon-right="ArrowSmallRightIcon"
           :text="t('Learn more and fix')"
-          class="flex-none" />
+          class="flex-none" /> -->
 
         <BrandButton
           v-if="availableWithRenewal && updateButton"
diff --git a/web/components/UserProfile/UptimeExpire.vue b/web/components/UserProfile/UptimeExpire.vue
index e6b690c30..6794cb479 100644
--- a/web/components/UserProfile/UptimeExpire.vue
+++ b/web/components/UserProfile/UptimeExpire.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 
-import useTimeHelper from '~/composables/time';
+import useDateTimeHelper from '~/composables/time';
 import { useServerStore } from '~/store/server';
 
 export interface Props {
@@ -18,20 +18,15 @@ const props = withDefaults(defineProps<Props>(), {
 const serverStore = useServerStore();
 const { dateTimeFormat, uptime, expireTime, state } = storeToRefs(serverStore);
 
-const { buildStringFromValues, dateDiff, formatDate } = useTimeHelper(dateTimeFormat.value, props.t);
-
 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;
+  ? expireTime.value
+  : uptime.value;
 });
 
-const parsedTime = ref<string>('');
-const formattedTime = computed<string>(() => formatDate(time.value));
-
 const countUp = computed<boolean>(() => {
   if (props.forExpire && expireTime.value) {
     return false;
@@ -39,38 +34,27 @@ const countUp = computed<boolean>(() => {
   return state.value !== 'TRIAL' && state.value !== 'ENOCONN';
 });
 
+const {
+  outputDateTimeReadableDiff: readableDiff,
+  outputDateTimeFormatted: formatted,
+} = useDateTimeHelper(dateTimeFormat.value, props.t, false, time.value, countUp.value);
+
 const output = computed(() => {
   if (!countUp.value || state.value === 'EEXPIRED') {
     return {
       title: state.value === 'EEXPIRED'
-        ? props.t(props.shortText ? 'Expired at {0}' : 'Trial Key Expired at {0}', [formattedTime.value])
-        : props.t(props.shortText ? 'Expires at {0}' : 'Trial Key Expires at {0}', [formattedTime.value]),
+        ? props.t(props.shortText ? 'Expired at {0}' : 'Trial Key Expired at {0}', [formatted.value])
+        : props.t(props.shortText ? 'Expires at {0}' : 'Trial Key Expires at {0}', [formatted.value]),
       text: state.value === 'EEXPIRED'
-        ? props.t(props.shortText ? 'Expired {0}' : 'Trial Key Expired {0}', [parsedTime.value])
-        : props.t(props.shortText ? 'Expires in {0}' : 'Trial Key Expires in {0}', [parsedTime.value]),
+        ? props.t(props.shortText ? 'Expired {0}' : 'Trial Key Expired {0}', [readableDiff.value])
+        : props.t(props.shortText ? 'Expires in {0}' : 'Trial Key Expires in {0}', [readableDiff.value]),
     };
   }
   return {
-    title: props.t('Server Up Since {0}', [formattedTime.value]),
-    text: props.t('Uptime {0}', [parsedTime.value]),
+    title: props.t('Server Up Since {0}', [formatted.value]),
+    text: props.t('Uptime {0}', [readableDiff.value]),
   };
 });
-
-const runDiff = () => {
-  parsedTime.value = buildStringFromValues(dateDiff((time.value).toString(), countUp.value));
-};
-
-let interval: string | number | NodeJS.Timeout | undefined;
-onBeforeMount(() => {
-  runDiff();
-  interval = setInterval(() => {
-    runDiff();
-  }, 1000);
-});
-
-onBeforeUnmount(() => {
-  clearInterval(interval);
-});
 </script>
 
 <template>
diff --git a/web/composables/time.ts b/web/composables/time.ts
index 2289a109e..b41c3b94e 100644
--- a/web/composables/time.ts
+++ b/web/composables/time.ts
@@ -35,8 +35,15 @@ const timeFormatOptions: TimeFormatOption[] = [
  * @param format provided by Unraid server's state.php and set in the server store
  * @param t translations
  * @param hideMinutesSeconds true will hide minutes and seconds from the output
+ * @param providedDateTime optional provided date time to use instead of Date.now()
  */
-const useTimeHelper = (format: ServerDateTimeFormat | undefined, t: any, hideMinutesSeconds?: boolean) => {
+const useDateTimeHelper = (
+  format: ServerDateTimeFormat | undefined,
+  t: any,
+  hideMinutesSeconds?: boolean,
+  providedDateTime?: number | undefined,
+  diffCountUp?: boolean,
+) => {
   const buildStringFromValues = (payload: TimeStringsObject) => {
     const {
       years,
@@ -167,11 +174,35 @@ const useTimeHelper = (format: ServerDateTimeFormat | undefined, t: any, hideMin
 
   const dateDiff = (time: string, countUp: boolean) => countUp ? readableDifference(time, '') : readableDifference('', time);
 
+  // provide outputs for components
+  const outputDateTimeReadableDiff = ref<string>('');
+  const outputDateTimeFormatted = computed(() => formatDate(providedDateTime ?? Date.now()));
+
+  const runDiff = () => {
+    outputDateTimeReadableDiff.value = buildStringFromValues(dateDiff((providedDateTime ?? Date.now()).toString(), diffCountUp ?? false));
+  };
+
+  let interval: string | number | NodeJS.Timeout | undefined;
+  onBeforeMount(() => {
+    if (providedDateTime) {
+      runDiff();
+      interval = setInterval(() => {
+        runDiff();
+      }, 1000);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (interval) {
+      clearInterval(interval);
+    }
+  });
+
   return {
-    buildStringFromValues,
-    dateDiff,
     formatDate,
+    outputDateTimeReadableDiff,
+    outputDateTimeFormatted,
   };
 };
 
-export default useTimeHelper;
+export default useDateTimeHelper;
diff --git a/web/locales/en_US.json b/web/locales/en_US.json
index bb29315d1..8c93f0ff3 100644
--- a/web/locales/en_US.json
+++ b/web/locales/en_US.json
@@ -310,5 +310,9 @@
   "Key ineligible for {0}": "Key ineligible for {0}",
   "Up-to-date with eligible releases": "Up-to-date with eligible releases",
   "Key ineligible for future releases": "Key ineligible for future releases",
-  "View Changelog": "View Changelog"
+  "View Changelog": "View Changelog",
+  "You are still eligible to access OS updates that were published on or before {1}.": "You are still eligible to access OS updates that were published on or before {1}.",
+  "Your {0} license included one year of free updates at the time of purchase. You are now eligible to extend your license and access the latest OS updates.": "Your {0} license included one year of free updates at the time of purchase. You are now eligible to extend your license and access the latest OS updates.",
+  "Your {0} license included one year of free updates at the time of purchase. You are now eligible to extend your license and access the latest OS updates. You are still eligible to access OS updates that were published on or before {1}.": "Your {0} license included one year of free updates at the time of purchase. You are now eligible to extend your license and access the latest OS updates. You are still eligible to access OS updates that were published on or before {1}.",
+  "Extend License": "Extend License"
 }
diff --git a/web/store/updateOsActions.ts b/web/store/updateOsActions.ts
index ae8643c4e..851a682b2 100644
--- a/web/store/updateOsActions.ts
+++ b/web/store/updateOsActions.ts
@@ -65,7 +65,9 @@ export const useUpdateOsActionsStore = defineStore('updateOsActions', () => {
       return 'A valid OS version is required to check for updates.';
     }
     if (regUpdatesExpired.value) {
-      return `Your license key's OS update eligibility has expired. Please renew your license key to enable updates released after your expiration date.`;
+      const base = `Your {0} license included one year of free updates at the time of purchase. You are now eligible to extend your license and access the latest OS updates.`;
+      const addtlText = `You are still eligible to access OS updates that were published on or before {1}.`;
+      return updateOsStore.available ? `${base} ${addtlText}` : base;
     }
     return '';
   });