From cdea24f10e31dde5ecab29428315e6b1b4950804 Mon Sep 17 00:00:00 2001
From: Rifqy Zacky Ariadhy <rifqyzackya@gmail.com>
Date: Tue, 29 Jan 2019 19:37:48 +0700
Subject: [PATCH] update: responsive layout modal voucher

---
 src/common/pages/Vouchers/Modal/index.js   | 331 ++++++++++++++-------
 src/common/pages/Vouchers/Modal/style.scss |  19 +-
 2 files changed, 236 insertions(+), 114 deletions(-)

diff --git a/src/common/pages/Vouchers/Modal/index.js b/src/common/pages/Vouchers/Modal/index.js
index 36d4d56..030a163 100644
--- a/src/common/pages/Vouchers/Modal/index.js
+++ b/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,122 +51,228 @@ export default class ModalVouchersComponent extends React.Component {
     const additional_data = get(data, 'additional_data', {}) || {};
 
     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: `linear-gradient(${data.background_color_1}, ${data.background_color_2})` || '#aaa',
-          // background: data.background_color || '#aaa',
-          flex: 0.3
-        }}>
-          <img className={'imageModal'} src={image} />
-          <p className={'titleModal'}>{data.name}</p>
-        </div>
-        <div style={{
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 0.7,
-          padding: 30
-        }}>
-          <p className={'descriptionModal'} >{ReactHtmlParser(data.description)}</p>
-
-          {(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'})
+      <div>
+        <MediaQuery query="(min-device-width: 800px)">
+          <Modal
+            title={title}
+            visible={isVisible}
+            onOk={onOk}
+            onCancel={onCancel}
+            footer={null}
+            bodyStyle={{
+              padding: 0,
+              margin: 0,
+              display: 'flex',
+              flexDirection: 'row',
+            }}
+            style={{
+              minWidth: '50vw'
             }}
           >
-            {(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 style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              background: `linear-gradient(${data.background_color_1}, ${data.background_color_2})` || '#aaa',
+              // background: data.background_color || '#aaa',
+              flex: 0.3
+            }}>
+              <img className={'imageModal'} src={image} />
+              <p className={'titleModal'}>{data.name}</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 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>
-          </div>
-        </div>
-      </Modal>
+          </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>
     )
   }
 }
diff --git a/src/common/pages/Vouchers/Modal/style.scss b/src/common/pages/Vouchers/Modal/style.scss
index 9a1374e..178460c 100644
--- a/src/common/pages/Vouchers/Modal/style.scss
+++ b/src/common/pages/Vouchers/Modal/style.scss
@@ -1,5 +1,13 @@
-.imageModal{
-  width: 120px;
+@media(min-width: 800px){
+  .imageModal{
+    width: 120px;
+  }
+}
+
+@media(max-width: 800px){
+  .imageModal{
+    display: none;
+  }
 }
 
 .titleModal{
@@ -10,7 +18,14 @@
 }
 
 .descriptionModal{
+  max-height: 25vh;
+  overflow-y: auto;
+  //z-index: 99;
+}
 
+.additionalInformationModal{
+  //z-index: 100;
+  //background-color: #fff;
 }
 
 .informationAlertModal{