Files
Raminder SinghandJoshen Lim ca7ba8f564 feat: improve stripe sync engine page behaviour (#43186)
* Moved sync status admonition to the settings page.
* The **Install integration** and **Uninstall integration** buttons now
show loading states during installation/uninstallation.
* Made the content of the `StripeSyncChangesCard` dynamic based on the
installation status.
* Fixed a bug in which the comment on the stripe schema was not parsed
correctly.

Screenshots for each state:

**Not installed**

<img width="897" height="884" alt="image"
src="https://github.com/user-attachments/assets/be567059-1deb-47d1-86df-af9f1c3b4fde"
/>

**Installing**

<img width="897" height="884" alt="image"
src="https://github.com/user-attachments/assets/664af71e-9407-4236-b4e5-1e7170a2f31f"
/>


**Install Error**

<img width="897" height="933" alt="image"
src="https://github.com/user-attachments/assets/0d6e4fbd-107a-4f95-8a5e-6bd1a1d6a1be"
/>


**Installed**

<img width="897" height="901" alt="image"
src="https://github.com/user-attachments/assets/e686e050-b3d2-42d0-bd3c-11d81540433a"
/>


**Uninstalling**

<img width="897" height="901" alt="image"
src="https://github.com/user-attachments/assets/7cd90d1c-ff83-4e7d-884e-4e340a1dcc75"
/>


**Uninstall Error**

<img width="897" height="938" alt="image"
src="https://github.com/user-attachments/assets/de0c1bc8-11c5-4c3f-a0ca-00b1f9e32ed3"
/>

**Settings Page (Sync Done)**

<img width="897" height="572" alt="image"
src="https://github.com/user-attachments/assets/ec5dd2a3-d183-42e1-8953-13bcf70082f5"
/>

**Settings Page (Sync in Progress)**

<img width="897" height="572" alt="image"
src="https://github.com/user-attachments/assets/7400c479-3e4f-4490-8857-414a93ebdc51"
/>


The idea behind these changes is that in future:

* We allow users to configure sync interval from the settings page.
* The overview page is mainly for the install/uninstall behaviour only,
rest everything goes to the settings page.
* We can show more granular progress during install/uninstall by showing
what is being installed/uninstalled: migrations are running, edge
functions are being deployed and so on.
* We can show more accurate error messages: migrations succeeded but
edge functions could not be deployed. This helps users troubleshoot and
in the worst case recover via manual actions.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-03-02 17:59:12 +08:00

66 lines
1.9 KiB
TypeScript

import { useStripeSyncingState } from 'data/database-integrations/stripe/sync-state-query'
import { SchemasVariables, useSchemasQuery } from 'data/database/schemas-query'
import { useEffect } from 'react'
import {
findStripeSchema,
isInProgress,
isInstalled,
parseStripeSchema,
type StripeSyncStatusResult,
} from '@/components/interfaces/Integrations/templates/StripeSyncEngine/stripe-sync-status'
/**
* Unified hook for Stripe Sync installation status.
*
* This hook consolidates all schema querying, status parsing, and polling logic
* into a single source of truth. It returns a discriminated union status that
* makes impossible states unrepresentable.
*/
export function useStripeSyncStatus({
projectRef,
connectionString,
}: SchemasVariables): StripeSyncStatusResult {
// Query schemas once
const {
data: schemas,
isLoading: isSchemasLoading,
refetch,
} = useSchemasQuery({ projectRef, connectionString }, { enabled: !!projectRef })
// Find and parse stripe schema status
const stripeSchema = findStripeSchema(schemas)
const parsedSchema = parseStripeSchema(stripeSchema)
const installed = isInstalled(parsedSchema.status)
const inProgress = isInProgress(parsedSchema.status)
// Poll schemas during install/uninstall operations
useEffect(() => {
// Return if installation/uninstallation is not in progress
// inProgres is likely to be false during initial render
if (!inProgress) return
const interval = setInterval(() => {
refetch()
}, 5000)
return () => clearInterval(interval)
}, [inProgress, refetch])
// Query sync state only when installed
const { data: syncState, isLoading: isSyncStateLoading } = useStripeSyncingState(
{ projectRef: projectRef!, connectionString },
{
refetchInterval: 4000,
enabled: !!projectRef && installed,
}
)
return {
parsedSchema,
syncState: installed ? syncState : undefined,
isLoading: isSchemasLoading,
}
}