From 2d92a332fcd15a45be909d71cede40e0ce3db908 Mon Sep 17 00:00:00 2001
From: Paul Copplestone <pcopplestone@gmail.com>
Date: Tue, 1 Sep 2020 15:50:59 +0800
Subject: [PATCH] Kaizen

---
 web/src/data/sponsors.json |  71 ++++++++++++-
 web/src/pages/oss.js       | 206 +++++++++++++------------------------
 2 files changed, 143 insertions(+), 134 deletions(-)

diff --git a/web/src/data/sponsors.json b/web/src/data/sponsors.json
index c078a3a4ca8..c7265fd8102 100644
--- a/web/src/data/sponsors.json
+++ b/web/src/data/sponsors.json
@@ -6,7 +6,17 @@
     "sponsorship_started_on": "2020-05-27T17:06:42.000+08:00",
     "is_public": true,
     "is_yearly": false,
-    "transactions": []
+    "transactions": [
+      {
+        "transaction_id": "7SY61892ND0264025",
+        "tier_name": "$5 a month",
+        "tier_monthly_amount": "$5.00",
+        "processed_amount": "$5.00",
+        "is_prorated": false,
+        "status": "settled",
+        "transaction_date": "2020-08-28T01:21:53.000+08:00"
+      }
+    ]
   },
   {
     "sponsor_handle": "prashantpawar",
@@ -71,7 +81,17 @@
     "sponsorship_started_on": "2020-05-28T12:57:15.000+08:00",
     "is_public": true,
     "is_yearly": false,
-    "transactions": []
+    "transactions": [
+      {
+        "transaction_id": "ch_1HKpKjEQsq43iHhX74RFUOhV",
+        "tier_name": "$19 a month",
+        "tier_monthly_amount": "$19.00",
+        "processed_amount": "$19.00",
+        "is_prorated": false,
+        "status": "settled",
+        "transaction_date": "2020-08-28T01:56:29.000+08:00"
+      }
+    ]
   },
   {
     "sponsor_handle": "Cmarenburg",
@@ -233,6 +253,15 @@
     "is_public": true,
     "is_yearly": true,
     "transactions": [
+      {
+        "transaction_id": "ch_1HLB7GEQsq43iHhXjbYy2sho",
+        "tier_name": "$19 a month",
+        "tier_monthly_amount": "$19.00",
+        "processed_amount": "$228.00",
+        "is_prorated": false,
+        "status": "processor_declined",
+        "transaction_date": "2020-08-29T01:12:03.000+08:00"
+      },
       {
         "transaction_id": "ch_1HIeLlEQsq43iHhXpNJXbWpX",
         "tier_name": "$19 a month",
@@ -318,5 +347,43 @@
         "transaction_date": "2020-08-19T04:03:17.000+08:00"
       }
     ]
+  },
+  {
+    "sponsor_handle": "singareddynm",
+    "sponsor_profile_name": null,
+    "sponsor_public_email": null,
+    "sponsorship_started_on": "2020-08-25T14:55:22.000+08:00",
+    "is_public": true,
+    "is_yearly": false,
+    "transactions": [
+      {
+        "transaction_id": "ch_1HJw41EQsq43iHhXsroO9Bwa",
+        "tier_name": "$19 a month",
+        "tier_monthly_amount": "$19.00",
+        "processed_amount": "$19.00",
+        "is_prorated": false,
+        "status": "settled",
+        "transaction_date": "2020-08-25T14:55:34.000+08:00"
+      }
+    ]
+  },
+  {
+    "sponsor_handle": "zlwaterfield",
+    "sponsor_profile_name": "Zach Waterfield",
+    "sponsor_public_email": null,
+    "sponsorship_started_on": "2020-08-28T22:39:16.000+08:00",
+    "is_public": true,
+    "is_yearly": true,
+    "transactions": [
+      {
+        "transaction_id": "ch_1HL8jbEQsq43iHhXDAgWo2Kd",
+        "tier_name": "$5 a month",
+        "tier_monthly_amount": "$5.00",
+        "processed_amount": "$60.00",
+        "is_prorated": false,
+        "status": "settled",
+        "transaction_date": "2020-08-28T22:39:26.000+08:00"
+      }
+    ]
   }
 ]
diff --git a/web/src/pages/oss.js b/web/src/pages/oss.js
index b0a6835aaa4..7fe5e1f97ad 100644
--- a/web/src/pages/oss.js
+++ b/web/src/pages/oss.js
@@ -8,13 +8,56 @@ import { repos } from '../data/github'
 export default function Oss() {
   const context = useDocusaurusContext()
   const { siteConfig = {} } = context
-
-  const level1 = sponsors.filter((x) => x.transactions[0]?.tier_name == '$5 a month')
-  const level2 = sponsors.filter((x) => x.transactions[0]?.tier_name == '$19 a month')
-  const level3 = sponsors.filter((x) => x.transactions[0]?.tier_name == '$49 a month')
-  const level4 = sponsors.filter((x) => x.transactions[0]?.tier_name == '$1,000 a month')
-  const level5 = sponsors.filter((x) => x.transactions[0]?.tier_name == '$2,500 a month')
-  const level6 = sponsors.filter((x) => x.transactions[0]?.tier_name == '$5,000 a month')
+  const tiers = [
+    {
+      tier_name: '$5,000 a month',
+      heading: 'Enterprise: $5,000 per month',
+      transactions: sponsors.filter(
+        (x) =>
+          x.transactions[0]?.tier_name == '$5,000 a month' && x.transactions[0]?.status == 'settled'
+      ),
+    },
+    {
+      tier_name: '$2,500 a month',
+      heading: 'Agency: $2,500 per month',
+      transactions: sponsors.filter(
+        (x) =>
+          x.transactions[0]?.tier_name == '$2,500 a month' && x.transactions[0]?.status == 'settled'
+      ),
+    },
+    {
+      tier_name: '$1,000 a month',
+      heading: 'Startup: $1,000 per month',
+      transactions: sponsors.filter(
+        (x) =>
+          x.transactions[0]?.tier_name == '$1,000 a month' && x.transactions[0]?.status == 'settled'
+      ),
+    },
+    {
+      tier_name: '$49 a month',
+      heading: 'Evangelist: $49 per month',
+      transactions: sponsors.filter(
+        (x) =>
+          x.transactions[0]?.tier_name == '$49 a month' && x.transactions[0]?.status == 'settled'
+      ),
+    },
+    {
+      tier_name: '$19 a month',
+      heading: 'Supporter: $19 per month',
+      transactions: sponsors.filter(
+        (x) =>
+          x.transactions[0]?.tier_name == '$19 a month' && x.transactions[0]?.status == 'settled'
+      ),
+    },
+    {
+      tier_name: '$5 a month',
+      heading: 'Contributor: $5 per month',
+      transactions: sponsors.filter(
+        (x) =>
+          x.transactions[0]?.tier_name == '$5 a month' && x.transactions[0]?.status == 'settled'
+      ),
+    },
+  ]
 
   return (
     <Layout title={`${siteConfig.title}`} description={siteConfig.tagline}>
@@ -24,140 +67,39 @@ export default function Oss() {
             <div className="col">
               <h2 className="with-underline">Open source</h2>
               <p className="">
-                Supabase is an opensource company. Supabase tries to support existing open source
+                Supabase is an opensource company, supporting existing open source
                 tools and communities wherever possible.
               </p>
               <p className="">
-                We also take sponsorship, which we then re-distribute to the community, either
+                We re-distribute our sponsorship to the community either
                 directly or by hiring employees to work on the tools we use. Open source is made
-                better by all of our sponsors:
+                better by all of our sponsors.
               </p>
             </div>
           </div>
-          {level6.length && (
-            <>
-              <h3 className="">Enterprise: $5,000 per month</h3>
-              <div class="row is-multiline">
-                {level6.map((x) => (
-                  <div class="col col--3" key={x.sponsor_handle}>
-                    <a class="avatar" href={`https://github.com/${x.sponsor_handle}`}>
-                      <img
-                        class="avatar__photo avatar__photo--sm"
-                        src={`https://github.com/${x.sponsor_handle}.png`}
-                      />
-                      <div class="avatar__intro">
-                        <h5 class="avatar__name">{x.sponsor_handle}</h5>
+          {tiers.map(
+            (t) =>
+              !!t.transactions.length && (
+                <>
+                  <h3 className="">{t.heading}</h3>
+                  <div class="row is-multiline">
+                    {t.transactions.map((x) => (
+                      <div class="col col--3" key={x.sponsor_handle}>
+                        <a class="avatar" href={`https://github.com/${x.sponsor_handle}`}>
+                          <img
+                            class="avatar__photo avatar__photo--sm"
+                            src={`https://github.com/${x.sponsor_handle}.png`}
+                          />
+                          <div class="avatar__intro">
+                            <h5 class="avatar__name">{x.sponsor_handle}</h5>
+                          </div>
+                        </a>
                       </div>
-                    </a>
+                    ))}
                   </div>
-                ))}
-              </div>
-              <br />
-            </>
-          )}
-          {!!level5.length && (
-            <>
-              <h3 className="">Agency: $2,500 per month</h3>
-              <div class="row is-multiline">
-                {level5.map((x) => (
-                  <div class="col col--3" key={x.sponsor_handle}>
-                    <a class="avatar" href={`https://github.com/${x.sponsor_handle}`}>
-                      <img
-                        class="avatar__photo avatar__photo--sm"
-                        src={`https://github.com/${x.sponsor_handle}.png`}
-                      />
-                      <div class="avatar__intro">
-                        <h5 class="avatar__name">{x.sponsor_handle}</h5>
-                      </div>
-                    </a>
-                  </div>
-                ))}
-              </div>
-              <br />
-            </>
-          )}
-          {!!level4.length && (
-            <>
-              <h3 className="">Startup: $1,000 per month</h3>
-              <div class="row is-multiline">
-                {level4.map((x) => (
-                  <div class="col col--3" key={x.sponsor_handle}>
-                    <a class="avatar" href={`https://github.com/${x.sponsor_handle}`}>
-                      <img
-                        class="avatar__photo avatar__photo--sm"
-                        src={`https://github.com/${x.sponsor_handle}.png`}
-                      />
-                      <div class="avatar__intro">
-                        <h5 class="avatar__name">{x.sponsor_handle}</h5>
-                      </div>
-                    </a>
-                  </div>
-                ))}
-              </div>
-              <br />
-            </>
-          )}
-          {!!level3.length && (
-            <>
-              <h3 className="">Evangelist: $49 per month</h3>
-              <div class="row is-multiline">
-                {level3.map((x) => (
-                  <div class="col col--3" key={x.sponsor_handle}>
-                    <a class="avatar" href={`https://github.com/${x.sponsor_handle}`}>
-                      <img
-                        class="avatar__photo avatar__photo--sm"
-                        src={`https://github.com/${x.sponsor_handle}.png`}
-                      />
-                      <div class="avatar__intro">
-                        <h5 class="avatar__name">{x.sponsor_handle}</h5>
-                      </div>
-                    </a>
-                  </div>
-                ))}
-              </div>
-              <br />
-            </>
-          )}
-          {level2.length && (
-            <>
-              <h3 className="">Supporter: $19 per month</h3>
-              <div class="row is-multiline">
-                {level2.map((x) => (
-                  <div class="col col--3" key={x.sponsor_handle}>
-                    <a class="avatar" href={`https://github.com/${x.sponsor_handle}`}>
-                      <img
-                        class="avatar__photo avatar__photo--sm"
-                        src={`https://github.com/${x.sponsor_handle}.png`}
-                      />
-                      <div class="avatar__intro">
-                        <h5 class="avatar__name">{x.sponsor_handle}</h5>
-                      </div>
-                    </a>
-                  </div>
-                ))}
-              </div>
-              <br />
-            </>
-          )}
-          {level1.length && (
-            <>
-              <h3 className="">Contributor: $5 per month</h3>
-              <div class="row is-multiline">
-                {level1.map((x) => (
-                  <div class="col col--3" key={x.sponsor_handle}>
-                    <a class="avatar" href={`https://github.com/${x.sponsor_handle}`}>
-                      <img
-                        class="avatar__photo avatar__photo--sm"
-                        src={`https://github.com/${x.sponsor_handle}.png`}
-                      />
-                      <div class="avatar__intro">
-                        <h5 class="avatar__name">{x.sponsor_handle}</h5>
-                      </div>
-                    </a>
-                  </div>
-                ))}
-              </div>
-            </>
+                  <br />
+                </>
+              )
           )}
         </div>
       </section>