Files
supabase/apps/studio/data/organizations/organization-credit-code-redemption-mutation.ts
Joshen Lim e803507a0d Add flag disabled UI handler for code redeem page (#42591)
## Context

Adds a UI state for when the feature flag for code redeem is disabled
<img width="1270" height="424" alt="image"
src="https://github.com/user-attachments/assets/90e97869-f1e5-456b-9170-4a0a576f1064"
/>

## Other changes involved

Mostly refactor + clean up here
- Pass `onClick` event to `OrganizationCard`, rather than declaring an
extra parent `div` to handle the click event
- Use `Admonition` instead of the `Alert` components within
`CreditCodeRedemption`
- Adjust element semantics in `CreditCodeRedemption` (Opting for `p`
instead of `h4` and `h1` to show credit related information)
- Use `UpgradePlanButton` component for upgrade CTA (Handles behaviour
depending if user has perms to update plan of the organization)
- Use `TimestampInfo` component for expires at
- Fix error handling when calling `redeemCode` (use `mutate` instead of
`mutateAsync` which requires a try catch)

## To Test

- [ ] Need to verify that the `TimestampInfo` component renders
correctly after redeeming a code

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Organization selection with modal-driven credit code redemption and
URL prefill.
* Upgrade button accepts an organization slug and integrates into the
upgrade flow.
* Organization cards support an optional click handler for custom
interactions.

* **UI/UX Improvements**
* Success/error messaging switched to admonition styling; expiry dates
shown with timestamps.
* Horizontal form layout, medium dialog sizing, compact balance/code
presentation, and invisible CAPTCHA with reset on success.
  * Feature gated by a flag with clearer loading/error states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-09 11:47:43 +08:00

80 lines
1.9 KiB
TypeScript

import { useMutation, useQueryClient } from '@tanstack/react-query'
import { handleError, post } from 'data/fetchers'
import type { ResponseError, UseCustomMutationOptions } from 'types'
import { subscriptionKeys } from '../subscriptions/keys'
import { organizationKeys } from './keys'
export type OrganizationCreditCodeRedemptionVariables = {
code: string
slug?: string
hcaptchaToken?: string | null
}
export async function redeemCode({
hcaptchaToken,
code,
slug,
}: OrganizationCreditCodeRedemptionVariables) {
if (!hcaptchaToken) {
throw new Error('Captcha not submitted')
}
if (!slug) {
throw new Error('Slug is required')
}
const { data, error } = await post(`/platform/organizations/{slug}/billing/credits/redeem`, {
params: {
path: {
slug,
},
},
body: {
hcaptcha_token: hcaptchaToken,
code,
},
})
if (error) handleError(error)
return data
}
type RedeemCodeData = Awaited<ReturnType<typeof redeemCode>>
export const useOrganizationCreditCodeRedemptionMutation = ({
onSuccess,
onError,
...options
}: Omit<
UseCustomMutationOptions<
RedeemCodeData,
ResponseError,
OrganizationCreditCodeRedemptionVariables
>,
'mutationFn'
> = {}) => {
const queryClient = useQueryClient()
return useMutation<RedeemCodeData, ResponseError, OrganizationCreditCodeRedemptionVariables>({
mutationFn: (vars) => redeemCode(vars),
async onSuccess(data, variables, context) {
const { slug } = variables
await Promise.all([
queryClient.invalidateQueries({ queryKey: organizationKeys.customerProfile(slug) }),
queryClient.invalidateQueries({ queryKey: subscriptionKeys.orgSubscription(slug) }),
])
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
if (onError !== undefined) {
onError(data, variables, context)
}
},
...options,
})
}