Merge pull request #162 from dimak1/feat/linking-link-updates

Updates on Property Details Step

strr-web/app.config.ts

@@ -13,7 +13,8 @@ export default defineAppConfig({
       }
     },
     formGroup: {
-      label: { base: 'block text-base font-bold py-3 text-gray-900' }
+      label: { base: 'block text-base font-bold py-3 text-gray-900' },
+      help: 'text-gray-700 text-xs'
     },
     input: {
       base: 'bg-gray-100 hover:bg-gray-200 h-[56px] border-b-[1px] focus:border-b-2 focus:ring-0',

strr-web/components/bcros/form-section/property/Address.vue

@@ -2,7 +2,11 @@
   <div data-test-id="form-section-address">
     <BcrosFormSection :title="t('createAccount.propertyForm.rentalUnitAddress')">
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="nickname" class="d:pr-[16px] flex-grow">
+        <UFormGroup
+          name="nickname"
+          class="d:pr-[16px] flex-grow"
+          :help="t('createAccount.propertyForm.nicknameHelp')"
+        >
           <UInput v-model="nickname" aria-label="nickname" :placeholder="t('createAccount.propertyForm.nickname')" />
         </UFormGroup>
       </div>

strr-web/components/bcros/form-section/property/Details.vue

@@ -2,12 +2,30 @@
   <div data-test-id="property-details">
     <BcrosFormSection :title="t('createAccount.propertyForm.rentalUnitDetails')">
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="parcelIdentifier" class="d:pr-[16px] flex-grow">
+        <UFormGroup
+          name="parcelIdentifier"
+          class="d:pr-[16px] flex-grow"
+        >
           <UInput
             v-model="parcelIdentifier"
             aria-label="parcel identifier"
             :placeholder="t('createAccount.propertyForm.parcelIdentifier')"
           />
+          <template #help>
+            <div class="flex">
+              {{ t('createAccount.propertyForm.parcelIdentifierHelp') }}
+              <BcrosTooltip
+                class="ml-1"
+                :text="t('createAccount.propertyForm.parcelIdentifierTooltip')"
+                :popper="{
+                  placement: 'right',
+                  arrow: true
+                }"
+              >
+                <UIcon class="text-xl bg-bcGovColor-activeBlue" name="i-mdi-information-outline" />
+              </BcrosTooltip>
+            </div>
+          </template>
         </UFormGroup>
       </div>
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
@@ -17,6 +35,9 @@
             aria-label="business license"
             :placeholder="t('createAccount.propertyForm.businessLicense')"
           />
+          <template #help>
+            {{ t('createAccount.propertyForm.businessLicenseHelp') }}
+          </template>
         </UFormGroup>
       </div>
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">

strr-web/components/bcros/form-section/property/ListingDetails.vue

@@ -1,9 +1,12 @@
 <template>
   <div data-test-id="listing-details-section">
     <BcrosFormSection
-      :title="t('createAccount.propertyForm.internetListingDetails')"
+      :title="t('createAccount.propertyForm.onlineListingDetails')"
       class="desktop:pb-[40px] mobile:pb-[20px]"
     >
+      <p class="text-gray-700 mb-10">
+        {{ t('createAccount.propertyForm.webLinkInfo') }}
+      </p>
       <div v-for="(listing, index) in listingDetails" :key="index">
         <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px] items-center">
           <UFormGroup
@@ -14,25 +17,23 @@
             <UInput
               v-model="listing.url"
               aria-label="URL input"
-              :placeholder="`Platform URL ${index > 0 ? index + 1: ''}`"
+              :placeholder="t('applicationDetails.listingLinkOptional')"
               @blur="() => emitValidate(index)"
             />
+            <template #help>
+              {{ t('applicationDetails.listingLinkHelp') }}
+            </template>
           </UFormGroup>
-          <div
-            class="
-              flex flex-row desktop:mr-[20px] w-[117px] h-[36px]
-              mobile:w-[106px] items-center justify-center text-[16px] text-blue-500
-            "
-            :role="index > 0 ? 'button': ''"
-            :onclick="index > 0 ? () => removeDetailAtIndex(index): null"
-          >
-            <div v-if="index > 0" class="flex flex-row justify-center items-center">
-              <p class="mr-[4px]">
-                {{ t('createAccount.contact.remove') }}
-              </p>
-              <UIcon class="h-[20px] w-[20px]" name="i-mdi-remove" alt="remove icon" />
-            </div>
-          </div>
+
+          <UButton
+            v-if="index > 0"
+            class="p-2 text-base mb-6"
+            variant="ghost"
+            :label="t('createAccount.contact.remove')"
+            :trailing-icon="'i-mdi-remove'"
+            :ui="{ variant: { ghost: 'hover:bg-transparent' } }"
+            @click="removeDetailAtIndex(index)"
+          />
         </div>
       </div>
       <BcrosButtonsPrimary

strr-web/components/bcros/tooltip/index.vue

@@ -4,6 +4,10 @@
     :text="text"
     :popper="popper"
     tabindex="0"
+    :ui="{
+      base: 'whitespace-normal text-xs p-4',
+      rounded: 'rounded'
+    }"
     @focus="showTooltipPopup"
     @blur="closeTooltipPopup"
   >

strr-web/lang/en.json

@@ -6,7 +6,7 @@
       "rentalRegistration": "Short-Term Rental Registration"
     },
     "baseModal": {
-      "closeButtonLabel": "Close" 
+      "closeButtonLabel": "Close"
     }
   },
   "registryDashboard": {
@@ -40,7 +40,7 @@
       "submitted": "SUBMITTED",
       "paid": "PAID"
     },
-    "modal":{
+    "modal": {
       "contactInfo": {
         "header": "Need Help?",
         "openButtonLabel": "Help with using this dashboard",
@@ -108,7 +108,9 @@
     "unitInfo": "Rental Unit Information",
     "nickname": "Nickname",
     "businessLicense": "Business License",
-    "platformUrl": "Platform URL",
+    "listingLink": "Listing Link",
+    "listingLinkOptional": "Listing Link (Optional)",
+    "listingLinkHelp": "e.g., https://www.airbnb.ca/your_listing123",
     "ownership": "Ownership Type",
     "address": "Address",
     "propertyType": "Type of Property",
@@ -122,7 +124,7 @@
     "principalResidenceReason": "Reason",
     "principalResidenceServiceProvider": "Service Provider",
     "principalResidenceNotApplies": "Principal residence does not apply or my property is exempt",
-    "principalResidenceApplies": "Pincipal residence does apply",
+    "principalResidenceApplies": "Principal residence does apply",
     "proof": "Proof of Principal Residence",
     "ltsaInfo": "LTSA Information",
     "ltsaDetails": "View LTSA Details",
@@ -178,7 +180,7 @@
     "download": "Download Certificate",
     "renewal": "Renewal",
     "strrCertificate": "Short Term Rental Registry Certificate",
-    "modal":{
+    "modal": {
       "contactInfo": {
         "header": "Need Help?",
         "openButtonLabel": "Help with using this dashboard",
@@ -204,7 +206,7 @@
       "eligibility": "Principal Residence",
       "review": "Review and Confirm"
     },
-    "modal":{
+    "modal": {
       "bcrosFoippaNotice": {
         "header": "Information Collection Notice",
         "openButtonLabel": "Information collection notice",
@@ -279,12 +281,17 @@
     "propertyForm": {
       "subtitle": "Rental Unit Information",
       "nickname": "Nickname (Optional)",
+      "nicknameHelp": "This is only to help you identify your rental unit, especially if you manage multiple properties (e.g., My Guest Suite)",
       "parcelIdentifier": "Parcel Identifier (Optional)",
-      "businessLicense": "Local Government Business License (Optional)",
+      "parcelIdentifierHelp": "This is a nine-digit number that identifies the parcel in the land title of your property.",
+      "parcelIdentifierTooltip": "You can find your Parcel Identifier (PID) on your Property Assessment Notice from BC Assessment. Alternatively, visit the BC Assessment website, search for your civic address, and look for the PID under 'Legal Description and Parcel ID'.",
+      "businessLicense": "Local Government Business Licence (Optional)",
+      "businessLicenseHelp": "This is the business licence to operate a short-term rental as provided by your local government.",
       "propertyType": "Type of Property",
       "ownershipType": "Ownership Type",
       "rentalUnitDetails": "Rental Unit Details",
-      "internetListingDetails": "Internet Listing Details",
+      "onlineListingDetails": "Online Listing Details",
+      "webLinkInfo": "Add the web link for your listing on a short-term rental platform (e.g., airbnb.ca/your_listing123). You can add multiple links if this rental unit is listed on multiple platforms (e.g., Airbnb, VRBO, Expedia, etc.).",
       "rentalUnitAddress": "Rental Unit Address",
       "primaryDwelling": "All or part of primary dwelling",
       "secondarySuite": "Secondary suite",
@@ -358,7 +365,7 @@
       "declarationPartTwo": "I understand that if the property host does not comply with the requirement to provide the short-term rental accommodation services in the principal residence, I may be subject to enforcement action under Part 4 of the Act, including being ordered to pay an administrative penalty.",
       "declaration": "Declaration",
       "proof": "Proof of Principal Residence",
-      "listing": "Internet Listings",
+      "listing": "Online Listing Details",
       "confirm": "I confirm that the information contained in the application for registration is accurate and true. I understand that, if I have provided inaccurate or false information, I may be the subject of enforcement action under Part 4 of the Short-Term Rental Accommodations Act. Enforcement action may include being ordered to pay an administrative penalty.",
       "coOwner": "Co-own",
       "owner": "Own",
@@ -478,7 +485,7 @@
     },
     "email": {
       "label": "Email:",
-      "value": "BCRegistries{'@'}gov.bc.ca" 
+      "value": "BCRegistries{'@'}gov.bc.ca"
     }
   }
-}
+}

strr-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strr-web",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "Short Term Rental Registration UI - Mono repo workspace",
   "scripts": {
     "preinstall": "npx only-allow pnpm",

strr-web/pages/application-details/[id]/index.vue

@@ -81,7 +81,7 @@
             <div class="flex-1 max-w-[33.33%]">
               <template v-if="applicationDetails?.listingDetails && applicationDetails.listingDetails.length > 0">
                 <BcrosFormSectionReviewItem
-                  :title="tApplicationDetails('platformUrl')"
+                  :title="tApplicationDetails('listingLink')"
                 >
                   <a
                     :href="applicationDetails?.listingDetails[0].url"
@@ -107,7 +107,7 @@
                     :class="{ 'desktop:mt-6 mobile:mt-2': index > 1 }"
                   >
                     <BcrosFormSectionReviewItem
-                      :title="tApplicationDetails('platformUrl') + (` ${index + 2}`)"
+                      :title="tApplicationDetails('listingLink') + (` ${index + 2}`)"
                     >
                       <a
                         :href="listingDetail.url"