Initial snapshot - OpenTelemetry demo 2.1.3 -f

2 files changed, 104 insertions, 0 deletions

diff --git a/src/frontend/components/Cart/CartDetail.tsx b/src/frontend/components/Cart/CartDetail.tsx
new file mode 100644
index 0000000..4d777e4
--- /dev/null
+++ b/src/frontend/components/Cart/CartDetail.tsx
@@ -0,0 +1,81 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import { useRouter } from 'next/router';
+import { useCallback } from 'react';
+import CartItems from '../CartItems';
+import CheckoutForm from '../CheckoutForm';
+import { IFormData } from '../CheckoutForm/CheckoutForm';
+import SessionGateway from '../../gateways/Session.gateway';
+import { useCart } from '../../providers/Cart.provider';
+import { useCurrency } from '../../providers/Currency.provider';
+import * as S from '../../styles/Cart.styled';
+
+const { userId } = SessionGateway.getSession();
+
+const CartDetail = () => {
+  const {
+    cart: { items },
+    emptyCart,
+    placeOrder,
+  } = useCart();
+  const { selectedCurrency } = useCurrency();
+  const { push } = useRouter();
+
+  const onPlaceOrder = useCallback(
+    async ({
+      email,
+      state,
+      streetAddress,
+      country,
+      city,
+      zipCode,
+      creditCardCvv,
+      creditCardExpirationMonth,
+      creditCardExpirationYear,
+      creditCardNumber,
+    }: IFormData) => {
+      const order = await placeOrder({
+        userId,
+        email,
+        address: {
+          streetAddress,
+          state,
+          country,
+          city,
+          zipCode,
+        },
+        userCurrency: selectedCurrency,
+        creditCard: {
+          creditCardCvv,
+          creditCardExpirationMonth,
+          creditCardExpirationYear,
+          creditCardNumber,
+        },
+      });
+
+      push({
+        pathname: `/cart/checkout/${order.orderId}`,
+        query: { order: JSON.stringify(order) },
+      });
+    },
+    [placeOrder, push, selectedCurrency]
+  );
+
+  return (
+    <S.Container>
+      <div>
+        <S.Header>
+          <S.CarTitle>Shopping Cart</S.CarTitle>
+          <S.EmptyCartButton onClick={emptyCart} $type="link">
+            Empty Cart
+          </S.EmptyCartButton>
+        </S.Header>
+        <CartItems productList={items} />
+      </div>
+      <CheckoutForm onSubmit={onPlaceOrder} />
+    </S.Container>
+  );
+};
+
+export default CartDetail;
diff --git a/src/frontend/components/Cart/EmptyCart.tsx b/src/frontend/components/Cart/EmptyCart.tsx
new file mode 100644
index 0000000..70f403f
--- /dev/null
+++ b/src/frontend/components/Cart/EmptyCart.tsx
@@ -0,0 +1,23 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Link from 'next/link';
+import Button from '../Button';
+import * as S from '../../styles/Cart.styled';
+
+const EmptyCart = () => {
+  return (
+    <S.EmptyCartContainer>
+      <S.Title>Your shopping cart is empty!</S.Title>
+      <S.Subtitle>Items you add to your shopping cart will appear here.</S.Subtitle>
+
+      <S.ButtonContainer>
+        <Link href="/">
+          <Button type="submit">Continue Shopping</Button>
+        </Link>
+      </S.ButtonContainer>
+    </S.EmptyCartContainer>
+  );
+};
+
+export default EmptyCart;