C1: QA fixes (#521)

* C1: QA fixes * Zero state min height and border radius fixes * fix mapping stat section * fix pills, readmore, + icon inside dropdown * Update typography * fixes
fylein · Feb 7, 2024 · 7d20d86 · 7d20d86
1 parent 5d3cd12
commit 7d20d86
Show file tree

Hide file tree

Showing 72 changed files with 354 additions and 285 deletions.
diff --git a/.../business-central-complete-export-log/business-central-complete-export-log.component.html b/.../business-central-complete-export-log/business-central-complete-export-log.component.html
@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div *ngIf="!isLoading" class="tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
+<div *ngIf="!isLoading" class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
             [exportLogForm]="exportLogForm"

diff --git a/...og/business-central-skipped-export-log/business-central-skipped-export-log.component.html b/...og/business-central-skipped-export-log/business-central-skipped-export-log.component.html
@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div *ngIf="!isLoading" class="tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
+<div *ngIf="!isLoading" class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
             [exportLogForm]="skipExportLogForm"

diff --git a/...usiness-central-onboarding-connector/business-central-onboarding-connector.component.html b/...usiness-central-onboarding-connector/business-central-onboarding-connector.component.html
@@ -13,7 +13,7 @@
                 [contentText]="'Expenses will be posted to the Dynamics 365 Business Central Location entity selected here.'"
                 [redirectLink]="redirectLink"></app-configuration-step-header>
             </div>
-            <div>
+            <div class="tw-px-24-px tw-pb-24-px">
                 <app-configuration-connector
                     [accountingAppTitle]="'Dynamics 365 Business Central'"
                     [accountingCompanyName]="businessCentralCompanyName"
@@ -35,10 +35,8 @@
                     [confirmBtnText]="'Re connect'"
                     [showSecondaryCTA]="false">
                 </app-configuration-confirmation-dialog>
-            </div>
-            <div>
                 <app-configuration-step-footer [ctaText]="!saveInProgress ? ConfigurationCtaText.SAVE_AND_CONTINUE : ConfigurationCtaText.SAVING" [isButtonDisabled]="isContinueDisabled" (save)="save()" ></app-configuration-step-footer>
-             </div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/...ared/business-central-advanced-settings/business-central-advanced-settings.component.html b/...ared/business-central-advanced-settings/business-central-advanced-settings.component.html
@@ -74,7 +74,7 @@ <h4 class="tw-mb-12-px">Preview of the Description Field</h4>
                     <app-configuration-toggle-field 
                         [form]="advancedSettingForm"
                         [label]="'Skip export of specific expenses from ' + brandingConfig.brandName + ' to Dynamics 365 Business Central'" 
-                        [subLabel]="'You could choose to skip expenses from ' + brandingConfig.brandName + ' to Dynamics 365 Business Central by setting up a conditional rule.'" 
+                        [subLabel]="'You could choose to skip expenses from ' + brandingConfig.brandName + ' to Dynamics 365 Business Central by setting up a conditional rule. '" 
                         [formControllerName]="'skipExport'"
                         [iconPath]="'list'"
                         [redirectLink]="skipExportRedirectLink">
@@ -89,8 +89,6 @@ <h4 class="tw-mb-12-px">Preview of the Description Field</h4>
                         </app-configuration-skip-export>
                     </div>
                 </div>
-            </div>
-            <div>
                 <app-configuration-step-footer 
                     [ctaText] = "!isSaveInProgress ? (isOnboarding ? ConfigurationCtaText.SAVE_AND_CONTINUE : ConfigurationCtaText.SAVE) : ConfigurationCtaText.SAVING" 
                     [showBackButton] = "isOnboarding"

diff --git a/...l-shared/business-central-import-settings/business-central-import-settings.component.html b/...l-shared/business-central-import-settings/business-central-import-settings.component.html
@@ -41,8 +41,6 @@
                         [isDestinationFixedImport]="true">
                     </app-configuration-import-field>
                 </div>
-            </div>
-            <div>
                 <app-configuration-step-footer 
                     [ctaText] = "!isSaveInProgress ? (isOnboarding ? ConfigurationCtaText.SAVE_AND_CONTINUE : ConfigurationCtaText.SAVE) : ConfigurationCtaText.SAVING" 
                     [showBackButton] = "isOnboarding"

diff --git a/src/app/integrations/intacct/main/dashboard/dashboard.component.html b/src/app/integrations/intacct/main/dashboard/dashboard.component.html
@@ -71,7 +71,7 @@ <h5>{{ exportableExpenseGroupIds.length }} new expense{{(exportableExpenseGroupI
             <p class="tw-pt-4-px tw-font-400 tw-text-14-px">0 expenses to export right now</p>
         </div>
     </div>
-    <div *ngIf="lastExport || exportableExpenseGroupIds.length" class="tw-mt-24-px tw-shadow-app-card tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator">
+    <div *ngIf="lastExport || exportableExpenseGroupIds.length" class="tw-mt-24-px tw-shadow-app-card tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator">
         <div class="tw-flex tw-justify-between tw-items-center tw-p-24-px">
                 <h4 class="tw-font-500 tw-text-18-px">Your last export</h4>
         </div>
@@ -116,7 +116,7 @@ <h4 class="tw-font-500 tw-text-18-px">Your last export</h4>
             </div>
         </div>
     </div>
-    <div *ngIf="!isLoading && lastExport && ((errors.EMPLOYEE_MAPPING.length || errors.CATEGORY_MAPPING.length || errors.INTACCT_ERROR.length) || (groupedErrorStat.EMPLOYEE_MAPPING || groupedErrorStat.CATEGORY_MAPPING))" class="tw-mt-24-px tw-shadow-app-card tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator">
+    <div *ngIf="!isLoading && lastExport && ((errors.EMPLOYEE_MAPPING.length || errors.CATEGORY_MAPPING.length || errors.INTACCT_ERROR.length) || (groupedErrorStat.EMPLOYEE_MAPPING || groupedErrorStat.CATEGORY_MAPPING))" class="tw-mt-24-px tw-shadow-app-card tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator">
         <div class="tw-flex tw-justify-between tw-items-center tw-p-24-px">
                 <h4 class="!tw-font-500 !tw-text-18-px">Errors</h4>
         </div>

diff --git a/src/app/integrations/intacct/main/dashboard/dashboard.component.scss b/src/app/integrations/intacct/main/dashboard/dashboard.component.scss
@@ -52,7 +52,7 @@
 }
 
 :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
-    @apply tw-text-slightly-normal-text-color tw-text-12-px tw-font-500 tw-py-12-px tw-px-22-px tw-border tw-border-box-color tw-bg-disabled-bg-color #{!important}
+    @apply tw-text-text-primary tw-text-12-px tw-font-500 tw-py-12-px tw-px-22-px tw-border tw-border-box-color tw-bg-disabled-bg-color #{!important}
 }
 
 :host ::ng-deep .p-datatable .p-datatable-tbody > tr > td > button {

diff --git a/...grations/intacct/main/export-log/completed-export-log/completed-export-log.component.scss b/...grations/intacct/main/export-log/completed-export-log/completed-export-log.component.scss
@@ -25,10 +25,10 @@ input.custom-focus:focus {
   }
 
 .clickable-row:hover {
-    cursor: pointer;
+    @apply tw-cursor-pointer;
     &:hover {
-        background: #FAFCFF;
-      }
+      @apply tw-bg-bg-info-lightest;
+    }
 }
 
 :host ::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
@@ -60,7 +60,7 @@ input.custom-focus:focus {
 }
 
 :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
-    @apply tw-text-slightly-normal-text-color tw-text-12-px tw-font-500 tw-py-12-px tw-px-22-px tw-border tw-border-box-color tw-bg-disabled-bg-color #{!important}
+    @apply tw-text-text-primary tw-text-12-px tw-font-500 tw-py-12-px tw-px-22-px tw-border tw-border-box-color tw-bg-disabled-bg-color #{!important}
 }
 
 :host ::ng-deep .p-datatable .p-datatable-tbody > tr > td > button {

diff --git a/src/app/integrations/intacct/main/export-log/export-log.component.scss b/src/app/integrations/intacct/main/export-log/export-log.component.scss
@@ -19,10 +19,10 @@
 }
 
 .clickable-row:hover {
-    cursor: pointer;
+    @apply tw-cursor-pointer;
     &:hover {
-        background: #FAFCFF;
-      }
+      @apply tw-bg-bg-info-lightest;
+    }
 }
 
 :host ::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
@@ -54,7 +54,7 @@
 }
 
 :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
-    @apply tw-text-slightly-normal-text-color tw-text-12-px tw-font-500 tw-py-12-px tw-px-22-px tw-border tw-border-box-color tw-bg-disabled-bg-color #{!important}
+    @apply tw-text-text-primary tw-text-12-px tw-font-500 tw-py-12-px tw-px-22-px tw-border tw-border-box-color tw-bg-disabled-bg-color #{!important}
 }
 
 :host ::ng-deep .p-datatable .p-datatable-tbody > tr > td > button {

diff --git a/src/app/integrations/intacct/main/export-log/skip-export-log/skip-export-log.component.scss b/src/app/integrations/intacct/main/export-log/skip-export-log/skip-export-log.component.scss
@@ -19,10 +19,10 @@
 }
 
 .clickable-row:hover {
-    cursor: pointer;
+    @apply tw-cursor-pointer;
     &:hover {
-        background: #FAFCFF;
-      }
+      @apply tw-bg-bg-info-lightest;
+    }
 }
 
 :host ::ng-deep .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
@@ -54,7 +54,7 @@
 }
 
 :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
-    @apply tw-text-slightly-normal-text-color tw-text-12-px tw-font-500 tw-py-12-px tw-px-22-px tw-border tw-border-box-color tw-bg-disabled-bg-color #{!important}
+    @apply tw-text-text-primary tw-text-12-px tw-font-500 tw-py-12-px tw-px-22-px tw-border tw-border-box-color tw-bg-disabled-bg-color #{!important}
 }
 
 :host ::ng-deep .p-datatable .p-datatable-tbody > tr > td > button {

diff --git a/src/app/integrations/intacct/main/mapping/category-mapping/category-mapping.component.html b/src/app/integrations/intacct/main/mapping/category-mapping/category-mapping.component.html
@@ -3,8 +3,8 @@
 </div>
 <div *ngIf="!isLoading" class="tw-py-16-px tw-px-120-px">
     <div class="tw-inline-flex tw-space-x-4">
-        <div class="tw-rounded-10-px tw-bg-white tw-border-1-px tw-border-separator tw-p-16-px tw-w-200-px tw-h-84-px">
-            <div class="tw-w-36-px tw-h-6-px tw-rounded-12-px tw-bg-cta-disabled">
+        <div class="tw-rounded-10-px tw-bg-white tw-border-1-px tw-border-separator tw-p-16-px tw-h-84-px">
+            <div class="tw-w-34-px tw-h-6-px tw-rounded-12-px tw-bg-cta-disabled">
             </div>
             <div class="tw-pt-8-px tw-text-faded-text-color tw-text-12-px">
                 <p>Total Categories</p>
@@ -14,8 +14,8 @@
             </div>
         </div>
 
-        <div class="tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator tw-p-16-px tw-w-200-px tw-h-84-px">
-            <div class="tw-w-36-px tw-h-6-px tw-rounded-12-px tw-bg-cta-disabled">
+        <div class="tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator tw-p-16-px tw-h-84-px">
+            <div class="tw-w-34-px tw-h-6-px tw-rounded-12-px tw-bg-cta-disabled">
             </div>
             <div class="tw-pt-8-px tw-text-faded-text-color tw-text-12-px">
                 <p>Unmapped Categories</p>
@@ -25,7 +25,7 @@
             </div>
         </div>
     </div>
-    <div class="tw-shadow-app-card tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator tw-mt-16-px">
+    <div class="tw-shadow-app-card tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator tw-mt-16-px">
         <div class="tw-p-24-px tw-border-b-separator">
             <app-mapping-filter [appName]="AppName.QBD" [selectedAlphabeticalFilter]="alphabetFilter" [mappingFilter]="selectedMappingFilter" (mappingFilterChangeEvent)="mappingStateFilter($event)" (mappingSearchingEvent)="mappingSearchFilter($event)" (mappingFilterUpdateHandler)="mappingFilterUpdate($event)" [isAlphabetFilterHidden]="false"></app-mapping-filter>
         </div>

diff --git a/src/app/integrations/intacct/main/mapping/employee-mapping/employee-mapping.component.html b/src/app/integrations/intacct/main/mapping/employee-mapping/employee-mapping.component.html
@@ -4,8 +4,8 @@
 <div *ngIf="!isLoading" class="tw-py-16-px tw-px-120-px">
         <div class="tw-flex tw-justify-between">
             <div class="tw-flex">
-                <div class="tw-rounded-10-px tw-bg-white tw-border-1-px tw-border-separator tw-p-16-px tw-w-200-px tw-h-84-px">
-                    <div class="tw-w-36-px tw-h-6-px tw-rounded-12-px tw-bg-cta-disabled">
+                <div class="tw-rounded-10-px tw-bg-white tw-border-1-px tw-border-separator tw-pt-16-px tw-pr-56-px tw-pb-10-px tw-pl-16-px tw-h-84-px">
+                    <div class="tw-w-34-px tw-h-6-px tw-rounded-12-px tw-bg-bg-brand-muted">
                     </div>
                     <div class="tw-pt-8-px tw-text-faded-text-color tw-text-12-px">
                         <p>Total Employees</p>
@@ -15,8 +15,8 @@
                     </div>
                 </div>
                 <span class="tw-pl-16-px"></span>
-                <div class="tw-rounded-10-px tw-bg-white tw-border-1-px tw-border-separator tw-p-16-px tw-w-200-px tw-h-84-px">
-                    <div class="tw-w-36-px tw-h-6-px tw-rounded-12-px tw-bg-cta-disabled">
+                <div class="tw-rounded-10-px tw-bg-white tw-border-1-px tw-border-separator tw-pt-16-px tw-pr-56-px tw-pb-10-px tw-pl-16-px tw-h-84-px">
+                    <div class="tw-w-34-px tw-h-6-px tw-rounded-12-px tw-bg-bg-brand-muted">
                     </div>
                     <div class="tw-pt-8-px tw-text-faded-text-color tw-text-12-px">
                         <p>Unmapped Employees</p>
@@ -33,7 +33,7 @@
                 </div>
         </div>
 
-    <div class="tw-shadow-app-card tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator tw-mt-16-px">
+    <div class="tw-shadow-app-card tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator tw-mt-16-px">
         <div class="tw-p-24-px tw-border-b-separator">
             <app-mapping-filter [appName]="AppName.INTACCT" [selectedAlphabeticalFilter]="alphabetFilter" [mappingFilter]="selectedMappingFilter" (mappingFilterChangeEvent)="mappingStateFilter($event)" (mappingSearchingEvent)="mappingSearchFilter($event)" (mappingFilterUpdateHandler)="mappingFilterUpdate($event)" [isAlphabetFilterHidden]="false"></app-mapping-filter>
         </div>

diff --git a/src/app/integrations/intacct/main/mapping/generic-mapping/generic-mapping.component.html b/src/app/integrations/intacct/main/mapping/generic-mapping/generic-mapping.component.html
@@ -3,8 +3,8 @@
 </div>
 <div *ngIf="!isLoading" class="tw-py-16-px tw-px-120-px">
     <div class="tw-inline-flex tw-space-x-4">
-        <div class="tw-rounded-10-px tw-bg-white tw-border-1-px tw-border-separator tw-p-16-px tw-w-200-px tw-h-84-px">
-            <div class="tw-w-36-px tw-h-6-px tw-rounded-12-px tw-bg-cta-disabled">
+        <div class="tw-rounded-10-px tw-bg-white tw-border-1-px tw-border-separator tw-p-16-px tw-h-84-px">
+            <div class="tw-w-34-px tw-h-6-px tw-rounded-12-px tw-bg-cta-disabled">
             </div>
             <div class="tw-pt-8-px tw-text-faded-text-color tw-text-12-px">
                 <p>Total {{ this.sourceType | snakeCaseToSpaceCase | titlecase }}{{mappingStats.all_attributes_count > 0 ? 's' : ''}}</p>
@@ -14,8 +14,8 @@
             </div>
         </div>
 
-        <div class="tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator tw-p-16-px tw-w-200-px tw-h-84-px">
-            <div class="tw-w-36-px tw-h-6-px tw-rounded-12-px tw-bg-cta-disabled">
+        <div class="tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator tw-p-16-px tw-h-84-px">
+            <div class="tw-w-34-px tw-h-6-px tw-rounded-12-px tw-bg-cta-disabled">
             </div>
             <div class="tw-pt-8-px tw-text-faded-text-color tw-text-12-px">
                 <p>Unmapped {{ this.sourceType | snakeCaseToSpaceCase | titlecase }}{{mappingStats.unmapped_attributes_count > 0 ? 's' : ''}}</p>
@@ -25,7 +25,7 @@
             </div>
         </div>
     </div>
-    <div class="tw-shadow-app-card tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator tw-mt-16-px">
+    <div class="tw-shadow-app-card tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator tw-mt-16-px">
         <div class="tw-p-24-px tw-border-b-separator">
             <app-mapping-filter [appName]="AppName.INTACCT" [selectedAlphabeticalFilter]="alphabetFilter" [mappingFilter]="selectedMappingFilter" (mappingFilterChangeEvent)="mappingStateFilter($event)" (mappingSearchingEvent)="mappingSearchFilter($event)" (mappingFilterUpdateHandler)="mappingFilterUpdate($event)" [isAlphabetFilterHidden]="false"></app-mapping-filter>
         </div>

diff --git a/src/app/integrations/landing/landing.component.html b/src/app/integrations/landing/landing.component.html
@@ -139,7 +139,7 @@
             </p>
             <p class="landing--section-caption">
                 We are looking forward to building integrations with a few other applications in the market, as listed below. 
-                If you have a use case to integrate with these, we would love to hear them at <span class="tw-text-hyperlink-color">{{brandingConfig.supportEmail}}</span>
+                If you have a use case to integrate with these, we would love to hear them at <span class="tw-text-link-primary">{{brandingConfig.supportEmail}}</span>
             </p>
 
             <div class="tw-rounded-4-px tw-border-1-px">

diff --git a/src/app/integrations/qbd/main/dashboard/dashboard.component.scss b/src/app/integrations/qbd/main/dashboard/dashboard.component.scss
@@ -8,7 +8,7 @@
 }
 
 :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
-    @apply tw-text-slightly-normal-text-color tw-text-12-px tw-font-500 tw-py-12-px tw-px-22-px tw-border tw-border-box-color tw-bg-disabled-bg-color #{!important}
+    @apply tw-text-text-primary tw-text-12-px tw-font-500 tw-py-12-px tw-px-22-px tw-border tw-border-box-color tw-bg-disabled-bg-color #{!important}
 }
 
 :host ::ng-deep .p-datatable .p-datatable-tbody > tr > td > button {

diff --git a/src/app/integrations/qbd/main/mapping/generic-mapping/generic-mapping.component.html b/src/app/integrations/qbd/main/mapping/generic-mapping/generic-mapping.component.html
@@ -6,7 +6,7 @@
         <app-mapping-header-section [sourceType]="'Corporate Card'" [mappingStats]="mappingStats"></app-mapping-header-section>
     </div>
 
-    <div class="tw-shadow-app-card tw-rounded-12-px tw-bg-white tw-border-1-px tw-border-separator tw-mt-16-px">
+    <div class="tw-shadow-app-card tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator tw-mt-16-px">
         <div class="tw-p-24-px">
             <app-mapping-filter [appName]="AppName.QBD" [mappingFilter]="selectedMappingFilter" (mappingFilterChangeEvent)="mappingStateFilter($event)" (mappingSearchingEvent)="mappingSeachingFilter($event)" [isAlphabetFilterHidden]="true"></app-mapping-filter>
         </div>

diff --git a/...bo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html b/...bo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html
@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div *ngIf="!isLoading" class="tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
+<div *ngIf="!isLoading" class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
             [exportLogForm]="exportLogForm"

diff --git a/.../qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html b/.../qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html
@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div *ngIf="!isLoading" class="tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
+<div *ngIf="!isLoading" class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
             [exportLogForm]="skipExportLogForm"

diff --git a/...tions/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html b/...tions/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html
@@ -12,32 +12,31 @@
                     [redirectLink]="redirectLink">
                 </app-configuration-step-header>
             </div>
-            <app-configuration-connector
-                [accountingAppTitle]="'QuickBooks Online Company'"
-                [accountingCompanyName]="qboCompanyName"
-                [fyleOrgName]="fyleOrgName"
-                [accountingCompanyTokenExpired]="qboTokenExpired"
-                [isAccountingCompanyConnected]="isQboConnected"
-                [showDisconnect]="showDisconnectQBO"
-                [accountingCompanyConnectionInProgress]="qboConnectionInProgress"
-                [switchLinkText]="'Disconnect'"
-                (switchCompany)="disconnectQbo()"
-                (connectCompany)="connectQbo()">
-            </app-configuration-connector>
+            <div class="tw-px-24-px tw-pb-24-px">
+                <app-configuration-connector
+                    [accountingAppTitle]="'QuickBooks Online Company'"
+                    [accountingCompanyName]="qboCompanyName"
+                    [fyleOrgName]="fyleOrgName"
+                    [accountingCompanyTokenExpired]="qboTokenExpired"
+                    [isAccountingCompanyConnected]="isQboConnected"
+                    [showDisconnect]="showDisconnectQBO"
+                    [accountingCompanyConnectionInProgress]="qboConnectionInProgress"
+                    [switchLinkText]="'Disconnect'"
+                    (switchCompany)="disconnectQbo()"
+                    (connectCompany)="connectQbo()">
+                </app-configuration-connector>
 
-            <app-configuration-confirmation-dialog
-                (warningAccepted)="acceptWarning($event)"
-                [isWarningVisible]="isWarningDialogVisible"
-                [event]="warningEvent"
-                [headerText]="warningHeaderText"
-                [contextText]="warningContextText"
-                [confirmBtnText]="primaryButtonText"
-                [showSecondaryCTA]="false">
-            </app-configuration-confirmation-dialog>
-
-            <div>
+                <app-configuration-confirmation-dialog
+                    (warningAccepted)="acceptWarning($event)"
+                    [isWarningVisible]="isWarningDialogVisible"
+                    [event]="warningEvent"
+                    [headerText]="warningHeaderText"
+                    [contextText]="warningContextText"
+                    [confirmBtnText]="primaryButtonText"
+                    [showSecondaryCTA]="false">
+                </app-configuration-confirmation-dialog>
                 <app-configuration-step-footer [ctaText]="!saveInProgress ? ConfigurationCtaText.SAVE_AND_CONTINUE : ConfigurationCtaText.SAVING" [isButtonDisabled]="isContinueDisabled" (save)="continueToNextStep()"></app-configuration-step-footer>
-             </div>
+            </div>
         </div>
     </div>
 </div>