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

feat: qbd connector setup UI changes #1060

Merged

Conversation

DhaaraniCIT
Copy link
Contributor

@DhaaraniCIT DhaaraniCIT commented Nov 6, 2024

Description

feat: qbd connector setup UI changes

Clickup

https://app.clickup.com/t/86cwzcemx

Screenshot 2024-11-06 at 2 47 14 PM Screenshot 2024-11-06 at 2 48 41 PM Screenshot 2024-11-06 at 2 49 36 PM Screenshot 2024-11-06 at 2 50 43 PM

Summary by CodeRabbit

Release Notes

  • New Features

    • Introduced new components for onboarding and data synchronization, enhancing user interaction.
    • Added a new enumeration for connection statuses to improve error handling.
  • Improvements

    • Enhanced the layout and functionality of onboarding components, including better loading states and user feedback mechanisms.
    • Improved the visibility toggle for passwords and added instructional content for users.
  • Bug Fixes

    • Corrected enum member names for consistency across the application.
  • Style Updates

    • Updated CSS for improved visual presentation and user experience across various components.
  • Chores

    • Updated internal method names and types for better clarity and consistency in event handling.

Copy link
Contributor

coderabbitai bot commented Nov 6, 2024

Caution

Review failed

The pull request is closed.

Walkthrough

The pull request introduces several changes across multiple files, primarily focusing on type renaming, the addition of new enums and types, and enhancements to various components related to the QBD Direct onboarding process. Key modifications include renaming the checkBoxEmit type to CheckBoxUpdate, adding a new enum QBDConnectionStatus, and improving the structure and functionality of several components, including the onboarding connector and data sync components. The changes also involve updates to HTML templates, CSS styles, and the introduction of new methods and properties to enhance user interaction and data handling.

Changes

File Change Summary
src/app/core/models/common/helper.model.ts Type renamed from checkBoxEmit to CheckBoxUpdate.
src/app/core/models/enum/enum.model.ts Added enum QBDConnectionStatus and corrected member name from IN_CORRECT_PASSWORD to INCORRECT_PASSWORD.
src/app/core/models/qbd-direct/qbd-direct-configuration/qbd-direct-connector.model.ts Added new type SyncDataType and reformatted existing type QBDPrerequisiteObject.
src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.html Major structural changes to the onboarding connector, adding new components and conditional rendering.
src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.html Updated event handler for checkBoxUpdated to call updateConnectorStatus.
src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.ts Renamed method from qbdWebConnectorStatus to updateConnectorStatus and simplified constructor.
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.html Enhanced layout for data synchronization, including dynamic field generation and loading states.
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.scss Added .spin-icon class for rotation animation.
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.ts Implemented OnInit interface and added new input/output properties for enhanced interactivity.
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.ts Added new output event emitters for user interactions.
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html Updated layout with new components and conditional rendering for setup instructions.
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts Added new input/output properties and methods for handling user actions.
src/app/integrations/qbd-direct/qbd-direct.component.ts Updated navigation logic for onboarding state paths.
src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html Conditional rendering based on appName with different icons/messages.
src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.ts Added new input properties for enhanced configurability.
src/app/shared/components/input/checkbox-button/checkbox-button.component.ts Updated output event emitter type from checkBoxEvent to CheckBoxUpdate.

Possibly related PRs

Suggested labels

deploy

Suggested reviewers

  • DhaaraniCIT

🐇 In the code we hop and play,
Types and enums lead the way.
With components bright and new,
Onboarding's fun, it's true!
So let’s sync and set up right,
QBD's journey is a delight! 🌟

Warning

Rate limit exceeded

@ashwin1111 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 21 minutes and 38 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between b79c940 and d4c7494.


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added the size/M Medium PR label Nov 6, 2024
@@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
Copy link
Contributor

Choose a reason for hiding this comment

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

pls add new icon in svg component too and add relevant c1 icon as well

@@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
Copy link
Contributor

Choose a reason for hiding this comment

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

pls add new icon in svg component too and add relevant c1 icon as well

* feat: Qbd direct connection data sync UI changes

* input made required
@github-actions github-actions bot added size/L Large PR and removed size/M Medium PR labels Nov 11, 2024
Copy link
Contributor

Choose a reason for hiding this comment

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

texted over slack

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes (#1063)

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes (#1064)

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes (#1065)

* PR comment fix

* PR comment fix
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 10

🧹 Outside diff range and nitpick comments (22)
src/app/shared/components/configuration/configuration-info-label/configuration-info-label.component.html (1)

3-5: Consider enhancing accessibility for the info icon.

The info icon could benefit from additional accessibility attributes to improve screen reader support.

 <div *ngIf="showIcon">
-    <app-svg-icon [svgSource]="'info-circle-fill-medium'" [width]="'20px'" [height]="'20px'" [styleClasses]="'tw-text-info'"></app-svg-icon>
+    <app-svg-icon 
+        [svgSource]="'info-circle-fill-medium'" 
+        [width]="'20px'" 
+        [height]="'20px'" 
+        [styleClasses]="'tw-text-info'"
+        role="img"
+        aria-label="Information">
+    </app-svg-icon>
 </div>
src/app/shared/components/configuration/configuration-info-label/configuration-info-label.component.ts (1)

12-12: LGTM! Consider adding JSDoc for the new input property.

The new input property follows Angular best practices and maintains backward compatibility with its default value. To improve maintainability, consider adding JSDoc documentation.

+  /**
+   * Controls the visibility of the info icon
+   * @default true
+   */
   @Input() showIcon: boolean = true;
src/app/core/models/common/helper.model.ts (2)

Line range hint 17-19: Consider addressing the "temporary hack" comment

The comment indicates this is a temporary solution. Let's properly track and address this technical debt.

Would you like me to create a GitHub issue to track the removal of this temporary hack and propose a more maintainable solution?


Line range hint 17-19: Refactor the complex conditional for better maintainability

The long conditional checking multiple field names could be simplified for better readability and maintenance.

Consider refactoring like this:

-        if (controllerName !== 'accountsPayable' && controllerName !== 'defaultCCCAccount' && controllerName !== 'bankAccount' && controllerName !== 'creditCardAccount' && controllerName !== 'defaultCreditCardVendor' && controllerName !== 'nameInJournalEntry' && controllerName !== 'exportScheduleFrequency') {
+        const preserveValueFields = [
+            'accountsPayable',
+            'defaultCCCAccount',
+            'bankAccount',
+            'creditCardAccount',
+            'defaultCreditCardVendor',
+            'nameInJournalEntry',
+            'exportScheduleFrequency'
+        ];
+        
+        if (!preserveValueFields.includes(controllerName)) {
             form.controls[controllerName].setValue(null);
         }
src/app/shared/components/input/chechbox-button/chechbox-button.component.ts (1)

Line range hint 1-33: Fix typo in component name and related files

The word "Checkbox" is misspelled as "Chechbox" throughout the component. Consider fixing this spelling for better maintainability and consistency.

This would involve:

  1. Renaming the component file from chechbox-button to checkbox-button
  2. Updating the component selector from app-chechbox-button to app-checkbox-button
  3. Updating the class name from ChechboxButtonComponent to CheckboxButtonComponent
  4. Updating any references to this component in other files

Would you like me to help create a follow-up issue to track these changes?

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.ts (3)

14-15: Consider adding lifecycle interface documentation

Adding a brief comment describing the component's lifecycle responsibilities would improve maintainability.

+/**
+ * QBD Direct Data Sync Component
+ * Handles the synchronization UI for QuickBooks Desktop integration
+ * Lifecycle: Initializes field length on component initialization
+ */
 export class QbdDirectDataSyncComponent implements OnInit {

16-20: Add type safety to EventEmitter

The continueClick EventEmitter should specify its emission type for better type safety.

-@Output() continueClick = new EventEmitter();
+@Output() continueClick = new EventEmitter<void>();

30-32: Improve type safety of getKeys method

The getKeys method uses any type which could be more specific. Consider using a generic type parameter.

-getKeys(obj: any): string[] {
+getKeys<T extends object>(obj: T): Array<keyof T> {
   return Object.keys(obj) as Array<keyof T>;
 }
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.ts (3)

Line range hint 17-24: Add JSDoc comments to document input properties

While the input properties are well-named, adding JSDoc comments would improve maintainability by documenting their purpose and expected values.

Example improvement:

+  /**
+   * Controls the loading state of the component
+   */
   @Input({required: true}) isLoading: boolean;

+  /**
+   * Determines if the download link should be displayed
+   */
   @Input({required: true}) showDownloadLink: boolean;

26-32: Enhance type safety and documentation for EventEmitters

The output events should specify their emitted value types and include documentation about when they're emitted.

Example improvement:

-  @Output() nextStep = new EventEmitter();
+  /**
+   * Emitted when the user proceeds to the next step in the setup process
+   */
+  @Output() nextStep = new EventEmitter<void>();

-  @Output() downloadClick = new EventEmitter();
+  /**
+   * Emitted when the user clicks the download button
+   */
+  @Output() downloadClick = new EventEmitter<void>();

Line range hint 1-54: Consider implementing a state management service

Given this component's role in the QBD connector setup flow, consider extracting the state management logic into a dedicated service. This would:

  • Centralize the setup state management
  • Make the flow more maintainable
  • Enable better state persistence
  • Facilitate easier testing

Example service structure:

@Injectable({providedIn: 'root'})
export class QbdSetupStateService {
  private state = new BehaviorSubject<QbdSetupState>({...});
  
  updateDownloadStatus(status: boolean): void {
    this.state.next({...this.state.value, downloadComplete: status});
  }
  
  // Other state management methods
}
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.html (4)

5-7: Consider making the step number dynamic

The step number is currently hardcoded as "3". Consider making it dynamic through a component property to maintain flexibility if the workflow steps change.

-                    3
+                    {{stepNumber}}

14-14: Fix spacing in the ngClass expression

There's a missing space after the minus operator in fieldLength-1.

-[ngClass]=" i < fieldLength-1 ? 'tw-border-b tw-border-b-divider-border-color' : '' "
+[ngClass]=" i < fieldLength - 1 ? 'tw-border-b tw-border-b-divider-border-color' : '' "

20-22: Enhance loading state accessibility

Add aria-label to the loading icon for better screen reader support.

-                    <div class="spin-icon tw-text-text-tertiary tw-font-400 tw-text-14-px">
+                    <div class="spin-icon tw-text-text-tertiary tw-font-400 tw-text-14-px" [attr.aria-label]="'Loading ' + field">
                         <app-svg-icon *ngIf="qbdFields[field] === null" [svgSource]="'arrow-rotate-sync'" [width]="'14px'" [height]="'14px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-tertiary'"></app-svg-icon>
                     </div>

27-27: Consider moving the info text to a constant or translation file

The long information text should be moved to a constant or translation file for better maintainability and potential localization.

Example implementation:

// In your constants file or translation file
export const QBD_SYNC_INFO_TEXT = 'The values displayed here are synced from QuickBooks Desktop to Fyle. If you notice discrepancies in the synced values, you can continue onboarding; the sync will refresh automatically in 5 minutes to capture any missed values.';

Then in the template:

-[infoText]="'The values displayed here are synced from QuickBooks Desktop to Fyle. If you notice discrepancies in the synced values, you can continue onboarding; the sync will refresh automatically in 5 minutes to capture any missed values.'"
+[infoText]="QBD_SYNC_INFO_TEXT"
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts (1)

68-70: Enhance password visibility security

Consider adding auto-hide functionality for better security.

Here's an improved implementation with auto-hide:

+private hidePasswordTimeout: any;
+
-showPassword(isPasswordVisible: boolean) {
+showPassword(isPasswordVisible: boolean): void {
   this.isPasswordShown = isPasswordVisible;
+  if (isPasswordVisible) {
+    // Auto-hide password after 30 seconds
+    this.hidePasswordTimeout = setTimeout(() => {
+      this.isPasswordShown = false;
+    }, 30000);
+  } else {
+    if (this.hidePasswordTimeout) {
+      clearTimeout(this.hidePasswordTimeout);
+    }
+  }
 }
+
+// Add to component's OnDestroy
+ngOnDestroy(): void {
+  if (this.hidePasswordTimeout) {
+    clearTimeout(this.hidePasswordTimeout);
+  }
+}
src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.html (2)

31-33: Fix typo in component selector name.

The component selector app-chechbox-button has a typo (missing 'k'). This should be app-checkbox-button.

-            <app-chechbox-button
+            <app-checkbox-button
                 [checkedText]="'Done'"
                 [unCheckedText]="'Mark as done'"

Line range hint 6-6: Consider standardizing utility class usage.

The template uses a mix of utility classes with different prefixes (tw- for Tailwind). Consider establishing a consistent pattern for utility classes to improve maintainability.

For example:

  • Shadow classes: tw-shadow-app-card vs tw-shadow-shadow-level-1
  • Spacing classes: tw-mx-120-px vs tw-mx-60-px

Consider creating a design system documentation that standardizes these utility classes across the application.

src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.ts (1)

67-71: Enhance robustness of the updateConnectorStatus method.

Consider these improvements for better maintainability and safety:

  1. Add bounds checking for the array access
  2. Make the completion check more maintainable

Here's a suggested implementation:

  updateConnectorStatus(status: CheckBoxUpdate): void {
-   this.preRequisitesteps[status.id-1].state = status.value ? QBDPreRequisiteState.COMPLETE : QBDPreRequisiteState.INCOMPLETE;
-   if (this.preRequisitesteps[0].state === QBDPreRequisiteState.COMPLETE && this.preRequisitesteps[1].state === QBDPreRequisiteState.COMPLETE) {
-     this.isContinueDisabled = false;
-   }
+   const index = status.id - 1;
+   if (index >= 0 && index < this.preRequisitesteps.length) {
+     this.preRequisitesteps[index].state = status.value ? QBDPreRequisiteState.COMPLETE : QBDPreRequisiteState.INCOMPLETE;
+     this.isContinueDisabled = !this.preRequisitesteps.every(step => step.state === QBDPreRequisiteState.COMPLETE);
+   }
  }
src/app/integrations/qbd-direct/qbd-direct.component.ts (1)

Line range hint 67-78: Consider enhancing error handling and type safety.

While the workspace setup implementation is solid, consider these improvements:

  1. Add error handling for navigation failures
  2. Add type guards for workspace state validation
  3. Consider adding loading state handling for navigation

Here's a suggested implementation:

 private storeWorkspaceAndNavigate(workspace: QbdDirectWorkspace): void {
   this.workspace = workspace;
   this.storageService.set('workspaceId', this.workspace.id);
   this.storageService.set('onboarding-state', this.workspace.onboarding_state);
   this.qbdDirectHelperService.importAttribuites(false);
   this.isLoading = false;
-  this.navigate();
+  try {
+    // Validate workspace state before navigation
+    if (!Object.values(QbdDirectOnboardingState).includes(this.workspace.onboarding_state)) {
+      throw new Error(`Invalid onboarding state: ${this.workspace.onboarding_state}`);
+    }
+    this.navigate();
+  } catch (error) {
+    console.error('Navigation failed:', error);
+    // Handle navigation failure (e.g., show user feedback)
+  }
 }
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html (2)

5-7: Consider making the step number configurable

The step number "2" is hardcoded in the template. Consider making it a configurable input property to improve maintainability and reusability of the component.

-<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">
-    2
-</div>
+<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">
+    {{stepNumber}}
+</div>

49-50: Add user feedback for copy operation

The clipboard copy operation should provide visual feedback to indicate success.

Consider adding a toast notification or temporary success indicator when the password is copied.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between 0a76af2 and b79c940.

⛔ Files ignored due to path filters (9)
  • src/assets/icons/co/grv-lock.svg is excluded by !**/*.svg
  • src/assets/icons/co/grv-show-hide-medium.svg is excluded by !**/*.svg
  • src/assets/icons/co/grv-show-medium.svg is excluded by !**/*.svg
  • src/assets/icons/co/grv-upload.svg is excluded by !**/*.svg
  • src/assets/icons/eye-medium.svg is excluded by !**/*.svg
  • src/assets/icons/eye-slash-medium.svg is excluded by !**/*.svg
  • src/assets/icons/lock.svg is excluded by !**/*.svg
  • src/assets/icons/upload.svg is excluded by !**/*.svg
  • src/assets/sprites/sprite.svg is excluded by !**/*.svg
📒 Files selected for processing (21)
  • src/app/core/models/common/helper.model.ts (1 hunks)
  • src/app/core/models/enum/enum.model.ts (1 hunks)
  • src/app/core/models/qbd-direct/qbd-direct-configuration/qbd-direct-connector.model.ts (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.html (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.html (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.ts (2 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.html (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.scss (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.spec.ts (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.ts (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.ts (2 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.scss (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.spec.ts (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-shared.module.ts (1 hunks)
  • src/app/integrations/qbd-direct/qbd-direct.component.ts (1 hunks)
  • src/app/shared/components/configuration/configuration-info-label/configuration-info-label.component.html (1 hunks)
  • src/app/shared/components/configuration/configuration-info-label/configuration-info-label.component.ts (1 hunks)
  • src/app/shared/components/core/svg-icon/svg-icon.component.ts (1 hunks)
  • src/app/shared/components/input/chechbox-button/chechbox-button.component.ts (2 hunks)
✅ Files skipped from review due to trivial changes (5)
  • src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.html
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.scss
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.spec.ts
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.scss
  • src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.spec.ts
🔇 Additional comments (19)
src/app/shared/components/configuration/configuration-info-label/configuration-info-label.component.html (1)

3-5: LGTM! Clean implementation of conditional icon rendering.

The conditional rendering using *ngIf and the SVG icon implementation are well structured and follow Angular best practices.

src/app/core/models/qbd-direct/qbd-direct-configuration/qbd-direct-connector.model.ts (1)

28-30: Add JSDoc documentation for the new SyncDataType.

Consider adding documentation to explain the purpose and usage of this type, especially since it's used for sync data handling in QbdDirectDataSyncComponent.

+/**
+ * Type representing the sync data mapping for QBD Direct sync.
+ * Keys represent field identifiers and values represent their sync status or count.
+ */
 export type SyncDataType = {
     [key: string]: number | null;
 };

Let's verify the usage of this type:

✅ Verification successful

Let me check the actual usage of this type in the component to ensure the documentation suggestion is appropriate and verify if there are any issues.


Let me check the template to understand how the sync data is displayed and used.


Documentation suggestion for SyncDataType is appropriate and verified

The suggested JSDoc documentation is accurate and helpful as the type is used in QbdDirectDataSyncComponent to:

  • Display sync status for QuickBooks Desktop fields
  • Show numeric counts when synced (number) or loading indicator when pending (null)
  • Render field names as keys in a list format
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check how SyncDataType is being used across the codebase
# Expected: Find references in QbdDirectDataSyncComponent and related files

# Search for direct references to SyncDataType
rg "SyncDataType" --type ts

# Search for the component where this type is used
rg "QbdDirectDataSyncComponent" --type ts

Length of output: 2126


Script:

#!/bin/bash
# Get the implementation details of QbdDirectDataSyncComponent
cat src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.ts

Length of output: 1199


Script:

#!/bin/bash
# Get the template implementation
cat src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.html

Length of output: 2260

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-shared.module.ts (2)

5-6: LGTM! Well-organized module structure following modern Angular practices.

The module is properly organized with clear separation of concerns and follows modern Angular patterns for sharing components.

Also applies to: 13-15, 18-20


13-15: Verify standalone configuration of imported components.

The components appear to be used as standalone components (present in imports array). Let's verify their configuration.

Also applies to: 18-20

✅ Verification successful

Components are correctly configured as standalone

The verification confirms that all three components in question (QbdDirectDownloadFileComponent, QbdDirectSetupConnectionComponent, and QbdDirectDataSyncComponent) are properly configured as standalone components with the standalone: true property in their decorators. Each component also has appropriate imports configured.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify standalone component configuration in the imported components

# Check if the components are properly configured as standalone
ast-grep --pattern 'Component({
  $$$
  standalone: true,
  $$$
})' src/app/integrations/qbd-direct/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts src/app/integrations/qbd-direct/qbd-direct-data-sync/qbd-direct-data-sync.component.ts src/app/integrations/qbd-direct/qbd-direct-download-file/qbd-direct-download-file.component.ts

# If not found as standalone, check if they are regular components that should be declared
rg -l "Component\({" src/app/integrations/qbd-direct/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts src/app/integrations/qbd-direct/qbd-direct-data-sync/qbd-direct-data-sync.component.ts src/app/integrations/qbd-direct/qbd-direct-download-file/qbd-direct-download-file.component.ts

Length of output: 1170


Script:

#!/bin/bash
# Let's first find the correct paths using fd
fd -t f "qbd-direct.*component.ts$"

# Then let's check their configuration
rg -U "Component\(\{[^}]+\}\)" -g "*qbd-direct*component.ts"

Length of output: 28178

src/app/core/models/common/helper.model.ts (1)

3-6: LGTM! Type rename follows TypeScript conventions

The rename from checkBoxEmit to CheckBoxUpdate follows proper TypeScript naming conventions using PascalCase for type definitions.

src/app/shared/components/input/chechbox-button/chechbox-button.component.ts (1)

5-5: LGTM! Type changes look good.

The update from checkBoxEmit to CheckBoxUpdate type is properly implemented and maintains type safety.

Also applies to: 22-22

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.ts (2)

1-13: LGTM: Component setup follows Angular best practices

The standalone component configuration with proper module imports and file references is well-structured.


22-24: LGTM: Properties are well-typed and properly structured

Good practice using an enum for configuration CTA text and handling initialization in lifecycle hook.

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

Line range hint 1-15: LGTM! Component setup follows Angular best practices

The component is properly configured as standalone with all necessary imports and dependencies.


39-51: Consider adding state validation before event emission

The event-emitting methods could benefit from state validation to ensure the component is in a valid state before emitting events.

For example, verify that:

  • continueToNextStep should check if all required conditions are met
  • onDownloadClick should verify if download is available
  • onRetryClick should check if retry is possible
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.html (1)

1-33: Well-structured implementation with good UX considerations

The template implements a clean and user-friendly interface for QBD data sync with proper loading states, error handling, and clear user guidance. The use of Tailwind CSS classes maintains consistent styling, and the component structure is well-organized.

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts (1)

1-16: LGTM! Component setup follows Angular best practices

The component is properly configured as a standalone component with appropriate imports and metadata.

src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.html (1)

32-32: LGTM! Verify the event handler implementation.

The event handler change from qbdWebConnectorStatus to updateConnectorStatus looks good, as it better reflects its purpose of updating the connector status.

✅ Verification successful

Event handler implementation verified and working correctly

The updateConnectorStatus method is properly implemented in the component:

  • Accepts a CheckBoxUpdate type parameter
  • Updates the pre-requisite step state based on checkbox value
  • Enables/disables continue button based on completion status of both steps
  • Correctly bound to the checkbox component's event emitter
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the implementation of updateConnectorStatus method
# and ensure it properly handles the CheckBoxUpdate type

# Search for the component class implementation
ast-grep --pattern 'class QbdDirectOnboardingPreRequisiteComponent {
  $$$
  updateConnectorStatus($_) {
    $$$
  }
  $$$
}'

Length of output: 127


Script:

#!/bin/bash
# Let's try a different approach to find the component implementation
# First, let's locate the component file
fd "qbd-direct-onboarding-pre-requisite.component.ts" --type f

# Then let's use ripgrep to search for the method implementation
# with surrounding context for better understanding
rg "updateConnectorStatus" -A 5 -B 5

Length of output: 4279

src/app/shared/components/core/svg-icon/svg-icon.component.ts (1)

59-63: LGTM! Verify SVG assets availability.

The new icon mappings are well-structured and follow existing naming conventions. The additions align with the QBD connector setup UI requirements.

Let's verify that all the new SVG assets exist:

✅ Verification successful

All SVG assets are present and correctly placed

All the new icon mappings have corresponding SVG files in the src/assets/icons/co/ directory:

  • grv-chevron-last-medium.svg
  • grv-upload.svg
  • grv-lock.svg
  • grv-show-hide-medium.svg
  • grv-show-medium.svg
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check if the new SVG icons exist in the assets directory

# Common locations for SVG assets in Angular projects
for icon in "grv-chevron-last-medium" "grv-upload" "grv-lock" "grv-show-hide-medium" "grv-show-medium"; do
  echo "Searching for $icon..."
  fd -e svg "$icon" src/assets
done

Length of output: 1298

src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.ts (2)

7-10: LGTM! Import changes are appropriate.

The imports correctly reflect the component's dependencies and the type rename from checkBoxEmit to CheckBoxUpdate.


63-65: LGTM! Constructor properly simplified.

Good cleanup of unused service dependencies while retaining necessary ones for navigation.

src/app/integrations/qbd-direct/qbd-direct.component.ts (2)

44-44: LGTM! Path condition correctly updated for QBD integration.

The path condition has been properly updated to check for the QBD direct integration route.


47-47: Verify route consistency with Angular routing configuration.

The pre-requisite route has been updated, but we should verify this matches the defined routes in the Angular routing module.

✅ Verification successful

Route configuration is consistent with the state mapping

The route path /integrations/qbd_direct/onboarding/pre_requisite in the QBD Direct component's state mapping correctly aligns with the configured route in the onboarding routing module. The route is properly mapped to the QbdDirectOnboardingPreRequisiteComponent.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify route definition in routing modules
# Expected: Find matching route definition for '/integrations/qbd_direct/onboarding/pre_requisite'

# Search for route definitions in routing modules
rg -t ts "path.*['\"]integrations/qbd_direct/onboarding/pre_requisite['\"]" --glob "*routing*.ts"

# Search for any components that might be associated with this route
rg -t ts "pre_requisite.component" --glob "*.ts"

Length of output: 152


Script:

#!/bin/bash
# Let's try a broader search to find routing configurations and components
# Search for any routes related to qbd_direct
rg -t ts "path.*['\"].*qbd.*direct.*['\"]" --glob "*routing*.ts" -A 2

# Search for any QBD-related components
rg -t ts "QbdDirect.*Component" --glob "*.ts"

# Search for the specific enum value to understand the routing structure
rg -t ts "QbdDirectOnboardingState" -A 5

Length of output: 60863


Script:

#!/bin/bash
# Let's check the routing configuration for the pre-requisite component
rg -t ts "path.*['\"]pre_requisite['\"]" src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-routing.module.ts -A 2

Length of output: 245

src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html (1)

98-100: LGTM!

The footer implementation is clean and follows good practices:

  • Uses configuration enum for button text
  • Properly handles button state
  • Clear event handling

Comment on lines 1 to 36
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ConfigurationCta } from 'src/app/core/models/enum/enum.model';
import { SyncDataType } from 'src/app/core/models/qbd-direct/qbd-direct-configuration/qbd-direct-connector.model';
import { SharedModule } from 'src/app/shared/shared.module';

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

@Input({required: true}) qbdFields: SyncDataType;

@Input({required: true}) isCTAEnabled: boolean;

@Output() continueClick = new EventEmitter();

fieldLength: number;

ConfigurationCtaText = ConfigurationCta;

onContinueClick() {
this.continueClick.emit();
}

getKeys(obj: any): string[] {
return Object.keys(obj);
}

ngOnInit() {
this.fieldLength = Object.keys(this.qbdFields).length;
}
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

Based on the verification results, I can now provide the final response:

Component integration appears incomplete

The QbdDirectDataSyncComponent is currently commented out in the onboarding connector template, and there's no evidence of proper data flow for the required SyncDataType input. This suggests the integration is not fully implemented yet.

  • qbd-direct-onboarding-connector.component.html: Component usage is commented out
  • No binding found for the required qbdFields input property
  • No binding found for the required isCTAEnabled input property
🔗 Analysis chain

Verify integration with QBD setup flow

Since this component is part of the QBD connector setup UI changes, let's verify its integration points.


Let me analyze the results and generate one more verification script to complete the analysis.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check for component usage and related QBD setup components
echo "Checking component usage in QBD setup flow..."
rg -l "app-qbd-direct-data-sync" 

echo "Checking related QBD components..."
fd -e ts -e html . | rg "qbd-direct"

echo "Checking SyncDataType usage..."
rg "SyncDataType" -A 3

Length of output: 14267


Script:

#!/bin/bash
# Check the usage of QbdDirectDataSyncComponent in the onboarding connector
echo "Checking QbdDirectDataSyncComponent usage in onboarding connector..."
cat src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.html

# Check if SyncDataType is properly passed
echo -e "\nChecking SyncDataType data flow..."
rg "qbdFields" -A 3 src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/

Length of output: 687

templateUrl: './qbd-direct-setup-connection.component.html',
styleUrl: './qbd-direct-setup-connection.component.scss'
})
export class QbdDirectSetupConnectionComponent {

@Input({required: true}) password: string = '098765';
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

Remove hardcoded password value

The default password value '098765' should not be hardcoded in the component. This could pose a security risk if accidentally used in production.

Apply this diff to remove the default value:

-@Input({required: true}) password: string = '098765';
+@Input({required: true}) password: string;
📝 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
@Input({required: true}) password: string = '098765';
@Input({required: true}) password: string;

Comment on lines +51 to +66
onClipboardCopy() {
const selBox = document.createElement('textarea');
selBox.value = this.password;
document.body.appendChild(selBox);
selBox.select();
selBox.click();
document.execCommand('copy');

this.messageService.add({
severity: 'success',
summary: 'Password copied to clipboard'
});

document.body.removeChild(selBox);
event?.stopPropagation();
}
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Modernize clipboard implementation and add error handling

The current implementation has several issues:

  1. Uses deprecated document.execCommand('copy')
  2. Lacks error handling
  3. Potential memory leak if error occurs
  4. Missing type for event parameter

Consider this modern implementation using the Clipboard API:

-onClipboardCopy() {
-  const selBox = document.createElement('textarea');
-  selBox.value = this.password;
-  document.body.appendChild(selBox);
-  selBox.select();
-  selBox.click();
-  document.execCommand('copy');
-
+async onClipboardCopy(event?: Event) {
+  try {
+    await navigator.clipboard.writeText(this.password);
     this.messageService.add({
       severity: 'success',
       summary: 'Password copied to clipboard'
     });
-
-    document.body.removeChild(selBox);
-    event?.stopPropagation();
+  } catch (error) {
+    this.messageService.add({
+      severity: 'error',
+      summary: 'Failed to copy password'
+    });
+  } finally {
+    event?.stopPropagation();
   }
 }
📝 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
onClipboardCopy() {
const selBox = document.createElement('textarea');
selBox.value = this.password;
document.body.appendChild(selBox);
selBox.select();
selBox.click();
document.execCommand('copy');
this.messageService.add({
severity: 'success',
summary: 'Password copied to clipboard'
});
document.body.removeChild(selBox);
event?.stopPropagation();
}
async onClipboardCopy(event?: Event) {
try {
await navigator.clipboard.writeText(this.password);
this.messageService.add({
severity: 'success',
summary: 'Password copied to clipboard'
});
} catch (error) {
this.messageService.add({
severity: 'error',
summary: 'Failed to copy password'
});
} finally {
event?.stopPropagation();
}
}


@Input({required: true}) isLoading: boolean;

@Input({required: true}) connectionStatus: QBDConnectionStatus;
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

Template handles connection status incompletely

The template only handles two cases of QBDConnectionStatus:

  • SUCCESS: Used in connectionStatus === qbdConnectionStatus.SUCCESS conditions
  • Default case: All other statuses are treated the same way

However, the enum defines three states:

  • SUCCESS
  • INCORRECT_COMPANY_PATH
  • IN_CORRECT_PASSWORD

The template should show specific error messages for INCORRECT_COMPANY_PATH and IN_CORRECT_PASSWORD states to guide users appropriately.

🔗 Analysis chain

Verify handling of all connection status cases

Ensure that the template handles all possible QBDConnectionStatus enum values appropriately.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify QBDConnectionStatus enum usage in template

# Find the enum definition
echo "Checking QBDConnectionStatus enum definition:"
rg -A 10 "export enum QBDConnectionStatus"

# Find template usage
echo "Checking template usage of QBDConnectionStatus:"
rg -A 5 "QBDConnectionStatus\." "src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html"

Length of output: 758


Script:

#!/bin/bash
# Let's check the template file content directly to see how connection status is used
echo "Checking template content:"
cat "src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html"

# Let's also check the component's TypeScript file for any connection status handling
echo -e "\nChecking component implementation:"
cat "src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts"

Length of output: 9705

Comment on lines 74 to +80
continueToNextStep(): void{
this.saveInProgress = true;
this.workspaceService.updateWorkspaceOnboardingState({onboarding_state: QbdDirectOnboardingState.CONNECTION}).subscribe((workspaceResponse: QbdDirectWorkspace) => {
this.workspaceService.setOnboardingState(workspaceResponse.onboarding_state);
this.saveInProgress = false;
this.router.navigate([`/integrations/qbd_direct/onboarding/connector`]);
});
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add error handling to continueToNextStep method.

The method should handle potential errors and ensure the saveInProgress flag is properly reset.

Here's a suggested implementation:

  continueToNextStep(): void {
    this.saveInProgress = true;
-   this.workspaceService.updateWorkspaceOnboardingState({onboarding_state: QbdDirectOnboardingState.CONNECTION}).subscribe((workspaceResponse: QbdDirectWorkspace) => {
-     this.workspaceService.setOnboardingState(workspaceResponse.onboarding_state);
-     this.saveInProgress = false;
-     this.router.navigate([`/integrations/qbd_direct/onboarding/connector`]);
-   });
+   this.workspaceService.updateWorkspaceOnboardingState({onboarding_state: QbdDirectOnboardingState.CONNECTION}).subscribe({
+     next: (workspaceResponse: QbdDirectWorkspace) => {
+       this.workspaceService.setOnboardingState(workspaceResponse.onboarding_state);
+       this.router.navigate(['/integrations/qbd_direct/onboarding/connector']);
+     },
+     error: (error: any) => {
+       console.error('Failed to update workspace state:', error);
+       // Consider adding error notification here
+     },
+     complete: () => {
+       this.saveInProgress = false;
+     }
+   });
  }
📝 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
continueToNextStep(): void{
this.saveInProgress = true;
this.workspaceService.updateWorkspaceOnboardingState({onboarding_state: QbdDirectOnboardingState.CONNECTION}).subscribe((workspaceResponse: QbdDirectWorkspace) => {
this.workspaceService.setOnboardingState(workspaceResponse.onboarding_state);
this.saveInProgress = false;
this.router.navigate([`/integrations/qbd_direct/onboarding/connector`]);
});
continueToNextStep(): void{
this.saveInProgress = true;
this.workspaceService.updateWorkspaceOnboardingState({onboarding_state: QbdDirectOnboardingState.CONNECTION}).subscribe({
next: (workspaceResponse: QbdDirectWorkspace) => {
this.workspaceService.setOnboardingState(workspaceResponse.onboarding_state);
this.router.navigate(['/integrations/qbd_direct/onboarding/connector']);
},
error: (error: any) => {
console.error('Failed to update workspace state:', error);
// Consider adding error notification here
},
complete: () => {
this.saveInProgress = false;
}
});

Comment on lines +50 to +58
state: QBDPreRequisiteState.INCOMPLETE
},
{
id: 2,
label: 'Keep your Quickbooks company file open',
caption: 'Make sure the QuickBooks Company you want to connect to Fyle is open during the integration setup.',
externalLink: 'https://qbd.com',
iconName: 'expand',
state: QBDPreRequisiteState.INCOMPLETE // INCOMPLETE
state: QBDPreRequisiteState.INCOMPLETE
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

⚠️ Potential issue

Update the QuickBooks Web Connector download URL

The hardcoded URL 'https://qbd.com' should be replaced with the official Intuit QuickBooks Web Connector download URL: 'https://downloads.quickbooks.com/qbwc/QuickBooksWebConnectorInstaller.exe'

🔗 Analysis chain

Update the placeholder QuickBooks Web Connector download URL.

The external link 'https://qbd.com' appears to be a placeholder. Please update it with the correct QuickBooks Web Connector download URL.

Let's verify if this URL is used elsewhere:


Let me search for the correct QuickBooks Web Connector download URL in the codebase:


Let me search for any configuration files or constants that might contain the correct URL:


Based on the search results, I found that there are help articles related to QuickBooks Desktop integration in the codebase. Let me check the specific article URL for the Web Connector download:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for hardcoded QBD URLs to ensure consistency
rg -i "https://qbd.com" --type ts --type html

Length of output: 401


Script:

#!/bin/bash
# Search for any QuickBooks Web Connector related URLs
rg -i "quickbooks.*web.*connector|qbwc" --type ts --type html -A 2

Length of output: 2963


Script:

#!/bin/bash
# Search for configuration files and constants related to QuickBooks
fd -e ts -e json "config|constant" --exec rg -i "quickbooks|qbwc|intuit" {} -C 2

Length of output: 34115


Script:

#!/bin/bash
# Search for the actual QuickBooks Web Connector download URL in help articles
rg -i "quickbooks.*web.*connector.*download|qbwc.*download" --type-add 'md:*.{md,mdx}' --type md

Length of output: 98

Comment on lines +77 to +82
<app-chechbox-button
[checkedText]="'Done'"
[unCheckedText]="'Mark as done'"
[id]="0"
(checkBoxUpdated)="onDoneClick($event)">
</app-chechbox-button>
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

Fix component name typo

The component name contains a typo: "chechbox" should be "checkbox".

-<app-chechbox-button
+<app-checkbox-button
📝 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
<app-chechbox-button
[checkedText]="'Done'"
[unCheckedText]="'Mark as done'"
[id]="0"
(checkBoxUpdated)="onDoneClick($event)">
</app-chechbox-button>
<app-checkbox-button
[checkedText]="'Done'"
[unCheckedText]="'Mark as done'"
[id]="0"
(checkBoxUpdated)="onDoneClick($event)">
</app-checkbox-button>

Comment on lines +40 to +41
<p *ngIf="!isPasswordShown" class="tw-text-16-px tw-text-text-tertiary tw-font-400">****{{password.slice(4)}}</p>
<p *ngIf="isPasswordShown" class="tw-text-16-px tw-text-text-tertiary tw-font-400">{{password}}</p>
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

Enhance password security and handling

The current password visibility implementation has potential security concerns:

  1. The password is directly exposed in the DOM when shown
  2. The slice(4) operation assumes password length ≥ 4 characters

Consider using a more secure approach for password masking and handling.

-<p *ngIf="!isPasswordShown" class="tw-text-16-px tw-text-text-tertiary tw-font-400">****{{password.slice(4)}}</p>
-<p *ngIf="isPasswordShown" class="tw-text-16-px tw-text-text-tertiary tw-font-400">{{password}}</p>
+<p class="tw-text-16-px tw-text-text-tertiary tw-font-400">
+    {{isPasswordShown ? password : password?.replace(/./g, '*')}}
+</p>
📝 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
<p *ngIf="!isPasswordShown" class="tw-text-16-px tw-text-text-tertiary tw-font-400">****{{password.slice(4)}}</p>
<p *ngIf="isPasswordShown" class="tw-text-16-px tw-text-text-tertiary tw-font-400">{{password}}</p>
<p class="tw-text-16-px tw-text-text-tertiary tw-font-400">
{{isPasswordShown ? password : password?.replace(/./g, '*')}}
</p>

<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>
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

Enhance iframe security and responsiveness

The YouTube video iframe needs security improvements and responsive sizing:

  1. Add loading="lazy" for performance
  2. Add title for accessibility
  3. Add allow attribute to control features
  4. Make dimensions responsive
-<iframe width="427" height="259" src="https://www.youtube.com/embed/2oYdc8KcQnk" frameborder="0"></iframe>
+<iframe
+    class="tw-w-full tw-aspect-video"
+    src="https://www.youtube.com/embed/2oYdc8KcQnk"
+    title="QuickBooks Web Connector Setup Guide"
+    loading="lazy"
+    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    frameborder="0">
+</iframe>
📝 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
<iframe width="427" height="259" src="https://www.youtube.com/embed/2oYdc8KcQnk" frameborder="0"></iframe>
<iframe
class="tw-w-full tw-aspect-video"
src="https://www.youtube.com/embed/2oYdc8KcQnk"
title="QuickBooks Web Connector Setup Guide"
loading="lazy"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
frameborder="0">
</iframe>

Comment on lines +893 to +897
export enum QBDConnectionStatus {
SUCCESS = 'SUCCESS',
INCORRECT_COMPANY_PATH = 'INCORRECT_COMPANY_PATH',
IN_CORRECT_PASSWORD = 'IN_CORRECT_PASSWORD'
}
Copy link
Contributor

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Fix inconsistent naming in enum value.

The enum value IN_CORRECT_PASSWORD uses inconsistent word separation compared to INCORRECT_COMPANY_PATH. Both represent incorrect states but use different patterns.

Apply this diff to maintain consistent naming:

 export enum QBDConnectionStatus {
   SUCCESS = 'SUCCESS',
   INCORRECT_COMPANY_PATH = 'INCORRECT_COMPANY_PATH',
-  IN_CORRECT_PASSWORD = 'IN_CORRECT_PASSWORD'
+  INCORRECT_PASSWORD = 'INCORRECT_PASSWORD'
 }
📝 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
export enum QBDConnectionStatus {
SUCCESS = 'SUCCESS',
INCORRECT_COMPANY_PATH = 'INCORRECT_COMPANY_PATH',
IN_CORRECT_PASSWORD = 'IN_CORRECT_PASSWORD'
}
export enum QBDConnectionStatus {
SUCCESS = 'SUCCESS',
INCORRECT_COMPANY_PATH = 'INCORRECT_COMPANY_PATH',
INCORRECT_PASSWORD = 'INCORRECT_PASSWORD'
}

Copy link

Unit Test Coverage % values
Statements 35.29% ( 4245 / 12028 )
Branches 29.02% ( 1232 / 4244 )
Functions 27.86% ( 940 / 3374 )
Lines 35.42% ( 4171 / 11774 )

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes

* feat: QBD direct main connection page business logic (#1066)

* feat: QBD direct main connection page business logic

* onboarding connection ts changes

* onboarding connection ts changes

---------

Co-authored-by: ashwin1111 <[email protected]>
@ashwin1111 ashwin1111 merged commit d1140bb into qbd-direct-onboarding-download-file-UI Nov 13, 2024
2 of 4 checks passed
ashwin1111 added a commit that referenced this pull request Nov 13, 2024
* feat: Download qwd file UI changes

* download file Ui updation

* download file Ui updation

* download file Ui updation

* download file Ui updation

* feat: qbd connector setup UI changes (#1060)

* feat: qbd connector setup UI changes

* Merge branch qbd-direct-onboarding-download-file-UI into qbd-direct-step-connector-UI

* feat: Qbd direct connection data sync UI changes (#1061)

* feat: Qbd direct connection data sync UI changes

* input made required

* svg update

* feat: qbd direct pre requisite ts changes (#1062)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes (#1063)

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes (#1064)

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes (#1065)

* PR comment fix

* PR comment fix

* Qbd direct connector data sync up ts (#1070)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes

* feat: QBD direct main connection page business logic (#1066)

* feat: QBD direct main connection page business logic

* onboarding connection ts changes

* onboarding connection ts changes

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>
ashwin1111 added a commit that referenced this pull request Nov 13, 2024
* feat: qbd-direct-onboarding-pre-requisite implementation

* styling changes

* unit test fix

* step footer contentt fix

* pre requisite Ui updation

* PR comments fix

* PR comments fix

* feat: Download qwd file UI changes (#1059)

* feat: Download qwd file UI changes

* download file Ui updation

* download file Ui updation

* download file Ui updation

* download file Ui updation

* feat: qbd connector setup UI changes (#1060)

* feat: qbd connector setup UI changes

* Merge branch qbd-direct-onboarding-download-file-UI into qbd-direct-step-connector-UI

* feat: Qbd direct connection data sync UI changes (#1061)

* feat: Qbd direct connection data sync UI changes

* input made required

* svg update

* feat: qbd direct pre requisite ts changes (#1062)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes (#1063)

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes (#1064)

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes (#1065)

* PR comment fix

* PR comment fix

* Qbd direct connector data sync up ts (#1070)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes

* feat: QBD direct main connection page business logic (#1066)

* feat: QBD direct main connection page business logic

* onboarding connection ts changes

* onboarding connection ts changes

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>
ashwin1111 added a commit that referenced this pull request Nov 13, 2024
* feat: qbd direct onboarding landing page

* feat: qbd-direct-onboarding-pre-requisite implementation

* PR comments fix

* PR fix

* updateWorkspaceOnboardingState service return type update

* qbd direct logo update

* feat: qbd-direct onboarding prerequisite UI implementation (#1058)

* feat: qbd-direct-onboarding-pre-requisite implementation

* styling changes

* unit test fix

* step footer contentt fix

* pre requisite Ui updation

* PR comments fix

* PR comments fix

* feat: Download qwd file UI changes (#1059)

* feat: Download qwd file UI changes

* download file Ui updation

* download file Ui updation

* download file Ui updation

* download file Ui updation

* feat: qbd connector setup UI changes (#1060)

* feat: qbd connector setup UI changes

* Merge branch qbd-direct-onboarding-download-file-UI into qbd-direct-step-connector-UI

* feat: Qbd direct connection data sync UI changes (#1061)

* feat: Qbd direct connection data sync UI changes

* input made required

* svg update

* feat: qbd direct pre requisite ts changes (#1062)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes (#1063)

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes (#1064)

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes (#1065)

* PR comment fix

* PR comment fix

* Qbd direct connector data sync up ts (#1070)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes

* feat: QBD direct main connection page business logic (#1066)

* feat: QBD direct main connection page business logic

* onboarding connection ts changes

* onboarding connection ts changes

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>
ashwin1111 added a commit that referenced this pull request Nov 13, 2024
* feat: onboarding basic setup

* feat: qbd direct onboarding landing page (#1056)

* feat: qbd direct onboarding landing page

* feat: qbd-direct-onboarding-pre-requisite implementation

* PR comments fix

* PR fix

* updateWorkspaceOnboardingState service return type update

* qbd direct logo update

* feat: qbd-direct onboarding prerequisite UI implementation (#1058)

* feat: qbd-direct-onboarding-pre-requisite implementation

* styling changes

* unit test fix

* step footer contentt fix

* pre requisite Ui updation

* PR comments fix

* PR comments fix

* feat: Download qwd file UI changes (#1059)

* feat: Download qwd file UI changes

* download file Ui updation

* download file Ui updation

* download file Ui updation

* download file Ui updation

* feat: qbd connector setup UI changes (#1060)

* feat: qbd connector setup UI changes

* Merge branch qbd-direct-onboarding-download-file-UI into qbd-direct-step-connector-UI

* feat: Qbd direct connection data sync UI changes (#1061)

* feat: Qbd direct connection data sync UI changes

* input made required

* svg update

* feat: qbd direct pre requisite ts changes (#1062)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes (#1063)

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes (#1064)

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes (#1065)

* PR comment fix

* PR comment fix

* Qbd direct connector data sync up ts (#1070)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes

* feat: QBD direct main connection page business logic (#1066)

* feat: QBD direct main connection page business logic

* onboarding connection ts changes

* onboarding connection ts changes

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>
ashwin1111 added a commit that referenced this pull request Nov 13, 2024
* feat: checkbox button creation

* PR comments fix

* feat: onboarding basic setup (#1055)

* feat: onboarding basic setup

* feat: qbd direct onboarding landing page (#1056)

* feat: qbd direct onboarding landing page

* feat: qbd-direct-onboarding-pre-requisite implementation

* PR comments fix

* PR fix

* updateWorkspaceOnboardingState service return type update

* qbd direct logo update

* feat: qbd-direct onboarding prerequisite UI implementation (#1058)

* feat: qbd-direct-onboarding-pre-requisite implementation

* styling changes

* unit test fix

* step footer contentt fix

* pre requisite Ui updation

* PR comments fix

* PR comments fix

* feat: Download qwd file UI changes (#1059)

* feat: Download qwd file UI changes

* download file Ui updation

* download file Ui updation

* download file Ui updation

* download file Ui updation

* feat: qbd connector setup UI changes (#1060)

* feat: qbd connector setup UI changes

* Merge branch qbd-direct-onboarding-download-file-UI into qbd-direct-step-connector-UI

* feat: Qbd direct connection data sync UI changes (#1061)

* feat: Qbd direct connection data sync UI changes

* input made required

* svg update

* feat: qbd direct pre requisite ts changes (#1062)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes (#1063)

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes (#1064)

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes (#1065)

* PR comment fix

* PR comment fix

* Qbd direct connector data sync up ts (#1070)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes

* feat: QBD direct main connection page business logic (#1066)

* feat: QBD direct main connection page business logic

* onboarding connection ts changes

* onboarding connection ts changes

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>
DhaaraniCIT added a commit that referenced this pull request Dec 3, 2024
* fead: folder creation

* PR comments fix

* feat: Qbd checkbox button creation (#1054)

* feat: checkbox button creation

* PR comments fix

* feat: onboarding basic setup (#1055)

* feat: onboarding basic setup

* feat: qbd direct onboarding landing page (#1056)

* feat: qbd direct onboarding landing page

* feat: qbd-direct-onboarding-pre-requisite implementation

* PR comments fix

* PR fix

* updateWorkspaceOnboardingState service return type update

* qbd direct logo update

* feat: qbd-direct onboarding prerequisite UI implementation (#1058)

* feat: qbd-direct-onboarding-pre-requisite implementation

* styling changes

* unit test fix

* step footer contentt fix

* pre requisite Ui updation

* PR comments fix

* PR comments fix

* feat: Download qwd file UI changes (#1059)

* feat: Download qwd file UI changes

* download file Ui updation

* download file Ui updation

* download file Ui updation

* download file Ui updation

* feat: qbd connector setup UI changes (#1060)

* feat: qbd connector setup UI changes

* Merge branch qbd-direct-onboarding-download-file-UI into qbd-direct-step-connector-UI

* feat: Qbd direct connection data sync UI changes (#1061)

* feat: Qbd direct connection data sync UI changes

* input made required

* svg update

* feat: qbd direct pre requisite ts changes (#1062)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes (#1063)

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes (#1064)

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes (#1065)

* PR comment fix

* PR comment fix

* Qbd direct connector data sync up ts (#1070)

* feat: qbd direct pre requisite ts changes

* feat: qbd direct pre requisite ts changes

* feat: qbd direct connector download file ts changes

* feat: qbd direct connector setup connector ts changes

* feat: qbd direct connector data sync up ts changes

* feat: QBD direct main connection page business logic (#1066)

* feat: QBD direct main connection page business logic

* onboarding connection ts changes

* onboarding connection ts changes

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

---------

Co-authored-by: ashwin1111 <[email protected]>

* checkbox button fix

* QA fixes

* qa fixes

* qa fixes

* fix: qbd direct export settings onboarding changes and content changes (#1082)

* qbd direct export settings onboarding changes and content changes

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

* qbd direct import settings onboarding changes and content changes

* qbd direct advanced settings onboarding changes and content changes (#1084)

* QA fixes

* QBD direct bug fixes

* QBD direct bug fixes

* JE changes in export settings and mapping

* PR comments fix

---------

Co-authored-by: ashwin1111 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
size/L Large PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants