Introduce component to dynamically render required docs

[german664]

Summary

Create new component that renders the required documents depending on the dispute reason.

Fixed issue: CXP-3062 & CXP-3643

[gemini-code-assist]

Hello @german664, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

gemini-code-assist here, providing a summary for this pull request by @german664. The main goal of this PR, as indicated by the title and description (fixing CXP-3062), is to introduce a new component within the Dispute Management flow that dynamically renders the required defense documents based on the specific dispute reason. This replaces the previous static list of file inputs with a more flexible system that can handle required, optional, and 'one or more' document requirements, allowing users to add multiple optional documents.

Highlights

• Dynamic Document Rendering: Introduces a new approach to display defense document upload fields based on the requirementLevel ('REQUIRED', 'OPTIONAL', 'ONE_OR_MORE') received from the API for a given dispute reason.
• New UI Components: Creates two new components: DefendDocumentUpload for handling single required document uploads and SelectAndUploadOptionalDoc for handling optional or 'one or more' documents, allowing users to select the document type from a dropdown before uploading.
• Flexible Optional Document Uploads: Adds functionality to dynamically add multiple optional document upload fields via a button, providing flexibility for users to submit all relevant supporting documents.
• Payload Management Updates: Enhances the DisputeFlowContext to manage the FormData payload more effectively, including new functions to add, move, and remove fields (document uploads) as the user interacts with the dynamic form.
• Improved Document Information Display: Introduces utility functions and configuration to fetch and display localized titles and descriptions for defense documents and reasons, providing clearer guidance to the user.

Changelog

Click here to see the changelog

• mocks/mock-data/disputes.ts
  • Added 'MerchantProofOfRecurringTransaction' as an optional document type to mock data.
• src/components/external/DisputeManagement/components/DefendDisputeFlow/DefendDisputeFileUpload.tsx
  • Refactored document upload section to use new dynamic components (DefendDocumentUpload, SelectAndUploadOptionalDoc).
  • Implemented logic to categorize applicable documents by requirement level (required, optional, one-or-more).
  • Added state and callbacks to manage the selection and addition/removal of optional document upload fields.
  • Updated payload handling to use new context functions (removeFieldFromDefendPayload).
  • Added a check to ensure defendDisputePayload is not null before submitting.
  • Changed a CSS class name for a typography element.
• src/components/external/DisputeManagement/components/DefendDisputeFlow/DefendDisputeFlow.scss
  • Added new CSS classes to style the dynamic document upload sections and components.
• src/components/external/DisputeManagement/components/DefendDisputeFlow/SelectAndUploadOptionalDoc.tsx
  • Created a new component to render a select dropdown for choosing optional/one-or-more document types and a corresponding file input.
  • Includes functionality to remove the optional document upload field.
• src/components/external/DisputeManagement/components/DefendDocumentUpload.tsx
  • Created a new component to render a single required document upload field with localized title and description.
• src/components/external/DisputeManagement/context/dispute/context.tsx
  • Updated DefendDisputePayload type to allow null initially.
  • Added moveFieldInDefendPayload and removeFieldFromDefendPayload functions to the context for managing the FormData payload.
  • Modified addFileToDefendPayload to handle the initial null state.
• src/components/external/DisputeManagement/utils/index.ts
  • Added utility functions getTranslationIfExists and getContent to retrieve localized content from JSON config.
  • Exported getDefenseDocumentContent and getDefenseReasonContent.
• src/components/internal/Button/Button.scss
  • Added CSS for centering button labels and a gap between icon and label.
• src/components/internal/Button/constants.ts
  • Added constant BUTTON_LABEL_CENTERED_CLASSNAME.
• src/components/internal/Button/hooks/useButton.tsx
  • Updated hook to apply centering class based on new align prop.
• src/components/internal/Button/types.ts
  • Added align prop to BaseButtonProps.
• src/components/internal/Icon/Icon.tsx
  • Imported and added the 'plus' icon component.
• src/config/disputes/defenseDocumentConfig.json
  • Added detailed configuration for defense document types, including title and help text keys.
• src/config/disputes/defenseReasonConfig.json
  • Added detailed configuration for defense reason types, including title and help text keys.
• src/images/icons/plus.svg
  • Added SVG file for the plus icon.
• src/translations/de-DE.json
  • Added German translations for new document types, UI labels, and detailed help texts.
• src/translations/en-US.json
  • Added English translations for new document types, UI labels ('Add optional document', 'Optional document', 'Select document type', 'Select one of the required options'), and detailed help texts.
• src/translations/es-ES.json
  • Added Spanish translations for new document types, UI labels, and detailed help texts.
• src/translations/fr-FR.json
  • Added French translations for new document types, UI labels, and detailed help texts.
• src/translations/pt-BR.json
  • Added Portuguese translations for new document types, UI labels, and detailed help texts.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

Components appear,
Based on dispute reason clear.
Uploads now adapt.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new component to dynamically render required and optional documents based on the dispute reason, which is a significant enhancement to the dispute management flow. The code is generally well-structured, with good use of React hooks and context for state management. The separation of concerns into new components like DefendDocumentUpload and SelectAndUploadOptionalDoc is commendable, as is the centralization of document/reason content configuration in JSON files and utility functions.

I've identified a high-severity bug in the new translation utility and a couple of medium-severity points related to UI implementation details that would be good to address. There are also a few minor suggestions for improving clarity and maintainability.

Summary of Findings

• Translation Utility Bug: The getContent utility function in src/components/external/DisputeManagement/utils/index.ts incorrectly hardcodes the translation prefix for titles, potentially leading to incorrect or missing titles for defense reasons. (Commented)
• React Key for Optional Documents: In DefendDisputeFileUpload.tsx, using doc (which can be undefined) as a key when rendering optional document slots might lead to duplicate keys if multiple empty slots are added. Using the index might be safer. (Commented)
• Clarity of required Prop: In DefendDisputeFileUpload.tsx, the required={true} prop is passed to SelectAndUploadOptionalDoc for documents labeled as optional. This could be confusing. Clarification or renaming the prop might improve understanding. (Commented)
• Redundant Code in useMemo for Document Categorization: In DefendDisputeFileUpload.tsx, the forEach callback within the useMemo for categorizing documents contains a return docs; statement. Since forEach doesn't use the return value of its callback, this statement is redundant. (Not commented due to review settings - low severity)
• Redundant Nullish Coalescing: In DefendDisputeFileUpload.tsx, in the availableOptionalDocuments memo, optionalSelectedDocuments.includes(doc.id) ?? false is used. Since includes already returns a boolean, the ?? false is redundant. (Not commented due to review settings - low severity)
• Empty ClassName Attribute: In SelectAndUploadOptionalDoc.tsx, the outermost div has className="". This is unusual and might be an oversight. (Not commented due to review settings - low severity)
• Potential Key Issue in Description Mapping: In SelectAndUploadOptionalDoc.tsx and DefendDocumentUpload.tsx, when mapping description arrays, the description string itself (desc) is used as a key. If description strings are not guaranteed to be unique, using the index might be a safer approach for keys. (Not commented due to review settings - low severity)

Merge Readiness

This pull request introduces a valuable feature for dynamically rendering dispute documents. The overall structure and implementation are good. However, there is a high-severity bug in the translation utility (utils/index.ts) that needs to be fixed to ensure correct content is displayed. Additionally, there are a couple of medium-severity suggestions for DefendDisputeFileUpload.tsx concerning React keys and prop clarity that would improve the robustness and maintainability of the UI.

I recommend addressing these issues, particularly the high-severity bug, before merging. As an AI, I am not authorized to approve pull requests; please ensure further review and approval by team members.

Verified changes ✨