feat: new app tile structure + remove extra content (#1140)

* feat: new app tile structure + remove extra content

* feat: responsive grid layout + new tile layout (#1141)

* feat: responsive grid layout + new tile layout

* feat: add CTA and shadow animation on tile hover (#1142)

* fix: update images

* feat: add CTA and shadow animation on tile hover

* feat: UI for the new "Conencted" badge (#1144)

* feat: UI for the new "Conencted" badge

* feat: fetch data from integrations API and show connected apps (#1143)

* feat: fetch data from integrations API and show connected apps

* fix: update route name and keep `exposeC1Apps` (#1145)

* fix: update route name and keep `exposeC1Apps`

* fix: use new logos in landing-v2 only

Use original images everywhere else.

* fix: incorrect URL for `/integrations` call and rendering errors (#1149)

src/app/core/models/enum/enum.model.ts

@@ -42,6 +42,8 @@ export enum InAppIntegration {
   QBD_DIRECT = 'QuickBooks Connector'
 }
 
+export type IntegrationAppKey = keyof typeof InAppIntegration;
+
 export enum ToastSeverity {
   SUCCESS = 'success',
   ERROR = 'error',
@@ -900,7 +902,8 @@ export enum SizeOption {
 export enum ThemeOption {
   BRAND = 'brand',
   LIGHT = 'light',
-  DARK = 'dark'
+  DARK = 'dark',
+  SUCCESS = 'success'
 }
 
 export enum QBDPreRequisiteState {

src/app/core/models/integrations/integrations.model.ts

@@ -1,5 +1,16 @@
 import { AccountingIntegrationApp, AppUrl, ClickEvent, InAppIntegration, IntegrationView } from "../enum/enum.model";
 
+export type Integration = {
+    id: number;
+    org_id: string;
+    org_name: string;
+    tpa_id: string;
+    tpa_name: string;
+    type: string;
+    is_active: boolean;
+    is_beta: boolean;
+}
+
 export type IntegrationsView = {
     [IntegrationView.ACCOUNTING]: boolean,
     [IntegrationView.ALL]: boolean,

src/app/core/services/common/integrations.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { IntegrationsService } from './integrations.service';
+
+xdescribe('IntegrationsService', () => {
+  let service: IntegrationsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(IntegrationsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/common/integrations.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { AppUrl } from '../../models/enum/enum.model';
+import { ApiService } from './api.service';
+import { HelperService } from './helper.service';
+import { Observable } from 'rxjs';
+import { Integration } from '../../models/integrations/integrations.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IntegrationsService {
+  constructor(
+    private apiService: ApiService,
+    private helper: HelperService
+  ) {
+  }
+
+  getIntegrations(): Observable<Integration[]> {
+    this.helper.setBaseApiURL(AppUrl.INTEGRATION);
+    return this.apiService.get(`/integrations/`, {});
+  }
+}

src/app/integrations/integrations-routing.module.ts

@@ -14,7 +14,7 @@ const routes: Routes = [
         component: LandingComponent
       },
       {
-        path: 'landing-v2',
+        path: 'landing_v2',
         component: LandingV2Component
       },
       {

src/app/integrations/landing-v2/landing-v2.component.scss

@@ -23,11 +23,24 @@
     }
 
     &--accounting-app {
-        @apply tw-flex tw-flex-col tw-w-20-vw tw-h-168-px tw-items-center tw-justify-center tw-cursor-pointer tw-rounded-8-px tw-border-1-px tw-bg-white tw-border-none;
+        @apply tw-h-full tw-flex tw-flex-col tw-p-4 tw-gap-4 tw-justify-evenly tw-cursor-pointer tw-rounded-8-px tw-border tw-border-separator tw-bg-white;
+        @apply tw-transition-shadow;
+
+        img {
+            @apply tw-h-[40px];
+        }
+
+        .btn-connect {
+            @apply tw-text-14-px tw-hidden;
+        }
     }
 
     &--accounting-app-name {
-        @apply tw-pt-22-px tw-text-14-px tw-flex tw-text-text-secondary;
+        @apply tw-text-14-px tw-leading-[20px] tw-flex tw-text-text-primary;
+    }
+
+    &--accounting-app-type {
+        @apply tw-text-12-px tw-leading-[15px] tw-text-text-tertiary;
     }
 
     &--accounting-app-open {
@@ -49,4 +62,11 @@
     &--other-integration-app {
         @apply tw-flex tw-items-center tw-justify-center;
     }
+}
+
+.landing-v2--accounting-app:hover {
+    box-shadow: 0px 4px 4px 0px rgba(44, 48, 78, 0.10);
+    .btn-connect {
+        @apply tw-block;
+    }
 }

src/app/integrations/landing-v2/landing-v2.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { AccountingIntegrationApp, InAppIntegration, IntegrationView, ThemeOption } from 'src/app/core/models/enum/enum.model';
+import { AccountingIntegrationApp, InAppIntegration, IntegrationAppKey, IntegrationView, ThemeOption } from 'src/app/core/models/enum/enum.model';
 import { InAppIntegrationUrlMap, IntegrationCallbackUrl, IntegrationsView } from 'src/app/core/models/integrations/integrations.model';
 import { EventsService } from 'src/app/core/services/common/events.service';
 import { OrgService } from 'src/app/core/services/org/org.service';
@@ -15,6 +15,7 @@ import { QboAuthService } from 'src/app/core/services/qbo/qbo-core/qbo-auth.serv
 import { XeroAuthService } from 'src/app/core/services/xero/xero-core/xero-auth.service';
 import { exposeAppConfig } from 'src/app/branding/expose-app-config';
 import { NetsuiteAuthService } from 'src/app/core/services/netsuite/netsuite-core/netsuite-auth.service';
+import { IntegrationsService } from 'src/app/core/services/common/integrations.service';
 
 @Component({
   selector: 'app-landing-v2',
@@ -31,7 +32,7 @@ export class LandingV2Component implements OnInit {
 
   org: Org = this.orgService.getCachedOrg();
 
-  isTravelperkAllowed: boolean = this.org.allow_travelperk;
+  private connectedApps: IntegrationAppKey[];
 
   readonly exposeC1Apps = brandingFeatureConfig.exposeC1Apps;
 
@@ -76,6 +77,19 @@ export class LandingV2Component implements OnInit {
     [AccountingIntegrationApp.XERO]: '/integrations/xero'
   };
 
+  private readonly tpaNameToIntegrationKeyMap: Record<string, IntegrationAppKey> = {
+    'Fyle Netsuite Integration': 'NETSUITE',
+    'Fyle Sage Intacct Integration': 'INTACCT',
+    'Fyle Quickbooks Integration': 'QBO',
+    'Fyle Xero Integration': 'XERO',
+    'Fyle Quickbooks Desktop (IIF) Integration': 'QBD',
+    'Fyle Quickbooks Desktop Integration': 'QBD_DIRECT',
+    'Fyle Sage 300 Integration': 'SAGE300',
+    'Fyle Business Central Integration': 'BUSINESS_CENTRAL',
+    'Fyle TravelPerk Integration': 'TRAVELPERK',
+    'Fyle BambooHR Integration': 'BAMBOO_HR'
+  };
+
   readonly brandingConfig = brandingConfig;
 
   readonly isINCluster = this.storageService.get('cluster-domain')?.includes('in1');
@@ -104,7 +118,8 @@ export class LandingV2Component implements OnInit {
     private router: Router,
     private siAuthService: SiAuthService,
     private storageService: StorageService,
-    private orgService: OrgService
+    private orgService: OrgService,
+    private integrationService: IntegrationsService
   ) { }
 
 
@@ -116,6 +131,44 @@ export class LandingV2Component implements OnInit {
     this.integrationTabs[clickedView] = true;
   }
 
+  isAppShown(appKey: IntegrationAppKey) {
+    // If this app disabled for this org
+    if (
+      (appKey === 'BUSINESS_CENTRAL' && !this.org.allow_dynamics) ||
+      (appKey === 'QBD_DIRECT' && !this.org.allow_qbd_direct_integration) ||
+      (appKey === 'TRAVELPERK' && !this.org.allow_travelperk)
+    ) {
+      return false;
+    }
+
+    // If this app allowed and all apps are shown
+    if (this.integrationTabs.ALL) {
+      return true;
+    }
+
+    const allAppKeys = Object.keys(InAppIntegration) as IntegrationAppKey[];
+
+    if (appKey === 'BAMBOO_HR') {
+      return this.exposeApps.BAMBOO && this.integrationTabs.HRMS;
+    }
+
+    if (appKey === 'TRAVELPERK') {
+      return this.exposeApps.TRAVELPERK && this.integrationTabs.TRAVEL;
+    }
+
+    // If the app was not BAMBOO_HR or TRAVELPERK, it must be an accounting app
+    if (allAppKeys.includes(appKey)) {
+      return this.exposeApps[appKey] && this.integrationTabs.ACCOUNTING;
+    }
+
+    // TS catch-all (shouln't reach here)
+    return false;
+  }
+
+  isAppConnected(appKey: IntegrationAppKey) {
+    return this.connectedApps?.includes(appKey);
+  }
+
   openAccountingIntegrationApp(accountingIntegrationApp: AccountingIntegrationApp): void {
 
     // For local dev, we perform auth via loginWithRefreshToken on Fyle login redirect (/auth/redirect)
@@ -185,7 +238,17 @@ export class LandingV2Component implements OnInit {
     });
   }
 
+  private storeConnectedApps() {
+    this.integrationService.getIntegrations().subscribe(integrations => {
+      const tpaNames = integrations.map(integration => integration.tpa_name);
+      const connectedApps = tpaNames.map(tpaName => this.tpaNameToIntegrationKeyMap[tpaName]);
+
+      this.connectedApps = connectedApps;
+    });
+  }
+
   ngOnInit(): void {
     this.setupLoginWatcher();
+    this.storeConnectedApps();
   }
 }

src/app/shared/components/core/badge/badge.component.scss

@@ -22,6 +22,11 @@
     @apply tw-text-badge-dark-text-color;
 }
 
+.theme-success {
+    @apply tw-bg-bg-success-light tw-border tw-border-solid tw-border-border-success-light;
+    @apply tw-text-text-success;
+}
+
 .size-large {
     @apply tw-min-w-24-px;
     @apply tw-min-h-24-px;