22. Back to the Client | 13. Showing a Stripe Payment Form

Author: webmakaka

22_Back_to_the_Client.md

@@ -64,6 +64,25 @@ If chome will block page for security reasons, type: **thisisunsafe**
 
 <br/>
 
+### 10. Programmatic Navigation to Wildcard Routess
+
+<br/>
+
+### 11. The Expiration Timer
+
+<br/>
+
+### 12. Displaying the Expiration
+
+<br/>
+
+### 13. Showing a Stripe Payment Form
+
+    $ cd client
+    $ npm install react-stripe-checkout
+
+<br/>
+
 ---
 
 <br/>

22_Back_to_the_Client/app/client/package-lock.json

@@ -15,6 +15,7 @@
     "bootstrap": "^4.4.1",
     "next": "^9.3.6",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-stripe-checkout": "^2.6.3"
   }
 }

22_Back_to_the_Client/app/client/package.json

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+const OrderShow = ({ order }) => {
+  const [timeLeft, setTimeLeft] = useState(0);
+
+  useEffect(() => {
+    const findTimeLeft = () => {
+      const msLeft = new Date(order.expiresAt) - new Date();
+      setTimeLeft(Math.round(msLeft / 1000));
+    };
+
+    findTimeLeft();
+    const timerId = setInterval(findTimeLeft, 1000);
+    return () => {
+      clearInterval(timerId);
+    };
+  }, [order]);
+
+  if (timeLeft < 0) {
+    return <div>Order Expired</div>;
+  }
+
+  return <div>TIme left to pay: {timeLeft} seconds</div>;
+};
+
+OrderShow.getInitialProps = async (context, client) => {
+  const { orderId } = context.query;
+  const { data } = await client.get(`/api/orders/${orderId}`);
+
+  return { order: data };
+};
+
+export default OrderShow;

22_Back_to_the_Client/app/client/pages/orders/[orderId].js

@@ -1,3 +1,4 @@
+import Router from 'next/router';
 import useRequest from '../../hooks/use-request';
 
 const TicketShow = ({ ticket }) => {
@@ -7,7 +8,8 @@ const TicketShow = ({ ticket }) => {
     body: {
       ticketId: ticket.id,
     },
-    onSuccess: (order) => console.log(order),
+    onSuccess: (order) =>
+      Router.push('/orders/[orderId]', `/orders/${order.id}`),
   });
 
   return (