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 <noreply@anthropic.com>
This commit is contained in:
Thomas Reitz 2026-03-10 22:37:30 +01:00
parent 81d84e7eb0
commit 6b847cb9f6
2 changed files with 16 additions and 9 deletions

View file

@ -182,11 +182,13 @@ export function DealVouchersSection({
const { isModuleEnabled } = useCrmSettings(); const { isModuleEnabled } = useCrmSettings();
const [isLinkOpen, setLinkOpen] = useState(false); const [isLinkOpen, setLinkOpen] = useState(false);
// Hide entire section if Lexware module is disabled // All hooks must be called before any conditional return
if (!isModuleEnabled('lexware')) return null;
const { data, isLoading } = useDealVouchers(dealId); const { data, isLoading } = useDealVouchers(dealId);
const unlinkMutation = useUnlinkVoucherFromDeal(); const unlinkMutation = useUnlinkVoucherFromDeal();
// Hide entire section if Lexware module is disabled
if (!isModuleEnabled('lexware')) return null;
const dealVouchers: DealVoucher[] = data?.data ?? []; const dealVouchers: DealVoucher[] = data?.data ?? [];
const linkedVoucherIds = new Set(dealVouchers.map((dv) => dv.voucher.id)); const linkedVoucherIds = new Set(dealVouchers.map((dv) => dv.voucher.id));

View file

@ -144,12 +144,10 @@ export function LexwareSection({
VoucherType | '' VoucherType | ''
>(''); >('');
// Hide entire section if Lexware module is disabled
if (!isModuleEnabled('lexware')) return null;
const isLinked = !!lexwareContactId; const isLinked = !!lexwareContactId;
const lexwareEnabled = isModuleEnabled('lexware');
// Mutations // Mutations — all hooks must be called before any conditional return
const linkCompany = useLinkLexwareCompany(); const linkCompany = useLinkLexwareCompany();
const linkContact = useLinkLexwareContact(); const linkContact = useLinkLexwareContact();
const unlinkCompany = useUnlinkLexwareCompany(); const unlinkCompany = useUnlinkLexwareCompany();
@ -159,19 +157,26 @@ export function LexwareSection({
const refreshCompanyVouchers = useRefreshCompanyVouchers(); const refreshCompanyVouchers = useRefreshCompanyVouchers();
const refreshContactVouchers = useRefreshContactVouchers(); const refreshContactVouchers = useRefreshContactVouchers();
// Vouchers (only fetch when linked) // Vouchers (only fetch when linked AND module enabled)
const vouchersParams = voucherTypeFilter const vouchersParams = voucherTypeFilter
? { voucherType: voucherTypeFilter as VoucherType, pageSize: 50 } ? { voucherType: voucherTypeFilter as VoucherType, pageSize: 50 }
: { pageSize: 50 }; : { pageSize: 50 };
const companyVouchers = useCompanyVouchers( const companyVouchers = useCompanyVouchers(
entityType === 'company' ? entityId : '', entityType === 'company' ? entityId : '',
entityType === 'company' && isLinked ? vouchersParams : undefined, entityType === 'company' && isLinked && lexwareEnabled
? vouchersParams
: undefined,
); );
const contactVouchers = useContactVouchers( const contactVouchers = useContactVouchers(
entityType === 'contact' ? entityId : '', 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 = const vouchersData =
entityType === 'company' ? companyVouchers : contactVouchers; entityType === 'company' ? companyVouchers : contactVouchers;
const vouchers: LexwareVoucher[] = vouchersData.data?.data ?? []; const vouchers: LexwareVoucher[] = vouchersData.data?.data ?? [];