From bde4bd8ad31c52b78d18fb142832d1b9a5d8f83b Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Thu, 25 Feb 2021 15:53:56 +0100
Subject: [PATCH] foo

---
 ...{activeSubscription.js => subscription.js} |  9 +++-
 packages/dashboard/src/pages/payments.js      | 46 +++++++++++++++++--
 2 files changed, 48 insertions(+), 7 deletions(-)
 rename packages/dashboard/src/pages/api/stripe/{activeSubscription.js => subscription.js} (72%)

diff --git a/packages/dashboard/src/pages/api/stripe/activeSubscription.js b/packages/dashboard/src/pages/api/stripe/subscription.js
similarity index 72%
rename from packages/dashboard/src/pages/api/stripe/activeSubscription.js
rename to packages/dashboard/src/pages/api/stripe/subscription.js
index 459c7136..444bc0e9 100644
--- a/packages/dashboard/src/pages/api/stripe/activeSubscription.js
+++ b/packages/dashboard/src/pages/api/stripe/subscription.js
@@ -9,9 +9,14 @@ export default async (req, res) => {
     const authorization = req.headers.authorization; // authorization header from request
     const { stripeCustomerId } = await got("http://accounts:3000/user", { headers: { authorization } }).json();
     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 }) {
     res.status(StatusCodes.BAD_REQUEST).json({ error: { message } });
   }
diff --git a/packages/dashboard/src/pages/payments.js b/packages/dashboard/src/pages/payments.js
index c42c3fb9..a0fd4687 100644
--- a/packages/dashboard/src/pages/payments.js
+++ b/packages/dashboard/src/pages/payments.js
@@ -27,8 +27,6 @@ const plans = [
     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());
 
@@ -42,7 +40,9 @@ const ActiveBadge = () => {
 
 export default function Payments() {
   const { data: user } = useSWR("/user", fetcher);
+  const { data: subscription } = useSWR("/api/stripe/subscription", fetcher);
   const [selectedPlanId, setSelectedPlanId] = useState("initial_free");
+  const [activePlanId, setActivePlanId] = useState(null);
   const selectedPlan = plans.find(({ id }) => selectedPlanId === id);
   const handleSubscribe = async () => {
     try {
@@ -55,6 +55,10 @@ export default function Payments() {
     }
   };
 
+  useEffect(() => {
+    setActivePlanId(subscription?.plan?.id ?? null);
+  }, [subscription, setActivePlanId]);
+
   return (
     <Layout title="Payments">
       <div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6">
@@ -69,13 +73,45 @@ export default function Payments() {
             </div>
             <div className="bg-white overflow-hidden shadow rounded-lg">
               <div className="px-4 py-5 sm:p-6">
-                <dt className="text-sm font-medium text-gray-500 truncate">Current payment</dt>
-                <dd className="mt-1 text-3xl font-semibold text-gray-900">&mdash;</dd>
+                <dt className="text-sm font-medium text-gray-500 truncate">Subscription status</dt>
+                <dd className="mt-1 text-3xl font-semibold text-gray-900">{subscription?.status ?? "—"}</dd>
               </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="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>
               </div>
             </div>