init

app/components/price-list-item/price-list-item.scss

@@ -0,0 +1,23 @@
+@import '~open-color/open-color.scss';
+
+.pli {
+  padding: 20px;
+  border-radius: 4px;
+  background: $oc-gray-3;
+  border-color: $oc-gray-5;
+  display: flex;
+  flex-direction: row;
+  width: 300px;
+  word-break: break-word;
+
+  & + & {
+    margin-top: 20px;
+  }
+
+  &__img {
+    max-width: 100px;
+    max-height: 50px;
+    padding-right: 20px;
+    cursor: pointer;
+  }
+}

app/components/price-list-item/price-list-item.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import './price-list-item.scss';
+
+interface IProps {
+  data: any;
+}
+
+interface IState {
+  price?: String;
+}
+
+export class PriceListItem extends React.Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {}
+
+  render() {
+    const { data } = this.props;
+    return (
+      <div className="pli">
+        <div style={{ width: '100px' }}>
+          <img src={data.icon} className="pli__img" />
+        </div>
+        <div style={{ flex: 1 }}>
+          <div style={{ marginBottom: '10px' }}>
+            <b>{data.typeLine}</b>
+          </div>
+          <div>{data.priceInfo ? `${data.priceInfo.min_price} ${data.priceInfo.currency_rec}` : ''}</div>
+        </div>
+      </div>
+    );
+  }
+}