From dab57e2c88ae6e0c55a99bb57d69decc101ba626 Mon Sep 17 00:00:00 2001 From: Rifqy Zacky Ariadhy Date: Mon, 28 Jan 2019 19:17:00 +0700 Subject: [PATCH] update: redeem voucher step --- package-lock.json | 191 +++++++++++++++--- src/common/config/app.js | 6 +- src/common/pages/App/routes.js | 2 + src/common/pages/Vouchers/Checkout/index.js | 160 +++++++-------- src/common/pages/Vouchers/Checkout/style.scss | 4 + src/common/pages/Vouchers/Finish/index.js | 64 ++++++ src/common/pages/Vouchers/Finish/style.scss | 4 + src/common/pages/Vouchers/Modal/index.js | 2 +- src/common/pages/Vouchers/Payment/index.js | 68 ++++++- src/common/pages/Vouchers/Stepper/index.js | 186 +++++++++++++++++ src/common/pages/Vouchers/Stepper/style.scss | 9 + src/common/routes.js | 1 + 12 files changed, 579 insertions(+), 118 deletions(-) create mode 100644 src/common/pages/Vouchers/Checkout/style.scss create mode 100644 src/common/pages/Vouchers/Finish/index.js create mode 100644 src/common/pages/Vouchers/Finish/style.scss create mode 100644 src/common/pages/Vouchers/Stepper/index.js create mode 100644 src/common/pages/Vouchers/Stepper/style.scss diff --git a/package-lock.json b/package-lock.json index 160ffa5..b635a28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1128,6 +1128,11 @@ } } }, + "@emotion/hash": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.1.tgz", + "integrity": "sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==" + }, "@firebase/app": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.3.5.tgz", @@ -1397,6 +1402,79 @@ } } }, + "@material-ui/icons": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-3.0.2.tgz", + "integrity": "sha512-QY/3gJnObZQ3O/e6WjH+0ah2M3MOgLOzCy8HTUoUx9B6dDrS18vP7Ycw3qrDEKlB6q1KNxy6CZHm5FCauWGy2g==", + "requires": { + "@babel/runtime": "^7.2.0", + "recompose": "0.28.0 - 0.30.0" + }, + "dependencies": { + "recompose": { + "version": "0.30.0", + "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz", + "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==", + "requires": { + "@babel/runtime": "^7.0.0", + "change-emitter": "^0.1.2", + "fbjs": "^0.8.1", + "hoist-non-react-statics": "^2.3.1", + "react-lifecycles-compat": "^3.0.2", + "symbol-observable": "^1.0.4" + } + } + } + }, + "@material-ui/styles": { + "version": "3.0.0-alpha.9", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-3.0.0-alpha.9.tgz", + "integrity": "sha512-1AmmTj82ip4Sp3XTTFQklkh+mnjQAtSIpqkGpKsAbS/XCG8X13/qUJ4AWlwC/OOPBLJl85Hm2jVUXhmAidD6bg==", + "requires": { + "@babel/runtime": "^7.2.0", + "@emotion/hash": "^0.7.1", + "@material-ui/utils": "^3.0.0-alpha.2", + "classnames": "^2.2.5", + "deepmerge": "^3.0.0", + "hoist-non-react-statics": "^3.2.1", + "jss": "^10.0.0-alpha.7", + "jss-plugin-camel-case": "^10.0.0-alpha.7", + "jss-plugin-default-unit": "^10.0.0-alpha.7", + "jss-plugin-global": "^10.0.0-alpha.7", + "jss-plugin-nested": "^10.0.0-alpha.7", + "jss-plugin-props-sort": "^10.0.0-alpha.7", + "jss-plugin-rule-value-function": "^10.0.0-alpha.7", + "jss-plugin-vendor-prefixer": "^10.0.0-alpha.7", + "prop-types": "^15.6.0", + "warning": "^4.0.1" + }, + "dependencies": { + "hoist-non-react-statics": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz", + "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", + "requires": { + "react-is": "^16.7.0" + } + }, + "jss": { + "version": "10.0.0-alpha.9", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.0.0-alpha.9.tgz", + "integrity": "sha512-emGhSk/Vp4GoNL1Oex/YJXk/G3wMsh9TbFQ6dZ5lazQmFwBAoWC5K0CVL8N3aJqq2k6WO9rcVUL371pHGp3IPQ==", + "requires": { + "@babel/runtime": "^7.0.0", + "is-in-browser": "^1.1.3", + "symbol-observable": "^1.2.0", + "tiny-warning": "^1.0.2" + } + }, + "react-is": { + "version": "16.7.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz", + "integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==" + } + } + }, "@material-ui/system": { "version": "3.0.0-alpha.2", "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz", @@ -5731,6 +5809,10 @@ "resolved": "https://registry.npmjs.org/expect.js/-/expect.js-0.2.0.tgz", "integrity": "sha1-EChTPSwcNj90pnlv9X7AUg3tK+E=" }, + "exploder": { + "version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0", + "from": "git://github.com/cezary/exploder.git" + }, "express": { "version": "4.16.4", "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz", @@ -6414,13 +6496,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6433,18 +6513,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -6547,8 +6624,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -6558,7 +6634,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6571,20 +6646,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.2.4", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -6601,7 +6673,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -6674,8 +6745,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -6685,7 +6755,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -6791,7 +6860,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -9490,6 +9558,75 @@ } } }, + "jss-plugin-camel-case": { + "version": "10.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0-alpha.7.tgz", + "integrity": "sha512-Bwrav1ZB0XywdJW6TaEuFhKe1ZpZvUlESh3jsFOvebA9aFTYNCkmHMEqjA5+u9VMxksl3u77nnZHtukpxkzrBA==", + "requires": { + "@babel/runtime": "^7.0.0", + "hyphenate-style-name": "^1.0.2" + } + }, + "jss-plugin-default-unit": { + "version": "10.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0-alpha.7.tgz", + "integrity": "sha512-auuJUbQaWMxoHOVFPrfZNZpZm9ab8PZeDyvey8nMt2lbokkmZ53UyAnM/1kNsg5BdAXTItcLDxDB3I4gwNU84g==", + "requires": { + "@babel/runtime": "^7.0.0" + } + }, + "jss-plugin-global": { + "version": "10.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.0.0-alpha.7.tgz", + "integrity": "sha512-OWeoW4szLDgRUKviST+xfilqa8O5uXJCW+O3YonheCRTRJg6rRzlE/b5pfYPoU9UtwvY9n7JvwBX5r3c1lMsEQ==", + "requires": { + "@babel/runtime": "^7.0.0" + } + }, + "jss-plugin-nested": { + "version": "10.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.0.0-alpha.7.tgz", + "integrity": "sha512-wsRzuIZXAc6WMjc61mREW9cUrDxgSI7dK/fx5c7a06IDUfSn+83NJ30J/RB4oBnbQW9SijV/muujz7IJqpn9Gw==", + "requires": { + "@babel/runtime": "^7.0.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0-alpha.7.tgz", + "integrity": "sha512-KXOCaHUk1+KXqE0z3q66/w1fDoy+VsZvI77gLxOqTsTrvIKFLX0jarwXogW3CDlaPQQFTZ6JykJJXtPRTBlstA==", + "requires": { + "@babel/runtime": "^7.0.0" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0-alpha.7.tgz", + "integrity": "sha512-ett83hvIM69/LknmrWndrrdiDlfLfP+rneU5qP7gTOWJ7g1P9GuEL1Tc4CWdZUWBX+T58tgIBP0V1pzWCkP0QA==", + "requires": { + "@babel/runtime": "^7.0.0" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.0.0-alpha.7", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0-alpha.7.tgz", + "integrity": "sha512-YbIVgqq+dLimOBOEYggho1Iuc0roz4PJSZYyaok9n8JnXVIqPnxYJbr8+bMbvzJ5CL3eeJij/e7L2IPCceRKrA==", + "requires": { + "@babel/runtime": "^7.0.0", + "css-vendor": "^1.1.0" + }, + "dependencies": { + "css-vendor": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-1.1.0.tgz", + "integrity": "sha512-pePyROdjdMRjHhGN+xZjBomaR9GXueNQ2ZLkEi0i2A/eVx0m4oCLglltdRsaYCSOpun0GRJWuqmWLIYj6Y/RVQ==", + "requires": { + "is-in-browser": "^1.0.2" + } + } + } + }, "jss-props-sort": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz", @@ -14062,11 +14199,8 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/react-gif/-/react-gif-0.1.0.tgz", "integrity": "sha1-/A21vUnTHdRRnIVRAp+zXTtk04E=", - "dependencies": { - "exploder": { - "version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0", - "from": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0" - } + "requires": { + "exploder": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0" } }, "react-google-charts": { @@ -16800,6 +16934,11 @@ } } }, + "tiny-warning": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz", + "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==" + }, "tinycolor2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", diff --git a/src/common/config/app.js b/src/common/config/app.js index e1a527b..9a74530 100644 --- a/src/common/config/app.js +++ b/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, diff --git a/src/common/pages/App/routes.js b/src/common/pages/App/routes.js index 405a2ed..c26bd97 100644 --- a/src/common/pages/App/routes.js +++ b/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 { + diff --git a/src/common/pages/Vouchers/Checkout/index.js b/src/common/pages/Vouchers/Checkout/index.js index fd6071c..f0f1ac9 100644 --- a/src/common/pages/Vouchers/Checkout/index.js +++ b/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 ( -
+
-
-
-
- this.props.history.goBack()} - label="Back" - primary={true} - icon={} - /> - - - //

- // Detail Pembelian - //

- //
} - > -
-
-

- Detail Pembelian -

-
-
- -
-
-
- - {/* */} -
-
-
-
- -
-

Jenis Layanan :

-
-
-

{this.vouchersStore.dataItems.name} {this.vouchersStore.skuName}

-
- - -
-

Point :

-
-
-

{(+this.vouchersStore.skuPrice).toFixed(0)} Points

-
- -
-
-
- -
-
- -
-
-

Point

-

{this.props.appstate.wallet.data.point} Points

-
-
- -
-
-

Total Pembayaran Point

-

{(+this.vouchersStore.skuPrice).toFixed(0)} Points

-
-
-
- -
- -
+ +
+
+

+ Detail Pembelian +

+
-
+ +
+
+
+ + {/* */} +
+
+
+
+ +
+

Jenis Layanan

+
+
+

:

+
+
+

{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}

+
+ + +
+

Point

+
+
+

:

+
+
+

{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points

+
+ +
+
+
+
-
+
+ +
+
+

Point

+

{this.props.appstate.wallet.data.point || 0} Points

+
+
+ +
+
+

Total Pembayaran Point

+

{(+this.props.vouchersStore.skuPrice || 0).toFixed(0)} Points

+
+
+ +
+
+ {this.props.button()} +
+
) } } diff --git a/src/common/pages/Vouchers/Checkout/style.scss b/src/common/pages/Vouchers/Checkout/style.scss new file mode 100644 index 0000000..e928943 --- /dev/null +++ b/src/common/pages/Vouchers/Checkout/style.scss @@ -0,0 +1,4 @@ +.imageCard{ + max-width: 20vw; + max-height: 20vw; +} diff --git a/src/common/pages/Vouchers/Finish/index.js b/src/common/pages/Vouchers/Finish/index.js new file mode 100644 index 0000000..80180e0 --- /dev/null +++ b/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 ( +
+
+ +
+
+

+ Berhasil menukarkan voucher +

+
+
+ +
+
+
+

Anda akan dialihkan ke page voucher dengan menekan tombol finish dibawah ini. Selamat Berbelanja!

+
+
+
+ +
+
+ {this.props.button()} +
+
+ ) + } +} diff --git a/src/common/pages/Vouchers/Finish/style.scss b/src/common/pages/Vouchers/Finish/style.scss new file mode 100644 index 0000000..87f6c0c --- /dev/null +++ b/src/common/pages/Vouchers/Finish/style.scss @@ -0,0 +1,4 @@ +.textContainer{ + text-align: center; + font-size: 1.25em; +} diff --git a/src/common/pages/Vouchers/Modal/index.js b/src/common/pages/Vouchers/Modal/index.js index 84e99a6..f8b43a8 100644 --- a/src/common/pages/Vouchers/Modal/index.js +++ b/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} diff --git a/src/common/pages/Vouchers/Payment/index.js b/src/common/pages/Vouchers/Payment/index.js index 2280590..ebf93cf 100644 --- a/src/common/pages/Vouchers/Payment/index.js +++ b/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( +
+
+ + +

+ {price} Points +

+

+ Detail Tagihan +

+
+ } key="1"> + +
+

{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}

+

{price} Points

+
+ + +
+

{qty} x {price} Points

+

{total} Points

+
+ + + +
+

Tagihan

+

{total} Points

+
+ + + +
+
+ +
+

+ Points {applicationName} +

+
+
+ +
+
}> +
+ +
+
+
    +
  • 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.
    • +
  • 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.
    • +
+
+ +
+
+ {this.props.button()} +
+
+ ); + return ( -
+
diff --git a/src/common/pages/Vouchers/Stepper/index.js b/src/common/pages/Vouchers/Stepper/index.js new file mode 100644 index 0000000..db027d9 --- /dev/null +++ b/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( +
+ this.props.history.goBack() : this.handlePrev} + style={{marginRight: 12}} + /> + +
+ ); + }; + + getStepContent(stepIndex) { + switch (stepIndex) { + case 0: + return ; + case 1: + return ; + case 2: + return ; + 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
+ } + + return( +
+ {/*
*/} + {/* this.props.history.goBack()}*/} + {/*label="Back"*/} + {/*primary={true}*/} + {/*icon={}*/} + {/*/>*/} + {/**/} + {/*
*/} +
+ + + Checkout your Voucher + + + Process your Payment + + + Finish + + + +
+ {finished ? ( +

+ { + event.preventDefault(); + this.setState({stepIndex: 0, finished: false}); + }} + > + Click here + to reset the example. +

+ ) : ( +
+

{this.getStepContent(stepIndex)}

+
+ )} +
+
+
+ ); + } + +} diff --git a/src/common/pages/Vouchers/Stepper/style.scss b/src/common/pages/Vouchers/Stepper/style.scss new file mode 100644 index 0000000..f4639bd --- /dev/null +++ b/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; + } +} diff --git a/src/common/routes.js b/src/common/routes.js index 1aa28d7..ed40278 100644 --- a/src/common/routes.js +++ b/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')