Produto & Checkout - Caregando dados do produto

- see notes at #4

src/pages/index.tsx

@@ -13,7 +13,7 @@ interface Product {
   id: string;
   name: string;
   imageUrl: string;
-  price: number;
+  price: string;
 }
 
 interface HomeProps {

src/pages/product/[id].tsx

@@ -1,24 +1,63 @@
+import { stripe } from "@/src/lib/stripe";
 import { ImageContainer, ProductContainer, ProductDetails } from "@/src/styles/pages/product"
-import { useRouter } from "next/router"
+import { GetStaticProps } from "next";
+import Image from "next/image";
+import Stripe from "stripe";
 
-export default function Product() {
-  const { query } = useRouter()
+interface ProductProps {
+  product: {
+    id: string;
+    name: string;
+    imageUrl: string;
+    price: string;
+    description: string;
+  }
+}
 
+export default function Product({ product }: ProductProps) {
   return (
     <ProductContainer>
 
-      <ImageContainer></ImageContainer>
+      <ImageContainer>
+        <Image src={product.imageUrl} width={520} height={480} alt="" />
+      </ImageContainer>
 
       <ProductDetails>
-        <h1>Camiseta X</h1>
-        <span>R$ 79,90</span>
+        <h1>{product.name}</h1>
+        <span>{product.price}</span>
 
-        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores aliquid rerum exercitationem facere a molestiae ut sed velit non mollitia? Officiis hic velit assumenda aspernatur nihil, sint sed laboriosam tempora?</p>
+        <p>{product.description}</p>
 
         <button>
           Comprar agora
         </button>
       </ProductDetails>
     </ProductContainer>
   )
-}
+}
+
+export const getStaticProps: GetStaticProps<any, { id: string }> = async ({ params }) => {
+  const productId = params.id;
+
+  const product = await stripe.products.retrieve(productId, {
+    expand: ['default_price'],
+  })
+
+  const price = product.default_price as Stripe.Price;
+
+  return {
+    props: {
+      product: {
+        id: product.id,
+        name: product.name,
+        imageUrl: product.images[0],
+        price: new Intl.NumberFormat('pt-BR', {
+          style: 'currency',
+          currency: 'BRL'
+        }).format(price.unit_amount / 100),
+        description: product.description
+      }
+    },
+    revalidate: 60 * 60 * 1, // 1 hour
+  }
+}