This commit is contained in:
Karol Wypchlo 2021-02-25 15:53:56 +01:00
parent 74851ae973
commit bde4bd8ad3
2 changed files with 48 additions and 7 deletions

View File

@ -9,9 +9,14 @@ export default async (req, res) => {
const authorization = req.headers.authorization; // authorization header from request const authorization = req.headers.authorization; // authorization header from request
const { stripeCustomerId } = await got("http://accounts:3000/user", { headers: { authorization } }).json(); const { stripeCustomerId } = await got("http://accounts:3000/user", { headers: { authorization } }).json();
const stripeCustomer = await stripe.customers.retrieve(stripeCustomerId, { expand: ["subscriptions"] }); const stripeCustomer = await stripe.customers.retrieve(stripeCustomerId, { expand: ["subscriptions"] });
// const { subscriptions } = stripeCustomer; const { subscriptions } = stripeCustomer;
res.json(stripeCustomer); // todo: find a better way to get current subscription
if (subscriptions.total_count) {
return res.json(subscriptions.data[0]);
}
res.status(StatusCodes.NO_CONTENT).end();
} catch ({ message }) { } catch ({ message }) {
res.status(StatusCodes.BAD_REQUEST).json({ error: { message } }); res.status(StatusCodes.BAD_REQUEST).json({ error: { message } });
} }

View File

@ -27,8 +27,6 @@ const plans = [
description: "20 TB premium bandwidth with full speed", description: "20 TB premium bandwidth with full speed",
}, },
]; ];
const stripeCustomerId = "cus_J09ECKPgFEPXoq";
const activePlanId = "initial_free";
const fetcher = (url) => fetch(url).then((r) => r.json()); const fetcher = (url) => fetch(url).then((r) => r.json());
@ -42,7 +40,9 @@ const ActiveBadge = () => {
export default function Payments() { export default function Payments() {
const { data: user } = useSWR("/user", fetcher); const { data: user } = useSWR("/user", fetcher);
const { data: subscription } = useSWR("/api/stripe/subscription", fetcher);
const [selectedPlanId, setSelectedPlanId] = useState("initial_free"); const [selectedPlanId, setSelectedPlanId] = useState("initial_free");
const [activePlanId, setActivePlanId] = useState(null);
const selectedPlan = plans.find(({ id }) => selectedPlanId === id); const selectedPlan = plans.find(({ id }) => selectedPlanId === id);
const handleSubscribe = async () => { const handleSubscribe = async () => {
try { try {
@ -55,6 +55,10 @@ export default function Payments() {
} }
}; };
useEffect(() => {
setActivePlanId(subscription?.plan?.id ?? null);
}, [subscription, setActivePlanId]);
return ( return (
<Layout title="Payments"> <Layout title="Payments">
<div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6"> <div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6">
@ -69,13 +73,45 @@ export default function Payments() {
</div> </div>
<div className="bg-white overflow-hidden shadow rounded-lg"> <div className="bg-white overflow-hidden shadow rounded-lg">
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<dt className="text-sm font-medium text-gray-500 truncate">Current payment</dt> <dt className="text-sm font-medium text-gray-500 truncate">Subscription status</dt>
<dd className="mt-1 text-3xl font-semibold text-gray-900">&mdash;</dd> <dd className="mt-1 text-3xl font-semibold text-gray-900">{subscription?.status ?? "—"}</dd>
</div> </div>
</div> </div>
{/* <div className="flex flex-col bg-white overflow-hidden shadow rounded-lg">
<div className="flex-grow px-4 py-5 sm:p-6">
<div className="flex items-center">
<div className="flex-shrink-0 bg-green-500 rounded-md p-3">
<svg
className="h-6 w-6 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
/>
</svg>
</div>
<div className="ml-5 w-0 flex-1">
<dt className="text-sm font-medium text-gray-500 truncate">Subscription status</dt>
<dd className="flex items-baseline">
<div className="text-2xl font-semibold text-grey-900">Active</div>
</dd>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-4 sm:px-6">
<div className="text-sm">All paid up!</div>
</div>
</div> */}
<div className="bg-white overflow-hidden shadow rounded-lg"> <div className="bg-white overflow-hidden shadow rounded-lg">
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<dt className="text-sm font-medium text-gray-500 truncate">Plan usage this month</dt> <dt className="text-sm font-medium text-gray-500 truncate">asdas</dt>
<dd className="mt-1 text-3xl font-semibold text-gray-900">&mdash;</dd> <dd className="mt-1 text-3xl font-semibold text-gray-900">&mdash;</dd>
</div> </div>
</div> </div>