lots of refactoring

dayhaysoos · Feb 4, 2020 · 6499598 · 6499598
1 parent 82feefa
commit 6499598
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 73 deletions.
diff --git a/packages/gatsby-theme-landing-components/package.json b/packages/gatsby-theme-landing-components/package.json
@@ -30,10 +30,10 @@
     "gatsby-plugin-material-ui": "^2.1.6",
     "gatsby-plugin-page-creator": "^2.1.25",
     "gatsby-plugin-react-helmet": "^3.1.11",
-    "gatsby-plugin-theme-ui": "^0.2.41",
+    "gatsby-plugin-theme-ui": "^0.3.0",
     "gatsby-source-filesystem": "^2.1.31",
     "react-helmet": "^5.2.1",
     "react-icons": "^3.7.0",
-    "theme-ui": "^0.2.44"
+    "theme-ui": "^0.3.1"
   }
 }
diff --git a/packages/gatsby-theme-stripe-non-profit/gatsby-config.js b/packages/gatsby-theme-stripe-non-profit/gatsby-config.js
@@ -3,6 +3,7 @@ module.exports = {
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,
     `gatsby-theme-stripe-plan-base`,
+    `gatsby-plugin-theme-ui`,
     {
       resolve: 'gatsby-theme-stripe-base',
       options: {

diff --git a/packages/gatsby-theme-stripe-non-profit/package.json b/packages/gatsby-theme-stripe-non-profit/package.json
@@ -42,7 +42,7 @@
     "gatsby-plugin-react-helmet": "^3.1.11",
     "gatsby-plugin-sharp": "^2.2.29",
     "gatsby-plugin-stripe": "^1.2.3",
-    "gatsby-plugin-theme-ui": "^0.2.41",
+    "gatsby-plugin-theme-ui": "^0.3.0",
     "gatsby-source-filesystem": "^2.1.31",
     "gatsby-source-graphql": "^2.1.18",
     "gatsby-theme-stripe-base": "*",
@@ -53,7 +53,7 @@
     "react-helmet": "^5.2.1",
     "react-icons": "^3.7.0",
     "react-use": "^12.7.1",
-    "theme-ui": "^0.2.44",
+    "theme-ui": "^0.3.1",
     "yup": "^0.27.0"
   }
 }
diff --git a/packages/gatsby-theme-stripe-non-profit/src/components/donate-list.js b/packages/gatsby-theme-stripe-non-profit/src/components/donate-list.js
@@ -1,38 +1,47 @@
 /** @jsx jsx */
-import { jsx } from 'theme-ui'
-import { Formik, Field } from 'formik'
+import { jsx, Grid, Button } from 'theme-ui'
 import { formatPrice } from '../util/formatPrice'
 import { useDonate } from '../context/donate'
 
 const DonateList = ({ skus }) => {
   const { storeLastClicked, lastClicked, redirectToSkuCheckout } = useDonate()
-  console.log('skews', skus)
+
   return (
-    <section>
-      <h1>Donate list</h1>
-      <div sx={{ variant: 'planList.div' }}>
+    <section
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <Grid gap={2} columns={3} sx={{ width: 380, marginBottom: '20px' }}>
         {skus.map(sku => (
-          <button
+          <Button
+            mr={2}
+            key={sku.id}
             type={'submit'}
             onClick={() => storeLastClicked(sku.skuID)}
             sx={{
               variant:
-                lastClicked === sku.skuID
+                lastClicked.lastClickedItem === sku.skuID
                   ? 'planList.button.lastClicked'
-                  : 'planList.button',
+                  : 'planList.button.notClicked',
             }}
-            key={sku.id}
           >
-            {`$${sku.price}`}
-          </button>
+            <p sx={{ margin: 0 }}>
+              {formatPrice({ price: sku.price, currency: sku.currency })}
+            </p>
+            <span>{sku.currency}</span>
+          </Button>
         ))}
-      </div>
-      <button
+      </Grid>
+      <Button
+        mt={20}
         onClick={() => redirectToSkuCheckout(lastClicked)}
-        sx={{ variant: 'planList.button.donateSubmit' }}
+        sx={{ color: 'text', bg: 'primary' }}
       >
         Donate Once
-      </button>
+      </Button>
     </section>
   )
 }

diff --git a/packages/gatsby-theme-stripe-non-profit/src/components/pay-selection.js b/packages/gatsby-theme-stripe-non-profit/src/components/pay-selection.js
@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import React, { useState } from 'react'
-import { Styled, jsx } from 'theme-ui'
+import { useState } from 'react'
+import { jsx, Button } from 'theme-ui'
 import { graphql, useStaticQuery } from 'gatsby'
 import PlanList from '../components/plan-list'
 import DonateList from '../components/donate-list'
@@ -28,6 +28,7 @@ const PaySelection = () => {
           product
           usage_type
           planID
+          currency
         }
       }
       allStripeSku {
@@ -47,31 +48,56 @@ const PaySelection = () => {
   const skus = data.allStripeSku.nodes
 
   return (
-    <section sx={{ variant: 'section.donateForm' }}>
-      <section sx={{ variant: 'section.buttonWrapper' }}>
-        <Styled.h2>Choose amount to give</Styled.h2>
-        <button
-          css={{ width: 'initial' }}
-          sx={{
-            variant: isSubscribing
-              ? 'planList.button'
-              : 'planList.button.lastClicked',
-          }}
-          onClick={() => setState({ isSubscribing: false })}
-        >
-          Give Once
-        </button>
-        <button
-          css={{ width: 'initial' }}
+    <section
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '400px',
+        paddingBottom: '20px',
+      }}
+    >
+      <section
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          marginBottom: '20px',
+        }}
+      >
+        <div
           sx={{
-            variant: isSubscribing
-              ? 'planList.button.lastClicked'
-              : 'planList.button',
+            display: 'flex',
+            justifyContent: 'space-between',
+            width: '90%',
           }}
-          onClick={() => setState({ isSubscribing: true })}
         >
-          Monthly
-        </button>
+          <Button
+            sx={{
+              width: '50%',
+              textAlign: 'center',
+              variant: isSubscribing
+                ? 'planList.button'
+                : 'planList.button.lastClicked',
+            }}
+            onClick={() => setState({ isSubscribing: false })}
+          >
+            Give Once
+          </Button>
+          <Button
+            sx={{
+              width: '50%',
+              textAlign: 'center',
+              variant: isSubscribing
+                ? 'planList.button.lastClicked'
+                : 'planList.button.notClicked',
+            }}
+            onClick={() => setState({ isSubscribing: true })}
+          >
+            Monthly
+          </Button>
+        </div>
+        <h2>Choose amount to give</h2>
       </section>
       {isSubscribing ? <PlanList plans={plans} /> : <DonateList skus={skus} />}
     </section>

diff --git a/packages/gatsby-theme-stripe-non-profit/src/components/plan-list.js b/packages/gatsby-theme-stripe-non-profit/src/components/plan-list.js
@@ -1,11 +1,8 @@
 /** @jsx jsx */
-import React from 'react'
-import { jsx } from 'theme-ui'
-import { Formik, Field } from 'formik'
+import { jsx, Grid, Button } from 'theme-ui'
+import { formatPrice } from '../util/formatPrice'
 import { useDonate } from '../context/donate'
 
-const formatPrice = price => price.toString().slice(0, -2)
-
 const PlanList = ({ plans }) => {
   const {
     storeLastClicked,
@@ -16,31 +13,44 @@ const PlanList = ({ plans }) => {
   } = useDonate()
 
   return (
-    <main sx={{ variant: 'planList.main' }}>
-      <div sx={{ variant: 'planList.div' }}>
+    <section
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+      }}
+    >
+      <Grid
+        gap={2}
+        columns={3}
+        sx={{ width: 380, marginBottom: '20px', backgroundColor: 'coral' }}
+      >
         {plans.map(plan => (
-          <button
+          <Button
             type={'submit'}
             onClick={() => storeLastClicked(plan)}
             sx={{
               variant:
-                lastClicked.planID === plan.planID
+                lastClicked.lastClickedItem === plan.planID
                   ? 'planList.button.lastClicked'
-                  : 'planList.button',
+                  : 'planList.button.notClicked',
             }}
             key={plan.id}
           >
-            {`$${formatPrice(plan.amount)}`}
-          </button>
+            <p sx={{ margin: 0 }}>
+              {formatPrice({ price: plan.amount, currency: plan.currency })}
+            </p>
+            <span>{plan.currency}</span>
+          </Button>
         ))}
-      </div>
-      <button
+      </Grid>
+      <Button
         onClick={() => redirectToPlanCheckout(lastClicked)}
-        sx={{ variant: 'planList.button.donateSubmit' }}
+        sx={{ color: 'text', bg: 'primary', marginTop: '20px' }}
       >
         Donate Monthly
-      </button>
-    </main>
+      </Button>
+    </section>
   )
 }
 

diff --git a/packages/gatsby-theme-stripe-non-profit/src/context/donate.js b/packages/gatsby-theme-stripe-non-profit/src/context/donate.js
@@ -1,15 +1,14 @@
 import React, { createContext, useReducer, useContext } from 'react'
 
 const reducer = (donate, action) => {
-  const { lastClicked } = donate
-  const { plan } = action
+  const { lastClickedItem } = action
 
   switch (action.type) {
     case 'storeLastClicked':
       return {
         ...donate,
         lastClicked: {
-          ...plan,
+          lastClickedItem,
         },
       }
 
@@ -46,22 +45,24 @@ export const useDonate = () => {
   const { lastClicked, isPaying } = donate
 
   const redirectToPlanCheckout = async () => {
+    console.log('derp', lastClicked)
     const { error } = await stripe.redirectToCheckout({
-      items: [{ plan: lastClicked.planID, quantity: 1 }],
+      items: [{ plan: lastClicked.lastClickedItem, quantity: 1 }],
       successUrl: `http://localhost:8000/`,
       cancelUrl: `http://localhost:8000/`,
     })
   }
 
   const redirectToSkuCheckout = async sku => {
     const { error } = await stripe.redirectToCheckout({
-      items: [{ sku, quantity: 1 }],
+      items: [{ sku: sku.lastClickedItem, quantity: 1 }],
       successUrl: `http://localhost:8000/`,
       cancelUrl: `http://localhost:8000/`,
     })
   }
 
-  const storeLastClicked = plan => dispatch({ type: 'storeLastClicked', plan })
+  const storeLastClicked = lastClickedItem =>
+    dispatch({ type: 'storeLastClicked', lastClickedItem })
 
   const handlePaymentClick = plan => dispatch({ type: 'isPaying' })
 

diff --git a/packages/gatsby-theme-stripe-non-profit/src/gatsby-plugin-theme-ui/index.js b/packages/gatsby-theme-stripe-non-profit/src/gatsby-plugin-theme-ui/index.js
@@ -0,0 +1,52 @@
+const theme = {
+  fonts: {
+    body:
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
+    heading: 'inherit',
+    monospace: 'Menlo, monospace',
+  },
+  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
+  fontWeights: {
+    body: 400,
+    heading: 700,
+    bold: 700,
+  },
+  lineHeights: {
+    body: 1.5,
+    heading: 1.125,
+  },
+  colors: {
+    text: '#000',
+    background: '#fff',
+    primary: '#07c',
+    secondary: '#30c',
+    muted: '#f6f6f6',
+  },
+  buttons: {
+    primary: {
+      color: 'background',
+      bg: 'primary',
+      '&:hover': {
+        bg: 'text',
+      },
+    },
+    secondary: {
+      color: 'background',
+      bg: 'secondary',
+    },
+  },
+  planList: {
+    button: {
+      lastClicked: {
+        backgroundColor: 'primary',
+        color: 'text',
+      },
+      notClicked: {
+        backgroundColor: 'secondary',
+        color: 'text',
+      },
+    },
+  },
+}
+
+export default theme
diff --git a/packages/gatsby-theme-stripe-storefront/package.json b/packages/gatsby-theme-stripe-storefront/package.json
@@ -44,7 +44,7 @@
     "gatsby-plugin-react-helmet": "^3.1.11",
     "gatsby-plugin-sharp": "^2.2.29",
     "gatsby-plugin-stripe": "^1.2.3",
-    "gatsby-plugin-theme-ui": "^0.2.41",
+    "gatsby-plugin-theme-ui": "^0.3.0",
     "gatsby-source-filesystem": "^2.1.31",
     "gatsby-source-graphql": "^2.1.18",
     "gatsby-theme-stripe-base": "^1.1.0",
@@ -54,7 +54,7 @@
     "react-helmet": "^5.2.1",
     "react-icons": "^3.7.0",
     "react-use": "^12.7.1",
-    "theme-ui": "^0.2.44",
+    "theme-ui": "^0.3.1",
     "yup": "^0.27.0"
   }
 }