c1: pi icons replace | Hide icons inside buttons (#496)

* c1: pi icons replace * few fixes * c1: Hide icons inside buttons (#497) * fix QBO bug and loader inside button
fylein · Feb 1, 2024 · 0b410ce · 0b410ce
1 parent 085e240
commit 0b410ce
Show file tree

Hide file tree

Showing 56 changed files with 163 additions and 91 deletions.
diff --git a/src/app/branding/branding-config.ts b/src/app/branding/branding-config.ts
@@ -10,6 +10,7 @@ const featureConfigs: FeatureConfiguration = {
     fyle: {
         illustrationsAllowed: true,
         isGradientAllowed: true,
+        isIconsInsideButtonAllowed: true,
         exposeOnlyQBOApp: false,
         featureFlags: {
             cloneSettings: true,
@@ -38,6 +39,7 @@ const featureConfigs: FeatureConfiguration = {
     co: {
         illustrationsAllowed: false,
         isGradientAllowed: false,
+        isIconsInsideButtonAllowed: false,
         exposeOnlyQBOApp: true,
         featureFlags: {
             cloneSettings: false,

diff --git a/src/app/core/models/branding/feature-configuration.model.ts b/src/app/core/models/branding/feature-configuration.model.ts
@@ -2,6 +2,7 @@ export type FeatureConfiguration = {
     [brandingId: string]: {
         illustrationsAllowed: boolean;
         isGradientAllowed: boolean;
+        isIconsInsideButtonAllowed: boolean;
         exposeOnlyQBOApp: boolean;
         featureFlags: {
             cloneSettings: boolean;

diff --git a/src/app/core/models/common/helper.model.ts b/src/app/core/models/common/helper.model.ts
@@ -9,7 +9,7 @@ export class HelperUtility {
         form.controls[controllerName].clearValidators();
 
         // Temporary hack: Don't reset value for fields that are used in reimbursable + ccc section
-        if (controllerName !== 'accountsPayable') {
+        if (controllerName !== 'accountsPayable' && controllerName !== 'defaultCCCAccount') {
             form.controls[controllerName].setValue(null);
         }
     }

diff --git a/src/app/integrations/qbd/main/dashboard/dashboard.component.html b/src/app/integrations/qbd/main/dashboard/dashboard.component.html
@@ -17,7 +17,7 @@ <h5 class="tw-text-14-px tw-font-400 tw-text-slightly-normal-text-color tw-pt-2-
                     <div>
                         <button type="button" class="export-btn tw-float-right tw-flex tw-justify-end tw-items-center tw-text-white tw-text-500 tw-px-24-px tw-py-12-px tw-bg-mandatory-field-color tw-rounded-4-px" (click)="triggerExports()" [disabled]="exportInProgress" >
                             <p class="tw-text-14-px tw-font-400 tw-pl-5px" *ngIf="!exportInProgress">Export IIF file
-                                <i class="tw-pl-10-px tw-pt-2-px !tw-text-12-px pi pi-arrow-right"></i>
+                                <app-svg-icon *ngIf="brandingFeatureConfig.isIconsInsideButtonAllowed" [svgSource]="'arrow-tail-right-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-pl-10-px tw-pt-2-px !tw-text-12-px'"></app-svg-icon>
                             </p>
                             <p class="tw-text-14-px tw-font-400 tw-pl-5px" *ngIf="exportInProgress">Exporting ...
                             </p>

diff --git a/src/app/integrations/qbd/main/dashboard/dashboard.component.ts b/src/app/integrations/qbd/main/dashboard/dashboard.component.ts
@@ -81,6 +81,8 @@ export class DashboardComponent implements OnInit {
 
   readonly brandingConfig = brandingConfig;
 
+  readonly brandingFeatureConfig = brandingFeatureConfig;
+
   readonly illustrationsAllowed: boolean = brandingFeatureConfig.illustrationsAllowed;
 
   readonly isGradientAllowed: boolean = brandingFeatureConfig.isGradientAllowed;

diff --git a/src/app/integrations/si/main/dashboard/dashboard.component.html b/src/app/integrations/si/main/dashboard/dashboard.component.html
@@ -33,10 +33,10 @@ <h5>{{ exportableExpenseGroupIds.length }} new expense{{(exportableExpenseGroupI
                     <div>
                         <button type="button" class="export-btn tw-float-right tw-flex tw-justify-end tw-items-center tw-text-white tw-text-500 tw-bg-mandatory-field-color tw-rounded-4-px p-button-raised" pButton (click)="export()" [ngClass]="!exportableExpenseGroupIds.length || exportInProgress ? 'btn-disabled' : 'btn-enabled'" [disabled]="exportInProgress || !exportableExpenseGroupIds.length">
                             <p class="!tw-text-14-px !tw-font-500" *ngIf="!exportInProgress">Export
-                                <i class="tw-pl-8-px tw-pt-2-px !tw-text-12-px pi pi-arrow-right"></i>
+                                <app-svg-icon *ngIf="brandingFeatureConfig.isIconsInsideButtonAllowed" [svgSource]="'arrow-tail-right-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-pl-8-px tw-pt-2-px !tw-text-12-'"></app-svg-icon>
                             </p>
                             <p class="!tw-text-14-px !tw-font-500" *ngIf="exportInProgress">Exporting
-                                <i class="tw-pl-8-px tw-pt-2-px !tw-text-12-px pi pi-arrow-right"></i>
+                                <app-svg-icon *ngIf="brandingFeatureConfig.isIconsInsideButtonAllowed" [svgSource]="'arrow-tail-right-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-pl-8-px tw-pt-2-px !tw-text-12-px'"></app-svg-icon>
                             </p>
                         </button><br>
                     </div>

diff --git a/src/app/integrations/si/main/dashboard/dashboard.component.ts b/src/app/integrations/si/main/dashboard/dashboard.component.ts
@@ -112,6 +112,8 @@ export class DashboardComponent implements OnInit {
 
   readonly isGradientAllowed: boolean = brandingFeatureConfig.isGradientAllowed;
 
+  readonly brandingFeatureConfig = brandingFeatureConfig;
+
   constructor(
     private dashboardService: DashboardService,
     private exportLogService: ExportLogService,

diff --git a/.../integrations/si/main/export-log/completed-export-log/completed-export-log.component.html b/.../integrations/si/main/export-log/completed-export-log/completed-export-log.component.html
@@ -32,7 +32,7 @@
                                     </div>
                                 </div>
                             </span>
-                            <i class="pi pi-times" (click)="removeFilter(exportLogForm.controls.dateRange)"></i>
+                            <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(exportLogForm.controls.dateRange)"></i>
                         </div>
                     </ng-template>
                     <ng-template let-date pTemplate="item">

diff --git a/...pp/integrations/si/main/export-log/completed-export-log/completed-export-log.component.ts b/...pp/integrations/si/main/export-log/completed-export-log/completed-export-log.component.ts
@@ -9,7 +9,7 @@ import { TrackingService } from 'src/app/core/services/integration/tracking.serv
 import { ExportLogService } from 'src/app/core/services/si/export-log/export-log.service';
 import { PaginatorService } from 'src/app/core/services/si/si-core/paginator.service';
 import { environment } from 'src/environments/environment';
-import { brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
 
 @Component({
   selector: 'app-completed-export-log',
@@ -89,6 +89,8 @@ export class CompletedExportLogComponent implements OnInit {
 
   readonly illustrationsAllowed: boolean = brandingFeatureConfig.illustrationsAllowed;
 
+  readonly brandingConfig = brandingConfig;
+
   constructor(
     private formBuilder: FormBuilder,
     private trackingService: TrackingService,

diff --git a/src/app/integrations/si/main/export-log/skip-export-log/skip-export-log.component.html b/src/app/integrations/si/main/export-log/skip-export-log/skip-export-log.component.html
@@ -29,7 +29,7 @@
                                     </div>
                                 </div>
                             </span>
-                            <i *ngIf="skipExportLogForm.controls.dateRange.value" class="pi pi-times" (click)="removeFilter(skipExportLogForm.controls.dateRange)"></i>
+                            <i *ngIf="skipExportLogForm.controls.dateRange.value" [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(skipExportLogForm.controls.dateRange)"></i>
                         </div>
                     </ng-template>
                     <ng-template let-date pTemplate="item">

diff --git a/src/app/integrations/si/main/export-log/skip-export-log/skip-export-log.component.ts b/src/app/integrations/si/main/export-log/skip-export-log/skip-export-log.component.ts
@@ -9,7 +9,7 @@ import { TrackingService } from 'src/app/core/services/integration/tracking.serv
 import { ExportLogService } from 'src/app/core/services/si/export-log/export-log.service';
 import { PaginatorService } from 'src/app/core/services/si/si-core/paginator.service';
 import { environment } from 'src/environments/environment';
-import { brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
 
 @Component({
   selector: 'app-skip-export-log',
@@ -90,6 +90,8 @@ export class SkipExportLogComponent implements OnInit {
 
   readonly illustrationsAllowed: boolean = brandingFeatureConfig.illustrationsAllowed;
 
+  readonly brandingConfig = brandingConfig;
+
   constructor(
     private formBuilder: FormBuilder,
     private trackingService: TrackingService,

diff --git a/src/app/integrations/si/main/mapping/employee-mapping/employee-mapping.component.html b/src/app/integrations/si/main/mapping/employee-mapping/employee-mapping.component.html
@@ -64,7 +64,7 @@
                             [filter]="true"
                             filterBy="value"
                             [emptyFilterMessage]="mapping.employeemapping.isOptionSearchInProgress ? 'Searching...' : 'No results found'"
-                            [dropdownIcon]="mapping.employeemapping.isOptionSearchInProgress ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down'"
+                            [dropdownIcon]="mapping.employeemapping.isOptionSearchInProgress ? 'pi pi-spinner pi-spin' : 'pi pi-chevron-down ' + brandingConfig.brandId"
                             (onFilter)="searchOptions($event, mapping.employeemapping)">
                             </p-dropdown>
                         </td>

diff --git a/...ration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html b/...ration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html
@@ -8,7 +8,7 @@
                     </div>
                     <p class="tw-text-20-px tw-font-500 tw-text-normal-text-color">{{headerText}}</p>
                 </div>
-                <i class="pi pi-times tw-cursor-pointer" style="font-size: 12px" (click)="acceptWarning(false)"></i>
+                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" class="tw-cursor-pointer" style="font-size: 12px" (click)="acceptWarning(false)"></i>
             </div>
         </div>
         <div class="tw-pl-24-px tw-pr-10-px tw-pt-16-px tw-pb-24-px">

diff --git a/...guration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.ts b/...guration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.ts
@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { brandingConfig } from 'src/app/branding/branding-config';
 import { ConfigurationWarningEvent } from 'src/app/core/models/enum/enum.model';
 import { ConfigurationWarningOut } from 'src/app/core/models/misc/configuration-warning.model';
 
@@ -23,6 +24,8 @@ export class ConfigurationConfirmationDialogComponent implements OnInit {
 
   @Output() warningAccepted = new EventEmitter<ConfigurationWarningOut>();
 
+  readonly brandingConfig = brandingConfig;
+
   constructor() { }
 
   acceptWarning(isWarningAccepted: boolean) {

diff --git a/...d/components/configuration/configuration-connector/configuration-connector.component.html b/...d/components/configuration/configuration-connector/configuration-connector.component.html
@@ -1,4 +1,4 @@
-<div class="tw-flex tw-justify-around tw-items-center">
+<div class="tw-flex tw-justify-around tw-items-center tw-h-240-px">
     <div class="tw-text-center tw-py-32-px tw-px-70-px tw-items-center">
         <h5 class="tw-text-14-px tw-text-sub-text-color tw-font-500 tw-pb-18-px">
             {{brandingConfig.brandName | uppercase}}
@@ -8,7 +8,7 @@ <h3 class="tw-text-18-px tw-text-normal-text-color tw-font-500 tw-pb-16-px">
         </h3>
     </div>
     <div>
-        <img src="assets/illustrations/vertical-divider.svg"/>
+        <img *ngIf="brandingFeatureConfig.illustrationsAllowed" src="assets/illustrations/vertical-divider.svg"/>
     </div>
     <div class="tw-py-32-px tw-px-70-px tw-items-center">
         <h5 class="tw-text-14-px tw-text-sub-text-color tw-font-500 tw-pb-16-px tw-text-center ">

diff --git a/...red/components/configuration/configuration-connector/configuration-connector.component.ts b/...red/components/configuration/configuration-connector/configuration-connector.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { brandingConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
 import { DestinationAttribute } from 'src/app/core/models/db/destination-attribute.model';
 
 @Component({
@@ -33,6 +33,8 @@ export class ConfigurationConnectorComponent implements OnInit {
 
   readonly brandingConfig = brandingConfig;
 
+  readonly brandingFeatureConfig = brandingFeatureConfig;
+
   companyName: DestinationAttribute;
 
   constructor() { }

diff --git a/...on-custom-field-creation-dialog/configuration-custom-field-creation-dialog.component.html b/...on-custom-field-creation-dialog/configuration-custom-field-creation-dialog.component.html
@@ -4,7 +4,7 @@
             <div class="tw-p-24-px tw-border-b-1-px tw-border-b-box-color">
                 <div class="tw-flex tw-justify-between tw-items-center">
                     <p class="tw-text-20-px tw-font-500">Add new Custom Field</p>
-                    <i class="pi pi-times tw-cursor-pointer tw-text-12-px" (click)="closeModel()"></i>
+                    <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" class="tw-cursor-pointer tw-text-12-px" (click)="closeModel()"></i>
                 </div>
             </div>
             <div *ngIf="existingFields.indexOf(customFieldForm.value.attribute_type?.toLowerCase()) !== -1">

diff --git a/...onents/configuration/configuration-import-field/configuration-import-field.component.html b/...onents/configuration/configuration-import-field/configuration-import-field.component.html
@@ -16,7 +16,7 @@
                     <input type="text" class="tw-text-14-px tw-text-slightly-normal-text-color !tw-font-500 tw-w-300-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-separator tw-rounded-4-px" value="{{ defaultField.destination_field | snakeCaseToSpaceCase | titlecase }}" disabled>
                 </div>
                 <div class="tw-pt-18-px">
-                    <app-svg-icon [svgSource]="'arrow-line'" [height]="'30px'" [width]="'100px'" [styleClasses]="'!tw-ml-0 tw-text-box-color tw-self-center'"></app-svg-icon>
+                    <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'30px'" [width]="'100px'" [styleClasses]="'!tw-ml-0 tw-text-box-color tw-self-center'"></app-svg-icon>
                 </div>
                 <div class="tw-w-30-vw">
                     <input type="text" class="tw-text-14-px tw-text-slightly-normal-text-color !tw-font-500 tw-w-300-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-separator tw-rounded-4-px" value="{{ defaultField.source_field | snakeCaseToSpaceCase | titlecase }}" disabled>
@@ -52,7 +52,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-faded-text-color tw-text-14-px t
             </div>
             <div class="tw-flex" [ngClass]="{'tw-pl-60-px': isDestinationFixedImport, 'tw-mt-24-px': isCloneSettingView}">
                 <div>
-                    <p-dropdown appendTo="body" [options]="accountingFieldOptions" placeholder="Choose {{appName}} field" formControlName="destination_field" dropdownIcon="pi pi-chevron-down"
+                    <p-dropdown appendTo="body" [options]="accountingFieldOptions" placeholder="Choose {{appName}} field" formControlName="destination_field" [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId"
                         optionLabel="display_name" optionValue="attribute_type" [disabled]="isDestinationFixedImport" [ngClass]="{'selectedAccItem !tw-text-slightly-normal-text-color': isDestinationFixedImport}">
                         <ng-template let-option pTemplate="item">
                             <div>
@@ -72,11 +72,11 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-faded-text-color tw-text-14-px t
                     </p>
                 </div>
                     <div class="tw-pt-18-px">
-                        <app-svg-icon [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-text-box-color tw-self-center'"></app-svg-icon>
+                        <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-text-box-color tw-self-center'"></app-svg-icon>
                     </div>
                     <div class="tw-w-28-vw">
                         <p-dropdown (onChange)="onDropdownChange($event, i)" appendTo="body" [options]="fyleFieldOptions" [placeholder]="'Choose ' + brandingConfig.brandName + ' Expense field'" formControlName="source_field"
-                        optionLabel="display_name" optionValue="attribute_type" [ngClass]="{'selectedItem': expenseField.value.source_field, 'filterDropdown': !expenseField.value.source_field}" dropdownIcon="pi pi-chevron-down">
+                        optionLabel="display_name" optionValue="attribute_type" [ngClass]="{'selectedItem': expenseField.value.source_field, 'filterDropdown': !expenseField.value.source_field}" [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId">
                             <ng-template let-option pTemplate="item">
                             <div [ngClass]="{'custom-option': option.attribute_type === 'custom_field'}" class="tw-align-middle">
                                 <div class="tw-ml-0 tw-mr-6-px ">
@@ -90,7 +90,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-faded-text-color tw-text-14-px t
                                 <span>
                                     {{ item.display_name }}
                                 </span>
-                                <i class="pi pi-times" (click)="removeFilter(expenseField)"></i>
+                                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(expenseField)"></i>
                             </div>
                             </ng-template>
                       </p-dropdown>
@@ -110,18 +110,18 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-faded-text-color tw-text-14-px t
                 <div *ngIf="form.value.isDependentImportEnabled && dependentImportFields">
                     <div *ngFor="let dependentField of dependentImportFields; index as i" class="tw-flex tw-items-strat tw-pt-4" [ngClass]="[i ? 'tw-pl-20-px' : 'tw-pl-0-px']">
                         <div class="tw-pt-2-px">
-                            <app-svg-icon [svgSource]="'line'" [width]="'21px'" [height]="'49px'" [styleClasses]="'tw-text-box-color'"></app-svg-icon>
+                            <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'line'" [width]="'21px'" [height]="'49px'" [styleClasses]="'tw-text-box-color'"></app-svg-icon>
                         </div>
                         <div>
                             <p class="tw-pl-16-px tw-mb-8-px tw-text-14-px tw-text-sub-text-color !tw-font-400">Dependent Field <app-mandatory-field></app-mandatory-field> </p>
                             <input type="text" [ngClass]="[i ? 'tw-w-240-px' : 'tw-w-260-px']" class="tw-text-14-px tw-text-slightly-normal-text-color !tw-ml-20-px !tw-font-500 !tw-h-38-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-separator tw-rounded-4-px" value="{{dependentField.source_field}}" disabled>
                         </div>
                         <div class="tw-pt-44-px">
-                            <app-svg-icon [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-text-box-color'"></app-svg-icon>
+                            <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-text-box-color'"></app-svg-icon>
                         </div>
                         <div>
                             <p class="tw-mb-8-px tw-text-14-px tw-text-sub-text-color !tw-font-400">Fyle Field <app-mandatory-field></app-mandatory-field> </p>
-                            <p-dropdown appendTo="body" class="tw-w-28-vw" [formControlName]="dependentField.formController" [options]="dependentField.options" optionLabel="attribute_type" placeholder="Select Expense Field" [disabled]="dependentField.isDisabled" dropdownIcon="pi pi-chevron-down">
+                            <p-dropdown appendTo="body" class="tw-w-28-vw" [formControlName]="dependentField.formController" [options]="dependentField.options" optionLabel="attribute_type" placeholder="Select Expense Field" [disabled]="dependentField.isDisabled" [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId">
                                 <ng-template let-option pTemplate="item">
                                     <div [ngClass]="{'custom-option': option.attribute_type === 'custom_field'}" class="tw-align-middle">
                                         <div class="tw-ml-0 tw-mr-6-px ">

diff --git a/.../configuration/configuration-schedule-export/configuration-schedule-export.component.html b/.../configuration/configuration-schedule-export/configuration-schedule-export.component.html
@@ -37,7 +37,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
                                 <span>
                                     {{ item.label }}
                                 </span>
-                                <i class="pi pi-chevron-down"></i>
+                                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-chevron-down fyle' : 'pi pi-chevron-down co']"></i>
                             </div>
                         </ng-template>
                     </p-dropdown>

diff --git a/...ts/configuration/configuration-schedule-export/configuration-schedule-export.component.ts b/...ts/configuration/configuration-schedule-export/configuration-schedule-export.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
+import { brandingConfig } from 'src/app/branding/branding-config';
 import { AppName } from 'src/app/core/models/enum/enum.model';
 import { EmailOptions } from 'src/app/core/models/qbd/qbd-configuration/advanced-setting.model';
 
@@ -36,6 +37,8 @@ export class ConfigurationScheduleExportComponent implements OnInit {
 
   @Input() isEmailPresent: boolean = false;
 
+  readonly brandingConfig = brandingConfig;
+
   constructor() { }
 
   removeFilter(formField: AbstractControl) {