113 lines
3.9 KiB
TypeScript
113 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
// apps/web/src/components/billing/payple-manage-button.tsx
|
|
// Payple 구독 관리 — payple-manage Edge Function 호출 (구독 취소)
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Button, CircularProgress, Alert, Box, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material'
|
|
import SettingsIcon from '@mui/icons-material/Settings'
|
|
import { getSupabaseBrowserClient } from '@/lib/supabase-browser'
|
|
|
|
export function PaypleManageButton(): React.ReactElement {
|
|
const [busy, setBusy] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [confirmOpen, setConfirmOpen] = useState(false)
|
|
const [success, setSuccess] = useState(false)
|
|
const [ready, setReady] = useState(false)
|
|
|
|
useEffect(() => setReady(true), [])
|
|
|
|
async function handleCancel(): Promise<void> {
|
|
setConfirmOpen(false)
|
|
setError(null)
|
|
setBusy(true)
|
|
try {
|
|
const supabase = getSupabaseBrowserClient()
|
|
const { data: { session }, error: sessionError } = await supabase.auth.getSession()
|
|
|
|
if (sessionError || !session) {
|
|
setError('로그인이 필요합니다')
|
|
return
|
|
}
|
|
|
|
const baseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL?.trim()
|
|
if (!baseUrl) throw new Error('결제 서버 설정이 완료되지 않았습니다')
|
|
|
|
const response = await fetch(
|
|
new URL('/functions/v1/payple-manage', baseUrl).toString(),
|
|
{
|
|
method: 'POST',
|
|
headers: {
|
|
Authorization: `Bearer ${session.access_token}`,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ action: 'cancel' }),
|
|
}
|
|
)
|
|
|
|
const data = await response.json().catch(() => null) as { success?: unknown; cancel_at?: unknown } | null
|
|
if (!response.ok) {
|
|
throw new Error(response.status === 409
|
|
? '구독 취소 확인이 필요합니다. 다시 요청하지 말고 고객센터에 문의해 주세요.'
|
|
: '구독 취소를 완료하지 못했습니다.')
|
|
}
|
|
if (
|
|
data?.success !== true
|
|
|| typeof data.cancel_at !== 'string'
|
|
|| !Number.isFinite(Date.parse(data.cancel_at))
|
|
) {
|
|
throw new Error('구독 취소 결과를 확인할 수 없습니다.')
|
|
}
|
|
setSuccess(true)
|
|
window.setTimeout(() => window.location.reload(), 2000)
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : '알 수 없는 오류')
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
if (success) {
|
|
return (
|
|
<Alert data-testid="payple-manage-success" severity="info" variant="outlined" sx={{ fontSize: 12 }}>
|
|
구독이 취소되었습니다. 현재 결제 기간이 끝날 때까지 이용 가능합니다.
|
|
</Alert>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Box>
|
|
<Button
|
|
variant="outlined"
|
|
size="small"
|
|
startIcon={busy ? <CircularProgress size={14} /> : <SettingsIcon />}
|
|
data-testid="payple-manage-open"
|
|
onClick={() => setConfirmOpen(true)}
|
|
disabled={busy || !ready}
|
|
>
|
|
구독 관리
|
|
</Button>
|
|
|
|
<Dialog open={confirmOpen} onClose={() => setConfirmOpen(false)}>
|
|
<DialogTitle>구독 취소</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>
|
|
정말 구독을 취소하시겠습니까? 현재 결제 기간이 끝날 때까지는 계속 이용할 수 있습니다.
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => setConfirmOpen(false)}>돌아가기</Button>
|
|
<Button data-testid="payple-manage-confirm" onClick={() => void handleCancel()} color="error" variant="contained">
|
|
구독 취소
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
{error && (
|
|
<Alert data-testid="payple-manage-error" severity="error" variant="outlined" sx={{ mt: 1, fontSize: 11 }}>
|
|
{error}
|
|
</Alert>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|