18449 - GP/SP registration modify (bcgov#582)

* GP/SP regirstration modify * package version * fix linting * unit tests * clean up * fix linting * unit tests fix * unit tests fixing 2 * fix linting * reset back to previous one * show old UI with registries staff only * GP/SP regirstration modify * fix linting * unit tests * clean up * unit tests fix * unit tests fixing 2 * fix UI and testing * fix registries contact info messed up issue * fix lint * clean up help contact us * clean up the getter, import etc.. * revert FirmContactInfo back * remove obsolete component
JazzarKarim · Jan 26, 2024 · dfa1a16 · dfa1a16
1 parent 4756c21
commit dfa1a16
Show file tree

Hide file tree

Showing 9 changed files with 250 additions and 36 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.6.0",
+  "version": "5.6.1",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",

diff --git a/src/components/Registration/HelpContactUs.vue b/src/components/Registration/HelpContactUs.vue
@@ -32,10 +32,10 @@
         </header>
 
         <p class="my-4">
-          If you require further assistance adding a business or corporation, please contact us.
+          If you require further assistance adding a business, please contact us.
         </p>
 
-        <RegistriesContactInfo />
+        <FirmContactInfo />
 
         <div
           class="help-btn bottom"
@@ -50,11 +50,11 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import RegistriesContactInfo from '@/components/common/RegistriesContactInfo.vue'
+import FirmContactInfo from '@/components/common/FirmContactInfo.vue'
 
 @Component({
   components: {
-    RegistriesContactInfo
+    FirmContactInfo
   }
 })
 export default class HelpContactUs extends Vue {

diff --git a/src/components/common/FirmContactInfo.vue b/src/components/common/FirmContactInfo.vue
@@ -0,0 +1,57 @@
+<template>
+  <ul class="contact-info pl-0">
+    <li class="contact-container">
+      <v-icon
+        class="contact-icon"
+        size="18px"
+      >
+        mdi-phone
+      </v-icon>
+      <span class="px-2">Canada and U.S. Toll Free:</span>
+      <a
+        href="tel:+1-877-370-1033"
+        class="contact-value"
+      >1-877-370-1033</a>
+    </li>
+    <li class="contact-container">
+      <v-icon
+        class="contact-icon"
+        size="18px"
+      >
+        mdi-phone
+      </v-icon>
+      <span class="px-2">Victoria Office:</span>
+      <a
+        href="tel:+1-250-370-1033"
+        class="contact-value"
+      >250-370-1033</a>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class FirmContactInfo extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+.contact-container {
+  font-size: $px-15;
+  color: $gray7;
+  display: flex;
+}
+
+.contact-icon {
+  flex: 0 0 1.375rem;
+  justify-content: flex-start;
+  color: $app-dk-blue;
+}
+
+.contact-value {
+  flex: 1 1;
+}
+</style>
diff --git a/src/components/common/RegAddEditOrgPerson.vue b/src/components/common/RegAddEditOrgPerson.vue
@@ -21,8 +21,30 @@
             class="add-org-header"
             :class="{'error-text': !addPersonOrgFormValid}"
           >
-            <span v-if="isNaN(activeIndex)">Add Business or Corporation</span>
-            <span v-else>Edit Business or Corporation</span>
+            <div v-if="isRoleStaff">
+              <span v-if="isNaN(activeIndex)">Add Business or Corporation</span>
+              <span v-else>Edit Business or Corporation</span>
+            </div>
+
+            <div v-else>
+              <template v-if="isNaN(activeIndex)">
+                <template v-if="isTypePartnership">
+                  Add a Business as a Partner
+                </template>
+                <template v-else>
+                  Add a Business as the Proprietor
+                </template>
+              </template>
+
+              <template v-else>
+                <template v-if="isTypePartnership">
+                  Edit a Business as a Partner
+                </template>
+                <template v-else>
+                  Edit a Business as the Proprietor
+                </template>
+              </template>
+            </div>
           </label>
 
           <!-- Title for person -->
@@ -104,9 +126,9 @@
 
             <!-- Business or Corporation -->
             <template v-if="isOrg">
-              <!-- Business or Corporation Unregistered in B.C. -->
+              <!-- Business or Corporation Unregistered in B.C. (Registries Staff Only) -->
               <article
-                v-if="!orgPerson.isLookupBusiness"
+                v-if="!orgPerson.isLookupBusiness && isRoleStaff"
                 class="manual-add-article"
               >
                 <label>
@@ -136,7 +158,7 @@
                   </template>
                 </p>
 
-                <HelpContactUs class="mt-6" />
+                <HelpContactUs class="help" />
 
                 <!-- Confirm checkbox (org only) -->
                 <v-checkbox
@@ -188,9 +210,9 @@
                 <v-divider class="mt-8" />
               </article>
 
-              <!-- Business or Corporation Look up -->
+              <!-- Business or Corporation Look up with Registries Staff-->
               <article
-                v-else
+                v-else-if="isRoleStaff"
                 class="business-lookup-article"
               >
                 <label>Business or Corporation Registered in B.C.</label>
@@ -235,7 +257,7 @@
                     a bank or a railway, use the manual entry form. All other types of business cannot
                     be a partner.
                   </p>
-                  <HelpContactUs class="mt-6" />
+                  <HelpContactUs class="help" />
                 </div>
                 <div v-else>
                   <p class="mt-6 mb-0">
@@ -256,6 +278,48 @@
                   @undoBusiness="resetBusinessDetails()"
                 />
               </article>
+
+              <!-- Business or Corporation Look up with SBC Staff or Clients-->
+              <article
+                v-else
+                class="business-lookup-article"
+              >
+                <div
+                  v-if="hasBusinessSelectedFromLookup"
+                  class="mt-6"
+                >
+                  <v-card
+                    outlined
+                    class="message-box rounded-0"
+                  >
+                    <p>
+                      <strong>Important:</strong> If the addresses shown below are out of date, you
+                      may update them here. The updates are applicable only to this application.
+                    </p>
+                  </v-card>
+                </div>
+                <div v-if="isProprietor">
+                  <p class="mb-0">
+                    Enter an existing B.C. business as the proprietor.
+                  </p>
+                </div>
+                <div v-else>
+                  <p class="mb-0">
+                    Enter an existing B.C. business as a partner.
+                  </p>
+                </div>
+
+                <HelpContactUs class="help" />
+
+                <BusinessLookup
+                  :showErrors="enableRules"
+                  :businessLookup="inProgressBusinessLookup"
+                  :BusinessLookupServices="BusinessLookupServices"
+                  label="Business Name or Incorporation/Registration Number"
+                  @setBusiness="updateBusinessDetails($event)"
+                  @undoBusiness="resetBusinessDetails()"
+                />
+              </article>
             </template>
 
             <!-- Roles -->
@@ -540,6 +604,11 @@ div.three-column {
   color: $gray7;
 }
 
+.help {
+  margin-top: 30px;
+  margin-bottom: 40px;
+}
+
 // align checkbox with top of its label
 :deep(.v-input--checkbox .v-input__slot) {
   align-items: flex-start;

diff --git a/src/mixins/add-edit-org-person-mixin.ts b/src/mixins/add-edit-org-person-mixin.ts
@@ -53,6 +53,7 @@ export default class AddEditOrgPersonMixin extends Vue {
   addPersonOrgFormValid = true
   enableRules = false
   inProgressBusinessLookup = EmptyBusinessLookup
+  businessLookupLabel = 'Business Name or Incorporation/Registration Number'
 
   // Address related properties
   inProgressMailingAddress = {} as AddressIF

diff --git a/tests/unit/FirmContactInfo.spec.ts b/tests/unit/FirmContactInfo.spec.ts
@@ -0,0 +1,21 @@
+import Vuetify from 'vuetify'
+import { mount } from '@vue/test-utils'
+import FirmContactInfo from '@/components/common/FirmContactInfo.vue'
+
+const vuetify = new Vuetify({})
+
+describe('FirmContactInfo', () => {
+  it('Displays expected content', () => {
+    const wrapper = mount(FirmContactInfo, { vuetify })
+
+    // verify content
+    const listItems = wrapper.findAll('.contact-container')
+    expect(listItems.length).toBe(2)
+    expect(listItems.at(0).find('span').text()).toBe('Canada and U.S. Toll Free:')
+    expect(listItems.at(0).find('.contact-value').text()).toBe('1-877-370-1033')
+    expect(listItems.at(1).find('span').text()).toBe('Victoria Office:')
+    expect(listItems.at(1).find('.contact-value').text()).toBe('250-370-1033')
+
+    wrapper.destroy()
+  })
+})
diff --git a/tests/unit/HelpContactUs.spec.ts b/tests/unit/HelpContactUs.spec.ts
@@ -1,7 +1,7 @@
 import Vuetify from 'vuetify'
 import { mount } from '@vue/test-utils'
 import HelpContactUs from '@/components/Registration/HelpContactUs.vue'
-import RegistriesContactInfo from '@/components/common/RegistriesContactInfo.vue'
+import FirmContactInfo from '@/components/common/FirmContactInfo.vue'
 
 const vuetify = new Vuetify({})
 
@@ -31,10 +31,11 @@ describe('HelpBusinessNumber', () => {
     expect(wrapper.find('.help-header h2').text()).toBe('Contact BC Registries')
 
     // verify paragraph
-    expect(wrapper.find('p').text()).toContain('If you require further assistance')
+    expect(wrapper.find('p').text())
+      .toContain('If you require further assistance adding a business, please contact us.')
 
     // verify contact info component
-    expect(wrapper.findComponent(RegistriesContactInfo).exists()).toBe(true)
+    expect(wrapper.findComponent(FirmContactInfo).exists()).toBe(true)
 
     wrapper.destroy()
   })