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 <[email protected]>
bcgov · Oct 16, 2024 · d908f2b · d908f2b
1 parent e65d42f
commit d908f2b
Show file tree

Hide file tree

Showing 12 changed files with 192 additions and 171 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>