Stashed Changes Configuration Select Field (#470)

Stashed Configuration Select Field
fylein · Jan 29, 2024 · 84e1749 · 84e1749
1 parent 469b653
commit 84e1749
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 6 deletions.
diff --git a/...l-shared/business-central-export-settings/business-central-export-settings.component.html b/...l-shared/business-central-export-settings/business-central-export-settings.component.html
@@ -37,6 +37,7 @@
                             [formControllerName]="'reimbursableExportType'"
                             [appName]="appName"
                             [exportTypeIconPathArray]="previewImagePaths"
+                            [showExportPreview]="true"
                             [isDisabled]="false">
                         </app-configuration-select-field>
                     </div>
@@ -163,6 +164,7 @@
                             [formControllerName]="'cccExportType'"
                             [appName]="appName"
                             [exportConfigurationIconPath]="'assets/flow-charts/intacct-export-module.svg'"
+                            [showExportPreview]="true"
                             [exportTypeIconPathArray]="previewImagePaths">
                         </app-configuration-select-field>
                     </div>

diff --git a/src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html b/src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html
@@ -35,6 +35,7 @@
                                 [placeholder]="'Choose the type of transaction in QuickBooks Online to export your ' + brandingConfig.brandName +' expenses'"
                                 [formControllerName]="'reimbursableExportType'"
                                 [appName]="appName"
+                                [showExportPreview]="true"
                                 [exportTypeIconPathArray]="previewImagePaths">
                             </app-configuration-select-field>
 
@@ -153,6 +154,7 @@
                             [placeholder]="'Select expense export type'"
                             [formControllerName]="'creditCardExportType'"
                             [appName]="appName"
+                            [showExportPreview]="true"
                             [exportTypeIconPathArray]="previewImagePaths">
                         </app-configuration-select-field>
 

diff --git a/...ons/sage300/sage300-shared/sage300-export-settings/sage300-export-settings.component.html b/...ons/sage300/sage300-shared/sage300-export-settings/sage300-export-settings.component.html
@@ -39,6 +39,7 @@
                             [exportConfigurationIconPath]="'assets/flow-charts/intacct-export-module.svg'"
                             [exportTypeIconPathArray]="previewImagePaths"
                             [appName]="appName"
+                            [showExportPreview]="true"
                             [isDisabled]="true">
                         </app-configuration-select-field>
                         <div *ngIf="exportSettingForm?.value.reimbursableExportType===Sage300ExportType.DIRECT_COST">
@@ -148,6 +149,7 @@
                             [exportConfigurationIconPath]="'assets/flow-charts/intacct-export-module.svg'"
                             [exportTypeIconPathArray]="previewImagePaths"
                             [appName]="appName"
+                            [showExportPreview]="true"
                             [isDisabled]="true">
                         </app-configuration-select-field>
                         <div *ngIf="exportSettingForm.value.cccExportType===Sage300ExportType.DIRECT_COST">

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,9 +7,9 @@
 
             <div>
                 <h5 class="tw-text-slightly-normal-text-color tw-text-14-px !tw-font-500">{{ label | snakeCaseToSpaceCase}}<app-mandatory-field *ngIf="isFieldMandatory"></app-mandatory-field></h5>
-                <h5 *ngIf="subLabel || (formControllerName !== 'reimbursableExportType' && formControllerName!=='cccExportType' && formControllerName !== 'creditCardExportType')" class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-leading-4" [innerHTML]="subLabel"></h5>
-                <h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerName === 'cccExportType' || formControllerName === 'creditCardExportType') && appName !== AppName.SAGE300 && appName !== AppName.QBO" class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-leading-4">
-                    Choose the type of transaction record that you would like to create in {{ appName }} while exporting expenses from {{brandingConfig.brandName}}. <span *ngIf="exportTypeIconPath">Click<a (click)="showExportTable()" class="tw-cursor-pointer tw-text-hyperlink-color"> here</a> for more detailsss.</span>
+                <h5 *ngIf="subLabel || (formControllerName !== 'reimbursableExportType' && formControllerName!=='cccExportType' && formControllerName !== 'creditCardExportType')" class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-leading-4 tw-max-w-600-px tw-text-pretty" [innerHTML]="subLabel"></h5>
+                <h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerName === 'cccExportType' || formControllerName === 'creditCardExportType') && appName !== AppName.QBO" class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-leading-4">
+                    Choose the type of transaction record that you would like to create in {{ appName }} while exporting expenses from {{brandingConfig.brandName}}. <span *ngIf="exportTypeIconPath && appName === AppName.INTACCT">Click<a (click)="showExportTable()" class="tw-cursor-pointer tw-text-hyperlink-color"> here</a> for more details.</span>
                 </h5>
             </div>
         </div>
@@ -35,7 +35,7 @@ <h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerNam
                         'normal-box': !(form.controls[formControllerName].invalid && isFieldMandatory && form.controls[formControllerName].touched),
                         'selectedItem': form.controls[formControllerName].value,
                         'filterDropdown': !form.controls[formControllerName].value,
-                        'showClearIcon': showClearIcon && !isDisabled
+                        'showClearIcon': showClearIcon && !isDisabled && form.controls[formControllerName].value
                     }" [disabled]="isDisabled"
                     >
                     <ng-template let-option pTemplate="item">
@@ -54,11 +54,14 @@ <h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerNam
                         </div>
                     </ng-template>
                 </p-dropdown>
-                    <div *ngIf="['JOURNAL_ENTRY', 'EXPENSE_REPORT', 'BILL', 'CHARGE_CARD_TRANSACTION', 'PURCHASE_INVOICE', 'DIRECT_COST', 'EXPENSE', 'JOURNAL ENTRY', 'CHECK', 'CREDIT CARD PURCHASE', 'DEBIT CARD EXPENSE'].includes(form.controls[formControllerName].value)" class="sub-text tw-pt-3-px">
+                    <div *ngIf="showExportPreview" class="sub-text tw-text-pretty tw-pt-3-px">
                         <span>Click </span>
                         <a class="tw-text-hyperlink-color !tw-cursor-pointer" (click)="showExportPreviewDialog(form.controls[formControllerName].value)">here</a>
                         <span> to preview how it looks on {{appName}}</span>
                     </div>
+                    <div *ngIf="!showExportPreview && isDisabled" class="sub-text tw-text-pretty tw-pt-3-px">
+                        <span>Auto-selected based on your export module</span>
+                    </div>
                     <div *ngIf="form.controls[formControllerName].value==='spent_at' && isOnboarding" class="sub-text">
                         <span>Using the Spend Date may lead to multiple single line<br>item entries.</span>
                     </div>

diff --git a/...mponents/configuration/configuration-select-field/configuration-select-field.component.ts b/...mponents/configuration/configuration-select-field/configuration-select-field.component.ts
@@ -66,6 +66,8 @@ export class ConfigurationSelectFieldComponent implements OnInit {
 
   @Input() optionLabel: string = 'value';
 
+  @Input() showExportPreview: boolean = false;
+
   @Output() searchOptionsDropdown: EventEmitter<ExportSettingOptionSearch> = new EventEmitter<ExportSettingOptionSearch>();
 
   exportTypeIconPath: string;

diff --git a/...mponents/configuration/configuration-step-header/configuration-step-header.component.html b/...mponents/configuration/configuration-step-header/configuration-step-header.component.html
@@ -4,7 +4,7 @@
           <h3 class="tw-text-normal-text-color tw-text-18-px tw-font-500">
             {{ headerText }}
           </h3>
-          <h5 class="tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400">
+          <h5 class="tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 tw-max-w-600-px tw-text-pretty">
             {{ contentText }}
             <a *ngIf="redirectLink"
               class="tw-text-hyperlink-color tw-pl-4-px tw-w-fit tw-cursor-pointer"

diff --git a/.../configuration/configuration-export-settings/configuration-export-settings.component.html b/.../configuration/configuration-export-settings/configuration-export-settings.component.html
@@ -35,6 +35,7 @@
                             [formControllerName]="'reimbursableExportType'"
                             [appName]="appName"
                             [exportConfigurationIconPath]="'assets/flow-charts/intacct-export-module.svg'"
+                            [showExportPreview]="true"
                             [exportTypeIconPathArray]="previewImagePaths">
                         </app-configuration-select-field>
                             <div *ngIf="exportSettingsForm.value.reimbursableExportType===IntacctReimbursableExpensesObject.JOURNAL_ENTRY">
@@ -143,6 +144,7 @@
                         [placeholder]="'Select expense export module'"
                         [formControllerName]="'cccExportType'"
                         [exportConfigurationIconPath]="'assets/illustrations/sageIntacct/cccExportTypeTable.svg'"
+                        [showExportPreview]="true"
                         [exportTypeIconPathArray]="previewImagePaths"></app-configuration-select-field>
                         <div *ngIf="exportSettingsForm.value.cccExportType===CorporateCreditCardExpensesObject.EXPENSE_REPORT">
                             <app-configuration-select-field