include best and worst scoring items tiles

Extension/src/components/CheckoutDialog/CheckoutDialog.tsx

@@ -5,6 +5,7 @@ import { getCartAverageRating, getCart } from "../../stores/storesCommon"
 import CheckoutCart from "./CheckoutCart/CheckoutCart"
 import { productItem } from "../../utils/types"
 import ItemDialogContent from "../ItemDialog/ItemDialogContent/ItemDialogContent"
+import CheckoutDialogContent from "./CheckoutDialogContent/CheckoutDialogContent"
 
 interface CheckoutDialogProps {
  closeCheckoutDialog: () => void;
@@ -66,6 +67,8 @@ class CheckoutDialog extends Component<CheckoutDialogProps, CheckoutDialogState>
  selectItem={(item) => {this.setState({openComparison: true, currentComparisonItem: item})}}
  />}
  >
+ <CheckoutDialogContent
+ cart={this.state.cart}/>
  </Tearsheet>
  <TearsheetNarrow
  open={this.state.openComparison}

Extension/src/components/CheckoutDialog/CheckoutDialogContent/CheckoutDialogContent.scss

@@ -0,0 +1,22 @@
+.bx--tile {
+ background-color: white;
+ margin: 24px;
+}
+
+.take2--checkout-dialog-content-tile-header-wrapper {
+ display: inline-flex;
+ padding-bottom: 8px;
+}
+
+.take2--checkout-dialog-content-tile-header {
+ font-size: 1.25rem;
+ padding-left: 16px;
+}
+
+.take2--checkout-dialog-content-tile-score-wrapper {
+ display: flex;
+}
+
+.take2--checkout-dialog-content-tile-score {
+ padding-left: 24px;
+}

Extension/src/components/CheckoutDialog/CheckoutDialogContent/CheckoutDialogContent.tsx

@@ -0,0 +1,73 @@
+import React, { Component } from 'react'
+import "./CheckoutDialogContent.scss"
+import { Tile } from "carbon-components-react"
+import { productItem } from "../../../utils/types"
+import { Badge32, WarningAlt32 } from "@carbon/icons-react"
+
+interface CheckoutDialogContentProps {
+ cart: productItem[],
+}
+
+interface CheckoutDialogContentState {
+}
+
+
+class CheckoutDialogContent extends Component<CheckoutDialogContentProps, CheckoutDialogContentState> {
+
+ getBestItem = (cart) => {
+ let bestItem: productItem = cart.length > 0 ? cart[0] : {score: 0, name:""};
+ for(let item of cart){
+ if(item.score > bestItem.score){
+ bestItem = item;
+ }
+ }
+ return bestItem;
+ }
+
+ getWorstItem = (cart) => {
+ let worstItem: productItem = cart.length > 0 ? cart[0] : {score: 0, name:""};
+ for(let item of cart){
+ if(item.score < worstItem.score){
+ worstItem = item;
+ }
+ }
+ return worstItem;
+ }
+
+ render() {
+ return (
+ <>
+ <Tile>
+ <div className={"take2--checkout-dialog-content-tile-header-wrapper"}>
+ <Badge32 />
+ <div className={"take2--checkout-dialog-content-tile-header"}>
+ {"Best scoring item"}
+ </div>
+ </div>
+ <div className={"take2--checkout-dialog-content-tile-score-wrapper "}>
+ <div>{this.getBestItem(this.props.cart).name}</div>
+ <div className={"take2--checkout-dialog-content-tile-score"}>
+ {this.getBestItem(this.props.cart).score}
+ </div>
+ </div>
+ </Tile>
+ <Tile>
+ <div className={"take2--checkout-dialog-content-tile-header-wrapper"}>
+ <WarningAlt32 />
+ <div className={"take2--checkout-dialog-content-tile-header"}>
+ {"Lowest scoring item"}
+ </div>
+ </div>
+ <div className={"take2--checkout-dialog-content-tile-score-wrapper "}>
+ <div>{this.getWorstItem(this.props.cart).name}</div>
+ <div className={"take2--checkout-dialog-content-tile-score"}>
+ {this.getWorstItem(this.props.cart).score}
+ </div>
+ </div>
+ </Tile>
+ </>
+ )
+ }
+}
+
+export default CheckoutDialogContent