Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: qbd direct import settings onboarding changes and content changes #1083

Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/app/branding/fyle-contents-config.ts
Original file line number Diff line number Diff line change
@@ -66,11 +66,11 @@ export const fyleContents = {
stepName: 'Import Settings',
headerText: '',
contentText: 'In this section, you can choose the fields required to be imported from QuickBooks Desktop to ' + brandingConfig.brandName + '. ',
importCategoriesLabel: 'Import the Chart of Accounts as Categories in ' + brandingConfig.brandName,
importCategoriesSubLabel: 'Imported account will be available as Categories in ' + brandingConfig.brandName + '.',
importCategoriesLabel: 'Import Chart of Accounts as Categories in ' + brandingConfig.brandName,
importCategoriesSubLabel: 'Chart of Accounts in QuickBooks will be imported as Categories in Fyle, available in a dropdown for employees to select when coding expenses.',
importItemsLabel: 'Import Products/Services from QuickBooks Desktop',
importItemsSubLabel: 'Products/services from QuickBooks Desktop will be imported as Categories in ' + brandingConfig.brandName + '.',
importVendorsAsMerchantsLabel: 'Import Vendors from QuickBooks Desktop',
importVendorsAsMerchantsLabel: 'Import Vendors as Merchants in Fyle',
chartOfAccountTypes: 'Select the accounts from QuickBooks Desktop to import as categories in ' + brandingConfig.brandName,
chartOfAccountTypesSubLabel: 'By default expense will be selected. Open the dropdown to select more as per your requirements.'
},
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
<p>qbd-direct-onboarding-import-settings works!</p>
<div class="tw-pb-48-px">
<div>
<app-onboarding-steppers [onboardingSteps]="onboardingSteps"></app-onboarding-steppers>
</div>
<div>
<app-qbd-direct-import-settings></app-qbd-direct-import-settings>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -1,12 +1,31 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { SharedModule } from 'src/app/shared/shared.module';
import { QbdDirectSharedModule } from '../../qbd-direct-shared/qbd-direct-shared.module';
import { QbdDirectOnboardingModel } from 'src/app/core/models/qbd-direct/qbd-direct-configuration/qbd-direct-onboarding.model';
import { brandingContent } from 'src/app/branding/branding-config';
import { OnboardingStepper } from 'src/app/core/models/misc/onboarding-stepper.model';
import { WorkspaceService } from 'src/app/core/services/common/workspace.service';

@Component({
selector: 'app-qbd-direct-onboarding-import-settings',
standalone: true,
imports: [],
imports: [QbdDirectSharedModule, SharedModule, CommonModule],
templateUrl: './qbd-direct-onboarding-import-settings.component.html',
styleUrl: './qbd-direct-onboarding-import-settings.component.scss'
})
export class QbdDirectOnboardingImportSettingsComponent {
export class QbdDirectOnboardingImportSettingsComponent implements OnInit {

brandingContent = brandingContent.configuration.importSetting;

onboardingSteps: OnboardingStepper[] = new QbdDirectOnboardingModel().getOnboardingSteps(this.brandingContent.stepName, this.workspaceService.getOnboardingState());

Comment on lines +19 to +21
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Move service-dependent initialization to ngOnInit

The initialization of onboardingSteps in the property declaration is using an injected service, which is an anti-pattern in Angular. This could cause issues during testing and potential race conditions.

Move the initialization to ngOnInit:

-  onboardingSteps: OnboardingStepper[] = new QbdDirectOnboardingModel().getOnboardingSteps(this.brandingContent.stepName, this.workspaceService.getOnboardingState());
+  onboardingSteps: OnboardingStepper[];
+
+  ngOnInit(): void {
+    this.onboardingSteps = new QbdDirectOnboardingModel().getOnboardingSteps(
+      this.brandingContent.stepName,
+      this.workspaceService.getOnboardingState()
+    );
+  }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
brandingContent = brandingContent.configuration.importSetting;
onboardingSteps: OnboardingStepper[] = new QbdDirectOnboardingModel().getOnboardingSteps(this.brandingContent.stepName, this.workspaceService.getOnboardingState());
brandingContent = brandingContent.configuration.importSetting;
onboardingSteps: OnboardingStepper[];
ngOnInit(): void {
this.onboardingSteps = new QbdDirectOnboardingModel().getOnboardingSteps(
this.brandingContent.stepName,
this.workspaceService.getOnboardingState()
);
}

constructor(
private workspaceService: WorkspaceService
) { }

ngOnInit(): void {
}


}
Original file line number Diff line number Diff line change
@@ -65,7 +65,7 @@ <h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14
<app-configuration-toggle-field
[form]="importSettingForm"
[label]="brandingContent.importVendorsAsMerchantsLabel"
[subLabel]="'Vendors from QuickBooks Online will be imported as merchants in ' + brandingConfig.brandName + ' and will be a selectable field while creating an expense.'"
[subLabel]="'Vendors in QuickBooks will be imported as Merchants in Fyle, available in a dropdown for employees to select when coding expenses.'"
[formControllerName]="'importVendorsAsMerchants'"
[iconPath]="'arrow-tail-down'">
</app-configuration-toggle-field>
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import { QbdDirectDownloadFileComponent } from './qbd-direct-download-file/qbd-d
import { QbdDirectSetupConnectionComponent } from './qbd-direct-setup-connection/qbd-direct-setup-connection.component';
import { QbdDirectDataSyncComponent } from './qbd-direct-data-sync/qbd-direct-data-sync.component';
import { QbdDirectExportSettingsComponent } from './qbd-direct-export-settings/qbd-direct-export-settings.component';
import { QbdDirectImportSettingsComponent } from './qbd-direct-import-settings/qbd-direct-import-settings.component';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Component exists and follows Angular conventions

The QbdDirectImportSettingsComponent exists at the correct relative path and follows proper Angular component structure with appropriate decorators, selector, and metadata. However, I notice it's marked as standalone: true, which means it shouldn't be declared in NgModules. The shared module should use imports array instead of both imports and declarations.

🔗 Analysis chain

Verify the imported component exists

The import statement follows Angular conventions, but let's verify the component exists at the specified path.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify QbdDirectImportSettingsComponent exists and follows Angular component structure

# Check if the component file exists
fd "qbd-direct-import-settings.component.ts" 

# Verify component structure
ast-grep --pattern 'class QbdDirectImportSettingsComponent {
  $$$
}'

Length of output: 233


Script:

#!/bin/bash
# Let's verify the component's structure and decorators
rg -A 5 "@Component" src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.ts

Length of output: 396


@NgModule({
declarations: [],
@@ -14,13 +15,15 @@ import { QbdDirectExportSettingsComponent } from './qbd-direct-export-settings/q
QbdDirectDownloadFileComponent,
QbdDirectSetupConnectionComponent,
QbdDirectDataSyncComponent,
QbdDirectExportSettingsComponent
QbdDirectExportSettingsComponent,
QbdDirectImportSettingsComponent
Comment on lines +18 to +19
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Components are incorrectly configured in the shared module

The verification revealed that the components are incorrectly placed in the imports array instead of the declarations array of the shared module. Components should be declared in declarations array and then exported via exports array. The current configuration won't work as expected since Angular components cannot be imported directly.

  • Move QbdDirectExportSettingsComponent and QbdDirectImportSettingsComponent from imports to declarations array in src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-shared.module.ts
  • The same applies to other components currently in the imports array: QbdDirectDownloadFileComponent, QbdDirectSetupConnectionComponent, and QbdDirectDataSyncComponent
🔗 Analysis chain

LGTM! Module configuration follows best practices

The changes correctly:

  • Add the component to both imports and exports arrays
  • Follow the shared module pattern for component reusability
  • Maintain consistency with existing component configuration

Also applies to: 25-26


Let me verify the module configuration by checking the actual declarations in the routing and shared modules.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the component usage across the application

# Find where the shared module is imported
rg -l "QbdDirectSharedModule" 

# Find direct usage of the component
rg -l "QbdDirectImportSettingsComponent"

Length of output: 855


Script:

#!/bin/bash
# Check the component declarations in shared module
rg -A 10 "declarations:" src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-shared.module.ts

# Check the component usage in routing module
rg -A 10 "const routes" src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-configuration/qbd-direct-configuration-routing.module.ts

# Check if component is used in templates
rg "<qbd-direct-import-settings" 
rg "<qbd-direct-export-settings"

Length of output: 833

],
exports: [
QbdDirectDownloadFileComponent,
QbdDirectSetupConnectionComponent,
QbdDirectDataSyncComponent,
QbdDirectExportSettingsComponent
QbdDirectExportSettingsComponent,
QbdDirectImportSettingsComponent
]
})
export class QbdDirectSharedModule { }