feat: show additional KYC link wen create account fails #685
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request refines error handling and response formatting across both backend and frontend components. The external account creation API now returns structured JSON responses with proper HTTP status codes instead of throwing exceptions. Simultaneously, the cashout utility function streamlines duplicate account checks and error responses. On the frontend, a new state variable manages re-KYC verification URLs and conditionally displays user prompts. Additionally, the response interface is expanded with an optional property to include detailed error data. Changes
Possibly related PRs
Suggested Reviewers
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 using PR comments)
Other keywords and placeholders
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: 0
🧹 Nitpick comments (5)
src/app/api/bridge/external-account/create-external-account/route.ts (2)
79-97: Enhance error logging for better debugging.While the error handling is good, consider adding more context to the error logs.
-console.error('Bridge API request failed:', response.status, response.statusText, responseData) +console.error('Bridge API request failed:', { + status: response.status, + statusText: response.statusText, + endpoint: 'create-external-account', + responseData, + customerId +})
112-157: Consider optimizing duplicate account detection.The duplicate account detection logic could be moved to a separate function for better maintainability.
+async function findMatchingExistingAccount( + accounts: interfaces.IBridgeAccount[], + accountType: string, + accountDetails: any +): Promise<interfaces.IBridgeAccount | undefined> { + return accounts.find((account: interfaces.IBridgeAccount) => { + if (accountType === 'iban') { + return ( + account.account_details.type === 'iban' && + account.account_details.last_4 === accountDetails.accountNumber.slice(-4) + ) + } else { + return ( + account.account_details.type === 'us' && + account.account_details.last_4 === accountDetails.accountNumber.slice(-4) && + account.account_details.routing_number === accountDetails.routingNumber + ) + } + }) +}Then use it in the route:
-const existingAccount = accounts.find((account: interfaces.IBridgeAccount) => { - if (accountType === 'iban') { - return ( - account.account_details.type === 'iban' && - account.account_details.last_4 === accountDetails.accountNumber.slice(-4) - ) - } else { - return ( - account.account_details.type === 'us' && - account.account_details.last_4 === accountDetails.accountNumber.slice(-4) && - account.account_details.routing_number === accountDetails.routingNumber - ) - } -}) +const existingAccount = await findMatchingExistingAccount(accounts, accountType, accountDetails)src/utils/cashout.utils.ts (1)
224-276: Improve error handling and response type safety.The error handling could be more robust with type guards and explicit error types.
+interface BridgeApiError { + code: string; + message: string; + details?: { + code?: string; + message?: string; + requirements?: { + [key: string]: string; + }; + }; +} +function isBridgeApiError(error: any): error is BridgeApiError { + return ( + typeof error === 'object' && + error !== null && + 'code' in error && + typeof error.code === 'string' + ); +} if (!response.ok) { - if (responseData.code === 'duplicate_external_account') { + if (isBridgeApiError(responseData) && responseData.code === 'duplicate_external_account') {src/components/Global/LinkAccountComponent/index.tsx (2)
422-440: Extract duplicated error display into a reusable component.The error display logic is duplicated. Consider extracting it into a separate component.
+interface ErrorDisplayProps { + errorMessage: string; + reKYCUrl?: string; +} +const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ errorMessage, reKYCUrl }) => ( + <div className="text-start"> + {reKYCUrl ? ( + <div className="flex flex-col gap-2"> + <label className="whitespace-normal text-h8 font-normal text-red"> + {errorMessage}{' '} + <a + href={reKYCUrl} + target="_blank" + rel="noopener noreferrer" + className="underline" + aria-label="Complete additional KYC verification" + > + Click here to complete additional KYC verification. + </a> + </label> + </div> + ) : ( + <label className="text-h8 font-normal text-red">{errorMessage}</label> + )} + </div> +) -{errorState.showError && ( - <div className="text-start"> - {reKYCUrl ? ( - <div className="flex flex-col gap-2"> - <label className="whitespace-normal text-h8 font-normal text-red"> - {errorState.errorMessage}{' '} - <a href={reKYCUrl} target="_blank" rel="noopener noreferrer" className="underline"> - Click here to complete additional KYC verification. - </a> - </label> - </div> - ) : ( - <label className="text-h8 font-normal text-red">{errorState.errorMessage}</label> - )} - </div> -)} +{errorState.showError && ( + <ErrorDisplay errorMessage={errorState.errorMessage} reKYCUrl={reKYCUrl} /> +)}Also applies to: 597-615
49-49: Consider adding a loading state for the KYC URL.The reKYCUrl state could benefit from a loading state to handle the transition period.
-const [reKYCUrl, setReKYCUrl] = useState<string | undefined>(undefined) +const [reKYCUrl, setReKYCUrl] = useState<{ url?: string; isLoading: boolean }>({ isLoading: false })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/app/api/bridge/external-account/create-external-account/route.ts(4 hunks)src/components/Global/LinkAccountComponent/index.tsx(5 hunks)src/interfaces/interfaces.ts(1 hunks)src/utils/cashout.utils.ts(1 hunks)
🔇 Additional comments (2)
src/interfaces/interfaces.ts (1)
10-16: LGTM! Well-structured interface extension.The addition of the optional
detailsproperty with typed fields enhances the response interface while maintaining backward compatibility.src/app/api/bridge/external-account/create-external-account/route.ts (1)
11-14: LGTM! Consistent error response formatting.The error responses are well-structured with proper HTTP status codes and content type headers.
Also applies to: 21-24, 62-65
| return new NextResponse(JSON.stringify({ success: false, message: 'Customer ID is required' }), { | ||
| status: 400, | ||
| headers: { 'Content-Type': 'application/json' }, | ||
| }) |
There was a problem hiding this comment.
Q: why do we have a success: bool field? seems like a bad idea
There was a problem hiding this comment.
following the bridge api response format here, they return a success field, also the success field is being used to track a few errors in the create account flow
src/app/api/bridge/external-account/create-external-account/route.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/Global/LinkAccountComponent/index.tsx (2)
49-49: Enhance the state variable comment.The comment could be more descriptive about when and why re-KYC might be required.
- const [reKYCUrl, setReKYCUrl] = useState<string | undefined>(undefined) // state to set KYC url, if re-kyc verification is required + const [reKYCUrl, setReKYCUrl] = useState<string | undefined>(undefined) // Stores the URL for additional KYC verification when account creation fails due to insufficient verification level
315-330: Define error codes as constants.Consider defining the error code as a constant to improve maintainability and prevent typos.
+const ERROR_CODES = { + ENDORSEMENT_REQUIREMENTS_NOT_MET: 'endorsement_requirements_not_met' +} as const; // Later in the code: - if (response.details?.code === 'endorsement_requirements_not_met') { + if (response.details?.code === ERROR_CODES.ENDORSEMENT_REQUIREMENTS_NOT_MET) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/app/api/bridge/external-account/create-external-account/route.ts(3 hunks)src/components/Global/LinkAccountComponent/index.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/app/api/bridge/external-account/create-external-account/route.ts
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Deploy-Preview
| {reKYCUrl ? ( | ||
| <div className="flex flex-col gap-2"> | ||
| <label className="whitespace-normal text-h8 font-normal text-red"> | ||
| {errorState.errorMessage}{' '} | ||
| <a | ||
| href={reKYCUrl} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="underline" | ||
| > | ||
| Click here to complete additional KYC verification. | ||
| </a> | ||
| </label> | ||
| </div> | ||
| ) : ( | ||
| <label className="text-h8 font-normal text-red">{errorState.errorMessage}</label> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Extract duplicated KYC link rendering into a reusable component.
The KYC link rendering logic is duplicated in two places. Consider extracting it into a reusable component to improve maintainability.
+const KYCLinkError: React.FC<{ errorMessage: string; reKYCUrl: string }> = ({ errorMessage, reKYCUrl }) => (
+ <div className="flex flex-col gap-2">
+ <label className="whitespace-normal text-h8 font-normal text-red">
+ {errorMessage}{' '}
+ <a href={reKYCUrl} target="_blank" rel="noopener noreferrer" className="underline">
+ Click here to complete additional KYC verification.
+ </a>
+ </label>
+ </div>
+);
// Replace both instances with:
{reKYCUrl ? (
<KYCLinkError errorMessage={errorState.errorMessage} reKYCUrl={reKYCUrl} />
) : (
<label className="text-h8 font-normal text-red">{errorState.errorMessage}</label>
)}Also applies to: 598-614
fixes TASK-7699
Summary by CodeRabbit
Bug Fixes
New Features