feat: Xero Disconnect (#1008)

* feat: Xero Disconnect

* update url

* fix url

Author: anishfyle

src/app/core/services/xero/xero-core/xero-helper.service.ts

@@ -30,4 +30,8 @@ export class XeroHelperService {
   refreshFyleDimensions() {
     return this.apiService.post(`/workspaces/${this.workspaceService.getWorkspaceId()}/fyle/refresh_dimensions/`, {});
   }
+
+  disconnect() {
+    return this.apiService.post(`/workspaces/${this.workspaceService.getWorkspaceId()}/connection/xero/revoke/`, {});
+  }
 }

src/app/integrations/xero/xero-main/xero-main.component.html

@@ -1,5 +1,5 @@
 <div [ngClass]="{'tw-h-100-vh tw-bg-bg-tertiary-lighter tw-overflow-auto': brandingFeatureConfig.isBackgroundColorAllowed}">
-    <app-main-menu [modules]="modules" [activeItem]="modules[0]" [appName]="appName" [isDropdrownRequired]="false" (refreshDimensionClick)="refreshDimensions()" [isSyncVisible]="true"></app-main-menu>
+    <app-main-menu [modules]="modules" [activeItem]="modules[0]" [appName]="appName" [isDropdrownRequired]="false" (refreshDimensionClick)="refreshDimensions()" [isSyncVisible]="true" [isDisconnectRequired]="disconnectButton" (disconnectClick)="disconnect()"></app-main-menu>
     <div>
         <router-outlet></router-outlet>
     </div>

src/app/integrations/xero/xero-main/xero-main.component.ts

@@ -2,8 +2,9 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { MenuItem } from 'primeng/api';
 import { brandingContent, brandingFeatureConfig } from 'src/app/branding/branding-config';
-import { AppName } from 'src/app/core/models/enum/enum.model';
+import { AppName, ToastSeverity } from 'src/app/core/models/enum/enum.model';
 import { AccountingExportService } from 'src/app/core/services/common/accounting-export.service';
+import { IntegrationsToastService } from 'src/app/core/services/common/integrations-toast.service';
 import { XeroHelperService } from 'src/app/core/services/xero/xero-core/xero-helper.service';
 
 @Component({
@@ -17,6 +18,8 @@ export class XeroMainComponent implements OnInit {
 
   readonly brandingContent = brandingContent.common;
 
+  readonly disconnectButton = brandingFeatureConfig.featureFlags.dashboard.disconnectButton;
+
   modules: MenuItem[] = [
     {label: 'Dashboard', routerLink: '/integrations/xero/main/dashboard'},
     {label: this.brandingContent.exportLogTabName, routerLink: '/integrations/xero/main/export_log'},
@@ -28,12 +31,26 @@ export class XeroMainComponent implements OnInit {
 
   readonly brandingFeatureConfig = brandingFeatureConfig;
 
+  isConnectionInProgress: boolean = false;
+
   constructor(
     private accountingExportService: AccountingExportService,
     private xeroHelperService: XeroHelperService,
-    private router: Router
+    private router: Router,
+    private toastService: IntegrationsToastService
   ) { }
 
+  disconnect(): void {
+    if (!this.isConnectionInProgress) {
+      this.xeroHelperService.disconnect().subscribe(() => {
+        this.isConnectionInProgress = false;
+        this.toastService.displayToastMessage(ToastSeverity.SUCCESS, 'Disconnected Xero Company successfully');
+        this.router.navigate(['/integrations/xero/onboarding/landing']);
+      });
+    }
+    this.isConnectionInProgress = true;
+  }
+
   refreshDimensions() {
     this.xeroHelperService.refreshXeroDimensions().subscribe();
     this.xeroHelperService.refreshFyleDimensions().subscribe();