feat(stripe): enable Stripe integration and update UI components (#1159)

* feat(stripe): enable Stripe integration and update UI components * refactor(import): streamline user ID and sandbox status fetching logic
2026-07-24 19:19:49 +02:00
parent cb7b31819b
commit d3c37dac08
4 changed files with 9 additions and 45 deletions
@@ -1955,13 +1955,12 @@ const StripePanel = getSettingsPanel('stripe')
 type ImportMode = null | 'psd2' | 'stripe' | 'bank' | 'sie' | 'csv_data' | 'migration'

 export default function ImportPage() {
-  const { company } = useCompany()
+  const { isSandbox } = useCompany()
  const [mode, setMode] = useState<ImportMode>(null)
  const [view, setView] = useState<'import' | 'export'>('import')
  const [sieDialogOpen, setSieDialogOpen] = useState(false)
  const [cloudOpen, setCloudOpen] = useState(false)
  const [userId, setUserId] = useState('')
-  const [isSandbox, setIsSandbox] = useState(false)
  const [exportPeriodId, setExportPeriodId] = useState<string | null>(null)
  const [exportExcludeClosing, setExportExcludeClosing] = useState(true)
  const t = useTranslations('import')
@@ -1969,21 +1968,11 @@ export default function ImportPage() {
  const hasCloudBackup = ENABLED_EXTENSION_IDS.has('cloud-backup')
  const hasBankSync = useCapability(CAPABILITY.bank_sync)

-  // Fetch authenticated user ID and sandbox status
+  // Fetch authenticated user ID (used by the migration wizard)
  useEffect(() => {
    const supabase = createClient()
    supabase.auth.getUser().then(({ data: { user } }) => {
-      if (!user) return
-      setUserId(user.id)
-      if (!company) return
-      supabase
-        .from('company_settings')
-        .select('is_sandbox')
-        .eq('company_id', company.id)
-        .single()
-        .then(({ data }) => {
-          if (data?.is_sandbox) setIsSandbox(true)
-        })
+      if (user) setUserId(user.id)
    })
  }, [])

@@ -2039,10 +2028,8 @@ export default function ImportPage() {
  const hasBankingExtension = ENABLED_EXTENSION_IDS.has('enable-banking')
  const hasMigrationExtension = ENABLED_EXTENSION_IDS.has('arcim-migration')
  const hasStripeExtension = ENABLED_EXTENSION_IDS.has('stripe')
-  // Hosted: Stripe Connect has not launched, so the card is "coming soon".
-  // The panel carries the same gate internally for ?mode=stripe deep links.
-  const isSelfHosted = process.env.NEXT_PUBLIC_SELF_HOSTED === 'true'
-  const stripeDisabled = isSandbox || !isSelfHosted
+  // Stripe is enabled everywhere (hosted + self-hosted); only the sandbox blocks it.
+  const stripeDisabled = isSandbox

  return (
    <div className="space-y-8">
@@ -2109,13 +2096,7 @@ export default function ImportPage() {
                  <ImportRow
                    title={t('stripe_title')}
                    sub={t('stripe_description')}
-                    chip={
-                      !isSelfHosted ? (
-                        <span className="rounded-full bg-secondary px-2 py-0.5 text-[11px] font-medium leading-none text-muted-foreground">
-                          {t('stripe_coming_soon')}
-                        </span>
-                      ) : undefined
-                    }
+                    chips={<LogoChip src="/logos/stripe.svg" name="Stripe" />}
                    disabled={stripeDisabled}
                    onClick={() => setMode('stripe')}
                  />
@@ -7,7 +7,6 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Switch } from '@/components/ui/switch'
-import { EmptyState } from '@/components/ui/empty-state'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useToast } from '@/components/ui/use-toast'
 import { useFormat } from '@/lib/hooks/use-format'
@@ -217,25 +216,6 @@ export default function StripeSettingsPanel() {
    }
  }

-  // Hosted: Stripe Connect is not launched yet, so the settings surface is
-  // "coming soon" even where the platform credentials are configured (test
-  // mode): users must not be able to connect or toggle transaction sync until
-  // launch. Self-hosted admins run their own keys and keep the full panel.
-  const isSelfHosted = process.env.NEXT_PUBLIC_SELF_HOSTED === 'true'
-  if (!isSelfHosted) {
-    return (
-      <Card>
-        <CardContent className="p-0">
-          <EmptyState
-            icon={CreditCard}
-            title={t('coming_soon_title')}
-            description={t('coming_soon_description')}
-          />
-        </CardContent>
-      </Card>
-    )
-  }
-
  if (loading) {
    return (
      <Card>
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 0 0 468 222.5;" xml:space="preserve" viewBox="54 36 360.02 149.84"> <style type="text/css"> 	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#635BFF;} </style> <g> 	<path class="st0" d="M414,113.4c0-25.6-12.4-45.8-36.1-45.8c-23.8,0-38.2,20.2-38.2,45.6c0,30.1,17,45.3,41.4,45.3 		c11.9,0,20.9-2.7,27.7-6.5v-20c-6.8,3.4-14.6,5.5-24.5,5.5c-9.7,0-18.3-3.4-19.4-15.2h48.9C413.8,121,414,115.8,414,113.4z 		 M364.6,103.9c0-11.3,6.9-16,13.2-16c6.1,0,12.6,4.7,12.6,16H364.6z"></path> 	<path class="st0" d="M301.1,67.6c-9.8,0-16.1,4.6-19.6,7.8l-1.3-6.2h-22v116.6l25-5.3l0.1-28.3c3.6,2.6,8.9,6.3,17.7,6.3 		c17.9,0,34.2-14.4,34.2-46.1C335.1,83.4,318.6,67.6,301.1,67.6z M295.1,136.5c-5.9,0-9.4-2.1-11.8-4.7l-0.1-37.1 		c2.6-2.9,6.2-4.9,11.9-4.9c9.1,0,15.4,10.2,15.4,23.3C310.5,126.5,304.3,136.5,295.1,136.5z"></path> 	<polygon class="st0" points="223.8,61.7 248.9,56.3 248.9,36 223.8,41.3 	"></polygon> 	<rect x="223.8" y="69.3" class="st0" width="25.1" height="87.5"></rect> 	<path class="st0" d="M196.9,76.7l-1.6-7.4h-21.6v87.5h25V97.5c5.9-7.7,15.9-6.3,19-5.2v-23C214.5,68.1,202.8,65.9,196.9,76.7z"></path> 	<path class="st0" d="M146.9,47.6l-24.4,5.2l-0.1,80.1c0,14.8,11.1,25.7,25.9,25.7c8.2,0,14.2-1.5,17.5-3.3V135 		c-3.2,1.3-19,5.9-19-8.9V90.6h19V69.3h-19L146.9,47.6z"></path> 	<path class="st0" d="M79.3,94.7c0-3.9,3.2-5.4,8.5-5.4c7.6,0,17.2,2.3,24.8,6.4V72.2c-8.3-3.3-16.5-4.6-24.8-4.6 		C67.5,67.6,54,78.2,54,95.9c0,27.6,38,23.2,38,35.1c0,4.6-4,6.1-9.6,6.1c-8.3,0-18.9-3.4-27.3-8v23.8c9.3,4,18.7,5.7,27.3,5.7 		c20.8,0,35.1-10.3,35.1-28.2C117.4,100.6,79.3,105.9,79.3,94.7z"></path> </g> </svg>