refactor(web): update ineligible text + DateTime helper exports

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,

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"

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'),

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>

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"

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" />

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: () => {

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

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 }}

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"

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>

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;

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"
 }

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 '';
   });