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

package.json

@@ -2,7 +2,7 @@
   "name": "bcros-business-dashboard",
   "private": true,
   "type": "module",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "scripts": {
     "build": "nuxt generate",
     "build:local": "nuxt build",

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: 'cancel'
         }
       }
     },
     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,12 @@ 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: {
+        refresh: 'shadow-sm ring-1 ring-inset ring-gray-300 text-blue-500 bg-white',
+        cancel: 'shadow-sm ring-1 ring-inset ring-white text-white bg-transparant hover:bg-transparant' +
+         'focus-visible:ring-2 focus-visible:ring-blue-500 px-2 py-1'
+      }
     }
   }
 })

src/pages/dashboard.vue

@@ -18,6 +18,8 @@ const { todos } = storeToRefs(useBcrosTodos())
 const { getPendingCoa } = useBcrosFilings()
 const { filings } = storeToRefs(useBcrosFilings())
 const { pendingFilings } = storeToRefs(useBcrosBusinessBootstrap())
+const toast = useToast()
+const initialDateString = ref<Date | undefined>(undefined)
 const ui = useBcrosDashboardUi()
 
 const hasDirector = computed(() => {
@@ -80,6 +82,62 @@ const containRole = (roleType) => {
   )
 }
 
+const fetchBusinessDetailsWithDelay = async (identifier: string) => {
+  // Fetch business details and update finalDateString
+  const slimBusiness = await business.getBusinessDetails(identifier, undefined, true)
+  const lastModifiedDate = apiToDate(slimBusiness.lastModified)
+  const initialDate = business.initialDateString
+  if (lastModifiedDate.getTime() > initialDate.getTime()) {
+    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
+  const secondInterval = 10000
+  const thirdInterval = 60000
+  const fourthInterval = 3600000
+
+  const poll = () => {
+    const elapsedTime = Date.now() - startTime
+
+    if (elapsedTime < 10000) {
+    // Poll every 1 second for the first 10 seconds
+      fetchBusinessDetailsWithDelay(identifier)
+      setTimeout(poll, firstInterval)
+    } else if (elapsedTime < 60000) {
+    // Poll every 10 seconds for the next 50 seconds (until the 1-minute mark)
+      fetchBusinessDetailsWithDelay(identifier)
+      setTimeout(poll, secondInterval)
+    } else if (elapsedTime < 1800000) {
+    // Poll every 1 minute for the next 29 minutes (until the 30-minute mark)
+      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) => {
@@ -109,6 +167,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)
   }
 }
 
@@ -250,6 +312,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<Date | 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,31 @@ 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 = apiToDate(currentBusiness.value.lastModified)
+      initialDateString.value = initialDate
+
       if (currentBusiness.value.stateFiling) {
         await loadStateFiling()
       }
+
       businessConfig.value = getBusinessConfig(currentBusiness.value.legalType)
     }
+
     trackUiLoadingStop('businessInfoLoading')
+
+    return { initialDateString }
   }
 
   async function loadBusinessContact (identifier: string, force = false) {
@@ -529,6 +540,7 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
     isAllowed,
     createCommentBusiness,
     comments,
-    commentsLoading
+    commentsLoading,
+    initialDateString
   }
 })