Updated Amalgamation Selection in response to UXA notes (#602)

* Updated in response to Yui's observations * Updated in response to Sev's comments
bcgov · Dec 20, 2023 · 7ce2d90 · 7ce2d90
1 parent 03aca5b
commit 7ce2d90
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 57 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-filings-ui",
-  "version": "7.0.28",
+  "version": "7.0.29",
   "private": true,
   "appName": "Filings UI",
   "sbcName": "SBC Common Components",

diff --git a/src/components/EntityInfo/EntityMenu.vue b/src/components/EntityInfo/EntityMenu.vue
@@ -41,34 +41,6 @@
       </v-tooltip>
     </span>
 
-    <!-- Amalgamate -->
-    <span v-if="isBusiness && !isHistorical">
-      <v-tooltip
-        top
-        content-class="top-tooltip"
-        transition="fade-transition"
-        :disabled="!amalgamateTooltipText"
-      >
-        <template #activator="{ on }">
-          <span v-on="on">
-            <v-btn
-              id="amalgamate-button"
-              small
-              text
-              color="primary"
-              :disabled="!isAllowed(AllowableActions.AMALGAMATION)"
-              @click="goToAmalgamationSelection()"
-              v-on="on"
-            >
-              <v-icon medium>mdi-domain-plus</v-icon>
-              <span class="font-13 ml-1">Amalgamate</span>
-            </v-btn>
-          </span>
-        </template>
-        {{ amalgamateTooltipText }}
-      </v-tooltip>
-    </span>
-
     <!-- Download Business Summary -->
     <span v-if="isAllowed(AllowableActions.BUSINESS_SUMMARY)">
       <v-tooltip
@@ -239,6 +211,33 @@
                 </template>
                 <span>{{ agmLocationChgToolTipText }}</span>
               </v-tooltip>
+
+              <!-- Amalgamate -->
+              <v-tooltip
+                right
+                content-class="right-tooltip"
+              >
+                <template #activator="{ on }">
+                  <div
+                    v-on="on"
+                  >
+                    <v-list-item
+                      id="amalgamate-list-item"
+                      small
+                      text
+                      color="primary"
+                      :disabled="!isAllowed(AllowableActions.AMALGAMATION)"
+                      @click="goToAmalgamationSelection()"
+                      v-on="on"
+                    >
+                      <v-list-item-title>
+                        <span class="app-blue">Amalgamate</span>
+                      </v-list-item-title>
+                    </v-list-item>
+                  </div>
+                </template>
+                <span>{{ amalgamateTooltipText }}</span>
+              </v-tooltip>
             </span>
           </v-list-item-group>
         </v-list>
@@ -321,7 +320,7 @@ export default class EntityMenu extends Mixins(AllowableActionsMixin) {
     } else if (this.isPendingDissolution) {
       return 'This business has a future effective dissolution and cannot be involved in an amalgamation.'
     }
-    return null
+    return 'Amalgamate with other businesses.'
   }
 
   /**

diff --git a/src/views/AmalgamationSelection.vue b/src/views/AmalgamationSelection.vue
@@ -14,7 +14,7 @@
                 Choose the type of amalgamation to be filed.
               </h1>
               <p>
-                There are two types of amalgamation filings. Choose the appropriate one for your filing.
+                Choose the appropriate one for your filing.
               </p>
             </header>
           </article>
@@ -27,7 +27,7 @@
           <v-card
             id="start-horizontal-short-form-card"
             flat
-            class="pt-6 pb-8 px-4"
+            class="pa-8"
           >
             <h2>
               Horizontal short-form amalgamation
@@ -63,7 +63,7 @@
           <v-card
             id="start-vertical-short-form-card"
             flat
-            class="pt-6 pb-8 px-4"
+            class="pa-8"
           >
             <h2>
               Vertical short-form amalgamation
@@ -99,7 +99,7 @@
           <v-card
             id="start-regular-long-form-card"
             flat
-            class="pt-6 pb-8 px-4"
+            class="pa-8"
           >
             <h2>
               Regular long-form amalgamation
@@ -235,10 +235,8 @@ export default class AmalgamationSelection extends Vue {
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
 
-header p,
-section p,
-ul {
-  color: $gray7;
+p, ul {
+  color: $gray9;
 }
 
 h1 {
@@ -250,7 +248,7 @@ h1 {
 // Have all the 3 options (cards) with same height.
 .v-card {
   height: 100%;
-  margin-bottom: 8rem;
+  margin-bottom: 4rem;
   position: relative;
 }
 

diff --git a/tests/unit/EntityMenu.spec.ts b/tests/unit/EntityMenu.spec.ts
@@ -295,27 +295,19 @@ describe('Entity Menu - View and Change Business Information click tests', () =>
 describe('Entity Menu - Amagamate button tests', () => {
   it('displays the Amalgamate button', async () => {
     businessStore.setLegalType(CorpTypeCd.BC_COMPANY)
+    businessStore.$state.businessInfo.state = EntityState.ACTIVE
 
     const wrapper = mount(EntityMenu, {
       vuetify,
       mixins: [{ methods: { isAllowed: () => true } }],
       propsData: { businessId: 'BC1234567' }
     })
 
-    expect(wrapper.find('#amalgamate-button').exists()).toBe(true)
-    expect(wrapper.find('#amalgamate-button').text()).toBe('Amalgamate')
-    expect(wrapper.find('#amalgamate-button').classes()).not.toContain('v-btn--disabled') // enabled
-    wrapper.destroy()
-  })
-
-  it('don\'t display Amalgamate button if business is historical', async () => {
-    businessStore.$state.businessInfo.state = EntityState.HISTORICAL
-
-    const wrapper = mount(EntityMenu, {
-      vuetify
-    })
+    await wrapper.find('.menu-btn').trigger('click')
 
-    expect(wrapper.find('#amalgamate-button').exists()).toBe(false)
+    expect(wrapper.find('#amalgamate-list-item').exists()).toBe(true)
+    expect(wrapper.find('#amalgamate-list-item').text()).toBe('Amalgamate')
+    expect(wrapper.find('#amalgamate-list-item').classes()).not.toContain('v-list-item--disabled') // enabled
     wrapper.destroy()
   })
 
@@ -328,9 +320,11 @@ describe('Entity Menu - Amagamate button tests', () => {
       propsData: { businessId: 'BC1234567' }
     })
 
-    expect(wrapper.find('#amalgamate-button').exists()).toBe(true)
-    expect(wrapper.find('#amalgamate-button').text()).toBe('Amalgamate')
-    expect(wrapper.find('#amalgamate-button').classes()).toContain('v-btn--disabled') // disabled
+    await wrapper.find('.menu-btn').trigger('click')
+
+    expect(wrapper.find('#amalgamate-list-item').exists()).toBe(true)
+    expect(wrapper.find('#amalgamate-list-item').text()).toBe('Amalgamate')
+    expect(wrapper.find('#amalgamate-list-item').classes()).toContain('v-list-item--disabled') // disabled
     wrapper.destroy()
   })
 })