From 0622956bb4670dd67fc912a753bffb33e39a5213 Mon Sep 17 00:00:00 2001
From: Viswas Haridas
 <37623357+JustARatherRidiculouslyLongUsername@users.noreply.github.com>
Date: Mon, 3 Feb 2025 15:34:10 +0530
Subject: [PATCH] fix: reorder tiles to alphabetical order (#1170)

* fix: reorder tiles to alphabetical order

* fix: logo size + font size fixes (#1171)

* fix: logo size + font size fixes

* fix: beta badge positioning (#1172)
---
 .../landing-v2/landing-v2.component.html      | 140 +++++++++---------
 1 file changed, 70 insertions(+), 70 deletions(-)

diff --git a/src/app/integrations/landing-v2/landing-v2.component.html b/src/app/integrations/landing-v2/landing-v2.component.html
index b98c63d0c..103422d23 100644
--- a/src/app/integrations/landing-v2/landing-v2.component.html
+++ b/src/app/integrations/landing-v2/landing-v2.component.html
@@ -38,6 +38,25 @@ <h3 class="landing-v2--section-heading">
 
         <div
             class="tw-grid tw-grid-cols-2 md:tw-grid-cols-3 lg:tw-grid-cols-4 xl:tw-grid-cols-5 tw-gap-4 tw-justify-items-stretch">
+            <div *ngIf="isAppShown('BUSINESS_CENTRAL')" class="landing-v2--accounting-app"
+                (click)="openInAppIntegration(InAppIntegration.BUSINESS_CENTRAL)">
+                <div class="tw-flex tw-justify-between tw-items-center">
+                    <img src="assets/logos/BusinessCentral-logo.svg" />
+                    @if (isAppConnected('BUSINESS_CENTRAL')) {
+                        <app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge>
+                    } @else {
+                        <button class="btn-connect">Connect</button>
+                    }
+                </div>
+                <span class="landing-v2--accounting-app-name tw-items-start tw-gap-[10px] !tw-text-12-px">
+                    <div>
+                        Dynamics 365 Business Central
+                        <div class="landing-v2--accounting-app-type">Accounting</div>
+                    </div>
+                    <app-badge *ngIf="!orgsToHideBusinessCentralBetaBadge.includes(org.fyle_org_id)"
+                        [theme]="ThemeOption.DARK" text="Beta"></app-badge>
+                </span>
+            </div>
             <div *ngIf="isAppShown('NETSUITE')">
                 <div class="landing-v2--accounting-app"
                     (click)="openAccountingIntegrationApp(AccountingIntegrationApp.NETSUITE)">
@@ -59,30 +78,11 @@ <h3 class="landing-v2--section-heading">
                     </div>
                 </div>
             </div>
-            <div *ngIf="isAppShown('INTACCT')" class="landing-v2--accounting-app"
-                (click)="openAccountingIntegrationApp(AccountingIntegrationApp.SAGE_INTACCT)">
-                <div class="tw-flex tw-justify-between tw-items-center">
-                    <img src="assets/logos/intacct-logo-new.png" />
-                    @if (isAppConnected('INTACCT')) {
-                        <app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge>
-                    } @else {
-                        <button class="btn-connect">Connect</button>
-                    }
-                </div>
-                <div>
-                    <span class="landing-v2--accounting-app-name">
-                        Sage Intacct
-                    </span>
-                    <span class="landing-v2--accounting-app-type">
-                        Accounting
-                    </span>
-                </div>
-            </div>
-            <div *ngIf="isAppShown('QBO')" class="landing-v2--accounting-app"
-                (click)="openAccountingIntegrationApp(AccountingIntegrationApp.QBO)">
+            <div *ngIf="isAppShown('QBD')" class="landing-v2--accounting-app"
+                (click)="openInAppIntegration(InAppIntegration.QBD)">
                 <div class="tw-flex tw-justify-between tw-items-center">
                     <img src="assets/logos/quickbooks-logo.png" class="!tw-h-[30.7px]" />
-                    @if (isAppConnected('QBO')) {
+                    @if (isAppConnected('QBD')) {
                         <app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge>
                     } @else {
                         <button class="btn-connect">Connect</button>
@@ -90,37 +90,36 @@ <h3 class="landing-v2--section-heading">
                 </div>
                 <div>
                     <span class="landing-v2--accounting-app-name">
-                        QuickBooks Online
+                        QuickBooks Desktop (IIF)
                     </span>
                     <span class="landing-v2--accounting-app-type">
                         Accounting
                     </span>
                 </div>
             </div>
-            <div *ngIf="isAppShown('XERO')" class="landing-v2--accounting-app"
-                (click)="openAccountingIntegrationApp(AccountingIntegrationApp.XERO)">
+            <!-- Direct -->
+            <div *ngIf="isAppShown('QBD_DIRECT')" class="landing-v2--accounting-app"
+                (click)="openInAppIntegration(InAppIntegration.QBD_DIRECT)">
                 <div class="tw-flex tw-justify-between tw-items-center">
-                    <img src="assets/logos/xero-logo-new.png" />
-                    @if (isAppConnected('XERO')) {
+                    <img src="assets/logos/quickbooks-logo.png" class="!tw-h-[30.7px]" />
+                    @if (isAppConnected('QBD_DIRECT')) {
                         <app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge>
                     } @else {
                         <button class="btn-connect">Connect</button>
                     }
                 </div>
-                <div>
-                    <span class="landing-v2--accounting-app-name">
-                        Xero
-                    </span>
-                    <span class="landing-v2--accounting-app-type">
-                        Accounting
-                    </span>
-                </div>
+                <span class="landing-v2--accounting-app-name tw-items-start tw-gap-4">
+                    <div>
+                        QuickBooks Desktop (Web Connector)
+                        <div class="landing-v2--accounting-app-type">Accounting</div>
+                    </div>
+                </span>
             </div>
-            <div *ngIf="isAppShown('QBD')" class="landing-v2--accounting-app"
-                (click)="openInAppIntegration(InAppIntegration.QBD)">
+            <div *ngIf="isAppShown('QBO')" class="landing-v2--accounting-app"
+                (click)="openAccountingIntegrationApp(AccountingIntegrationApp.QBO)">
                 <div class="tw-flex tw-justify-between tw-items-center">
                     <img src="assets/logos/quickbooks-logo.png" class="!tw-h-[30.7px]" />
-                    @if (isAppConnected('QBD')) {
+                    @if (isAppConnected('QBO')) {
                         <app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge>
                     } @else {
                         <button class="btn-connect">Connect</button>
@@ -128,68 +127,69 @@ <h3 class="landing-v2--section-heading">
                 </div>
                 <div>
                     <span class="landing-v2--accounting-app-name">
-                        QuickBooks Desktop (IIF)
+                        QuickBooks Online
                     </span>
                     <span class="landing-v2--accounting-app-type">
                         Accounting
                     </span>
                 </div>
             </div>
-            <!-- Direct -->
-            <div *ngIf="isAppShown('QBD_DIRECT')" class="landing-v2--accounting-app"
-                (click)="openInAppIntegration(InAppIntegration.QBD_DIRECT)">
+            <div *ngIf="isAppShown('SAGE300')" class="landing-v2--accounting-app"
+                (click)="openInAppIntegration(InAppIntegration.SAGE300)">
                 <div class="tw-flex tw-justify-between tw-items-center">
-                    <img src="assets/logos/quickbooks-logo.png" class="!tw-h-[30.7px]" />
-                    @if (isAppConnected('QBD_DIRECT')) {
+                    <img src="assets/logos/sage300-logo.png" class="tw-py-[5px]" />
+                    @if (isAppConnected('SAGE300')) {
                         <app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge>
                     } @else {
                         <button class="btn-connect">Connect</button>
                     }
                 </div>
-                <span class="landing-v2--accounting-app-name tw-items-center tw-gap-4">
+                <span class="landing-v2--accounting-app-name tw-items-start tw-gap-4">
                     <div>
-                        QuickBooks Desktop (Web Connector)
+                        Sage 300 CRE
                         <div class="landing-v2--accounting-app-type">Accounting</div>
                     </div>
+                    <app-badge *ngIf="!orgsToHideSage300BetaBadge.includes(org.fyle_org_id)" [theme]="ThemeOption.DARK"
+                        text="Beta"></app-badge>
                 </span>
             </div>
-            <div *ngIf="isAppShown('SAGE300')" class="landing-v2--accounting-app"
-                (click)="openInAppIntegration(InAppIntegration.SAGE300)">
+            <div *ngIf="isAppShown('INTACCT')" class="landing-v2--accounting-app"
+                (click)="openAccountingIntegrationApp(AccountingIntegrationApp.SAGE_INTACCT)">
                 <div class="tw-flex tw-justify-between tw-items-center">
-                    <img src="assets/logos/sage300-logo.png" class="tw-py-[4px]" />
-                    @if (isAppConnected('SAGE300')) {
+                    <img src="assets/logos/intacct-logo-new.png" />
+                    @if (isAppConnected('INTACCT')) {
                         <app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge>
                     } @else {
                         <button class="btn-connect">Connect</button>
                     }
                 </div>
-                <span class="landing-v2--accounting-app-name tw-items-center tw-gap-4">
-                    <div>
-                        Sage 300 CRE
-                        <div class="landing-v2--accounting-app-type">Accounting</div>
-                    </div>
-                    <app-badge *ngIf="!orgsToHideSage300BetaBadge.includes(org.fyle_org_id)" [theme]="ThemeOption.DARK"
-                        text="Beta"></app-badge>
-                </span>
+                <div>
+                    <span class="landing-v2--accounting-app-name">
+                        Sage Intacct
+                    </span>
+                    <span class="landing-v2--accounting-app-type">
+                        Accounting
+                    </span>
+                </div>
             </div>
-            <div *ngIf="isAppShown('BUSINESS_CENTRAL')" class="landing-v2--accounting-app"
-                (click)="openInAppIntegration(InAppIntegration.BUSINESS_CENTRAL)">
+            <div *ngIf="isAppShown('XERO')" class="landing-v2--accounting-app"
+                (click)="openAccountingIntegrationApp(AccountingIntegrationApp.XERO)">
                 <div class="tw-flex tw-justify-between tw-items-center">
-                    <img src="assets/logos/BusinessCentral-logo.svg" />
-                    @if (isAppConnected('BUSINESS_CENTRAL')) {
+                    <img src="assets/logos/xero-logo-new.png" />
+                    @if (isAppConnected('XERO')) {
                         <app-badge text="Connected" [theme]="ThemeOption.SUCCESS"></app-badge>
                     } @else {
                         <button class="btn-connect">Connect</button>
                     }
                 </div>
-                <span class="landing-v2--accounting-app-name tw-items-center tw-gap-4">
-                    <div>
-                        Dynamics 365 Business Central
-                        <div class="landing-v2--accounting-app-type">Accounting</div>
-                    </div>
-                    <app-badge *ngIf="!orgsToHideBusinessCentralBetaBadge.includes(org.fyle_org_id)"
-                        [theme]="ThemeOption.DARK" text="Beta"></app-badge>
-                </span>
+                <div>
+                    <span class="landing-v2--accounting-app-name">
+                        Xero
+                    </span>
+                    <span class="landing-v2--accounting-app-type">
+                        Accounting
+                    </span>
+                </div>
             </div>
 
             <div *ngIf="isAppShown('BAMBOO_HR')">