1 files changed, 83 insertions, 0 deletions
diff --git a/finished-application/frontend/components/TakeMyMoney.js b/finished-application/frontend/components/TakeMyMoney.js
new file mode 100644
index 0000000..b9e42ea
--- /dev/null
+++ b/finished-application/frontend/components/TakeMyMoney.js
@@ -0,0 +1,83 @@
+import { Component } from 'react';
+import StripeCheckout from 'react-stripe-checkout';
+import { Mutation, Query } from 'react-apollo';
+import Router from 'next/router';
+import NProgress from 'nprogress';
+import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
+import calcTotalPrice from '../lib/calcTotalPrice';
+import Error from './ErrorMessage';
+import User, { CURRENT_USER_QUERY } from './User';
+
+const CREATE_ORDER_MUTATION = gql`
+  mutation createOrder($token: String!) {
+    createOrder(token: $token) {
+      id
+      charge
+      total
+      items {
+        id
+        title
+      }
+    }
+  }
+`;
+
+function totalItems(cart) {
+  return cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0);
+}
+
+class TakeMyMoney extends Component {
+  onToken = async (res, createOrder) => {
+    NProgress.start();
+    const order = await createOrder({
+      variables: {
+        token: res.id,
+      },
+    });
+    console.log(order);
+    // Route them to that order page
+    const { id } = order.data.createOrder;
+    Router.push({
+      pathname: `/order`,
+      query: { id },
+    });
+  };
+  render() {
+    return (
+      <User>
+        {({ data: { me }, error }) => {
+          if (!me || !me.cart.length) return null;
+          if (error) return <Error error={error} />;
+          return (
+            <Mutation
+              mutation={CREATE_ORDER_MUTATION}
+              refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+            >
+              {createOrder => (
+                <StripeCheckout
+                  amount={calcTotalPrice(me.cart)}
+                  name="Sick Fits Haul"
+                  description={`Order of ${totalItems(me.cart)} Items From Sick Fits`}
+                  image={me.cart[0].item && me.cart[0].item.image}
+                  token={res => this.onToken(res, createOrder)}
+                  stripeKey="pk_lclTtThFp8CnO3QtEZSd8HA9mFUps"
+                  currency="USD"
+                  email={me.email}
+                >
+                  {this.props.children}
+                </StripeCheckout>
+              )}
+            </Mutation>
+          );
+        }}
+      </User>
+    );
+  }
+}
+
+TakeMyMoney.propTypes = {
+  children: PropTypes.any,
+};
+
+export default TakeMyMoney;