From d908f2bd87d987587622abf4caf52af3700c3ce7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9verin=20Beauvais?=
 <severinbeauvais@users.noreply.github.com>
Date: Wed, 16 Oct 2024 13:39:36 -0700
Subject: [PATCH] 23822 Update NR display for authorization and application
 (#749)

* - app version = 5.12.7
- added divider and updated whitespace for amalgamation
- removed base padding for name translation component
- updated header, added divider, updated whitespace and updated validation for continuation authorization
- updated header, added divider and updated whitespace for continuation application
- added divider and updated whitespace for incorporation
- added divider and updated whitespace for restoration
- fixed unit tests

* - remove bolding from rest of title

---------

Co-authored-by: Severin Beauvais <severin.beauvais@gov.bc.ca>
---
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 .../Amalgamation/ResultingBusinessName.vue    |  32 ++--
 src/components/Restoration/BusinessName.vue   |   2 +-
 src/components/common/NameRequestInfo.vue     |  27 ++-
 src/components/common/NameTranslations.vue    | 163 +++++++++---------
 .../ContinuationInAuthorization.vue           |  48 +++---
 .../ContinuationInBusinessBc.vue              |  43 +++--
 .../IncorporationDefineCompany.vue            |   6 +-
 .../Restoration/RestorationBusinessName.vue   |   8 +-
 .../unit/ContinuationInAuthorization.spec.ts  |  26 ++-
 tests/unit/ContinuationInBusinessBc.spec.ts   |   2 +-
 12 files changed, 192 insertions(+), 171 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9b0a5bf32..642430a9b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "business-create-ui",
-  "version": "5.12.6",
+  "version": "5.12.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "business-create-ui",
-      "version": "5.12.6",
+      "version": "5.12.7",
       "dependencies": {
         "@babel/compat-data": "^7.21.5",
         "@bcrs-shared-components/approval-type": "1.1.3",
diff --git a/package.json b/package.json
index 06331e30b..aef7ba62f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-create-ui",
-  "version": "5.12.6",
+  "version": "5.12.7",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",
diff --git a/src/components/Amalgamation/ResultingBusinessName.vue b/src/components/Amalgamation/ResultingBusinessName.vue
index 955b033ac..bfe8c8eb4 100644
--- a/src/components/Amalgamation/ResultingBusinessName.vue
+++ b/src/components/Amalgamation/ResultingBusinessName.vue
@@ -52,23 +52,23 @@
 
       <!-- Display Mode -->
       <template v-else>
-        <NameRequestInfo />
-        <NameTranslations
-          v-if="isAmalgamationFilingRegular"
-        />
+        <NameRequestInfo :spaceForButton="isAmalgamationFilingRegular" />
 
-        <v-btn
-          v-if="isAmalgamationFilingRegular"
-          text
-          color="primary"
-          class="btn-undo"
-          @click="resetName()"
-        >
-          <v-icon small>
-            mdi-undo
-          </v-icon>
-          <span>Undo</span>
-        </v-btn>
+        <template v-if="isAmalgamationFilingRegular">
+          <v-divider class="mx-6" />
+          <NameTranslations class="px-6 py-8" />
+          <v-btn
+            text
+            color="primary"
+            class="btn-undo"
+            @click="resetName()"
+          >
+            <v-icon small>
+              mdi-undo
+            </v-icon>
+            <span>Undo</span>
+          </v-btn>
+        </template>
       </template>
     </v-card>
   </div>
diff --git a/src/components/Restoration/BusinessName.vue b/src/components/Restoration/BusinessName.vue
index e45bbf057..3cf6a90b8 100644
--- a/src/components/Restoration/BusinessName.vue
+++ b/src/components/Restoration/BusinessName.vue
@@ -50,7 +50,7 @@
 
     <!-- Display Mode -->
     <template v-else>
-      <NameRequestInfo />
+      <NameRequestInfo :spaceForButton="true" />
 
       <v-btn
         text
diff --git a/src/components/common/NameRequestInfo.vue b/src/components/common/NameRequestInfo.vue
index 0b33068e2..c6ca3ea3e 100644
--- a/src/components/common/NameRequestInfo.vue
+++ b/src/components/common/NameRequestInfo.vue
@@ -22,7 +22,10 @@
             class="pt-4 pt-sm-0"
           >
             <ul class="name-request-list-items pl-1">
-              <li id="name-request-title">
+              <li
+                id="name-request-title"
+                :class="{ 'space-for-button': spaceForButton }"
+              >
                 <span v-if="displayNrNumber"><strong>{{ getNameRequestNumber }}</strong> - </span>
                 <span>{{ getNameRequestApprovedName }}</span>
               </li>
@@ -97,6 +100,7 @@
             id="adopted-name-value"
             cols="12"
             sm="9"
+            :class="{ 'space-for-button': spaceForButton }"
           >
             {{ getNameRequestApprovedName }}
           </v-col>
@@ -144,7 +148,10 @@
             sm="9"
           >
             <ul class="numbered-company-list-items pl-0">
-              <li id="numbered-company-title">
+              <li
+                id="numbered-company-title"
+                :class="{ 'space-for-button': spaceForButton }"
+              >
                 <strong>[Incorporation Number]</strong> {{ numberedCompanySuffix }}
               </li>
               <li class="bullet-point mt-4 ml-6">
@@ -228,7 +235,10 @@
             sm="9"
           >
             <ul class="numbered-company-list-items pl-0">
-              <li id="numbered-company-title">
+              <li
+                id="numbered-company-title"
+                :class="{ 'space-for-button': spaceForButton }"
+              >
                 <strong>[Incorporation Number]</strong> {{ numberedCompanySuffix }}
               </li>
               <li class="mt-4">
@@ -275,6 +285,7 @@ export default class NameRequestInfo extends Mixins(CommonMixin, DateMixin) {
 
   @Prop({ default: true }) readonly displayNrNumber!: boolean
   @Prop({ default: true }) readonly displayApplicantInfo!: boolean
+  @Prop({ default: false }) readonly spaceForButton!: boolean
 
   @Getter(useStore) getCorrectNameOption!: CorrectNameOptions
   @Getter(useStore) getEntityType!: CorpTypeCd
@@ -373,17 +384,15 @@ ul {
 }
 
 #name-request-title,
-#numbered-company-title {
-  font-size: $px-20;
-}
-
 #numbered-company-title,
 #changed-name-value,
 #adopted-name-value {
   font-size: $px-22;
-  font-weight: bold;
   color: $gray9;
-  padding-right: 80px; // to prevent overlap with button
+}
+
+.space-for-button {
+  padding-right: 80px !important; // to prevent overlap with button
 }
 
 .numbered-company-list-items {
diff --git a/src/components/common/NameTranslations.vue b/src/components/common/NameTranslations.vue
index a22dbf78d..ab46091f1 100644
--- a/src/components/common/NameTranslations.vue
+++ b/src/components/common/NameTranslations.vue
@@ -1,95 +1,94 @@
 <template>
-  <div id="name-translations">
+  <div
+    id="name-translations"
+    class="section-container pa-0"
+    :class="{ 'invalid-section': getShowErrors && !nameTranslationsValid }"
+  >
     <ConfirmDialog
       ref="confirmDialog"
       attach="#name-translations"
     />
 
-    <div
-      class="section-container pt-0"
-      :class="{ 'invalid-section': getShowErrors && !nameTranslationsValid }"
-    >
-      <v-row no-gutters>
-        <v-col
-          cols="12"
-          sm="3"
-          class="pr-4"
+    <v-row no-gutters>
+      <v-col
+        cols="12"
+        sm="3"
+        class="pr-4"
+      >
+        <label :class="{ 'error-text': getShowErrors && !nameTranslationsValid }">
+          <strong>Name Translation</strong>
+        </label>
+      </v-col>
+
+      <v-col
+        cols="12"
+        sm="9"
+        class="pt-4 pt-sm-0 ml-n1"
+      >
+        <v-checkbox
+          id="name-translation-checkbox"
+          v-model="checkbox"
+          class="pt-0 mt-0"
+          hide-details
+          @click="onCheckboxClick()"
         >
-          <label :class="{ 'error-text': getShowErrors && !nameTranslationsValid }">
-            <strong>Name Translation</strong>
-          </label>
-        </v-col>
-
-        <v-col
-          cols="12"
-          sm="9"
-          class="pt-4 pt-sm-0 ml-n1"
-        >
-          <v-checkbox
-            id="name-translation-checkbox"
-            v-model="checkbox"
-            class="pt-0 mt-0"
-            hide-details
-            @click="onCheckboxClick()"
+          <template #label>
+            <span class="checkbox-label">
+              This company uses one or more translations of its name outside of Canada.
+            </span>
+          </template>
+        </v-checkbox>
+
+        <template v-if="checkbox">
+          <p class="mt-4 mb-0">
+            <b>Note:</b> Name translations must use the Latin Alphabet (English, French, etc.).
+            Names that use other writing systems must spell the name phonetically in English or
+            French.
+          </p>
+
+          <v-btn
+            outlined
+            color="primary"
+            class="mt-6"
+            :disabled="isAddingNameTranslation"
+            @click="isAddingNameTranslation = true"
           >
-            <template #label>
-              <span class="checkbox-label">
-                This company uses one or more translations of its name outside of Canada.
-              </span>
-            </template>
-          </v-checkbox>
-
-          <template v-if="checkbox">
-            <p class="mt-4 mb-0">
-              <b>Note:</b> Name translations must use the Latin Alphabet (English, French, etc.).
-              Names that use other writing systems must spell the name phonetically in English or
-              French.
-            </p>
-
-            <v-btn
-              outlined
-              color="primary"
+            <v-icon>mdi-plus</v-icon>
+            <span>Add a Name Translation</span>
+          </v-btn>
+
+          <!-- Add/Edit Name Translation -->
+          <v-expand-transition>
+            <div
+              v-if="isAddingNameTranslation"
               class="mt-6"
-              :disabled="isAddingNameTranslation"
-              @click="isAddingNameTranslation = true"
             >
-              <v-icon>mdi-plus</v-icon>
-              <span>Add a Name Translation</span>
-            </v-btn>
-
-            <!-- Add/Edit Name Translation -->
-            <v-expand-transition>
-              <div
-                v-if="isAddingNameTranslation"
-                class="mt-6"
-              >
-                <AddNameTranslation
-                  :edit-name-translation="editingNameTranslation"
-                  @addTranslation="addNameTranslation($event)"
-                  @cancelTranslation="cancelNameTranslation()"
-                  @removeTranslation="removeNameTranslation(editIndex)"
-                />
-              </div>
-            </v-expand-transition>
-
-            <!-- List Name Translation -->
-            <v-expand-transition>
-              <div
-                v-if="getNameTranslations.length > 0"
-                class="mt-6"
-              >
-                <ListNameTranslations
-                  :isAddingNameTranslation="isAddingNameTranslation"
-                  :translationsList="getNameTranslations"
-                  @editTranslation="editNameTranslation($event)"
-                  @removeTranslation="removeNameTranslation($event)"
-                />
-              </div>
-            </v-expand-transition>
-          </template>
-        </v-col>
-      </v-row>
-    </div>
+              <AddNameTranslation
+                :edit-name-translation="editingNameTranslation"
+                @addTranslation="addNameTranslation($event)"
+                @cancelTranslation="cancelNameTranslation()"
+                @removeTranslation="removeNameTranslation(editIndex)"
+              />
+            </div>
+          </v-expand-transition>
+
+          <!-- List Name Translation -->
+          <v-expand-transition>
+            <div
+              v-if="getNameTranslations.length > 0"
+              class="mt-6"
+            >
+              <ListNameTranslations
+                :isAddingNameTranslation="isAddingNameTranslation"
+                :translationsList="getNameTranslations"
+                @editTranslation="editNameTranslation($event)"
+                @removeTranslation="removeNameTranslation($event)"
+              />
+            </div>
+          </v-expand-transition>
+        </template>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
diff --git a/src/views/ContinuationIn/ContinuationInAuthorization.vue b/src/views/ContinuationIn/ContinuationInAuthorization.vue
index 65f5d1b99..bbc825d2c 100644
--- a/src/views/ContinuationIn/ContinuationInAuthorization.vue
+++ b/src/views/ContinuationIn/ContinuationInAuthorization.vue
@@ -1,25 +1,21 @@
 <template>
   <div id="continuation-in-authorization">
-    <!-- Company Name -->
-    <section
-      v-if="getNameRequestNumber"
-      class="mt-10"
-    >
-      <header id="company-name-header">
-        <div class="h2 mb-4">
-          Company Name
-        </div>
-        <p>
-          The name request below has been linked to this continuation authorization. It is no longer
-          available to use with other businesses.
-        </p>
+    <!-- Name -->
+    <section class="mt-10">
+      <header id="name-header">
+        <h2>Name</h2>
       </header>
 
-      <v-card flat>
-        <NameRequestInfo
-          :displayNrNumber="false"
-          :displayApplicantInfo="false"
-        />
+      <v-card
+        flat
+        class="mt-4"
+      >
+        <NameRequestInfo />
+
+        <template v-if="!getNameRequestNumber">
+          <v-divider class="mx-6 mt-n2" />
+          <NameTranslations class="px-6 py-8" />
+        </template>
       </v-card>
     </section>
 
@@ -111,6 +107,7 @@ import BusinessContactInfo from '@/components/common/BusinessContactInfo.vue'
 import ExtraproRegistration from '@/components/ContinuationIn/ExtraproRegistration.vue'
 import ManualBusinessInfo from '@/components/ContinuationIn/ManualBusinessInfo.vue'
 import NameRequestInfo from '@/components/common/NameRequestInfo.vue'
+import NameTranslations from '@/components/common/NameTranslations.vue'
 
 @Component({
   components: {
@@ -118,12 +115,14 @@ import NameRequestInfo from '@/components/common/NameRequestInfo.vue'
     BusinessContactInfo,
     ExtraproRegistration,
     ManualBusinessInfo,
-    NameRequestInfo
+    NameRequestInfo,
+    NameTranslations
   }
 })
 export default class ContinuationInAuthorization extends Mixins(CommonMixin, NameRequestMixin) {
   @Getter(useStore) getBusinessContact!: ContactPointIF
   @Getter(useStore) getNameRequestNumber!: string
+  @Getter(useStore) getNameTranslationsValid!: boolean
   @Getter(useStore) getShowErrors!: boolean
   @Getter(useStore) getValidateSteps!: boolean
   @Getter(useStore) isFilingValid!: boolean
@@ -144,6 +143,7 @@ export default class ContinuationInAuthorization extends Mixins(CommonMixin, Nam
 
   /** Array of valid components. Must match validFlags below. */
   readonly validComponents = [
+    'name-header',
     'existing-business-information',
     'contact-information',
     'proof-of-authorization'
@@ -152,6 +152,7 @@ export default class ContinuationInAuthorization extends Mixins(CommonMixin, Nam
   /** Object of valid flags. Must match validComponents above. */
   get validFlags (): object {
     return {
+      validNameSection: this.getNameTranslationsValid,
       existingBusinessInformationValid: this.existingBusinessInformationValid,
       contactInformationValid: this.businessContactInfoValid,
       authorizationProofValid: this.authorizationProofValid
@@ -175,11 +176,13 @@ export default class ContinuationInAuthorization extends Mixins(CommonMixin, Nam
   }
 
   /** Watch all components on this page and set validity in store accordingly. */
+  @Watch('getNameTranslationsValid', { immediate: true })
   @Watch('existingBusinessInformationValid', { immediate: true })
   @Watch('businessContactInfoValid', { immediate: true })
   @Watch('authorizationProofValid', { immediate: true })
   private onComponentValidityChanged () {
     this.setContinuationAuthorizationPageValid(
+      this.getNameTranslationsValid &&
       this.existingBusinessInformationValid &&
       this.businessContactInfoValid &&
       this.authorizationProofValid
@@ -206,13 +209,6 @@ export default class ContinuationInAuthorization extends Mixins(CommonMixin, Nam
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
 
-// class that looks like an H2 but isn't (for numbering purposes)
-.h2 {
-  font-size: $px-18;
-  font-weight: bold;
-  color: $gray9;
-}
-
 .loading-container.grayed-out {
   // these are the same styles as dialog overlay:
   opacity: 0.46;
diff --git a/src/views/ContinuationIn/ContinuationInBusinessBc.vue b/src/views/ContinuationIn/ContinuationInBusinessBc.vue
index d8173d709..bbd2c2bbb 100644
--- a/src/views/ContinuationIn/ContinuationInBusinessBc.vue
+++ b/src/views/ContinuationIn/ContinuationInBusinessBc.vue
@@ -1,28 +1,28 @@
 <template>
   <div id="continuation-in-business-bc">
-    <!-- Company Name -->
+    <!-- Name -->
     <section class="mt-10">
-      <header id="company-name-header">
-        <h2 class="mb-4">
-          Company Name
-        </h2>
+      <header id="name-header">
+        <h2>Name</h2>
       </header>
 
-      <v-card flat>
-        <NameRequestInfo
-          :displayNrNumber="false"
-          :displayApplicantInfo="false"
-        />
-        <NameTranslations />
+      <v-card
+        flat
+        class="mt-4"
+      >
+        <NameRequestInfo />
+
+        <template v-if="!getNameRequestNumber">
+          <v-divider class="mx-6 mt-n2" />
+          <NameTranslations class="px-6 py-8" />
+        </template>
       </v-card>
     </section>
 
     <!-- Authorization Information -->
     <section class="mt-10">
       <header id="authorization-information-header">
-        <h2>
-          Authorization Information
-        </h2>
+        <h2>Authorization Information</h2>
         <p>
           The information that you submitted on your continuation authorization is displayed below. If
           you would like to change this information, please delete this application and submit a new
@@ -41,9 +41,7 @@
     <!-- Office Addresses -->
     <section class="mt-10">
       <header id="office-address-header">
-        <h2>
-          Office Addresses
-        </h2>
+        <h2>Office Addresses</h2>
         <p>
           Provide mailing and delivery addresses for the Registered Office and the Records Office.
           All addresses must be in B.C.
@@ -153,6 +151,7 @@ export default class ContinuationInBusinessBc extends Mixins(CommonMixin) {
   @Getter(useStore) getDefineCompanyStep!: DefineCompanyIF
   @Getter(useStore) getFolioNumber!: string
   @Getter(useStore) getFolioNumberValid!: boolean
+  @Getter(useStore) getNameRequestNumber!: string
   @Getter(useStore) getNameTranslationsValid!: boolean
   @Getter(useStore) getShowErrors!: boolean
   @Getter(useStore) isPremiumAccount!: boolean
@@ -170,7 +169,7 @@ export default class ContinuationInBusinessBc extends Mixins(CommonMixin) {
 
   /** Array of valid components. Must match validFlags. */
   readonly validComponents = [
-    'company-name-header',
+    'name-header',
     'authorization-information-header',
     'office-address-header',
     'registered-office-contact-header',
@@ -180,7 +179,7 @@ export default class ContinuationInBusinessBc extends Mixins(CommonMixin) {
   /** Object of valid flags. Must match validComponents. */
   get validFlags (): object {
     return {
-      validCompanyNameForm: this.getNameTranslationsValid,
+      validNameSection: this.getNameTranslationsValid,
       validAuthorizationInfo: this.authorizationInfoValid,
       validAddressForm: this.addressFormValid,
       validBusinessContactForm: this.businessContactFormValid,
@@ -232,19 +231,19 @@ export default class ContinuationInBusinessBc extends Mixins(CommonMixin) {
     })
   }
 
+  @Watch('getNameTranslationsValid', { immediate: true })
   @Watch('authorizationInfoValid', { immediate: true })
   @Watch('addressFormValid', { immediate: true })
   @Watch('businessContactFormValid', { immediate: true })
   @Watch('getFolioNumberValid', { immediate: true })
-  @Watch('getNameTranslationsValid', { immediate: true })
   // Update the overall Define Company Step validity
   private onDefineCompanyStepValid (): void {
     this.setDefineCompanyStepValidity(
+      this.getNameTranslationsValid &&
       this.authorizationInfoValid &&
       this.addressFormValid &&
       this.businessContactFormValid &&
-      (!this.isPremiumAccount || this.getFolioNumberValid) &&
-      this.getNameTranslationsValid
+      (!this.isPremiumAccount || this.getFolioNumberValid)
     )
   }
 
diff --git a/src/views/Incorporation/IncorporationDefineCompany.vue b/src/views/Incorporation/IncorporationDefineCompany.vue
index 13f2b5faa..65a262df4 100644
--- a/src/views/Incorporation/IncorporationDefineCompany.vue
+++ b/src/views/Incorporation/IncorporationDefineCompany.vue
@@ -11,7 +11,11 @@
         class="mt-5"
       >
         <NameRequestInfo />
-        <NameTranslations v-if="!isEntityCoop" />
+
+        <template v-if="!isEntityCoop">
+          <v-divider class="mx-6" />
+          <NameTranslations class="px-6 py-8" />
+        </template>
       </v-card>
     </section>
 
diff --git a/src/views/Restoration/RestorationBusinessName.vue b/src/views/Restoration/RestorationBusinessName.vue
index 4c6398139..0f9ebc285 100644
--- a/src/views/Restoration/RestorationBusinessName.vue
+++ b/src/views/Restoration/RestorationBusinessName.vue
@@ -12,6 +12,7 @@
           as a numbered company.
         </p>
       </header>
+
       <v-card
         flat
         class="mt-5"
@@ -21,7 +22,11 @@
           id="business-type"
           class="mt-n8"
         />
-        <NameTranslations id="name-translations" />
+        <v-divider class="mx-6" />
+        <NameTranslations
+          id="name-translations"
+          class="px-6 py-8"
+        />
       </v-card>
     </section>
 
@@ -36,6 +41,7 @@
           Determine the restoration and approval type.
         </p>
       </header>
+
       <v-card
         flat
         class="mt-5"
diff --git a/tests/unit/ContinuationInAuthorization.spec.ts b/tests/unit/ContinuationInAuthorization.spec.ts
index 3173ec5a2..be117f942 100644
--- a/tests/unit/ContinuationInAuthorization.spec.ts
+++ b/tests/unit/ContinuationInAuthorization.spec.ts
@@ -4,6 +4,8 @@ import ContinuationInAuthorization from '@/views/ContinuationIn/ContinuationInAu
 import ExtraproRegistration from '@/components/ContinuationIn/ExtraproRegistration.vue'
 import BusinessContactInfo from '@/components/common/BusinessContactInfo.vue'
 import AuthorizationProof from '@/components/ContinuationIn/AuthorizationProof.vue'
+import NameRequestInfo from '@/components/common/NameRequestInfo.vue'
+import NameTranslations from '@/components/common/NameTranslations.vue'
 
 describe('Continuation In Authorization component', () => {
   it('renders the component correctly', async () => {
@@ -17,21 +19,27 @@ describe('Continuation In Authorization component', () => {
     // spot check some content (structure / text)
     const firstSection = wrapper.findAll('section').at(0)
     expect(firstSection.find('header').exists()).toBe(true)
-    expect(firstSection.find('header h2').text()).toBe('Existing Business Information')
-    expect(firstSection.find('header p').text()).toContain('Enter information about')
-    expect(firstSection.findComponent(ExtraproRegistration).exists()).toBe(true)
+    expect(firstSection.find('header h2').text()).toBe('Name')
+    expect(firstSection.findComponent(NameRequestInfo).exists()).toBe(true)
+    expect(firstSection.findComponent(NameTranslations).exists()).toBe(true)
 
     const secondSection = wrapper.findAll('section').at(1)
     expect(secondSection.find('header').exists()).toBe(true)
-    expect(secondSection.find('header h2').text()).toBe('Contact Information')
-    expect(secondSection.find('header p').text()).toContain('Enter the contact information')
-    expect(secondSection.findComponent(BusinessContactInfo).exists()).toBe(true)
+    expect(secondSection.find('header h2').text()).toBe('Existing Business Information')
+    expect(secondSection.find('header p').text()).toContain('Enter information about')
+    expect(secondSection.findComponent(ExtraproRegistration).exists()).toBe(true)
 
     const thirdSection = wrapper.findAll('section').at(2)
     expect(thirdSection.find('header').exists()).toBe(true)
-    expect(thirdSection.find('header h2').text()).toBe('Proof of Authorization')
-    expect(thirdSection.find('header p').text()).toContain('You must provide proof')
-    expect(thirdSection.findComponent(AuthorizationProof).exists()).toBe(true)
+    expect(thirdSection.find('header h2').text()).toBe('Contact Information')
+    expect(thirdSection.find('header p').text()).toContain('Enter the contact information')
+    expect(thirdSection.findComponent(BusinessContactInfo).exists()).toBe(true)
+
+    const fourthSection = wrapper.findAll('section').at(3)
+    expect(fourthSection.find('header').exists()).toBe(true)
+    expect(fourthSection.find('header h2').text()).toBe('Proof of Authorization')
+    expect(fourthSection.find('header p').text()).toContain('You must provide proof')
+    expect(fourthSection.findComponent(AuthorizationProof).exists()).toBe(true)
 
     wrapper.destroy()
   })
diff --git a/tests/unit/ContinuationInBusinessBc.spec.ts b/tests/unit/ContinuationInBusinessBc.spec.ts
index 6c785f83c..c284a2c31 100644
--- a/tests/unit/ContinuationInBusinessBc.spec.ts
+++ b/tests/unit/ContinuationInBusinessBc.spec.ts
@@ -30,7 +30,7 @@ describe('Continuation In Business BC component', () => {
     // spot check some content (structure / text)
     const firstSection = wrapper.findAll('section').at(0)
     expect(firstSection.find('header').exists()).toBe(true)
-    expect(firstSection.find('header h2').text()).toBe('Company Name')
+    expect(firstSection.find('header h2').text()).toBe('Name')
     expect(firstSection.findComponent(NameRequestInfo).exists()).toBe(true)
     expect(firstSection.findComponent(NameTranslations).exists()).toBe(true)