Memberstack Coding Challenge

client/package.json

@@ -7,8 +7,11 @@
     "@paypal/react-paypal-js": "^4.1.1",
     "@stripe/react-stripe-js": "^1.2.2",
     "@stripe/stripe-js": "^1.12.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "axios": "^0.21.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-hook-form": "^7.0.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2"
   },
   "scripts": {
@@ -37,8 +40,9 @@
   },
   "devDependencies": {
     "@types/node": "^14.14.28",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "@types/react-router-dom": "^5.1.7",
     "typescript": "^4.1.5"
   }
 }

client/src/App.tsx

@@ -1,11 +1,14 @@
 import React from "react";
+import Routes from "./routes";
+import "./app.css";
 
-function App() {
+const App: React.FC = () => {
   return (
     <div className="App">
       <h1>Memberstack Coding Challenge</h1>
+      <Routes />
     </div>
   );
-}
+};
 
-export default App;
+export default React.memo(App);

client/src/app.css

@@ -0,0 +1,129 @@
+body {
+    background: #0e101c;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+      "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+      sans-serif;
+  }
+
+  form {
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    font-weight: 100;
+    color: white;
+    text-align: center;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgb(79, 98, 148);
+  }
+
+  .form {
+    background: #0e101c;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+
+  p {
+    color: #bf1650;
+  }
+
+  p::before {
+    display: inline;
+    content: "⚠ ";
+  }
+
+  input {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid white;
+    padding: 10px 15px;
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  label {
+    line-height: 2;
+    text-align: left;
+    display: block;
+    margin-bottom: 13px;
+    margin-top: 20px;
+    color: white;
+    font-size: 14px;
+    font-weight: 200;
+  }
+
+  button[type="submit"],
+  input[type="submit"] {
+    background: #ec5990;
+    color: white;
+    text-transform: uppercase;
+    border: none;
+    margin-top: 40px;
+    padding: 20px;
+    font-size: 16px;
+    font-weight: 100;
+    letter-spacing: 10px;
+  }
+
+  button[type="submit"]:hover,
+  input[type="submit"]:hover {
+    background: #bf1650;
+  }
+
+  button[type="submit"]:active,
+  input[type="button"]:active,
+  input[type="submit"]:active {
+    transition: 0.3s all;
+    transform: translateY(3px);
+    border: 1px solid transparent;
+    opacity: 0.8;
+  }
+
+  input:disabled {
+    opacity: 0.4;
+  }
+
+  input[type="button"]:hover {
+    transition: 0.3s all;
+  }
+
+  button[type="submit"],
+  input[type="button"],
+  input[type="submit"] {
+    -webkit-appearance: none;
+  }
+
+  .App {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  button[type="button"] {
+    display: block;
+    appearance: none;
+    background: #333;
+    color: white;
+    border: none;
+    text-transform: uppercase;
+    padding: 10px 20px;
+    border-radius: 4px;
+  }
+
+  hr {
+    margin-top: 30px;
+  }
+
+  button {
+    display: block;
+    appearance: none;
+    margin-top: 40px;
+    border: 1px solid #333;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    padding: 10px 20px;
+    border-radius: 4px;
+  }
+

client/src/common/Api.ts

@@ -0,0 +1,35 @@
+import axios from 'axios';
+import { SignupInput } from '../components/Signup'
+import { PaymentInput } from '../components/Payment'
+
+const axiosInstance = axios.create({
+  baseURL: 'http://localhost:5000',
+  headers: {'Accept': 'application/json'}
+});
+
+const Api = {
+  signup: async (data: SignupInput) => { 
+    const response = await axiosInstance.post(`/signup`, data)
+    if (response.data.token) {
+      localStorage.setItem("token", JSON.stringify(response.data.token));
+    }
+
+    return response.data;
+  },
+  getPlans: async () => { 
+    const token = JSON.parse(localStorage.getItem('token')||'');
+    const headers = { Authorization: 'Bearer ' + token };
+    const response = await axiosInstance.get(`/plans`, { headers })
+
+    return response.data;
+  },
+  purchase: async (data: PaymentInput) => {
+    const token = JSON.parse(localStorage.getItem('token')||'');
+    const headers = { Authorization: 'Bearer ' + token };
+    const response = await axiosInstance.post(`/purchase`, data, { headers })
+
+    return response.data;
+  }
+}
+
+export default Api;

client/src/components/Payment/PaypalButtons.tsx

@@ -0,0 +1,54 @@
+import { PayPalButtons as Buttons } from "@paypal/react-paypal-js";
+import { PaymentInput} from './index'
+
+import {
+  CreateOrderActions,
+  OnApproveData,
+  OnApproveActions,
+} from "@paypal/paypal-js/types/components/buttons";
+
+interface PaypalButtonsProps {
+  onConfirm: (data: PaymentInput) => any;
+  value: string;
+}
+
+export const PaypalButtons: React.FC<PaypalButtonsProps> = ({
+  value,
+  onConfirm,
+}) => {
+  const onCreate = (data: any, actions: CreateOrderActions) => {
+    return actions.order.create({
+      purchase_units: [
+        {
+          amount: {
+            value,
+          }
+        }
+      ]
+    });
+  };
+
+  const onApprove = (
+    data: OnApproveData,
+    actions: any /*OnApproveActions*/
+  ) => {
+    return actions.order.get().then(function () {
+      const button = document && document.querySelector("#confirm-button");
+      if (!button) return;
+
+      // TODO no time :(
+      button.addEventListener("click", function () {
+        return actions.order.capture().then(onConfirm);
+      });
+    });
+  };
+
+  return (
+    <Buttons
+      disabled={!value}
+      style={{ layout: "vertical" }}
+      createOrder={onCreate}
+      onApprove={onApprove}
+    />
+  );
+};

client/src/components/input/StripePaymentInput.tsx → client/src/components/Payment/StripePaymentInput.tsx

@@ -1,6 +1,16 @@
+import React from "react";
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { PaymentInput } from "./index";
 
-export const StripePaymentInput = () => {
+interface StripePaymentProps {
+  onConfirm: (data: PaymentInput) => any;
+  value: string;
+}
+
+export const StripePaymentInput: React.FC<StripePaymentProps> = ({
+  value,
+  onConfirm,
+}) => {
   const stripe = useStripe();
   const elements = useElements();
 
@@ -10,15 +20,19 @@ export const StripePaymentInput = () => {
     }
 
     const cardElement = elements.getElement(CardElement);
-
     if (cardElement === null) return;
 
-    const { error, paymentMethod } = await stripe.createPaymentMethod({
+    const { paymentMethod } = await stripe.createPaymentMethod({
       type: "card",
       card: cardElement,
     });
 
-    // Handle payment with the returned payment method id.
+    const result = await onConfirm({
+      value,
+      token: (paymentMethod && paymentMethod.id) || "",
+      type: "stripe",
+    });
+    console.log("result", result);
   };
 
   return (
@@ -39,7 +53,9 @@ export const StripePaymentInput = () => {
           },
         }}
       />
-      <button onClick={handleClick}>Pay</button>
+      <button disabled={!value} onClick={handleClick}>
+        Pay
+      </button>
     </div>
   );
 };

client/src/components/Payment/index.tsx

@@ -0,0 +1,59 @@
+import { useForm } from "react-hook-form";
+import { useState, useEffect } from "react";
+
+import { PaypalProvider } from "../../providers/PaypalProvider";
+import { StripeProvider } from "../../providers/StripeProvider";
+
+import { PaypalButtons } from "./PaypalButtons";
+import { StripePaymentInput } from "./StripePaymentInput";
+
+import Api from "../../common/Api";
+
+export interface PaymentInput {
+  value: string;
+  token: string;
+  type: string;
+}
+
+export const PaymentForm: React.FC = () => {
+  const { register, watch } = useForm();
+  const [plans, setPlans] = useState([]);
+  const selectedPlan = watch("plan");
+
+  useEffect(() => {
+    Api.getPlans().then((plans) => {
+      setPlans(plans);
+    });
+  }, []);
+
+  const renderPlans = () => {
+    return (
+      <select {...register("plan")}>
+        {plans.map((plan: any) => {
+          return (
+            <option key={plan.id} value={plan.paymentOptions[0].amount}>
+              {plan.name} - {plan.paymentOptions[0].amount} 
+            </option>
+          );
+        })}
+      </select>
+    );
+  };
+
+  return (
+    <div>
+      <div>
+        <h1>Select a plan</h1>
+        {renderPlans()}
+      </div>
+      <PaypalProvider>
+        <h1>Pay via Paypal</h1>
+        <PaypalButtons onConfirm={Api.purchase} value={selectedPlan} />
+      </PaypalProvider>
+      <StripeProvider>
+         <h1>Pay via Stripe</h1>
+        <StripePaymentInput onConfirm={Api.purchase} value={selectedPlan} />
+      </StripeProvider>
+    </div>
+  );
+};