From c595b7780de9701eae7d8e433d33502141ad6a46 Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Tue, 12 Mar 2024 00:26:48 -0400
Subject: [PATCH] Update Owner help content for Transfers and Registrations
 (#1777)

* Update Owner help content for Transfers and Registrations
---
 ppr-ui/package-lock.json                      |  4 +-
 ppr-ui/package.json                           |  2 +-
 .../HomeOwners/AddEditHomeOwner.vue           | 77 +++++++--------
 .../mhrTransfers/HelpWithOwners.vue           | 99 +++++++++++++++++++
 ppr-ui/src/components/mhrTransfers/index.ts   |  1 +
 .../views/mhrInformation/MhrInformation.vue   | 25 ++++-
 .../views/newMhrRegistration/HomeOwners.vue   | 79 ++++++++++-----
 7 files changed, 216 insertions(+), 71 deletions(-)
 create mode 100644 ppr-ui/src/components/mhrTransfers/HelpWithOwners.vue

diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
index 799ed610b..348d81af3 100644
--- a/ppr-ui/package-lock.json
+++ b/ppr-ui/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ppr-ui",
-  "version": "3.0.59",
+  "version": "3.0.60",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ppr-ui",
-      "version": "3.0.59",
+      "version": "3.0.60",
       "dependencies": {
         "@bcrs-shared-components/input-field-date-picker": "^1.0.0",
         "@lemoncode/fonk": "^1.5.1",
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
index ffbbc4c9d..92ae653b8 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.0.59",
+  "version": "3.0.60",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",
diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/AddEditHomeOwner.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/AddEditHomeOwner.vue
index 1019215ba..3d53d66ed 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeOwners/AddEditHomeOwner.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeOwners/AddEditHomeOwner.vue
@@ -103,24 +103,24 @@
               for="org-name"
             >
               Business or Organization Name
-              <v-tooltip
-                v-if="disableNameFields"
-                location="top"
-                content-class="top-tooltip pa-5"
-                transition="fade-transition"
-              >
-                <template #activator="{ on }">
-                  <v-icon
-                    class="mt-n1"
-                    color="primary"
-                    v-on="on"
-                  >
-                    mdi-information-outline
-                  </v-icon>
-                </template>
-                {{ disabledNameEditTooltip }}
-              </v-tooltip>
             </label>
+            <v-tooltip
+              v-if="disableNameFields"
+              location="top"
+              content-class="top-tooltip pa-5"
+              transition="fade-transition"
+            >
+              <template #activator="{ props }">
+                <v-icon
+                  class="mt-n1"
+                  color="primary"
+                  v-bind="props"
+                >
+                  mdi-information-outline
+                </v-icon>
+              </template>
+              {{ disabledNameEditTooltip }}
+            </v-tooltip>
             <v-row v-if="!isCurrentOwner(owner)">
               <v-col>
                 <p>
@@ -264,26 +264,25 @@
 
           <label class="generic-label">
             Additional Name Information
-            <v-tooltip
-              v-if="disableNameFields"
-              location="top"
-              contentClass="top-tooltip pa-5"
-              transition="fade-transition"
-              data-test-id="suffix-tooltip"
-            >
-              <template #activator="{ props }">
-                <v-icon
-                  class="mt-n1"
-                  color="primary"
-                  v-bind="props"
-                >
-                  mdi-information-outline
-                </v-icon>
-              </template>
-              {{ disabledNameEditTooltip }}
-            </v-tooltip>
           </label>
-
+          <v-tooltip
+            v-if="disableNameFields"
+            location="top"
+            contentClass="top-tooltip pa-5"
+            transition="fade-transition"
+            data-test-id="suffix-tooltip"
+          >
+            <template #activator="{ props }">
+              <v-icon
+                class="mt-n1"
+                color="primary"
+                v-bind="props"
+              >
+                mdi-information-outline
+              </v-icon>
+            </template>
+            {{ disabledNameEditTooltip }}
+          </v-tooltip>
           <v-row class="py-2">
             <v-col class="col">
               <v-tooltip
@@ -675,9 +674,9 @@ export default defineComponent({
 
         return localState.nameConfig?.tooltipContent[getMhrTransferType.value?.transferType]
       }),
-      disabledNameEditTooltip: `Owner name’s cannot be changed here. Name change requests should be submitted
-        separately, with the appropriate supporting documents, prior to completing this transfer. See Help with
-        Ownership Transfer or Change for more information. `
+      disabledNameEditTooltip: `Owner name’s cannot be changed here. Name change requests should be
+        submitted separately to BC Registries staff prior to completing this transfer.
+        Contact BC Registries for more information.`
     })
 
     const done = async (): Promise<void> => {
diff --git a/ppr-ui/src/components/mhrTransfers/HelpWithOwners.vue b/ppr-ui/src/components/mhrTransfers/HelpWithOwners.vue
new file mode 100644
index 000000000..87137bf25
--- /dev/null
+++ b/ppr-ui/src/components/mhrTransfers/HelpWithOwners.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <h3 class="text-center mb-7 mt-4">
+      Help with Ownership Transfer or Change
+    </h3>
+    <h4>
+      Sole Ownership
+    </h4>
+    <p>This applies when the home is owned by a single individual or organization.</p>
+    <h4>Joint Tenancy</h4>
+    <p>
+      This applies when the home is owned by two or more individuals and/or organizations jointly, with rights of
+      survivorship. In joint tenancy, if one joint tenant dies (or for an organization, if it ceases to exist) their
+      ownership share in the home passes to the surviving joint owner(s).
+    </p>
+    <h4>Tenants in Common</h4>
+    <p>
+      This applies when the home is owned by two or more individuals and/or organizations that owns an undivided share
+      in the home. Ownership will be displayed in groups of owners with their undivided portion. Each owner has the
+      right to dispose of their share independently of the other owners, and in the case of the death of an individual,
+      their share will belong to the estate of the individual, or through the legal process for dissolution of assets,
+      in the case of an organization.
+    </p>
+    <h4>Definition for Groups</h4>
+    <p>
+      A group is one or more owners of the home that have an equal undivided share of the home. Tenants in common are
+      recorded in the Manufactured Home Registry in groups. The relationship between groups will always be as tenants in
+      common. The relationship between owners within each group is a joint tenancy. There may be multiple groups with
+      joint tenants.
+    </p>
+    <h4>Recording Ownership for Multiple Groups</h4>
+    <p>
+      Each group’s ownership share must be recorded as a portion of the total number of equal shares in the home. For
+      example, if the home is owned by two groups, and each owns half of the home, this is recorded as each group
+      holding 1 of 2 shares. If the home is owned by two groups but one group holds two-thirds and one group holds
+      one-third, this is recorded as the first group holding 2 of 3 shares and the second group holding 1 of 3 shares.
+    </p>
+    <p>
+      When adding groups of owners, you must enter the total number of shares in the home (Total Available) and the
+      number of shares owned by each group (Amount Owned by the Group). All groups should use the same denominator as is
+      used for Total Available, preferably using the lowest common denominator for all groups.
+    </p>
+    <h4>Qualified Supplier Limitations</h4>
+    <p>
+      As indicated in the Manufactured Home Registry, some complex ownership transfers, including transfers of an
+      interest in a home to a trustee or a trust of any kind or to a surviving joint tenant following an organization
+      ceasing to exist, cannot be completed online.
+    </p>
+    <p>
+      If the transfer or change of ownership you are trying to register cannot be completed online, the request must be
+      sent to the Manufactured Home Registry for BC Registries staff to submit on your behalf.
+    </p>
+    <p>
+      Send your Ownership Transfer or Change form, Bill of Sale form (if applicable), plus supporting documents and fee
+      to:
+    </p>
+    <p>
+      Manufactured Home Registry <br>
+      PO Box 9431 Stn Prov Govt<br>
+      Victoria, B.C.<br>
+      V8W 9V3
+    </p>
+    <p>
+      <a
+        href="https://www2.gov.bc.ca/gov/content/housing-tenancy/owning-a-home/manufactured-home-registry#forms-fees"
+        target="_blank"
+      >
+        Visit the Manufactured Home Registry forms and fees page<i class="mdi mdi-open-in-new ml-1" />
+      </a>
+    </p>
+
+    <h4 class="mb-6">
+      Need Help? Contact Us
+    </h4>
+    <ErrorContact class="mb-6" />
+
+    <h4>Hours of Operation: </h4>
+    <p>Monday to Friday, 8:30 am - 4:30 pm Pacific time</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ErrorContact from '@/components/common/ErrorContact.vue'
+</script>
+
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+h4 {
+  font-size: 16px;
+  line-height: normal;
+  color: $gray7;
+}
+
+p {
+  margin-bottom: 24px;
+}
+</style>
diff --git a/ppr-ui/src/components/mhrTransfers/index.ts b/ppr-ui/src/components/mhrTransfers/index.ts
index 6b4731480..eff3a9257 100644
--- a/ppr-ui/src/components/mhrTransfers/index.ts
+++ b/ppr-ui/src/components/mhrTransfers/index.ts
@@ -7,3 +7,4 @@ export { default as DeathCertificate } from './DeathCertificate.vue'
 export { default as SupportingDocuments } from './SupportingDocuments.vue'
 export { default as HomeOwnersGroupError } from './HomeOwnersGroupError.vue'
 export { default as TaxCertificate } from './TaxCertificate.vue'
+export { default as HelpWithOwners } from './HelpWithOwners.vue'
diff --git a/ppr-ui/src/views/mhrInformation/MhrInformation.vue b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
index 46302c9fe..b47b9ad68 100644
--- a/ppr-ui/src/views/mhrInformation/MhrInformation.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
@@ -412,6 +412,16 @@
                       To change the ownership of this home, first select the Transfer Type
                       and enter the Declared Value of Home.
                     </p>
+
+                    <SimpleHelpToggle
+                      toggleButtonTitle="Hide Help with Ownership Transfer or Change"
+                      class="mb-8"
+                    >
+                      <template #content>
+                        <HelpWithOwners />
+                      </template>
+                    </SimpleHelpToggle>
+
                     <DocumentId
                       v-if="isRoleStaffReg"
                       :documentId="getMhrTransferDocumentId || ''"
@@ -536,7 +546,8 @@ import {
   ContactInformation,
   StickyContainer,
   DocumentId,
-  LienAlert
+  LienAlert,
+  SimpleHelpToggle
 } from '@/components/common'
 import {
   StaffPaymentOptions,
@@ -565,7 +576,13 @@ import {
   useUserAccess
 } from '@/composables'
 import { FeeSummaryTypes } from '@/composables/fees/enums'
-import { ConfirmCompletion, TransferDetails, TransferDetailsReview, TransferType } from '@/components/mhrTransfers'
+import {
+  ConfirmCompletion,
+  HelpWithOwners,
+  TransferDetails,
+  TransferDetailsReview,
+  TransferType
+} from '@/components/mhrTransfers'
 import { HomeLocationReview, YourHomeReview } from '@/components/mhrRegistration/ReviewConfirm'
 import { HomeOwners } from '@/views'
 import { UnitNotePanels } from '@/components/unitNotes'
@@ -638,7 +655,9 @@ export default defineComponent({
     LocationChangeReview,
     LocationChangeConfirmCompletion,
     TransportPermitConfirmCompletion,
-    AmendTransportPermitConfirmCompletion
+    AmendTransportPermitConfirmCompletion,
+    SimpleHelpToggle,
+    HelpWithOwners
   },
   props: {
     appReady: {
diff --git a/ppr-ui/src/views/newMhrRegistration/HomeOwners.vue b/ppr-ui/src/views/newMhrRegistration/HomeOwners.vue
index d64c23bd7..6061f98e2 100644
--- a/ppr-ui/src/views/newMhrRegistration/HomeOwners.vue
+++ b/ppr-ui/src/views/newMhrRegistration/HomeOwners.vue
@@ -20,51 +20,66 @@
         <p class="mt-2 mb-0">
           Add a person or an organization as the owner of the home. You can add
           multiple owners to form joint tenancy or tenants in common ownership.
-          Note: Tenants in common ownership requires more than one group of
+          <strong>Note:</strong> Tenants in common ownership requires more than one group of
           owners.
         </p>
 
         <SimpleHelpToggle
           toggleButtonTitle="Help with Owners"
           :defaultHideText="false"
-          class="my-6"
+          class="my-6 help-with-owners"
         >
           <template #content>
-            <h3 class="text-center mb-2">
+            <h3 class="text-center mb-7">
               Help with Owners
             </h3>
-            <h4>Sole Owner</h4>
+            <h4>
+              Sole Ownership
+            </h4>
+            <p>This applies when the home is owned by a single individual or organization.</p>
+            <h4>Joint Tenancy</h4>
             <p>
-              This applies when the home is owned by a single individual or organization.
+              This applies when the home is owned by two or more individuals and/or organizations jointly, with rights
+              of survivorship. In joint tenancy, if one joint tenant dies (or for an organization, if it ceases to
+              exist) their
+              ownership share in the home passes to the surviving joint owner(s).
             </p>
-            <h4>Joint Tenants</h4>
+            <h4>Tenants in Common</h4>
             <p>
-              This applies when the home is jointly owned by a number of individuals or
-              organizations or some combination of the two.
+              This applies when the home is owned by two or more individuals and/or organizations that owns an undivided
+              share in the home. Ownership will be displayed in groups of owners with their undivided portion. Each
+              owner has the right to dispose of their share independently of the other owners, and in the case of the
+              death of an individual,
+              their share will belong to the estate of the individual, or through the legal process for dissolution of
+              assets, in the case of an organization.
             </p>
-            <h4>Tenants in Common</h4>
+            <h4>Definition for Groups</h4>
             <p>
-              This applies when the home is owned by a number of groups or individuals or
-              organizations or some combination of the two (where a group could consist of
-              a single owner) and each group of owners has the right to dispose of their share
-              independent of the other owner groups and will be disposed of as part of the
-              estate in the case of a death.
+              A group is one or more owners of the home that have an equal undivided share of the home. Tenants in
+              common are
+              recorded in the Manufactured Home Registry in groups. The relationship between groups will always be as
+              tenants in
+              common. The relationship between owners within each group is a joint tenancy. There may be multiple groups
+              with
+              joint tenants.
             </p>
+            <h4>Recording Ownership for Multiple Groups</h4>
             <p>
-              Each group will hold a certain share of the home. To record this it is
-              necessary to express this as some number of a total number of equal shares.
-              For example, if the home is owned by two owner groups each of whom owns half of
-              the home this can be seen as each group holding 1 of 2 shares. If the home is
-              owned by two groups but one holds two-thirds and one holds the other third this
-              can be expressed as the first holding 2 of 3 shares and the second holding 1 of
-              3 shares.
+              Each group’s ownership share must be recorded as a portion of the total number of equal shares in the
+              home. For
+              example, if the home is owned by two groups, and each owns half of the home, this is recorded as each
+              group
+              holding 1 of 2 shares. If the home is owned by two groups but one group holds two-thirds and one group
+              holds
+              one-third, this is recorded as the first group holding 2 of 3 shares and the second group holding 1 of 3
+              shares.
             </p>
             <p>
-              When adding owners into groups, the total number of shares in a home (Total
-              Available) must be entered as well as the number of shares each group owns
-              (Amount Owned by the Group). It is recommended that all groups use the same
-              common denominator for Total Available, preferably using the lowest common
-              denominator.
+              When adding groups of owners, you must enter the total number of shares in the home (Total Available) and
+              the
+              number of shares owned by each group (Amount Owned by the Group). All groups should use the same
+              denominator as is
+              used for Total Available, preferably using the lowest common denominator for all groups.
             </p>
           </template>
         </SimpleHelpToggle>
@@ -690,6 +705,18 @@ span:not(.generic-label)  {
   color: $gray7
 }
 
+.help-with-owners {
+  h4 {
+    font-size: 16px;
+    line-height: normal;
+    color: $gray7;
+  }
+
+  p {
+    margin-bottom: 24px;
+  }
+}
+
 .transfer-table-error {
   padding: 5px 12px 10px !important;
 }