mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-09-07 01:56:53 +00:00
[Feature Request] Waffo Pancake gateway — full integration with subscription support + admin catalog binding flow (#4935)
This commit is contained in:
Hill-waffo
+660
-239
@@ -16,293 +16,714 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { useEffect, useState } from 'react'
|
||||
import * as React from 'react'
|
||||
import * as z from 'zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { toast } from 'sonner'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { SettingsSection } from '../components/settings-section'
|
||||
import { useUpdateOption } from '../hooks/use-update-option'
|
||||
import { removeTrailingSlash } from './utils'
|
||||
import {
|
||||
type CatalogStore,
|
||||
type PairOrphanError,
|
||||
type PairResult,
|
||||
createWaffoPancakePair,
|
||||
listWaffoPancakeCatalog,
|
||||
saveWaffoPancakeConfig,
|
||||
} from './waffo-pancake-api'
|
||||
|
||||
export interface WaffoPancakeSettingsValues {
|
||||
WaffoPancakeEnabled: boolean
|
||||
WaffoPancakeSandbox: boolean
|
||||
WaffoPancakeMerchantID: string
|
||||
WaffoPancakePrivateKey: string
|
||||
WaffoPancakeWebhookPublicKey: string
|
||||
WaffoPancakeWebhookTestKey: string
|
||||
WaffoPancakeStoreID: string
|
||||
WaffoPancakeProductID: string
|
||||
// Only operator-typed fields. Nothing else lands in OptionMap until Save.
|
||||
const waffoPancakeSchema = z.object({
|
||||
WaffoPancakeMerchantID: z.string(),
|
||||
WaffoPancakePrivateKey: z.string(),
|
||||
})
|
||||
|
||||
export type WaffoPancakeSettingsValues = z.infer<typeof waffoPancakeSchema> & {
|
||||
WaffoPancakeReturnURL: string
|
||||
WaffoPancakeCurrency: string
|
||||
WaffoPancakeUnitPrice: number
|
||||
WaffoPancakeMinTopUp: number
|
||||
}
|
||||
|
||||
interface Props {
|
||||
defaultValues: WaffoPancakeSettingsValues
|
||||
provisionedStoreID?: string
|
||||
provisionedProductID?: string
|
||||
}
|
||||
|
||||
const PANCAKE_DASHBOARD_URL = 'https://pancake.waffo.ai/merchant/dashboard'
|
||||
const DEFAULT_NEW_STORE_NAME = 'new-api-store'
|
||||
const DEFAULT_NEW_PRODUCT_NAME = 'new-api-charge-product'
|
||||
const DEFAULT_NEW_PAIR_NAME = `${DEFAULT_NEW_STORE_NAME} + ${DEFAULT_NEW_PRODUCT_NAME}`
|
||||
|
||||
export function WaffoPancakeSettingsSection(props: Props) {
|
||||
const { t } = useTranslation()
|
||||
const updateOption = useUpdateOption()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const form = useForm<WaffoPancakeSettingsValues>({
|
||||
defaultValues: props.defaultValues,
|
||||
|
||||
const [storeID, setStoreID] = React.useState(
|
||||
props.provisionedStoreID ?? ''
|
||||
)
|
||||
const [productID, setProductID] = React.useState(
|
||||
props.provisionedProductID ?? ''
|
||||
)
|
||||
|
||||
const [phase, setPhase] = React.useState<'idle' | 'verifying' | 'saving'>(
|
||||
'idle'
|
||||
)
|
||||
const [catalog, setCatalog] = React.useState<CatalogStore[]>([])
|
||||
// Seed dropdowns from saved bindings so they render on first paint instead
|
||||
// of waiting for the async catalog fetch to confirm them.
|
||||
const [chosenStoreID, setChosenStoreID] = React.useState<string>(
|
||||
props.provisionedStoreID ?? ''
|
||||
)
|
||||
const [chosenProductID, setChosenProductID] = React.useState<string>(
|
||||
props.provisionedProductID ?? ''
|
||||
)
|
||||
const [returnURL, setReturnURL] = React.useState(
|
||||
props.defaultValues.WaffoPancakeReturnURL ?? ''
|
||||
)
|
||||
const [creatingPair, setCreatingPair] = React.useState(false)
|
||||
|
||||
const initialRef = React.useRef(props.defaultValues)
|
||||
const defaultsSignature = React.useMemo(
|
||||
() => JSON.stringify(props.defaultValues),
|
||||
[props.defaultValues]
|
||||
)
|
||||
|
||||
// "merchantID|privateKey" of the last verified pair; debounced verify
|
||||
// skips when nothing changed.
|
||||
const lastVerifiedSignature = React.useRef('')
|
||||
const fetchSerialRef = React.useRef(0)
|
||||
|
||||
const form = useForm({
|
||||
resolver: zodResolver(waffoPancakeSchema),
|
||||
mode: 'onChange',
|
||||
defaultValues: {
|
||||
WaffoPancakeMerchantID: props.defaultValues.WaffoPancakeMerchantID,
|
||||
WaffoPancakePrivateKey: props.defaultValues.WaffoPancakePrivateKey,
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
form.reset(props.defaultValues)
|
||||
}, [props.defaultValues, form])
|
||||
// Mount-only — never re-sync from props after the first render. The
|
||||
// backend strips PrivateKey from GET /api/option/, so a re-sync would
|
||||
// wipe whatever the operator just typed.
|
||||
const didMountRef = React.useRef(false)
|
||||
React.useEffect(() => {
|
||||
const parsed = JSON.parse(defaultsSignature) as WaffoPancakeSettingsValues
|
||||
initialRef.current = parsed
|
||||
if (didMountRef.current) return
|
||||
didMountRef.current = true
|
||||
form.reset({
|
||||
WaffoPancakeMerchantID: parsed.WaffoPancakeMerchantID,
|
||||
WaffoPancakePrivateKey: parsed.WaffoPancakePrivateKey,
|
||||
})
|
||||
setReturnURL(parsed.WaffoPancakeReturnURL ?? '')
|
||||
lastVerifiedSignature.current = `${parsed.WaffoPancakeMerchantID.trim()}|${parsed.WaffoPancakePrivateKey.trim()}`
|
||||
}, [defaultsSignature, form])
|
||||
|
||||
const handleSave = async () => {
|
||||
const values = form.getValues()
|
||||
const enabled = !!values.WaffoPancakeEnabled
|
||||
const sandbox = !!values.WaffoPancakeSandbox
|
||||
React.useEffect(() => {
|
||||
setStoreID(props.provisionedStoreID ?? '')
|
||||
}, [props.provisionedStoreID])
|
||||
|
||||
if (enabled && !values.WaffoPancakeMerchantID.trim()) {
|
||||
toast.error(t('Merchant ID is required'))
|
||||
return
|
||||
React.useEffect(() => {
|
||||
setProductID(props.provisionedProductID ?? '')
|
||||
}, [props.provisionedProductID])
|
||||
|
||||
const productsForChosenStore = React.useMemo(() => {
|
||||
if (!chosenStoreID) return []
|
||||
return catalog.find((s) => s.id === chosenStoreID)?.onetimeProducts ?? []
|
||||
}, [catalog, chosenStoreID])
|
||||
|
||||
// Raw-ID fallback items render the trigger before the catalog loads or
|
||||
// when the saved entity has been deleted upstream.
|
||||
const storeSelectItems = React.useMemo(() => {
|
||||
const items = catalog.map((s) => ({
|
||||
value: s.id,
|
||||
label: `${s.name} (${s.id})`,
|
||||
}))
|
||||
if (chosenStoreID && !catalog.some((s) => s.id === chosenStoreID)) {
|
||||
items.push({ value: chosenStoreID, label: chosenStoreID })
|
||||
}
|
||||
|
||||
if (enabled && !values.WaffoPancakeStoreID.trim()) {
|
||||
toast.error(t('Store ID is required'))
|
||||
return
|
||||
return items
|
||||
}, [catalog, chosenStoreID])
|
||||
const productSelectItems = React.useMemo(() => {
|
||||
const items = productsForChosenStore.map((p) => ({
|
||||
value: p.id,
|
||||
label: `${p.name} (${p.id})`,
|
||||
}))
|
||||
if (
|
||||
chosenProductID &&
|
||||
!productsForChosenStore.some((p) => p.id === chosenProductID)
|
||||
) {
|
||||
items.push({ value: chosenProductID, label: chosenProductID })
|
||||
}
|
||||
return items
|
||||
}, [productsForChosenStore, chosenProductID])
|
||||
|
||||
if (enabled && !values.WaffoPancakeProductID.trim()) {
|
||||
toast.error(t('Product ID is required'))
|
||||
return
|
||||
}
|
||||
// Verifies typed creds against Pancake (via /catalog) and refreshes the
|
||||
// dropdown options. `preselect` overrides the post-load anchor selection;
|
||||
// omitting it defaults to: saved binding → first store with products.
|
||||
const verifyAndFetchCatalog = React.useCallback(
|
||||
async (
|
||||
merchantID: string,
|
||||
privateKey: string,
|
||||
preselect?: { storeID?: string; productID?: string }
|
||||
) => {
|
||||
const serial = ++fetchSerialRef.current
|
||||
let stores: CatalogStore[] = []
|
||||
try {
|
||||
const body = await listWaffoPancakeCatalog(merchantID, privateKey)
|
||||
if (serial !== fetchSerialRef.current) return
|
||||
if (
|
||||
body?.message === 'success' &&
|
||||
typeof body.data === 'object' &&
|
||||
body.data
|
||||
) {
|
||||
stores = (body.data as { stores: CatalogStore[] }).stores ?? []
|
||||
} else {
|
||||
const reason = typeof body?.data === 'string' ? body.data : undefined
|
||||
toast.error(
|
||||
reason
|
||||
? `${t('Credentials verification failed')}: ${reason}`
|
||||
: t(
|
||||
'Credentials verification failed — double-check Merchant ID and API private key.'
|
||||
)
|
||||
)
|
||||
setPhase('idle')
|
||||
return
|
||||
}
|
||||
} catch (err) {
|
||||
if (serial !== fetchSerialRef.current) return
|
||||
toast.error(
|
||||
`${t('Credentials verification failed')}: ${
|
||||
err instanceof Error ? err.message : String(err)
|
||||
}`
|
||||
)
|
||||
setPhase('idle')
|
||||
return
|
||||
}
|
||||
if (serial !== fetchSerialRef.current) return
|
||||
|
||||
const requiredWebhookKey = sandbox
|
||||
? values.WaffoPancakeWebhookTestKey
|
||||
: values.WaffoPancakeWebhookPublicKey
|
||||
if (enabled && !String(requiredWebhookKey || '').trim()) {
|
||||
setCatalog(stores)
|
||||
if (preselect) {
|
||||
setChosenStoreID(preselect.storeID ?? '')
|
||||
setChosenProductID(preselect.productID ?? '')
|
||||
} else {
|
||||
// Default anchor: bound product if found, else first product of
|
||||
// the first store with any — saves a click for new operators.
|
||||
const boundStore = stores.find((s) =>
|
||||
s.onetimeProducts.some((p) => p.id === productID)
|
||||
)
|
||||
if (boundStore && productID) {
|
||||
setChosenStoreID(boundStore.id)
|
||||
setChosenProductID(productID)
|
||||
} else {
|
||||
const storeWithProducts = stores.find(
|
||||
(s) => s.onetimeProducts.length > 0
|
||||
)
|
||||
if (storeWithProducts) {
|
||||
setChosenStoreID(storeWithProducts.id)
|
||||
setChosenProductID(storeWithProducts.onetimeProducts[0].id)
|
||||
} else {
|
||||
setChosenStoreID('')
|
||||
setChosenProductID('')
|
||||
}
|
||||
}
|
||||
}
|
||||
setPhase('idle')
|
||||
},
|
||||
[productID, t]
|
||||
)
|
||||
|
||||
const watchedMerchantID = form.watch('WaffoPancakeMerchantID') || ''
|
||||
const watchedPrivateKey = form.watch('WaffoPancakePrivateKey') || ''
|
||||
React.useEffect(() => {
|
||||
const m = watchedMerchantID.trim()
|
||||
const k = watchedPrivateKey.trim()
|
||||
if (!m || !k) return
|
||||
const signature = `${m}|${k}`
|
||||
if (signature === lastVerifiedSignature.current) return
|
||||
const timer = setTimeout(() => {
|
||||
lastVerifiedSignature.current = signature
|
||||
setPhase('verifying')
|
||||
void verifyAndFetchCatalog(m, k)
|
||||
}, 800)
|
||||
return () => clearTimeout(timer)
|
||||
}, [watchedMerchantID, watchedPrivateKey, verifyAndFetchCatalog])
|
||||
|
||||
// Initial-load verify: GET /api/option/ strips PrivateKey so a returning
|
||||
// admin opens the page with empty key. Send blank creds in the body —
|
||||
// the catalog controller falls back to the persisted OptionMap creds.
|
||||
const initialLoadRef = React.useRef(false)
|
||||
React.useEffect(() => {
|
||||
if (initialLoadRef.current) return
|
||||
if (!props.defaultValues.WaffoPancakeMerchantID.trim()) return
|
||||
initialLoadRef.current = true
|
||||
setPhase('verifying')
|
||||
void verifyAndFetchCatalog('', '')
|
||||
}, [props.defaultValues.WaffoPancakeMerchantID, verifyAndFetchCatalog])
|
||||
|
||||
// Returns typed creds when the operator edited either field; otherwise
|
||||
// blanks so the backend falls back to persisted creds. Without this,
|
||||
// returning admins (saved merchant ID but empty key field) would send
|
||||
// a mixed-state body that the backend rejects.
|
||||
const readCreds = () => {
|
||||
const formMerchant = (
|
||||
form.getValues('WaffoPancakeMerchantID') || ''
|
||||
).trim()
|
||||
const formKey = (form.getValues('WaffoPancakePrivateKey') || '').trim()
|
||||
const saved = (props.defaultValues.WaffoPancakeMerchantID || '').trim()
|
||||
const edited = formMerchant !== saved || formKey.length > 0
|
||||
if (!edited) return { merchantID: '', privateKey: '' }
|
||||
return { merchantID: formMerchant, privateKey: formKey }
|
||||
}
|
||||
|
||||
// The minted product's SuccessURL is pinned to the current Return URL
|
||||
// field, so we prompt before creating when that field is empty.
|
||||
const handleCreatePair = async () => {
|
||||
if (!credsReady) {
|
||||
toast.error(
|
||||
sandbox
|
||||
? t('Webhook public key (sandbox) is required')
|
||||
: t('Webhook public key (production) is required')
|
||||
t('Fill in both Merchant ID and API Private Key before creating.')
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
if (enabled && Number(values.WaffoPancakeUnitPrice) <= 0) {
|
||||
toast.error(t('Unit price must be greater than 0'))
|
||||
return
|
||||
const { merchantID, privateKey } = readCreds()
|
||||
const trimmedReturn = removeTrailingSlash(returnURL.trim())
|
||||
if (!trimmedReturn) {
|
||||
if (
|
||||
!window.confirm(
|
||||
t(
|
||||
'Payment return URL is empty. Create the product without a SuccessURL redirect?'
|
||||
)
|
||||
)
|
||||
) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if (enabled && Number(values.WaffoPancakeMinTopUp) < 1) {
|
||||
toast.error(t('Minimum top-up amount must be at least 1'))
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
setCreatingPair(true)
|
||||
try {
|
||||
const options: { key: string; value: string }[] = [
|
||||
{ key: 'WaffoPancakeEnabled', value: enabled ? 'true' : 'false' },
|
||||
{ key: 'WaffoPancakeSandbox', value: sandbox ? 'true' : 'false' },
|
||||
{
|
||||
key: 'WaffoPancakeMerchantID',
|
||||
value: values.WaffoPancakeMerchantID || '',
|
||||
},
|
||||
{
|
||||
key: 'WaffoPancakeStoreID',
|
||||
value: values.WaffoPancakeStoreID || '',
|
||||
},
|
||||
{
|
||||
key: 'WaffoPancakeProductID',
|
||||
value: values.WaffoPancakeProductID || '',
|
||||
},
|
||||
{
|
||||
key: 'WaffoPancakeReturnURL',
|
||||
value: removeTrailingSlash(values.WaffoPancakeReturnURL || ''),
|
||||
},
|
||||
{
|
||||
key: 'WaffoPancakeCurrency',
|
||||
value: values.WaffoPancakeCurrency || 'USD',
|
||||
},
|
||||
{
|
||||
key: 'WaffoPancakeUnitPrice',
|
||||
value: String(values.WaffoPancakeUnitPrice ?? 1),
|
||||
},
|
||||
{
|
||||
key: 'WaffoPancakeMinTopUp',
|
||||
value: String(values.WaffoPancakeMinTopUp ?? 1),
|
||||
},
|
||||
]
|
||||
|
||||
if ((values.WaffoPancakePrivateKey || '').trim()) {
|
||||
options.push({
|
||||
key: 'WaffoPancakePrivateKey',
|
||||
value: values.WaffoPancakePrivateKey,
|
||||
const body = await createWaffoPancakePair({
|
||||
merchantID,
|
||||
privateKey,
|
||||
returnURL: trimmedReturn,
|
||||
})
|
||||
if (
|
||||
body?.message === 'success' &&
|
||||
typeof body.data === 'object' &&
|
||||
body.data
|
||||
) {
|
||||
const created = body.data as PairResult
|
||||
// Refetch from GraphQL rather than trusting the response body so the
|
||||
// dropdowns reflect authoritative state, then anchor on minted IDs.
|
||||
setPhase('verifying')
|
||||
await verifyAndFetchCatalog(merchantID, privateKey, {
|
||||
storeID: created.store_id,
|
||||
productID: created.product_id,
|
||||
})
|
||||
toast.success(
|
||||
`${t('Store + product created')}: ${created.store_id} / ${created.product_id}`
|
||||
)
|
||||
return
|
||||
}
|
||||
const errData =
|
||||
body && typeof body.data === 'object' && body.data !== null
|
||||
? (body.data as PairOrphanError)
|
||||
: null
|
||||
if (errData?.orphan_store && errData.store_id) {
|
||||
setPhase('verifying')
|
||||
await verifyAndFetchCatalog(merchantID, privateKey, {
|
||||
storeID: errData.store_id,
|
||||
productID: '',
|
||||
})
|
||||
}
|
||||
|
||||
if ((values.WaffoPancakeWebhookPublicKey || '').trim()) {
|
||||
options.push({
|
||||
key: 'WaffoPancakeWebhookPublicKey',
|
||||
value: values.WaffoPancakeWebhookPublicKey,
|
||||
})
|
||||
}
|
||||
|
||||
if ((values.WaffoPancakeWebhookTestKey || '').trim()) {
|
||||
options.push({
|
||||
key: 'WaffoPancakeWebhookTestKey',
|
||||
value: values.WaffoPancakeWebhookTestKey,
|
||||
})
|
||||
}
|
||||
|
||||
for (const option of options) {
|
||||
await updateOption.mutateAsync(option)
|
||||
}
|
||||
toast.success(t('Updated successfully'))
|
||||
} catch {
|
||||
toast.error(t('Update failed'))
|
||||
const reason =
|
||||
errData?.error ??
|
||||
(typeof body?.data === 'string' ? body.data : undefined)
|
||||
toast.error(
|
||||
reason ? `${t('Creation failed')}: ${reason}` : t('Creation failed')
|
||||
)
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
`${t('Creation failed')}: ${err instanceof Error ? err.message : String(err)}`
|
||||
)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
setCreatingPair(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
// Sends raw form values (not readCreds): SaveWaffoPancakeConfig already
|
||||
// treats a blank PrivateKey as "keep existing", and MerchantID stays
|
||||
// populated from props for returning admins.
|
||||
const merchantID = (
|
||||
form.getValues('WaffoPancakeMerchantID') || ''
|
||||
).trim()
|
||||
const privateKey = (
|
||||
form.getValues('WaffoPancakePrivateKey') || ''
|
||||
).trim()
|
||||
if (!merchantID) {
|
||||
toast.error(t('Merchant ID is required'))
|
||||
return
|
||||
}
|
||||
if (!chosenStoreID || !chosenProductID) {
|
||||
toast.error(t('Pick or create both a store and a product before saving.'))
|
||||
return
|
||||
}
|
||||
setPhase('saving')
|
||||
try {
|
||||
const body = await saveWaffoPancakeConfig({
|
||||
merchantID,
|
||||
privateKey,
|
||||
returnURL: removeTrailingSlash(returnURL.trim()),
|
||||
storeID: chosenStoreID,
|
||||
productID: chosenProductID,
|
||||
})
|
||||
if (
|
||||
body?.message === 'success' &&
|
||||
typeof body.data === 'object' &&
|
||||
body.data
|
||||
) {
|
||||
const saved = body.data as { product_id: string; store_id: string }
|
||||
setStoreID(saved.store_id)
|
||||
setProductID(saved.product_id)
|
||||
toast.success(t('Waffo Pancake settings saved'))
|
||||
} else {
|
||||
const reason = typeof body?.data === 'string' ? body.data : undefined
|
||||
toast.error(
|
||||
reason
|
||||
? `${t('Waffo Pancake save failed')}: ${reason}`
|
||||
: t('Waffo Pancake save failed')
|
||||
)
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
`${t('Waffo Pancake save failed')}: ${
|
||||
err instanceof Error ? err.message : String(err)
|
||||
}`
|
||||
)
|
||||
} finally {
|
||||
setPhase('idle')
|
||||
}
|
||||
}
|
||||
|
||||
const verifying = phase === 'verifying'
|
||||
const saving = phase === 'saving'
|
||||
|
||||
// "Not edited" = MerchantID unchanged AND PrivateKey field blank, in
|
||||
// which case the backend falls back to persisted creds. Otherwise we
|
||||
// require both fields filled (mixed states would fail signature check).
|
||||
const savedMerchantID = (
|
||||
props.defaultValues.WaffoPancakeMerchantID || ''
|
||||
).trim()
|
||||
const formMerchantID = watchedMerchantID.trim()
|
||||
const formPrivateKey = watchedPrivateKey.trim()
|
||||
const credsEdited =
|
||||
formMerchantID !== savedMerchantID || formPrivateKey.length > 0
|
||||
const hasSavedCreds = savedMerchantID.length > 0
|
||||
const credsReady = credsEdited
|
||||
? formMerchantID.length > 0 && formPrivateKey.length > 0
|
||||
: hasSavedCreds
|
||||
const hasCatalog = catalog.length > 0
|
||||
|
||||
let bindStatusMessage: string
|
||||
if (!credsReady) {
|
||||
bindStatusMessage = t('Fill in the credentials above to begin.')
|
||||
} else if (verifying) {
|
||||
bindStatusMessage = t(
|
||||
'Verifying credentials and pulling stores from your Pancake account...'
|
||||
)
|
||||
} else if (hasCatalog) {
|
||||
bindStatusMessage = t(
|
||||
'Mint a fresh pair below — or pick an existing one further down. Click Save when ready.'
|
||||
)
|
||||
} else {
|
||||
bindStatusMessage = t(
|
||||
'No stores on this merchant yet. Set a return URL and click Create to mint your first pair.'
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsSection
|
||||
title={t('Waffo Pancake Payment Gateway')}
|
||||
description={t(
|
||||
'Configure Waffo Pancake hosted checkout integration for USD-priced top-ups'
|
||||
)}
|
||||
>
|
||||
<Alert>
|
||||
<AlertDescription className='text-xs'>
|
||||
<div className='space-y-4 pt-4'>
|
||||
<div>
|
||||
<h3 className='text-lg font-medium'>{t('Waffo Pancake MoR')}</h3>
|
||||
<p className='text-muted-foreground text-sm'>
|
||||
{t(
|
||||
'Obtain the merchant, store, product and signing keys from your Waffo dashboard. Webhook URL: <ServerAddress>/api/waffo-pancake/webhook'
|
||||
'Start collecting payments globally without registering a company. Built for indie developers, OPC sole proprietorships, and startups. Waffo Pancake acts as your Merchant of Record, taking on the compliance burden of global payment collection — consumption tax, invoicing, subscription management, refunds, and chargebacks. Solo developers can launch fast and stay focused on product instead of compliance. Onboard in minutes — one prompt to a full integration.'
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
<div className='grid grid-cols-3 gap-4'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Switch
|
||||
checked={form.watch('WaffoPancakeEnabled')}
|
||||
onCheckedChange={(value) =>
|
||||
form.setValue('WaffoPancakeEnabled', value)
|
||||
}
|
||||
/>
|
||||
<Label>{t('Enable Waffo Pancake')}</Label>
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Switch
|
||||
checked={form.watch('WaffoPancakeSandbox')}
|
||||
onCheckedChange={(value) =>
|
||||
form.setValue('WaffoPancakeSandbox', value)
|
||||
}
|
||||
/>
|
||||
<Label>{t('Sandbox mode')}</Label>
|
||||
</div>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Currency')}</Label>
|
||||
<Input placeholder='USD' {...form.register('WaffoPancakeCurrency')} />
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
className='space-y-4'
|
||||
data-no-autosubmit='true'
|
||||
>
|
||||
{/* Blue box — webhook configuration only. */}
|
||||
<div className='rounded-md bg-blue-50 p-4 text-sm text-blue-900 dark:bg-blue-950 dark:text-blue-100'>
|
||||
<p className='mb-2 font-medium'>{t('Webhook Configuration:')}</p>
|
||||
<ul className='list-inside list-disc space-y-1'>
|
||||
<li>
|
||||
{t('Webhook URL (Test):')}{' '}
|
||||
<code className='rounded bg-blue-100 px-1 py-0.5 text-xs dark:bg-blue-900'>
|
||||
{'<ServerAddress>/api/waffo-pancake/webhook/test'}
|
||||
</code>
|
||||
</li>
|
||||
<li>
|
||||
{t('Webhook URL (Production):')}{' '}
|
||||
<code className='rounded bg-blue-100 px-1 py-0.5 text-xs dark:bg-blue-900'>
|
||||
{'<ServerAddress>/api/waffo-pancake/webhook/prod'}
|
||||
</code>
|
||||
</li>
|
||||
<li>
|
||||
{t(
|
||||
'Register each URL into the matching Test Mode / Production Mode webhook slot in the Pancake dashboard. Separate endpoints prevent test traffic from accidentally crediting production accounts.'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{t('Configure at:')}{' '}
|
||||
<a
|
||||
href={PANCAKE_DASHBOARD_URL}
|
||||
target='_blank'
|
||||
rel='noreferrer'
|
||||
className='underline hover:no-underline'
|
||||
>
|
||||
{t('Waffo Pancake Dashboard')}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-3 gap-4'>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Merchant ID')}</Label>
|
||||
<Input
|
||||
placeholder='MER_xxx'
|
||||
{...form.register('WaffoPancakeMerchantID')}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='WaffoPancakeMerchantID'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('Merchant ID')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder='MER_xxx'
|
||||
autoComplete='off'
|
||||
{...field}
|
||||
onChange={(event) => field.onChange(event.target.value)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Store ID')}</Label>
|
||||
<Input
|
||||
placeholder='STO_xxx'
|
||||
{...form.register('WaffoPancakeStoreID')}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Product ID')}</Label>
|
||||
<Input
|
||||
placeholder='PROD_xxx'
|
||||
{...form.register('WaffoPancakeProductID')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4'>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('API Private Key')}</Label>
|
||||
<Textarea
|
||||
rows={3}
|
||||
placeholder={t('Leave blank to keep the existing key')}
|
||||
{...form.register('WaffoPancakePrivateKey')}
|
||||
className='font-mono text-xs'
|
||||
<FormField
|
||||
control={form.control}
|
||||
name='WaffoPancakePrivateKey'
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('API Private Key')}</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
rows={4}
|
||||
placeholder={t('Leave blank to keep the existing key')}
|
||||
autoComplete='new-password'
|
||||
{...field}
|
||||
onChange={(event) => field.onChange(event.target.value)}
|
||||
className='font-mono text-xs'
|
||||
/>
|
||||
</FormControl>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t(
|
||||
'The environment (test vs production) is decided by the key you paste here — use the Test key while integrating, then swap to the Production key when going live.'
|
||||
)}
|
||||
</p>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t('Stored value is not echoed back for security')}
|
||||
</p>
|
||||
</div>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Payment return URL')}</Label>
|
||||
<Input
|
||||
placeholder='https://example.com/console/topup'
|
||||
{...form.register('WaffoPancakeReturnURL')}
|
||||
/>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t('Defaults to the wallet page when empty')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4'>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Webhook public key (production)')}</Label>
|
||||
<Textarea
|
||||
rows={3}
|
||||
placeholder={t('Leave blank to keep the existing key')}
|
||||
{...form.register('WaffoPancakeWebhookPublicKey')}
|
||||
className='font-mono text-xs'
|
||||
/>
|
||||
</div>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Webhook public key (sandbox)')}</Label>
|
||||
<Textarea
|
||||
rows={3}
|
||||
placeholder={t('Leave blank to keep the existing key')}
|
||||
{...form.register('WaffoPancakeWebhookTestKey')}
|
||||
className='font-mono text-xs'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/*
|
||||
Binding section — split into two visually distinct paths:
|
||||
(A) "Use existing" pair from the loaded catalog — only rendered when
|
||||
the merchant actually has stores, so first-time setup isn't
|
||||
cluttered by dead dropdowns.
|
||||
(B) "Create a fresh pair" — always available, paired with the
|
||||
return URL field that's only meaningful here.
|
||||
The two paths are split by an "or" divider so the operator never has
|
||||
to wonder which field belongs to which intent.
|
||||
*/}
|
||||
<div className='space-y-4 pt-2'>
|
||||
<div>
|
||||
<h4 className='font-medium'>
|
||||
{t('Bind a Pancake store + product')}
|
||||
</h4>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{bindStatusMessage}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4'>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Unit price (local currency / USD)')}</Label>
|
||||
<Input
|
||||
type='number'
|
||||
step={0.01}
|
||||
min={0}
|
||||
{...form.register('WaffoPancakeUnitPrice', { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Minimum top-up (USD)')}</Label>
|
||||
<Input
|
||||
type='number'
|
||||
min={1}
|
||||
{...form.register('WaffoPancakeMinTopUp', { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/*
|
||||
Operator-facing explainer: why only ONE store + product needs
|
||||
to be bound at the gateway level, and what each piece is used
|
||||
for. Subscriptions reuse the same Store but get their own
|
||||
per-plan product, configured in the Subscriptions admin.
|
||||
*/}
|
||||
<div className='rounded-md border border-blue-200 bg-blue-50 p-3 text-xs text-blue-900 dark:border-blue-900/60 dark:bg-blue-950/40 dark:text-blue-100'>
|
||||
<p className='mb-1 font-medium'>
|
||||
{t('Why only one store + product?')}
|
||||
</p>
|
||||
<ul className='list-inside list-disc space-y-1'>
|
||||
<li>
|
||||
{t(
|
||||
'The bound Store is the parent container for every Pancake product new-api creates from this admin — both the wallet top-up product and any subscription-plan products. One store is enough; pin a different one only if you genuinely run separate Pancake catalogs.'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{t(
|
||||
'The bound Product powers wallet top-ups: when a user enters any amount, new-api runs the checkout against this single Pancake product and overrides the price per session — no need to pre-create $1 / $5 / $10 SKUs.'
|
||||
)}
|
||||
</li>
|
||||
<li>
|
||||
{t(
|
||||
'Subscription plans do NOT use the bound Product — each plan has its own dedicated Pancake product, set in the Subscriptions admin (or auto-minted via the "+ Create" button there).'
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Button onClick={handleSave} disabled={loading}>
|
||||
{loading ? t('Saving...') : t('Save Waffo Pancake settings')}
|
||||
</Button>
|
||||
</SettingsSection>
|
||||
{/* Create section — first, since creating auto-fills the pick-existing dropdowns below. */}
|
||||
<div className='space-y-1.5'>
|
||||
<Label>{t('Payment return URL')}</Label>
|
||||
<div className='flex gap-2'>
|
||||
<Input
|
||||
placeholder='https://example.com/console/topup'
|
||||
value={returnURL}
|
||||
onChange={(event) => setReturnURL(event.target.value)}
|
||||
className='flex-1'
|
||||
/>
|
||||
<Button
|
||||
type='button'
|
||||
variant='outline'
|
||||
onClick={handleCreatePair}
|
||||
disabled={creatingPair || verifying || !credsReady}
|
||||
className='shrink-0'
|
||||
>
|
||||
{creatingPair
|
||||
? t('Creating...')
|
||||
: `+ ${t('Create')} ${DEFAULT_NEW_PAIR_NAME}`}
|
||||
</Button>
|
||||
</div>
|
||||
<p className='text-muted-foreground text-xs'>
|
||||
{t(
|
||||
"Used as SuccessURL on the new product. You'll be prompted to confirm if left blank."
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{hasCatalog ? (
|
||||
<>
|
||||
<div className='relative flex items-center py-1'>
|
||||
<div className='flex-1 border-t' />
|
||||
<span className='text-muted-foreground px-3 text-[10px] font-medium tracking-[0.2em] uppercase'>
|
||||
{t('or pick existing')}
|
||||
</span>
|
||||
<div className='flex-1 border-t' />
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-3'>
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Store')}</Label>
|
||||
<Select
|
||||
items={storeSelectItems}
|
||||
value={chosenStoreID}
|
||||
onValueChange={(value) => {
|
||||
// Base UI Select can deliver null on deselect.
|
||||
setChosenStoreID(value ?? '')
|
||||
setChosenProductID('')
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className='w-full'>
|
||||
<SelectValue placeholder={t('Select a store')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{storeSelectItems.map((item) => (
|
||||
<SelectItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className='grid gap-1.5'>
|
||||
<Label>{t('Product')}</Label>
|
||||
<Select
|
||||
items={productSelectItems}
|
||||
value={chosenProductID}
|
||||
onValueChange={(value) => setChosenProductID(value ?? '')}
|
||||
disabled={
|
||||
!chosenStoreID || productSelectItems.length === 0
|
||||
}
|
||||
>
|
||||
<SelectTrigger className='w-full'>
|
||||
<SelectValue placeholder={t('Select a product')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{productSelectItems.map((item) => (
|
||||
<SelectItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<div className='flex items-center gap-3'>
|
||||
<Button
|
||||
type='button'
|
||||
onClick={handleSave}
|
||||
disabled={saving || !chosenStoreID || !chosenProductID}
|
||||
>
|
||||
{saving ? t('Saving...') : t('Save Waffo Pancake settings')}
|
||||
</Button>
|
||||
{storeID || productID ? (
|
||||
<div className='text-muted-foreground flex flex-wrap gap-x-3 gap-y-1 text-xs'>
|
||||
{storeID ? (
|
||||
<span>
|
||||
{t('Bound store:')}{' '}
|
||||
<code className='bg-muted rounded px-1 py-0.5'>
|
||||
{storeID}
|
||||
</code>
|
||||
</span>
|
||||
) : null}
|
||||
{productID ? (
|
||||
<span>
|
||||
{t('Bound product:')}{' '}
|
||||
<code className='bg-muted rounded px-1 py-0.5'>
|
||||
{productID}
|
||||
</code>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user