Initial snapshot - OpenTelemetry demo 2.1.3 -f

1 files changed, 61 insertions, 0 deletions

diff --git a/src/frontend/components/CheckoutItem/CheckoutItem.tsx b/src/frontend/components/CheckoutItem/CheckoutItem.tsx
new file mode 100644
index 0000000..8fd0ecf
--- /dev/null
+++ b/src/frontend/components/CheckoutItem/CheckoutItem.tsx
@@ -0,0 +1,61 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Image from 'next/image';
+import { useState } from 'react';
+import { CypressFields } from '../../utils/enums/CypressFields';
+import { Address } from '../../protos/demo';
+import { IProductCheckoutItem } from '../../types/Cart';
+import ProductPrice from '../ProductPrice';
+import * as S from './CheckoutItem.styled';
+
+interface IProps {
+  checkoutItem: IProductCheckoutItem;
+  address: Address;
+}
+
+const CheckoutItem = ({
+  checkoutItem: {
+    item: {
+      quantity,
+      product: { picture, name },
+    },
+    cost = { currencyCode: 'USD', units: 0, nanos: 0 },
+  },
+  address: { streetAddress = '', city = '', state = '', zipCode = '', country = '' },
+}: IProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <S.CheckoutItem data-cy={CypressFields.CheckoutItem}>
+      <S.ItemDetails>
+        <S.ItemImage src={"/images/products/" + picture} alt={name}/>
+        <S.Details>
+          <S.ItemName>{name}</S.ItemName>
+          <p>Quantity: {quantity}</p>
+          <p>
+            Total: <ProductPrice price={cost} />
+          </p>
+        </S.Details>
+      </S.ItemDetails>
+      <S.ShippingData>
+        <S.ItemName>Shipping Data</S.ItemName>
+        <p>Street: {streetAddress}</p>
+        {!isCollapsed && <S.SeeMore onClick={() => setIsCollapsed(true)}>See More</S.SeeMore>}
+        {isCollapsed && (
+          <>
+            <p>City: {city}</p>
+            <p>State: {state}</p>
+            <p>Zip Code: {zipCode}</p>
+            <p>Country: {country}</p>
+          </>
+        )}
+      </S.ShippingData>
+      <S.Status>
+        <Image src="/icons/Check.svg" alt="check" height="14" width="16" /> <span>Done</span>
+      </S.Status>
+    </S.CheckoutItem>
+  );
+};
+
+export default CheckoutItem;