Merge pull request #613 from bcgov/oleks

DSS-764,DSS-766,DSS-765: Link/Unlink/Search Business Licence records

Author: ychung-mot

frontend/src/app/common/models/bl-search-result-row.ts

@@ -0,0 +1,6 @@
+export interface BLSearchResultRow {
+    businessLicenceId: number;
+    businessLicenceNo: string;
+    physicalRentalAddressTxt: string;
+    providingOrganizationId: number;
+}

frontend/src/app/common/models/listing-details.ts

@@ -30,6 +30,7 @@ export interface ListingDetails {
     isPrincipalResidenceRequired: boolean;
     isBusinessLicenceRequired: boolean;
     isEntireUnit: boolean;
+    isChangedBusinessLicence: boolean;
     isChangedAddress: boolean;
     isLgTransferred: boolean;
     isMatchVerified: boolean;

frontend/src/app/common/models/listing-table-row.ts

@@ -31,6 +31,7 @@ export interface ListingTableRow {
     listingContactNamesTxt?: string;
     managingOrganizationId?: number;
     managingOrganizationNm?: string;
+    isChangedBusinessLicence: boolean;
     isPrincipalResidenceRequired?: boolean;
     isBusinessLicenceRequired?: boolean;
     availableBedroomsQty?: number;

frontend/src/app/common/services/business-licence.service.ts

@@ -2,6 +2,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { environment } from '../../../environments/environment';
+import { BLSearchResultRow } from '../models/bl-search-result-row';
 
 @Injectable({
   providedIn: 'root'
@@ -36,6 +37,10 @@ export class BusinessLicenceService {
       { headers: this.textHeaders, responseType: 'text' as 'json' });
   }
 
+  searchBls(orgId: number, licenseNo: string): Observable<Array<BLSearchResultRow>> {
+    return this.httpClient.get<Array<BLSearchResultRow>>(`${environment.API_HOST}/bizlicences/${orgId}/${licenseNo}`);
+  }
+
   uploadFile(file: any, orgId: number): Observable<any> {
     const formData = new FormData();
     formData.append('organizationId', orgId.toString());
@@ -46,4 +51,12 @@ export class BusinessLicenceService {
       formData,
     );
   }
+
+  linkBl(listingId: number, blId: number): Observable<any> {
+    return this.httpClient.put<Array<BLSearchResultRow>>(`${environment.API_HOST}/RentalListings/${listingId}/linkbl/${blId}`, {});
+  }
+
+  unLinkBl(listingId: number): Observable<any> {
+    return this.httpClient.put<Array<BLSearchResultRow>>(`${environment.API_HOST}/RentalListings/${listingId}/unlinkbl`, {});
+  }
 }

frontend/src/app/features/components/listings-table/aggregated-listings-table/aggregated-listings-table.component.html

@@ -126,7 +126,8 @@ <h2 class="title">Aggregated Listings</h2>
                     <th>Listing Details</th>
                     <th>Address (Best Match)</th>
                     <th>Nights Stayed (YTD)</th>
-                    <th>Business Licence</th>
+                    <th>Business Licence on Listing</th>
+                    <th>Matched Business Licence</th>
                     <th>Last Action</th>
                     <th>Last Action Date</th>
                 </tr>
@@ -177,8 +178,17 @@ <h2 class="title">Aggregated Listings</h2>
                     </td>
                     <td> {{ listing.nightsBookedYtdQty }}</td>
                     <td><span>
-                            {{ listing.businessLicenceNo }}
-                        </span></td>
+                            {{ listing.businessLicenceNo || '-' }}
+                        </span>
+                    </td>
+                    <td>
+                        <div class="bl-matched-col">
+                            <span>
+                                {{ listing.businessLicenceNoMatched || '-' }}
+                            </span>
+                            <p-tag *ngIf="listing.isChangedBusinessLicence" value="Updated" class="updated-tag"></p-tag>
+                        </div>
+                    </td>
                     <td>{{ listing.lastActionNm }}</td>
                     <td>{{ listing.lastActionDtm |date }}</td>
                 </tr>

frontend/src/app/features/components/listings-table/aggregated-listings-table/aggregated-listings-table.component.scss

@@ -212,7 +212,8 @@
                     gap: 8px;
                 }
 
-                .address-col {
+                .address-col,
+                .bl-matched-col {
                     width: 100%;
                     display: flex;
                     gap: 8px;

frontend/src/app/features/components/listings-table/listing-details/listing-details.component.html

@@ -265,8 +265,34 @@ <h2>Detailed Listing Information for</h2>
                     </p-tag>
                 </div>
             </ng-template>
+
             <div *ngIf="!blInfo; else else_block" class="row no-bl-data">
-                <strong>We were unable to find a business licence that matched this listing in our system.</strong>
+
+
+                <div *ngIf="!listing.isChangedBusinessLicence; else changed" class="bl-description">
+                    <strong>
+                        This listing could not be matched to a business licence record. Listings may not match
+                        for one of the following reasons:
+                    </strong>
+                    <ul>
+                        <li>Host error—the host may not have entered their business licence number on their listing,
+                            or
+                            may have provided it in a format that could not be automatically matched to a local
+                            government business licence record.</li>
+                        <li>
+                            Up-to-date business licence records have not been uploaded to the Portal. Please check
+                            the
+                            Business licence upload history to confirm when records were last updated.
+                        </li>
+                        <li>Host does not have a business licence.</li>
+                    </ul>
+                </div>
+                <ng-template #changed>
+                    <strong>Business Licence Information was removed from this listing.</strong>
+                </ng-template>
+                <button pButton (click)="showBlMatchPopup()" class="p-button-link">Click here to link this listing
+                    to a business licence record</button>
+
             </div>
             <ng-template #else_block>
                 <div *ngIf="blInfo?.businessNm" class="row">
@@ -391,11 +417,66 @@ <h2>Detailed Listing Information for</h2>
                     <strong>Legal Description: </strong> <span class="value">{{blInfo.propertyLegalDescriptionTxt
                         ||'-'}}</span>
                 </div>
+
+                <div class="spacer-hr">
+                </div>
+                <div class="row">
+                    <button pButton (click)="showBlUnlinkPopup()" class="p-button-link">Click here to unlink this
+                        listing from this business licence record</button>
+                </div>
             </ng-template>
         </p-panel>
     </div>
 </div>
 
+<p-dialog header="Match a Business Licence to Listing" class="bl-match-popup" [modal]="true" [closable]="false"
+    [(visible)]="isMatchBlShown" [style]="{width: '50vw'}">
+    <div class="search-label"><strong>Enter a Business Licence Number</strong></div>
+    <div class="search-row">
+        <input pInputText type="text" class="full-width-text-field" [(ngModel)]="searchBlText"
+            placeholder="Enter value..." (keyup.enter)="onSearchBl()">
+        <button pButton class="search-bl-btn" id="search-bl-btn" (click)="onSearchBl()"
+            [disabled]="isSearchBlDisabled"><i class="pi pi-search"></i></button>
+    </div>
+    <div class="no-bl-found" *ngIf="noBlsFound">
+        No match was found for this business licence number in our system.
+    </div>
+    <div class="search-results" *ngIf="blSearchResults.length">
+        <strong>Best Match Candidate</strong>
+
+        <div class="search-result-row" *ngFor="let blRow of blSearchResults">
+            <p-radioButton [inputId]="'bl'+blRow.businessLicenceId" name="bl-search-result-row" [value]="blRow"
+                [(ngModel)]="selectedBl"></p-radioButton>
+            <label [for]="'bl'+blRow.businessLicenceId" class="ml-2">
+                {{ blRow.businessLicenceNo }}, {{blRow.physicalRentalAddressTxt}}
+            </label>
+        </div>
+    </div>
+
+    <ng-template pTemplate="footer">
+        <button pButton name="submit-dialog-btn" id="submit-dialog-btn" (click)="onUpdateBl()"
+            [disabled]="!selectedBl">Update</button>
+        <button pButton name="cancel-dialog-btn" id="cancel-dialog-btn" class="outline-btn"
+            (click)="onCancelUpdateBl()">Cancel</button>
+    </ng-template>
+</p-dialog>
+
+<p-dialog header="Unlink a business licence from Listing" class="bl-unlink-popup" [modal]="true" [closable]="false"
+    [(visible)]="isUnlinkBlShow" [style]="{width: '50vw'}">
+    <div class="search-label" *ngIf="this.listing && this.listing.bizLicenceInfo"><strong>Are you sure you want to
+            unlink business
+            licence number
+            {{this.listing.bizLicenceInfo.businessLicenceNo}} from this
+            listing?</strong></div>
+
+    <ng-template pTemplate="footer">
+        <button pButton name="submit-dialog-btn" id="submit-dialog-btn" (click)="onUnlinkBl()">Yes, Unlink this Business
+            Licence Number</button>
+        <button pButton name="cancel-dialog-btn" id="cancel-dialog-btn" class="outline-btn"
+            (click)="onCancelUnlinkBl()">Cancel</button>
+    </ng-template>
+</p-dialog>
+
 <p-dialog header="Legend" [modal]="true" [(visible)]="isLegendShown" [style]="{width: '50vw'}">
     <span>
         <strong>Status:</strong> Status of the listing using the following categories:

frontend/src/app/features/components/listings-table/listing-details/listing-details.component.scss

@@ -159,6 +159,20 @@
                     display: flex;
                     gap: 8px;
 
+                    &.no-bl-data {
+                        flex-direction: column;
+
+                        .bl-description {
+                            strong {
+                                white-space: normal;
+                            }
+
+                            button {
+                                color: #053662;
+                            }
+                        }
+                    }
+
                     .status-name {
                         color: #42814A;
 
@@ -187,6 +201,19 @@
             .row {
                 display: flex;
 
+                &.search-row {
+                    position: relative;
+
+                    input {
+                        padding-right: 30px;
+                    }
+
+                    button {
+                        position: absolute;
+                        right: 0;
+                    }
+                }
+
                 p-table {
                     width: 100%;
                 }
@@ -247,6 +274,47 @@
         }
     }
 
+    .search-label {
+        padding: 12px 0;
+    }
+
+    .search-row {
+        position: relative;
+
+        input {
+            padding-right: 70px;
+        }
+
+        button {
+            &.search-bl-btn {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            position: absolute;
+            right: 0;
+            height: 100%;
+        }
+    }
+
+    .no-bl-found {
+        padding: 12px;
+        padding-top: 18px;
+    }
+
+    .search-results {
+        padding: 12px;
+        padding-top: 18px;
+
+        .search-result-row {
+            margin-top: 12px;
+        }
+
+        strong {
+            margin-bottom: 12px;
+        }
+    }
+
     .status-circle {
         background-color: #FFFFFF;
         width: 20px;