feat: reworked exit from app for iframe scenarios #2095

chesterkmr · 2024-02-19T11:38:38Z

User description

Description

Enabled back button on approved/rejected screens even if customerUrl missing
Exit strategy is now can be configured by workflow config with config.kybOnExitAction = 'send-event' | 'redirect'

Type

enhancement

Description

Introduced APP_LANGUAGE_QUERY_KEY constant for consistent language query key usage across the app.
Implemented a new exit strategy using useAppExit hook, allowing exit actions to be configured via kybOnExitAction.
Enhanced event tracking with additional console logs for better debugging.
Added UISchemaConfig interface to support new kybOnExitAction configuration.
Adjusted exit logic in Navigation, Approved, and Success components to utilize the new exit strategy.

Changes walkthrough

Relevant files

Enhancement

10 files

App.tsx `Use Constant for Language Query Key` apps/kyb-app/src/App.tsx Replaced direct query string parsing with `APP_LANGUAGE_QUERY_KEY` constant for language setting.	+2/-1
consts.ts `Added Constant for Language Query Key` apps/kyb-app/src/common/consts/consts.ts Added `APP_LANGUAGE_QUERY_KEY` constant.	+1/-0
Navigation.tsx `Implement New Exit Strategy in Navigation` apps/kyb-app/src/components/layouts/AppShell/Navigation.tsx Replaced `useFlowTracking` hook with `useAppExit` for exit functionality. Adjusted exit logic to use `exitFromApp` function.	+4/-5
index.ts `Extend UISchema with Exit Action Configuration` apps/kyb-app/src/domains/collection-flow/types/index.ts Introduced `UISchemaConfig` interface with `kybOnExitAction` and `supportedLanguages`.	+6/-1
useAppExit.ts `New Hook for Handling App Exit Actions` apps/kyb-app/src/hooks/useAppExit/useAppExit.ts Created `useAppExit` hook to handle exit actions based on `kybOnExitAction` config.	+29/-0
useFlowTracking.ts `Enhance Event Tracking with Console Logs` apps/kyb-app/src/hooks/useFlowTracking/useFlowTracking.ts Enhanced event tracking with console logs for exit and finish actions.	+6/-1
useLanguage.ts `New Hook for Language Management` apps/kyb-app/src/hooks/useLanguage/useLanguage.ts Implemented `useLanguage` hook for managing app language setting.	+12/-0
Approved.tsx `Use New Exit Strategy in Approved Page` apps/kyb-app/src/pages/CollectionFlow/components/pages/Approved/Approved.tsx Integrated `useAppExit` hook for exit action in Approved page.	+4/-10
Success.tsx `Use New Exit Strategy in Success Page` apps/kyb-app/src/pages/CollectionFlow/components/pages/Success/Success.tsx Integrated `useAppExit` hook for exit action in Success page.	+4/-10
zod-schemas.ts `Extend ConfigSchema with Exit Action Option` services/workflows-service/src/workflow/schemas/zod-schemas.ts Added `kybOnExitAction` to `ConfigSchema` for workflow configuration.	+1/-0

Formatting

1 files

CollectionFlow.tsx `Minor Formatting Adjustment in CollectionFlow` apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx Minor formatting adjustment in CollectionFlow component.	+1/-1

✨ Usage guide:

Overview:
The describe tool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the describe tool (pr_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the describe tool is: `pr_commands = ["/describe --pr_description.add_original_user_description=true" "--pr_description.keep_original_user_title=true", ...]` meaning the `describe` tool will run automatically on every PR, will keep the original title, and will add the original user description above the generated description. Markers are an alternative way to control the generated description, to give maximal control to the user. If you set: `pr_commands = ["/describe --pr_description.use_description_markers=true", ...]` the tool will replace every marker of the form `pr_agent:marker_name` in the PR description with the relevant content, where `marker_name` is one of the following: `type`: the PR type. `summary`: the PR summary. `walkthrough`: the PR walkthrough. Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all.
Custom labels The default labels of the `describe` tool are quite generic: [`Bug fix`, `Tests`, `Enhancement`, `Documentation`, `Other`]. If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases. Examples for custom labels: `Main topic:performance` - pr_agent:The main topic of this PR is performance `New endpoint` - pr_agent:A new endpoint was added in this PR `SQL query` - pr_agent:A new SQL query was added in this PR `Dockerfile changes` - pr_agent:The PR contains changes in the Dockerfile ... The list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases. Note that Labels are not mutually exclusive, so you can add multiple label categories. Make sure to provide proper title, and a detailed and well-phrased description for each label, so the tool will know when to suggest it.
Inline File Walkthrough 💎 For enhanced user experience, the `describe` tool can add file summaries directly to the "Files changed" tab in the PR page. This will enable you to quickly understand the changes in each file, while reviewing the code changes (diffs). To enable inline file summary, set `pr_description.inline_file_summary` in the configuration file, possible values are: `'table'`: File changes walkthrough table will be displayed on the top of the "Files changed" tab, in addition to the "Conversation" tab. `true`: A collapsable file comment with changes title and a changes summary for each file in the PR. `false` (default): File changes walkthrough will be added only to the "Conversation" tab.
Utilizing extra instructions The `describe` tool can be configured with extra instructions, to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description. Examples for extra instructions: `[pr_description] extra_instructions=""" - The PR title should be in the format: '<PR type>: <title>' - The title should be short and concise (up to 10 words) - ... """` Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.
More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the describe usage page for a comprehensive guide on using this tool.

changeset-bot · 2024-02-19T11:38:42Z

⚠️ No Changeset found

Latest commit: ef385cd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2024-02-19T11:40:02Z

PR Description updated to latest commit (a4f35d5)

github-actions · 2024-02-19T11:40:12Z

PR Description updated to latest commit (a4f35d5)

github-actions · 2024-02-19T11:40:31Z

PR Description updated to latest commit (a4f35d5)

github-actions · 2024-02-19T11:40:38Z

PR Review

(Review updated until commit `a4f35d5`)

PR feedback
⏱️ Estimated effort to review [1-5]	3, because the PR involves multiple files and introduces significant changes in the application's exit strategy, requiring a thorough review of logic, integration, and potential side effects.
🧪 Relevant tests	No
🔍 Possible issues	The use of `window.location.href` for redirection might not consider SPA navigation best practices. The `useAppExit` hook assumes `customer?.websiteUrl` is always available for redirection without null checking. Hardcoded event strings in `useFlowTracking` could lead to typos or inconsistencies; consider using constants. The `exitFromApp` function in `useAppExit` does not handle cases other than 'send-event' and 'redirect-to-customer-portal', potentially leading to unhandled exit strategies.
🔒 Security concerns	No

Code feedback:

relevant file	apps/kyb-app/src/hooks/useAppExit/useAppExit.ts
suggestion	Consider adding a default case or error handling in the `useAppExit` hook to manage unexpected `kybOnExitAction` values. This ensures that the application can gracefully handle misconfigurations or future changes to the exit strategy options. [important]
relevant line	const { kybOnExitAction = 'send-event' } = uiSchema?.config \|\| {};

relevant file	apps/kyb-app/src/hooks/useFlowTracking/useFlowTracking.ts
suggestion	Extract event strings like 'ballerine.collection-flow.back-button-pressed' into constants to avoid hardcoding and potential typos. This will also make it easier to manage and update event names in the future. [medium]
relevant line	window.parent.postMessage('ballerine.collection-flow.back-button-pressed', '*');

relevant file	apps/kyb-app/src/pages/CollectionFlow/components/pages/Approved/Approved.tsx
suggestion	Ensure `customer?.websiteUrl` is checked for null or undefined before using it in the `useAppExit` hook to avoid potential runtime errors if the URL is not provided. [important]
relevant line	import { useAppExit } from '@/hooks/useAppExit/useAppExit';

relevant file	apps/kyb-app/src/App.tsx
suggestion	Use a React Router hook or context for managing SPA navigation instead of directly manipulating `window.location.href` for a more consistent and error-free user experience. [medium]
relevant line	const language = new URLSearchParams(window.location.search).get(APP_LANGUAGE_QUERY_KEY) \|\| 'en';

✨ Usage guide:

Overview:
The review tool scans the PR code changes, and generates a PR review. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.
When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...

Utilizing extra instructions The `review` tool can be configured with extra instructions, which can be used to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify the relevant sub-tool, and the relevant aspects of the PR that you want to emphasize. Examples for extra instructions: `[pr_reviewer] # /review # extra_instructions=""" In the 'possible issues' section, emphasize the following: - Does the code logic cover relevant edge cases? - Is the code logic clear and easy to understand? - Is the code logic efficient? ... """` Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.
How to enable\disable automation When you first install PR-Agent app, the default mode for the `review` tool is: `pr_commands = ["/review", ...]` meaning the `review` tool will run automatically on every PR, with the default configuration. Edit this field to enable/disable the tool, or to change the used configurations
Auto-labels The `review` tool can auto-generate two specific types of labels for a PR: a `possible security issue` label, that detects possible security issues (`enable_review_labels_security` flag) a `Review effort [1-5]: x` label, where x is the estimated effort to review the PR (`enable_review_labels_effort` flag)
Extra sub-tools The `review` tool provides a collection of possible feedbacks about a PR. It is recommended to review the possible options, and choose the ones relevant for your use case. Some of the feature that are disabled by default are quite useful, and should be considered for enabling. For example: `require_score_review`, `require_soc2_ticket`, and more.
Auto-approve PRs By invoking: `/review auto_approve` The tool will automatically approve the PR, and add a comment with the approval. To ensure safety, the auto-approval feature is disabled by default. To enable auto-approval, you need to actively set in a pre-defined configuration file the following: `[pr_reviewer] enable_auto_approval = true` (this specific flag cannot be set with a command line argument, only in the configuration file, committed to the repository) You can also enable auto-approval only if the PR meets certain requirements, such as that the `estimated_review_effort` is equal or below a certain threshold, by adjusting the flag: `[pr_reviewer] maximal_review_effort = 5`
More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the review usage page for a comprehensive guide on using this tool.

github-actions · 2024-02-19T11:40:39Z

PR Code Suggestions

Suggestions

possible issue

Handle potential undefined `uiSchema` to avoid runtime errors. Consider handling the case where `uiSchema` is undefined to avoid potential runtime errors. You could provide a default value or early return if `uiSchema` is not available. apps/kyb-app/src/hooks/useAppExit/useAppExit.ts [13] -const { kybOnExitAction = 'send-event' } = uiSchema?.config \|\| {}; +if (!uiSchema) return; +const { kybOnExitAction = 'send-event' } = uiSchema.config;

enhancement

Remove redundant `console.log` statements. Remove the redundant `console.log` statements to clean up the production code and avoid exposing potentially sensitive event information. apps/kyb-app/src/hooks/useFlowTracking/useFlowTracking.ts [6] -console.log(`Sending event: ${event}`); +// Removed console.log

best practice

Use a constant for the default language setting. Instead of manually specifying a default for `lng`, consider using a constant that can be shared across the application to ensure consistency and ease of maintenance. apps/kyb-app/src/hooks/useLanguage/useLanguage.ts [5] -lng: 'en', +lng: DEFAULT_LANGUAGE,
Use `window.location.href` for clarity. Use `window.location.href` instead of `location.href` for clarity and consistency across the codebase. apps/kyb-app/src/hooks/useAppExit/useAppExit.ts [23] -location.href = customer?.websiteUrl; +window.location.href = customer?.websiteUrl;

maintainability

Refactor language retrieval into a reusable hook. Extract the logic for retrieving the language parameter from the URL into a reusable hook or function to avoid duplication and improve maintainability. apps/kyb-app/src/App.tsx [15] -const language = new URLSearchParams(window.location.search).get(APP_LANGUAGE_QUERY_KEY) \|\| 'en'; +const language = useLanguage();

✨ Usage guide:

Overview:
The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.
When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:

/improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

With a configuration file, use the following template:

[pr_code_suggestions]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the improve tool is: `pr_commands = ["/improve --pr_code_suggestions.summarize=true", ...]` meaning the `improve` tool will run automatically on every PR, with summarization enabled. Delete this line to disable the tool from running automatically.
Utilizing extra instructions Extra instructions are very important for the `improve` tool, since they enable to guide the model to suggestions that are more relevant to the specific needs of the project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify relevant aspects that you want the model to focus on. Examples for extra instructions: `[pr_code_suggestions] # /improve # extra_instructions=""" Emphasize the following aspects: - Does the code logic cover relevant edge cases? - Is the code logic clear and easy to understand? - Is the code logic efficient? ... """` Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.
A note on code suggestions quality While the current AI for code is getting better and better (GPT-4), it's not flawless. Not all the suggestions will be perfect, and a user should not accept all of them automatically. Suggestions are not meant to be simplistic. Instead, they aim to give deep feedback and raise questions, ideas and thoughts to the user, who can then use his judgment, experience, and understanding of the code base. Recommended to use the 'extra_instructions' field to guide the model to suggestions that are more relevant to the specific needs of the project, or use the custom suggestions 💎 tool With large PRs, best quality will be obtained by using 'improve --extended' mode.
More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the improve usage page for a more comprehensive guide on using this tool.

github-actions · 2024-02-19T11:40:40Z

PR Description updated to latest commit (a4f35d5)

github-actions · 2024-02-19T11:40:43Z

Persistent review updated to latest commit a4f35d5

github-actions · 2024-02-19T11:40:44Z

PR Code Suggestions

Suggestions

possible issue

Handle potential null or undefined values in `useAppExit` hook. Consider handling the case where `uiSchema` or `customer` is `null` or `undefined` in `useAppExit` hook to avoid potential runtime errors. apps/kyb-app/src/hooks/useAppExit/useAppExit.ts [13] -const { kybOnExitAction = 'send-event' } = uiSchema?.config \|\| {}; +const { kybOnExitAction = 'send-event' } = uiSchema?.config ?? {};

enhancement

Remove or replace debug logging in `useFlowTracking`. Remove the redundant `console.log` statements in the `useFlowTracking` hook or replace them with a more sophisticated logging mechanism if debugging information is necessary. apps/kyb-app/src/hooks/useFlowTracking/useFlowTracking.ts [6] -console.log(`Sending event: ${event}`); +// Removed for production

maintainability

Improve variable naming for clarity in `useLanguage`. Use a more descriptive variable name than `location` for the search parameters in `useLanguage` hook, as `location` might be confused with the window's location object. apps/kyb-app/src/hooks/useLanguage/useLanguage.ts [9] -const [location] = useSearchParams(defaultQuery); +const [searchParams] = useSearchParams(defaultQuery);

performance

Verify memoization of callback functions for performance. Ensure that the `exitFromApp` function is properly memoized with `useCallback` or similar to avoid unnecessary re-renders or function recreations in the `Approved` component. apps/kyb-app/src/pages/CollectionFlow/components/pages/Approved/Approved.tsx [12] -const exitFromApp = useAppExit(); +// Assuming useAppExit already returns a memoized version of exit function

best practice

Ensure callback functions are memoized in hooks. Ensure that the `exit` function returned by `useAppExit` is memoized using `useCallback` to prevent unnecessary re-creations during component re-renders. apps/kyb-app/src/hooks/useAppExit/useAppExit.ts [15-26] -const exit = useCallback(() => { +// This is already correctly implemented as shown.

✨ Usage guide:

Overview:
The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.
When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:

/improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

With a configuration file, use the following template:

[pr_code_suggestions]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the improve tool is: `pr_commands = ["/improve --pr_code_suggestions.summarize=true", ...]` meaning the `improve` tool will run automatically on every PR, with summarization enabled. Delete this line to disable the tool from running automatically.
Utilizing extra instructions Extra instructions are very important for the `improve` tool, since they enable to guide the model to suggestions that are more relevant to the specific needs of the project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify relevant aspects that you want the model to focus on. Examples for extra instructions: `[pr_code_suggestions] # /improve # extra_instructions=""" Emphasize the following aspects: - Does the code logic cover relevant edge cases? - Is the code logic clear and easy to understand? - Is the code logic efficient? ... """` Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.
A note on code suggestions quality While the current AI for code is getting better and better (GPT-4), it's not flawless. Not all the suggestions will be perfect, and a user should not accept all of them automatically. Suggestions are not meant to be simplistic. Instead, they aim to give deep feedback and raise questions, ideas and thoughts to the user, who can then use his judgment, experience, and understanding of the code base. Recommended to use the 'extra_instructions' field to guide the model to suggestions that are more relevant to the specific needs of the project, or use the custom suggestions 💎 tool With large PRs, best quality will be obtained by using 'improve --extended' mode.
More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the improve usage page for a more comprehensive guide on using this tool.

github-actions · 2024-02-19T11:41:10Z

Persistent review updated to latest commit a4f35d5

github-actions · 2024-02-19T11:41:12Z

PR Code Suggestions

Suggestions

enhancement

Use a more dynamic default language setting. Consider using a more descriptive default language code than 'en'. If your application supports multiple languages, it might be beneficial to have a default language that is determined based on the user's browser settings or a configuration file. apps/kyb-app/src/App.tsx [15] -const language = new URLSearchParams(window.location.search).get(APP_LANGUAGE_QUERY_KEY) \|\| 'en'; +const language = new URLSearchParams(window.location.search).get(APP_LANGUAGE_QUERY_KEY) \|\| navigator.language.split('-')[0] \|\| 'en';
Enhance language detection to support regional dialects. To ensure the application correctly handles languages with regional dialects (e.g., 'en-US' vs 'en-GB'), consider parsing the full language code from `navigator.language` and then extracting the primary language code if needed. This approach allows for more flexibility in language support. apps/kyb-app/src/hooks/useLanguage/useLanguage.ts [11] -return location.get(APP_LANGUAGE_QUERY_KEY) \|\| defaultQuery.lng; +const fullLangCode = location.get(APP_LANGUAGE_QUERY_KEY) \|\| navigator.language \|\| defaultQuery.lng; +return fullLangCode.split('-')[0];

maintainability

Refactor exit action logic into separate functions for better maintainability.

To improve the maintainability of the useAppExit hook, consider extracting the logic for
each exit action into separate functions. This approach can make the code easier to read
and maintain, especially as more exit actions might be added in the future.

apps/kyb-app/src/hooks/useAppExit/useAppExit.ts [16-25]

-if (kybOnExitAction === 'send-event') {
-  trackExit();
-  return;
-}
-if (kybOnExitAction === 'redirect-to-customer-portal') {
+const sendEvent = () => trackExit();
+const redirectToCustomerPortal = () => {
   if (customer?.websiteUrl) {
     location.href = customer?.websiteUrl;
   }
-}
+};
+const exitActions = {
+  'send-event': sendEvent,
+  'redirect-to-customer-portal': redirectToCustomerPortal,
+};
+const exit = exitActions[kybOnExitAction] || sendEvent;
+exit();

best practice

Replace console.log with a more sophisticated logging mechanism. It's recommended to avoid using `console.log` for production code as it can expose potentially sensitive information and clutter the browser's console. Consider using a more sophisticated logging mechanism that can be disabled or configured for different environments. apps/kyb-app/src/hooks/useFlowTracking/useFlowTracking.ts [6] -console.log(`Sending event: ${event}`); +// Implement or use an existing logging utility that respects the environment (e.g., only logs in development) +logger.info(`Sending event: ${event}`);
Ensure conditional rendering is based on specific and sufficient conditions. When rendering conditional UI elements, it's a good practice to ensure that the condition is as specific as necessary to prevent rendering issues. In this case, checking for `customer?.displayName` might not be sufficient to decide whether to show the exit button. Consider adding more conditions or ensuring that `customer` object presence is enough to guarantee the display of the button. apps/kyb-app/src/pages/CollectionFlow/components/pages/Approved/Approved.tsx [32-37] -{customer?.displayName && ( +{customer && ( <div className="flex justify-center"> <Button variant="secondary" onClick={exitFromApp}> {t('backToPortal', { companyName: customer.displayName })} </Button> </div> )}

✨ Usage guide:

Overview:
The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.
When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:

/improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

With a configuration file, use the following template:

[pr_code_suggestions]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the improve tool is: `pr_commands = ["/improve --pr_code_suggestions.summarize=true", ...]` meaning the `improve` tool will run automatically on every PR, with summarization enabled. Delete this line to disable the tool from running automatically.
Utilizing extra instructions Extra instructions are very important for the `improve` tool, since they enable to guide the model to suggestions that are more relevant to the specific needs of the project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify relevant aspects that you want the model to focus on. Examples for extra instructions: `[pr_code_suggestions] # /improve # extra_instructions=""" Emphasize the following aspects: - Does the code logic cover relevant edge cases? - Is the code logic clear and easy to understand? - Is the code logic efficient? ... """` Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.
A note on code suggestions quality While the current AI for code is getting better and better (GPT-4), it's not flawless. Not all the suggestions will be perfect, and a user should not accept all of them automatically. Suggestions are not meant to be simplistic. Instead, they aim to give deep feedback and raise questions, ideas and thoughts to the user, who can then use his judgment, experience, and understanding of the code base. Recommended to use the 'extra_instructions' field to guide the model to suggestions that are more relevant to the specific needs of the project, or use the custom suggestions 💎 tool With large PRs, best quality will be obtained by using 'improve --extended' mode.
More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the improve usage page for a more comprehensive guide on using this tool.

github-actions · 2024-02-19T11:41:24Z

Persistent review updated to latest commit a4f35d5

github-actions · 2024-02-19T11:41:26Z

PR Code Suggestions

Suggestions

possible issue

Handle potential undefined `uiSchema` before destructuring to prevent runtime errors. Consider handling the scenario where `uiSchema` is `undefined` before destructuring `config`. This can prevent potential runtime errors if `useUISchemasQuery` does not return data. You can provide a default value for `kybOnExitAction` when `uiSchema` is not available. apps/kyb-app/src/hooks/useAppExit/useAppExit.ts [13] -const { kybOnExitAction = 'send-event' } = uiSchema?.config \|\| {}; +const kybOnExitAction = uiSchema?.config?.kybOnExitAction \|\| 'send-event';

enhancement

Remove redundant `console.log` statements from production code. Remove the redundant `console.log` statements to clean up the production code. Logging events like these can be useful during development or debugging but should be avoided in production code to maintain a clean and efficient codebase. apps/kyb-app/src/hooks/useFlowTracking/useFlowTracking.ts [5-7] -const event = 'ballerine.collection-flow.back-button-pressed'; -console.log(`Sending event: ${event}`); -window.parent.postMessage(event, ''); +window.parent.postMessage('ballerine.collection-flow.back-button-pressed', '');
Use the `useLanguage` hook for consistent language detection across the app. Since you're already using custom hooks for language detection in other parts of the app (`useLanguage`), consider using that same hook here for consistency and to avoid duplicating the logic for extracting the language from the URL. apps/kyb-app/src/App.tsx [15] -const language = new URLSearchParams(window.location.search).get(APP_LANGUAGE_QUERY_KEY) \|\| 'en'; +const language = useLanguage();

best practice

Use a configurable value for the default language to enhance maintainability. Instead of using a hardcoded default language ('en'), consider making this a configurable value or importing it from a constants file. This approach enhances maintainability and makes it easier to change the default language if needed. apps/kyb-app/src/hooks/useLanguage/useLanguage.ts [5] -lng: 'en', +lng: DEFAULT_LANGUAGE,

maintainability

Abstract exit actions into separate functions for better maintainability.

To improve the readability and maintainability of the useAppExit hook, consider
abstracting the logic for each exit action ('send-event' and
'redirect-to-customer-portal') into separate functions. This will make the hook easier to
extend and maintain, especially as more exit actions might be added in the future.

apps/kyb-app/src/hooks/useAppExit/useAppExit.ts [16-25]

-if (kybOnExitAction === 'send-event') {
-  trackExit();
-  return;
-}
-if (kybOnExitAction === 'redirect-to-customer-portal') {
+const sendEvent = () => trackExit();
+const redirectToCustomerPortal = () => {
   if (customer?.websiteUrl) {
     location.href = customer?.websiteUrl;
   }
-}
+};
+const exitActions = {
+  'send-event': sendEvent,
+  'redirect-to-customer-portal': redirectToCustomerPortal,
+};
+const exit = exitActions[kybOnExitAction] || sendEvent;
+exit();

✨ Usage guide:

Overview:
The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.
When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:

/improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

With a configuration file, use the following template:

[pr_code_suggestions]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the improve tool is: `pr_commands = ["/improve --pr_code_suggestions.summarize=true", ...]` meaning the `improve` tool will run automatically on every PR, with summarization enabled. Delete this line to disable the tool from running automatically.
Utilizing extra instructions Extra instructions are very important for the `improve` tool, since they enable to guide the model to suggestions that are more relevant to the specific needs of the project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Specify relevant aspects that you want the model to focus on. Examples for extra instructions: `[pr_code_suggestions] # /improve # extra_instructions=""" Emphasize the following aspects: - Does the code logic cover relevant edge cases? - Is the code logic clear and easy to understand? - Is the code logic efficient? ... """` Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.
A note on code suggestions quality While the current AI for code is getting better and better (GPT-4), it's not flawless. Not all the suggestions will be perfect, and a user should not accept all of them automatically. Suggestions are not meant to be simplistic. Instead, they aim to give deep feedback and raise questions, ideas and thoughts to the user, who can then use his judgment, experience, and understanding of the code base. Recommended to use the 'extra_instructions' field to guide the model to suggestions that are more relevant to the specific needs of the project, or use the custom suggestions 💎 tool With large PRs, best quality will be obtained by using 'improve --extended' mode.
More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the improve usage page for a more comprehensive guide on using this tool.

feat: reworked exit from app for iframe scenarios

a4f35d5

chesterkmr requested review from alonp99, tomer-shvadron and Omri-Levy February 19, 2024 11:38

github-actions bot added enhancement New feature or request bug_fix labels Feb 19, 2024

github-actions bot removed the bug_fix label Feb 19, 2024

github-actions bot added the Review effort [1-5]: 3 label Feb 19, 2024

github-actions bot removed the Review effort [1-5]: 3 label Feb 19, 2024

github-actions bot added bug_fix Review effort [1-5]: 3 labels Feb 19, 2024

github-actions bot added Review effort [1-5]: 2 and removed bug_fix Review effort [1-5]: 3 labels Feb 19, 2024

github-actions bot added Review effort [1-5]: 3 and removed Review effort [1-5]: 2 labels Feb 19, 2024

alonp99 approved these changes Feb 19, 2024

View reviewed changes

alonp99 and others added 3 commits February 19, 2024 13:57

Merge branch 'dev' into bal-1432

b07d80b

fix: minor refactoring

71af6c8

Merge branch 'dev' into bal-1432

ef385cd

chesterkmr merged commit 561c85f into dev Feb 19, 2024
9 checks passed

chesterkmr deleted the bal-1432 branch February 19, 2024 12:39

Omri-Levy mentioned this pull request Nov 4, 2024

Demo envs changes #2813

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: reworked exit from app for iframe scenarios #2095

feat: reworked exit from app for iframe scenarios #2095

chesterkmr commented Feb 19, 2024 •

edited by github-actions bot

Loading

changeset-bot bot commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024 •

edited

Loading

feat: reworked exit from app for iframe scenarios #2095

feat: reworked exit from app for iframe scenarios #2095

Conversation

chesterkmr commented Feb 19, 2024 • edited by github-actions bot Loading

User description

Description

Type

Description

Changes walkthrough

changeset-bot bot commented Feb 19, 2024 • edited Loading

⚠️ No Changeset found

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024 • edited Loading

PR Review

(Review updated until commit a4f35d5)

github-actions bot commented Feb 19, 2024 • edited Loading

PR Code Suggestions

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024 • edited Loading

PR Code Suggestions

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024 • edited Loading

PR Code Suggestions

github-actions bot commented Feb 19, 2024

github-actions bot commented Feb 19, 2024 • edited Loading

PR Code Suggestions

chesterkmr commented Feb 19, 2024 •

edited by github-actions bot

Loading

changeset-bot bot commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024 •

edited

Loading

(Review updated until commit `a4f35d5`)

github-actions bot commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024 •

edited

Loading

github-actions bot commented Feb 19, 2024 •

edited

Loading