feat: Refactor conditional styles in conguration componets to common …

…branding styles (#1166) * common main page padding style conversion
fylein · Jan 29, 2025 · dac3bf2 · dac3bf2
1 parent d6a7307
commit dac3bf2
Show file tree

Hide file tree

Showing 21 changed files with 70 additions and 41 deletions.
diff --git a/src/app/branding/c1-style-config.ts b/src/app/branding/c1-style-config.ts
@@ -1,15 +1,22 @@
-import { BrandingConfiguration } from "../core/models/branding/branding-configuration.model";
-import config from './config.json';
-
-export const brandingConfig: BrandingConfiguration = config as BrandingConfiguration;
-
 export const c1Styles = {
     common: {
         configurationContents: 'tw-mx-60-px tw-shadow-shadow-level-1',
         mainComponentPadding: 'tw-px-60-px',
-        mainComponentShadow: 'tw-shadow-shadow-level-1'
+        mainComponentShadow: 'tw-shadow-shadow-level-1',
+        inputLabelTextStyle: 'tw-pt-4-px',
+        configurationBrandingClass: 'co'
     },
     mapping: {
         mappingHeaderBoxShadow: 'tw-shadow-shadow-level-1'
+    },
+    configuration: {
+        importSvgPadding: 'tw-pt-16-px',
+        importFieldDependentField: 'tw-pr-24-px tw-pl-[58px]',
+        importFieldDependentFieldSvg: 'tw-pt-42-px',
+        importFieldDropDownText: '!tw-font-600 tw-text-12-px',
+        stepHeaderH3Text: 'tw-text-18-px'
+    },
+    dashboard: {
+        dashboardErrorResolveBtnText: 'p-button primary-outline'
     }
 };
diff --git a/src/app/branding/fyle-style-config.ts b/src/app/branding/fyle-style-config.ts
@@ -1,15 +1,22 @@
-import { BrandingConfiguration } from "../core/models/branding/branding-configuration.model";
-import config from './config.json';
-
-export const brandingConfig: BrandingConfiguration = config as BrandingConfiguration;
-
 export const fyleStyles = {
     common: {
         configurationContents: 'tw-mx-120-px tw-shadow-app-card',
         mainComponentPadding: 'tw-px-120-px',
-        mainComponentShadow: 'tw-shadow-app-card'
+        mainComponentShadow: 'tw-shadow-app-card',
+        inputLabelTextStyle: 'tw-pt-8-px',
+        configurationBrandingClass: 'fyle'
     },
     mapping: {
         mappingHeaderBoxShadow: 'tw-shadow-stats-box'
+    },
+    configuration: {
+        importSvgPadding: 'tw-pt-18-px',
+        importFieldDependentField: '',
+        importFieldDependentFieldSvg: 'tw-pt-46-px',
+        importFieldDropDownText: '!tw-font-400 tw-text-14-px',
+        stepHeaderH3Text: ''
+    },
+    dashboard: {
+        dashboardErrorResolveBtnText: 'p-button secondary-sm'
     }
 };
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
@@ -26,7 +26,7 @@
                         <div class="tw-flex tw-justify-between tw-items-center">
                             <h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14-px !tw-font-500">
                                 Select the accounts from {{ appName }} to import as categories in {{brandingConfig.brandName}}
-                                <p class="tw-text-text-muted" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
+                                <p class="tw-text-text-muted" [ngClass]="brandingStyle.common.inputLabelTextStyle">
                                     By default expense will be selected. Open the dropdown to select more as per your requirements.
                                 </p>
                             </h5>

diff --git a/...intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.ts b/...intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.ts
@@ -72,6 +72,7 @@ export class IntacctCompletedExportLogComponent implements OnInit {
 
   readonly brandingStyle = brandingStyle;
 
+
   constructor(
     @Inject(FormBuilder) private formBuilder: FormBuilder,
     private trackingService: TrackingService,

diff --git a/...ct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.html b/...ct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.html
@@ -26,7 +26,7 @@
                         <div class="tw-flex tw-justify-between tw-items-center">
                             <h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14-px !tw-font-500">
                                 {{brandingContent.chartOfAccountTypes}}
-                                <p class="tw-text-text-muted" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
+                                <p class="tw-text-text-muted" [ngClass]="brandingStyle.common.inputLabelTextStyle">
                                     {{brandingContent.chartOfAccountTypesSubLabel}}
                                 </p>
                             </h5>

diff --git a/src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html b/src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html
@@ -26,7 +26,7 @@
                         <div class="tw-flex tw-justify-between tw-items-center">
                             <h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14-px !tw-font-500">
                                 {{brandingContent.chartOfAccountTypes}}
-                                <p class="tw-text-text-muted" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
+                                <p class="tw-text-text-muted" [ngClass]="brandingStyle.common.inputLabelTextStyle">
                                     {{brandingContent.chartOfAccountTypesSubLabel}}
                                 </p>
                             </h5>

diff --git a/...onents/configuration/configuration-import-field/configuration-import-field.component.html b/...onents/configuration/configuration-import-field/configuration-import-field.component.html
@@ -41,7 +41,7 @@ <h4 class="tw-font-500 tw-text-14-px tw-text-text-secondary" [ngClass]="isCloneS
                             Import {{ brandingConfig.brandId === 'co' ? (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase | lowercase ) : (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase) }} from {{ uiExposedAppName }}
                             <app-optional-field *ngIf="!isAsterikAllowed"></app-optional-field>
                         </h4>
-                        <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
+                        <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [ngClass]="brandingStyle.common.inputLabelTextStyle">
                           The imported {{ brandingConfig.brandId === 'co' ? (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase | lowercase) : (getDestinationField(expenseField.get('destination_field')?.value | snakeCaseToSpaceCase) | titlecase) }} 
                           <span *ngIf="brandingConfig.brandId !== 'co'">from {{ uiExposedAppName }} will be a selectable field while creating an expense.</span>
                           <span *ngIf="brandingConfig.brandId === 'co'"> will be an available field when creating an expense.</span>
@@ -74,7 +74,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
                         {{uiExposedAppName}} Fields should be unique
                     </p>
                 </div>
-                    <div [ngClass]="{'tw-pt-16-px': brandingConfig.brandId === 'co', 'tw-pt-18-px': brandingConfig.brandId !== 'co'}">
+                    <div [ngClass]="brandingStyle.configuration.importSvgPadding">
                         <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-self-center tw-text-border-secondary'"></app-svg-icon>
                     </div>
                     <div class="xl:tw-w-30-vw sm:tw-w-28-vw">
@@ -101,8 +101,8 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
                     </div>
                 <p-inputSwitch *ngIf="!isDestinationFixedImport" (onChange)="onSwitchChanged($event, expenseField)" [pTooltip]="isExpenseFieldDependent(expenseField.value) ? 'You cannot import dependent fields' : '' " (click)="updateDependentField(expenseField.get('source_field')?.value,expenseField.get('import_to_fyle')?.value)" formControlName="import_to_fyle" class="input-toggle-section tw-pl-4-px tw-pt-10-px"></p-inputSwitch>
             </div>
-            <div class="tw-pt-26-px" [ngClass]="{'tw-pr-24-px tw-pl-[58px]': brandingConfig.brandId === 'co'}" *ngIf="brandingFeatureConfig.featureFlags.importSettings.dependentField && expenseField.get('source_field')?.value==='PROJECT' && expenseField.get('import_to_fyle')?.value && expenseField.get('destination_field')?.value === dependentDestinationValue" [formGroup]="form">
-                <div class="tw-flex" [ngClass]="{'fyle': brandingConfig.brandId !== 'co', 'co': brandingConfig.brandId === 'co'}">
+            <div class="tw-pt-26-px" [ngClass]="brandingStyle.configuration.importFieldDependentField" *ngIf="brandingFeatureConfig.featureFlags.importSettings.dependentField && expenseField.get('source_field')?.value==='PROJECT' && expenseField.get('import_to_fyle')?.value && expenseField.get('destination_field')?.value === dependentDestinationValue" [formGroup]="form">
+                <div class="tw-flex" [ngClass]="brandingStyle.common.configurationBrandingClass">
                     <label class="container tw-pl-24-px tw-text-14-px tw-text-form-label-text-color">{{helper.sentenseCaseConversion('Import Cost Code and Cost Type from ')}} {{uiExposedAppName}} as dependent fields.
                         <a *ngIf="uiExposedAppName === AppName.SAGE300" class="tw-text-link-primary tw-w-fit tw-cursor-pointer tw-inline-flex tw-items-center"
                             (click)="windowService.openInNewTab(dependantFieldSupportArticleLink)">
@@ -122,14 +122,14 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
                                 <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'Line'" [width]="'21px'" [height]="'49px'" [styleClasses]="'tw-text-border-secondary'"></app-svg-icon>
                             </div>
                             <div class="tw-pl-20-px">
-                                <p class="tw-mb-8-px tw-text-form-label-text-color" [ngClass]="{'!tw-font-400 tw-text-14-px': brandingConfig.brandId !== 'co', '!tw-font-600 tw-text-12-px': brandingConfig.brandId === 'co'}">{{helper.sentenseCaseConversion('Dependent Field')}}<app-mandatory-field></app-mandatory-field> </p>
+                                <p class="tw-mb-8-px tw-text-form-label-text-color" [ngClass]="brandingStyle.configuration.importFieldDropDownText">{{helper.sentenseCaseConversion('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-input-read-only-text !tw-font-500 !tw-h-38-px !tw-px-14-px !tw-py-10-px tw-border tw-border-solid !tw-border-input-read-only-border tw-rounded-4-px" value="{{helper.sentenseCaseConversion(dependentField.source_field)}}" disabled>
                             </div>
-                            <div [ngClass]="{'tw-pt-46-px': brandingConfig.brandId !== 'co', 'tw-pt-42-px': brandingConfig.brandId === 'co'}">
+                            <div [ngClass]="brandingStyle.configuration.importFieldDependentFieldSvg">
                                 <app-svg-icon [isTextColorAllowed]="true" [svgSource]="'arrow-line'" [height]="'10px'" [width]="'100px'" [styleClasses]="'tw-text-border-secondary'"></app-svg-icon>
                             </div>
                             <div>
-                                <p class="tw-mb-8-px tw-text-form-label-text-color" [ngClass]="{'!tw-font-400 tw-text-14-px': brandingConfig.brandId !== 'co', '!tw-font-600 tw-text-12-px': brandingConfig.brandId === 'co'}">{{brandingConfig.brandName}} {{brandingConfig.brandId === 'co' ? 'field' : 'Field'}} <app-mandatory-field></app-mandatory-field> </p>
+                                <p class="tw-mb-8-px tw-text-form-label-text-color" [ngClass]="brandingStyle.configuration.importFieldDropDownText">{{brandingConfig.brandName}} {{brandingConfig.brandId === 'co' ? 'field' : '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]="helper.sentenseCaseConversion('Select Expense 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">
@@ -144,7 +144,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px !tw-fon
                         </div>
                         <p-inputSwitch class="input-toggle-section tw-pt-24-px" formControlName="dependentFieldImportToggle"></p-inputSwitch>
                     </div>
-                    <div *ngIf="uiExposedAppName === AppName.SAGE300" class="tw-flex tw-mt-24-px" [ngClass]="{'fyle': brandingConfig.brandId !== 'co', 'co': brandingConfig.brandId === 'co'}">
+                    <div *ngIf="uiExposedAppName === AppName.SAGE300" class="tw-flex tw-mt-24-px" [ngClass]="brandingStyle.common.configurationBrandingClass">
                         <label class="container tw-pl-24-px tw-text-14-px tw-text-form-label-text-color">Auto-Export Commitment based on the Cost Code and Cost Category.
                             <a class="tw-text-link-primary tw-w-fit tw-cursor-pointer tw-inline-flex tw-items-center"
                                 (click)="windowService.openInNewTab(commitmentFieldSupportArticleLink)">

diff --git a/...mponents/configuration/configuration-import-field/configuration-import-field.component.ts b/...mponents/configuration/configuration-import-field/configuration-import-field.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AbstractControl, FormArray, FormGroup, Validators } from '@angular/forms';
-import { brandingConfig, brandingContent, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingStyle } from 'src/app/branding/branding-config';
 import { ImportDefaultField, ImportSettingMappingRow, ImportSettingsCustomFieldRow, ImportSettingsModel } from 'src/app/core/models/common/import-settings.model';
 import { FyleField, IntegrationField } from 'src/app/core/models/db/mapping.model';
 import { AppName, MappingSourceField, Sage300Field, XeroFyleField } from 'src/app/core/models/enum/enum.model';
@@ -110,6 +110,8 @@ export class ConfigurationImportFieldComponent implements OnInit {
 
   readonly brandingXeroContent = brandingContent.xero.configuration.importSetting.toggleToastMessage;
 
+  readonly brandingStyle = brandingStyle;
+
   @Output() xeroProjectMapping:EventEmitter<boolean> = new EventEmitter();
 
   constructor(

diff --git a/...onents/configuration/configuration-multi-select/configuration-multi-select.component.html b/...onents/configuration/configuration-multi-select/configuration-multi-select.component.html
@@ -5,7 +5,7 @@
         </div>
         <div>
             <h5 class="tw-text-text-secondary tw-text-14-px !tw-font-500">{{ label }}<app-mandatory-field *ngIf="isFieldMandatory"></app-mandatory-field></h5>
-            <h5 class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [innerHTML]="subLabel" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}"></h5>
+            <h5 class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [innerHTML]="subLabel" [ngClass]="brandingStyle.common.inputLabelTextStyle"></h5>
         </div>
     </div>
     <div class="tw-pl-34-px">

diff --git a/...mponents/configuration/configuration-multi-select/configuration-multi-select.component.ts b/...mponents/configuration/configuration-multi-select/configuration-multi-select.component.ts
@@ -1,7 +1,7 @@
 import { TitleCasePipe } from '@angular/common';
 import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { brandingConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingStyle } from 'src/app/branding/branding-config';
 import { SnakeCaseToSpaceCasePipe } from 'src/app/shared/pipes/snake-case-to-space-case.pipe';
 
 @Component({
@@ -43,6 +43,8 @@ export class ConfigurationMultiSelectComponent implements OnInit {
 
   readonly brandingConfig = brandingConfig;
 
+  readonly brandingStyle = brandingStyle;
+
   constructor(
     @Inject(FormBuilder) private formBuilder: FormBuilder
   ) { }

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-text-muted tw-text-14-px tw-pt-8-px !tw-font-400 !tw-leading
                                 <span>
                                     {{ item.label }}
                                 </span>
-                                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-chevron-down fyle' : 'pi pi-chevron-down co']"></i>
+                                <i class="pi pi-chevron-down" [ngClass]="brandingStyle.common.configurationBrandingClass"></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,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormGroup } from '@angular/forms';
-import { brandingConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingStyle } from 'src/app/branding/branding-config';
 import { AppName } from 'src/app/core/models/enum/enum.model';
 import { QBDEmailOptions } from 'src/app/core/models/qbd/qbd-configuration/qbd-advanced-setting.model';
 
@@ -39,6 +39,8 @@ export class ConfigurationScheduleExportComponent implements OnInit {
 
   readonly brandingConfig = brandingConfig;
 
+  readonly brandingStyle = brandingStyle;
+
   constructor() { }
 
   removeFilter(formField: AbstractControl) {

diff --git a/...onents/configuration/configuration-select-field/configuration-select-field.component.html b/...onents/configuration/configuration-select-field/configuration-select-field.component.html
@@ -7,8 +7,8 @@
 
             <div>
                 <h5 class="tw-text-text-secondary tw-text-14-px !tw-font-500">{{ label | snakeCaseToSpaceCase}}<app-mandatory-field *ngIf="isFieldMandatory"></app-mandatory-field></h5>
-                <h5 *ngIf="!(exportConfigurationIconPath && appName === AppName.TRAVELPERK ) && (subLabel !== undefined|| (formControllerName !== 'reimbursableExportType' && formControllerName!=='cccExportType' && formControllerName !== 'creditCardExportType'))" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4 tw-max-w-600-px tw-text-pretty" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}" [innerHTML]="subLabel"></h5>
-                <h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerName === 'cccExportType' || formControllerName === 'creditCardExportType') && appName !== AppName.QBO && subLabel === undefined && !(formControllerName === 'cccExportType' && brandingConfig.brandId === 'co' && exportConfigurationIconPath && appName === AppName.INTACCT)" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
+                <h5 *ngIf="!(exportConfigurationIconPath && appName === AppName.TRAVELPERK ) && (subLabel !== undefined|| (formControllerName !== 'reimbursableExportType' && formControllerName!=='cccExportType' && formControllerName !== 'creditCardExportType'))" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4 tw-max-w-600-px tw-text-pretty" [ngClass]="brandingStyle.common.inputLabelTextStyle" [innerHTML]="subLabel"></h5>
+                <h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerName === 'cccExportType' || formControllerName === 'creditCardExportType') && appName !== AppName.QBO && subLabel === undefined && !(formControllerName === 'cccExportType' && brandingConfig.brandId === 'co' && exportConfigurationIconPath && appName === AppName.INTACCT)" class="!tw-text-text-muted tw-text-14-px !tw-font-400 !tw-leading-4" [ngClass]="brandingStyle.common.inputLabelTextStyle">
                     Choose the type of transaction record that you would like to create in {{ uiExposedAppName }} while exporting expenses from {{brandingConfig.brandName}}. <span *ngIf="exportConfigurationIconPath && appName === AppName.INTACCT">Click<a (click)="showExportTable()" class="tw-cursor-pointer tw-text-link-primary"> here</a> for more details.</span>
                 </h5>
                 <h5 *ngIf="subLabel && (exportConfigurationIconPath && appName === AppName.TRAVELPERK)" class="!tw-text-text-muted tw-text-14-px tw-pt-8-px !tw-font-400 !tw-leading-4 tw-max-w-600-px tw-text-pretty" >{{subLabel}}<span class="tw-pl-4-px">Click<a (click)="showExportTable()" class="tw-cursor-pointer tw-text-link-primary"> here</a> for Preview</span></h5>