feat: app event #3076
feat: app event #3076
Conversation
|
WalkthroughThe pull request introduces a wide range of updates across both frontend and backend code. In the UI, several components have been added or refactored, including new button variants, updated avatar and report cards, a refreshed layout using a sidebar provider, and removal of legacy header components. Business report and merchant monitoring flows have been streamlined with new dialogs, hooks, and schema adjustments, while shared styles and constants are updated through CSS and Tailwind configuration. On the backend, refactoring changes update import paths, integrate a new merchant monitoring module, and enhance error handling and demo access functionality. Changes
Possibly related PRs
✨ Finishing Touches
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: 10
🔭 Outside diff range comments (2)
packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx (1)
484-486:⚠️ Potential issueAdd key prop to list items.
The list items in the websiteStructureRiskIndicators mapping are missing the
keyprop.- <li className="list-decimal">{reason}</li> + <li key={reason} className="list-decimal">{reason}</li>🧰 Tools
🪛 Biome (1.9.4)
[error] 485-485: Missing key property for this element in iterable.
The order of the items may change, and having a key can help React identify which item was moved.
Check the React documentation.(lint/correctness/useJsxKeyInIterable)
services/workflows-service/src/global.d.ts (1)
15-35: 🛠️ Refactor suggestionConsider improving type safety by avoiding 'any'.
The extensive use of
anytype in the type definitions weakens type safety. Consider:
- Using more specific types instead of
any- Adding type guards if the type is truly dynamic
- Using
unknowninstead ofanywhere appropriateExample for WorkflowRuntimeData:
export type WorkflowRuntimeData = Omit<_WorkflowRuntimeData, 'context'> & { - context: any; - config: WorkflowConfig | any; + context: unknown; + config: WorkflowConfig | Record<string, unknown>; };
🧹 Nitpick comments (30)
apps/backoffice-v2/src/common/env/schema.ts (1)
43-43: LGTM! The new environment variable follows established patterns.The addition of
VITE_BALLERINE_CALENDLYas an optional string variable is well-structured and consistent with other environment variables in the schema.Consider adding a JSDoc comment above the schema to document the purpose of this Calendly integration variable:
export const EnvSchema = z.object({ + /** Calendly integration URL/key for demo access scheduling */ VITE_BALLERINE_CALENDLY: z.string().optional(),packages/ui/src/components/templates/report/components/WebsitesCompany/WebsitesCompany.tsx (2)
19-23: Add aria-label to ordered list for better accessibility.The ordered list containing reputation analysis items should have an aria-label for better screen reader context.
<ol className={ctw({ 'ps-4': !!riskIndicators?.length, })} + aria-label="Company reputation analysis findings" >
21-21: Simplify optional chaining checks.The code repeatedly checks
riskIndicators?.length. Consider storing the result in a variable to avoid redundant checks and improve readability.+ const hasRiskIndicators = !!riskIndicators?.length; + <ol className={ctw({ - 'ps-4': !!riskIndicators?.length, + 'ps-4': hasRiskIndicators, })} > - {!!riskIndicators?.length && + {hasRiskIndicators && riskIndicators.map(({ reason, sourceUrl }) => ( // ... ))} - {!riskIndicators?.length && ( + {!hasRiskIndicators && ( <li>No indications of negative company reputation were detected.</li> )}Also applies to: 24-24, 35-35
apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/hooks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic.tsx (2)
21-44: Enhance schema validation and type safety.Consider the following improvements:
- Make the validation error message more specific about the minimum length requirement
- Replace the generic "Invalid Input" message with a more descriptive one
- Use a string literal union type for deboarding reasons
const ZodDeboardingSchema = z .object({ - reason: z.string().optional(), + reason: z.enum(deboardingReasonOptions).optional(), userReason: z.string().optional(), }) .refine( ({ reason, userReason }) => { if (reason === 'other') { return !!userReason && userReason.length >= 5; } return true; }, ({ reason }) => { if (reason === 'other') { return { - message: 'Please provide a reason of at least 5 characters', + message: 'Custom reason must be at least 5 characters long', path: ['userReason'], }; } - return { message: 'Invalid Input' }; + return { message: 'Please select a valid deboarding reason' }; }, ); -const deboardingReasonOptions = [ +const deboardingReasonOptions = [ 'Fraudulent Activity Detected', 'Non-Compliance with Regulations', 'Excessive Chargebacks or Disputes', 'Business Relationship Ended', 'Other', -] as const; +] as const satisfies readonly string[]; +type DeboardingReason = typeof deboardingReasonOptions[number];Also applies to: 56-62
96-150: Apply DRY principle to mutation logic and improve type safety.Consider extracting common mutation configuration and improving error type safety.
+type MonitoringError = { + message: string; + [key: string]: unknown; +}; + +const createMonitoringMutation = (config: { + state: 'on' | 'off'; + onSuccess: () => void; +}) => useToggleMonitoringMutation({ + state: config.state, + onSuccess: config.onSuccess, + onError: (error: unknown) => { + toast.error( + t(`toast:business_monitoring_${config.state}.error`, { + errorMessage: isObject(error) && 'message' in error + ? (error as MonitoringError).message + : String(error), + }), + ); + }, +}); -const turnOnMonitoringMutation = useToggleMonitoringMutation({ +const turnOnMonitoringMutation = createMonitoringMutation({ state: 'on', onSuccess: () => { void mutateCreateNote({ content: 'Monitoring turned on', entityId: businessReport?.business.id ?? '', entityType: 'Business', noteableId: businessReport?.id ?? '', noteableType: 'Report', parentNoteId: null, }); toast.success(t(`toast:business_monitoring_on.success`)); }, - onError: error => { - toast.error( - t(`toast:business_monitoring_on.error`, { - errorMessage: isObject(error) && 'message' in error ? error.message : error, - }), - ); - }, }); -const turnOffMonitoringMutation = useToggleMonitoringMutation({ +const turnOffMonitoringMutation = createMonitoringMutation({ state: 'off', onSuccess: () => { const { reason, userReason } = form.getValues(); const content = [ 'Monitoring turned off', reason ? `with reason: ${capitalize(reason)}` : null, userReason ? `(${userReason})` : '', ] .filter(Boolean) .join(' '); void mutateCreateNote({ content, entityId: businessReport?.business.id ?? '', entityType: 'Business', noteableId: businessReport?.id ?? '', noteableType: 'Report', parentNoteId: null, }); setIsDeboardModalOpen(false); setIsDropdownOpen(false); form.reset(); toast.success(t(`toast:business_monitoring_off.success`)); }, - onError: error => { - toast.error( - t(`toast:business_monitoring_off.error`, { - errorMessage: isObject(error) && 'message' in error ? error.message : error, - }), - ); - }, });packages/ui/src/components/molecules/RiskIndicator/RiskIndicator.tsx (1)
21-21: Maintain consistency with parent component naming.For better maintainability, consider renaming
riskIndicatorstoindicatorsto match the parent component.- riskIndicators: Array<z.infer<typeof RiskIndicatorSchema>> | null; + indicators: Array<z.infer<typeof RiskIndicatorSchema>> | null;apps/backoffice-v2/src/common/components/atoms/Button/Button.tsx (1)
23-24: Consider adding hover transition for outline variant.The new 'wp-outline' variant follows the established pattern for outline button variants. However, for better UX, consider adding a transition for the hover state to match other variants.
Apply this diff to add the hover transition:
- 'wp-outline': - 'border border-wp-primary text-wp-primary hover:bg-wp-primary hover:text-wp-primary-foreground', + 'wp-outline': + 'border border-wp-primary text-wp-primary hover:bg-wp-primary hover:text-wp-primary-foreground transition-colors',packages/ui/src/components/templates/report/components/WebsiteLineOfBusiness/WebsiteLineOfBusiness.tsx (3)
17-17: Spacing update confirms design consistency.
Changing fromspace-y-8tospace-y-6minimally adjusts vertical spacing. Be sure this matches the updated spacing guidelines across the UI for consistency.
71-87: New “Content Violations Summary” card structure.
Good job encapsulating content in a separateCardblock with a tooltip. Check that the margin and padding conventions match other sections to keep the UI layout consistent.
91-155: Ensure safe rendering of user-provided data.
Displayingreason,quoteFromSource, orsourceUrldirectly may pose security risks if these fields come from untrusted sources. While React escapes HTML by default, consider sanitizing the data and verifying external URLs before rendering.services/workflows-service/src/customer/customer.controller.external.ts (1)
81-83: Improve error message specificity.The error message could be more specific about why the customer was not found.
- throw new BadRequestException('Customer not found'); + throw new BadRequestException(`Customer not found for project ID: ${currentProjectId}`);apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx (2)
11-13: Consider removingFunctionComponent
UsingFunctionComponentis optional in modern React with TypeScript; type inference is generally sufficient. If there’s no specific need for it, you could omit it for brevity.- import { FunctionComponent } from 'react';
75-289: Consider extracting repeated patterns into reusable components
This new layout code for filters, toggles, and tooltips is clear and organized. If these patterns or filter layouts appear elsewhere, consider abstracting them into smaller, reusable components to keep this page focused on high-level business logic. A radio menu component might be more suitable than a checkbox item for single-selection filters (e.g., “Type”), but the current approach works if only one item is realistically toggled.apps/backoffice-v2/src/pages/Home/Home.page.tsx (1)
16-23: Simplify className template literal.The className uses template literals unnecessarily for a single class.
- <div className={`p-10 pt-0`}> + <div className="p-10 pt-0">packages/ui/src/components/templates/report/components/Transactions/Transactions.tsx (1)
7-37: Simplify className template literals.Template literals are used unnecessarily for single classes throughout the component.
- <div className={`relative flex`}> + <div className="relative flex"> - className={`d-full max-w-[1236px]`} + className="d-full max-w-[1236px]" - className={`right-6 top-5 2xl:right-[4.5rem]`} + className="right-6 top-5 2xl:right-[4.5rem]" - <p className={`mt-3 text-xs`}> + <p className="mt-3 text-xs"> - className={`mt-3 flex items-center text-sm text-[#007AFF]`} + className="mt-3 flex items-center text-sm text-[#007AFF]" - target={`_blank`} + target="_blank" - >Talk to us <ArrowRight className={`ms-1`} size={16} /> + >Talk to us <ArrowRight className="ms-1" size={16} />apps/backoffice-v2/src/domains/business-reports/components/BusinessReportsLeftCard/BusinessReportsLeftCard.tsx (1)
17-34: Consider moving messages object outside component.The messages object is recreated on every render. Consider moving it outside the component for better performance.
+const messages: Record<string, ReactNode> = { + expired: <span className="text-destructive">Your demo account has expired!</span>, + noReports: <span className="text-destructive">You don't have any reports left!</span>, + active: ( + <span> + You have <span className="font-bold">{reportsLeft} free reports</span> left to create, + available for <span className="font-bold">{demoDaysLeft} days</span> + </span> + ), +}; export const BusinessReportsLeftCard = ({ reportsLeft, demoDaysLeft, className, }: BusinessReportsLeftCardProps) => { let state: 'expired' | 'noReports' | 'active' = 'active'; if (isNumber(demoDaysLeft) && demoDaysLeft <= 0) { state = 'expired'; } else if (isNumber(reportsLeft) && reportsLeft <= 0) { state = 'noReports'; } - const messages: Record<string, ReactNode> = { - expired: <span className="text-destructive">Your demo account has expired!</span>, - noReports: <span className="text-destructive">You don't have any reports left!</span>, - active: ( - <span> - You have <span className="font-bold">{reportsLeft} free reports</span> left to create, - available for <span className="font-bold">{demoDaysLeft} days</span> - </span> - ), - };Note: The active message template will need to be modified to be a function that accepts reportsLeft and demoDaysLeft as parameters.
apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/GetFullAccessCard.tsx (1)
20-54: Consider these enhancements to improve maintainability and accessibility.
- Add aria-label to CrownIcon for better accessibility
- Consider internationalizing the text content
- Extract gradient values to CSS variables for better maintainability
Here's how you could improve the code:
<div className={ctw( 'relative overflow-hidden rounded-md border border-wp-primary px-6 py-4', className, )} style={{ background: - 'linear-gradient(120deg, rgba(88, 78, 197, 0.22) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.1) 85%, rgba(88, 78, 197, 0.22) 92%)', + 'var(--gradient-demo-card)', }} > <div className="!w-2/3 shrink-0 space-y-4 xl:w-1/2"> <div className="flex items-center gap-2"> - <CrownIcon className="rounded-full bg-wp-primary/30 p-[6px] font-bold text-wp-primary d-7" /> + <CrownIcon + className="rounded-full bg-wp-primary/30 p-[6px] font-bold text-wp-primary d-7" + aria-label="Premium access" + /> - <span className="text-lg font-medium">Get Full Access / Learn More</span> + <span className="text-lg font-medium">{t('demo.fullAccess.title')}</span> </div> <p className="leading-relaxed"> - Get unlimited access to Ballerine, for smarter onboarding and monitoring decisions. + {t('demo.fullAccess.description')} </p>apps/backoffice-v2/src/domains/business-reports/hooks/mutations/useCreateBusinessReportMutation/useCreateBusinessReportMutation.tsx (1)
50-52: Consider extracting toast messages to constants.To improve maintainability, consider extracting the toast message keys to a constants file.
+const TOAST_MESSAGES = { + SUCCESS: 'toast:business_report_creation.success', + ERROR: 'toast:business_report_creation.error', +} as const; if (!disableToast) { - toast.success(t(`toast:business_report_creation.success`)); + toast.success(t(TOAST_MESSAGES.SUCCESS)); }apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/hooks/useCreateMerchantReportDialogLogic.tsx (2)
8-10: Consider simplifying the import path.The import path
../../../schemascould be simplified using path aliases (e.g.,@/pages/MerchantMonitoring/schemas).
24-31: Extract form default values to a constant.Consider extracting the default values object to improve maintainability and reusability.
+const defaultFormValues = { + websiteUrl: '', + companyName: undefined, + businessCorrelationId: undefined, +} as const; + const form = useForm({ - defaultValues: { - websiteUrl: '', - companyName: undefined, - businessCorrelationId: undefined, - }, + defaultValues: defaultFormValues, resolver: zodResolver(CreateBusinessReportDialogSchema), });apps/backoffice-v2/src/domains/customer/fetchers.ts (1)
42-52: Add JSDoc comments to document schema fields.The
demoAccessDetailsschema would benefit from documentation explaining the purpose and constraints of each field.+/** + * Details about the demo access configuration + * @property {number} totalReports - Total number of reports allocated + * @property {number | null} expiresAt - Timestamp when demo access expires + * @property {number | null} maxBusinessReports - Maximum allowed business reports + * @property {boolean} seenWelcomeModal - Whether welcome modal has been shown + * @property {number | null} reportsLeft - Remaining report credits + * @property {number | null} demoDaysLeft - Days remaining in demo period + */ demoAccessDetails: z .object({ totalReports: z.number(), expiresAt: z.number().nullish(), maxBusinessReports: z.number().default(10).nullish(), seenWelcomeModal: z.boolean().default(true).optional(), reportsLeft: z.number().nullish(), demoDaysLeft: z.number().nullish(), }) .optional(),apps/backoffice-v2/src/common/components/molecules/WelcomeModal/WelcomeModal.tsx (1)
16-20: Extract benefits list to a constant file.Consider moving the benefits array to a separate constants file for better maintainability and reuse.
apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/ExperienceBallerineCard.tsx (2)
88-95: Extract magic numbers from styles.The avatar size
!d-7should be defined as a constant or CSS variable for consistency.+const AVATAR_SIZE = '!d-7'; // ... - {avatarUrl && <UserAvatar fullName={fullName} className={`!d-7`} avatarUrl={avatarUrl} />} + {avatarUrl && <UserAvatar fullName={fullName} className={AVATAR_SIZE} avatarUrl={avatarUrl} />}
97-113: Extract error message to a separate component.The error message JSX should be extracted to a separate component for better maintainability.
+const ErrorMessage = ({ error }: { error: string }) => ( + <> + <span className="text-destructive">{error}</span> + <br /> + To continue using the system,{' '} + <span className="font-semibold">book a quick call with us.</span> + </> +); + <p className="leading-loose"> {error ? ( - <> - <span className="text-destructive">{error}</span> - <br /> - To continue using the system,{' '} - <span className="font-semibold">book a quick call with us.</span> - </> + <ErrorMessage error={error} /> ) : ( // ... )} </p>apps/backoffice-v2/src/pages/MerchantMonitoring/schemas.ts (1)
130-133: Simplify boolean transform.The boolean transform can be simplified using the logical NOT operator for better readability.
isCreating: z .string() - .transform(value => (value === 'true' ? true : false)) + .transform(value => value === 'true') .optional(),🧰 Tools
🪛 Biome (1.9.4)
[error] 132-132: 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)
apps/backoffice-v2/src/domains/business-reports/components/BusinessReport/BusinessReport.tsx (1)
117-141: Optimize performance with useMemo for sections mapping.The sections mapping function could be memoized to prevent unnecessary re-renders.
+ const renderedSections = useMemo( () => sections.map(section => { const titleContent = ( <div className="mb-6 mt-8 flex items-center gap-2 text-lg font-bold"> {section.Icon && <section.Icon className="d-6" />} <span>{section.title}</span> </div> ); return ( <div key={section.id} id={section.id} ref={el => (sectionRefs.current[section.id] = el)} > {section.description ? ( <ContentTooltip description={section.description}>{titleContent}</ContentTooltip> ) : ( <>{titleContent}</> )} {section.Component} </div> ); }), + [sections] + ); - {sections.map(section => { + {renderedSections}packages/ui/src/components/templates/report/hooks/useReportSections/useReportSections.tsx (1)
68-185: Optimize hook performance and improve type safety.Several improvements can be made to the hook:
- The useMemo dependency array should include individual fields instead of the entire report.data
- Null coalescing operations can be simplified
- Type safety can be improved with proper null checks
const sections = useMemo( () => [ // ... sections array - ] as BusinessReportSection[], + ] satisfies BusinessReportSection[], - [report.data], + [ + summary, + ongoingMonitoringSummary, + riskLevel, + companyReputationRiskIndicators, + contentRiskIndicators, + // ... other dependencies + ], );Also, consider simplifying null coalescing operations:
- summary={summary ?? ''} + summary={summary || ''}apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/CreateMerchantReportDialog.tsx (2)
32-54: Enhance dialog accessibility.Add ARIA labels and descriptions to improve accessibility:
- <Dialog open={open} onOpenChange={toggleOpen}> + <Dialog + open={open} + onOpenChange={toggleOpen} + aria-labelledby="dialog-title" + aria-describedby="dialog-description" + > <DialogTrigger asChild>{children}</DialogTrigger> <DialogContent className="px-0 sm:max-w-xl"> <DialogHeader className="block font-medium sm:text-center"> - <h2 className={`text-2xl font-bold`}>Create a Web Presence Report</h2> + <h2 id="dialog-title" className={`text-2xl font-bold`}>Create a Web Presence Report</h2> - <p>Try out Ballerine's Web Presence Report!</p> + <p id="dialog-description">Try out Ballerine's Web Presence Report!</p> </DialogHeader>
98-171: Improve form error handling and loading states.Consider the following improvements:
- Add error boundary for form submission failures
- Show loading state for individual fields during submission
- Add aria-busy attribute during form submission
- <form onSubmit={form.handleSubmit(onSubmit)} className="relative"> + <form + onSubmit={form.handleSubmit(onSubmit)} + className="relative" + aria-busy={isSubmitting} + > // ... form content <Button type="submit" size="wide" className={ 'mx-6 ml-auto flex items-center gap-1.5 px-6 font-bold aria-disabled:pointer-events-none aria-disabled:opacity-50' } disabled={shouldDisableForm || isSubmitting} + aria-label={isSubmitting ? 'Submitting report request...' : 'Get a Report'} >apps/backoffice-v2/src/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx (1)
85-93: Consider adding error handling for the search params update.The toggle functionality looks good, but it might be worth adding error handling for the
setSearchParamscall.const toggleOpen = () => { toggleOpenBase(); // Just remove it as it's only intended to be used once for the links that include it explicitly if (isCreating) { + try { setSearchParams({ isCreating: undefined }); + } catch (error) { + console.error('Failed to update search params:', error); + } } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/dashboard.pngis excluded by!**/*.png
📒 Files selected for processing (64)
apps/backoffice-v2/src/common/components/atoms/Button/Button.tsx(1 hunks)apps/backoffice-v2/src/common/components/atoms/UserAvatar/UserAvatar.tsx(1 hunks)apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/ExperienceBallerineCard.tsx(1 hunks)apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/GetFullAccessCard.tsx(1 hunks)apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/getDemoStateErrorText.ts(1 hunks)apps/backoffice-v2/src/common/components/molecules/GetFullAccessCard/GetFullAccessCard.tsx(0 hunks)apps/backoffice-v2/src/common/components/molecules/WelcomeModal/WelcomeModal.tsx(1 hunks)apps/backoffice-v2/src/common/components/organisms/DemoAccessWrapper/DemoAccessWrapper.tsx(1 hunks)apps/backoffice-v2/src/common/components/organisms/Dialog/Dialog.Content.tsx(1 hunks)apps/backoffice-v2/src/common/env/schema.ts(1 hunks)apps/backoffice-v2/src/domains/business-reports/components/BusinessReport/BusinessReport.tsx(1 hunks)apps/backoffice-v2/src/domains/business-reports/components/BusinessReportsLeftCard/BusinessReportsLeftCard.tsx(1 hunks)apps/backoffice-v2/src/domains/business-reports/hooks/mutations/useCreateBusinessReportMutation/useCreateBusinessReportMutation.tsx(3 hunks)apps/backoffice-v2/src/domains/customer/fetchers.ts(1 hunks)apps/backoffice-v2/src/index.css(2 hunks)apps/backoffice-v2/src/lib/blocks/variants/WebsiteMonitoringBlocks/hooks/useWebsiteMonitoringReportBlock/hooks/useWebsiteMonitoringBusinessReportTab/useWebsiteMonitoringBusinessReportTab.tsx(1 hunks)apps/backoffice-v2/src/pages/Home/Home.page.tsx(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx(2 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/CreateMerchantReportDialog.tsx(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/hooks/useCreateMerchantReportDialogLogic.tsx(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx(7 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/schemas.ts(2 hunks)apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/MerchantMonitoringBusinessReport.page.tsx(3 hunks)apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/hooks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic.tsx(2 hunks)apps/backoffice-v2/src/pages/Root/Root.page.tsx(2 hunks)apps/backoffice-v2/tailwind.config.cjs(1 hunks)packages/ui/src/components/atoms/Chart/Chart.tsx(1 hunks)packages/ui/src/components/molecules/RiskIndicator/RiskIndicator.tsx(2 hunks)packages/ui/src/components/molecules/RiskIndicatorsSummary/RiskIndicatorsSummary.tsx(2 hunks)packages/ui/src/components/templates/report/components/AdsAndSocialMedia/AdsAndSocialMedia.tsx(3 hunks)packages/ui/src/components/templates/report/components/BusinessReportSummary/BusinessReportSummary.tsx(2 hunks)packages/ui/src/components/templates/report/components/Ecosystem/Ecosystem.tsx(1 hunks)packages/ui/src/components/templates/report/components/Transactions/Transactions.tsx(1 hunks)packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx(6 hunks)packages/ui/src/components/templates/report/components/WebsiteLineOfBusiness/WebsiteLineOfBusiness.tsx(3 hunks)packages/ui/src/components/templates/report/components/WebsitesCompany/WebsitesCompany.tsx(1 hunks)packages/ui/src/components/templates/report/hooks/index.ts(1 hunks)packages/ui/src/components/templates/report/hooks/useReportSections/index.ts(1 hunks)packages/ui/src/components/templates/report/hooks/useReportSections/useReportSections.tsx(1 hunks)packages/ui/src/components/templates/report/hooks/useReportTabs/useReportTabs.tsx(4 hunks)services/workflows-service/prisma/data-migrations(1 hunks)services/workflows-service/src/alert/alert.service.intg.test.ts(1 hunks)services/workflows-service/src/app.module.ts(2 hunks)services/workflows-service/src/business-report/business-report.controller.external.ts(1 hunks)services/workflows-service/src/business-report/business-report.module.ts(1 hunks)services/workflows-service/src/business-report/business-report.service.ts(1 hunks)services/workflows-service/src/collection-flow/collection-flow.service.intg.test.ts(1 hunks)services/workflows-service/src/collection-flow/controllers/collection-flow.no-user.controller.intg.test.ts(1 hunks)services/workflows-service/src/common/guards/token-guard/token-auth.module.ts(1 hunks)services/workflows-service/src/customer/customer.controller.external.ts(4 hunks)services/workflows-service/src/customer/customer.module.ts(2 hunks)services/workflows-service/src/customer/customer.service.ts(2 hunks)services/workflows-service/src/customer/schemas/zod-schemas.ts(2 hunks)services/workflows-service/src/customer/types.ts(2 hunks)services/workflows-service/src/end-user/end-user.controller.external.intg.test.ts(1 hunks)services/workflows-service/src/env.ts(1 hunks)services/workflows-service/src/global.d.ts(1 hunks)services/workflows-service/src/merchant-monitoring/merchant-monitoring.module.ts(1 hunks)services/workflows-service/src/workflow-defintion/workflow-definition.service.intg.test.ts(2 hunks)services/workflows-service/src/workflow/schemas/zod-schemas.ts(0 hunks)services/workflows-service/src/workflow/workflow-runtime-data.repository.intg.test.ts(1 hunks)services/workflows-service/src/workflow/workflow.controller.external.intg.test.ts(1 hunks)services/workflows-service/src/workflow/workflow.controller.internal.intg.test.ts(1 hunks)services/workflows-service/src/workflow/workflow.service.intg.test.ts(1 hunks)
💤 Files with no reviewable changes (2)
- services/workflows-service/src/workflow/schemas/zod-schemas.ts
- apps/backoffice-v2/src/common/components/molecules/GetFullAccessCard/GetFullAccessCard.tsx
✅ Files skipped from review due to trivial changes (15)
- packages/ui/src/components/templates/report/hooks/useReportSections/index.ts
- services/workflows-service/src/business-report/business-report.service.ts
- services/workflows-service/src/collection-flow/controllers/collection-flow.no-user.controller.intg.test.ts
- apps/backoffice-v2/src/lib/blocks/variants/WebsiteMonitoringBlocks/hooks/useWebsiteMonitoringReportBlock/hooks/useWebsiteMonitoringBusinessReportTab/useWebsiteMonitoringBusinessReportTab.tsx
- services/workflows-service/src/workflow/workflow-runtime-data.repository.intg.test.ts
- services/workflows-service/src/end-user/end-user.controller.external.intg.test.ts
- services/workflows-service/prisma/data-migrations
- services/workflows-service/src/workflow/workflow.controller.external.intg.test.ts
- packages/ui/src/components/atoms/Chart/Chart.tsx
- services/workflows-service/src/collection-flow/collection-flow.service.intg.test.ts
- services/workflows-service/src/business-report/business-report.controller.external.ts
- services/workflows-service/src/workflow/workflow.service.intg.test.ts
- services/workflows-service/src/workflow/workflow.controller.internal.intg.test.ts
- services/workflows-service/src/alert/alert.service.intg.test.ts
- services/workflows-service/src/business-report/business-report.module.ts
🧰 Additional context used
🪛 Biome (1.9.4)
apps/backoffice-v2/src/pages/MerchantMonitoring/schemas.ts
[error] 132-132: 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)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: Analyze (javascript)
- GitHub Check: test_windows
- GitHub Check: build (windows-latest)
- GitHub Check: test_linux
- GitHub Check: build (ubuntu-latest)
- GitHub Check: lint
🔇 Additional comments (63)
packages/ui/src/components/templates/report/components/Ecosystem/Ecosystem.tsx (3)
1-2: LGTM! Import optimizations look good.The changes follow modern React practices by using specific imports and adding the necessary zod dependency.
9-9: LGTM! Type definition looks good.The change to
Array<T>syntax is a valid style choice and is more consistent with generic type syntax in TypeScript.
12-12: Verify the visual impact of spacing changes.The changes include:
- Reduced vertical spacing between elements (space-y-8 → space-y-6)
- Added padding and bold font to the header
Please ensure these spacing adjustments maintain proper visual hierarchy and alignment with the design system.
Also applies to: 14-14
apps/backoffice-v2/src/common/env/schema.ts (1)
43-43:✅ Verification successful
Verify the usage of the new environment variable.
Let's ensure this variable is properly utilized in the codebase, particularly in demo access related components mentioned in the PR summary.
🏁 Script executed:
#!/bin/bash # Search for usage of the new environment variable rg "VITE_BALLERINE_CALENDLY" -A 5Length of output: 930
Usage Verified for VITE_BALLERINE_CALENDLY
The new environment variable is correctly utilized in the demo access components. We observed its usage in the anchor tag of the
GetFullAccessCard.tsxfile, confirming that the variable is being passed appropriately for booking calls.
- Confirmed usage in:
apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/GetFullAccessCard.tsxpackages/ui/src/components/templates/report/components/WebsitesCompany/WebsitesCompany.tsx (2)
1-9: LGTM! Well-organized imports.The imports are logically grouped and all imported components and utilities are utilized in the code.
10-12: LGTM! Type definitions are clear and type-safe.The component's props have been simplified while maintaining strong typing through zod schema inference.
apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/hooks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic.tsx (2)
1-1: LGTM! Import changes align with functionality updates.The imports have been appropriately updated to reflect the removal of tab-related functionality and the addition of common utilities.
Also applies to: 4-4, 10-10, 18-18
152-158: LGTM! Search params handling is appropriately simplified.The schema has been correctly reduced to only track the
isNotesOpenstate, and thereplace: trueoption ensures clean URL updates.apps/backoffice-v2/src/common/components/atoms/UserAvatar/UserAvatar.tsx (2)
17-29: Implementation handles optional properties well!The component implementation robustly handles the new optional properties:
- Fallback to 'Anonymous' for missing names
- Proper null coalescing for avatar URL
- Consistent placeholder behavior
7-8:✅ Verification successful
Verify impact of breaking interface changes.
Making
fullNameandavatarUrloptional is a breaking change that could affect existing component usage. Ensure all consumers ofUserAvatarare updated to handle the new optional properties.Run this script to find all usages of UserAvatar:
🏁 Script executed:
#!/bin/bash # Description: Find all usages of UserAvatar component to verify they handle optional props # Search for UserAvatar imports and usage rg -A 5 "UserAvatar" # Search for direct JSX usage ast-grep --pattern '<UserAvatar $$$>'Length of output: 13110
Consumer Handling of Optional Props Verified
The interface changes making
fullNameandavatarUrloptional (and allowingnull) have been verified across multiple consumers. In each usage (e.g., in AssignDropdown, ExperienceBallerineCard, Header.BottomActions, Note, Cases.Item, and AlertsAssignDropdown), the component is already being used with appropriate null and undefined safeguards. Please confirm that any other consumers (if present) also implement similar checks or provide defaults as needed.
- Check that consumers use optional chaining or fallback values where applicable.
- Ensure that edge cases where the props might be omitted are covered.
apps/backoffice-v2/src/index.css (4)
79-81: New CSS Variables Added for Web-Presence (Light Mode)
The introduction of--web-presence-primaryand--web-presence-primary-foregroundwith the specified HSL values (and corresponding hex comments) enhances the styling capabilities and clearly documents the intended colors.
159-160: Consistency Check for Success Variables in Dark Mode
The dark mode now explicitly defines--successand--success-foregroundusing the same values as in light mode. Please verify that these values yield the intended visual contrast in dark themes, as sometimes adjustments are needed to maintain readability.
162-163: Verify Warning Colors in Dark Mode
The--warningand--warning-foregroundvariables are added in the dark block with identical values to those in the light block. Confirm that these colors maintain sufficient contrast and are aligned with design expectations for dark mode styling.
165-167: Ensure Consistency for Web-Presence Colors in Dark Mode
Mirroring the light mode setup, the dark mode now includes--web-presence-primaryand--web-presence-primary-foreground. Please confirm that these colors offer adequate contrast and adhere to the dark theme’s design guidelines.packages/ui/src/components/molecules/RiskIndicatorsSummary/RiskIndicatorsSummary.tsx (1)
8-13: LGTM! Props interface improvements.Making
searchandLinkoptional with proper defaults improves component flexibility.packages/ui/src/components/molecules/RiskIndicator/RiskIndicator.tsx (1)
20-22: LGTM! Type safety improvements.Good improvements:
- Making
searchandLinkoptional aligns with parent component- Using
Array<T>is more explicit thanT[]- Props are properly typed
packages/ui/src/components/templates/report/components/BusinessReportSummary/BusinessReportSummary.tsx (1)
14-32: LGTM! Props interface improvements.Good improvements:
- Making
searchandLinkoptional improves flexibility- Nullable
riskLevelimproves type safety- Props structure aligns with child components
packages/ui/src/components/templates/report/hooks/useReportTabs/useReportTabs.tsx (1)
64-64: LGTM! Type safety improvement.Using
as constassertion improves type safety by making the array readonly.packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx (4)
58-62: Type declarations updated for better readability.The change from array shorthand notation (
Type[]) to explicitArray<Type>syntax improves code consistency and readability.
213-229: Improved tooltip content structure.The tooltip content has been properly structured with semantic HTML and consistent alignment properties.
230-231: Enhanced responsive layout with breakpoints.The layout has been improved with:
- Flexible column/row arrangement using
flex-col/flex-row- Proper height management with
h-auto/h-full- Responsive width adjustments using the
2xlbreakpointAlso applies to: 338-339
344-344:❓ Verification inconclusive
Chart dimensions need validation.
Please verify that the chart dimensions work correctly across different screen sizes:
- ResponsiveContainer width reduced to 90%
- Pie chart width set to 50%
- Legend wrapper style uses fixed width percentage
Also applies to: 354-354, 370-370
🏁 Script executed:
#!/bin/bash # Search for similar chart implementations to validate dimension patterns ast-grep --pattern 'ResponsiveContainer width="90%"' ast-grep --pattern 'Pie width="50%"' ast-grep --pattern 'wrapperStyle={{ width: "50%" }}'Length of output: 32302
Action Required: Validate Chart Dimensions and Responsive Behavior
The WebsiteCredibility component currently uses hardcoded dimensions:
- The
<ResponsiveContainer>is set to 90% width.- The Pie chart is configured with a width of 50%.
- The legend wrapper style also applies a fixed percentage width.
The verification search did not locate matching patterns in UI components (the results only returned unrelated matches from migration files). This means there isn’t a clear precedent in the UI codebase to confirm if this approach is consistent.
Please manually test the rendered charts across various screen sizes (mobile, tablet, desktop) to ensure that:
- The ResponsiveContainer’s set width of 90% provides the desired layout.
- The Pie chart’s 50% width and fixed legend styling work as expected in different responsive scenarios.
Also, verify that similar implementations in other chart components (if any) align with these design choices. Adjustments may be needed based on your testing results.
apps/backoffice-v2/src/common/components/atoms/Button/Button.tsx (1)
22-22:❓ Verification inconclusive
LGTM! Verify color tokens.
The new 'wp-primary' variant follows the established pattern for primary button variants. The styling is consistent with other variants in the codebase.
Run the following script to verify the color tokens are defined in the CSS variables:
🏁 Script executed:
#!/bin/bash # Description: Verify that the required CSS variables for web presence colors are defined. # Test: Search for web presence color variable definitions. Expect: CSS variable definitions. rg -g '*.css' $'--web-presence-primary|--web-presence-primary-foreground'Length of output: 533
LGTM – please manually verify the CSS definitions for the new color tokens.
The new
'wp-primary'variant is styled consistently with our existing primary button variants. However, the previous verification script produced an error due to an incorrect argument. Please confirm that the intended color tokens are defined. Specifically, verify that:
- The background token (
bg-wp-primary)- The text token (
text-wp-primary-foreground)are present in your CSS. For example, you can run the following commands from the repository root:
#!/bin/bash # Verify that the declared tokens are present in the CSS files rg -g '*.css' 'bg-wp-primary' rg -g '*.css' 'text-wp-primary-foreground'Once you’ve confirmed these tokens are defined, we can consider the variant validated.
packages/ui/src/components/templates/report/components/WebsiteLineOfBusiness/WebsiteLineOfBusiness.tsx (3)
1-3: Imports look good.
No issues spotted with these new imports from@ballerine/common,react, andzod.
8-8: Import for RiskIndicators confirmed.
The import path and usage ofRiskIndicatorsseem properly aligned with theriskIndicatorsprop.
88-90: Filtering out ‘positive’ risk levels only.
Confirm that excluding only'positive'risk indicators aligns with your business logic. If'neutral'or other levels should also be hidden, consider broadening this filter.services/workflows-service/src/merchant-monitoring/merchant-monitoring.module.ts (1)
1-8: LGTM! Well-structured NestJS module.The module follows NestJS best practices by properly providing and exporting the MerchantMonitoringClient.
services/workflows-service/src/customer/customer.module.ts (1)
10-10: LGTM! Proper integration of MerchantMonitoringModule.The module is correctly imported and added to the imports array, enabling merchant monitoring features in the CustomerModule.
Also applies to: 13-13
services/workflows-service/src/global.d.ts (1)
13-14: Please clarify the FIXME comment.The FIXME comment lacks context and details about the problem. Please provide more information about what needs to be fixed.
services/workflows-service/src/common/guards/token-guard/token-auth.module.ts (1)
13-13: LGTM! Proper integration of MerchantMonitoringClient.The client is correctly imported and added to the providers array, making it available for dependency injection within the TokenAuthModule.
Also applies to: 17-17
services/workflows-service/src/customer/schemas/zod-schemas.ts (1)
30-32:✅ Verification successful
Ensure safe timestamp conversion.
The multiplication of Unix timestamp by 1000 could potentially overflow for dates far in the future.
🏁 Script executed:
#!/bin/bash # Check if the timestamp multiplication could overflow python3 << EOF max_safe_timestamp = 9007199254740991 // 1000 # Max safe integer in JavaScript current_timestamp = $(date +%s) print(f"Current timestamp: {current_timestamp}") print(f"Max safe timestamp: {max_safe_timestamp}") print(f"Years until overflow: {(max_safe_timestamp - current_timestamp) / (365 * 24 * 60 * 60)}") EOFLength of output: 125
Safe Timestamp Conversion Verified
After reviewing the code and running the overflow check, the multiplication by 1000 on the Unix timestamp poses no risk for realistic values. The computed "years until overflow" (≈285,561 years) confirms that the conversion is safe for any expected timestamp. No changes are required at this time.
services/workflows-service/src/customer/types.ts (1)
66-68: LGTM!The
TDemoCustomertype correctly extendsTCustomerWithFeatureswhile replacing the config property to include demo access details.services/workflows-service/src/customer/customer.service.ts (1)
98-99: LGTM!The return type casting has been simplified and correctly typed.
services/workflows-service/src/env.ts (1)
97-97: LGTM! Verify the default demo duration value.The addition of
DEFAULT_DEMO_DURATION_DAYSwith a default value of 14 days is well-structured. However, let's verify if this default duration aligns with business requirements.Please confirm:
- Is 14 days the agreed-upon default duration for demos?
- Should there be a minimum/maximum constraint on this value?
services/workflows-service/src/app.module.ts (1)
52-52:✅ Verification successful
LGTM! Verify module dependencies.
The
MerchantMonitoringModuleis properly imported and added to the module imports.Let's verify the module's dependencies and initialization:
Also applies to: 94-94
🏁 Script executed:
#!/bin/bash # Check if MerchantMonitoringModule has any required dependencies ast-grep --pattern 'class MerchantMonitoringModule { $$$ }'Length of output: 187
LGTM! The
MerchantMonitoringModuleis correctly imported and added to the imports array, and our verification confirms that it doesn't require any additional dependencies.services/workflows-service/src/workflow-defintion/workflow-definition.service.intg.test.ts (1)
18-18:✅ Verification successful
LGTM! Verify test coverage.
The
MerchantMonitoringModuleis properly imported and added to the test module configuration.Let's verify the test coverage for the merchant monitoring functionality:
Also applies to: 60-60
🏁 Script executed:
#!/bin/bash # Check for merchant monitoring related test cases rg -A 5 "merchant.*monitoring" --type tsLength of output: 54671
LGTM – MerchantMonitoringModule integration approved!
TheMerchantMonitoringModuleis correctly imported and added to the test module configuration inservices/workflows-service/src/workflow-defintion/workflow-definition.service.intg.test.ts. The extensive grep search confirms that merchant monitoring functionality is well-covered across multiple test cases and code segments. Please ensure that the relevant tests are being executed as expected.apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx (3)
3-9: No issues with these new imports
All newly imported components from@ballerine/uiappear to be used properly.
15-28: Imports look good
The added local atom, molecule, and organism imports are logically grouped. Keep them as is unless a linter or build tool suggests any rearrangement.
67-71: Variables destructured correctly
The additional parameters (firstName,fullName,avatarUrl,toggleOpen, andCreateReportButtonWrapper) appear consistent with the new “demo access” flow.packages/ui/src/components/templates/report/hooks/index.ts (1)
2-2: Export addition acknowledged
ExportinguseReportSectionsis consistent with the existing pattern. No issues found.apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/getDemoStateErrorText.ts (1)
1-19: Verify combined condition for expired trial and used-up credits
Currently, ifdemoDaysLeft <= 0, no further checks are performed, potentially missing the case where both time and credits are exhausted. Confirm that returning only the first encountered message is the desired behavior.apps/backoffice-v2/src/pages/Home/Home.page.tsx (2)
1-10: LGTM!The imports are well-organized, and the hook destructuring is clean, only including the necessary variables.
12-14: LGTM!The loading state is handled correctly with a clear conditional check.
apps/backoffice-v2/src/common/components/organisms/DemoAccessWrapper/DemoAccessWrapper.tsx (3)
1-13: LGTM!The imports are well-organized, and the props type is correctly defined using Omit to exclude className from ExperienceBallerineCardProps.
14-18: LGTM!The sandbox environment rendering is handled correctly with a clear condition.
19-31: LGTM!The layout is well-structured with consistent spacing and sizing for the cards.
apps/backoffice-v2/src/domains/business-reports/components/BusinessReportsLeftCard/BusinessReportsLeftCard.tsx (2)
1-10: LGTM!The imports are well-organized, and the props type is clearly defined with proper handling of null/undefined values.
36-46: LGTM!The rendering is clean and well-structured, with proper className composition using the ctw utility.
apps/backoffice-v2/src/common/components/organisms/Dialog/Dialog.Content.tsx (1)
32-32: LGTM!Setting the
displayNameto match the underlying primitive component enhances debugging and development tools.apps/backoffice-v2/src/pages/Root/Root.page.tsx (1)
2-9: LGTM!The changes improve code organization through import reordering and correctly integrate the new
WelcomeModalcomponent within theProviderswrapper.Also applies to: 50-50
apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/GetFullAccessCard.tsx (2)
9-11: LGTM!Props interface is well-defined and follows TypeScript best practices.
13-19: LGTM!The conditional rendering logic effectively handles loading states and demo account checks.
apps/backoffice-v2/src/domains/business-reports/hooks/mutations/useCreateBusinessReportMutation/useCreateBusinessReportMutation.tsx (2)
9-14: LGTM!The mutation options are well-typed and the destructuring with default values is handled correctly.
22-32: LGTM!Making
companyNameandoperatingCountryoptional improves the flexibility of the mutation.apps/backoffice-v2/src/pages/MerchantMonitoring/schemas.ts (1)
136-156:❓ Verification inconclusive
Verify URL regex pattern and enhance error messages.
The URL regex pattern is complex and should be verified against edge cases. Consider:
- Using a well-tested URL validation library instead of a custom regex
- Adding more descriptive error messages for validation failures
🌐 Web query:
What are the recommended libraries for URL validation in TypeScript?💡 Result:
Validating URLs in TypeScript can be efficiently handled using both native JavaScript methods and specialized libraries. Here are the top recommended approaches:
1. Native JavaScript Validation
Use the
URLconstructor with error handling for basic validation:function isValidUrl(url: string): boolean { try { new URL(url); return true; } catch { return false; } }
- HTTP/HTTPS-Specific Check:
function isValidHttpUrl(url: string): boolean { try { const parsed = new URL(url); return parsed.protocol === 'http:' || parsed.protocol === 'https:'; } catch { return false; } }This method avoids external dependencies[1][7].
2. Specialized Libraries
@the-node-forge/url-validator
A robust TypeScript-first library offering:
- Format validation
- Live URL reachability checks
- Protocol restriction (
http/https)import { validateUrl, isUrlLive } from '@the-node-forge/url-validator'; validateUrl('https://example.com'); // true/false await isUrlLive('https://example.com'); // Promise<true/false>Ideal for security-critical applications[2].
Zod
A schema-validation library with strong TypeScript integration:
import { z } from 'zod'; const urlSchema = z.string().url(); urlSchema.parse('https://example.com'); // throws if invalidBest for projects already using Zod for broader data validation[4][6].
Lightweight NPM Packages
is-url(basic URL check):import isUrl from 'is-url'; isUrl('https://example.com'); // true/false
is-url-http(HTTP-only check):import isUrlHttp from 'is-url-http'; isUrlHttp('mailto:test@test.com'); // falseSimple solutions for basic use cases[1][5].
Comparison Table
Method/Library Features TypeScript Support Use Case Native URLConstructorBasic validation ✅ Quick checks @The-Node-Forge Live checks, strict protocols ✅ Security-focused apps Zod Schema validation + type inference ✅ Projects using Zod ecosystem is-url/is-url-httpSimple syntax check ✅ Minimalist needs
For most projects needing strict security or live URL verification, @the-node-forge/url-validator is recommended[2]. Teams already leveraging schema validation should opt for Zod[4][6]. Use native methods when avoiding dependencies[1][7].
Citations:
- 1: https://www.freecodecamp.org/news/how-to-validate-urls-in-javascript/
- 2: https://www.npmjs.com/package/@the-node-forge/url-validator?activeTab=readme
- 3: https://dev.to/shanu001x/top-5-validation-libraries-for-javascript-in-2024-35la
- 4: https://www.jacobparis.com/content/typescript-runtime-validation
- 5: https://github.com/robertohuertasm/is-valid-url
- 6: https://dev.to/sheraz4194/zod-vs-valibot-which-validation-library-is-right-for-your-typescript-project-303d
- 7: https://snyk.io/blog/secure-javascript-url-validation/
- 8: https://www.npmjs.com/package/@types/valid-url
- 9: https://classic.yarnpkg.com/en/package/@types/valid-url
- 10: https://github.com/colinhacks/zod
Enhance URL validation and error messaging.
The current custom regex for URL validation is quite complex and might not easily cover all edge cases. Based on best practices, consider these improvements:
Switch to a robust validation approach:
If feasible, use Zod’s built-in.url()method—this leverages well-tested logic and improves maintainability, or adopt a dedicated URL validation library like @the-node-forge/url-validator.Improve error messages:
Whether you keep the custom regex or switch to a different method, update the error message to clearly indicate expected URL formatting (e.g., specifying that the URL should begin with http:// or https:// and follow standard domain rules).apps/backoffice-v2/src/domains/business-reports/components/BusinessReport/BusinessReport.tsx (1)
29-49:⚠️ Potential issueFix potential memory leak in IntersectionObserver cleanup.
The useEffect cleanup depends on an empty dependency array, but it should include
sectionRefsto properly cleanup and reattach observers when sections change.return () => observer.disconnect(); - }, []); + }, [sectionRefs]);Likely an incorrect or invalid review comment.
packages/ui/src/components/templates/report/components/AdsAndSocialMedia/AdsAndSocialMedia.tsx (1)
105-219: LGTM! The component has been well-structured.The refactored component demonstrates several improvements:
- Clean separation of concerns with clear conditional rendering
- Consistent error states for missing profiles
- Proper type handling with TypeScript
- Reusable card components for different social media providers
apps/backoffice-v2/src/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx (2)
49-60: LGTM! Well-implemented demo access state handling.The demo access state is properly managed with clear error handling and feature toggling based on demo state.
213-219: LGTM! Clean conditional rendering pattern.The
CreateReportButtonWrappercomponent effectively handles the conditional rendering based on feature flags.apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/MerchantMonitoringBusinessReport.page.tsx (4)
47-47: LGTM!The import statement follows the project's module structure and aligns with the component's new architecture.
155-155: LGTM!The padding adjustments maintain horizontal spacing while adding top padding for better visual hierarchy.
338-348: LGTM!The loading state effectively mirrors the content structure using appropriately sized and positioned skeleton components, providing a smooth loading experience.
349-351:❓ Verification inconclusive
Verify prop type validation and error handling.
The integration looks good, but let's ensure proper type validation and error handling.
Run the following script to check the prop types and error boundaries:
🏁 Script executed:
#!/bin/bash # Description: Verify BusinessReport component's prop types and error handling # Check prop types definition ast-grep --pattern 'interface $props { report: $_ }' # Check for error boundary implementation ast-grep --pattern 'class $_ extends ErrorBoundary { $$$ }'Length of output: 120
Action: Manually verify prop type validation and error handling
The integration for the BusinessReport component looks correct in terms of conditionally rendering it and passing the business report data. However, our initial automated search did not return explicit evidence of:
- Defined prop types (e.g., an interface such as BusinessReportProps or other type checks).
- An error boundary implementation (e.g., a subclass of ErrorBoundary wrapping BusinessReport).
Please manually inspect the BusinessReport component and its related files to ensure that:
- Prop type validation is in place (using TypeScript interfaces or an alternative mechanism).
- Proper error handling is implemented, either via a dedicated ErrorBoundary or within the component.
Once confirmed, no further changes would be required.
packages/ui/src/components/molecules/RiskIndicatorsSummary/RiskIndicatorsSummary.tsx
Show resolved
Hide resolved
packages/ui/src/components/templates/report/hooks/useReportTabs/useReportTabs.tsx
Show resolved
Hide resolved
...onitoring/components/CreateMerchantReportDialog/hooks/useCreateMerchantReportDialogLogic.tsx
Show resolved
Hide resolved
apps/backoffice-v2/src/common/components/molecules/WelcomeModal/WelcomeModal.tsx
Show resolved
Hide resolved
apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/ExperienceBallerineCard.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (7)
.changeset/new-forks-own.md (1)
22-24: Clarify the "bmp" EntryThe new addition of the
bmpentry (line 23) is ambiguous. If this is intended as a marker or a shorthand for an additional action, please add a comment or descriptive note explaining its purpose. If it is unintended, consider removing it to avoid confusion.A possible diff suggestion for clarification is as follows:
- bmp + # bmp: [Describe purpose or remove if unintentional]sdks/workflow-node-sdk/CHANGELOG.md (1)
7-9: Clarify the “bmp” Entry.
The line- bmpis ambiguous. Its purpose isn’t immediately clear—if it is intended as shorthand or a marker, please provide additional context or revise it to a more descriptive note. This will help future maintainers understand its significance.packages/rules-engine/CHANGELOG.md (1)
3-8: Clarify the Patch Changes DescriptionThe new version entry "0.5.33-demo-200225.0" is properly integrated using the established header format. However, the patch details "- bmp" are ambiguous and do not clearly describe the changes introduced. Given that this release may be related to the "app event" feature per the PR title, please ensure that the summary in the changelog provides a precise description of the modifications or enhancements made. This will help maintain clarity for users and other developers reviewing the changelog.
apps/kyb-app/package.json (1)
4-4: Version Update Consistency Check
The version has been updated to"0.3.131-demo-200225.0". Please ensure that this versioning scheme (with the-demo-200225.0suffix) is applied consistently across all demo builds and is documented in your release notes.examples/report-generation-example/CHANGELOG.md (1)
7-7: Possible Typo in Changelog
The entry- bmpappears under the new version heading. Please verify if this is an intentional note or a leftover typographical error that should be removed.packages/blocks/CHANGELOG.md (1)
3-10: Clarify New Changelog Entry & Remove Extraneous TextThe new version entry "0.2.35-demo-200225.0" is added correctly with the updated dependency (@ballerine/common@0.9.76-demo-200225.0). However, the bullet point
- bmpon line 7 is unclear and appears extraneous. Please either remove it or replace it with descriptive text that explains the change.examples/headless-example/CHANGELOG.md (1)
3-10: Clarify Headless Example Changelog Entry & Remove Extraneous TextThe new version entry "0.3.95-demo-200225.0" correctly shows the updated dependencies for both @ballerine/common and @ballerine/workflow-browser-sdk. However, the bullet point
- bmpon line 7 is ambiguous. Please remove or update this line with clear, descriptive information.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (42)
.changeset/new-forks-own.md(1 hunks).changeset/pre.json(1 hunks)apps/backoffice-v2/CHANGELOG.md(1 hunks)apps/backoffice-v2/package.json(3 hunks)apps/kyb-app/CHANGELOG.md(1 hunks)apps/kyb-app/package.json(3 hunks)apps/workflows-dashboard/CHANGELOG.md(1 hunks)apps/workflows-dashboard/package.json(3 hunks)examples/headless-example/CHANGELOG.md(1 hunks)examples/headless-example/package.json(2 hunks)examples/report-generation-example/CHANGELOG.md(1 hunks)examples/report-generation-example/package.json(2 hunks)packages/blocks/CHANGELOG.md(1 hunks)packages/blocks/package.json(3 hunks)packages/common/CHANGELOG.md(1 hunks)packages/common/package.json(2 hunks)packages/config/CHANGELOG.md(1 hunks)packages/config/package.json(1 hunks)packages/eslint-config-react/CHANGELOG.md(1 hunks)packages/eslint-config-react/package.json(2 hunks)packages/eslint-config/CHANGELOG.md(1 hunks)packages/eslint-config/package.json(1 hunks)packages/react-pdf-toolkit/CHANGELOG.md(1 hunks)packages/react-pdf-toolkit/package.json(2 hunks)packages/rules-engine/CHANGELOG.md(1 hunks)packages/rules-engine/package.json(2 hunks)packages/ui/CHANGELOG.md(1 hunks)packages/ui/package.json(3 hunks)packages/workflow-core/CHANGELOG.md(1 hunks)packages/workflow-core/package.json(3 hunks)sdks/web-ui-sdk/CHANGELOG.md(1 hunks)sdks/web-ui-sdk/package.json(2 hunks)sdks/workflow-browser-sdk/CHANGELOG.md(1 hunks)sdks/workflow-browser-sdk/package.json(2 hunks)sdks/workflow-node-sdk/CHANGELOG.md(1 hunks)sdks/workflow-node-sdk/package.json(2 hunks)services/websocket-service/CHANGELOG.md(1 hunks)services/websocket-service/package.json(1 hunks)services/workflows-service/CHANGELOG.md(1 hunks)services/workflows-service/package.json(3 hunks)services/workflows-service/prisma/data-migrations(1 hunks)websites/docs/package.json(1 hunks)
✅ Files skipped from review due to trivial changes (22)
- packages/eslint-config/package.json
- packages/config/package.json
- services/websocket-service/package.json
- packages/config/CHANGELOG.md
- packages/eslint-config-react/CHANGELOG.md
- .changeset/pre.json
- packages/workflow-core/CHANGELOG.md
- packages/eslint-config/CHANGELOG.md
- packages/ui/CHANGELOG.md
- packages/eslint-config-react/package.json
- packages/react-pdf-toolkit/package.json
- services/websocket-service/CHANGELOG.md
- sdks/web-ui-sdk/CHANGELOG.md
- apps/kyb-app/CHANGELOG.md
- services/workflows-service/CHANGELOG.md
- packages/common/package.json
- sdks/workflow-browser-sdk/CHANGELOG.md
- apps/workflows-dashboard/CHANGELOG.md
- packages/common/CHANGELOG.md
- examples/report-generation-example/package.json
- apps/backoffice-v2/CHANGELOG.md
- packages/workflow-core/package.json
🚧 Files skipped from review as they are similar to previous changes (1)
- services/workflows-service/prisma/data-migrations
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: test_windows
- GitHub Check: test_linux
- GitHub Check: build (windows-latest)
- GitHub Check: Analyze (javascript)
- GitHub Check: build (ubuntu-latest)
- GitHub Check: lint
🔇 Additional comments (39)
sdks/web-ui-sdk/package.json (2)
24-24: Version Update with Demo TagThe package version has been updated from
"1.5.76"to"1.5.77-demo-200225.0". This change aligns with the demo release strategy as observed in other packages. Please ensure that all documentation and internal tooling referencing the version number are updated accordingly.
99-99: Dependency Version BumpThe
"@ballerine/common"dependency has been updated from"0.9.75"to"0.9.76-demo-200225.0", matching the demo version convention. Verify that any module relying on this dependency is compatible with the new version and that related version constraints are updated if necessary.packages/rules-engine/package.json (3)
4-4: Version Bump Verification
The package version has been updated to"0.5.33-demo-200225.0". Please ensure that this version bump aligns with your release strategy and that related changelog entries (if any) are updated accordingly.
37-37: Dependency Update for @ballerine/config
The dependency version for"@ballerine/config"has been updated to"^1.1.33-demo-200225.0". Confirm that this update is consistent with the overall demo versioning scheme and that there are no breaking changes introduced by this dependency version bump.
39-39: Dependency Update for @ballerine/eslint-config
The version for"@ballerine/eslint-config"is now"^1.1.33-demo-200225.0". Please verify that this update maintains the intended linting rules and configuration consistency across your packages.websites/docs/package.json (3)
20-20: Updated Dependency Version for @ballerine/common
The dependency version has been updated to^0.9.76-demo-200225.0as per the new demo versioning scheme. Ensure this aligns with the documented release strategy and compatibility expectations for downstream consumers.
26-26: Updated Dev Dependency Version for @ballerine/config
The devDependency version is now set to^1.1.33-demo-200225.0, which is in line with the recent changes in versioning. Confirm that this update is reflected in any related configuration or integration tests.
27-27: Updated Dev Dependency Version for @ballerine/eslint-config
The version update to^1.1.33-demo-200225.0ensures consistency with the new demo versioning scheme across the project. Please verify that no linting rules or configuration issues arise from this update.packages/react-pdf-toolkit/CHANGELOG.md (2)
3-4: Validate New Version Header Format
The new version entry1.2.78-demo-200225.0is clearly introduced at the top of the changelog. Ensure that the versioning scheme (including the-demo-200225.0suffix) conforms to your established practices and that any downstream processes or scripts consuming this changelog can parse the version correctly.
8-10: Review Dependency Update Details
The updated dependencies for@ballerine/ui@0.5.78-demo-200225.0and@ballerine/config@1.1.33-demo-200225.0are clearly listed. Please verify that these versions are compatible with the rest of the system and that any required migration or documentation updates have been handled..changeset/new-forks-own.md (1)
1-21: Review Patch DeclarationsThe patch declarations for the listed Ballerine packages (lines 2–20) are correctly formatted and indicate that minor (“patch”) updates have been applied. This segment meets the changeset format standards and clearly states the package update intentions.
sdks/workflow-node-sdk/CHANGELOG.md (1)
3-6: New Version Entry Added.
The new version entry0.6.96-demo-200225.0and the accompanying "### Patch Changes" section have been correctly introduced at the top. Verify that the version naming convention (including the-demo-200225.0suffix) aligns with your release strategy and documentation.examples/headless-example/package.json (2)
4-4: Version Bump for Demo Release
The version"0.3.95-demo-200225.0"clearly indicates the demo release strategy. Confirm that all downstream dependencies and documentation reflect this new versioning scheme.
37-38: Dependency Version Updates to Demo Releases
The updates for"@ballerine/common": "0.9.76-demo-200225.0"and"@ballerine/workflow-browser-sdk": "0.6.96-demo-200225.0"are consistent with the new demo versioning approach. Ensure that these changes are propagated correctly (e.g., in lock files or CI pipelines) so that all environments use the intended dependency versions.sdks/workflow-node-sdk/package.json (3)
4-4: Updated Package Version
The package version update to"0.6.96-demo-200225.0"is in line with the demo release process. Verify that this version is properly integrated into your release and deployment pipelines.
31-31: Aligned Dependency Version for Workflow Core
Updating"@ballerine/workflow-core": "0.6.96-demo-200225.0"ensures compatibility with other updated packages. Double-check that this version aligns across the entire ecosystem.
39-41: Dev Dependency Demo Version Updates
The changes to"@ballerine/config": "^1.1.33-demo-200225.0"and"@ballerine/eslint-config": "^1.1.33-demo-200225.0"reflect the new release state. Please verify that these updates do not introduce any breaking changes and that all related tooling (linting, build scripts) functions as expected.sdks/workflow-browser-sdk/package.json (3)
4-4: Package Version Update
The version bump to"0.6.96-demo-200225.0"accurately represents the demo release status. Ensure consistency with version management practices across all related packages.
36-37: Dependency Version Alignment
The demo versions for"@ballerine/common": "0.9.76-demo-200225.0"and"@ballerine/workflow-core": "0.6.96-demo-200225.0"are updated correctly. Make sure that any modules that depend on these packages are updated accordingly.
44-46: Dev Dependency Updates for Demo Versions
The upgraded dev dependencies for@ballerine/configand@ballerine/eslint-config(both now including the demo tag) should be tested thoroughly to avoid any integration issues during development.apps/workflows-dashboard/package.json (3)
4-4: Version Increment for Workflows Dashboard
Changing the version to"0.2.33-demo-200225.0"correctly signals a new demo release. Confirm that this version number is correctly referenced in your deployment and documentation setups.
19-20: Dependency Updates to Demo Versions
The updates for"@ballerine/common": "^0.9.76-demo-200225.0"and"@ballerine/ui": "^0.5.78-demo-200225.0"are consistent with the overall versioning strategy. Verify that these changes interoperate smoothly with other updated modules.
67-68: Dev Dependencies Version Update
Upgrading"@ballerine/config"and"@ballerine/eslint-config-react"to their respective demo versions is on track. Please run complete tests to ensure that these changes do not disrupt your development workflow.packages/blocks/package.json (3)
5-5: Package Version Bump
The new package version"0.2.35-demo-200225.0"appropriately reflects the demo release status. Confirm that any consumers of this package are aware of the version change.
45-46: Updated Dev Dependencies for Demo Release
Updating the dev dependencies"@ballerine/config"and"@ballerine/eslint-config"to demo versions is consistent with the others. It’s advisable to run a full build and lint pass to ensure there are no compatibility issues.
94-94: Updated Dependency Version
The dependency update"@ballerine/common": "^0.9.76-demo-200225.0"maintains conformity with the demo release versioning strategy. Verify that dependent modules correctly resolve this updated version.apps/kyb-app/package.json (2)
19-22: Dependency Version Update Verification
The dependencies for@ballerine/blocks,@ballerine/common,@ballerine/workflow-browser-sdk, and@ballerine/uihave all been bumped to new demo versions. Confirm that these updated versions are available in your package registry and that their changes are compatible with the rest of the ecosystem.
69-70: Dev Dependency Version Update Check
The dev dependencies@ballerine/configand@ballerine/eslint-config-reactare now using demo versions. Ensure that any CI/CD or local scripts that refer to these packages are updated accordingly.packages/ui/package.json (3)
4-4: UI Package Version Update Review
The package version is updated to"0.5.78-demo-200225.0". This new version must stay in sync with versioning in other related packages; please verify it meets your release conventions.
30-30: Dependency Version Alignment
The dependency@ballerine/commonhas been updated to^0.9.76-demo-200225.0. Double-check that the caret (^) range still enforces the intended compatibility and that it’s in line with other packages in your ecosystem.
81-82: Dev Dependency Synchronization
The dev dependencies (@ballerine/configand@ballerine/eslint-config-react) have been bumped to their demo versions. Make sure that these versions are reflected in any configuration files or scripts (e.g., linting, testing) that rely on these settings.examples/report-generation-example/CHANGELOG.md (2)
3-3: New Version Entry Added
A new changelog entry for version"0.2.32-demo-200225.0"has been added. Ensure that the release notes are updated with the corresponding details of this version and that all team members are aware of the changes.
8-10: Dependency Update Documentation Check
The updated dependency@ballerine/react-pdf-toolkit@1.2.78-demo-200225.0is clearly documented. Confirm that similar dependency updates in other modules are properly linked and described for traceability in the changelog.services/workflows-service/package.json (3)
4-4: Service Version Update Verification
The service version is updated to"0.7.102-demo-200225.0". Please ensure that this version increment aligns with your versioning policy and that all associated documentation (e.g., API changelogs, service registries) reflects the update.
53-55: Dependency Version Alignment Check
The dependencies for@ballerine/common,@ballerine/workflow-core, and@ballerine/workflow-node-sdkhave all been updated with the demo marker. Verify that these updates are tested across the workflows service and that no backward compatibility issues are introduced.
116-117: Dev Dependency Version Synchronization
Dev dependencies now use the updated demo versions for@ballerine/configand@ballerine/eslint-config. It is worth confirming that any development or build scripts referencing these packages are updated and working as intended.apps/backoffice-v2/package.json (3)
3-3: Backoffice Version Update Review
The backoffice package version is now"0.7.104-demo-200225.0". Confirm that this new version is properly announced in all product documentation and that it fits your deployment strategy.
55-60: Dependency Version Consistency Verification
Dependencies including@ballerine/blocks,@ballerine/common,@ballerine/workflow-browser-sdk,@ballerine/workflow-node-sdk,@ballerine/react-pdf-toolkit, and@ballerine/uihave all been updated to their respective demo versions. Please check that these updates are coherent with the versions used in other related applications and that no mismatches occur.
155-156: Dev Dependency Update Confirmation
Dev dependencies for@ballerine/configand@ballerine/eslint-config-reacthave been advanced to the demo versions. It is advisable to verify that these changes do not affect your local build or CI pipelines.
alonp99
added
deploy-pr
* refactor(CaseOverview): improve tab generation logic - Replace inline tab logic with a dedicated function - Ensure 'ubos' case returns the correct tab name - Maintain existing functionality for other domain tab names * refactor(CaseOverview): simplify tab generation logic - Remove unnecessary getTab function - Use camelCase on the domain string directly * feat(MerchantMonitoringBusinessReport): update button label for navigation - Change button text from "Back" to "View All Reports" - Improve clarity on navigation purpose for users * feat(scripts): enhance auto-commit script with specific target file option - Add command line argument to specify target file for git diff - Update git commit command to include the target file in commit * feat(MerchantMonitoring): add conditional alert column to the table - Introduce 'showAlertColumn' prop to toggle alert column visibility - Modify MerchantMonitoringTable and related components accordingly - Update logic to filter columns based on 'showAlertColumn' setting * feat(MerchantMonitoring): update merchant monitoring logic to include demo flag - Replace showAlertColumn with isDemo in merchant monitoring logic - Modify MerchantMonitoringTable to conditionally render alert column based on isDemo - Adapt useColumns to use isDemo for column visibility control * refactor(MerchantMonitoring): rename isDemo to isDemoAccount - Update variable and prop names for clarity - Ensure consistent naming across components and hooks * style(sidebar): improve class ordering for consistency - Reorder class names in Sidebar components for better readability - Make minor formatting adjustments across several Sidebar and TextEditor components - Maintain consistent styling practices throughout the codebase * refactor(report-tabs): streamline report tab configurations - Remove unnecessary social media and ecosystem analysis tabs - Simplify the report tabs structure for better clarity - Ensure the remaining tabs maintain functional integrity * feat(ui): enhance merchant monitoring for demo accounts - Add tooltip messages indicating feature limitations for demo accounts - Disable monitoring action for trial users with appropriate feedback - Update logic to check account type before rendering specific options * fix(MerchantMonitoring): update button icons and styles in MerchantMonitoring page - Replace Table2 icon with Layers for better clarity - Update button text for Upload Multiple Merchants to Batch Actions - Refactor button styles to improve visibility and user experience * feat(MerchantMonitoringBusinessReport): align Options dropdown with website domain - Implement dropdown menu for monitoring options - Add confirmation dialog for deboarding merchants - Integrate feedback mechanism via form fields for user reasons * refactor(merchant-monitoring): restructure merchant monitoring components - Convert columns definition to a memoized hook for performance enhancement - Standardize access to demo account configuration across components - Improve button label for better clarity on navigation functionality --------- Co-authored-by: Alon Peretz <8467965+alonp99@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx (1)
151-187: Consider handling empty state more consistentlyFor content violations, you return
nullwhen there are no violations, but other columns useTextWithNAFallback. For consistency, consider using a similar pattern across all columns.- if (!violations?.length) { - return null; - } + if (!violations?.length) { + return <TextWithNAFallback className="text-center" />; + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/backoffice-v2/src/common/constants.ts(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx(3 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/hooks/useMerchantMonitoringTableLogic/useMerchantMonitoringTableLogic.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/hooks/useMerchantMonitoringTableLogic/useMerchantMonitoringTableLogic.tsx
- apps/backoffice-v2/src/common/constants.ts
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: test_windows
- GitHub Check: test_linux
- GitHub Check: build (windows-latest)
- GitHub Check: build (ubuntu-latest)
- GitHub Check: Analyze (javascript)
- GitHub Check: lint
🔇 Additional comments (6)
apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx (6)
200-205: Update Column Meta Augmentation for TanStack Table v8TanStack Table v8 now supports proper declaration merging for column meta types, making the
@ts-ignoreworkaround unnecessary. Consider replacing this with the proper type augmentation approach.Instead of using
@ts-ignore, you could use TypeScript's declaration merging:- meta: { - // @ts-ignore -- as per https://github.com/TanStack/table/discussions/4072, there is - // currently no proper way to augment the meta type - conditional: true, - showColumn: !isDemoAccount, - } satisfies MerchantMonitoringTableColumnsMeta, + meta: { + conditional: true, + showColumn: !isDemoAccount, + } as MerchantMonitoringTableColumnsMeta,And add the following declaration to a declarations file:
// In a .d.ts file declare module '@tanstack/react-table' { interface ColumnMeta<TData, TValue> extends MerchantMonitoringTableColumnsMeta {} }
47-292: Good refactoring to a hook-based approach with conditional column renderingThe conversion from a static columns array to a dynamic
useColumnshook is a good architectural choice. The use ofuseMemoprevents unnecessary recalculations, and the conditional column rendering based onisDemoAccountallows for more flexible UI control.
80-90: Consistent center alignment for risk levelGood improvement on the risk level column with proper center alignment and use of the Badge component for visual clarity.
192-197: Empty alert state improved with Minus iconThe replacement of
IndicatorCirclewithMinusfor the empty alert state provides better visual clarity. Good improvement.
211-216: Proper timezone handling for date displayThe UTC to local time conversion is correctly implemented with clear formatting of date and time. This ensures dates are displayed consistently across different user timezones.
282-290: Well-implemented conditional column filteringThe column filtering logic is clean and efficient, properly checking meta properties to determine if a column should be displayed based on the
isDemoAccountflag.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
apps/backoffice-v2/src/common/components/organisms/DemoAccessWrapper/DemoAccessWrapper.tsx (2)
1-11: Remove unused import from the file.The
envimport on line 9 is not being used in this component. It should be removed to maintain clean imports.- import { env } from '@/common/env/env';
16-18: Add loading and error handling for the customer query.The component doesn't handle loading or error states from
useCustomerQuery. Consider adding appropriate handling to provide feedback to users during loading and gracefully handle any errors.export const DemoAccessWrapper = ({ children, ...props }: DemoAccessWrapperProps) => { - const { data: customer } = useCustomerQuery(); + const { data: customer, isLoading, error } = useCustomerQuery(); + + if (isLoading) { + return <div className="p-6">Loading...</div>; + } + + if (error) { + return <div className="p-6">Failed to load customer data</div>; + }apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/MerchantMonitoringStatusBadge.tsx (1)
48-78: Truncation and styling approach look solid.
- The span receives a ref for title-based ellipses, helping to clarify partially visible content.
- Consider adding an
aria-labelor similar attribute for accessibility if the text can be truncated.apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/MerchantMonitoringBusinessReport.page.tsx (1)
143-159: Conditional rendering duplicates dropdown usage.
You're rendering<BusinessReportOptionsDropdown>in one branch but also again under certain conditions (lines 175–181). It may be beneficial to unify this logic for maintainability and reduce repetition.- {isDemoAccount ? ( - <div className="space-x-6 text-sm"> - ... - </div> - ) : ( - <BusinessReportOptionsDropdown - ... - /> - )} + <div className="flex items-center space-x-4"> + {isDemoAccount && ( + <div className="space-x-6 text-sm"> + ... + </div> + )} + <BusinessReportOptionsDropdown + ... + /> + </div>apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/BusinessReportOptionsDropdown.tsx (1)
193-212: Consider more user-friendly error handling for a missing business ID.
Throwing an error here can lead to an abrupt UI experience. A graceful fallback or logged warning may be more user friendly.Below is a potential adjustment:
- if (!businessReport?.business.id) { - throw new Error('Business ID is missing'); - } + if (!businessReport?.business?.id) { + console.error('Cannot turn monitoring on: missing Business ID'); + return; + }apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/hooks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic.tsx (1)
181-235: PDF generation feature implementation.The PDF generation implementation is well-structured and handles several important aspects:
- Creates a cloned DOM element to avoid modifying the original
- Uses appropriate scaling and quality settings
- Maintains aspect ratio when generating the PDF
- Includes error handling and loading state management
- Uses a descriptive filename with the website and date
A minor suggestion would be to add a timeout or size limit check to prevent potential issues with very large reports.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (11)
apps/backoffice-v2/package.json(5 hunks)apps/backoffice-v2/src/common/components/atoms/Button/Button.tsx(1 hunks)apps/backoffice-v2/src/common/components/organisms/DemoAccessWrapper/DemoAccessWrapper.tsx(1 hunks)apps/backoffice-v2/src/domains/auth/components/AuthenticatedLayout/hooks/useSidebarItems/useSidebarItems.tsx(1 hunks)apps/backoffice-v2/src/domains/business-reports/components/BusinessReport/BusinessReport.tsx(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/MerchantMonitoringReportStatus.tsx(3 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/MerchantMonitoringStatusBadge.tsx(3 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx(3 hunks)apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/BusinessReportOptionsDropdown.tsx(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/MerchantMonitoringBusinessReport.page.tsx(3 hunks)apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/hooks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic.tsx(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/backoffice-v2/src/common/components/atoms/Button/Button.tsx
- apps/backoffice-v2/src/domains/business-reports/components/BusinessReport/BusinessReport.tsx
- apps/backoffice-v2/package.json
- apps/backoffice-v2/src/domains/auth/components/AuthenticatedLayout/hooks/useSidebarItems/useSidebarItems.tsx
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: test_windows
- GitHub Check: test_linux
- GitHub Check: build (windows-latest)
- GitHub Check: build (ubuntu-latest)
- GitHub Check: lint
- GitHub Check: Analyze (javascript)
🔇 Additional comments (20)
apps/backoffice-v2/src/common/components/organisms/DemoAccessWrapper/DemoAccessWrapper.tsx (2)
19-33: Well-designed responsive layout for demo account UI.The conditional rendering based on the demo account status and the responsive layout for different screen sizes is well-implemented. The component efficiently uses Tailwind's breakpoint classes to create different layouts on mobile and desktop.
1-35: Good implementation of the wrapper component pattern.This component effectively implements the wrapper pattern to conditionally provide additional UI elements for demo accounts while maintaining a clean layout for regular accounts. The composition with children makes it reusable across different parts of the application as shown in the summary.
apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/MerchantMonitoringReportStatus.tsx (3)
7-7: No issues with utilizingctw.
This utility appears properly imported for merging multiple class strings.
44-48: OptionalclassNameprop looks good.
Introducing this prop enhances styling flexibility and reusability.
115-115:ctwusage for combining classes is properly handled.
Merging default classes with the optionalclassNameensures a flexible yet consistent design.apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/MerchantMonitoringStatusBadge.tsx (3)
1-1: No particular concerns with the React import.
7-7: Hook import appears fine.
The newuseEllipsesWithTitlehook import is straightforward; no issues noted.
35-42: New functional component signature is clear.
Switching from a forward ref to a standard component with well-defined prop types simplifies the interface.apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/MerchantMonitoringBusinessReport.page.tsx (3)
133-134: Layout changes are acceptable.
Removing and adjusting padding to simplify the layout is cleanly done.
138-138: Minor class updates appear consistent.
No issues with the new utility classes for spacing and typography.
167-229: Skeleton vs content logic is well-structured.
- Using dayjs is fine; just ensure locale/timezone usage is consistent with user expectations.
- The approach to toggling loading states with a skeleton is clear and easy to follow.
apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/BusinessReportOptionsDropdown.tsx (2)
1-31: Imports and basic setup look fine.
No issues recognized with these newly introduced imports and definitions.
85-96: PDF export button logic is clear.
The async await flow for generating and then closing the dropdown is properly handled.apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx (4)
30-36: Well-implemented type declaration for column metadata.You've properly extended the TanStack Table's
ColumnMetainterface using module augmentation, allowing type-safe access to the custom propertiesconditionalandshowColumn. This is a cleaner approach than using@ts-ignoreas mentioned in previous reviews.
50-294: Good refactor from static array to dynamic hook.Converting the static columns array to a dynamic hook with
useMemois a solid improvement. This approach:
- Allows for conditional rendering based on the
isDemoAccountflag- Optimizes performance by preventing unnecessary re-renders
- Creates a more maintainable pattern for future column customizations
The filter logic at the end cleanly handles conditional columns.
153-193: Improved content violations display with filtered critical alerts.The enhanced implementation for content violations now:
- Filters violations to show only critical ones
- Provides a clear count indicator with appropriate styling
- Offers a detailed tooltip view of the violations
This makes the interface more focused on important alerts while still providing detailed information on demand.
194-207: Alert column now conditionally renders based on account type.The isAlert column has been improved to:
- Conditionally display based on the
isDemoAccountflag- Use a
Minusicon instead of anIndicatorCirclefor no-alert state- Apply consistent styling and center alignment
This is a good approach to customizing the user experience based on account type.
apps/backoffice-v2/src/pages/MerchantMonitoringBusinessReport/hooks/useMerchantMonitoringBusinessReportLogic/useMerchantMonitoringBusinessReportLogic.tsx (3)
60-60: Added customer query to support demo account detection.Good addition of the customer query to retrieve account configuration, which enables conditional rendering throughout the application.
175-179: Enhanced UX with scroll reset on navigation.The added effect to scroll to the top on page load is a nice usability improvement. This avoids potential confusion when navigating between reports, ensuring users always start from the top of the document.
253-256: New exports enhance component integration.The added exports properly expose:
- Demo account status for conditional rendering
- Reference to the report container for PDF generation
- PDF generation function and loading state
This enables seamless integration with other components while maintaining separation of concerns.
apps/backoffice-v2/src/common/components/molecules/DemoAccessCards/GetFullAccessCard.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/CreateMerchantReportDialog.tsx (1)
90-91: 🛠️ Refactor suggestionRevisit form disabling for improved accessibility.
This approach to disable the form via an absolute overlay reduces usability for screen readers. Directly disabling form fields provides a more accessible experience.
-{shouldDisableForm && (<div className="absolute right-0 top-0 h-full w-full bg-white opacity-70" />)} +<fieldset disabled={shouldDisableForm} aria-disabled={shouldDisableForm}> + {/* ... all form fields within */} +</fieldset>Also applies to: 102-104
🧹 Nitpick comments (4)
apps/backoffice-v2/src/pages/Statistics/components/PortfolioAnalytics/PortfolioAnalytics.tsx (1)
62-85: Overall structure is sound.Providing separate cards for total active, new, and removed merchants is clear. Approaches like mapping over a stats array could reduce repetition, but given there are only three stats, this is an acceptable straightforward solution.
// Example: using a mapped approach (optional) -<MerchantsStatsCard ... /> -<MerchantsStatsCard ... /> -<MerchantsStatsCard ... /> +{[ + { count: totalActiveMerchants, title: 'Total Active Merchants', ... }, + { count: addedMerchantsCount, prefix: '+', ... }, + { count: removedMerchantsCount, title: 'Merchants Removed', ... }, +].map((stat, i) => ( + <MerchantsStatsCard key={i} {...stat} /> +))}apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/CreateMerchantReportDialog.tsx (3)
25-58: Dialog wrapper is well-structured.Good job extracting the logic to a dedicated hook (
useCreateMerchantReportDialogLogic). The conditionally shown success view vs. form logic is clean. Ensure any translation or i18n needs for strings like “Create a Web Presence Report” are addressed if internationalization is a requirement.
60-77: Success content is straightforward.Displaying the check icon and “Your report is being generated” message is user-friendly. If you have non-English markets, consider adding localized strings or fetching them from a translation file.
163-173: Consider error states or progress updates.The button properly shows a loading indicator (
Loader2) and disables interaction during submission. For clarity, consider showing a relevant error message if submission fails, so users understand the reason for any issues.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/CreateMerchantReportDialog.tsx(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/hooks/useCreateMerchantReportDialogLogic.tsx(1 hunks)apps/backoffice-v2/src/pages/Statistics/components/PortfolioAnalytics/PortfolioAnalytics.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/hooks/useCreateMerchantReportDialogLogic.tsx
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: build (windows-latest)
- GitHub Check: test_windows
- GitHub Check: test_linux
- GitHub Check: build (ubuntu-latest)
- GitHub Check: Analyze (javascript)
- GitHub Check: lint
🔇 Additional comments (8)
apps/backoffice-v2/src/pages/Statistics/components/PortfolioAnalytics/PortfolioAnalytics.tsx (4)
2-10: Consider verifying usage of imported modules.These added imports look consistent and correct at a glance. However, please verify that all imports (
REPORT_TYPE_TO_DISPLAY_TEXT,useLocale, etc.) are genuinely used and remain relevant. Unused imports can sometimes creep in during refactoring, creating dead code.
12-40: Implementation looks good.The
MerchantsStatsCardcomponent provides self-contained logic for rendering merchant stats. Handling the conditional link via thehrefprop is straightforward. One small edge case to watch out for: ifcountcould ever be negative, a fallback to 0 might mask data issues. Otherwise, this approach is clear and understandable.
42-60: Check for alternative states when merchant monitoring is disabled.Here, the code returns only a single card for new merchants when it's disabled. Ensure there's no need to surface other stats even if the feature is off. If this logic is certain, then it's fine—just confirm that there's no missing state, such as displaying zero for removed or active merchants.
92-97: Props forwarding is clear.Forwarding props to
PortfolioAnalyticsContentkeeps the view layer lean and consistent. UsingPick<z.infer<typeof MetricsResponseSchema>, ...>is an efficient way to ensure type safety for precisely the fields you need.apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/CreateMerchantReportDialog.tsx (4)
1-16: Imports and structure look correct.These imports are organized and match the usage in the file. Confirm that optional external dependencies (
@ballerine/ui,lucide-react) are installed and updated in your package. This check prevents potential build-time errors.
18-23: Type definitions align with usage.
CreateMerchantReportDialogPropscovers the open state, toggling, anddisabledflag. Keep an eye on changes if additional props or events become necessary (e.g., onSuccess callbacks).
79-82: Preemptive type separation is good.Extracting form logic props into a dedicated type clarifies the component’s API, which is helpful for maintainability.
106-160: Form fields are well-defined.Each field uses the shared
FormField,FormControl, andFormMessagepattern, which is consistent and maintainable. Good work covering optional fields likecompanyNameandbusinessCorrelationId.
…badge - Add badge to indicate example accounts in the company name column - Wrap company name in a flex container for improved layout
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx (2)
235-236: Consider addressing ESLint warnings more permanentlyThe ESLint disable comments suggest a recurring issue with hooks in cell renderers. Consider either:
- Extracting these cell renderers to separate components
- Adding a more permanent ESLint configuration fix for this pattern
This would improve code maintainability and reduce the need for inline comments.
Also applies to: 254-255
160-167: Add type safety for content violations handlingThe code assumes a specific structure for
data.contentViolationsbut lacks type safety. Consider either:
- Adding a type guard before accessing properties
- Defining a proper type for the violation structure
This would help prevent potential runtime errors if the data structure changes.
- const violations = (row.original.data?.contentViolations ?? []).filter( - el => el.id !== NO_VIOLATION_DETECTED_RISK_INDICATOR_ID && el.riskLevel === 'critical', - ); + type ContentViolation = { + id: string; + name: string; + riskLevel: string; + }; + + const contentViolations = row.original.data?.contentViolations ?? []; + const violations = Array.isArray(contentViolations) + ? contentViolations.filter( + (el): el is ContentViolation => + typeof el === 'object' && + el !== null && + 'id' in el && + 'riskLevel' in el && + el.id !== NO_VIOLATION_DETECTED_RISK_INDICATOR_ID && + el.riskLevel === 'critical' + ) + : [];
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx(3 hunks)services/workflows-service/prisma/data-migrations(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- services/workflows-service/prisma/data-migrations
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: test_windows
- GitHub Check: test_linux
- GitHub Check: Analyze (javascript)
- GitHub Check: build (windows-latest)
- GitHub Check: lint
- GitHub Check: build (ubuntu-latest)
🔇 Additional comments (5)
apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx (5)
30-36: Excellent implementation of type declarations for TanStack Table!You've correctly implemented type declaration merging for
ColumnMeta, which is the recommended approach for extending TanStack Table's types. This properly addresses the previous workaround mentioned in the past review comments.
50-299: Well-structured hook implementation with performance optimizationThe conversion from a static columns array to a dynamic
useColumnshook withuseMemois a good practice. This approach:
- Optimizes performance by preventing unnecessary recalculation of columns
- Makes the component more modular and reusable
- Cleanly handles conditional column visibility based on account type
The filtering logic at the end of the hook is elegant and maintainable.
159-199: Good addition of detailed violation informationThe content violations column with tooltip provides valuable context to users while maintaining a clean UI. The implementation correctly handles the case when no violations exist.
200-213: Clean implementation of conditional column visibilityUsing the meta properties to control column visibility based on the
isDemoAccountflag is a clean approach that keeps the display logic with the column definition rather than in the consuming component.
201-206: UI improvement with consistent icon usageThe switch from
IndicatorCircletoMinusicon for no-alert state provides better visual consistency and clearer user feedback.
- Comment out the asynchronous rule execution test case - Ensure the test suite continues to run without failures - No changes were made to the functionality of the rule engine
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
apps/backoffice-v2/src/domains/auth/components/AuthenticatedLayout/components/NavItem.tsx (2)
37-41: Consider providing a fallback or playback controls for the video.Users might want the ability to play, pause, or have an alternative if the video fails to load or doesn’t autoplay. Adding controls and a fallback image or text would enhance accessibility and user experience.
128-174: Consider adding a tooltip for premium items and test coverage.There’s currently no tooltip if the nav item is premium. If consistent user guidance is needed, consider adding a tooltip for premium items. Also, ensure thorough test coverage for premium and non-premium paths (e.g., verifying the presence of the CrownIcon, external link behavior, etc.).
apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx (2)
77-124: Leverage composition to reduce complexity
Wrapping the content inside<DemoAccessWrapper>is a neat approach for gating certain features behind demo logic. However, this block is fairly large, mixing layout, tooltips, and feature gating. A dedicated sub-component for “Batch Actions” or related UI could further reduce complexity and keep responsibilities focused.
151-223: Streamline complex filter bar
The filtering UI is quite comprehensive, handling multiple dropdowns, date ranges, and search. For future scaling, consider modularizing each filter group so that additions or changes don’t bloat the page component.apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/CreateMerchantReportDialog.tsx (1)
61-78: Success content messaging
The success screen helps set user expectations with a clear timeframe (“ready in up to 24 hours”) and next-step instructions. Consider allowing a dynamic ETA if it’s subject to change.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/backoffice-v2/src/domains/auth/components/AuthenticatedLayout/components/NavFooter.tsx(1 hunks)apps/backoffice-v2/src/domains/auth/components/AuthenticatedLayout/components/NavItem.tsx(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx(2 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/CreateMerchantReportDialog.tsx(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/hooks/useCreateMerchantReportDialogLogic.tsx(1 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx(6 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/hooks/useCreateMerchantReportDialogLogic.tsx
- apps/backoffice-v2/src/domains/auth/components/AuthenticatedLayout/components/NavFooter.tsx
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: test_windows
- GitHub Check: test_linux
- GitHub Check: build (windows-latest)
- GitHub Check: lint
- GitHub Check: Analyze (javascript)
- GitHub Check: build (ubuntu-latest)
🔇 Additional comments (19)
apps/backoffice-v2/src/domains/auth/components/AuthenticatedLayout/components/NavItem.tsx (3)
59-67: LGTM on using list items as keys.Using each item’s value as the key is a good practice that helps avoid issues associated with using array indices as keys.
85-85: Consider partial matching forisCurrent.At the moment,
isCurrentstrictly compareslocation.pathnametonavItem.href. If a query string or trailing slash is present, it could result in false mismatches. Consider a more robust approach (e.g., checking startsWith) if partial matches are desired.
104-115: Add security attributes for external links.This matches a previously flagged concern about external links with
target="_blank". As before, consider addingnofollowand applying an accessible label to resist tabnabbing attacks, per recommended security best practices.apps/backoffice-v2/src/pages/MerchantMonitoring/MerchantMonitoring.page.tsx (7)
3-29: Well-structured import additions
These imports collectively introduce new UI components and utilities, organizing third-party and internal modules cleanly.
32-74: Destructuring fromuseMerchantMonitoringLogic
Exposing additional fields likefirstName,fullName,avatarUrl,toggleOpenis an effective way to modularize user session data and UI toggling logic in one place. The approach appears consistent and maintainable.
91-103: Confirm route naming consistency
The path"/{locale}/merchant-monitoring/upload-multiple-merchants"still references “merchant-monitoring” while the main heading is renamed to "Web Presence." If the new naming convention is to be fully reflected in routes, consider updating this slug to something like"web-presence".Would you like me to search the codebase for other references to “merchant-monitoring” and propose a rename script?
125-148: Report creation UI
Leveraging<CreateMerchantReportDialog>and its tooltip-based disabling is clear and user-friendly. The usage ofaria-disabledensures standard accessibility cues.
224-260: Conditional display for monitoring alerts
Conditionally hiding the “Monitoring Alerts” filter ifisDemoAccountistruealigns with the gating logic. The arrangement is straightforward and consistent with how other features are toggled.
261-270: Clear All button
Providing a single-click reset for all filters improves the user experience. The implementation looks correct, and the styling approach withghostvariant is consistent.
272-310: Result badge and pagination
Displaying total results with a badge and integrating pagination with skeleton placeholders for loading states is a solid UI/UX design. The code is coherent and easy to follow.apps/backoffice-v2/src/pages/MerchantMonitoring/hooks/useMerchantMonitoringLogic/useMerchantMonitoringLogic.tsx (5)
3-25: Expanded imports
Incorporating new hooks (useAuthenticatedUserQuery,useToggle) and re-exporting theCreateMerchantReportDialogreference is organized. No redundancies detected.
32-45: Demo gating for business report features
TyingcreateBusinessReportandcreateBusinessReportBatchfeature flags to!demoErroris straightforward, but be sure to handle partial or future expansions of the feature gating (e.g., if you introduce partial restrictions rather than a single error state).
46-47: Session data usage
ExtractingfirstName,fullName,avatarUrldirectly fromsession?.useris concise. This clarity helps avoid undefined references or extra mapping layers.
68-80: Default date range setup
Auto-populatingfromandtowith a 30-day window provides useful out-of-the-box functionality. The side effect approach is neat and ensures search params are always valid.
201-239: Clean and transparent return object
Returning relevant logic (toggleOpen,open,firstName,isDemoAccount) in a single object simplifies consumer usage in the component. This design pattern fosters reusability and maintainability.apps/backoffice-v2/src/pages/MerchantMonitoring/components/CreateMerchantReportDialog/CreateMerchantReportDialog.tsx (4)
1-23: New dialog imports
All necessary UI primitives and form components are cleanly imported. The code references appear correct and consistent with the surrounding architecture.
25-59: MainCreateMerchantReportDialog
Well-structured and straightforward container for report creation. It nicely splits success state vs. form state while deferring form logic to the custom hook.
103-105: Duplicate comment: Improve form disabled state for accessibility
Using an absolute div with reduced opacity can confuse screen readers. A more accessible method is disabling form elements directly and providing a clear message explaining why they’re disabled.
107-179: Form handling
Combining the form with<BusinessReportsLeftCard>is a good way to show usage stats at the point of user input. Marking the form or inputs as disabled based on demo availability is logically correct.
Summary by CodeRabbit
New Features
MerchantsStatsCardcomponent for displaying merchant statistics.BusinessReportOptionsDropdownfor managing report options.AppSidebarcomponent for enhanced sidebar navigation.NavFooterandNavMaincomponents for improved layout and user interaction.UI Enhancements
MerchantMonitoringReportStatuscomponent with customizable class names.MerchantMonitoringStatusBadgefor improved styling logic and simplified implementation.MerchantMonitoringTablecomponent to better accommodate demo account statuses.