From 6b847cb9f6148dcd674694c6c3829c100a4b29f0 Mon Sep 17 00:00:00 2001 From: Thomas Reitz Date: Tue, 10 Mar 2026 22:37:30 +0100 Subject: [PATCH] fix(frontend): move hooks before conditional return in Lexware components React hooks must not be called after conditional returns (Rules of Hooks). Moves all hook calls above the isModuleEnabled check in LexwareSection and DealVouchersSection to prevent silent component crashes. Co-Authored-By: Claude Opus 4.6 --- .../src/crm/lexware/DealVouchersSection.tsx | 6 ++++-- .../src/crm/lexware/LexwareSection.tsx | 19 ++++++++++++------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/frontend/src/crm/lexware/DealVouchersSection.tsx b/packages/frontend/src/crm/lexware/DealVouchersSection.tsx index 3627587..01a1fff 100644 --- a/packages/frontend/src/crm/lexware/DealVouchersSection.tsx +++ b/packages/frontend/src/crm/lexware/DealVouchersSection.tsx @@ -182,11 +182,13 @@ export function DealVouchersSection({ const { isModuleEnabled } = useCrmSettings(); const [isLinkOpen, setLinkOpen] = useState(false); - // Hide entire section if Lexware module is disabled - if (!isModuleEnabled('lexware')) return null; + // All hooks must be called before any conditional return const { data, isLoading } = useDealVouchers(dealId); const unlinkMutation = useUnlinkVoucherFromDeal(); + // Hide entire section if Lexware module is disabled + if (!isModuleEnabled('lexware')) return null; + const dealVouchers: DealVoucher[] = data?.data ?? []; const linkedVoucherIds = new Set(dealVouchers.map((dv) => dv.voucher.id)); diff --git a/packages/frontend/src/crm/lexware/LexwareSection.tsx b/packages/frontend/src/crm/lexware/LexwareSection.tsx index e8ac3da..fc07d05 100644 --- a/packages/frontend/src/crm/lexware/LexwareSection.tsx +++ b/packages/frontend/src/crm/lexware/LexwareSection.tsx @@ -144,12 +144,10 @@ export function LexwareSection({ VoucherType | '' >(''); - // Hide entire section if Lexware module is disabled - if (!isModuleEnabled('lexware')) return null; - const isLinked = !!lexwareContactId; + const lexwareEnabled = isModuleEnabled('lexware'); - // Mutations + // Mutations — all hooks must be called before any conditional return const linkCompany = useLinkLexwareCompany(); const linkContact = useLinkLexwareContact(); const unlinkCompany = useUnlinkLexwareCompany(); @@ -159,19 +157,26 @@ export function LexwareSection({ const refreshCompanyVouchers = useRefreshCompanyVouchers(); const refreshContactVouchers = useRefreshContactVouchers(); - // Vouchers (only fetch when linked) + // Vouchers (only fetch when linked AND module enabled) const vouchersParams = voucherTypeFilter ? { voucherType: voucherTypeFilter as VoucherType, pageSize: 50 } : { pageSize: 50 }; const companyVouchers = useCompanyVouchers( entityType === 'company' ? entityId : '', - entityType === 'company' && isLinked ? vouchersParams : undefined, + entityType === 'company' && isLinked && lexwareEnabled + ? vouchersParams + : undefined, ); const contactVouchers = useContactVouchers( entityType === 'contact' ? entityId : '', - entityType === 'contact' && isLinked ? vouchersParams : undefined, + entityType === 'contact' && isLinked && lexwareEnabled + ? vouchersParams + : undefined, ); + // Hide entire section if Lexware module is disabled + if (!lexwareEnabled) return null; + const vouchersData = entityType === 'company' ? companyVouchers : contactVouchers; const vouchers: LexwareVoucher[] = vouchersData.data?.data ?? [];