update: voucher page

src/common/pages/Vouchers/Modal/index.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {Link} from 'react-router';
+import { Modal, Button, Alert, Select } from 'antd';
+import './style.scss';
+
+const Option = Select.Option;
+@inject('appstate')
+@observer
+export default class ModalVouchersComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      selectedOption: '0 Points'
+    };
+    this.defaultState = Object.assign({}, this.state);
+  }
+
+  componentDidMount() {}
+
+  render() {
+    const {data, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Modal'} = this.props;
+
+    return (
+      <Modal
+        title={title}
+        visible={isVisible}
+        onOk={onOk}
+        onCancel={onCancel}
+        footer={null}
+        bodyStyle={{
+          padding: 0,
+          margin: 0,
+          display: 'flex',
+          flexDirection: 'row',
+        }}
+        style={{
+          minWidth: '50vw'
+        }}
+      >
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          background: data.background_color || '#aaa',
+          // height: 500,
+          flex: 0.3
+        }}>
+          <img className={'imageModal'} src={data.image} />
+          <p className={'titleModal'}>{data.name}</p>
+        </div>
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 0.7,
+          padding: 30
+        }}>
+          <p className={'descriptionModal'} >{data.description}</p>
+
+          {(data.additional_information.length > 0) && <Alert className={'informationAlertModal'} message={
+            <div className={'informationContainerModal'}>
+              <p className={'informationTitleModal'}>Information</p>
+              <p className={'informationBodyModal'}>{data.additional_information}</p>
+            </div>
+          } type="success" />}
+
+          <Select
+            showSearch
+            className={'optionSelectModal'}
+            placeholder="Please Select your Option"
+            optionFilterProp="children"
+            onChange={(e) => this.setState({selectedOption: e})}
+            // filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+          >
+            {data.option.map((item, index) => {
+              return <Option value={item.cost}>{item.value}</Option>
+            })}
+          </Select>
+
+          <div className={'costContainerModal'}>
+            <div className={'costLeftPaneModal'}>
+              <p className={'costTitleModal'}>Cost</p>
+              <p className={'costValueModal'}>{this.state.selectedOption}</p>
+            </div>
+            <div className={'costRightPaneModal'}>
+              <Button className={'costButtonModal'} size={"large"} block>Buy</Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}