From e269132e217694d6ca5f97576c115f90853ef60d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9verin=20Beauvais?=
 <severinbeauvais@users.noreply.github.com>
Date: Tue, 21 Nov 2023 13:32:07 -0800
Subject: [PATCH] - app version = 5.6.2 (#583)

- imported latest shared enums
- imported latest shared interfaces
- imported latest shared mixins
- added route names to enum
- added views to enum
- added filing interface
- added resource interface
- updated state interface
- added amalgamation state interface
- updated filing template mixin
- added initial amalgamation resources
- added amalgamation steps
- added amalgamation routes
- added/updated getters/actions to  store
- updated state model
- added initial amalgamation views

- renamed some methods in App.vue
- added amalgamations to App.vue
- added amalgamations to Actions.vue
- added amalgamations to EntityInfo.vue
- added amalgamations to SaveErrorDialog.vue
- added fallbacks to amalgamations in filing-template-mixin.ts
- added amalgamations to BreadCrumbResource.ts
- added amalgamations to legal-services.ts
- added amalgamations to feature-flag-utils.ts
- misc cleanup

- initial updates to Business Info page
- initial updates to Information page

- added Expandable Help
- added error return links
- added amalg blocks to Summary Define Company
- added misc placeholders for future components

- moved SummaryDefineCompany to common folder
- moved ListShareClass to common folder
- moved ShareStructure to common folder

- updated validity in Stepper
---
 package-lock.json                             |  22 +-
 package.json                                  |   2 +-
 src/App.vue                                   |   8 +-
 src/components/common/ListPeopleAndRoles.vue  |   5 +
 .../common/SummaryDefineCompany.vue           |   4 +
 src/enums/routeNames.ts                       |   7 +
 src/router/routes.ts                          |  55 +++
 .../AmalgamationRegular/BusinessInfo.vue      | 235 +++++++++++
 src/views/AmalgamationRegular/Information.vue | 182 ++++++++
 src/views/AmalgamationRegular/PeopleRoles.vue |  76 ++++
 .../AmalgamationRegular/ReviewConfirm.vue     | 333 +++++++++++++++
 .../AmalgamationRegular/ShareStructure.vue    | 393 ++++++++++++++++++
 12 files changed, 1310 insertions(+), 12 deletions(-)
 create mode 100644 src/views/AmalgamationRegular/BusinessInfo.vue
 create mode 100644 src/views/AmalgamationRegular/Information.vue
 create mode 100644 src/views/AmalgamationRegular/PeopleRoles.vue
 create mode 100644 src/views/AmalgamationRegular/ReviewConfirm.vue
 create mode 100644 src/views/AmalgamationRegular/ShareStructure.vue

diff --git a/package-lock.json b/package-lock.json
index 86fdc378b..527dab5aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "business-create-ui",
-  "version": "5.6.1",
+  "version": "5.6.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "business-create-ui",
-      "version": "5.6.1",
+      "version": "5.6.2",
       "dependencies": {
         "@babel/compat-data": "^7.21.5",
         "@bcrs-shared-components/approval-type": "1.0.19",
@@ -241,11 +241,6 @@
         "vue-property-decorator": "^9.1.2"
       }
     },
-    "node_modules/@bcrs-shared-components/approval-type/node_modules/@bcrs-shared-components/corp-type-module": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/corp-type-module/-/corp-type-module-1.0.13.tgz",
-      "integrity": "sha512-Wa8H/bxo8GAlcG7YdiP4zl1wzqxewiCO0TC+pBaYUc4+eufuInlS3yYFa9MFg8+vIL/pDfamRtXqdg1I6C6QYA=="
-    },
     "node_modules/@bcrs-shared-components/approval-type/node_modules/@bcrs-shared-components/date-picker": {
       "version": "1.2.34",
       "resolved": "https://registry.npmjs.org/@bcrs-shared-components/date-picker/-/date-picker-1.2.34.tgz",
@@ -405,6 +400,14 @@
         "vue": "^2.7.14"
       }
     },
+    "node_modules/@bcrs-shared-components/expandable-help": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/expandable-help/-/expandable-help-1.0.1.tgz",
+      "integrity": "sha512-XhSYX1sSpoBUfCg5AoTe/1fKuOOtxuhhykhefRw8r+j34GK4hTJzeHYaUJBbXD87r2RkdITu3IFS4kA1yZm3OA==",
+      "dependencies": {
+        "vue": "^2.7.14"
+      }
+    },
     "node_modules/@bcrs-shared-components/folio-number-input": {
       "version": "1.1.33",
       "resolved": "https://registry.npmjs.org/@bcrs-shared-components/folio-number-input/-/folio-number-input-1.1.33.tgz",
@@ -449,6 +452,11 @@
         "vue": "^2.7.14"
       }
     },
+    "node_modules/@bcrs-shared-components/interfaces/node_modules/@bcrs-shared-components/corp-type-module": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/@bcrs-shared-components/corp-type-module/-/corp-type-module-1.0.13.tgz",
+      "integrity": "sha512-Wa8H/bxo8GAlcG7YdiP4zl1wzqxewiCO0TC+pBaYUc4+eufuInlS3yYFa9MFg8+vIL/pDfamRtXqdg1I6C6QYA=="
+    },
     "node_modules/@bcrs-shared-components/limited-restoration-panel": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@bcrs-shared-components/limited-restoration-panel/-/limited-restoration-panel-1.0.5.tgz",
diff --git a/package.json b/package.json
index da0889603..56290b0c8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "business-create-ui",
-  "version": "5.6.1",
+  "version": "5.6.2",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",
diff --git a/src/App.vue b/src/App.vue
index 6410b9fc1..b5e1c20f5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -770,16 +770,16 @@ export default class App extends Mixins(CommonMixin, DateMixin, FilingTemplateMi
             } else {
               this.$router.push(RouteNames.DISSOLUTION_DEFINE_DISSOLUTION).catch(() => {})
             }
-            return
+            return // *** TODO: should this be "break"?
           case FilingTypes.INCORPORATION_APPLICATION:
             this.$router.push(RouteNames.INCORPORATION_DEFINE_COMPANY).catch(() => {})
-            return
+            return // *** TODO: should this be "break"?
           case FilingTypes.REGISTRATION:
             this.$router.push(RouteNames.REGISTRATION_DEFINE_BUSINESS).catch(() => {})
-            return
+            return // *** TODO: should this be "break"?
           case FilingTypes.RESTORATION:
             this.$router.push(RouteNames.RESTORATION_BUSINESS_NAME).catch(() => {})
-            return
+            return // *** TODO: should this be "break"?
           default:
             this.invalidRouteDialog = true
             throw new Error(`fetchData(): invalid filing type = ${this.getFilingType}`) // go to catch()
diff --git a/src/components/common/ListPeopleAndRoles.vue b/src/components/common/ListPeopleAndRoles.vue
index 9c064c259..148f0e982 100644
--- a/src/components/common/ListPeopleAndRoles.vue
+++ b/src/components/common/ListPeopleAndRoles.vue
@@ -28,6 +28,11 @@
             :to="{ path: `/${RouteNames.CONTINUATION_IN_PEOPLE_ROLES}` }"
           >Return to this step to finish it</router-link>
 
+          <router-link
+            v-if="isAmalgamationFiling"
+            id="router-link"
+            :to="{ path: `/${RouteNames.AMALG_REG_PEOPLE_ROLES}` }"
+          >Return to this step to finish it</router-link>
           <router-link
             v-if="isIncorporationFiling"
             id="router-link"
diff --git a/src/components/common/SummaryDefineCompany.vue b/src/components/common/SummaryDefineCompany.vue
index 13d674df0..907bce38b 100644
--- a/src/components/common/SummaryDefineCompany.vue
+++ b/src/components/common/SummaryDefineCompany.vue
@@ -36,6 +36,10 @@
             :to="{ path: `/${RouteNames.CONTINUATION_IN_BUSINESS_BC}` }"
           >Return to this step to finish it</router-link>
 
+          <router-link
+            v-if="isAmalgamationFiling"
+            :to="{ path: `/${RouteNames.AMALG_REG_INFORMATION}` }"
+          >Return to this step to finish it</router-link>
           <router-link
             v-if="isIncorporationFiling"
             :to="{ path: `/${RouteNames.INCORPORATION_DEFINE_COMPANY}` }"
diff --git a/src/enums/routeNames.ts b/src/enums/routeNames.ts
index d7b02f9cf..3b336e552 100644
--- a/src/enums/routeNames.ts
+++ b/src/enums/routeNames.ts
@@ -54,4 +54,11 @@ export enum RouteNames {
   RESTORATION_BUSINESS_INFORMATION = 'restoration-business-information',
   RESTORATION_BUSINESS_NAME = 'restoration-business-name',
   RESTORATION_REVIEW_CONFIRM = 'restoration-review-confirm',
+
+  // Amalgamation (regular) route names
+  AMALG_REG_BUSINESS_INFO = 'amalg-reg-business-info',
+  AMALG_REG_INFORMATION = 'amalg-reg-information',
+  AMALG_REG_PEOPLE_ROLES = 'amalg-reg-people-roles',
+  AMALG_REG_REVIEW_CONFIRM = 'amalg-reg-review-confirm',
+  AMALG_REG_SHARE_STRUCTURE = 'amalg-reg-share-structure',
 }
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 10b0d1d5e..f85d6537a 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -38,6 +38,61 @@ export const routes = [
   ...IncorporationRoutes,
   ...RegistrationRoutes,
   ...RestorationRoutes,
+  {
+    path: '/amalg-reg-information',
+    name: RouteNames.AMALG_REG_INFORMATION,
+    component: Views.AmalgRegInformation,
+    meta: {
+      step: 1,
+      requiresAuth: true,
+      filingType: FilingTypes.AMALGAMATION,
+      filingSubType: AmalgamationTypes.REGULAR
+    }
+  },
+  {
+    path: '/amalg-reg-business-info',
+    name: RouteNames.AMALG_REG_BUSINESS_INFO,
+    component: Views.AmalgRegBusinessInfo,
+    meta: {
+      step: 2,
+      requiresAuth: true,
+      filingType: FilingTypes.AMALGAMATION,
+      filingSubType: AmalgamationTypes.REGULAR
+    }
+  },
+  {
+    path: '/amalg-reg-people-roles',
+    name: RouteNames.AMALG_REG_PEOPLE_ROLES,
+    component: Views.AmalgRegPeopleRoles,
+    meta: {
+      step: 3,
+      requiresAuth: true,
+      filingType: FilingTypes.AMALGAMATION,
+      filingSubType: AmalgamationTypes.REGULAR
+    }
+  },
+  {
+    path: '/amalg-reg-share-structure',
+    name: RouteNames.AMALG_REG_SHARE_STRUCTURE,
+    component: Views.AmalgRegShareStructure,
+    meta: {
+      step: 4,
+      requiresAuth: true,
+      filingType: FilingTypes.AMALGAMATION,
+      filingSubType: AmalgamationTypes.REGULAR
+    }
+  },
+  {
+    path: '/amalg-reg-review-confirm',
+    name: RouteNames.AMALG_REG_REVIEW_CONFIRM,
+    component: Views.AmalgRegReviewConfirm,
+    meta: {
+      step: 5,
+      requiresAuth: true,
+      filingType: FilingTypes.AMALGAMATION,
+      filingSubType: AmalgamationTypes.REGULAR
+    }
+  },
   {
     // default/fallback route
     // must be last
diff --git a/src/views/AmalgamationRegular/BusinessInfo.vue b/src/views/AmalgamationRegular/BusinessInfo.vue
new file mode 100644
index 000000000..a1577828b
--- /dev/null
+++ b/src/views/AmalgamationRegular/BusinessInfo.vue
@@ -0,0 +1,235 @@
+<template>
+  <div id="amalgamation-regular-business-info">
+    <!-- Registered Office Addresses -->
+    <section
+      v-show="isEntityType"
+      class="mt-10"
+    >
+      <header id="office-address-header">
+        <h2>
+          Registered and Records Office Addresses
+        </h2>
+        <p>
+          Enter the Registered Office and Records Office Mailing and Delivery Addresses of the Resulting
+          businesses. All addresses must be located in BC.
+        </p>
+      </header>
+
+      <div :class="{ 'invalid-section': getShowErrors && !addressFormValid }">
+        <OfficeAddresses
+          :showErrors="getShowErrors"
+          :inputAddresses="addresses"
+          @update:addresses="setOfficeAddresses($event)"
+          @valid="onOfficeAddressesValid($event)"
+        />
+      </div>
+    </section>
+
+    <!-- Registered Office Contact Information -->
+    <section
+      v-show="isEntityType"
+      class="mt-10"
+    >
+      <header id="registered-office-contact-header">
+        <h2>Registered Office Contact Information</h2>
+        <p>
+          Enter the contact information for the resulting business. The BC Business Registry will use this
+          to communicate with the business in the future, including sending documents and notifications.
+        </p>
+      </header>
+
+      <v-card
+        flat
+        class="py-8 px-6"
+        :class="{ 'invalid-section': getShowErrors && !businessContactFormValid }"
+      >
+        <BusinessContactInfo
+          :initialValue="getBusinessContact"
+          :isEditing="true"
+          :showErrors="getShowErrors"
+          @update="setBusinessContact($event)"
+          @valid="onBusinessContactInfoValid($event)"
+        />
+      </v-card>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Getter, Action } from 'pinia-class'
+import { useStore } from '@/store/store'
+import {
+  AddressIF,
+  ContactPointIF,
+  DefineCompanyIF,
+  RegisteredRecordsAddressesIF
+} from '@/interfaces'
+import { CommonMixin } from '@/mixins'
+import { RouteNames } from '@/enums'
+import BusinessContactInfo from '@/components/common/BusinessContactInfo.vue'
+import FolioNumber from '@/components/common/FolioNumber.vue'
+import OfficeAddresses from '@/components/common/OfficeAddresses.vue'
+
+@Component({
+  components: {
+    BusinessContactInfo,
+    FolioNumber,
+    OfficeAddresses
+  }
+})
+export default class AmalgamationRegularBusinessInfo extends Mixins(CommonMixin) {
+  @Getter(useStore) getBusinessContact!: ContactPointIF
+  @Getter(useStore) getDefineCompanyStep!: DefineCompanyIF
+  @Getter(useStore) getShowErrors!: boolean
+  @Getter(useStore) isEntityType!: boolean
+
+  @Action(useStore) setBusinessContact!: (x: ContactPointIF) => void
+  @Action(useStore) setDefineCompanyStepValidity!: (x: boolean) => void
+  @Action(useStore) setIgnoreChanges!: (x: boolean) => void
+  @Action(useStore) setOfficeAddresses!: (x: RegisteredRecordsAddressesIF) => void
+
+  addressFormValid = false
+  businessContactFormValid = false
+
+  /** Array of valid components. Must match validFlags. */
+  readonly validComponents = [
+    'office-address-header',
+    'registered-office-contact-header'
+  ]
+
+  /** Object of valid flags. Must match validComponents. */
+  get validFlags (): object {
+    return {
+      validAddressForm: this.addressFormValid,
+      validBusinessContactForm: this.businessContactFormValid
+    }
+  }
+
+  get addresses (): RegisteredRecordsAddressesIF {
+    return this.getDefineCompanyStep.officeAddresses
+  }
+
+  /** Called when component is created. */
+  created (): void {
+    // ignore data changes while page loads
+    this.setIgnoreChanges(true)
+
+    // if no addresses were fetched, set default addresses
+    if (!this.addresses.registeredOffice && !this.addresses.recordsOffice) {
+      this.setDefaultAddresses()
+    }
+
+    // watch data changes once page has loaded (in next tick)
+    this.$nextTick(() => {
+      this.setIgnoreChanges(false)
+    })
+  }
+
+  /** Sets default addresses in filing. (Will get overwritten by a fetched draft filing if there is one.) */
+  private setDefaultAddresses (): void {
+    const defaultAddress: AddressIF = {
+      addressCity: '',
+      addressCountry: 'CA',
+      addressRegion: 'BC',
+      deliveryInstructions: '',
+      postalCode: '',
+      streetAddress: '',
+      streetAddressAdditional: ''
+    }
+
+    this.setOfficeAddresses({
+      registeredOffice: {
+        mailingAddress: defaultAddress,
+        deliveryAddress: defaultAddress
+      },
+      recordsOffice: {
+        mailingAddress: defaultAddress,
+        deliveryAddress: defaultAddress
+      }
+    })
+  }
+
+  onOfficeAddressesValid (valid: boolean): void {
+    this.addressFormValid = valid
+    this.setDefineCompanyStepValidity(
+      this.businessContactFormValid &&
+      this.addressFormValid
+    )
+  }
+
+  onBusinessContactInfoValid (valid: boolean): void {
+    this.businessContactFormValid = valid
+    this.setDefineCompanyStepValidity(
+      this.businessContactFormValid &&
+      this.addressFormValid
+    )
+  }
+
+  @Watch('$route')
+  private async scrollToInvalidComponent (): Promise<void> {
+    if (this.getShowErrors && this.$route.name === RouteNames.AMALG_REG_BUSINESS_INFO) {
+      // scroll to invalid components
+      await this.$nextTick()
+      await this.validateAndScroll(this.validFlags, this.validComponents)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+#amalgamation-regular-business-info {
+  /* Set "header-counter" to 0 */
+  counter-reset: header-counter;
+}
+
+h2::before {
+  /* Increment "header-counter" by 1 */
+  counter-increment: header-counter;
+  content: counter(header-counter) '. ';
+}
+
+.value.name-request {
+  width: 100%;
+  min-width: 24rem;
+}
+
+.meta-container {
+  display: flex;
+  flex-flow: column nowrap;
+  position: relative;
+
+  > label:first-child {
+    font-weight: bold;
+  }
+}
+
+@media (min-width: 768px) {
+  .meta-container {
+    flex-flow: row nowrap;
+
+    > label:first-child {
+      flex: 0 0 auto;
+      padding-right: 2rem;
+      width: 12rem;
+    }
+  }
+}
+
+// #business-buttons-container {
+//   .v-btn + .v-btn {
+//     margin-left: 0.5rem;
+//   }
+// }
+
+header p {
+  padding-top: 0.5rem;
+}
+
+// Vuetify Overrides
+:deep(.v-select__selection--comma) {
+  overflow: inherit;
+}
+</style>
diff --git a/src/views/AmalgamationRegular/Information.vue b/src/views/AmalgamationRegular/Information.vue
new file mode 100644
index 000000000..cb0d2f762
--- /dev/null
+++ b/src/views/AmalgamationRegular/Information.vue
@@ -0,0 +1,182 @@
+<template>
+  <div id="amalgamation-regular-information">
+    <!-- Amalgamating Businesses -->
+    <section class="mt-10">
+      <header id="name-header">
+        <h2>Amalgamating Businesses</h2>
+        <p class="mt-4">
+          Add each amalgamating business below.
+        </p>
+        <p class="mt-4">
+          Your BC Registries account must have access to each business involved in this amalgamation
+          before the amalgamation application can be filed.
+        </p>
+      </header>
+
+      [*** TODO: Amalgamating Businesses component ***]
+    </section>
+
+    <!-- Resulting Business Name and Type -->
+    <section class="mt-10">
+      <header id="name-header">
+        <h2>Resulting Business Name and Type</h2>
+      </header>
+
+      <ExpandableHelp
+        class="mt-4"
+        helpLabel="Help with Business Type"
+      >
+        <template #content>
+          [*** TODO: help text component ***]
+        </template>
+      </ExpandableHelp>
+
+      <v-card
+        flat
+        class="mt-5"
+      >
+        <NameRequestInfo />
+        <NameTranslations class="mt-n8" />
+      </v-card>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Getter, Action } from 'pinia-class'
+import { useStore } from '@/store/store'
+import { DefineCompanyIF } from '@/interfaces'
+import { CommonMixin } from '@/mixins'
+import { RouteNames } from '@/enums'
+import { ExpandableHelp } from '@bcrs-shared-components/expandable-help'
+import NameRequestInfo from '@/components/common/NameRequestInfo.vue'
+import NameTranslations from '@/components/common/NameTranslations.vue'
+
+@Component({
+  components: {
+    ExpandableHelp,
+    NameRequestInfo,
+    NameTranslations
+  }
+})
+export default class AmalgamationRegularInformation extends Mixins(CommonMixin) {
+  @Getter(useStore) getDefineCompanyStep!: DefineCompanyIF
+  @Getter(useStore) getNameTranslationsValid!: boolean
+  @Getter(useStore) getShowErrors!: boolean
+  @Getter(useStore) isBaseCompany!: boolean
+
+  @Action(useStore) setDefineCompanyStepValidity!: (x: boolean) => void
+  @Action(useStore) setIgnoreChanges!: (x: boolean) => void
+
+  // Local properties
+  amalgamatingBusinessesValid = false
+
+  /** Array of valid components. Must match validFlags below. */
+  readonly validComponents = [
+    'amalgamating-businesses',
+    'name-header'
+  ]
+
+  /** Object of valid flags. Must match validComponents above. */
+  get validFlags (): object {
+    return {
+      validAmalgamatingBusinesses: this.amalgamatingBusinessesValid,
+      validNameTranslation: this.getNameTranslationsValid
+    }
+  }
+
+  /** Called when component is created. */
+  created (): void {
+    // ignore data changes while page loads
+    this.setIgnoreChanges(true)
+
+    // watch data changes once page has loaded (in next tick)
+    this.$nextTick(() => {
+      this.setIgnoreChanges(false)
+    })
+  }
+
+  onAmalgamatingBusinessesValid (valid: boolean): void {
+    this.amalgamatingBusinessesValid = valid
+    this.setDefineCompanyStepValidity(
+      this.amalgamatingBusinessesValid &&
+      this.getNameTranslationsValid
+    )
+  }
+
+  @Watch('getNameTranslationsValid', { deep: true })
+  private onNameTranslationsValid (): void {
+    this.setDefineCompanyStepValidity(
+      this.amalgamatingBusinessesValid &&
+      this.getNameTranslationsValid
+    )
+  }
+
+  @Watch('$route')
+  private async scrollToInvalidComponent (): Promise<void> {
+    if (this.getShowErrors && this.$route.name === RouteNames.AMALG_REG_INFORMATION) {
+      // scroll to invalid components
+      await this.$nextTick()
+      await this.validateAndScroll(this.validFlags, this.validComponents)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+#amalgamation-regular-information {
+  /* Set "header-counter" to 0 */
+  counter-reset: header-counter;
+}
+
+h2::before {
+  /* Increment "header-counter" by 1 */
+  counter-increment: header-counter;
+  content: counter(header-counter) '. ';
+}
+
+.value.name-request {
+  width: 100%;
+  min-width: 24rem;
+}
+
+.meta-container {
+  display: flex;
+  flex-flow: column nowrap;
+  position: relative;
+
+  > label:first-child {
+    font-weight: bold;
+  }
+}
+
+@media (min-width: 768px) {
+  .meta-container {
+    flex-flow: row nowrap;
+
+    > label:first-child {
+      flex: 0 0 auto;
+      padding-right: 2rem;
+      width: 12rem;
+    }
+  }
+}
+
+// #business-buttons-container {
+//   .v-btn + .v-btn {
+//     margin-left: 0.5rem;
+//   }
+// }
+
+header p {
+  padding-top: 0.5rem;
+}
+
+// Vuetify Overrides
+:deep(.v-select__selection--comma) {
+  overflow: inherit;
+}
+</style>
diff --git a/src/views/AmalgamationRegular/PeopleRoles.vue b/src/views/AmalgamationRegular/PeopleRoles.vue
new file mode 100644
index 000000000..b30ea7b9b
--- /dev/null
+++ b/src/views/AmalgamationRegular/PeopleRoles.vue
@@ -0,0 +1,76 @@
+<template>
+  <div id="amalgamation-regular-people-roles">
+    <section class="mt-10">
+      <header id="people-role-header">
+        <h2>{{ getPeopleAndRolesResource.header }}</h2>
+      </header>
+
+      <PeopleAndRoles />
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Getter } from 'pinia-class'
+import { useStore } from '@/store/store'
+import { PeopleAndRoleIF, PeopleAndRolesResourceIF } from '@/interfaces'
+import { CommonMixin } from '@/mixins'
+import { RouteNames } from '@/enums'
+import PeopleAndRoles from '@/components/common/PeopleAndRoles.vue'
+
+@Component({
+  components: {
+    PeopleAndRoles
+  }
+})
+export default class AmalgamationRegularPeopleRoles extends Mixins(CommonMixin) {
+  @Getter(useStore) getAddPeopleAndRoleStep!: PeopleAndRoleIF
+  @Getter(useStore) getPeopleAndRolesResource!: PeopleAndRolesResourceIF
+  @Getter(useStore) getShowErrors!: boolean
+
+  @Watch('$route')
+  private async scrollToInvalidComponent (): Promise<void> {
+    if (this.getShowErrors && this.$route.name === RouteNames.INCORPORATION_PEOPLE_ROLES) {
+      // scroll to invalid components
+      await this.$nextTick()
+      await this.validateAndScroll(
+        {
+          peopleAndRoles: this.getAddPeopleAndRoleStep.valid
+        },
+        [
+          'people-and-roles'
+        ]
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.meta-container {
+  display: flex;
+  flex-flow: column nowrap;
+  position: relative;
+
+  > label:first-child {
+    font-weight: bold;
+  }
+}
+
+@media (min-width: 768px) {
+  .meta-container {
+    flex-flow: row nowrap;
+
+    > label:first-child {
+      flex: 0 0 auto;
+      padding-right: 2rem;
+      width: 12rem;
+    }
+  }
+}
+
+header p {
+  padding-top: 0.5rem;
+}
+</style>
diff --git a/src/views/AmalgamationRegular/ReviewConfirm.vue b/src/views/AmalgamationRegular/ReviewConfirm.vue
new file mode 100644
index 000000000..e14353b8c
--- /dev/null
+++ b/src/views/AmalgamationRegular/ReviewConfirm.vue
@@ -0,0 +1,333 @@
+<template>
+  <div id="amalgamation-regular-review-confirm">
+    <!-- Review and Confirm -->
+    <section class="mt-10">
+      <header>
+        <h2>Review and Confirm</h2>
+        <p class="mt-4">
+          Review the information in your application. If you need to change or complete anything,
+          return to the step to make the necessary change.
+        </p>
+      </header>
+
+      <!-- Amalgamation Information -->
+      <v-card
+        id="company-summary-vcard"
+        flat
+        class="mt-6"
+      >
+        <CardHeader
+          icon="mdi-domain-plus"
+          :label="getFilingName"
+        />
+        <SummaryDefineCompany />
+      </v-card>
+
+      <!-- Amalgamating Businesses Information -->
+      <v-card
+        id="people-and-roles-vcard"
+        flat
+        class="mt-6"
+      >
+        <CardHeader
+          icon="mdi-domain"
+          label="Amalgamating Businesses Information"
+        />
+        <div class="pa-4">
+          [*** TODO: Amalgamating Businesses summary component ***]
+        </div>
+      </v-card>
+
+      <!-- People and Roles -->
+      <v-card
+        id="people-and-roles-vcard"
+        flat
+        class="mt-6"
+      >
+        <CardHeader
+          icon="mdi-account-multiple-plus"
+          label="People and Roles"
+        />
+        <ListPeopleAndRoles :isSummary="true" />
+      </v-card>
+
+      <!-- Share Structure -->
+      <v-card
+        id="share-structure-vcard"
+        flat
+        class="mt-6"
+      >
+        <CardHeader
+          icon="mdi-sitemap"
+          label="Share Structure"
+        />
+        <ListShareClass
+          :isSummary="true"
+          :shareClasses="getCreateShareStructureStep.shareClasses"
+          :showErrorSummary="!getCreateShareStructureStep.valid"
+          :isAmalgamationFiling="true"
+        />
+      </v-card>
+    </section>
+
+    <!-- Amalgamation Date and Time -->
+    <section
+      id="amalgamation-date-time-section"
+      class="mt-10"
+    >
+      <header>
+        <h2>Amalgamation Date and Time</h2>
+        <p class="mt-4">
+          Select the Date and Time of amalgamation for your business. You may select a date up
+          to 10 days in the future (note: there is an <strong>additional fee of $100</strong> to
+          enter an amalgamation date in the future). Unless a business has special requirements,
+          most businesses select an immediate Date and Time of Amalgamation.
+        </p>
+      </header>
+
+      <IncorporationDateTime
+        class="mt-6"
+        :class="{ 'invalid-section': isEffectiveDateTimeInvalid }"
+        :effectiveDateTime="getEffectiveDateTime"
+        @valid="setEffectiveDateTimeValid($event)"
+        @effectiveDate="setEffectiveDate($event)"
+        @isFutureEffective="setIsFutureEffective($event)"
+      />
+    </section>
+
+    <!-- Document Delivery -->
+    <section
+      id="document-delivery-section"
+      class="mt-10"
+    >
+      <header>
+        <h2>Document Delivery</h2>
+        <p class="mt-4">
+          Copies of the incorporation documents will be sent to the email addresses listed below.
+        </p>
+      </header>
+
+      <v-card
+        flat
+        class="mt-6"
+      >
+        <DocumentDelivery
+          class="py-8 px-6"
+          :contactValue="getBusinessContact.email"
+          :completingPartyEmail="getUserEmail"
+          contactLabel="Registered Office"
+        />
+      </v-card>
+    </section>
+
+    <!-- Folio or Reference Number -->
+    <section
+      id="folio-number-section"
+      class="mt-10"
+    >
+      <header>
+        <h2>Folio or Reference Number for this Filing</h2>
+        <p class="mt-4">
+          *** TODO ***
+        </p>
+      </header>
+
+      <v-card
+        flat
+        class="mt-6"
+      >
+        <div class="pa-4">
+          [*** TODO: Folio Number component ***]
+        </div>
+      </v-card>
+    </section>
+
+    <!-- Amalgamation Statement -->
+    <section
+      id="amalgamation-statement-section"
+      class="mt-10"
+    >
+      <header>
+        <h2>Amalgamation Statement</h2>
+        <p class="mt-4">
+          *** TODO ***
+        </p>
+      </header>
+
+      <v-card
+        flat
+        class="mt-6"
+      >
+        <div class="pa-4">
+          [*** TODO: Amalgamation Statement component ***]
+        </div>
+      </v-card>
+    </section>
+
+    <!-- Certify -->
+    <section
+      id="certify-section"
+      class="mt-10"
+    >
+      <header>
+        <h2>Certify</h2>
+        <p class="mt-4">
+          Confirm the legal name of the person authorized to complete and submit this application.
+        </p>
+      </header>
+
+      <v-card
+        flat
+        class="mt-6"
+      >
+        <Certify
+          class="py-8 px-6"
+          :class="{ 'invalid-section': isCertifyInvalid }"
+          :disableEdit="!isRoleStaff"
+          :invalidSection="isCertifyInvalid"
+          :isStaff="isRoleStaff"
+        />
+      </v-card>
+    </section>
+
+    <!-- Court Order and Plan of Arrangement -->
+    <!-- <section
+      id="court-order-poa-section"
+      class="mt-10"
+    >
+      <header>
+        <h2>Court Order and Plan of Arrangement</h2>
+        <p class="mt-4">
+          If this filing is pursuant to a court order, enter the court order number. If this
+          filing is pursuant to a plan of arrangement, enter the court order number and select
+          Plan of Arrangement.
+        </p>
+      </header>
+
+      <v-card
+        flat
+        class="mt-6"
+      >
+        <CourtOrderPoa
+          class="py-8 px-6"
+          :class="{ 'invalid-section': isCourtOrderInvalid }"
+          :draftCourtOrderNumber="getCourtOrderStep.courtOrder.fileNumber"
+          :hasDraftPlanOfArrangement="getCourtOrderStep.courtOrder.hasPlanOfArrangement"
+          :courtOrderNumberRequired="false"
+          :invalidSection="isCourtOrderInvalid"
+          @emitCourtNumber="setCourtOrderFileNumber($event)"
+          @emitPoa="setHasPlanOfArrangement($event)"
+          @emitValid="setCourtOrderValidity($event)"
+        />
+      </v-card>
+    </section> -->
+
+    <!-- Staff Payment -->
+    <section
+      v-if="isRoleStaff"
+      id="staff-payment-section"
+      class="mt-10"
+    >
+      <header>
+        <h2>Staff Payment</h2>
+        <p class="mt-4" />
+      </header>
+
+      <v-card
+        flat
+        class="mt-6"
+      >
+        <StaffPayment class="py-8 px-6" />
+      </v-card>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { Action, Getter } from 'pinia-class'
+import { useStore } from '@/store/store'
+import { ContactPointIF, CertifyIF, EffectiveDateTimeIF, IncorporationAgreementIF, ShareStructureIF,
+  CourtOrderStepIF } from '@/interfaces'
+import CardHeader from '@/components/common/CardHeader.vue'
+import Certify from '@/components/common/Certify.vue'
+import { CourtOrderPoa } from '@bcrs-shared-components/court-order-poa'
+import { DocumentDelivery } from '@bcrs-shared-components/document-delivery'
+import IncorporationDateTime from '@/components/Incorporation/IncorporationDateTime.vue'
+import ListPeopleAndRoles from '@/components/common/ListPeopleAndRoles.vue'
+import ListShareClass from '@/components/common/ListShareClass.vue'
+import SummaryDefineCompany from '@/components/common/SummaryDefineCompany.vue'
+import { CorpTypeCd, GetCorpFullDescription } from '@bcrs-shared-components/corp-type-module'
+import StaffPayment from '@/components/common/StaffPayment.vue'
+import { FilingNames } from '@bcrs-shared-components/enums'
+
+@Component({
+  components: {
+    CardHeader,
+    Certify,
+    CourtOrderPoa,
+    DocumentDelivery,
+    IncorporationDateTime,
+    ListPeopleAndRoles,
+    ListShareClass,
+    SummaryDefineCompany,
+    StaffPayment
+  }
+})
+export default class AmalgamationRegularReviewConfirm extends Vue {
+  @Getter(useStore) getBusinessContact!: ContactPointIF
+  @Getter(useStore) getCertifyState!: CertifyIF
+  @Getter(useStore) getCourtOrderStep!: CourtOrderStepIF
+  @Getter(useStore) getCreateShareStructureStep!: ShareStructureIF
+  @Getter(useStore) getEffectiveDateTime!: EffectiveDateTimeIF
+  @Getter(useStore) getEntityType!: CorpTypeCd
+  @Getter(useStore) getFilingName!: FilingNames
+  @Getter(useStore) getIncorporationAgreementStep!: IncorporationAgreementIF
+  @Getter(useStore) getUserEmail!: string
+  @Getter(useStore) getValidateSteps!: boolean
+  @Getter(useStore) isRoleStaff!: boolean
+
+  @Action(useStore) setCertifyState!: (x: CertifyIF) => void
+  @Action(useStore) setCourtOrderFileNumber!: (x: string) => void
+  @Action(useStore) setCourtOrderValidity!: (x: boolean) => void
+  @Action(useStore) setEffectiveDate!: (x: Date) => void
+  @Action(useStore) setEffectiveDateTimeValid!: (x: boolean) => void
+  @Action(useStore) setHasPlanOfArrangement!: (x: boolean) => void
+  @Action(useStore) setIsFutureEffective!: (x: boolean) => void
+
+  /** The entity description,  */
+  get getEntityDescription (): string {
+    return GetCorpFullDescription(this.getEntityType)
+  }
+
+  /** Is true when the effective date-time conditions are not met. */
+  get isEffectiveDateTimeInvalid (): boolean {
+    return this.getValidateSteps && !this.getEffectiveDateTime.valid
+  }
+
+  /** Is true when the certify conditions are not met. */
+  get isCertifyInvalid (): boolean {
+    return this.getValidateSteps && !(this.getCertifyState.certifiedBy && this.getCertifyState.valid)
+  }
+
+  /** Is true when the Court Order conditions are not met. */
+  get isCourtOrderInvalid (): boolean {
+    return (this.getValidateSteps && !this.getCourtOrderStep.valid)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+#amalgamation-regular-review-confirm {
+  /* Set "header-counter" to 0 */
+  counter-reset: header-counter;
+}
+
+h2::before {
+  /* Increment "header-counter" by 1 */
+  counter-increment: header-counter;
+  content: counter(header-counter) '. ';
+}
+</style>
diff --git a/src/views/AmalgamationRegular/ShareStructure.vue b/src/views/AmalgamationRegular/ShareStructure.vue
new file mode 100644
index 000000000..0cbabbe36
--- /dev/null
+++ b/src/views/AmalgamationRegular/ShareStructure.vue
@@ -0,0 +1,393 @@
+<template>
+  <div id="amalgamation-regular-share-structure">
+    <section class="mt-10">
+      <header>
+        <h2>1. Create Your Authorized Share Structure</h2>
+      </header>
+
+      <p id="incorporation-share-structure">
+        Add at least one class of shares. A share class consists of the name of the class, the
+        maximum number of shares in the class (including any associated Series), a par value for
+        the class, and the currency the shares are valued in.
+      </p>
+    </section>
+
+    <!-- Help Section -->
+    <span
+      class="help-btn"
+      @click="helpToggle = !helpToggle"
+    >
+      <v-icon
+        color="primary"
+        style="padding-right: 5px"
+      >mdi-help-circle-outline</v-icon>
+      <span v-if="!helpToggle">Help with Share Structure</span>
+      <span v-else>Hide Help</span>
+    </span>
+
+    <v-expand-transition>
+      <section
+        v-show="helpToggle"
+        class="share-structure-help"
+      >
+        <header id="share-structure-help-header">
+          <h2>Share Structure Help</h2>
+        </header>
+
+        <p>
+          An incorporated business must issue shares. These shares represent ownership interest in
+          the company and give the shareholder a say in how the company is being run. For most
+          small companies starting out, a simple share structure with just one class of shares (and
+          no series) is typical.
+        </p>
+        <p>
+          The sample below is for a typical share structure with just one class of shares. If there
+          is more than one class of shares, each class must be assigned an identifying name such as
+          Class A, Class B, etc.
+        </p>
+
+        <v-card flat>
+          <header class="share-summary-header">
+            <v-icon color="appDkBlue">
+              mdi-sitemap
+            </v-icon>
+            <label class="share-summary-header-title pl-2">Share Structure</label>
+          </header>
+
+          <ListShareClass
+            :shareClasses="sharesHelpSample"
+            :isSummary="true"
+          />
+        </v-card>
+
+        <p><small>Sample Share Structure</small></p>
+        <h3>Important Information About the Company's Share Structure</h3>
+        <p>
+          The staff at the Corporate Registry cannot provide advice on how to set up your company's
+          share structure. If you do not understand what an authorized share structure is or what
+          its purpose is or believe you need a more complex share structure, you should seek
+          professional advice or purchase an incorporation guide for detailed information and
+          infrastructure on establishing an authorized share structure.
+        </p>
+        <p>
+          Refer to this <a :href="helpLink">link</a> to obtain more information on incorporating a company.
+        </p>
+        <u
+          class="help-btn"
+          @click="helpToggle = !helpToggle"
+        ><small>Hide Help</small></u>
+      </section>
+    </v-expand-transition>
+
+    <p>Your application must include the following:</p>
+    <ul>
+      <li>
+        <v-icon
+          v-if="shareClasses.length > 0"
+          color="green darken-2"
+          class="cp-valid"
+        >
+          mdi-check
+        </v-icon>
+        <v-icon
+          v-else-if="getShowErrors"
+          color="error"
+          class="cp-invalid"
+        >
+          mdi-close
+        </v-icon>
+        <v-icon v-else>
+          mdi-circle-small
+        </v-icon>
+        <span class="ml-2">At least one Class of Shares</span>
+      </li>
+    </ul>
+
+    <div class="py-8">
+      <v-btn
+        id="btn-start-add-cp"
+        outlined
+        color="primary"
+        :disabled="showShareStructureForm"
+        @click="initNewShareClass()"
+      >
+        <v-icon>mdi-plus</v-icon>
+        <span>Add Share Class</span>
+      </v-btn>
+    </div>
+
+    <v-card
+      v-if="showShareStructureForm"
+      flat
+      class="my-4"
+    >
+      <ShareStructure
+        :initialValue="currentShareStructure"
+        :activeIndex="activeIndex"
+        :shareId="shareId"
+        :parentIndex="parentIndex"
+        :shareClasses="shareClasses"
+        @addEditClass="addEditShareClass($event)"
+        @addEditSeries="addEditShareSeries($event)"
+        @removeClass="removeShareClass($event)"
+        @removeSeries="removeSeries"
+        @resetEvent="resetData()"
+      />
+    </v-card>
+
+    <v-card
+      v-if="shareClasses.length > 0"
+      flat
+    >
+      <ListShareClass
+        :shareClasses="shareClasses"
+        :componentDisabled="showShareStructureForm"
+        @editClass="initShareClassForEdit($event)"
+        @removeClass="removeShareClass($event)"
+        @addSeries="initNewShareSeries($event)"
+        @editSeries="editSeries"
+        @removeSeries="removeSeries"
+      />
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Action, Getter } from 'pinia-class'
+import { useStore } from '@/store/store'
+import { v4 as uuidv4 } from 'uuid'
+import { NewShareClass, NewShareSeries, ShareClassIF, ShareStructureIF }
+  from '@/interfaces'
+import { CommonMixin } from '@/mixins'
+import { RouteNames } from '@/enums'
+import ListShareClass from '@/components/common/ListShareClass.vue'
+import ShareStructure from '@/components/common/ShareStructure.vue'
+
+@Component({
+  components: {
+    ListShareClass,
+    ShareStructure
+  }
+})
+export default class AmalgamationRegularShareStructure extends Mixins(CommonMixin) {
+  @Getter(useStore) getCreateShareStructureStep!: ShareStructureIF
+  @Getter(useStore) getShowErrors!: boolean
+
+  @Action(useStore) setCreateShareStructureStepValidity!: (x: boolean) => void
+  @Action(useStore) setShareClasses!: (x: ShareClassIF[]) => void
+
+  readonly sharesHelpSample: ShareClassIF[] = [{
+    id: '1',
+    priority: 0,
+    type: 'Class',
+    name: 'Common Shares',
+    hasMaximumShares: true,
+    maxNumberOfShares: 10000,
+    hasParValue: false,
+    parValue: null,
+    currency: null,
+    hasRightsOrRestrictions: false,
+    series: []
+  }]
+
+  readonly helpLink = 'https://www2.gov.bc.ca/gov/content/employment-business/business/' +
+    'managing-a-business/permits-licences/businesses-incorporated-companies'
+
+  showShareStructureForm = false
+  currentShareStructure = null as ShareClassIF
+  activeIndex = -1
+  parentIndex = -1
+  shareId = ''
+  helpToggle = false
+
+  get shareClasses (): ShareClassIF[] {
+    return this.getCreateShareStructureStep.shareClasses
+  }
+
+  /** Called when component is mounted. */
+  mounted (): void {
+    this.setCreateShareStructureStepValidity(this.shareClasses.length > 0)
+  }
+
+  //
+  // Event Handlers
+  //
+
+  initNewShareClass (): void {
+    this.currentShareStructure = { ...NewShareClass }
+    this.currentShareStructure.priority =
+    this.shareClasses.length === 0 ? 1 : this.shareClasses[this.shareClasses.length - 1].priority + 1
+    this.activeIndex = -1
+    this.parentIndex = -1
+    this.shareId = uuidv4()
+    this.showShareStructureForm = true
+  }
+
+  initShareClassForEdit (index: number): void {
+    this.currentShareStructure = { ...this.shareClasses[index] }
+    this.activeIndex = index
+    this.parentIndex = -1
+    this.showShareStructureForm = true
+  }
+
+  initNewShareSeries (shareClassIndex: number): void {
+    this.activeIndex = -1
+    this.parentIndex = shareClassIndex
+
+    const newList: ShareClassIF[] = [...this.shareClasses]
+    const parentShareClass = newList[shareClassIndex]
+    const shareSeries = parentShareClass.series
+    this.currentShareStructure = { ...NewShareSeries }
+    this.currentShareStructure.hasParValue = parentShareClass.hasParValue
+    this.currentShareStructure.parValue = parentShareClass.parValue
+    this.currentShareStructure.currency = parentShareClass.currency
+    this.currentShareStructure.priority =
+    shareSeries.length === 0 ? 1 : shareSeries[shareSeries.length - 1].priority + 1
+    this.shareId = uuidv4()
+    this.showShareStructureForm = true
+  }
+
+  addEditShareClass (shareStructure: ShareClassIF): void {
+    const newList: ShareClassIF[] = [...this.shareClasses]
+    // New Share Structue.
+    if (this.activeIndex === -1) {
+      newList.push(shareStructure)
+    } else {
+      // Edit Share Structure.
+      newList.splice(this.activeIndex, 1, shareStructure)
+    }
+    this.setShareClasses(newList)
+    this.setCreateShareStructureStepValidity(this.shareClasses.length > 0)
+    this.resetData()
+  }
+
+  editSeries (index: number, seriesIndex: number): void {
+    this.activeIndex = seriesIndex
+    this.parentIndex = index
+    const newList: ShareClassIF[] = [...this.shareClasses]
+    this.currentShareStructure = { ...newList[this.parentIndex].series[this.activeIndex] }
+    this.showShareStructureForm = true
+  }
+
+  removeSeries (index: number, seriesIndex: number): void {
+    this.activeIndex = seriesIndex
+    this.parentIndex = index
+    const newList: ShareClassIF[] = [...this.shareClasses]
+    const parentShareClass = newList[this.parentIndex]
+    const series = [...parentShareClass.series]
+    series.splice(this.activeIndex, 1)
+    parentShareClass.series = series
+    this.setShareClasses(newList)
+    this.resetData()
+  }
+
+  addEditShareSeries (shareSeries: ShareClassIF): void {
+    const newList: ShareClassIF[] = [...this.shareClasses]
+    const parentShareClass = newList[this.parentIndex]
+    const series = [...parentShareClass.series]
+    // New Share Structue.
+    if (this.activeIndex === -1) {
+      series.push(shareSeries)
+    } else {
+      // Edit Share Structure.
+      series.splice(this.activeIndex, 1, shareSeries)
+    }
+    parentShareClass.series = series
+    this.setShareClasses(newList)
+    this.resetData()
+  }
+
+  removeShareClass (index: number): void {
+    const newList: ShareClassIF[] = [...this.shareClasses]
+    newList.splice(index, 1)
+    this.setShareClasses(newList)
+    this.setCreateShareStructureStepValidity(this.shareClasses.length > 0)
+    this.resetData()
+  }
+
+  resetData (): void {
+    this.currentShareStructure = null
+    this.activeIndex = -1
+    this.showShareStructureForm = false
+    this.parentIndex = -1
+    this.shareId = ''
+  }
+
+  @Watch('$route')
+  private async scrollToInvalidComponent (): Promise<void> {
+    if (this.getShowErrors && this.$route.name === RouteNames.INCORPORATION_SHARE_STRUCTURE) {
+      // scroll to invalid components
+      await this.$nextTick()
+      await this.validateAndScroll(
+        {
+          shareStructure: this.getCreateShareStructureStep.valid
+        },
+        ['incorporation-share-structure']
+      )
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+[class^="col"] {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+ul {
+  padding-top: 0.5rem;
+  list-style: none;
+  margin-left: 0;
+  padding-left: 1rem;
+}
+
+li {
+  padding-top: 0.25rem;
+}
+
+p{
+  padding-top: 0.5rem;
+}
+
+.help-btn {
+  cursor: pointer;
+  color: $app-blue;
+  vertical-align: middle;
+}
+
+.share-structure-help {
+  margin: 2rem 0;
+  border-top: 1px dashed $gray6;
+  border-bottom: 1px dashed $gray6;
+  padding: 1rem 0;
+
+  #share-structure-help-header {
+    display: flex;
+    justify-content: center;
+  }
+
+  h2, h4 {
+    padding: 1rem 0;
+  }
+
+  u {
+    display: flex;
+    direction: rtl;
+  }
+}
+
+.share-summary-header {
+  display: flex;
+  background-color: $BCgovBlue5O;
+  padding: 1.25rem;
+
+  .share-summary-header-title {
+    font-weight: bold;
+    color: $gray9;
+  }
+}
+</style>