update the business details section in tombstone (#64)

* update the business details section in tombstone

* add cypress tests

cypress/e2e/components/tombstone/business-details.cy.ts

@@ -0,0 +1,36 @@
+context('Business tombstone - business detail section', () => {
+  it('Verify the business detail section is rendered for SP/GP businesses', () => {
+    cy.visitBusinessDashFor('businessInfo/sp/active.json')
+
+    cy.get('[data-cy="business-details"]')
+      .should('contain', 'Registration Date')
+      .should('contain', 'Registration Number')
+      .should('contain', 'Business Number')
+      .should('not.contain', 'Incorporation Number')
+      .should('contain', 'Email')
+      .should('contain', 'Phone')
+  })
+
+  it('Verify the business detail section is rendered for non-firm (SP/GP) businesses', () => {
+    cy.visitBusinessDashFor('businessInfo/ben/active.json')
+
+    cy.get('[data-cy="business-details"]')
+      .should('not.contain', 'Registration Date')
+      .should('not.contain', 'Registration Number')
+      .should('contain', 'Business Number')
+      .should('contain', 'Incorporation Number')
+      .should('contain', 'Email')
+      .should('contain', 'Phone')
+  })
+
+  it('Verify the change buttons for email and phone number', () => {
+    // Intercept the request for the business profile page
+    cy.intercept('GET', '**businessprofile**').as('goToBusinessProfilePage')
+
+    cy.visitBusinessDashFor('businessInfo/ben/active.json')
+      .get('[data-cy="business-details"]')
+      .get('[data-cy="value-email"]').trigger('mouseover')
+      .get('[data-cy="change-button-email"]').click()
+      .wait('@goToBusinessProfilePage')
+  })
+})

src/components/bcros/businessDetails/index.vue

@@ -4,21 +4,72 @@ const t = useNuxtApp().$i18n.t
 const business = useBcrosBusiness()
 const { currentBusiness, currentBusinessContact, currentBusinessIdentifier, isFirm } = storeToRefs(business)
 const bootstrap = useBcrosBusinessBootstrap()
+const { goToBusinessProfilePage } = useBcrosNavigate()
 const { bootstrapFiling, bootstrapNrNumber } = storeToRefs(bootstrap)
 
-const businessInfo = ref([] as { term: string, value: string }[])
+const registrationDate = computed(() => {
+  if (currentBusiness.value && isFirm.value) {
+    return (dateToPacificDate(apiToDate(currentBusiness.value.foundingDate), true) || t('text.general.nA'))
+  }
+  return null
+})
+
+const businessInfo = ref([] as {
+  term: string, // label text in the UI
+  name: string, // for data-cy
+  value: string,
+  show: boolean, // whether this info should be displayed
+  hasChangeButton?: boolean,
+  showChangeButton?: boolean
+}[])
+
 const updateBusinessDetails = () => {
   businessInfo.value = []
   if (currentBusinessIdentifier.value) {
-    const identifierLabel = isFirm.value ? t('label.business.registrationNum') : t('label.business.incorporationNum')
     businessInfo.value = [
-      { term: t('label.business.businessNum'), value: currentBusiness.value.taxId || t('text.general.nA') },
-      { term: identifierLabel, value: currentBusiness.value.identifier || t('text.general.nA') },
-      { term: t('label.general.email'), value: currentBusinessContact.value.email || t('text.general.nA') },
-      { term: t('label.general.phone'), value: currentBusinessContact.value.phone || t('text.general.nA') }
+      {
+        term: t('label.business.registrationDate'),
+        name: 'registration-date',
+        show: !!registrationDate.value, // add registration date if it exists
+        value: registrationDate.value
+      },
+      {
+        term: t('label.business.registrationNum'),
+        name: 'registration-number',
+        show: isFirm.value, // only SP and GP businesses have registration numbers
+        value: currentBusiness.value.identifier || t('text.general.nA')
+      },
+      {
+        term: t('label.business.businessNum'),
+        name: 'business-number',
+        show: true,
+        value: currentBusiness.value.taxId || t('text.general.nA')
+      },
+      {
+        term: t('label.business.incorporationNum'),
+        name: 'incorporation-number',
+        show: !isFirm.value, // non SP/GP businesses have incorporation numbers
+        value: currentBusiness.value.identifier || t('text.general.nA')
+      },
+      {
+        term: t('label.general.email'),
+        name: 'email',
+        show: true,
+        value: currentBusinessContact.value.email || t('text.general.nA'),
+        hasChangeButton: !business.isDisableNonBenCorps(),
+        showChangeButton: false
+      },
+      {
+        term: t('label.general.phone'),
+        name: 'phone',
+        show: true,
+        value: currentBusinessContact.value.phone || t('text.general.nA'),
+        hasChangeButton: !business.isDisableNonBenCorps(),
+        showChangeButton: false
+      }
     ]
   } else if (bootstrapNrNumber.value) {
-    businessInfo.value = [{ term: 'Name Request', value: bootstrapNrNumber.value }]
+    businessInfo.value = [{ term: 'Name Request', name: 'name-request', show: true, value: bootstrapNrNumber.value }]
   }
 }
 
@@ -56,12 +107,33 @@ watch(() => route.params.identifier as string, loadComponentData, { immediate: t
       </div>
       <div class="justify-self-end" data-cy="business-details-info">
         <dl class="text-sm">
-          <template v-for="info in businessInfo" :key="info.term">
-            <div class="flex mb-1">
+          <template v-for="info in businessInfo" :key="info.name">
+            <div v-if="info.show" class="flex gap-0 mb-1 items-center">
               <dt class="font-bold mr-2">
                 {{ info.term }}:
               </dt>
-              <dd>{{ info.value }}</dd>
+              <dd v-if="!info.hasChangeButton">
+                {{ info.value }}
+              </dd>
+              <dd
+                v-else
+                class="flex items-center cursor-pointer"
+                :data-cy="'value-' + info.name"
+                @mouseover="info.showChangeButton = true"
+                @mouseleave="info.showChangeButton = false"
+                @click="goToBusinessProfilePage"
+              >
+                <span>{{ info.value }}</span>
+                <UButton
+                  v-show="info.showChangeButton"
+                  class="ml-1 text-sm"
+                  size="2xs"
+                  variant="ghost"
+                  icon="i-mdi-pencil"
+                  :label="$t('button.general.change')"
+                  :data-cy="'change-button-' + info.name"
+                />
+              </dd>
             </div>
           </template>
         </dl>

src/composables/useBcrosNavigate.ts

@@ -45,6 +45,10 @@ export const useBcrosNavigate = () => {
     redirect(config.public.dashboardOldUrl + `/${business.currentBusiness.identifier}/digital-credentials/`)
   }
 
+  function goToBusinessProfilePage () {
+    redirect(config.public.authWebURL + '/businessprofile')
+  }
+
   function goToCreatePage (path: string, params?: { [key: string]: string }) {
     redirect(config.public.createURL + path, params)
   }
@@ -71,6 +75,7 @@ export const useBcrosNavigate = () => {
     goToDigitalCredentialsPage,
     goToCreatePage,
     goToBusinessDashboard,
-    goToEditPage
+    goToEditPage,
+    goToBusinessProfilePage
   }
 }

src/lang/en.json

@@ -107,6 +107,7 @@
         "dissolution": "Dissolution",
         "voluntaryDissolution": "Voluntary Dissolution"
       },
+      "registrationDate": "Registration Date",
       "businessNum": "Business Number",
       "incorporationNum": "Incorporation Number",
       "registrationNum": "Registration Number",
@@ -118,6 +119,7 @@
         "SP": "BC Sole Proprietorship",
         "GP": "BC General Partnership",
         "ULC": "BC Unlimited Liability Company",
+        "C": "BC Limited Company",
         "undefined": "N/A"
       }
     },

src/stores/business.ts

@@ -16,7 +16,16 @@ export const useBcrosBusiness = defineStore('bcros/business', () => {
 
   const currentBusinessAddresses: Ref<EntityAddressCollectionI> = ref(undefined)
   const currentParties: Ref<PartiesI> = ref(undefined)
+
   const currentBusinessIdentifier = computed((): string => currentBusiness.value?.identifier)
+
+  // set BUSINESS_ID session storage when business identifier is loaded
+  watch(currentBusinessIdentifier, (value) => {
+    if (value) {
+      sessionStorage.setItem('BUSINESS_ID', value)
+    }
+  }, { immediate: true })
+
   const currentBusinessName = computed((): string => {
     if (!currentBusiness.value) {
       return undefined