23968 Business Dashboard UI: implement background retry to check for latest state

src/app.config.ts

@@ -88,21 +88,27 @@ export default defineAppConfig({
       base: 'xs:min-w-[90vw] md:min-w-[720px] text-gray-700'
     },
     notification: {
-      title: 'text-white',
+      title: 'text-sm font-medium text-white max-w-full',
       description: 'text-white',
+      actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
       background: 'bg-gray-700',
+      rounded: 'rounded',
+      ring: '',
       progress: {
         background: 'bg-transparent'
       },
       default: {
         closeButton: {
-          class: 'hover:text-gray-100',
-          color: 'gray'
+          icon: null,
+          label: 'Close',
+          variant: 'outline'
         }
       }
     },
     notifications: {
-      position: 'bottom-5 left-[40%]'
+      position: 'top-20 bottom-[unset]',
+      width: 'w-full sm:w-5/12',
+      container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto'
     },
     radio: {
       base: 'h-5 w-5 mt-[3px]',
@@ -208,7 +214,45 @@ export default defineAppConfig({
     },
     button: {
       base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed ' +
-        'disabled:opacity-35 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0'
+        'disabled:opacity-35 aria-disabled:cursor-not-allowed aria-disabled:opacity-75 flex-shrink-0',
+      variant: {
+        outline: `hover:bg-text-white-50 
+          disabled:bg-transparent 
+          dark:hover:bg-text-white-950 
+          dark:disabled:bg-transparent 
+          font-sm shadow-sm 
+          ring-1 ring-inset ring-gray-300 
+          dark:ring-gray-700 text-xs font-medium rounded 
+          text-white tracking-wide py-1 px-2 
+          disabled:text-text-white-500 
+          dark:text-white 
+          dark:hover:text-bcGovBlue-300 
+          dark:disabled:text-text-white-400 
+          focus-visible:ring-2 
+          focus-visible:ring-inset 
+          focus-visible:ring-text-white-500 
+          dark:focus-visible:ring-white 
+          inline-flex items-center`,
+
+        refresh: `bg-white hover:bg-text-blue-500 
+          disabled:bg-transparent 
+          dark:hover:bg-text-blue-500 
+          dark:disabled:bg-transparent 
+          font-sm shadow-sm 
+          ring-1 ring-inset ring-blue-500 
+          dark:ring-blue-500 text-xs font-medium rounded 
+          text-blue-500 tracking-wide py-1 px-2 
+          disabled:text-blue-500 
+          dark:text-blue-500 
+          dark:hover:text-bcGovBlue-300 
+          dark:disabled:text-text-white-400 
+          focus-visible:ring-2 
+          focus-visible:ring-inset 
+          focus-visible:ring-text-white-500 
+          dark:focus-visible:ring-white 
+          inline-flex items-center px-2 py-1.5`
+
+      }
     }
   }
 })

src/pages/dashboard.vue

@@ -18,6 +18,9 @@ const { todos } = storeToRefs(useBcrosTodos())
 const { getPendingCoa } = useBcrosFilings()
 const { filings } = storeToRefs(useBcrosFilings())
 const { pendingFilings } = storeToRefs(useBcrosBusinessBootstrap())
+const toast = useToast()
+const finalDateString = ref<string | undefined>(undefined)
+const initialDateString = ref<string | undefined>(undefined)
 
 const hasDirector = computed(() => {
   if (currentParties.value?.parties && currentParties.value?.parties.length > 0) {
@@ -79,6 +82,71 @@ const containRole = (roleType) => {
   )
 }
 
+const computeTimeDifference = (initialDateString, finalDateString) => {
+  const initialDate = new Date(initialDateString)
+  const finalDate = new Date(finalDateString)
+
+  const differenceInMilliseconds = finalDate - initialDate
+  return differenceInMilliseconds / 1000
+}
+
+const fetchBusinessDetailsWithDelay = async (identifier: string) => {
+  // Fetch business details and update finalDateString
+  const slimBusiness = await business.getBusinessDetails(identifier, undefined, true)
+  const finalDate = new Date(slimBusiness.lastModified)
+  finalDateString.value = finalDate.toISOString().split('.')[0]
+
+  if (computeTimeDifference(business.initialDateString, finalDateString.value) > 0) {
+    toast.add({
+      id: 'outdated_data',
+      title: 'Details on this page have been updated. Refresh to view the latest information.',
+      timeout: 0,
+      actions: [{
+        label: 'Refresh',
+        variant: 'refresh',
+        color: 'primary',
+        click: () => {
+          reloadBusinessInfo()
+        }
+      }]
+    })
+  }
+}
+
+const startPolling = (identifier: string) => {
+  const startTime = Date.now()
+
+  const firstInterval = 1000 // 1 second
+  const secondInterval = 10000 // 10 seconds
+  const thirdInterval = 60000 // 1 minute
+  const fourthInterval = 3600000 // 1 hour
+
+  const poll = () => {
+    const elapsedTime = Date.now() - startTime
+
+    if (elapsedTime < 30000) {
+    // Poll every second for the first 30 seconds
+      fetchBusinessDetailsWithDelay(identifier)
+      setTimeout(poll, firstInterval)
+    } else if (elapsedTime < 60000) {
+    // Poll every 10 seconds for the next 30 seconds (30s to 1m)
+      fetchBusinessDetailsWithDelay(identifier)
+      setTimeout(poll, secondInterval)
+    } else if (elapsedTime < 1800000) {
+    // Poll every 1 minute for the next 30 minutes (1m to 31m)
+      fetchBusinessDetailsWithDelay(identifier)
+      setTimeout(poll, thirdInterval)
+    } else {
+    // Poll every 1 hour after 30 minutes
+      fetchBusinessDetailsWithDelay(identifier)
+      setTimeout(poll, fourthInterval)
+    }
+  }
+
+  // Start the polling
+  poll()
+}
+
 // load information for the business or the bootstrap business,
 // and load the todo tasks, pending-review item, and filing history
 const loadBusinessInfo = async (force = false) => {
@@ -108,6 +176,10 @@ const loadBusinessInfo = async (force = false) => {
       useBcrosTodos().loadAffiliations(identifier)
       useBcrosTodos().loadTasks(identifier, true)
     }
+    // assign initial value from /business
+    initialDateString.value = business.initialDateString
+    // start polling schedule
+    startPolling(identifier)
   }
 }
 
@@ -249,6 +321,7 @@ const coaEffectiveDate = computed(() => {
 </script>
 
 <template>
+  <UNotifications />
   <BcrosDialogCardedModal
     name="confirmChangeofAddress"
     :display="showChangeOfAddress"

src/stores/business.ts

@@ -18,7 +18,7 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
   const currentParties: Ref<PartiesI> = ref(undefined)
 
   const currentBusinessIdentifier = computed((): string => currentBusiness.value?.identifier)
-
+  const initialDateString = ref<string | undefined>(undefined)
   // set BUSINESS_ID session storage when business identifier is loaded
   watch(currentBusinessIdentifier, (value) => {
     if (value) {
@@ -67,9 +67,10 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
   }
 
   /** Return the business details for the given identifier */
-  async function getBusinessDetails (identifier: string, params?: object) {
+  async function getBusinessDetails (identifier: string, params?: object, slim: boolean = false) {
+    const url = `${apiURL}/businesses/${identifier}${slim ? '?slim=true' : ''}`
     return await useBcrosFetch<{ business: BusinessI }>(
-      `${apiURL}/businesses/${identifier}`,
+      url,
       { params, dedupe: 'defer' }
     )
       .then(({ data, error }) => {
@@ -170,21 +171,33 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
       })
   }
 
-  async function loadBusiness (identifier: string, force = false) {
+  async function loadBusiness(identifier: string, force = false) {
     const { trackUiLoadingStart, trackUiLoadingStop } = useBcrosDashboardUi()
 
     trackUiLoadingStart('businessInfoLoading')
 
     const businessCached = currentBusiness.value && identifier === currentBusinessIdentifier.value
+
     if (!businessCached || force) {
       fetchBusinessComments(identifier)
       currentBusiness.value = await getBusinessDetails(identifier) || {} as BusinessI
+
+      // Converting lastModified values to Date objects
+      const initialDate = new Date(currentBusiness.value.lastModified)
+
+      // truncate milliseconds
+      initialDateString.value = initialDate.toISOString().split('.')[0]
+
       if (currentBusiness.value.stateFiling) {
         await loadStateFiling()
       }
+
       businessConfig.value = getBusinessConfig(currentBusiness.value.legalType)
     }
+
     trackUiLoadingStop('businessInfoLoading')
+
+    return { initialDateString: initialDateString.value }
   }
 
   async function loadBusinessContact (identifier: string, force = false) {
@@ -529,6 +542,7 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
     isAllowed,
     createCommentBusiness,
     comments,
-    commentsLoading
+    commentsLoading,
+    initialDateString
   }
 })