postiz/apps/frontend/src/components/billing/purchase.crypto.tsx

31 lines
1.0 KiB
TypeScript

import { FC, useCallback, useState } from 'react';
import { useFetch } from '@gitroom/helpers/utils/custom.fetch';
import { Button } from '@gitroom/react/form/button';
import { useT } from '@gitroom/react/translation/get.transation.service.client';
export const PurchaseCrypto: FC = () => {
const fetch = useFetch();
const t = useT();
const [loading, setLoading] = useState(false);
const load = useCallback(async () => {
setLoading(true);
const data = await (await fetch('/billing/crypto')).json();
window.location.href = data.invoice_url;
}, []);
return (
<div className="flex-1 bg-sixth items-center border border-customColor6 rounded-[4px] p-[24px] gap-[16px] flex [@media(max-width:1024px)]:items-center">
<div>
{t(
'purchase_a_life_time_pro_account_with_sol_199',
'Purchase a Life-time PRO account with SOL ($199)'
)}
</div>
<div>
<Button loading={loading} onClick={load}>
{t('purchase_now', 'Purchase now')}
</Button>
</div>
</div>
);
};