change address and director handling (#54)

* change address and director handling

* changes

cypress/e2e/components/addresses.cy.ts

@@ -46,4 +46,17 @@ context('Business dashboard -> Address side component', () => {
     cy.visitBusinessDashFor('businessInfo/ben/active.json', undefined, false, false, undefined, [addressChange])
     cy.get('[data-cy="address-pending-badge"]').should('exist')
   })
+
+  it('Shows modal for address change for appropriate business (base)', () => {
+    cy.visitBusinessDashFor('businessInfo/ben/active.json')
+    cy.get('[data-cy="address-change-button"]').click()
+    cy.get('[data-cy="continue-to-coa-button"]').should('exist')
+  })
+
+  // This doesn't work as you get navigated to a new domain
+  // it('Doesnt show modal for address change for non base business', () => {
+  //   cy.visitBusinessDashFor('businessInfo/sp/active.json')
+  //   cy.get('[data-cy="address-change-button"]').click()
+  //   cy.get('[data-cy="continue-to-coa-button"]').should('not.exist')
+  // })
 })

src/components/bcros/dialog/CardedModal.vue

@@ -0,0 +1,83 @@
+<template>
+  <UModal
+    :attach="attach || ''"
+    :model-value="display"
+    :data-cy="'bcros-dialog' + (name ? `-${name}` : '')"
+  >
+    <UCard
+      v-if="options"
+      :ui="{
+        header: {
+          background: backgroundColor ? backgroundColor : 'bg-bcGovColor-darkBlue',
+          base: 'font-2xl font-bold text-white rounded-t-lg'
+        },
+      }"
+    >
+      <template #header>
+        <slot name="header">
+          <UIcon v-if="options.alertIcon" name="i-mdi-information-outline" class="text-4xl text-red-500 mb-2" />
+          <h2 data-cy="bcros-dialog-title" class="text-white">
+            {{ options.title }}
+          </h2>
+          <UButton
+            v-if="!options.hideClose"
+            color="primary"
+            class="absolute top-0 right-0"
+            icon="i-heroicons-x-mark-20-solid"
+            variant="ghost"
+            data-cy="bcros-dialog-close-btn"
+            @click="close()"
+          />
+        </slot>
+      </template>
+
+      <div data-cy="bcros-dialog-text">
+        <!-- can be replaced with <template v-slot:content> -->
+        <slot name="content" :options="options">
+          <dialog-content
+            :base-text="options.text"
+            :extra-text="options.textExtra"
+          />
+        </slot>
+      </div>
+      <slot name="extra-content" :options="options" />
+
+      <template #footer>
+        <!-- can be replaced with <template v-slot:buttons> -->
+        <slot name="buttons" :options="options">
+          <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')" />
+              </slot>
+            </div>
+          </div>
+        </slot>
+      </template>
+    </UCard>
+  </UModal>
+</template>
+
+<script setup lang="ts">
+import { DialogButton, DialogContent } from './slot-templates'
+
+const props = defineProps<{
+  name?: string,
+  attach?: string,
+  display: boolean,
+  options?: DialogOptionsI,
+  backgroundColor?: string
+}>()
+
+const emit = defineEmits<{(e:'close'): void}>()
+
+const close = () => {
+  if (props.options?.onClose && props.options.onCloseArgs) {
+    props.options.onClose(...props.options.onCloseArgs)
+  } else if (props.options?.onClose) {
+    props.options.onClose()
+  }
+
+  emit('close')
+}
+</script>

src/interfaces/dialog-options-i.ts

@@ -9,4 +9,5 @@ export interface DialogOptionsI {
   textExtra?: string[]
   title: string
   alertIcon?: boolean
+  headerBackground?: boolean
 }

src/lang/en.json

@@ -215,6 +215,12 @@
           }
         }
       },
+      "coa": {
+        "p1": "Address changes take effect at 12:01 am Pacific Time. No other filings can be performed until an Address Change has taken effect.",
+        "p2": "If you need to perform other filings today, file them prior to your Address Change filing.",
+        "cancel": "Return to dashboard",
+        "continue": "Continue to Change of Address"
+      },
       "confirmDeleteDraft": {
         "title": "Delete Draft?",
         "text": "Delete your DRAFT_TITLE? Any changes you've made will be lost."
@@ -446,7 +452,8 @@
         "access": "Business Dashboard Access Denied",
         "default": "Business Dashboard Unavailable",
         "download": "Unable to download file"
-      }
+      },
+      "coa": "Address Change Effective 12:01 am"
     },
     "header": "BC Registry and Online Services",
     "menu": {

src/pages/dashboard.vue

@@ -174,10 +174,94 @@ const pendingAddress = computed(() => {
 
 const isChangeAddressDisabled = computed(() => business.currentBusiness.adminFreeze || pendingAddress.value)
 const isChangeDirectorDisabled = computed(() => business.currentBusiness.adminFreeze)
+const showChangeOfAddress = ref(false)
+
+const setChangeOfAddress = (show: boolean) => {
+  showChangeOfAddress.value = show
+}
+
+const goToStandaloneAddresses = () => {
+  const baseUrl = useRuntimeConfig().public.dashboardOldUrl
+  const url = `${baseUrl}/${business.currentBusinessIdentifier}/standalone-addresses?filingId=0`
+  navigateTo(url, { external: true })
+}
+
+const changeAddress = () => {
+  if (business.isEntityFirm()) {
+    const baseUrl = useRuntimeConfig().public.editApiURL
+    const url = `${baseUrl}/${business.currentBusinessIdentifier}/change`
+    navigateTo(url, { external: true })
+  } else if (business.isBaseCompany()) {
+    setChangeOfAddress(true)
+  } else {
+    goToStandaloneAddresses()
+  }
+}
+
+const goToStandaloneDirectors = () => {
+  const baseUrl = useRuntimeConfig().public.dashboardOldUrl
+  const url = `${baseUrl}/${business.currentBusinessIdentifier}/standalone-directors?filingId=0`
+  navigateTo(url, { external: true })
+}
+
+const changeDirectors = () => {
+  if (business.isEntityFirm()) {
+    const baseUrl = useRuntimeConfig().public.editApiURL
+    const url = `${baseUrl}/${business.currentBusinessIdentifier}/change`
+    navigateTo(url, { external: true })
+  } else {
+    goToStandaloneDirectors()
+  }
+}
+
+const coaDialogOptions = computed<DialogOptionsI>(() => {
+  const title = t('title.dialog.coa')
+  return {
+    title,
+    text: '', // content slot is used
+    hideClose: true,
+    buttons: [] as DialogButtonI[], // button slot is used
+    alertIcon: false
+  }
+})
 
 </script>
 
 <template>
+  <BcrosDialogCardedModal
+    name="confirmChangeofAddress"
+    :display="showChangeOfAddress"
+    :options="coaDialogOptions"
+    @close="setChangeOfAddress(false)"
+  >
+    <template #content>
+      <p>
+        {{ $t('text.dialog.coa.p1') }}
+      </p>
+      <br></br>
+      <p>
+        {{ $t('text.dialog.coa.p2') }}
+      </p>
+    </template>
+    <template #buttons>
+      <div>
+        <UButton
+          variant="link"
+          @click="setChangeOfAddress(false)"
+        >
+          {{ $t('text.dialog.coa.cancel') }}
+        </UButton>
+        <UButton
+          variant="link"
+          class="float-right"
+          data-cy="continue-to-coa-button"
+          @click="goToStandaloneAddresses()"
+        >
+          {{ $t('text.dialog.coa.continue') }}
+        </UButton>
+      </div>
+    </template>
+  </BcrosDialogCardedModal>
   <div class="mt-8 mb-16 flex flex-wrap" data-cy="business-dashboard">
     <div class="md:w-9/12 bcros-dash-col">
       <BcrosSection v-if="alerts && alerts.length>0" name="alerts">
@@ -266,10 +350,7 @@ const isChangeDirectorDisabled = computed(() => business.currentBusiness.adminFr
               :disabled="isChangeAddressDisabled"
               :label="$t('button.general.change')"
               data-cy="address-change-button"
-              @click="()=>{
-                // TO-DO  confirm the redirect logic
-                console.log('clicked!')
-              }"
+              @click="changeAddress"
             />
           </div>
         </template>
@@ -292,10 +373,7 @@ const isChangeDirectorDisabled = computed(() => business.currentBusiness.adminFr
               :disabled="isChangeDirectorDisabled"
               :label="$t('button.general.change')"
               data-cy="change-button"
-              @click="()=>{
-                // TO-DO  confirm the redirect logic
-                console.log('clicked!')
-              }"
+              @click="changeDirectors"
             />
           </div>
         </template>