update: redeem voucher step

src/common/config/app.js

@@ -29,13 +29,13 @@ imageUrl = "https://giift-api.asacreative.com";
 
 type = 'localhost';
 if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
-  appUrl = 'http://localhost:7700';
-  apiUrl = "http://localhost:4001/"
+  // appUrl = 'http://localhost:7700';
+  // apiUrl = "http://localhost:4001/"
 }else{
   appUrl = 'https://sillyfish.asacreative.com';
 }
 
-export const APP_TYPE = 'giift';
+export const APP_TYPE = 'btn';
 
 export const appConfig = {
   apiUrl: apiUrl,

src/common/pages/App/routes.js

@@ -62,6 +62,7 @@ import DataTab from '../Data';
 import LayoutTab from '../Layout';
 import ContentTab from '../Content';
 import TransactionPage from "../Transaction";
+import VoucherStepperComponent from "../Vouchers/Stepper";
 
 export default class ComponentName extends React.Component {
   constructor(props) {
@@ -87,6 +88,7 @@ export default class ComponentName extends React.Component {
         <Route exact component={CarSearch} path={LINKS.CAR_SEARCH}/>
         <Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
         <Route exact component={VouchersComponent} path={LINKS.VOUCHERS}/>
+        <Route exact component={VoucherStepperComponent} path={LINKS.VOUCHER_STEPPER}/>
         <Route exact component={VerifyVouchers} path={LINKS.VERIFY_VOUCHERS}/>
         <Route exact component={CheckoutVouchers} path={LINKS.CHECKOUT_VOUCHERS}/>
         <Route exact component={PaymentVouchers} path={LINKS.PAYMENT_VOUCHERS}/>

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

@@ -8,6 +8,7 @@ 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 {DIALOG} from "../../../stores/global_ui";
 import EmptyComponent from '../../EmptyComponent';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
@@ -32,105 +33,92 @@ export default class CheckoutVouchers extends React.Component {
   }
 
   componentDidMount() {
-    console.log("skuid",this.vouchersStore.skuId);
-    console.log("skuName",this.vouchersStore.skuName);
-    console.log("skuPrice",this.vouchersStore.skuPrice);
-    console.log("data",this.vouchersStore.dataItems);
+    console.log(this.vouchersStore)
+    // console.log("skuid",this.vouchersStore.skuId);
+    // console.log("skuName",this.vouchersStore.skuName);
+    // console.log("skuPrice",this.vouchersStore.skuPrice);
+    // console.log("data",this.vouchersStore.dataItems);
   }
 
   render() {
 
-    let image = get(this.vouchersStore.dataItems, 'images.logo', '');
+    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 className="wallet containerMiddle">
+      <div className="row">
         <div className="row">
-            <div className="col s0 m3 l3" />
-            <div className="col s12 m6 l6">
-                <div className="row">
-                <FlatButton
-                    className="headerMenu"
-                    hoverColor="#f1f5f9"
-                    style={{ background: '#ffffff00' }}
-                    onClick={() => this.props.history.goBack()}
-                    label="Back"
-                    primary={true}
-                    icon={<NavigationArrowBack />}
-                />
-                <Divider style={{marginBottom:10,marginTop:10}} />
-                    <Card
-                    // title={<div style={{display:'flex',justifyContent:'center'}}>
-                    //             <p style={{fontSize:20}}>
-                    //                 Detail Pembelian
-                    //             </p>
-                    //         </div>}
-                            >
-                        <div className="">
-                            <div style={{display:'flex',justifyContent:'center'}}>
-                                <h3 style={{fontSize:18}}>
-                                    Detail Pembelian
-                                </h3>
-                            </div>
-                        </div>
-                        <Divider style={{marginBottom:10,marginTop:10}} />
-                        <div className="row" style={{marginTop:30}}>
-                            <div className="col s5 m5 l5">
-                                <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
-                                <img className={'imageCard'} src={this.http.appendImagePath(image)} />
-                                    {/* <Avatar size={74} src={this.http.appendImagePath(this.vouchersStore.dataItems.images.logo)} /> */}
-                                </div>
-                            </div>
-                            <div className="col s4 m7 l7">
-                            <div style={{alignItems:'center'}}>
-                                <Row>
-                                    <div className="col s12 m6 6">
-                                        <h3>Jenis Layanan :</h3>
-                                    </div>
-                                    <div className="col s12 m6 6">
-                                        <h3 style={{color:''}}>{this.vouchersStore.dataItems.name} {this.vouchersStore.skuName}</h3>
-                                    </div>
-                                </Row>
-                                <Row>
-                                    <div className="col s12 m6 6">
-                                        <h3>Point :</h3>
-                                    </div>
-                                    <div className="col s12 m6 6">
-                                        <h3 style={{color:'#FF6F00'}}>{(+this.vouchersStore.skuPrice).toFixed(0)} Points</h3>
-                                    </div>
-                                </Row>
-                            </div>
-                            </div>
-                        </div>
-                    </Card>
-                </div>
-                <div className="row">
-                    <Card >
-                        <div className="row">
-                            <div style={{display:'flex',justifyContent:'space-between'}}>
-                                <h3 style={{color:''}}>Point</h3>
-                                <h3 style={{color:'#FF6F00'}}>{this.props.appstate.wallet.data.point} Points</h3>
-                            </div>
-                        </div>
-                        <Divider style={{marginBottom:10,marginTop:10}} />
-                        <div className="row">
-                            <div style={{display:'flex',justifyContent:'space-between'}}>
-                                <h3>Total Pembayaran Point</h3>
-                                <h3 style={{color:'#FF6F00'}}>{(+this.vouchersStore.skuPrice).toFixed(0)} Points</h3>
-                            </div>
-                        </div>
-                        <div className="row">
-                            <Button type="primary" block onClick={() => this.props.history.push(LINKS.PAYMENT_VOUCHERS)}>Lanjut</Button>
-                        </div>
-                    </Card>
-                </div>
+          <Card>
+            <div className="">
+              <div style={{display:'flex',justifyContent:'center'}}>
+                <h3 style={{fontSize:18}}>
+                  Detail Pembelian
+                </h3>
+              </div>
             </div>
-            <div className="col s0 m3 l3" />
+            <Divider style={{marginBottom:10,marginTop:10}} />
+            <div className="row" style={{marginTop:30}}>
+              <div className="col s12 m5 l5">
+                <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
+                  <img className={'imageCard'} src={image} />
+                  {/* <Avatar size={74} src={this.http.appendImagePath(this.props.vouchersStore.dataItems.images.logo)} /> */}
+                </div>
+              </div>
+              <div className="col s12 m7 l7">
+                <div style={{alignItems:'center', justifyContent: 'center'}}>
+                  <Row>
+                    <div className="col s4 m4">
+                      <h3>Jenis Layanan</h3>
+                    </div>
+                    <div className="col s1 m1">
+                      <h3>:</h3>
+                    </div>
+                    <div className="col s7 m7">
+                      <h3 style={{color:'#FF6F00'}}>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</h3>
+                    </div>
+                  </Row>
+                  <Row>
+                    <div className="col s4 m4">
+                      <h3>Point</h3>
+                    </div>
+                    <div className="col s1 m1">
+                      <h3>:</h3>
+                    </div>
+                    <div className="col s7 m7">
+                      <h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
+                    </div>
+                  </Row>
+                </div>
+              </div>
+            </div>
+          </Card>
         </div>
-    </div>
+        <div className="row">
+          <Card >
+            <div className="row">
+              <div style={{display:'flex',justifyContent:'space-between'}}>
+                <h3 style={{color:''}}>Point</h3>
+                <h3 style={{color:'#FF6F00'}}>{this.props.appstate.wallet.data.point || 0} Points</h3>
+              </div>
+            </div>
+            <Divider style={{marginBottom:10,marginTop:10}} />
+            <div className="row">
+              <div style={{display:'flex',justifyContent:'space-between'}}>
+                <h3>Total Pembayaran Point</h3>
+                <h3 style={{color:'#FF6F00'}}>{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points</h3>
+              </div>
+            </div>
+          </Card>
+        </div>
+        <div className="row">
+          {this.props.button()}
+        </div>
+      </div>
     )
   }
 }

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

@@ -0,0 +1,4 @@
+.imageCard{
+  max-width: 20vw;
+  max-height: 20vw;
+}

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import {inject, observer} from 'mobx-react';
+import {
+  FlatButton,
+  Divider
+} from 'material-ui';
+import {Card} from 'antd';
+import {startCase} from 'lodash';
+import './style.scss';
+
+@inject('appstate')
+@observer
+export default class FinishVouchers extends React.Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.state = {
+      value: 1,
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    this.globalUI = props.appstate.globalUI;
+    this.vouchersStore = props.appstate.vouchers;
+  }
+
+  componentDidMount() {
+    console.log(this.vouchersStore)
+    // console.log("skuid",this.vouchersStore.skuId);
+    // console.log("skuName",this.vouchersStore.skuName);
+    // console.log("skuPrice",this.vouchersStore.skuPrice);
+    // console.log("data",this.vouchersStore.dataItems);
+  }
+
+  render() {
+
+    return (
+      <div className="row">
+        <div className="row">
+          <Card>
+            <div className="">
+              <div style={{display:'flex',justifyContent:'center'}}>
+                <h3 style={{fontSize:18}}>
+                  Berhasil menukarkan voucher
+                </h3>
+              </div>
+            </div>
+            <Divider style={{marginBottom:10,marginTop:10}} />
+            <div className="row" style={{marginTop:30}}>
+              <div className="col s12">
+                <div className={'textContainer'}>
+                  <p>Anda akan dialihkan ke page voucher dengan menekan tombol finish dibawah ini. Selamat Berbelanja!</p>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+        <div className="row">
+          {this.props.button()}
+        </div>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,4 @@
+.textContainer{
+  text-align: center;
+  font-size: 1.25em;
+}

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

@@ -152,7 +152,7 @@ export default class ModalVouchersComponent extends React.Component {
                     this.vouchersStore.skuName = this.state.skuName;
                     this.vouchersStore.skuPrice = this.state.skuPrice;
                     console.log('enak',this.state);
-                    history.push(LINKS.VERIFY_VOUCHERS);
+                    history.push(LINKS.VOUCHER_STEPPER);
                   }}
                   type="primary"
                   disabled={this.state.buttonDisbaled}

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

@@ -47,7 +47,7 @@ export default class PaymentVouchers extends React.Component {
         });
       };
 
-      const price = (+this.vouchersStore.skuPrice).toFixed(0);
+      const price = (+this.props.vouchersStore.skuPrice).toFixed(0);
       const qty = 1;
       const total = price * qty;
 
@@ -58,8 +58,72 @@ export default class PaymentVouchers extends React.Component {
       applicationLogo = 'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png';
     }
 
+    return(
+      <div>
+        <div className="row">
+          <Collapse bordered={true}>
+            <Panel style={{backgroundColor:'white'}} showArrow={false} header={
+              <div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
+                <h3 style={{color:'#FF6F00'}}>
+                  {price} Points
+                </h3>
+                <h3 style={{color:'#6772e5'}}>
+                  Detail  Tagihan
+                </h3>
+              </div>
+            } key="1">
+              <Row>
+                <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
+                  <p>{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}</p>
+                  <p>{price} Points</p>
+                </div>
+              </Row>
+              <Row>
+                <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
+                  <p>{qty} x  {price} Points</p>
+                  <p>{total} Points</p>
+                </div>
+              </Row>
+              <Divider dashed={true} />
+              <Row>
+                <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
+                  <p>Tagihan</p>
+                  <p>{total} Points</p>
+                </div>
+              </Row>
+            </Panel>
+          </Collapse>
+        </div>
+        <div className="row">
+          <Card  title={<div style={{display:'flex',justifyContent:'space-between'}}>
+            <div>
+              <h3 style={{fontSize:20}}>
+                Points {applicationName}
+              </h3>
+            </div>
+            <div>
+              <img  style={{width:120, height:40}} src={applicationLogo} />
+            </div>
+          </div>}>
+            <div className="row">
+              <Alert message="Pastikan data anda sudah terverivikasi dan vouchers anda yang pilih sudah benar sebelum melakukan transaksi" type="warning" />
+            </div>
+            <div>
+              <ul>
+                <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
+                <li style={{margin:10}}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
+              </ul>
+            </div>
+          </Card>
+        </div>
+        <div className="row">
+          {this.props.button()}
+        </div>
+      </div>
+    );
+
     return (
-    <div className="wallet containerMiddle">
+      <div className="wallet containerMiddle">
         <div className="row">
             <div className="col s0 m2 l2" />
             <div className="col s12 m8 l8">

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

@@ -0,0 +1,186 @@
+import {inject, observer} from "mobx-react";
+import React from "react";
+import './style.scss';
+import {
+  Step,
+  Stepper,
+  StepLabel,
+} from 'material-ui/Stepper';
+import RaisedButton from 'material-ui/RaisedButton';
+import FlatButton from 'material-ui/FlatButton';
+import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
+import {Divider} from "material-ui";
+import CheckoutVouchers from "../Checkout";
+import PaymentVouchers from "../Payment";
+import {LINKS} from "../../../routes";
+import {notification, Modal} from "antd";
+import FinishVouchers from "../Finish";
+
+const confirm = Modal.confirm;
+
+@inject('appstate')
+@observer
+export default class VoucherStepperComponent extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      finished: false,
+      stepIndex: 0,
+    };
+    this.defaultState = Object.assign({}, this.state);
+    this.http = props.appstate.http;
+    this.authStore = props.appstate.auth;
+    this.globalUI = props.appstate.globalUI;
+    this.vouchersStore = props.appstate.vouchers;
+  }
+
+  componentWillMount() {
+    if(!this.vouchersStore.dataItems.name){
+      // alert('jalan')
+      this.props.history.push(LINKS.VOUCHERS);
+    }
+    // alert('engga')
+  }
+
+  handleNext = () => {
+    const {stepIndex} = this.state;
+
+    if(stepIndex === 1){
+      confirm({
+        title: 'Anda yakin mau menukarkan voucher?',
+        content: 'Sistem akan langsung memotong point anda ketika anda menekan tombol konfirmasi dibawah.',
+        onOk: () => {
+          this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
+            .then(res => {
+              const openNotificationWithIcon = (type) => {
+                notification[type]({
+                  message: 'Berhasil',
+                  description: `Selamat anda telah mendapatkan vouchers ${this.vouchersStore.dataItems.name} - ${this.vouchersStore.skuName}`,
+                  placement:'topRight',
+                  duration: 5,
+                });
+              };
+              this.globalUI.hideDialogLoading();
+              // this.props.history.push(LINKS.TRANSACTION)
+              openNotificationWithIcon('success');
+              this.setState({
+                stepIndex: stepIndex + 1,
+                finished: stepIndex >= 2,
+              });
+            })
+            .catch(err => {
+              this.globalUI.openSnackbar(err.message);
+              console.error(err, 'ini errornya');
+            });
+        },
+        onCancel: () => {},
+      });
+    }else if(stepIndex === 2){
+      this.props.history.push(LINKS.TRANSACTION);
+    }else{
+      this.setState({
+        stepIndex: stepIndex + 1,
+        finished: stepIndex >= 2,
+      });
+    }
+  };
+
+  handlePrev = () => {
+    const {stepIndex} = this.state;
+    if (stepIndex > 0) {
+      this.setState({stepIndex: stepIndex - 1});
+    }
+  };
+
+  renderButton = () => {
+    return(
+      <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 12,}}>
+        <FlatButton
+          label="Back"
+          disabled={this.state.stepIndex === 2}
+          onClick={(this.state.stepIndex === 0) ? () => this.props.history.goBack() : this.handlePrev}
+          style={{marginRight: 12}}
+        />
+        <RaisedButton
+          label={this.state.stepIndex === 2 ? 'Finish' : 'Next'}
+          primary={true}
+          onClick={this.handleNext}
+        />
+      </div>
+    );
+  };
+
+  getStepContent(stepIndex) {
+    switch (stepIndex) {
+      case 0:
+        return <CheckoutVouchers button={this.renderButton} vouchersStore={this.vouchersStore} />;
+      case 1:
+        return <PaymentVouchers button={this.renderButton} vouchersStore={this.vouchersStore}/>;
+      case 2:
+        return <FinishVouchers button={this.renderButton}/>;
+      default:
+        return 'You\'re a long way from home sonny jim!';
+    }
+  }
+
+  render() {
+    const {finished, stepIndex} = this.state;
+    const contentStyle = {margin: '0 16px'};
+
+    if(!this.vouchersStore.dataItems.name){
+      return <div></div>
+    }
+
+    return(
+      <div className={'stepper'}>
+        {/*<div className={'divider-container'}>*/}
+          {/*<FlatButton*/}
+            {/*className="headerMenu"*/}
+            {/*hoverColor="#f1f5f9"*/}
+            {/*style={{ background: '#ffffff00' }}*/}
+            {/*onClick={() => this.props.history.goBack()}*/}
+            {/*label="Back"*/}
+            {/*primary={true}*/}
+            {/*icon={<NavigationArrowBack />}*/}
+          {/*/>*/}
+          {/*<Divider style={{marginBottom:10,marginTop:10}} />*/}
+        {/*</div>*/}
+        <div className={'stepper-container'}>
+          <Stepper activeStep={stepIndex}>
+            <Step>
+              <StepLabel>Checkout your Voucher</StepLabel>
+            </Step>
+            <Step>
+              <StepLabel>Process your Payment</StepLabel>
+            </Step>
+            <Step>
+              <StepLabel>Finish</StepLabel>
+            </Step>
+          </Stepper>
+          <Divider style={{marginBottom:10,marginTop:10}} />
+          <div style={contentStyle}>
+            {finished ? (
+              <p>
+                <a
+                  href="#"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    this.setState({stepIndex: 0, finished: false});
+                  }}
+                >
+                  Click here
+                </a> to reset the example.
+              </p>
+            ) : (
+              <div>
+                <p>{this.getStepContent(stepIndex)}</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

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

@@ -0,0 +1,9 @@
+.stepper{
+  margin-top: 5vh;
+  .divider-container{
+    max-width: 65vw;
+  }
+  .stepper-container{
+    max-width: 65vw;
+  }
+}

src/common/routes.js

@@ -117,6 +117,7 @@ export const LINKS = {
   PAYMENT_VOUCHERS: '/app/vouchers/payment',
   CART_DETAIL: '/app/cart',
   TRANSACTION: '/app/transaction',
+  VOUCHER_STEPPER: '/app/vouchers/buy',
 };
 
 @inject('appstate')