From ca64079450d45d6a539e4f8cdfd5acb498d75e3c Mon Sep 17 00:00:00 2001
From: Peinan Wang <peinanwang@RiddleMBP.local>
Date: Mon, 19 Aug 2024 08:32:04 -0700
Subject: [PATCH 1/3] Todo Section - Dialogs

---
 src/components/bcros/dialog/Index.vue         |   5 +-
 src/components/bcros/todo/Item.vue            | 126 +++++++++++++++++-
 src/components/bcros/todo/List.vue            |  38 ++++++
 .../bcros/todo/dialog/CancelPaymentError.vue  |  46 +++++++
 .../bcros/todo/dialog/DeleteError.vue         |  57 ++++++++
 src/interfaces/todo-i.ts                      |   3 +-
 src/stores/todo.ts                            |   9 +-
 src/utils/todo/action-functions.ts            | 113 ----------------
 src/utils/todo/task-filing/button-loader.ts   |   8 +-
 9 files changed, 281 insertions(+), 124 deletions(-)
 create mode 100644 src/components/bcros/todo/dialog/CancelPaymentError.vue
 create mode 100644 src/components/bcros/todo/dialog/DeleteError.vue

diff --git a/src/components/bcros/dialog/Index.vue b/src/components/bcros/dialog/Index.vue
index ecea9544..9a49454e 100644
--- a/src/components/bcros/dialog/Index.vue
+++ b/src/components/bcros/dialog/Index.vue
@@ -2,7 +2,7 @@
   <UModal
     :attach="attach || ''"
     :model-value="display"
-    data-cy="bcros-dialog"
+    :data-cy="'bcros-dialog' + name ? `-${name}` : ''"
   >
     <div v-if="options" class="px-10 py-9">
       <div class="flex">
@@ -33,7 +33,7 @@
       <div class="pt-7">
         <!-- can be replaced with <template v-slot:buttons> -->
         <slot name="buttons" :options="options">
-          <div class="flex justify-center">
+          <div class="flex justify-center gap-5">
             <div v-for="button, i in options.buttons" :key="'dialog-btn-' + i">
               <slot :name="'dialog-btn-slot-' + button.slotId">
                 <dialog-button :button="button" data-cy="bcros-dialog-btn" @close="emit('close')" />
@@ -50,6 +50,7 @@
 import { DialogButton, DialogContent } from './slot-templates'
 
 const props = defineProps<{
+  name?: string,
   attach?: string,
   display: boolean,
   options?: DialogOptionsI
diff --git a/src/components/bcros/todo/Item.vue b/src/components/bcros/todo/Item.vue
index 7f7ef0e8..4f3ee663 100644
--- a/src/components/bcros/todo/Item.vue
+++ b/src/components/bcros/todo/Item.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { FilingTypes } from '@bcrs-shared-components/enums'
+import { filingTypeToName } from '~/utils/todo/task-filing/helper'
 
 const todosStore = useBcrosTodos()
 const business = useBcrosBusiness()
 
+const showConfirmDialog = ref(false)
+const hasDeleteError = ref(false)
+const hasCancelPaymentError = ref(false)
+const confirmDialog = ref<DialogOptionsI | null>(null)
+
 defineEmits(['expand'])
 const prop = defineProps({
   item: { type: Object as PropType<TodoItemI>, required: true },
@@ -13,11 +19,75 @@ const prop = defineProps({
 const checkboxChecked: Ref<boolean> = ref(false)
 const inProcessFiling: Ref<number> = ref(null)
 
+// errors and warnings from API calls for deleting a draft or cancelling a payment
+const deleteErrors = ref([])
+const deleteWarnings = ref([])
+const cancelPaymentErrors = ref([])
+
 const name = computed(() =>
   // the 'name' attribute for affiliation invitation is null as there is no matching FilingTypes
   prop.item.name ? prop.item.name : 'affiliation'
 )
 
+// dialog options config
+const confirmDeleteDraft: DialogOptionsI = {
+  title: 'Delete Draft?',
+  text: `Delete your ${prop.item.draftTitle}? Any changes you've made will be lost.`,
+  hideClose: true,
+  buttons: [
+    { text: 'Delete', slotId: 'delete', color: 'primary', onClick: () => deleteDraft() },
+    { text: 'Cancel', slotId: 'cancel', color: 'primary', onClickClose: true }
+  ]
+}
+
+const confirmDeleteApplication: DialogOptionsI = {
+  title: `Delete ${filingTypeToName(prop.item.name)}?`,
+  text: `Deleting this ${prop.item.draftTitle} will remove this application and all information ` +
+    'associated with this application.',
+  textExtra: ['You will be returned to the Business Registry page.'], // TO-DO: different text for name request
+  hideClose: true,
+  buttons: [
+    { text: 'Delete', slotId: 'delete', color: 'primary', onClick: () => deleteApplication() },
+    { text: 'Don\'t Delete', slotId: 'cancel', color: 'primary', onClickClose: true }
+  ]
+}
+
+const confirmCancelPayment: DialogOptionsI = {
+  title: 'Cancel Payment?',
+  text: `Cancel payment for your ${prop.item.draftTitle}?`,
+  hideClose: true,
+  buttons: [
+    { text: 'Cancel Payment', slotId: 'delete', color: 'primary', onClick: () => cancelPaymentAndSetToDraft() },
+    { text: 'Don\'t Cancel', slotId: 'cancel', color: 'primary', onClickClose: true }
+  ]
+}
+
+/** Handle the click event for the passed-in action button.
+ *  Execute the action function if it exists, and open the dialog if needed.
+ */
+const handleClick = (button: ActionButtonI) => {
+  if (button.actionFn) {
+    button.actionFn(prop.item)
+  }
+
+  if (button.openDialog) {
+    const businessId = business.currentBusiness.identifier
+    const tempRegNumber = sessionStorage.getItem('TEMP_REG_NUMBER')
+
+    if (prop.item.status === FilingStatusE.DRAFT) {
+      // open the dialog for confirming deleting a draft filing (for existing businesses)
+      if (businessId) { confirmDialog.value = confirmDeleteDraft }
+      // open the dialog for confirming deleting a draft application (for temp business number)
+      if (tempRegNumber) { confirmDialog.value = confirmDeleteApplication }
+    } else if (prop.item.status === FilingStatusE.PENDING) {
+      // open the dialog for confirming cancelling a payment for a pending filing with payment error
+      confirmDialog.value = confirmCancelPayment
+    }
+
+    showConfirmDialog.value = true
+  }
+}
+
 /** Whether to show the error style for the button (red text and red hover background) and the top border (red). */
 const useErrorStyle = (item: TodoItemI): boolean => {
   if (item.status === FilingStatusE.DRAFT) {
@@ -30,10 +100,61 @@ const useErrorStyle = (item: TodoItemI): boolean => {
 
   return false
 }
+
+/** Delete a draft; if refreshDashboard is set to true, refresh the page to reload data */
+const deleteDraft = async (_refreshDashboard = true): Promise<void> => {
+  /* eslint-disable no-console */
+  console.log('Delete a draft')
+
+  // TO-DO: implement this function in ticket #22638; delete draft and handle errors
+  await Promise.resolve()
+}
+
+const deleteApplication = async (): Promise<void> => {
+  await deleteDraft(false)
+
+  /* eslint-disable no-console */
+  console.log('Redirecting after deleting an application')
+  // TO-DO: implement this function in ticket #22638
+  // go to My Business Registry page if it is a name request
+  // otherwise go to BCROS home page
+}
+
+/** Cancel the payment and set the filing status to draft; reload the page; handle errors if exist */
+const cancelPaymentAndSetToDraft = async (_refreshDashboard = true): Promise<void> => {
+  /* eslint-disable no-console */
+  console.log('Cancel the payment and set the filing status to draft')
+
+  // TO-DO: implement this function in ticket #22638; delete draft and handle errors
+  await Promise.resolve()
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-0 w-full">
+    <!-- confirm dialog -->
+    <BcrosDialog
+      attach="#todoList"
+      :display="showConfirmDialog"
+      :options="confirmDialog"
+      @close="showConfirmDialog = false"
+    />
+
+    <!-- error dialog (deleting draft) -->
+    <BcrosTodoDialogDeleteError
+      :display="hasDeleteError"
+      :errors="deleteErrors"
+      :warnings="deleteWarnings"
+      @close="hasDeleteError = false"
+    />
+
+    <!-- error dialog (cancelling payment) -->
+    <BcrosTodoDialogCancelPaymentError
+      :display="hasCancelPaymentError"
+      :errors="cancelPaymentErrors"
+      @close="hasCancelPaymentError = false"
+    />
+
     <div
       class="flex flex-row w-full justify-between px-6 py-5 text-sm"
       :class="useErrorStyle(item) ? 'border-0 border-t-2 border-t-red-600' : ''"
@@ -152,7 +273,7 @@ const useErrorStyle = (item: TodoItemI): boolean => {
             :disabled="item.actionButton.disabled || (item.showAnnualReportCheckbox && !checkboxChecked)"
             class="action-button"
             :label="item.actionButton.label"
-            @click="() => item.actionButton.actionFn(item)"
+            @click="() => handleClick(item.actionButton)"
           />
           <!-- dropdown menu -->
           <UPopover
@@ -178,13 +299,14 @@ const useErrorStyle = (item: TodoItemI): boolean => {
                 :label="item.actionButton.menus[index].label"
                 :icon="button.icon"
                 :data-cy="'menu-button-' + index"
-                @click="()=>item.actionButton.menus[index].actionFn(item)"
+                @click="()=>handleClick(item.actionButton.menus[index])"
               />
             </template>
           </UPopover>
         </div>
       </div>
     </div>
+
     <transition name="slide-down">
       <div
         v-if="item.expansionContent && expanded"
diff --git a/src/components/bcros/todo/List.vue b/src/components/bcros/todo/List.vue
index 04c030d3..74f9a5ee 100644
--- a/src/components/bcros/todo/List.vue
+++ b/src/components/bcros/todo/List.vue
@@ -1,8 +1,29 @@
 <script setup lang="ts">
+const todosStore = useBcrosTodos()
+
 const prop = defineProps({
   todos: { type: Array<TodoItemI>, required: true }
 })
 
+const authorizeAffiliationError = ref(todosStore.authorizeAffiliationsErrors.length > 0)
+const loadAffiliationInvitationError = ref(todosStore.loadAffiliationsError.length > 0)
+
+const authorizeAffiliationErrorOptions: DialogOptionsI = {
+  title: 'Error updating affiliation invitation.',
+  text: 'An error happened while updating affiliation invitation.',
+  textExtra: ['Please try again later.'],
+  hideClose: true,
+  buttons: [{ text: 'Ok', slotId: 'ok', color: 'primary', onClickClose: true }]
+}
+
+const loadAffiliationInvitationErrorOptions: DialogOptionsI = {
+  title: 'Error fetching affiliation invitation.',
+  text: 'An error happened while fetching affiliation invitation.',
+  textExtra: ['Please try again later.'],
+  hideClose: true,
+  buttons: [{ text: 'Ok', slotId: 'ok', color: 'primary', onClickClose: true }]
+}
+
 const isExpandedInternal: Ref<boolean[]> = ref([])
 
 const isExpanded = computed({
@@ -28,9 +49,26 @@ const expand = (index: number, expanded: boolean) => {
 
 <template>
   <div
+    id="todoList"
     class="flex flex-col"
     data-cy="todoItemList"
   >
+    <!-- error dialog (fetching affiliation request) -->
+    <BcrosDialog
+      attach="#todoList"
+      :display="loadAffiliationInvitationError"
+      :options="loadAffiliationInvitationErrorOptions"
+      @close="loadAffiliationInvitationError = false"
+    />
+
+    <!-- error dialog (accepting affiliation request) -->
+    <BcrosDialog
+      attach="#todoList"
+      :display="authorizeAffiliationError"
+      :options="authorizeAffiliationErrorOptions"
+      @close="authorizeAffiliationError = false"
+    />
+
     <template v-if="todos.length > 0">
       <BcrosTodoItem
         v-for="(todoItem, index) in todos"
diff --git a/src/components/bcros/todo/dialog/CancelPaymentError.vue b/src/components/bcros/todo/dialog/CancelPaymentError.vue
new file mode 100644
index 00000000..6f5ff81e
--- /dev/null
+++ b/src/components/bcros/todo/dialog/CancelPaymentError.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+defineEmits<{(e:'close'): void}>()
+
+const prop = defineProps({
+  display: { type: Boolean, required: true },
+  errors: { type: Array<any>, required: true }
+})
+
+const { isStaffAccount } = useBcrosAccount()
+
+const cancelPaymentDialogOptions = computed(() => {
+  const title = 'Unable to Cancel Payment'
+
+  const text = (prop.errors.length < 1)
+    ? 'We were unable to cancel your payment.'
+    : 'We were unable to cancel your payment due to the following errors:'
+
+  return {
+    title, text, hideClose: true, buttons: [{ text: 'OK', slotId: 'ok', color: 'primary', onClickClose: true }]
+  } as DialogOptionsI
+})
+</script>
+
+<template>
+  <BcrosDialog
+    attach="#todoList"
+    :display="display"
+    :options="cancelPaymentDialogOptions"
+    @close="$emit('close')"
+  >
+    <template #content>
+      <p v-for="(error, index) in errors" :key="index">
+        {{ error.error || error.message }}
+      </p>
+      <template v-if="!isStaffAccount">
+        <p>
+          If you need help, please contact us.
+        </p>
+        <BcrosContactInfo :contacts="getContactInfo('registries')" class="mt-5" />
+      </template>
+    </template>
+  </BcrosDialog>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/components/bcros/todo/dialog/DeleteError.vue b/src/components/bcros/todo/dialog/DeleteError.vue
new file mode 100644
index 00000000..2c6c4fd3
--- /dev/null
+++ b/src/components/bcros/todo/dialog/DeleteError.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+defineEmits<{(e:'close'): void}>()
+
+const prop = defineProps({
+  display: { type: Boolean, required: true },
+  errors: { type: Array<any>, required: true },
+  warnings: { type: Array<any>, required: true }
+})
+
+const { isStaffAccount } = useBcrosAccount()
+
+const deleteErrorDialogOptions = computed(() => {
+  const title = (prop.errors.length > 0 || prop.warnings.length < 1)
+    ? 'Unable to Delete Filing'
+    : 'Filing Deleted with Warnings'
+
+  let text = ''
+  if (prop.errors.length + prop.warnings.length < 1) {
+    text = 'We were unable to delete your filing.'
+  } else if (prop.errors.length > 0) {
+    text = 'We were unable to delete your filing due to the following errors:'
+  } else {
+    text = 'Please note the following:'
+  }
+
+  return {
+    title, text, hideClose: true, buttons: [{ text: 'OK', slotId: 'ok', color: 'primary', onClickClose: true }]
+  } as DialogOptionsI
+})
+</script>
+
+<template>
+  <BcrosDialog
+    attach="#todoList"
+    :display="display"
+    :options="deleteErrorDialogOptions"
+    @close="$emit('close')"
+  >
+    <template #content>
+      <p v-for="(error, index) in errors" :key="index">
+        {{ error.error || error.message }}
+      </p>
+      <p v-for="(warning, index) in warnings" :key="index">
+        {{ warning.warning || warning.message }}
+      </p>
+      <template v-if="!isStaffAccount">
+        <p>
+          If you need help, please contact us.
+        </p>
+        <BcrosContactInfo :contacts="getContactInfo('registries')" class="mt-5" />
+      </template>
+    </template>
+  </BcrosDialog>
+</template>
+
+<style scoped>
+</style>
diff --git a/src/interfaces/todo-i.ts b/src/interfaces/todo-i.ts
index 2037c4f4..d9916d3b 100644
--- a/src/interfaces/todo-i.ts
+++ b/src/interfaces/todo-i.ts
@@ -2,7 +2,8 @@ import type { FilingTypes } from '@bcrs-shared-components/enums'
 
 export interface ActionButtonI {
   label: string
-  actionFn: Function
+  actionFn?: Function
+  openDialog?: boolean
   disabled?: boolean
   menus?: ActionButtonI[]
   icon?: string
diff --git a/src/stores/todo.ts b/src/stores/todo.ts
index 0cf35071..d258fcd4 100644
--- a/src/stores/todo.ts
+++ b/src/stores/todo.ts
@@ -19,6 +19,9 @@ export const useBcrosTodos = defineStore('bcros/todos', () => {
   const loading = ref(false)
   const errors = ref([])
 
+  const loadAffiliationsError = ref([])
+  const authorizeAffiliationsErrors = ref([])
+
   const apiURL = useRuntimeConfig().public.legalApiURL
   const authApiURL = useRuntimeConfig().public.authApiURL
 
@@ -31,7 +34,7 @@ export const useBcrosTodos = defineStore('bcros/todos', () => {
         todos.value.splice(index, 1)
       }
     } catch (error) {
-      errors.value.push(error?.message)
+      authorizeAffiliationsErrors.value.push(error?.message)
     }
   }
 
@@ -52,7 +55,7 @@ export const useBcrosTodos = defineStore('bcros/todos', () => {
       })
       _todosForIdentifier.value = identifier
     } catch (error) {
-      errors.value.push(error?.message)
+      loadAffiliationsError.value.push(error?.message)
     }
   }
 
@@ -92,6 +95,8 @@ export const useBcrosTodos = defineStore('bcros/todos', () => {
     todos,
     loading,
     errors,
+    loadAffiliationsError,
+    authorizeAffiliationsErrors,
     authorize,
     loadAffiliations,
     loadTasks
diff --git a/src/utils/todo/action-functions.ts b/src/utils/todo/action-functions.ts
index 4ac50736..4469fab0 100644
--- a/src/utils/todo/action-functions.ts
+++ b/src/utils/todo/action-functions.ts
@@ -51,121 +51,8 @@ export const doResumePayment = (item: TodoItemI): boolean => {
   return true
 }
 
-/** Delete a draft; if refreshDashboard is set to true, refresh the page to reload data */
-export const doDeleteDraft = async (item: TodoItemI, refreshDashboard = true): Promise<void> => {
-  // const id = this.getIdentifier || this.tempRegNumber
-  // const url = `businesses/${id}/filings/${item.filingId}`
-
-  // await axios.delete(url).then(res => {
-  //   if (!res) {
-  //     throw new Error('Invalid API response')
-  //   }
-
-  //   if (refreshDashboard) {
-  //     // emit event to reload all data
-  //     this.$root.$emit('reloadData')
-  //   }
-  // }).catch(error => {
-  //   if (error?.response) {
-  //     if (error.response.data?.errors) {
-  //       this.deleteErrors = error.response.data.errors
-  //     }
-  //     if (error.response.data?.warnings) {
-  //       this.deleteWarnings = error.response.data.warnings
-  //     }
-  //     this.deleteErrorDialog = true
-  //   } else {
-  //     this.deleteErrorDialog = true
-  //   }
-  // })
-  console.log('Delete a draft and reload the data if needed')
-}
-
-/** Open confirmation dialog for confirming draft deletion */
-export const confirmDeleteDraft = (item: TodoItemI): void => {
-  // // open confirmation dialog and wait for response
-  // this.$refs.confirm.open(
-  //   'Delete Draft?',
-  //   'Delete your ' + item.draftTitle + '? Any changes you\'ve made will be lost.',
-  //   {
-  //     width: '40rem',
-  //     persistent: true,
-  //     yes: 'Delete',
-  //     no: null,
-  //     cancel: 'Cancel'
-  //   }
-  // ).then(async (confirm) => {
-  //   // if we get here, Delete was clicked
-  //   if (confirm) {
-  //     await this.doDeleteDraft(item)
-  //   } else {
-  //     // do nothing
-  //   }
-  // }).catch(() => {
-  //   // if we get here, Don't Delete was clicked - do nothing
-  // })
-  console.log('Open confirmation dialog for confirming draft deletion')
-  doDeleteDraft(item)
-}
-
 /** Resume a draft filing. */
 export const doResumeFiling = (item: TodoItemI): void => {
   // To be implemented
   console.log('Resume a draft filing')
 }
-
-/** Delete an application */
-export const confirmDeleteApplication = (item: TodoItemI): void => {
-  // To be implemented
-  console.log('Delete an application')
-}
-
-/** Open confirmation dialog for cancelling payment; cancel the payment and set filing status to draft */
-export const confirmCancelPayment = (item: TodoItemI): void =>  {
-  // // open confirmation dialog and wait for response
-  // this.$refs.confirm.open(
-  //   'Cancel Payment?',
-  //   'Cancel payment for your ' + item.draftTitle + '?',
-  //   {
-  //     width: '40rem',
-  //     persistent: true,
-  //     yes: 'Cancel Payment',
-  //     no: null,
-  //     cancel: 'Don\'t Cancel'
-  //   }
-  // ).then(async (confirm) => {
-  //   // if we get here, Yes or No was clicked
-  //   if (confirm) {
-  //     await this.cancelPaymentAndSetToDraft(item)
-  //   } else {
-  //     // do nothing
-  //   }
-  // }).catch(() => {
-  //   // if we get here, Cancel was clicked - do nothing
-  // })
-  console.log('Open confirmation dialog for cancelling payment')
-}
-
-/** Cancel the payment and set the filing status to draft; reload the page */
-export const cancelPaymentAndSetToDraft = async (item: TodoItemI): Promise<void> => {
-  //   const url = `businesses/${this.getIdentifier}/filings/${item.filingId}`
-
-  //   await axios.patch(url, {}).then(res => {
-  //     if (!res) {
-  //       throw new Error('Invalid API response')
-  //     }
-
-  //     // emit event to reload all data
-  //     this.$root.$emit('reloadData')
-  //   }).catch(error => {
-  //     if (error?.response) {
-  //       if (error.response.data?.errors) {
-  //         this.cancelPaymentErrors = error.response.data.errors
-  //       }
-  //       this.cancelPaymentErrorDialog = true
-  //     } else {
-  //       this.cancelPaymentErrorDialog = true
-  //     }
-  //   })
-  console.log('Cancel the payment and set the filing status to draft')
-}
diff --git a/src/utils/todo/task-filing/button-loader.ts b/src/utils/todo/task-filing/button-loader.ts
index 47441487..2840ee34 100644
--- a/src/utils/todo/task-filing/button-loader.ts
+++ b/src/utils/todo/task-filing/button-loader.ts
@@ -18,7 +18,7 @@ export const addActionButton = (todoItem: TodoItemI): void => {
       // special case: just a "Delete draft" button with no dropdown menu
       if (showDeleteOnly(todoItem)) {
         todoItem.actionButton = {
-          label: 'Delete draft', actionFn: actionFunctions.confirmDeleteDraft
+          label: 'Delete draft', openDialog: true
         } as ActionButtonI
       } else {
         // Base case: 'Resume' button with 'doResumeFiling' action function
@@ -68,7 +68,7 @@ export const addActionButton = (todoItem: TodoItemI): void => {
 
         // add the dropdown button
         todoItem.actionButton.menus = [{
-          label: 'Cancel Payment', actionFn: actionFunctions.confirmCancelPayment
+          label: 'Cancel Payment', openDialog: true
         }] as ActionButtonI[]
       }
 
@@ -130,7 +130,7 @@ const getDropdownButtonsForDraft = (todoItem: TodoItemI): Array<ActionButtonI> =
     const button = {
       label,
       icon: 'i-mdi-delete-forever',
-      actionFn: actionFunctions.confirmDeleteDraft
+      openDialog: true
     }
     dropdownButtons.push(button)
   }
@@ -139,7 +139,7 @@ const getDropdownButtonsForDraft = (todoItem: TodoItemI): Array<ActionButtonI> =
     dropdownButtons.push({
       label: `Delete ${filingTypeToName(todoItem.name)}`,
       icon: 'mdi-delete-forever',
-      actionFn: actionFunctions.confirmDeleteApplication
+      openDialog: true
     } as ActionButtonI)
   }
 

From c70728ec31c1097bf8d304dffc70c8caad2e8afa Mon Sep 17 00:00:00 2001
From: Peinan Wang <peinanwang@RiddleMBP.local>
Date: Mon, 19 Aug 2024 13:29:58 -0700
Subject: [PATCH 2/3] add cypress test for dialogs

---
 cypress/e2e/components/comments.cy.ts         |  6 +--
 cypress/e2e/components/filings/section.cy.ts  |  6 +--
 .../todos/annual-report-filing.cy.ts          |  2 +-
 .../components/todos/conversion-filing.cy.ts  |  4 +-
 cypress/e2e/components/todos/draft.cy.ts      | 43 +++++++++++++--
 cypress/e2e/components/todos/error.cy.ts      |  2 +-
 cypress/e2e/components/todos/pending.cy.ts    | 38 +++++++++++--
 .../todo-errors/affiliation-error.cy.ts       | 54 +++++++++++++++++++
 cypress/support/commands.ts                   | 41 ++++++++------
 src/components/bcros/dialog/Index.vue         |  2 +-
 src/components/bcros/todo/List.vue            | 23 ++++----
 11 files changed, 176 insertions(+), 45 deletions(-)
 create mode 100644 cypress/e2e/error-flows/todo-errors/affiliation-error.cy.ts

diff --git a/cypress/e2e/components/comments.cy.ts b/cypress/e2e/components/comments.cy.ts
index b9f0bab9..c889ccb0 100644
--- a/cypress/e2e/components/comments.cy.ts
+++ b/cypress/e2e/components/comments.cy.ts
@@ -18,7 +18,7 @@ context('Business dashboard -> Comment side modal', () => {
   }
 
   it('Comment side modal is rendered', () => {
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, allFilings, true)
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, undefined, allFilings, true)
 
     cy.get('[data-cy="header.actions.dropdown"] button').should('exist')
     cy.get('[data-cy="header.actions.dropdown"] button').eq(0).click()
@@ -32,7 +32,7 @@ context('Business dashboard -> Comment side modal', () => {
 
   it('Should add a comment', () => {
     const commentText = 'Test comment'
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, allFilings, true)
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, undefined, allFilings, true)
 
     cy.get('[data-cy="header.actions.dropdown"] button').should('exist')
     cy.get('[data-cy="header.actions.dropdown"] button').eq(0).click()
@@ -56,7 +56,7 @@ context('Business dashboard -> Comment side modal', () => {
 
   it('Should fail to add a comment over 2000', () => {
     const commentText = getString(2001)
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, allFilings, true)
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, undefined, allFilings, true)
 
     cy.get('[data-cy="header.actions.dropdown"] button').should('exist')
     cy.get('[data-cy="header.actions.dropdown"] button').eq(0).click()
diff --git a/cypress/e2e/components/filings/section.cy.ts b/cypress/e2e/components/filings/section.cy.ts
index 6cfc7fa8..677510a9 100644
--- a/cypress/e2e/components/filings/section.cy.ts
+++ b/cypress/e2e/components/filings/section.cy.ts
@@ -4,7 +4,7 @@ import { administrativeDissolution } from '../../../fixtures/filings/dissolution
 
 context('Filings history section', () => {
   it('Verifies filing history is displayed, and it shows data', () => {
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, allFilings)
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, undefined, allFilings)
 
     cy.get('[data-cy="filingHistoryItem-header"]').should('have.length', allFilings.length)
 
@@ -16,7 +16,7 @@ context('Filings history section', () => {
   it('Verifies body of the filings -- document list, court number', () => {
     // director change verification aka, verify body list
     const filings = [directorChange, administrativeDissolution]
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, filings)
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, undefined, filings)
 
     cy.fixture('filings/directorChange/documentList.json').then((response) => {
       cy.intercept(
@@ -82,7 +82,7 @@ context('Filings history section', () => {
         'GET',
         `**/api/v2/businesses/**/filings/${directorChange.filingId}/comments`,
         response).as('detailsList')
-      cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, undefined, filings)
+      cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, undefined, filings)
 
       cy.get('[data-cy="details-list"]').should('not.exist')
 
diff --git a/cypress/e2e/components/todos/annual-report-filing.cy.ts b/cypress/e2e/components/todos/annual-report-filing.cy.ts
index 412a41b3..9d334ef3 100644
--- a/cypress/e2e/components/todos/annual-report-filing.cy.ts
+++ b/cypress/e2e/components/todos/annual-report-filing.cy.ts
@@ -1,6 +1,6 @@
 context('TODOs -> Annual Report Todo Task', () => {
   it('Annual report filing to-do item is rendered and working as expected', () => {
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, 'taskAR.json')
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, 'taskAR.json')
 
     cy.fixture('todos/taskAR.json').then((afrMockResponse) => {
       cy.get('[data-cy="header_todo"]')
diff --git a/cypress/e2e/components/todos/conversion-filing.cy.ts b/cypress/e2e/components/todos/conversion-filing.cy.ts
index cafdc4b6..fcef10da 100644
--- a/cypress/e2e/components/todos/conversion-filing.cy.ts
+++ b/cypress/e2e/components/todos/conversion-filing.cy.ts
@@ -1,6 +1,6 @@
 context('TODOs -> Conversion todo task and filing task', () => {
   it('Conversion todo item is rendered for staff account', () => {
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, 'taskConversion.json', [], true)
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, 'taskConversion.json', [], true)
 
     // todo section header should exist and show the correct count
     cy.get('[data-cy="header_todo"]')
@@ -51,7 +51,7 @@ context('TODOs -> Conversion todo task and filing task', () => {
   })
 
   it('Non-staff account cannot see the conversion todo item', () => {
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, 'taskConversion.json', false)
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, 'taskConversion.json', false)
 
     cy.get('[data-cy="header_todo"]').should('exist').contains('To Do (0)')
     cy.get('[data-cy="todoItemList"]').should('exist').within(() => {
diff --git a/cypress/e2e/components/todos/draft.cy.ts b/cypress/e2e/components/todos/draft.cy.ts
index cf5600f6..21015a43 100644
--- a/cypress/e2e/components/todos/draft.cy.ts
+++ b/cypress/e2e/components/todos/draft.cy.ts
@@ -1,6 +1,6 @@
 context('TODOs -> Draft Filing', () => {
   it('Test draft filing to-do item - base case (draft with no error)', () => {
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, 'draft/changeOfRegistration.json')
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, 'draft/changeOfRegistration.json')
 
     cy.get('[data-cy="header_todo"]').should('exist')
     cy.get('[data-cy="todoItemList"]').should('exist')
@@ -11,15 +11,48 @@ context('TODOs -> Draft Filing', () => {
     // View More button should not exist
     cy.get('[data-cy^="todoItem-showMore-"]').should('not.exist')
 
+    cy.get('[data-cy^="todoItemActions-"]').should('exist').as('actionSection')
+
     // The action button should exist
-    cy.get('[data-cy^="todoItemActions-"]')
+    cy.get('@actionSection')
       .find('button')
       .should('exist')
       .should('have.text', 'Resume')
+
+    // The dropdown menu should exist
+    cy.get('@actionSection')
+      .find('[data-cy="popover-button"]')
+      .should('exist')
+      .click() // open the dropdown menu
+
+    // The 'Delete draft' button should exist in the dropdown menu
+    // click the button to open the dialog
+    cy.get('@actionSection')
+      .find('[data-cy="menu-button-0"]')
+      .should('exist')
+      .should('have.text', 'Delete draft')
+      .click()
+      .get('[data-cy="bcros-dialog"]').should('exist').as('dialog')
+
+    // verify the dialog content
+    // click the cancel button to close the dialog
+    cy.get('@dialog').find('h1').should('have.text', 'Delete Draft?')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-text"]')
+      .find('p')
+      .should('have.text', 'Delete your Change of Registration? Any changes you\'ve made will be lost.')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-btn"]').should('have.length', 2)
+      .eq(0).should('have.text', 'Delete')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-btn"]')
+      .eq(1).should('have.text', 'Cancel')
+      .click()
+      .get('[data-cy="bcros-dialog"]').should('not.exist')
   })
 
   it('Test draft filing to-do item - Incomplete payment', () => {
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, 'draft/incompletePayment.json')
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, 'draft/incompletePayment.json')
 
     cy.get('[data-cy="header_todo"]').should('exist')
     cy.get('[data-cy="todoItemList"]').should('exist')
@@ -46,7 +79,7 @@ context('TODOs -> Draft Filing', () => {
 
   it('Conversion filing draft is visible for both staff account', () => {
     // load the conversion filing draft with a staff account
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, 'draft/conversion.json', [], true)
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, 'draft/conversion.json', [], true)
 
     // A staff user can see the conversion filing draft
     cy.get('[data-cy="header_todo"]').should('exist')
@@ -62,7 +95,7 @@ context('TODOs -> Draft Filing', () => {
 
   it('Conversion filing draft is visible for both staff account but the action button is hidden', () => {
     // load the conversion filing draft with a staff account
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, 'draft/conversion.json')
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, 'draft/conversion.json')
 
     // A non-staff user can see the conversion filing draft, but the action button is hidden
     cy.get('[data-cy="header_todo"]').should('exist')
diff --git a/cypress/e2e/components/todos/error.cy.ts b/cypress/e2e/components/todos/error.cy.ts
index 49c61193..f91783f8 100644
--- a/cypress/e2e/components/todos/error.cy.ts
+++ b/cypress/e2e/components/todos/error.cy.ts
@@ -1,6 +1,6 @@
 context('TODOs -> Error Filing', () => {
   it('Test error filing to-do item', () => {
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, 'error.json')
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, 'error.json')
 
     cy.get('[data-cy="header_todo"]').should('exist')
     cy.get('[data-cy="todoItemList"]').should('exist')
diff --git a/cypress/e2e/components/todos/pending.cy.ts b/cypress/e2e/components/todos/pending.cy.ts
index f2740f2c..eb810b1c 100644
--- a/cypress/e2e/components/todos/pending.cy.ts
+++ b/cypress/e2e/components/todos/pending.cy.ts
@@ -1,6 +1,6 @@
 context('TODOs -> Pending Filing', () => {
   it('Test pending filing to-do item - pending payment', () => {
-    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, 'pendingPayment.json')
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, 'pendingPayment.json')
 
     cy.get('[data-cy="header_todo"]').should('exist')
     cy.get('[data-cy="todoItemList"]').should('exist')
@@ -15,15 +15,43 @@ context('TODOs -> Pending Filing', () => {
     cy.get('[data-cy^="todoItem-showMore-"]').click()
     cy.get('[data-cy="todoItem-content"]').should('exist').contains('Payment Incomplete')
 
+    cy.get('[data-cy^="todoItemActions-"]').should('exist').as('actionSection')
+
     // The action button and dropdown menu should exist
-    cy.get('[data-cy^="todoItemActions-"]')
+    cy.get('@actionSection')
       .find('button')
       .should('exist')
       .should('have.text', 'Resume Payment')
-    cy.get('[data-cy="popover-button"]').should('exist')
-    cy.get('[data-cy="popover-button"]').click()
-    cy.get('[data-cy="menu-button-0"]')
+
+    // The dropdown menu should exist
+    cy.get('@actionSection')
+      .find('[data-cy="popover-button"]')
+      .should('exist')
+      .click() // open the dropdown menu
+
+    // The 'Cancel Payment' button should exist in the dropdown menu
+    // click the button to open the dialog
+    cy.get('@actionSection')
+      .find('[data-cy="menu-button-0"]')
       .should('exist')
       .should('have.text', 'Cancel Payment')
+      .click()
+      .get('[data-cy="bcros-dialog"]').should('exist').as('dialog')
+
+    // verify the dialog content
+    // click the "Don't Cancel" button to close the dialog
+    cy.get('@dialog').find('h1').should('have.text', 'Cancel Payment?')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-text"]')
+      .find('p')
+      .should('have.text', 'Cancel payment for your 2024 Annual Report?')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-btn"]').should('have.length', 2)
+      .eq(0).should('have.text', 'Cancel Payment')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-btn"]')
+      .eq(1).should('have.text', 'Don\'t Cancel')
+      .click()
+      .get('[data-cy="bcros-dialog"]').should('not.exist')
   })
 })
diff --git a/cypress/e2e/error-flows/todo-errors/affiliation-error.cy.ts b/cypress/e2e/error-flows/todo-errors/affiliation-error.cy.ts
new file mode 100644
index 00000000..2286dca6
--- /dev/null
+++ b/cypress/e2e/error-flows/todo-errors/affiliation-error.cy.ts
@@ -0,0 +1,54 @@
+context('Error flows in To-Do section -> Affiliation Requests', () => {
+  it('Error fetching affiliation requests', () => {
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, true)
+
+    cy.get('[data-cy="bcros-dialog"]').should('exist').as('dialog')
+    cy.get('@dialog').find('h1').should('have.text', 'Error fetching affiliation invitation.')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-text"]')
+      .find('p').eq(0)
+      .should('have.text', 'An error happened while fetching affiliation invitation.')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-text"]')
+      .find('p').eq(1)
+      .should('have.text', 'Please try again later.')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-btn"]')
+      .should('have.text', 'OK')
+      .click()
+      .get('[data-cy="bcros-dialog"]').should('not.exist')
+  })
+
+  it('Error authorizing affiliation requests', () => {
+    cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, true, false)
+
+    cy.intercept(
+      'PATCH',
+      '**/api/v1/affiliationInvitations/**/authorization/accept',
+      { statusCode: 500, body: { message: 'error accepting the affiliation request' } }
+    ).as('acceptAffiliationRequest')
+
+    cy.get('[data-cy="todoItemActions-affiliation"]')
+      .find('button').eq(1)
+      .should('have.text', 'Authorize')
+      .click()
+
+    cy.wait('@acceptAffiliationRequest').its('response.statusCode').should('equal', 500)
+
+    cy.get('[data-cy="bcros-dialog"]').should('exist').as('dialog')
+    cy.get('@dialog').find('h1').should('have.text', 'Error updating affiliation invitation.')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-text"]')
+      .find('p').eq(0)
+      .should('have.text', 'An error happened while updating affiliation invitation.')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-text"]')
+      .find('p').eq(1)
+      .should('have.text', 'Please try again later.')
+    cy.get('@dialog')
+      .find('[data-cy="bcros-dialog-btn"]')
+      .should('have.text', 'OK')
+      .click()
+      .get('[data-cy="bcros-dialog"]').should('not.exist')
+  })
+})
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 4065f1f3..2fdd4aa2 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -34,23 +34,30 @@ Cypress.Commands.add('interceptBusinessContact', (identifier, legalType) => {
   })
 })
 
-Cypress.Commands.add('interceptAffiliationRequests', (hasAffiliationInvitations = false) => {
-  if (hasAffiliationInvitations) {
-    cy.fixture('todos/affiliationRequests').then((affiliationResponse) => {
+Cypress.Commands.add('interceptAffiliationRequests',
+  (hasAffiliationInvitations = false, hasAffiliationInvitationError = false) => {
+    if (hasAffiliationInvitations) {
+      cy.fixture('todos/affiliationRequests').then((affiliationResponse) => {
+        cy.intercept(
+          'GET',
+          '**/api/v1/affiliationInvitations?**',
+          affiliationResponse
+        )
+      })
+    } else if (hasAffiliationInvitationError) {
       cy.intercept(
         'GET',
         '**/api/v1/affiliationInvitations?**',
-        affiliationResponse
+        { statusCode: 500, body: { message: 'error loading affiliation requests' } }
       )
-    })
-  } else {
-    cy.intercept(
-      'GET',
-      '**/api/v1/affiliationInvitations?**',
-      { affiliationInvitations: [] }
-    )
-  }
-})
+    } else {
+      cy.intercept(
+        'GET',
+        '**/api/v1/affiliationInvitations?**',
+        { affiliationInvitations: [] }
+      )
+    }
+  })
 
 Cypress.Commands.add('interceptAddresses', (legalType) => {
   let addressFixture = 'addressBEN'
@@ -126,6 +133,7 @@ Cypress.Commands.add('visitBusinessDash',
     legalType = 'BEN',
     isHistorical = false,
     hasAffiliationInvitations = false,
+    hasAffiliationInvitationError = false,
     taskFixture = 'tasksEmpty.json'
   ) => {
     sessionStorage.setItem('FAKE_CYPRESS_LOGIN', 'true')
@@ -140,7 +148,8 @@ Cypress.Commands.add('visitBusinessDash',
     cy.interceptBusinessInfo(identifier, legalType, isHistorical).as('getBusinessInfo')
     cy.interceptAddresses(legalType).as('getAddresses')
     cy.interceptParties(legalType, isHistorical).as('getParties')
-    cy.interceptAffiliationRequests(hasAffiliationInvitations).as('getAffiliationRequests')
+    cy.interceptAffiliationRequests(
+      hasAffiliationInvitations, hasAffiliationInvitationError).as('getAffiliationRequests')
     cy.interceptTasks(taskFixture).as('getTasks')
 
     cy.visit(`/${identifier}`)
@@ -163,6 +172,7 @@ Cypress.Commands.add('visitBusinessDashFor',
     path: string,
     identifier = undefined,
     hasAffiliationInvitations = false,
+    hasAffiliationInvitationError = false,
     taskFixture = 'tasksEmpty.json',
     filings = [],
     asStaff = false
@@ -197,7 +207,8 @@ Cypress.Commands.add('visitBusinessDashFor',
       cy.interceptBusinessContact(business.identifier, 'BEN').as('getBusinessContact')
       cy.interceptAddresses(business.legalType).as('getAddresses')
       cy.interceptParties(business.legalType, business.state === BusinessStateE.HISTORICAL).as('getParties')
-      cy.interceptAffiliationRequests(hasAffiliationInvitations).as('getAffiliationRequests')
+      cy.interceptAffiliationRequests(
+        hasAffiliationInvitations, hasAffiliationInvitationError).as('getAffiliationRequests')
       cy.interceptTasks(taskFixture).as('getTasks')
       cy.interceptFilingHistory(business.identifier, filings).as('getFilingHistory')
 
diff --git a/src/components/bcros/dialog/Index.vue b/src/components/bcros/dialog/Index.vue
index 9a49454e..b3b57a04 100644
--- a/src/components/bcros/dialog/Index.vue
+++ b/src/components/bcros/dialog/Index.vue
@@ -2,7 +2,7 @@
   <UModal
     :attach="attach || ''"
     :model-value="display"
-    :data-cy="'bcros-dialog' + name ? `-${name}` : ''"
+    :data-cy="'bcros-dialog' + (name ? `-${name}` : '')"
   >
     <div v-if="options" class="px-10 py-9">
       <div class="flex">
diff --git a/src/components/bcros/todo/List.vue b/src/components/bcros/todo/List.vue
index 74f9a5ee..c15088f5 100644
--- a/src/components/bcros/todo/List.vue
+++ b/src/components/bcros/todo/List.vue
@@ -5,23 +5,28 @@ const prop = defineProps({
   todos: { type: Array<TodoItemI>, required: true }
 })
 
-const authorizeAffiliationError = ref(todosStore.authorizeAffiliationsErrors.length > 0)
-const loadAffiliationInvitationError = ref(todosStore.loadAffiliationsError.length > 0)
+const authorizeAffiliationError = computed(() => {
+  return todosStore.authorizeAffiliationsErrors.length > 0
+})
+
+const loadAffiliationError = computed(() => {
+  return todosStore.loadAffiliationsError.length > 0
+})
 
 const authorizeAffiliationErrorOptions: DialogOptionsI = {
   title: 'Error updating affiliation invitation.',
   text: 'An error happened while updating affiliation invitation.',
   textExtra: ['Please try again later.'],
   hideClose: true,
-  buttons: [{ text: 'Ok', slotId: 'ok', color: 'primary', onClickClose: true }]
+  buttons: [{ text: 'OK', slotId: 'ok', color: 'primary', onClickClose: true }]
 }
 
-const loadAffiliationInvitationErrorOptions: DialogOptionsI = {
+const loadAffiliationErrorOptions: DialogOptionsI = {
   title: 'Error fetching affiliation invitation.',
   text: 'An error happened while fetching affiliation invitation.',
   textExtra: ['Please try again later.'],
   hideClose: true,
-  buttons: [{ text: 'Ok', slotId: 'ok', color: 'primary', onClickClose: true }]
+  buttons: [{ text: 'OK', slotId: 'ok', color: 'primary', onClickClose: true }]
 }
 
 const isExpandedInternal: Ref<boolean[]> = ref([])
@@ -56,9 +61,9 @@ const expand = (index: number, expanded: boolean) => {
     <!-- error dialog (fetching affiliation request) -->
     <BcrosDialog
       attach="#todoList"
-      :display="loadAffiliationInvitationError"
-      :options="loadAffiliationInvitationErrorOptions"
-      @close="loadAffiliationInvitationError = false"
+      :display="loadAffiliationError"
+      :options="loadAffiliationErrorOptions"
+      @close="todosStore.loadAffiliationsError = []"
     />
 
     <!-- error dialog (accepting affiliation request) -->
@@ -66,7 +71,7 @@ const expand = (index: number, expanded: boolean) => {
       attach="#todoList"
       :display="authorizeAffiliationError"
       :options="authorizeAffiliationErrorOptions"
-      @close="authorizeAffiliationError = false"
+      @close="todosStore.authorizeAffiliationsErrors = []"
     />
 
     <template v-if="todos.length > 0">

From bfd1c124a18c7f1578cae8f8013546f86a2e681a Mon Sep 17 00:00:00 2001
From: Peinan Wang <peinanwang@RiddleMBP.local>
Date: Mon, 19 Aug 2024 14:36:17 -0700
Subject: [PATCH 3/3] add i18n

---
 cypress/e2e/components/todos/draft.cy.ts      |  2 +-
 cypress/e2e/components/todos/pending.cy.ts    |  2 +-
 .../todo-errors/affiliation-error.cy.ts       |  4 +-
 src/components/bcros/todo/Item.vue            | 32 +++++++-----
 src/components/bcros/todo/List.vue            | 20 +++++---
 .../bcros/todo/dialog/CancelPaymentError.vue  | 14 ++++--
 .../bcros/todo/dialog/DeleteError.vue         | 18 ++++---
 src/lang/en.json                              | 49 ++++++++++++++++++-
 8 files changed, 105 insertions(+), 36 deletions(-)

diff --git a/cypress/e2e/components/todos/draft.cy.ts b/cypress/e2e/components/todos/draft.cy.ts
index 21015a43..b3e577d6 100644
--- a/cypress/e2e/components/todos/draft.cy.ts
+++ b/cypress/e2e/components/todos/draft.cy.ts
@@ -32,7 +32,7 @@ context('TODOs -> Draft Filing', () => {
       .should('exist')
       .should('have.text', 'Delete draft')
       .click()
-      .get('[data-cy="bcros-dialog"]').should('exist').as('dialog')
+      .get('[data-cy="bcros-dialog-confirm"]').should('exist').as('dialog')
 
     // verify the dialog content
     // click the cancel button to close the dialog
diff --git a/cypress/e2e/components/todos/pending.cy.ts b/cypress/e2e/components/todos/pending.cy.ts
index eb810b1c..a72ed398 100644
--- a/cypress/e2e/components/todos/pending.cy.ts
+++ b/cypress/e2e/components/todos/pending.cy.ts
@@ -36,7 +36,7 @@ context('TODOs -> Pending Filing', () => {
       .should('exist')
       .should('have.text', 'Cancel Payment')
       .click()
-      .get('[data-cy="bcros-dialog"]').should('exist').as('dialog')
+      .get('[data-cy="bcros-dialog-confirm"]').should('exist').as('dialog')
 
     // verify the dialog content
     // click the "Don't Cancel" button to close the dialog
diff --git a/cypress/e2e/error-flows/todo-errors/affiliation-error.cy.ts b/cypress/e2e/error-flows/todo-errors/affiliation-error.cy.ts
index 2286dca6..fc7d5e30 100644
--- a/cypress/e2e/error-flows/todo-errors/affiliation-error.cy.ts
+++ b/cypress/e2e/error-flows/todo-errors/affiliation-error.cy.ts
@@ -2,7 +2,7 @@ context('Error flows in To-Do section -> Affiliation Requests', () => {
   it('Error fetching affiliation requests', () => {
     cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, true)
 
-    cy.get('[data-cy="bcros-dialog"]').should('exist').as('dialog')
+    cy.get('[data-cy="bcros-dialog-loadAffiliationError"]').should('exist').as('dialog')
     cy.get('@dialog').find('h1').should('have.text', 'Error fetching affiliation invitation.')
     cy.get('@dialog')
       .find('[data-cy="bcros-dialog-text"]')
@@ -35,7 +35,7 @@ context('Error flows in To-Do section -> Affiliation Requests', () => {
 
     cy.wait('@acceptAffiliationRequest').its('response.statusCode').should('equal', 500)
 
-    cy.get('[data-cy="bcros-dialog"]').should('exist').as('dialog')
+    cy.get('[data-cy="bcros-dialog-authorizeAffiliationError"]').should('exist').as('dialog')
     cy.get('@dialog').find('h1').should('have.text', 'Error updating affiliation invitation.')
     cy.get('@dialog')
       .find('[data-cy="bcros-dialog-text"]')
diff --git a/src/components/bcros/todo/Item.vue b/src/components/bcros/todo/Item.vue
index 4f3ee663..85e9d4b2 100644
--- a/src/components/bcros/todo/Item.vue
+++ b/src/components/bcros/todo/Item.vue
@@ -2,6 +2,7 @@
 import { FilingTypes } from '@bcrs-shared-components/enums'
 import { filingTypeToName } from '~/utils/todo/task-filing/helper'
 
+const t = useNuxtApp().$i18n.t
 const todosStore = useBcrosTodos()
 const business = useBcrosBusiness()
 
@@ -31,34 +32,38 @@ const name = computed(() =>
 
 // dialog options config
 const confirmDeleteDraft: DialogOptionsI = {
-  title: 'Delete Draft?',
-  text: `Delete your ${prop.item.draftTitle}? Any changes you've made will be lost.`,
+  title: t('text.dialog.confirmDeleteDraft.title'),
+  text: t('text.dialog.confirmDeleteDraft.text').replace('DRAFT_TITLE', prop.item.draftTitle),
   hideClose: true,
   buttons: [
-    { text: 'Delete', slotId: 'delete', color: 'primary', onClick: () => deleteDraft() },
-    { text: 'Cancel', slotId: 'cancel', color: 'primary', onClickClose: true }
+    { text: t('button.dialog.delete'), slotId: 'delete', color: 'primary', onClick: () => deleteDraft() },
+    { text: t('button.dialog.cancel'), slotId: 'cancel', color: 'primary', onClickClose: true }
   ]
 }
 
 const confirmDeleteApplication: DialogOptionsI = {
-  title: `Delete ${filingTypeToName(prop.item.name)}?`,
-  text: `Deleting this ${prop.item.draftTitle} will remove this application and all information ` +
-    'associated with this application.',
+  title: t('text.dialog.confirmDeleteApplication.title').replace('FILING_NAME', filingTypeToName(prop.item.name)),
+  text: t('text.dialog.confirmDeleteApplication.text').replace('DRAFT_TITLE', prop.item.draftTitle),
   textExtra: ['You will be returned to the Business Registry page.'], // TO-DO: different text for name request
   hideClose: true,
   buttons: [
-    { text: 'Delete', slotId: 'delete', color: 'primary', onClick: () => deleteApplication() },
-    { text: 'Don\'t Delete', slotId: 'cancel', color: 'primary', onClickClose: true }
+    { text: t('button.dialog.delete'), slotId: 'delete', color: 'primary', onClick: () => deleteApplication() },
+    { text: t('button.dialog.dontDelete'), slotId: 'cancel', color: 'primary', onClickClose: true }
   ]
 }
 
 const confirmCancelPayment: DialogOptionsI = {
-  title: 'Cancel Payment?',
-  text: `Cancel payment for your ${prop.item.draftTitle}?`,
+  title: t('text.dialog.confirmCancelPayment.title'),
+  text: t('text.dialog.confirmCancelPayment.text').replace('DRAFT_TITLE', prop.item.draftTitle),
   hideClose: true,
   buttons: [
-    { text: 'Cancel Payment', slotId: 'delete', color: 'primary', onClick: () => cancelPaymentAndSetToDraft() },
-    { text: 'Don\'t Cancel', slotId: 'cancel', color: 'primary', onClickClose: true }
+    {
+      text: t('button.dialog.cancelPayment'),
+      slotId: 'delete',
+      color: 'primary',
+      onClick: () => cancelPaymentAndSetToDraft()
+    },
+    { text: t('button.dialog.dontCancelPayment'), slotId: 'cancel', color: 'primary', onClickClose: true }
   ]
 }
 
@@ -135,6 +140,7 @@ const cancelPaymentAndSetToDraft = async (_refreshDashboard = true): Promise<voi
     <!-- confirm dialog -->
     <BcrosDialog
       attach="#todoList"
+      name="confirm"
       :display="showConfirmDialog"
       :options="confirmDialog"
       @close="showConfirmDialog = false"
diff --git a/src/components/bcros/todo/List.vue b/src/components/bcros/todo/List.vue
index c15088f5..05d02fe9 100644
--- a/src/components/bcros/todo/List.vue
+++ b/src/components/bcros/todo/List.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const t = useNuxtApp().$i18n.t
+
 const todosStore = useBcrosTodos()
 
 const prop = defineProps({
@@ -14,19 +16,19 @@ const loadAffiliationError = computed(() => {
 })
 
 const authorizeAffiliationErrorOptions: DialogOptionsI = {
-  title: 'Error updating affiliation invitation.',
-  text: 'An error happened while updating affiliation invitation.',
-  textExtra: ['Please try again later.'],
+  title: t('text.dialog.error.authorizeAffiliationsError.title'),
+  text: t('text.dialog.error.authorizeAffiliationsError.text'),
+  textExtra: [t('text.dialog.error.tryAgain')],
   hideClose: true,
-  buttons: [{ text: 'OK', slotId: 'ok', color: 'primary', onClickClose: true }]
+  buttons: [{ text: t('button.general.ok'), slotId: 'ok', color: 'primary', onClickClose: true }]
 }
 
 const loadAffiliationErrorOptions: DialogOptionsI = {
-  title: 'Error fetching affiliation invitation.',
-  text: 'An error happened while fetching affiliation invitation.',
-  textExtra: ['Please try again later.'],
+  title: t('text.dialog.error.loadAffiliationsError.title'),
+  text: t('text.dialog.error.loadAffiliationsError.text'),
+  textExtra: [t('text.dialog.error.tryAgain')],
   hideClose: true,
-  buttons: [{ text: 'OK', slotId: 'ok', color: 'primary', onClickClose: true }]
+  buttons: [{ text: t('button.general.ok'), slotId: 'ok', color: 'primary', onClickClose: true }]
 }
 
 const isExpandedInternal: Ref<boolean[]> = ref([])
@@ -61,6 +63,7 @@ const expand = (index: number, expanded: boolean) => {
     <!-- error dialog (fetching affiliation request) -->
     <BcrosDialog
       attach="#todoList"
+      name="loadAffiliationError"
       :display="loadAffiliationError"
       :options="loadAffiliationErrorOptions"
       @close="todosStore.loadAffiliationsError = []"
@@ -69,6 +72,7 @@ const expand = (index: number, expanded: boolean) => {
     <!-- error dialog (accepting affiliation request) -->
     <BcrosDialog
       attach="#todoList"
+      name="authorizeAffiliationError"
       :display="authorizeAffiliationError"
       :options="authorizeAffiliationErrorOptions"
       @close="todosStore.authorizeAffiliationsErrors = []"
diff --git a/src/components/bcros/todo/dialog/CancelPaymentError.vue b/src/components/bcros/todo/dialog/CancelPaymentError.vue
index 6f5ff81e..8f65b1ca 100644
--- a/src/components/bcros/todo/dialog/CancelPaymentError.vue
+++ b/src/components/bcros/todo/dialog/CancelPaymentError.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 defineEmits<{(e:'close'): void}>()
 
+const t = useNuxtApp().$i18n.t
+
 const prop = defineProps({
   display: { type: Boolean, required: true },
   errors: { type: Array<any>, required: true }
@@ -9,14 +11,17 @@ const prop = defineProps({
 const { isStaffAccount } = useBcrosAccount()
 
 const cancelPaymentDialogOptions = computed(() => {
-  const title = 'Unable to Cancel Payment'
+  const title = t('text.dialog.error.cancelPayment.title')
 
   const text = (prop.errors.length < 1)
-    ? 'We were unable to cancel your payment.'
-    : 'We were unable to cancel your payment due to the following errors:'
+    ? t('text.dialog.error.cancelPayment.text.unableToCancel')
+    : t('text.dialog.error.cancelPayment.text.hasErrors')
 
   return {
-    title, text, hideClose: true, buttons: [{ text: 'OK', slotId: 'ok', color: 'primary', onClickClose: true }]
+    title,
+    text,
+    hideClose: true,
+    buttons: [{ text: t('button.general.ok'), slotId: 'ok', color: 'primary', onClickClose: true }]
   } as DialogOptionsI
 })
 </script>
@@ -24,6 +29,7 @@ const cancelPaymentDialogOptions = computed(() => {
 <template>
   <BcrosDialog
     attach="#todoList"
+    name="cancelPaymentError"
     :display="display"
     :options="cancelPaymentDialogOptions"
     @close="$emit('close')"
diff --git a/src/components/bcros/todo/dialog/DeleteError.vue b/src/components/bcros/todo/dialog/DeleteError.vue
index 2c6c4fd3..e9437532 100644
--- a/src/components/bcros/todo/dialog/DeleteError.vue
+++ b/src/components/bcros/todo/dialog/DeleteError.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 defineEmits<{(e:'close'): void}>()
 
+const t = useNuxtApp().$i18n.t
+
 const prop = defineProps({
   display: { type: Boolean, required: true },
   errors: { type: Array<any>, required: true },
@@ -11,20 +13,23 @@ const { isStaffAccount } = useBcrosAccount()
 
 const deleteErrorDialogOptions = computed(() => {
   const title = (prop.errors.length > 0 || prop.warnings.length < 1)
-    ? 'Unable to Delete Filing'
-    : 'Filing Deleted with Warnings'
+    ? t('text.dialog.error.deleteError.title.unableToDelete')
+    : t('text.dialog.error.deleteError.title.filingWithWarnings')
 
   let text = ''
   if (prop.errors.length + prop.warnings.length < 1) {
-    text = 'We were unable to delete your filing.'
+    text = t('text.dialog.error.deleteError.text.unableToDelete')
   } else if (prop.errors.length > 0) {
-    text = 'We were unable to delete your filing due to the following errors:'
+    text = t('text.dialog.error.deleteError.text.hasErrors')
   } else {
-    text = 'Please note the following:'
+    text = t('text.dialog.error.deleteError.text.other')
   }
 
   return {
-    title, text, hideClose: true, buttons: [{ text: 'OK', slotId: 'ok', color: 'primary', onClickClose: true }]
+    title,
+    text,
+    hideClose: true,
+    buttons: [{ text: t('button.general.ok'), slotId: 'ok', color: 'primary', onClickClose: true }]
   } as DialogOptionsI
 })
 </script>
@@ -32,6 +37,7 @@ const deleteErrorDialogOptions = computed(() => {
 <template>
   <BcrosDialog
     attach="#todoList"
+    name="deleteError"
     :display="display"
     :options="deleteErrorDialogOptions"
     @close="$emit('close')"
diff --git a/src/lang/en.json b/src/lang/en.json
index acc024ed..4118544b 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -31,6 +31,13 @@
       "ok": "OK",
       "change": "Change"
     },
+    "dialog": {
+      "delete": "Delete",
+      "cancel": "Cancel",
+      "dontDelete": "Don't Delete",
+      "cancelPayment": "Cancel Payment",
+      "dontCancelPayment": "Don't Cancel"
+    },
     "header": {
       "createAccount": "Create account",
       "login": "Log in"
@@ -138,7 +145,47 @@
       "error": {
         "contact": "If this issue persists, please contact us.",
         "default": "The Business Dashboard application is currently unavailable. Please try again later.",
-        "download": "File cannot be downloaded due to an application error. Please try again later."
+        "download": "File cannot be downloaded due to an application error. Please try again later.",
+        "authorizeAffiliationsError": {
+          "title": "Error updating affiliation invitation.",
+          "text": "An error happened while updating affiliation invitation."
+        },
+        "loadAffiliationsError": {
+          "title": "Error fetching affiliation invitation.",
+          "text": "An error happened while fetching affiliation invitation."
+        },
+        "tryAgain": "Please try again later.",
+        "deleteError": {
+          "title": {
+            "unableToDelete": "Unable to Delete Filing",
+            "filingWithWarnings": "Filing Deleted with Warnings"
+          },
+          "text": {
+            "unableToDelate": "We were unable to delete your filing.",
+            "hasErrors": "We were unable to delete your filing due to the following errors:",
+            "other": "Please note the following:"
+          }
+        },
+        "cancelPaymentError": {
+          "title": "Unable to Cancel Payment",
+          "text": {
+            "unableToCancel": "We were unable to cancel your payment.",
+            "hasErrors": "We were unable to cancel your payment due to the following errors:"
+          }
+        }
+      },
+      "confirmDeleteDraft": {
+        "title": "Delete Draft?",
+        "text": "Delete your DRAFT_TITLE? Any changes you've made will be lost."
+      },
+      "confirmDeleteApplication": {
+        "title": "Delete FILING_NAME?",
+        "text": "Deleting this DRAFT_TITLE will remove this application and all information associated with this application.",
+        "text2": "You will be returned to the Business Registry page."
+      },
+      "confirmCancelPayment": {
+        "title": "Cancel Payment?",
+        "text": "Cancel payment for your DRAFT_TITLE?"
       }
     },
     "todoItem": {