feat: Download qwd file UI changes

.eslintrc.json

@@ -65,6 +65,7 @@
         "space-before-function-paren": "off",
         "@typescript-eslint/quotes": "off",
         "@angular-eslint/no-empty-lifecycle-method": "off",
+        "@angular-eslint/no-input-rename": "off",
         "linebreak-style": "off",
         "key-spacing": ["error", { "beforeColon": false }],
         "keyword-spacing": ["error", { "before": true }],

src/app/branding/c1-contents-config.ts

@@ -16,8 +16,8 @@ export const c1Contents = {
                 configurationSubHeaderText: 'Begin your QuickBooks integration by completing the following steps.'
             },
             connector: {
-                configurationHeaderText: 'Connect to NetSuite subsidary',
-                configurationSubHeaderText: 'Expenses will be posted to the NetSuite subsidary selected here. You can\'t change the subsidary once they\'re configured.',
+                configurationHeaderText: 'Connect to QuickBooks Desktop',
+                configurationSubHeaderText: 'Connect to QuickBooks desktop by completing the following steps.',
                 stepName: 'Connect to QuickBooks Desktop',
                 subLabel: 'Provide your credentials to establish a secure connection between your Expense Management and NetSuite account'
             },

src/app/branding/fyle-contents-config.ts

@@ -16,8 +16,8 @@ export const fyleContents = {
                 configurationSubHeaderText: 'Begin your QuickBooks integration by completing the following steps.'
             },
             connector: {
-                configurationHeaderText: 'Connect to NetSuite Tenant',
-                configurationSubHeaderText: 'Connect to the NetSuite Tenant from which you would like to import and export data. The ' + brandingConfig.brandName + ' org and NetSuite Tenant cannot be changed once the configuration steps are complete.',
+                configurationHeaderText: 'Connect to QuickBooks desktop',
+                configurationSubHeaderText: 'Connect to QuickBooks desktop by completing the following steps.',
                 stepName: 'Connect to QuickBooks Desktop',
                 subLabel: 'Expenses will be posted to the NetSuite Tenant Mapping selected here. Once configured, you can not change ' + brandingConfig.brandName + ' organization or Tenant Mapping.'
             },

src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.html

@@ -1 +1 @@
-<p>qbd-direct-onboarding-connector works!</p>
+<app-qbd-direct-download-file></app-qbd-direct-download-file>

src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
+import { QbdDirectSharedModule } from '../../qbd-direct-shared/qbd-direct-shared.module';
+import { SharedModule } from 'src/app/shared/shared.module';
 
 @Component({
   selector: 'app-qbd-direct-onboarding-connector',
   standalone: true,
-  imports: [],
+  imports: [QbdDirectSharedModule, SharedModule],
   templateUrl: './qbd-direct-onboarding-connector.component.html',
   styleUrl: './qbd-direct-onboarding-connector.component.scss'
 })

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.html

@@ -1 +1,70 @@
-<p>qbd-direct-download-file works!</p>
+<div class="tw-border tw-border-border-info-lighter">
+    <div class="tw-p-24-px">
+        <div class="tw-flex tw-items-center tw-justify-between">
+            <div class="tw-flex tw-items-center tw-justify-start">
+                <div class="tw-w-20-px tw-h-20-px tw-rounded-sm tw-bg-bg-secondary tw-text-white tw-text-14-px tw-font-500 tw-text-center tw-mr-8-px">
+                    1
+                </div>
+                <div class="tw-text-14-px tw-font-500 tw-text-text-tertiary tw-pt-4-px">
+                    <span>Download the integration file</span>
+                </div>
+            </div>
+            <div *ngIf="isStepCompleted">
+                <app-svg-icon [svgSource]="'check-circle-fill'" [width]="'24px'" [height]="'20px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-success-toast'"></app-svg-icon>
+            </div>
+        </div>
+        <div  *ngIf="!isLoading && !showDownloadLink" class="tw-flex tw-items-center tw-justify-between tw-pt-24-px">
+            <div class="tw-w-350-px">
+                <h4 class="tw-text-16-px tw-font-500 tw-text-text-tertiary">Enter company file path</h4>
+                <span class="tw-text-12-px tw-font-400 tw-text-text-muted tw-text-wrap">Enter the file path of your company to generate the integration file. Watch the video for guidance on locating company file path.</span>
+                <div>
+                    <div class="tw-pt-16-px">
+                        <input type="text" pInputText id="downloadFilePath" name="downloadFilePath" [(ngModel)]="downloadFilePath" 
+                        placeholder="Example: C:\Users\[Username]\Documents\QuickBooks" 
+                        class="tw-w-full tw-border tw-border-input-default-border tw-rounded-sm tw-px-8-px tw-py-12-px" 
+                        required pattern="^(.+)\/([^\/]+)$"
+                        #downloadFilePathField="ngModel"
+                        [ngClass]="{
+                            'error-box': downloadFilePathField.invalid && downloadFilePathField.touched
+                          }">
+                        <div *ngIf="downloadFilePathField.invalid && downloadFilePathField.touched" class="tw-text-alert-toast">
+                            <small *ngIf="downloadFilePathField.errors?.required || downloadFilePathField.errors?.pattern" class="tw-flex">
+                                <app-svg-icon [svgSource]="'info-circle-fill'" [isTextColorAllowed]="true" [width]="'16px'" [height]="'16px'" [styleClasses]="'tw-text-form-error-help-text-color'"></app-svg-icon>
+                                Enter a valid company file path.</small>
+                          </div>
+                    </div>
+                    <div class="tw-pt-16-px">
+                        <button pButton pRipple label="Download" class="downloadBtn"></button>
+                    </div>
+                </div>
+            </div>
+            <div class="tw-rounded-border-radius-2xl">
+                <p-card>
+                    <div class="tw-flex tw-justify-center">
+                        <iframe width="427" height="259" src="https://www.youtube.com/embed/2oYdc8KcQnk" frameborder="0"></iframe>
+                    </div>
+                    <div class="tw-w-[427px] tw-p-16-px">
+                        <p class="tw-text-14-px tw-font-500 tw-text-text-tertiary">Where to find company file path?</p>
+                    </div>
+                </p-card>
+            </div>
+        </div>
+        <div *ngIf="isLoading" class="tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[400px]">
+            <app-loader styleClass="spinner-30 tw-top-2-px"></app-loader>
+            <span class="tw-text-14-px tw-font-400 tw-text-text-primary">Loading</span>
+        </div>
+        <div *ngIf="!isLoading && showDownloadLink" class="tw-flex tw-flex-col tw-justify-center tw-items-center tw-h-[400px] tw-text-center">
+            <div class="tw-text-center">
+                <app-svg-icon svgSource="check-circle-outline" [width]="'24px'" [height]="'24px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-success-toast tw-pr-6-px'"></app-svg-icon>
+            </div>
+            <div>
+                <p class="tw-pt-4-px tw-text-text-tertiary tw-text-16-px tw-font-500">Your download will begin</p>
+                <span class="tw-pt-8-px tw-text-text-muted tw-text-12-px tw-font-400">If it didn’t start, <a class="tw-underline tw-underline-offset-1 tw-cursor-pointer" (click)="onManualDownload()">download the integration file manually</a>.</span>
+                <p class="tw-pt-16-px tw-text-text-muted tw-text-12-px tw-font-400">Not the right file? <a class="tw-underline tw-underline-offset-1 tw-cursor-pointer" (click)="onRetryClick()">Try again.</a></p>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="!isStepCompleted">
+        <app-configuration-step-footer [ctaText]="ConfigurationCtaText.NEXT" [isButtonDisabled]="!showDownloadLink" (save)="continueToNextStep()"></app-configuration-step-footer>
+    </div>
+</div>

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.scss

@@ -0,0 +1,20 @@
+.downloadBtn, .downloadBtn:hover {
+    @apply tw-h-40-px tw-text-14-px tw-font-500 tw-text-white tw-bg-btn-secondary-bg tw-rounded-sm #{!important};
+}
+
+:host ::ng-deep .p-button-label{
+    @apply tw-flex-auto #{!important};
+}
+
+:host ::ng-deep .p-card-body, :host ::ng-deep .p-card-content {
+    @apply tw-p-0 #{!important};
+}
+
+:host ::ng-deep .p-card-body {
+    @apply tw-rounded-border-radius-2xl #{!important}
+}
+
+:host ::ng-deep .error-box {
+    @apply tw-border tw-border-alert-toast #{!important};
+}
+

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.ts

@@ -1,12 +1,46 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { SharedModule } from "../../../../shared/shared.module";
+import { QbdDirectSharedComponent } from '../qbd-direct-shared.component';
+import { CardModule } from 'primeng/card';
+import { ConfigurationCta } from 'src/app/core/models/enum/enum.model';
+import { CommonModule } from '@angular/common';
+import { required } from '@rxweb/reactive-form-validators';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 
 @Component({
   selector: 'app-qbd-direct-download-file',
   standalone: true,
-  imports: [],
+  imports: [SharedModule, QbdDirectSharedComponent, CardModule, CommonModule, ProgressSpinnerModule],
   templateUrl: './qbd-direct-download-file.component.html',
   styleUrl: './qbd-direct-download-file.component.scss'
 })
 export class QbdDirectDownloadFileComponent {
 
+  @Input({required: true}) isLoading: boolean;
+
+  @Input({required: true}) showDownloadLink: boolean;
+
+  @Input({required: true}) isStepCompleted: boolean;
+
+  @Input({required: true}) isCompanyPathInvalid: boolean;
+
+  downloadFilePath: string;
+
+  ConfigurationCtaText = ConfigurationCta;
+
+  continueToNextStep() {
+  }
+
+  onDownloadClick() {
+    // Emit output
+  }
+
+  onManualDownload() {
+    // Emit output
+  }
+
+  onRetryClick() {
+    // Emit output
+  }
+
 }

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-shared.module.ts

@@ -1,12 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { QbdDirectDownloadFileComponent } from './qbd-direct-download-file/qbd-direct-download-file.component';
 
 @NgModule({
   declarations: [],
   imports: [
     CommonModule,
-    SharedModule
+    SharedModule,
+    QbdDirectDownloadFileComponent
+  ],
+  exports: [
+    QbdDirectDownloadFileComponent
   ]
 })
 export class QbdDirectSharedModule { }

src/app/integrations/qbd-direct/qbd-direct.module.ts

@@ -9,8 +9,7 @@ import { QbdDirectComponent } from './qbd-direct.component';
   imports: [
     CommonModule,
     QbdDirectRoutingModule,
-    SharedModule,
-    QbdDirectComponent
+    SharedModule
   ]
 })
 export class QbdDirectModule { }

src/app/shared/components/configuration/configuration-step-footer/configuration-step-footer.component.html

@@ -1,4 +1,4 @@
-<div class="tw-flex tw-py-16-px tw-px-24-px tw-border-t tw-border-t-border-tertiary" [ngClass]="!showBackButton ? 'tw-justify-end': 'tw-justify-between'">
+<div class="tw-flex tw-py-16-px tw-px-24-px" [ngClass]="[!showBackButton ? 'tw-justify-end': 'tw-justify-between', ctaText === 'NEXT' ? '' : 'tw-border-t tw-border-t-border-tertiary']">
     <div class="tw-flex" *ngIf="showBackButton">
         <div>
             <button type="button" class="p-button outline-sm" (click)="navigate()">
@@ -21,7 +21,7 @@
             <span *ngIf="brandingConfig.brandId === 'fyle'">
                 {{ ctaText }}
             </span>
-            <app-svg-icon *ngIf="brandingFeatureConfig.isIconsInsideButtonAllowed && ctaText !== 'Save'" [svgSource]="'arrow-tail-right-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-text-white tw-pl-10-px tw-pt-2-px tw-text-12-px'"></app-svg-icon>
+            <app-svg-icon *ngIf="brandingFeatureConfig.isIconsInsideButtonAllowed && ctaText !== 'Save' && ctaText === 'Next'" [svgSource]="'arrow-tail-right-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-text-white tw-pl-10-px tw-pt-2-px tw-text-12-px'"></app-svg-icon>
         </button>
         <button *ngIf="ctaText === 'Saving' || ctaText === 'Syncing'" pButton type="button" class="p-button-raised" disabled>
             {{ ctaText }}

src/styles.scss

@@ -490,6 +490,10 @@ p {
     @include spinner('100-px', '100-px', 'progress-spinner');
 }
 
+.spinner-30 {
+    @include spinner('30-px', '30-px', 'progress-spinner');
+}
+
 .p-skeleton {
     @apply tw-bg-disabled-bg-color #{!important};
 }