feat: initial implementation of cf preview (draft) #2535
Conversation
|
WalkthroughThe recent updates to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CustomerProvider
participant CustomerProviderPortable
participant CollectionFlowPortable
User->>CustomerProvider: Request customer data
CustomerProvider->>CustomerProviderPortable: Pass customer data
CustomerProviderPortable->>CollectionFlowPortable: Provide context and customer info
CollectionFlowPortable->>User: Render collection flow UI
Poem
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range, codebase verification and nitpick comments (4)
apps/workflows-dashboard/package.json (1)
21-21: The local link reference for the@ballerine/kyb-appdependency is incorrect.The correct path should be
link:apps/kyb-appinstead oflink:../kyb-app.
- Update the
package.jsonfile inapps/workflows-dashboardto use the correct path.Analysis chain
LGTM! Ensure the local link reference is correctly set up.
The addition of the
@ballerine/kyb-appdependency suggests an enhancement in functionality. Verify that the local link reference is correctly set up and the dependency is properly integrated.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the local link reference for the `@ballerine/kyb-app` dependency. # Test: Check if the local link reference is correctly set up. ls -l ../kyb-appLength of output: 76
Script:
#!/bin/bash # Description: Search for the `kyb-app` directory within the repository. # Test: Find the actual location of the `kyb-app` directory. fd -t d kyb-appLength of output: 61
Script:
#!/bin/bash # Description: Verify the presence of the `package.json` file in `apps/kyb-app/` directory. # Test: Check if `package.json` exists in the `apps/kyb-app/` directory. ls -l apps/kyb-app/package.jsonLength of output: 108
apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx (3)
19-19: Consolidate imports.Consider consolidating imports from the same module to improve readability.
- import { collectionFlowElements } from '@/pages/CollectionFlow/collection-flow-elements'; - import { Approved } from '@/pages/CollectionFlow/components/pages/Approved'; - import { Rejected } from '@/pages/CollectionFlow/components/pages/Rejected'; - import { Success } from '@/pages/CollectionFlow/components/pages/Success'; + import { + collectionFlowElements, + Approved, + Rejected, + Success, + } from '@/pages/CollectionFlow/collection-flow-elements';
19-19: Remove unused importset.The
setfunction fromlodashis not used within this file.- import set from 'lodash/set';
58-62: Remove debugging console logs.Console logs for debugging purposes should be removed before merging to the main branch.
- console.log({ schema }); - console.log({ context }); - console.log({ customer });
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (21)
- apps/kyb-app/package.json (3 hunks)
- apps/kyb-app/src/common/components/atoms/Chip/Chip.tsx (1 hunks)
- apps/kyb-app/src/components/providers/CustomerProvider/CustomerProvider.tsx (1 hunks)
- apps/kyb-app/src/components/providers/CustomerProvider/CustomerProviderPortable.tsx (1 hunks)
- apps/kyb-app/src/hooks/useCustomerQuery/useCustomerQuery.ts (1 hunks)
- apps/kyb-app/src/lib.ts (1 hunks)
- apps/kyb-app/src/lib/collection-flow-portable/CollectionFlowPortable.tsx (1 hunks)
- apps/kyb-app/src/lib/collection-flow-portable/index.tsx (1 hunks)
- apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx (4 hunks)
- apps/kyb-app/src/pages/CollectionFlow/collection-flow-elements.tsx (1 hunks)
- apps/kyb-app/src/pages/CollectionFlow/index.ts (1 hunks)
- apps/kyb-app/tsconfig-lib.json (1 hunks)
- apps/kyb-app/vite.config.ts (2 hunks)
- apps/kyb-app/vite.lib.config.ts (1 hunks)
- apps/workflows-dashboard/package.json (1 hunks)
- apps/workflows-dashboard/public/locales/cn/translation.json (1 hunks)
- apps/workflows-dashboard/public/locales/en/translation.json (1 hunks)
- apps/workflows-dashboard/src/domains/ui-definitions/ui-definitions.types.ts (2 hunks)
- apps/workflows-dashboard/src/pages/UIDefinitions/components/UIDefinitionsTable/columns.tsx (2 hunks)
- services/workflows-service/prisma/data-migrations (1 hunks)
- services/workflows-service/src/ui-definition/ui-definition.service.ts (1 hunks)
Files skipped from review due to trivial changes (3)
- apps/kyb-app/src/components/providers/CustomerProvider/CustomerProvider.tsx
- apps/kyb-app/src/pages/CollectionFlow/index.ts
- apps/kyb-app/tsconfig-lib.json
Additional context used
Biome
apps/kyb-app/src/pages/CollectionFlow/collection-flow-elements.tsx
[error] 17-17: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
apps/workflows-dashboard/package.json
[error] 17-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: String values must be double quoted.
(parse)
[error] 17-17: String values must be double quoted.
(parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 18-18: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 18-19: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 18-19: unexpected character
=(parse)
[error] 19-19: unexpected character
=(parse)
[error] 19-19: unexpected character
=(parse)
[error] 19-19: unexpected character
=(parse)
[error] 19-19: unexpected character
=(parse)
[error] 19-19: unexpected character
=(parse)
[error] 19-19: unexpected character
=(parse)
apps/kyb-app/package.json
[error] 19-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: String values must be double quoted.
(parse)
[error] 20-20: String values must be double quoted.
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
apps/kyb-app/src/lib/collection-flow-portable/CollectionFlowPortable.tsx
[error] 71-71: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
Additional comments not posted (36)
services/workflows-service/prisma/data-migrations (1)
1-1: Verify the commit reference change.The subproject commit reference has been updated. Ensure that the new commit
6d7678b238c7b6f1aeaad80719e218629ed5e5bcis valid and contains the necessary updates.Verification successful
The commit reference
6d7678b238c7b6f1aeaad80719e218629ed5e5bcis valid and correctly referenced in the submoduleservices/workflows-service/prisma/data-migrations.
- The submodule status output confirms the commit reference.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the new subproject commit reference. # Test: Check if the commit exists and is valid. Expect: The commit should be found in the repository. git cat-file -t 6d7678b238c7b6f1aeaad80719e218629ed5e5bcLength of output: 230
Script:
#!/bin/bash # Description: Search for the commit reference in the commit history and submodule updates. # Check the commit history for the specific commit reference. git log --all --grep=6d7678b238c7b6f1aeaad80719e218629ed5e5bc # Check for submodule updates that might reference the specific commit. git submodule foreach 'git log --all --grep=6d7678b238c7b6f1aeaad80719e218629ed5e5bc'Length of output: 151
Script:
#!/bin/bash # Description: List the submodules and their commit references to check for the specific commit. # List all submodules and their commit references. git submodule status --recursiveLength of output: 126
apps/workflows-dashboard/src/domains/ui-definitions/ui-definitions.types.ts (2)
1-1: Import statement looks good.The import of
IWorkflowDefinitionfrom@/domains/workflow-definitionsis correct.
11-11: Addition ofworkflowDefinitionproperty looks good.The new property
workflowDefinitionof typeIWorkflowDefinitionenhances theIUIDefinitioninterface by linking it to workflow definitions.apps/kyb-app/src/lib.ts (3)
1-2: Import statements look good.The imports for
i18nextandindex.cssare correct.
3-3: Export statement looks good.The export statement for
collection-flow-portableis correct.
5-12: Function implementation looks good.The
toggleDevmodefunction correctly toggles thedevmodekey inlocalStorageand reloads the page.apps/kyb-app/src/components/providers/CustomerProvider/CustomerProviderPortable.tsx (1)
1-25: Ensure the context is updated whendefaultCustomerchanges.The
useMemohook is used to memoize the context value, but it only updates whendefaultCustomerchanges. Ensure that this behavior is intended and thatdefaultCustomeris the only dependency that should trigger an update.Verification successful
Verification successful: The context is updated when
defaultCustomerchanges.The
useMemohook correctly updates the context whendefaultCustomerchanges. There are no additional dependencies that should trigger an update.
apps/kyb-app/src/components/providers/CustomerProvider/CustomerProviderPortable.tsxapps/kyb-app/src/lib/collection-flow-portable/CollectionFlowPortable.tsxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `CustomerProviderPortable` to ensure `defaultCustomer` is the only dependency that should trigger an update. # Test: Search for the usage of `CustomerProviderPortable`. Expect: Review the context in which it is used. rg --type tsx -A 5 'CustomerProviderPortable'Length of output: 73
Script:
#!/bin/bash # Description: Verify the usage of `CustomerProviderPortable` to ensure `defaultCustomer` is the only dependency that should trigger an update. # Test: Search for the usage of `CustomerProviderPortable`. Expect: Review the context in which it is used. rg 'CustomerProviderPortable' --glob '*.tsx' -A 5Length of output: 2630
apps/kyb-app/src/common/components/atoms/Chip/Chip.tsx (1)
4-4: LGTM!Exporting the
BaseChipVariantPropstype improves the reusability of the type across the application.apps/kyb-app/src/lib/collection-flow-portable/index.tsx (2)
1-12: LGTM! Imports are well-organized and necessary.The imports are correctly organized and include all necessary modules for the
Maincomponent.
14-27: LGTM! TheMaincomponent is well-structured.The
Maincomponent correctly integrates multiple providers and rendersCollectionFlowPortablewith the passed props.apps/kyb-app/vite.lib.config.ts (2)
1-15: LGTM! Imports and plugin configuration are well-organized and necessary.The imports and plugin configuration are correctly organized and include all necessary plugins for the Vite configuration.
17-44: LGTM! Vite configuration is well-structured and comprehensive.The Vite configuration includes necessary build settings and test settings, ensuring a robust setup for the project.
apps/kyb-app/src/pages/CollectionFlow/collection-flow-elements.tsx (1)
1-8: LGTM! Imports are well-organized and necessary.The imports are correctly organized and include all necessary components for the
collectionFlowElements.services/workflows-service/src/ui-definition/ui-definition.service.ts (1)
57-64: LGTM! The changes enhance the data retrieval logic.The inclusion of related
workflowDefinitiondata in the query results improves the comprehensiveness of the returned dataset.apps/kyb-app/vite.config.ts (1)
67-73: LGTM! The changes enhance the build configuration.The new
libsection allows the project to be compiled as a library with a defined entry point and output format of ECMAScript modules.apps/workflows-dashboard/package.json (1)
17-17: LGTM! Ensure compatibility with the updated package version.The update to the
@ballerine/commonpackage version suggests an enhancement in functionality. Verify that the updated version is compatible with the rest of the codebase.Verification successful
The update to the
@ballerine/commonpackage version from^0.9.12to^0.9.14is verified and no compatibility issues were found.The package is used extensively across the codebase, and the update appears to be compatible with the existing code.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify compatibility with the updated `@ballerine/common` package version. # Test: Check for any breaking changes or compatibility issues. npm ls @ballerine/commonLength of output: 97
Script:
#!/bin/bash # Description: Search for the usage of `@ballerine/common` in the codebase to verify compatibility with the updated package version. # Find all files that import or require `@ballerine/common` rg "@ballerine/common" -A 5Length of output: 319930
Tools
Biome
[error] 16-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: unexpected character
<(parse)
[error] 17-17: String values must be double quoted.
(parse)
[error] 17-17: String values must be double quoted.
(parse)
apps/kyb-app/package.json (4)
6-6: LGTM! Themainentry point addition is appropriate.The addition of the
mainentry point helps in specifying the path to the main module, facilitating better module resolution.
10-10: LGTM! Thebuild-portablescript addition is beneficial.The new script enhances the build capabilities of the project by allowing for a distinct build process using the specified configuration file.
17-17: LGTM! Thepostinstallscript addition is useful.The new script ensures that the application is built immediately upon dependency installation, improving the usability of the package.
20-25: LGTM! Dependency updates are appropriate.The updates to dependencies reflect a shift to newer versions, which may include bug fixes, performance improvements, or new features.
Also applies to: 72-74
Tools
Biome
[error] 20-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: unexpected character
<(parse)
[error] 20-20: String values must be double quoted.
(parse)
[error] 20-20: String values must be double quoted.
(parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 21-21: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 22-22: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
[error] 23-23: End of file expected
Use an array for a sequence of values:
[1, 2](parse)
apps/workflows-dashboard/src/pages/UIDefinitions/components/UIDefinitionsTable/columns.tsx (1)
64-107: LGTM! The new column definition enhances functionality.The addition of the "Collection flow" column, along with the interactive dialog component, significantly improves the user interface by providing detailed workflow information.
apps/kyb-app/src/lib/collection-flow-portable/CollectionFlowPortable.tsx (5)
1-18: LGTM! The imports are appropriate.The imported components and utilities are necessary for the functionality of the
CollectionFlowPortablecomponent.
20-25: LGTM! The interfaceICollectionFlowPortablePropsis well-defined.The interface includes all necessary properties for the
CollectionFlowPortablecomponent.
73-78: LGTM! The useEffect hook for logo loading is correctly implemented.The useEffect hook correctly resets the loaded state if the logo changes.
80-82: LGTM! The conditional rendering for approved and rejected states is correctly implemented.The component correctly renders the
ApprovedandRejectedcomponents based on theappState.
83-205: LGTM! The main return block is well-implemented.The main return block correctly renders the necessary components, including
CustomerProviderPortableandDynamicUI.apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx (2)
19-19: Verify the removal ofDOMPurify.Ensure that the removal of
DOMPurifydoes not introduce any security vulnerabilities related to HTML content sanitization.
212-215: EnsurecollectionFlowElementsis correctly defined.Verify that
collectionFlowElementscontains the necessary UI components and is correctly defined.Verification successful
collectionFlowElementsis correctly defined and contains the necessary UI components.
- The
collectionFlowElementsobject includes various UI components such asTitle,JSONForm,Cell,SubmitButton,StepperUI, andDivider.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that `collectionFlowElements` is correctly defined and contains necessary UI components. # Test: Search for the definition of `collectionFlowElements`. Expect: Correct definition with necessary UI components. rg --type javascript --type typescript 'collectionFlowElements'Length of output: 98
Script:
#!/bin/bash # Description: Verify that `collectionFlowElements` is correctly defined and contains necessary UI components. # Test: Search for the definition of `collectionFlowElements`. Expect: Correct definition with necessary UI components. rg --type js --type ts 'collectionFlowElements'Length of output: 711
Script:
#!/bin/bash # Description: Extract the definition of `collectionFlowElements` from the relevant file. # Extract the definition of `collectionFlowElements` from `collection-flow-elements.tsx`. rg --type ts 'export const collectionFlowElements' -A 50 apps/kyb-app/src/pages/CollectionFlow/collection-flow-elements.tsxLength of output: 753
apps/workflows-dashboard/public/locales/en/translation.json (3)
2-7: Ensure placeholders are correctly formatted.Verify that placeholders like
{{companyName}}are correctly formatted and used.Verification successful
Placeholders are correctly formatted.
The placeholders like
{{companyName}}in the localization strings are correctly formatted and used.
apps/workflows-dashboard/public/locales/en/translation.jsonlines 2-7Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of placeholders in localization strings. # Test: Search for the usage of placeholders. Expect: Correct formatting and usage. rg --type json '\{\{.*\}\}'Length of output: 4115
22-287: Ensure industry names are accurate and consistent.Verify that the industry names are accurate and consistent with the application's requirements.
Verification successful
Industry names are accurate and consistent.
The industry names in the English locale files are consistent with each other, and the translated names in the Chinese locale files are appropriately localized.
apps/workflows-dashboard/public/locales/en/translation.jsonapps/kyb-app/public/locales/en/translation.jsonScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the accuracy and consistency of industry names. # Test: Search for the usage of industry names. Expect: Accurate and consistent names. rg --type json 'industries'Length of output: 315
Script:
#!/bin/bash # Extract and compare industry lists from different locale JSON files. # Extract industry lists from each JSON file and save them to separate files for comparison. jq '.industries' apps/workflows-dashboard/public/locales/en/translation.json > en_industries.txt jq '.industries' apps/workflows-dashboard/public/locales/cn/translation.json > cn_industries.txt jq '.industries' apps/kyb-app/public/locales/en/translation.json > kyb_en_industries.txt jq '.industries' apps/kyb-app/public/locales/cn/translation.json > kyb_cn_industries.txt # Compare the industry lists. diff en_industries.txt cn_industries.txt > diff_en_cn.txt diff en_industries.txt kyb_en_industries.txt > diff_en_kyb_en.txt diff en_industries.txt kyb_cn_industries.txt > diff_en_kyb_cn.txt # Output the differences. cat diff_en_cn.txt cat diff_en_kyb_en.txt cat diff_en_kyb_cn.txtLength of output: 21537
289-1025: Ensure language names are accurate and consistent.Verify that the language names are accurate and consistent with the application's requirements.
Verification successful
Language names are accurate and consistent.
The language names listed in the provided snippet are accurate and consistent across the relevant JSON files in both the workflows-dashboard and kyb-app applications.
apps/workflows-dashboard/public/locales/en/translation.jsonapps/kyb-app/public/locales/en/translation.jsonapps/workflows-dashboard/public/locales/cn/translation.jsonapps/kyb-app/public/locales/cn/translation.jsonScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the accuracy and consistency of language names. # Test: Search for the usage of language names. Expect: Accurate and consistent names. rg --type json 'languages'Length of output: 842
Script:
#!/bin/bash # Extract all language names from the relevant JSON files and compare them for consistency and accuracy. # Extract language names from the en/translation.json file in workflows-dashboard jq '.languages[] | {const, title}' apps/workflows-dashboard/public/locales/en/translation.json # Extract language names from the en/translation.json file in kyb-app jq '.languages[] | {const, title}' apps/kyb-app/public/locales/en/translation.json # Extract language names from the cn/translation.json file in workflows-dashboard jq '.languages[] | {const, title}' apps/workflows-dashboard/public/locales/cn/translation.json # Extract language names from the cn/translation.json file in kyb-app jq '.languages[] | {const, title}' apps/kyb-app/public/locales/cn/translation.jsonLength of output: 37197
apps/workflows-dashboard/public/locales/cn/translation.json (5)
22-1002: Verify accuracy of country names and nationalities.The translations for country names and nationalities seem accurate. Ensure that they are consistent with standard Chinese translations.
1-9: Ensure consistency in translation keys.The initial key-value pairs seem accurate. Ensure that the keys like "step", "back", "saving", "progressSaved", etc., are consistent with other locale files to maintain uniformity.
Verification successful
Translation keys are consistent across locale files.
The keys "step", "back", "saving", and "progressSaved" are consistently used in other locale files, indicating uniformity in translation keys.
- "step": 4 occurrences
- "back": 7 occurrences
- "saving": 4 occurrences
- "progressSaved": 4 occurrences
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistency of translation keys across locale files. # Test: Search for the keys in other locale files. Expect: Same keys in other locale files. rg --type json -o '"step":' | wc -l rg --type json -o '"back":' | wc -l rg --type json -o '"saving":' | wc -l rg --type json -o '"progressSaved":' | wc -lLength of output: 170
1271-2007: Verify accuracy of language names.The translations for language names seem accurate. Ensure that they are consistent with standard Chinese translations.
1004-1269: Verify accuracy of industry names.The translations for industry names seem accurate. Ensure that they are consistent with standard Chinese translations.
10-21: Verify placeholder usage in translations.The translations for "rejected", "approved", and "success" seem accurate. Ensure that the placeholders like
{{companyName}}are correctly replaced at runtime.
| export const useCustomerQuery = (enabled = true) => { | ||
| const { data, isLoading, error } = useQuery( | ||
| // @ts-ignore | ||
| collectionFlowQuerykeys.getCustomer(), | ||
| { ...collectionFlowQuerykeys.getCustomer(), enabled }, |
There was a problem hiding this comment.
Enhance the type definition for the enabled parameter.
The enabled parameter is implicitly typed as boolean by default. Consider explicitly typing it for better clarity and maintainability.
- export const useCustomerQuery = (enabled = true) => {
+ export const useCustomerQuery = (enabled: boolean = true) => {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.
| export const useCustomerQuery = (enabled = true) => { | |
| const { data, isLoading, error } = useQuery( | |
| // @ts-ignore | |
| collectionFlowQuerykeys.getCustomer(), | |
| { ...collectionFlowQuerykeys.getCustomer(), enabled }, | |
| export const useCustomerQuery = (enabled: boolean = true) => { | |
| const { data, isLoading, error } = useQuery( | |
| // @ts-ignore | |
| { ...collectionFlowQuerykeys.getCustomer(), enabled }, |
| export const collectionFlowElements = { | ||
| h1: Title, | ||
| h3: (props: AnyObject) => <h3 className="pt-4 text-xl font-bold">{props?.options?.text}</h3>, | ||
| h4: (props: AnyObject) => <h4 className="pb-3 text-base font-bold">{props?.options?.text}</h4>, | ||
| description: (props: AnyObject) => ( | ||
| <p | ||
| className="font-inter pb-2 text-sm text-slate-500" | ||
| dangerouslySetInnerHTML={{ | ||
| __html: DOMPurify.sanitize(props.options.descriptionRaw) as string, | ||
| }} | ||
| ></p> | ||
| ), | ||
| 'json-form': JSONForm, | ||
| container: Cell, | ||
| mainContainer: Cell, | ||
| 'submit-button': SubmitButton, | ||
| stepper: StepperUI, | ||
| divider: Divider, | ||
| }; |
There was a problem hiding this comment.
Avoid using dangerouslySetInnerHTML.
Setting content using dangerouslySetInnerHTML can expose users to cross-site scripting (XSS) attacks. Consider using a safer alternative.
- dangerouslySetInnerHTML={{
- __html: DOMPurify.sanitize(props.options.descriptionRaw) as string,
- }}
+ // Consider using a safer alternative to render HTML content
+ // Example: Use a library that safely renders HTML content
+ <div>{props.options.descriptionRaw}</div>Committable suggestion was skipped due to low confidence.
Tools
Biome
[error] 17-17: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
| stateApi.getContext(), | ||
| `flowConfig.stepsProgress.${prevState}.isCompleted`, | ||
| true, | ||
| ); | ||
| await stateApi.invokePlugin('sync_workflow_runtime'); | ||
| }} | ||
| > | ||
| <DynamicUI.ActionsHandler actions={currentPage.actions} stateApi={stateApi}> | ||
| <AppShell> | ||
| <AppShell.Sidebar> | ||
| <div className="flex h-full flex-col"> | ||
| <div className="flex h-full flex-1 flex-col"> | ||
| <div className="flex flex-row justify-between gap-2 whitespace-nowrap pb-10"> | ||
| <AppShell.Navigation /> | ||
| <div> | ||
| <AppShell.LanguagePicker /> | ||
| </div> | ||
| </div> | ||
| <div className="pb-10"> | ||
| {customer?.logoImageUri && ( | ||
| <AppShell.Logo | ||
| // @ts-ignore | ||
| logoSrc={customer?.logoImageUri} | ||
| // @ts-ignore | ||
| appName={customer?.displayName} | ||
| onLoad={() => setLogoLoaded(true)} | ||
| /> | ||
| )} | ||
| </div> | ||
| <div className="min-h-0 flex-1 pb-10"> | ||
| {isLogoLoaded ? <StepperUI /> : null} | ||
| </div> | ||
| <div> | ||
| {customer?.displayName && ( | ||
| <div className="border-b pb-12"> | ||
| { | ||
| t('contact', { | ||
| companyName: customer.displayName, | ||
| }) as string | ||
| } | ||
| </div> | ||
| )} | ||
| <img src={'/poweredby.svg'} className="mt-6" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </AppShell.Sidebar> | ||
| <AppShell.Content> | ||
| <AppShell.FormContainer> | ||
| {localStorage.getItem('devmode') ? ( | ||
| <div className="flex flex-col gap-4"> | ||
| DEBUG | ||
| <div> | ||
| {currentPage | ||
| ? currentPage.stateName | ||
| : 'Page not found and state ' + state} | ||
| </div> | ||
| <div className="flex gap-4"> | ||
| <button onClick={() => stateApi.sendEvent('PREVIOUS')}> | ||
| prev | ||
| </button> | ||
| <button onClick={() => stateApi.sendEvent('NEXT')}> | ||
| next | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ) : null} | ||
| <div className="flex flex-col"> | ||
| <div className="flex items-center gap-3 pb-3"> | ||
| <StepperProgress | ||
| currentStep={ | ||
| (elements?.findIndex(page => page?.stateName === state) ?? | ||
| 0) + 1 | ||
| } | ||
| totalSteps={elements?.length ?? 0} | ||
| /> | ||
| <ProgressBar /> | ||
| </div> | ||
| <div> | ||
| <UIRenderer | ||
| elements={collectionFlowElements} | ||
| schema={currentPage.elements} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </AppShell.FormContainer> | ||
| </AppShell.Content> | ||
| </AppShell> | ||
| </DynamicUI.ActionsHandler> | ||
| </DynamicUI.TransitionListener> | ||
| </DynamicUI.Page> | ||
| ) : null; | ||
| }} | ||
| </DynamicUI.PageResolver> | ||
| ) | ||
| } | ||
| </DynamicUI.StateManager> | ||
| </DynamicUI> | ||
| </CustomerProviderPortable> | ||
| ) : null; |
There was a problem hiding this comment.
LGTM! The CollectionFlowPortable component is well-implemented.
The component is well-implemented with various hooks and utilities to manage its state and functionality.
Refactor suggestion: Simplify the conditional expression.
Based on the hint from Biome, the use of boolean literals in the conditional expression can be simplified.
- const [isLogoLoaded, setLogoLoaded] = useState(customer?.logoImageUri ? false : true);
+ const [isLogoLoaded, setLogoLoaded] = useState(!customer?.logoImageUri);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.
| export const CollectionFlowPortable: FunctionComponent<ICollectionFlowPortableProps> = ({ | |
| language, | |
| schema, | |
| context, | |
| customer, | |
| }) => { | |
| const { t } = useTranslation(); | |
| const elements = schema?.uiSchema?.elements; | |
| const definition = schema?.definition.definition; | |
| const pageErrors = usePageErrors(context ?? {}, elements || []); | |
| const isRevision = useMemo( | |
| () => pageErrors.some(error => error.errors?.some(error => error.type === 'warning')), | |
| [pageErrors], | |
| ); | |
| const filteredNonEmptyErrors = pageErrors?.filter(pageError => !!pageError.errors.length); | |
| // @ts-ignore | |
| const initialContext: CollectionFlowContext | null = useMemo(() => { | |
| const appState = | |
| filteredNonEmptyErrors?.[0]?.stateName || | |
| context?.flowConfig?.appState || | |
| elements?.at(0)?.stateName; | |
| if (!appState) return null; | |
| return { | |
| ...context, | |
| flowConfig: { | |
| ...context?.flowConfig, | |
| appState, | |
| }, | |
| state: appState, | |
| }; | |
| }, [context, elements, filteredNonEmptyErrors]); | |
| const initialUIState = useMemo(() => { | |
| return prepareInitialUIState(elements || [], context || {}, isRevision); | |
| }, [elements, context, isRevision]); | |
| // Breadcrumbs now using scrollIntoView method to make sure that breadcrumb is always in viewport. | |
| // Due to dynamic dimensions of logo it doesnt work well if scroll happens before logo is loaded. | |
| // This workaround is needed to wait for logo to be loaded so scrollIntoView will work with correct dimensions of page. | |
| const [isLogoLoaded, setLogoLoaded] = useState(customer?.logoImageUri ? false : true); | |
| useEffect(() => { | |
| if (!customer?.logoImageUri) return; | |
| // Resseting loaded state in case of logo change | |
| setLogoLoaded(false); | |
| }, [customer?.logoImageUri]); | |
| if (initialContext?.flowConfig?.appState === 'approved') return <Approved />; | |
| if (initialContext?.flowConfig?.appState == 'rejected') return <Rejected />; | |
| return definition && context ? ( | |
| <CustomerProviderPortable defaultCustomer={customer}> | |
| <DynamicUI initialState={initialUIState}> | |
| <DynamicUI.StateManager | |
| initialContext={initialContext} | |
| workflowId="1" | |
| definitionType={schema?.definition.definitionType} | |
| extensions={schema?.definition.extensions} | |
| definition={definition as State} | |
| > | |
| {({ state, stateApi }) => | |
| state === 'finish' ? ( | |
| <Success /> | |
| ) : ( | |
| <DynamicUI.PageResolver state={state} pages={elements ?? []}> | |
| {({ currentPage }) => { | |
| return currentPage ? ( | |
| <DynamicUI.Page page={currentPage}> | |
| <DynamicUI.TransitionListener | |
| onNext={async (tools, prevState) => { | |
| tools.setElementCompleted(prevState, true); | |
| set( | |
| stateApi.getContext(), | |
| `flowConfig.stepsProgress.${prevState}.isCompleted`, | |
| true, | |
| ); | |
| await stateApi.invokePlugin('sync_workflow_runtime'); | |
| }} | |
| > | |
| <DynamicUI.ActionsHandler actions={currentPage.actions} stateApi={stateApi}> | |
| <AppShell> | |
| <AppShell.Sidebar> | |
| <div className="flex h-full flex-col"> | |
| <div className="flex h-full flex-1 flex-col"> | |
| <div className="flex flex-row justify-between gap-2 whitespace-nowrap pb-10"> | |
| <AppShell.Navigation /> | |
| <div> | |
| <AppShell.LanguagePicker /> | |
| </div> | |
| </div> | |
| <div className="pb-10"> | |
| {customer?.logoImageUri && ( | |
| <AppShell.Logo | |
| // @ts-ignore | |
| logoSrc={customer?.logoImageUri} | |
| // @ts-ignore | |
| appName={customer?.displayName} | |
| onLoad={() => setLogoLoaded(true)} | |
| /> | |
| )} | |
| </div> | |
| <div className="min-h-0 flex-1 pb-10"> | |
| {isLogoLoaded ? <StepperUI /> : null} | |
| </div> | |
| <div> | |
| {customer?.displayName && ( | |
| <div className="border-b pb-12"> | |
| { | |
| t('contact', { | |
| companyName: customer.displayName, | |
| }) as string | |
| } | |
| </div> | |
| )} | |
| <img src={'/poweredby.svg'} className="mt-6" /> | |
| </div> | |
| </div> | |
| </div> | |
| </AppShell.Sidebar> | |
| <AppShell.Content> | |
| <AppShell.FormContainer> | |
| {localStorage.getItem('devmode') ? ( | |
| <div className="flex flex-col gap-4"> | |
| DEBUG | |
| <div> | |
| {currentPage | |
| ? currentPage.stateName | |
| : 'Page not found and state ' + state} | |
| </div> | |
| <div className="flex gap-4"> | |
| <button onClick={() => stateApi.sendEvent('PREVIOUS')}> | |
| prev | |
| </button> | |
| <button onClick={() => stateApi.sendEvent('NEXT')}> | |
| next | |
| </button> | |
| </div> | |
| </div> | |
| ) : null} | |
| <div className="flex flex-col"> | |
| <div className="flex items-center gap-3 pb-3"> | |
| <StepperProgress | |
| currentStep={ | |
| (elements?.findIndex(page => page?.stateName === state) ?? | |
| 0) + 1 | |
| } | |
| totalSteps={elements?.length ?? 0} | |
| /> | |
| <ProgressBar /> | |
| </div> | |
| <div> | |
| <UIRenderer | |
| elements={collectionFlowElements} | |
| schema={currentPage.elements} | |
| /> | |
| </div> | |
| </div> | |
| </AppShell.FormContainer> | |
| </AppShell.Content> | |
| </AppShell> | |
| </DynamicUI.ActionsHandler> | |
| </DynamicUI.TransitionListener> | |
| </DynamicUI.Page> | |
| ) : null; | |
| }} | |
| </DynamicUI.PageResolver> | |
| ) | |
| } | |
| </DynamicUI.StateManager> | |
| </DynamicUI> | |
| </CustomerProviderPortable> | |
| ) : null; | |
| export const CollectionFlowPortable: FunctionComponent<ICollectionFlowPortableProps> = ({ | |
| language, | |
| schema, | |
| context, | |
| customer, | |
| }) => { | |
| const { t } = useTranslation(); | |
| const elements = schema?.uiSchema?.elements; | |
| const definition = schema?.definition.definition; | |
| const pageErrors = usePageErrors(context ?? {}, elements || []); | |
| const isRevision = useMemo( | |
| () => pageErrors.some(error => error.errors?.some(error => error.type === 'warning')), | |
| [pageErrors], | |
| ); | |
| const filteredNonEmptyErrors = pageErrors?.filter(pageError => !!pageError.errors.length); | |
| // @ts-ignore | |
| const initialContext: CollectionFlowContext | null = useMemo(() => { | |
| const appState = | |
| filteredNonEmptyErrors?.[0]?.stateName || | |
| context?.flowConfig?.appState || | |
| elements?.at(0)?.stateName; | |
| if (!appState) return null; | |
| return { | |
| ...context, | |
| flowConfig: { | |
| ...context?.flowConfig, | |
| appState, | |
| }, | |
| state: appState, | |
| }; | |
| }, [context, elements, filteredNonEmptyErrors]); | |
| const initialUIState = useMemo(() => { | |
| return prepareInitialUIState(elements || [], context || {}, isRevision); | |
| }, [elements, context, isRevision]); | |
| // Breadcrumbs now using scrollIntoView method to make sure that breadcrumb is always in viewport. | |
| // Due to dynamic dimensions of logo it doesnt work well if scroll happens before logo is loaded. | |
| // This workaround is needed to wait for logo to be loaded so scrollIntoView will work with correct dimensions of page. | |
| const [isLogoLoaded, setLogoLoaded] = useState(!customer?.logoImageUri); | |
| useEffect(() => { | |
| if (!customer?.logoImageUri) return; | |
| // Resseting loaded state in case of logo change | |
| setLogoLoaded(false); | |
| }, [customer?.logoImageUri]); | |
| if (initialContext?.flowConfig?.appState === 'approved') return <Approved />; | |
| if (initialContext?.flowConfig?.appState == 'rejected') return <Rejected />; | |
| return definition && context ? ( | |
| <CustomerProviderPortable defaultCustomer={customer}> | |
| <DynamicUI initialState={initialUIState}> | |
| <DynamicUI.StateManager | |
| initialContext={initialContext} | |
| workflowId="1" | |
| definitionType={schema?.definition.definitionType} | |
| extensions={schema?.definition.extensions} | |
| definition={definition as State} | |
| > | |
| {({ state, stateApi }) => | |
| state === 'finish' ? ( | |
| <Success /> | |
| ) : ( | |
| <DynamicUI.PageResolver state={state} pages={elements ?? []}> | |
| {({ currentPage }) => { | |
| return currentPage ? ( | |
| <DynamicUI.Page page={currentPage}> | |
| <DynamicUI.TransitionListener | |
| onNext={async (tools, prevState) => { | |
| tools.setElementCompleted(prevState, true); | |
| set( | |
| stateApi.getContext(), | |
| `flowConfig.stepsProgress.${prevState}.isCompleted`, | |
| true, | |
| ); | |
| await stateApi.invokePlugin('sync_workflow_runtime'); | |
| }} | |
| > | |
| <DynamicUI.ActionsHandler actions={currentPage.actions} stateApi={stateApi}> | |
| <AppShell> | |
| <AppShell.Sidebar> | |
| <div className="flex h-full flex-col"> | |
| <div className="flex h-full flex-1 flex-col"> | |
| <div className="flex flex-row justify-between gap-2 whitespace-nowrap pb-10"> | |
| <AppShell.Navigation /> | |
| <div> | |
| <AppShell.LanguagePicker /> | |
| </div> | |
| </div> | |
| <div className="pb-10"> | |
| {customer?.logoImageUri && ( | |
| <AppShell.Logo | |
| // @ts-ignore | |
| logoSrc={customer?.logoImageUri} | |
| // @ts-ignore | |
| appName={customer?.displayName} | |
| onLoad={() => setLogoLoaded(true)} | |
| /> | |
| )} | |
| </div> | |
| <div className="min-h-0 flex-1 pb-10"> | |
| {isLogoLoaded ? <StepperUI /> : null} | |
| </div> | |
| <div> | |
| {customer?.displayName && ( | |
| <div className="border-b pb-12"> | |
| { | |
| t('contact', { | |
| companyName: customer.displayName, | |
| }) as string | |
| } | |
| </div> | |
| )} | |
| <img src={'/poweredby.svg'} className="mt-6" /> | |
| </div> | |
| </div> | |
| </div> | |
| </AppShell.Sidebar> | |
| <AppShell.Content> | |
| <AppShell.FormContainer> | |
| {localStorage.getItem('devmode') ? ( | |
| <div className="flex flex-col gap-4"> | |
| DEBUG | |
| <div> | |
| {currentPage | |
| ? currentPage.stateName | |
| : 'Page not found and state ' + state} | |
| </div> | |
| <div className="flex gap-4"> | |
| <button onClick={() => stateApi.sendEvent('PREVIOUS')}> | |
| prev | |
| </button> | |
| <button onClick={() => stateApi.sendEvent('NEXT')}> | |
| next | |
| </button> | |
| </div> | |
| </div> | |
| ) : null} | |
| <div className="flex flex-col"> | |
| <div className="flex items-center gap-3 pb-3"> | |
| <StepperProgress | |
| currentStep={ | |
| (elements?.findIndex(page => page?.stateName === state) ?? | |
| 0) + 1 | |
| } | |
| totalSteps={elements?.length ?? 0} | |
| /> | |
| <ProgressBar /> | |
| </div> | |
| <div> | |
| <UIRenderer | |
| elements={collectionFlowElements} | |
| schema={currentPage.elements} | |
| /> | |
| </div> | |
| </div> | |
| </AppShell.FormContainer> | |
| </AppShell.Content> | |
| </AppShell> | |
| </DynamicUI.ActionsHandler> | |
| </DynamicUI.TransitionListener> | |
| </DynamicUI.Page> | |
| ) : null; | |
| }} | |
| </DynamicUI.PageResolver> | |
| ) | |
| } | |
| </DynamicUI.StateManager> | |
| </DynamicUI> | |
| </CustomerProviderPortable> | |
| ) : null; |
Tools
Biome
[error] 71-71: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
Summary by CodeRabbit
New Features
CustomerProviderPortablecomponent for enhanced customer data management.CollectionFlowPortablecomponent for managing collection flow interfaces.Enhancements
toggleDevmodefeature for easier development mode switching.Bug Fixes
useCustomerQueryhook for conditional query execution.Documentation
Chores