From e8945f7608cebd2de950ba09f9b4bcaff8ead08b Mon Sep 17 00:00:00 2001
From: Rifqy Zacky Ariadhy <rifqyzackya@gmail.com>
Date: Tue, 29 Jan 2019 17:56:39 +0700
Subject: [PATCH] update: responsive layout payment stepper

---
 src/common/pages/Vouchers/Payment/index.js   | 39 +++++++++------
 src/common/pages/Vouchers/Payment/style.scss | 50 ++++++++++++++++++++
 src/common/pages/Vouchers/Stepper/index.js   |  1 +
 3 files changed, 75 insertions(+), 15 deletions(-)
 create mode 100644 src/common/pages/Vouchers/Payment/style.scss

diff --git a/src/common/pages/Vouchers/Payment/index.js b/src/common/pages/Vouchers/Payment/index.js
index ebf93cf..f70e85b 100644
--- a/src/common/pages/Vouchers/Payment/index.js
+++ b/src/common/pages/Vouchers/Payment/index.js
@@ -8,12 +8,13 @@ import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox
 import {startCase} from 'lodash';
 import LoadingDialog from "../../LoadingDialog";
 import Loader from 'react-loader-advanced';
-// import './style.scss';
+import './style.scss';
 import {DIALOG} from "../../../stores/global_ui";
 import EmptyComponent from '../../EmptyComponent';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
 import {LINKS} from "../../../routes";
 import {APP_TYPE} from "../../../config/app";
+import get from "lodash.get";
 
 const Panel = Collapse.Panel;
 
@@ -51,16 +52,23 @@ export default class PaymentVouchers extends React.Component {
       const qty = 1;
       const total = price * qty;
 
-    let applicationName = 'Giift';
-    let applicationLogo = 'http://giift.asacreative.com/giift_logo_wide.4d15de72.png';
-    if(APP_TYPE === 'btn') {
-      applicationName = 'BTN';
-      applicationLogo = 'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png';
+    // let applicationName = 'Giift';
+    // let applicationLogo = 'http://giift.asacreative.com/giift_logo_wide.4d15de72.png';
+    // if(APP_TYPE === 'btn') {
+    //   applicationName = 'BTN';
+    //   applicationLogo = 'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png';
+    // }
+    const logoUrl = (this.props.vouchersStore.dataItems.images.logo) ? get(this.vouchersStore.dataItems, 'images.logo', '') : 'http://lorempixel.com/400/200';
+
+    let image = logoUrl;
+
+    if (!image.includes('http')) {
+      image = this.http.appendImagePath(image);
     }
 
     return(
       <div>
-        <div className="row">
+        <div className="upper-card">
           <Collapse bordered={true}>
             <Panel style={{backgroundColor:'white'}} showArrow={false} header={
               <div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
@@ -94,16 +102,17 @@ export default class PaymentVouchers extends React.Component {
             </Panel>
           </Collapse>
         </div>
-        <div className="row">
-          <Card  title={<div style={{display:'flex',justifyContent:'space-between'}}>
-            <div>
-              <h3 style={{fontSize:20}}>
-                Points {applicationName}
+        <div className="bottom-card">
+          <Card title={<div style={{display:'flex',justifyContent:'space-between', alignItems: 'center'}}>
+            <div className={'item-container'}>
+              <h3 className={'item-name'}>
+                {this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}
+              </h3>
+              <h3 className={'item-points'}>
+                BTN Points Payment
               </h3>
             </div>
-            <div>
-              <img  style={{width:120, height:40}} src={applicationLogo} />
-            </div>
+            <img className={'image-logo'} src={image} />
           </div>}>
             <div className="row">
               <Alert message="Pastikan data anda sudah terverivikasi dan vouchers anda yang pilih sudah benar sebelum melakukan transaksi" type="warning" />
diff --git a/src/common/pages/Vouchers/Payment/style.scss b/src/common/pages/Vouchers/Payment/style.scss
new file mode 100644
index 0000000..a94c708
--- /dev/null
+++ b/src/common/pages/Vouchers/Payment/style.scss
@@ -0,0 +1,50 @@
+.upper-card{
+
+}
+
+.bottom-card{
+
+}
+
+@media(min-width: 1000px){
+  .image-logo{
+    width: 10vw;
+    height: 10vh;
+  }
+
+  .item-container{
+    height: 10vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    .item-name{
+      padding-top: 1vh;
+      margin-bottom: -0.25vh;
+      font-size: 1.35em;
+    }
+
+    .item-points{
+      font-size: 0.95em;
+      color: #aaa;
+    }
+  }
+}
+
+@media(max-width: 999px){
+  .image-logo{
+    width: 25vw;
+    height: 10vh;
+  }
+
+  .item-container{
+    .item-name{
+      font-size: 1.15em;
+      margin-bottom: -0.25vh;
+    }
+
+    .item-points{
+      font-size: 0.75em;
+      color: #aaa;
+    }
+  }
+}
diff --git a/src/common/pages/Vouchers/Stepper/index.js b/src/common/pages/Vouchers/Stepper/index.js
index ca7af00..990bf94 100644
--- a/src/common/pages/Vouchers/Stepper/index.js
+++ b/src/common/pages/Vouchers/Stepper/index.js
@@ -66,6 +66,7 @@ export class VoucherStepper extends React.Component {
         title: 'Anda yakin mau menukarkan voucher?',
         content: 'Sistem akan langsung memotong point anda ketika anda menekan tombol konfirmasi dibawah.',
         onOk: () => {
+          this.globalUI.showDialogLoading();
           this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
             .then(res => {
               const openNotificationWithIcon = (type) => {