update: responsive layout modal voucher

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

@@ -8,6 +8,7 @@ import {LINKS} from "../../../routes";
 import NumberFormat from 'react-number-format';
 import get from 'lodash.get';
 import ReactHtmlParser from "react-html-parser";
+import MediaQuery from 'react-responsive';
 
 const Option = Select.Option;
 
@@ -50,6 +51,8 @@ export default class ModalVouchersComponent extends React.Component {
     const additional_data = get(data, 'additional_data', {}) || {};
 
     return (
+      <div>
+        <MediaQuery query="(min-device-width: 800px)">
           <Modal
             title={title}
             visible={isVisible}
@@ -84,8 +87,7 @@ export default class ModalVouchersComponent extends React.Component {
               flex: 0.7,
               padding: 30
             }}>
-          <p className={'descriptionModal'} >{ReactHtmlParser(data.description)}</p>
-
+              <div className={'descriptionModal'} >{ReactHtmlParser(data.description)}</div>
               {(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
                 <div className={'informationContainerModal'}>
                   <p className={'informationTitleModal'}>Information</p>
@@ -166,6 +168,111 @@ export default class ModalVouchersComponent extends React.Component {
               </div>
             </div>
           </Modal>
+        </MediaQuery>
+        <MediaQuery query="(max-device-width: 800px)">
+          <Modal
+            title={title}
+            visible={isVisible}
+            onOk={onOk}
+            onCancel={onCancel}
+            footer={null}
+            bodyStyle={{
+              padding: 0,
+              margin: 0,
+            }}
+            style={{
+              minWidth: '50vw'
+            }}
+          >
+            <div style={{
+              display: 'flex',
+              flexDirection: 'column',
+              // flex: 0.7,
+              padding: 30
+            }}>
+              <div className={'descriptionModal'} >{ReactHtmlParser(data.description)}</div>
+              {(additional_data.information != null) && <Alert className={'informationAlertModal'} message={
+                <div className={'informationContainerModal'}>
+                  <p className={'informationTitleModal'}>Information</p>
+                  <p className={'informationBodyModal'}>{additional_data.information}</p>
+                </div>
+              } type="success" />}
+
+              <Select
+                showSearch
+                // labelInValue
+                className={'optionSelectModal'}
+                placeholder="Please Select your Option"
+                optionFilterProp="children"
+                onChange={(value) => {
+                  this.setState({selectedOption: value});
+                  this.setState({hidden: 'none'});
+                  // console.log('onChange',value);
+                  const points = item.selectedData.sku.filter(item => item.id == value);
+                  this.setState({
+                    skuName :points[0].name,
+                    skuPrice : points[0].price,
+                    buttonDisbaled:false
+                  })
+                }
+                }
+                onDropdownVisibleChange={(value) => {
+                  this.setState({hidden: 'inline'})
+                }}
+              >
+                {(item.selectedData.sku || []).map((item, index) => {
+                  // const {vouchers:[{count}]} = item;
+
+                  let count = 1;
+
+                  if (data.source === 'internal') {
+                    count = get(item, 'vouchers[0].count', 0) || 0;
+                  }
+                  console.log(count);
+                  const outOfStock = !(+count > 0);
+
+                  return (
+                    <Option disabled={outOfStock} value={item.id}>
+                      <div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
+                        <span>{item.name} {outOfStock ? " - Out of Stock" : ""}</span>
+                        <span style={{color:'#FF6F00', display:this.state.hidden}}>
+                        Rp. <NumberFormat value={(+item.price).toFixed(0)} displayType={'text'} thousandSeparator={true}/>
+                      </span>
+                      </div>
+                    </Option>
+                  )
+                })}
+              </Select>
+
+              <div className={'costContainerModal'}>
+                <div className={'costLeftPaneModal'}>
+                  <p className={'costTitleModal'}>Points</p>
+                  <p className={'costValueModal'}><NumberFormat value={(+this.state.skuPrice).toFixed(0)} displayType={'text'} thousandSeparator={true}/> </p>
+                </div>
+                <div className={'costRightPaneModal'}>
+                  <Route render={({ history}) => (
+                    <Button
+                      onClick={() => {
+                        this.vouchersStore.dataItems = data;
+                        this.vouchersStore.skuId = this.state.selectedOption;
+                        this.vouchersStore.skuName = this.state.skuName;
+                        this.vouchersStore.skuPrice = this.state.skuPrice;
+                        console.log('enak',this.state);
+                        history.push(LINKS.VOUCHER_STEPPER);
+                      }}
+                      type="primary"
+                      disabled={this.state.buttonDisbaled}
+                      size={"large"}
+                      block>
+                      Buy
+                    </Button>
+                  )} />
+                </div>
+              </div>
+            </div>
+          </Modal>
+        </MediaQuery>
+      </div>
     )
   }
 }

src/common/pages/Vouchers/Modal/style.scss

@@ -1,6 +1,14 @@
+@media(min-width: 800px){
   .imageModal{
     width: 120px;
   }
+}
+
+@media(max-width: 800px){
+  .imageModal{
+    display: none;
+  }
+}
 
 .titleModal{
   text-align: center;
@@ -10,7 +18,14 @@
 }
 
 .descriptionModal{
+  max-height: 25vh;
+  overflow-y: auto;
+  //z-index: 99;
+}
 
+.additionalInformationModal{
+  //z-index: 100;
+  //background-color: #fff;
 }
 
 .informationAlertModal{