mirror of
https://github.com/supabase/supabase.git
synced 2026-10-13 05:09:12 +03:00
## 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 -->
80 lines
1.9 KiB
TypeScript
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,
|
|
})
|
|
}
|