refactor: merge VAT into the Payouts settings section

Author: daveearley

frontend/src/components/routes/organizer/Payments/Vat/VatSettings.tsx

@@ -16,11 +16,7 @@ export const VatSettings = ({organizerId, stripeCountry}: VatSettingsProps) => {
     const vatInfo = getVatInfo(stripeCountry);
 
     if (!vatInfo.isEU) {
-        return (
-            <Text size="sm" c="dimmed">
-                {t`VAT does not apply because your Stripe account is outside the EU.`}
-            </Text>
-        );
+        return null;
     }
 
     const existingSettings = vatSettingQuery.data;

frontend/src/components/routes/organizer/Settings/Sections/PayoutsSettings/index.tsx

@@ -40,6 +40,8 @@ import {OrganizerStripeConnectAccount, ReusableStripeConnection} from "../../../
 import {showError, showSuccess} from "../../../../../../utilites/notifications";
 import {CapabilityList} from "../../../Payments/CapabilityList";
 import {RequirementsList} from "../../../Payments/RequirementsList";
+import {VatSettings as VatSettingsBody} from "../../../Payments/Vat/VatSettings";
+import {getVatInfo} from "../../../Payments/Vat/VatNotice";
 import classes from "../../../Payments/Payments.module.scss";
 
 const summarizeActiveCapabilities = (capabilities: Record<string, string>): number => {
@@ -384,6 +386,17 @@ export const PayoutsSettings = () => {
                         <RequirementsList items={account.requirements.eventually_due} severity="eventually"/>
                     </Alert>
                 )}
+
+                {organizerId && getVatInfo(account.country).isEU && (
+                    <Box mt="xl">
+                        <Divider mb="md"/>
+                        <Title order={4} mb={4}>{t`VAT`}</Title>
+                        <Text c="dimmed" size="sm" mb="md">
+                            {t`How VAT is applied to the platform fees we charge you.`}
+                        </Text>
+                        <VatSettingsBody organizerId={organizerId} stripeCountry={account.country}/>
+                    </Box>
+                )}
             </>
         );
     };

frontend/src/components/routes/organizer/Settings/Sections/VatSettings/index.tsx

@@ -5,15 +5,14 @@ import { AddressSettings } from "./Sections/AddressSettings";
 import EmailTemplateSettings from "./Sections/EmailTemplateSettings";
 import { EventDefaults } from "./Sections/EventDefaults";
 import { PayoutsSettings } from "./Sections/PayoutsSettings";
-import { VatSettings } from "./Sections/VatSettings";
 import { PlatformFeesSettings } from "./Sections/PlatformFeesSettings";
 import { DangerZoneSettings } from "./Sections/DangerZoneSettings";
 import { TrackingPixelSettings } from "./Sections/TrackingPixelSettings";
 import { PageBody } from "../../../common/PageBody";
 import { PageTitle } from "../../../common/PageTitle";
 import { t } from "@lingui/macro";
 import { Box, Group, NavLink as MantineNavLink, Stack } from "@mantine/core";
-import { IconAlertTriangle, IconBrandGoogleAnalytics, IconBrandStripe, IconInfoCircle, IconMapPin, IconReceipt, IconShare, IconMail, IconCalendarEvent, IconPercentage, IconChartBar } from "@tabler/icons-react";
+import { IconAlertTriangle, IconBrandGoogleAnalytics, IconBrandStripe, IconInfoCircle, IconMapPin, IconShare, IconMail, IconCalendarEvent, IconPercentage, IconChartBar } from "@tabler/icons-react";
 import { useMediaQuery } from "@mantine/hooks";
 import { useEffect, useMemo, useState } from "react";
 import { Card } from "../../../common/Card";
@@ -92,12 +91,6 @@ const Settings = () => {
                     icon: IconBrandStripe,
                     component: PayoutsSettings,
                 },
-                {
-                    id: 'vat',
-                    label: t`VAT`,
-                    icon: IconReceipt,
-                    component: VatSettings,
-                },
                 {
                     id: 'platform-fees',
                     label: t`Platform Fees`,