2 files changed, 100 insertions, 0 deletions
diff --git a/src/frontend/pages/cart/checkout/[orderId]/index.tsx b/src/frontend/pages/cart/checkout/[orderId]/index.tsx
new file mode 100644
index 0000000..740b895
--- /dev/null
+++ b/src/frontend/pages/cart/checkout/[orderId]/index.tsx
@@ -0,0 +1,61 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { NextPage } from 'next';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import Ad from '../../../../components/Ad';
+import Button from '../../../../components/Button';
+import CheckoutItem from '../../../../components/CheckoutItem';
+import Footer from '../../../../components/Footer';
+import Layout from '../../../../components/Layout';
+import Recommendations from '../../../../components/Recommendations';
+import AdProvider from '../../../../providers/Ad.provider';
+import * as S from '../../../../styles/Checkout.styled';
+import { IProductCheckout } from '../../../../types/Cart';
+
+const Checkout: NextPage = () => {
+  const { query } = useRouter();
+  const { items = [], shippingAddress } = JSON.parse((query.order || '{}') as string) as IProductCheckout;
+
+  return (
+    <AdProvider
+      productIds={items.map(({ item }) => item?.productId || '')}
+      contextKeys={[...new Set(items.flatMap(({ item }) => item.product.categories))]}
+    >
+      <Head>
+        <title>Otel Demo - Checkout</title>
+      </Head>
+      <Layout>
+        <S.Checkout>
+          <S.Container>
+            <S.Title>Your order is complete!</S.Title>
+            <S.Subtitle>We&apos;ve sent you a confirmation email.</S.Subtitle>
+
+            <S.ItemList>
+              {items.map(checkoutItem => (
+                <CheckoutItem
+                  key={checkoutItem.item.productId}
+                  checkoutItem={checkoutItem}
+                  address={shippingAddress}
+                />
+              ))}
+            </S.ItemList>
+
+            <S.ButtonContainer>
+              <Link href="/">
+                <Button type="submit">Continue Shopping</Button>
+              </Link>
+            </S.ButtonContainer>
+          </S.Container>
+          <Recommendations />
+        </S.Checkout>
+        <Ad />
+        <Footer />
+      </Layout>
+    </AdProvider>
+  );
+};
+
+export default Checkout;
diff --git a/src/frontend/pages/cart/index.tsx b/src/frontend/pages/cart/index.tsx
new file mode 100644
index 0000000..efb01c9
--- /dev/null
+++ b/src/frontend/pages/cart/index.tsx
@@ -0,0 +1,39 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { NextPage } from 'next';
+import Head from 'next/head';
+import Footer from '../../components/Footer';
+import Layout from '../../components/Layout';
+import Recommendations from '../../components/Recommendations';
+import * as S from '../../styles/Cart.styled';
+import CartDetail from '../../components/Cart/CartDetail';
+import EmptyCart from '../../components/Cart/EmptyCart';
+import { useCart } from '../../providers/Cart.provider';
+import AdProvider from '../../providers/Ad.provider';
+
+const Cart: NextPage = () => {
+  const {
+    cart: { items },
+  } = useCart();
+
+  return (
+    <AdProvider
+      productIds={items.map(({ productId }) => productId)}
+      contextKeys={[...new Set(items.flatMap(({ product }) => product.categories))]}
+    >
+      <Head>
+        <title>Otel Demo - Cart</title>
+      </Head>
+      <Layout>
+        <S.Cart>
+          {(!!items.length && <CartDetail />) || <EmptyCart />}
+          <Recommendations />
+        </S.Cart>
+        <Footer />
+      </Layout>
+    </AdProvider>
+  );
+};
+
+export default Cart;