3 files changed, 155 insertions, 0 deletions
diff --git a/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts b/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts
new file mode 100644
index 0000000..013250e
--- /dev/null
+++ b/src/frontend/components/CheckoutItem/CheckoutItem.styled.ts
@@ -0,0 +1,90 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+import Image from 'next/image';
+import styled from 'styled-components';
+
+export const CheckoutItem = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  padding: 25px;
+  border-radius: 5px;
+  border: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    grid-template-columns: 40% 40% 1fr;
+  }
+`;
+
+export const ItemDetails = styled.div`
+  display: flex;
+  gap: 25px;
+  padding-bottom: 25px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    padding-bottom: 0;
+    padding-right: 25px;
+    border-bottom: none;
+    border-right: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+  }
+`;
+
+export const Details = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  span,
+  p {
+    margin: 0;
+    font-weight: ${({ theme }) => theme.fonts.regular};
+  }
+`;
+
+export const ItemName = styled.h5`
+  margin: 0;
+  font-size: ${({ theme }) => theme.sizes.mLarge};
+`;
+
+export const ShippingData = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 25px 0;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+
+  p {
+    margin: 0;
+    font-weight: ${({ theme }) => theme.fonts.light};
+  }
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    padding: 0 25px;
+    border-bottom: none;
+    border-right: 1px solid ${({ theme }) => theme.colors.lightBorderGray};
+  }
+`;
+
+export const Status = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 25px;
+  gap: 10px;
+
+  ${({ theme }) => theme.breakpoints.desktop} {
+    padding-top: 0;
+  }
+`;
+
+export const ItemImage = styled(Image).attrs({
+  width: '80',
+  height: '80',
+})`
+  border-radius: 5px;
+`;
+
+export const SeeMore = styled.a`
+  color: ${({ theme }) => theme.colors.otelBlue};
+`;
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;
diff --git a/src/frontend/components/CheckoutItem/index.ts b/src/frontend/components/CheckoutItem/index.ts
new file mode 100644
index 0000000..f4c6b78
--- /dev/null
+++ b/src/frontend/components/CheckoutItem/index.ts
@@ -0,0 +1,4 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+export { default } from './CheckoutItem';