18722 Add ForeignBusiness component for amalgamating businesses (bcgo…

…v#595) * Add ForeignBusiness component * Fix rebase issues * Update nested select value * Fix lint error * Add spaces between tags * Move foreign business component code to parent * Wrap btn text in span * Use common jurisdiction component
JazzarKarim · Jan 26, 2024 · 68cc92f · 68cc92f
1 parent 0cb810d
commit 68cc92f
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,11 +28,12 @@
     "@bcrs-shared-components/date-picker": "1.2.15",
     "@bcrs-shared-components/document-delivery": "1.2.0",
     "@bcrs-shared-components/effective-date-time": "1.1.15",
-    "@bcrs-shared-components/enums": "1.1.1",
+    "@bcrs-shared-components/enums": "1.1.3",
     "@bcrs-shared-components/expandable-help": "1.0.1",
     "@bcrs-shared-components/genesys-web-message": "1.0.0",
     "@bcrs-shared-components/help-business-number": "1.1.1",
     "@bcrs-shared-components/interfaces": "1.1.1",
+    "@bcrs-shared-components/jurisdiction": "1.0.1",
     "@bcrs-shared-components/limited-restoration-panel": "1.0.5",
     "@bcrs-shared-components/mixins": "1.1.29",
     "@bcrs-shared-components/nature-of-business": "1.2.14",

diff --git a/src/components/Amalgamation/AmalgamatingBusinesses.vue b/src/components/Amalgamation/AmalgamatingBusinesses.vue
@@ -82,38 +82,74 @@
         flat
         class="section-container mt-4"
       >
-        <v-row no-gutters>
-          <v-col
-            cols="12"
-            sm="3"
-          >
-            <label>Add a Foreign Business</label>
-          </v-col>
-
-          <v-col
-            cols="12"
-            sm="8"
-            class="ml-8"
-          >
-            <span>**TODO**</span>
-
-            <v-row
-              class="justify-end mr-0 mt-2"
+        <v-form
+          id="foreignBusinessForm"
+          ref="foreignBusinessForm"
+          @submit.prevent
+        >
+          <v-row no-gutters>
+            <v-col
+              cols="12"
+              sm="3"
+            >
+              <label>Add a Foreign Business</label>
+            </v-col>
+            <v-col
+              cols="12"
+              sm="9"
+            >
+              <Jurisdiction
+                :errorMessages="jurisdictionErrorMessage"
+                @change="onJurisdictionChange($event)"
+              />
+            </v-col>
+            <v-col
+              cols="12"
+              sm="9"
+              offset="3"
+            >
+              <v-text-field
+                v-model="legalName"
+                filled
+                label="Business' full legal name in home jurisdiction"
+                :rules="foreignBusinessRules"
+              />
+            </v-col>
+            <v-col
+              cols="12"
+              sm="9"
+              offset="3"
+            >
+              <v-text-field
+                v-model="corpNumber"
+                filled
+                label="Corporate number in home jurisdiction"
+                :rules="foreignBusinessRules"
+              />
+            </v-col>
+            <v-col
+              cols="auto"
+              class="ms-auto"
             >
               <v-btn
-                id="app-cancel-btn"
+                large
+                color="primary"
+                class="mr-3"
+                @click="saveAmalgamatingForeignBusiness()"
+              >
+                <span>Add</span>
+              </v-btn>
+              <v-btn
                 large
                 outlined
                 color="primary"
                 @click="isAddingAmalgamatingForeignBusiness = false"
               >
                 <span>Cancel</span>
               </v-btn>
-            </v-row>
-          </v-col>
-
-          <!-- extra column is for possible action button -->
-        </v-row>
+            </v-col>
+          </v-row>
+        </v-form>
       </v-card>
     </v-expand-transition>
 
@@ -152,18 +188,26 @@ import { useStore } from '@/store/store'
 import { AmalgamationMixin, CommonMixin } from '@/mixins'
 import { BusinessLookupServices } from '@/services'
 import { BusinessLookup } from '@bcrs-shared-components/business-lookup'
+import { Jurisdiction } from '@bcrs-shared-components/jurisdiction'
 import { AmalgamatingBusinessIF, BusinessLookupResultIF, EmptyBusinessLookup } from '@/interfaces'
 import { AmlRoles, AmlTypes } from '@/enums'
+import { JurisdictionLocation } from '@bcrs-shared-components/enums'
 import BusinessTable from '@/components/Amalgamation/BusinessTable.vue'
 import { CorpTypeCd } from '@bcrs-shared-components/corp-type-module'
 
 @Component({
   components: {
     BusinessLookup,
-    BusinessTable
+    BusinessTable,
+    Jurisdiction
   }
 })
 export default class AmalgamatingBusinesses extends Mixins(AmalgamationMixin, CommonMixin) {
+  // Refs
+  $refs!: {
+    foreignBusinessForm: any
+  }
+
   readonly BusinessLookupServices = BusinessLookupServices
 
   @Getter(useStore) getAmalgamatingBusinessesValid!: boolean
@@ -179,10 +223,30 @@ export default class AmalgamatingBusinesses extends Mixins(AmalgamationMixin, Co
   snackbar = false
   snackbarText = ''
 
+  // Foreign business properties
+  jurisdiction = null
+  legalName = null
+  corpNumber = null
+  isCan = false
+  isForeignBusinessValid = false
+  jurisdictionErrorMessage = ''
+
   // Button properties
   isAddingAmalgamatingBusiness = false
   isAddingAmalgamatingForeignBusiness = false
 
+  /** TextField rules for "Add an Amalgamating Foreign Business" Panel. */
+  get foreignBusinessRules (): Array<(v) => boolean | string> {
+    return [ v => !!v || 'Required.' ]
+  }
+
+  /** Called when Jurisdiction menu item is changed. */
+  onJurisdictionChange (jurisdiction: any): void {
+    this.jurisdiction = jurisdiction
+    this.isCan = jurisdiction.group === 0
+    this.jurisdictionErrorMessage = this.jurisdiction ? '' : 'Required.'
+  }
+
   async saveAmalgamatingBusiness (businessLookup: BusinessLookupResultIF): Promise<void> {
     // Show spinner since the network calls below can take a few seconds.
     this.$root.$emit('showSpinner', true)
@@ -267,6 +331,41 @@ export default class AmalgamatingBusinesses extends Mixins(AmalgamationMixin, Co
     this.$root.$emit('showSpinner', false)
   }
 
+  saveAmalgamatingForeignBusiness (): void {
+    // Validate
+    this.validateAddAmalgamatingForeignBusiness()
+    if (!this.isForeignBusinessValid) return
+
+    // Create the amalgamating foreign business object
+    const tingBusiness = {
+      type: AmlTypes.FOREIGN,
+      role: AmlRoles.AMALGAMATING,
+      foreignJurisdiction: {
+        region: this.isCan ? this.jurisdiction.text : '',
+        country: this.isCan ? JurisdictionLocation.CA : this.jurisdiction.value
+      },
+      legalName: this.legalName,
+      corpNumber: this.corpNumber
+    } as AmalgamatingBusinessIF
+
+    // Set the amalgamated businesses array in the store.
+    this.pushAmalgamatingBusiness(tingBusiness)
+
+    // Close the "Add an Amalgamating Foreign Business" Panel.
+    this.isAddingAmalgamatingForeignBusiness = false
+  }
+
+  /** Validate Add Amalgamating Foreign Business. */
+  validateAddAmalgamatingForeignBusiness (): void {
+    this.isForeignBusinessValid = (
+      this.jurisdiction &&
+      this.legalName &&
+      this.corpNumber
+    )
+    this.jurisdictionErrorMessage = this.jurisdiction ? '' : 'Required.'
+    this.$refs.foreignBusinessForm.validate()
+  }
+
   /** Sets validity according to various flags. */
   @Watch('businessTableValid')
   @Watch('isAddingAmalgamatingBusiness')
@@ -277,6 +376,12 @@ export default class AmalgamatingBusinesses extends Mixins(AmalgamationMixin, Co
       !this.isAddingAmalgamatingBusiness &&
       !this.isAddingAmalgamatingForeignBusiness
     )
+
+    // Reset "Add an Amalgamating Foreign Business" Panel on change
+    this.jurisdiction = null
+    this.legalName = null
+    this.corpNumber = null
+    this.jurisdictionErrorMessage = ''
   }
 }
 </script>
@@ -287,4 +392,12 @@ export default class AmalgamatingBusinesses extends Mixins(AmalgamationMixin, Co
 .v-btn:not(.v-btn--round).v-size--default {
   height: 44px;
 }
+
+#foreignBusinessForm {
+  // un-bold v-text-field labels
+  :deep(.v-label) {
+      font-weight: normal;
+    color: $gray7;
+  }
+}
 </style>
diff --git a/src/components/Amalgamation/BusinessTable.vue b/src/components/Amalgamation/BusinessTable.vue
@@ -152,7 +152,7 @@ export default class BusinessTable extends Mixins(AmalgamationMixin) {
     const fj = (item?.type === AmlTypes.FOREIGN) && item.foreignJurisdiction
     if (fj?.country) {
       const country = getName(fj.country)
-      const region = (fj.region === 'FEDERAL' ? 'Federal' : fj.region)
+      const region = fj.region
       if (region) return `${region}, ${country}`
       return country
     }