2 files changed, 107 insertions, 0 deletions
diff --git a/stepped-solutions/50/frontend/components/Cart.js b/stepped-solutions/50/frontend/components/Cart.js
new file mode 100755
index 0000000..7dafeef
--- /dev/null
+++ b/stepped-solutions/50/frontend/components/Cart.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Query, Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import { adopt } from 'react-adopt';
+import User from './User';
+import CartStyles from './styles/CartStyles';
+import Supreme from './styles/Supreme';
+import CloseButton from './styles/CloseButton';
+import SickButton from './styles/SickButton';
+import CartItem from './CartItem';
+import calcTotalPrice from '../lib/calcTotalPrice';
+import formatMoney from '../lib/formatMoney';
+import TakeMyMoney from './TakeMyMoney';
+
+const LOCAL_STATE_QUERY = gql`
+  query {
+    cartOpen @client
+  }
+`;
+
+const TOGGLE_CART_MUTATION = gql`
+  mutation {
+    toggleCart @client
+  }
+`;
+/* eslint-disable */
+const Composed = adopt({
+  user: ({ render }) => <User>{render}</User>,
+  toggleCart: ({ render }) => <Mutation mutation={TOGGLE_CART_MUTATION}>{render}</Mutation>,
+  localState: ({ render }) => <Query query={LOCAL_STATE_QUERY}>{render}</Query>,
+});
+/* eslint-enable */
+
+const Cart = () => (
+  <Composed>
+    {({ user, toggleCart, localState }) => {
+      const me = user.data.me;
+      if (!me) return null;
+      return (
+        <CartStyles open={localState.data.cartOpen}>
+          <header>
+            <CloseButton onClick={toggleCart} title="close">
+              &times;
+            </CloseButton>
+            <Supreme>{me.name}'s Cart</Supreme>
+            <p>
+              You Have {me.cart.length} Item{me.cart.length === 1 ? '' : 's'} in your cart.
+            </p>
+          </header>
+          <ul>{me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)}</ul>
+          <footer>
+            <p>{formatMoney(calcTotalPrice(me.cart))}</p>
+            <TakeMyMoney>
+              <SickButton>Checkout</SickButton>
+            </TakeMyMoney>
+          </footer>
+        </CartStyles>
+      );
+    }}
+  </Composed>
+);
+
+export default Cart;
+export { LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION };
diff --git a/stepped-solutions/50/frontend/components/TakeMyMoney.js b/stepped-solutions/50/frontend/components/TakeMyMoney.js
new file mode 100755
index 0000000..424b024
--- /dev/null
+++ b/stepped-solutions/50/frontend/components/TakeMyMoney.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import StripeCheckout from 'react-stripe-checkout';
+import { Mutation } 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';
+
+function totalItems(cart) {
+  return cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0);
+}
+
+class TakeMyMoney extends React.Component {
+  onToken = res => {
+    console.log('On Token Called!');
+    console.log(res.id);
+  };
+  render() {
+    return (
+      <User>
+        {({ data: { me } }) => (
+          <StripeCheckout
+            amount={calcTotalPrice(me.cart)}
+            name="Sick Fits"
+            description={`Order of ${totalItems(me.cart)} items!`}
+            image={me.cart[0].item && me.cart[0].item.image}
+            stripeKey="pk_test_Vtknn6vSdcZWSG2JWvEiWSqC"
+            currency="USD"
+            email={me.email}
+            token={res => this.onToken(res)}
+          >
+            {this.props.children}
+          </StripeCheckout>
+        )}
+      </User>
+    );
+  }
+}
+
+export default TakeMyMoney;