diff options
| author | Saumit <justsaumit@protonmail.com> | 2025-09-27 02:14:26 +0530 |
|---|---|---|
| committer | Saumit <justsaumit@protonmail.com> | 2025-09-27 02:14:26 +0530 |
| commit | 82e03978b89938219958032efb1448cc76baa181 (patch) | |
| tree | 626f3e54d52ecd49be0ed3bee30abacc0453d081 /src/frontend/pages/cart | |
Initial snapshot - OpenTelemetry demo 2.1.3 -f
Diffstat (limited to 'src/frontend/pages/cart')
| -rw-r--r-- | src/frontend/pages/cart/checkout/[orderId]/index.tsx | 61 | ||||
| -rw-r--r-- | src/frontend/pages/cart/index.tsx | 39 |
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'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; |