update: redeem voucher step
This commit is contained in:
Rifqy Zacky Ariadhy
parent
d0d20f0d2a
commit
dab57e2c88
191
package-lock.json
generated
191
package-lock.json
generated
|
|
@ -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": {
|
"@firebase/app": {
|
||||||
"version": "0.3.5",
|
"version": "0.3.5",
|
||||||
"resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.3.5.tgz",
|
"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": {
|
"@material-ui/system": {
|
||||||
"version": "3.0.0-alpha.2",
|
"version": "3.0.0-alpha.2",
|
||||||
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-3.0.0-alpha.2.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/expect.js/-/expect.js-0.2.0.tgz",
|
||||||
"integrity": "sha1-EChTPSwcNj90pnlv9X7AUg3tK+E="
|
"integrity": "sha1-EChTPSwcNj90pnlv9X7AUg3tK+E="
|
||||||
},
|
},
|
||||||
|
"exploder": {
|
||||||
|
"version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0",
|
||||||
|
"from": "git://github.com/cezary/exploder.git"
|
||||||
|
},
|
||||||
"express": {
|
"express": {
|
||||||
"version": "4.16.4",
|
"version": "4.16.4",
|
||||||
"resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
|
"resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
|
||||||
|
|
@ -6414,13 +6496,11 @@
|
||||||
},
|
},
|
||||||
"balanced-match": {
|
"balanced-match": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"brace-expansion": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"balanced-match": "^1.0.0",
|
"balanced-match": "^1.0.0",
|
||||||
"concat-map": "0.0.1"
|
"concat-map": "0.0.1"
|
||||||
|
|
@ -6433,18 +6513,15 @@
|
||||||
},
|
},
|
||||||
"code-point-at": {
|
"code-point-at": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"concat-map": {
|
"concat-map": {
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"console-control-strings": {
|
"console-control-strings": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"core-util-is": {
|
"core-util-is": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
|
|
@ -6547,8 +6624,7 @@
|
||||||
},
|
},
|
||||||
"inherits": {
|
"inherits": {
|
||||||
"version": "2.0.3",
|
"version": "2.0.3",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"ini": {
|
"ini": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
|
|
@ -6558,7 +6634,6 @@
|
||||||
"is-fullwidth-code-point": {
|
"is-fullwidth-code-point": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"number-is-nan": "^1.0.0"
|
"number-is-nan": "^1.0.0"
|
||||||
}
|
}
|
||||||
|
|
@ -6571,20 +6646,17 @@
|
||||||
"minimatch": {
|
"minimatch": {
|
||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"brace-expansion": "^1.1.7"
|
"brace-expansion": "^1.1.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"minimist": {
|
"minimist": {
|
||||||
"version": "0.0.8",
|
"version": "0.0.8",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"minipass": {
|
"minipass": {
|
||||||
"version": "2.2.4",
|
"version": "2.2.4",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"safe-buffer": "^5.1.1",
|
"safe-buffer": "^5.1.1",
|
||||||
"yallist": "^3.0.0"
|
"yallist": "^3.0.0"
|
||||||
|
|
@ -6601,7 +6673,6 @@
|
||||||
"mkdirp": {
|
"mkdirp": {
|
||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"minimist": "0.0.8"
|
"minimist": "0.0.8"
|
||||||
}
|
}
|
||||||
|
|
@ -6674,8 +6745,7 @@
|
||||||
},
|
},
|
||||||
"number-is-nan": {
|
"number-is-nan": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"bundled": true,
|
"bundled": true
|
||||||
"optional": true
|
|
||||||
},
|
},
|
||||||
"object-assign": {
|
"object-assign": {
|
||||||
"version": "4.1.1",
|
"version": "4.1.1",
|
||||||
|
|
@ -6685,7 +6755,6 @@
|
||||||
"once": {
|
"once": {
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"wrappy": "1"
|
"wrappy": "1"
|
||||||
}
|
}
|
||||||
|
|
@ -6791,7 +6860,6 @@
|
||||||
"string-width": {
|
"string-width": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"bundled": true,
|
"bundled": true,
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"code-point-at": "^1.0.0",
|
"code-point-at": "^1.0.0",
|
||||||
"is-fullwidth-code-point": "^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": {
|
"jss-props-sort": {
|
||||||
"version": "6.0.0",
|
"version": "6.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
|
||||||
|
|
@ -14062,11 +14199,8 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-gif/-/react-gif-0.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-gif/-/react-gif-0.1.0.tgz",
|
||||||
"integrity": "sha1-/A21vUnTHdRRnIVRAp+zXTtk04E=",
|
"integrity": "sha1-/A21vUnTHdRRnIVRAp+zXTtk04E=",
|
||||||
"dependencies": {
|
"requires": {
|
||||||
"exploder": {
|
"exploder": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
|
||||||
"version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0",
|
|
||||||
"from": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"react-google-charts": {
|
"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": {
|
"tinycolor2": {
|
||||||
"version": "1.4.1",
|
"version": "1.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -29,13 +29,13 @@ imageUrl = "https://giift-api.asacreative.com";
|
||||||
|
|
||||||
type = 'localhost';
|
type = 'localhost';
|
||||||
if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
|
if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
|
||||||
appUrl = 'http://localhost:7700';
|
// appUrl = 'http://localhost:7700';
|
||||||
apiUrl = "http://localhost:4001/"
|
// apiUrl = "http://localhost:4001/"
|
||||||
}else{
|
}else{
|
||||||
appUrl = 'https://sillyfish.asacreative.com';
|
appUrl = 'https://sillyfish.asacreative.com';
|
||||||
}
|
}
|
||||||
|
|
||||||
export const APP_TYPE = 'giift';
|
export const APP_TYPE = 'btn';
|
||||||
|
|
||||||
export const appConfig = {
|
export const appConfig = {
|
||||||
apiUrl: apiUrl,
|
apiUrl: apiUrl,
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,7 @@ import DataTab from '../Data';
|
||||||
import LayoutTab from '../Layout';
|
import LayoutTab from '../Layout';
|
||||||
import ContentTab from '../Content';
|
import ContentTab from '../Content';
|
||||||
import TransactionPage from "../Transaction";
|
import TransactionPage from "../Transaction";
|
||||||
|
import VoucherStepperComponent from "../Vouchers/Stepper";
|
||||||
|
|
||||||
export default class ComponentName extends React.Component {
|
export default class ComponentName extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
|
@ -87,6 +88,7 @@ export default class ComponentName extends React.Component {
|
||||||
<Route exact component={CarSearch} path={LINKS.CAR_SEARCH}/>
|
<Route exact component={CarSearch} path={LINKS.CAR_SEARCH}/>
|
||||||
<Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
|
<Route exact component={ItemsComponent} path={LINKS.ITEMS}/>
|
||||||
<Route exact component={VouchersComponent} path={LINKS.VOUCHERS}/>
|
<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={VerifyVouchers} path={LINKS.VERIFY_VOUCHERS}/>
|
||||||
<Route exact component={CheckoutVouchers} path={LINKS.CHECKOUT_VOUCHERS}/>
|
<Route exact component={CheckoutVouchers} path={LINKS.CHECKOUT_VOUCHERS}/>
|
||||||
<Route exact component={PaymentVouchers} path={LINKS.PAYMENT_VOUCHERS}/>
|
<Route exact component={PaymentVouchers} path={LINKS.PAYMENT_VOUCHERS}/>
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox
|
||||||
import {startCase} from 'lodash';
|
import {startCase} from 'lodash';
|
||||||
import LoadingDialog from "../../LoadingDialog";
|
import LoadingDialog from "../../LoadingDialog";
|
||||||
import Loader from 'react-loader-advanced';
|
import Loader from 'react-loader-advanced';
|
||||||
|
import './style.scss';
|
||||||
import {DIALOG} from "../../../stores/global_ui";
|
import {DIALOG} from "../../../stores/global_ui";
|
||||||
import EmptyComponent from '../../EmptyComponent';
|
import EmptyComponent from '../../EmptyComponent';
|
||||||
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
|
||||||
|
|
@ -32,105 +33,92 @@ export default class CheckoutVouchers extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
console.log("skuid",this.vouchersStore.skuId);
|
console.log(this.vouchersStore)
|
||||||
console.log("skuName",this.vouchersStore.skuName);
|
// console.log("skuid",this.vouchersStore.skuId);
|
||||||
console.log("skuPrice",this.vouchersStore.skuPrice);
|
// console.log("skuName",this.vouchersStore.skuName);
|
||||||
console.log("data",this.vouchersStore.dataItems);
|
// console.log("skuPrice",this.vouchersStore.skuPrice);
|
||||||
|
// console.log("data",this.vouchersStore.dataItems);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
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')) {
|
if (!image.includes('http')) {
|
||||||
image = this.http.appendImagePath(image);
|
image = this.http.appendImagePath(image);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="wallet containerMiddle">
|
<div className="row">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col s0 m3 l3" />
|
<Card>
|
||||||
<div className="col s12 m6 l6">
|
<div className="">
|
||||||
<div className="row">
|
<div style={{display:'flex',justifyContent:'center'}}>
|
||||||
<FlatButton
|
<h3 style={{fontSize:18}}>
|
||||||
className="headerMenu"
|
Detail Pembelian
|
||||||
hoverColor="#f1f5f9"
|
</h3>
|
||||||
style={{ background: '#ffffff00' }}
|
</div>
|
||||||
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>
|
|
||||||
</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>
|
<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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
4
src/common/pages/Vouchers/Checkout/style.scss
Normal file
4
src/common/pages/Vouchers/Checkout/style.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.imageCard{
|
||||||
|
max-width: 20vw;
|
||||||
|
max-height: 20vw;
|
||||||
|
}
|
||||||
64
src/common/pages/Vouchers/Finish/index.js
Normal file
64
src/common/pages/Vouchers/Finish/index.js
Normal file
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
4
src/common/pages/Vouchers/Finish/style.scss
Normal file
4
src/common/pages/Vouchers/Finish/style.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.textContainer{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
@ -152,7 +152,7 @@ export default class ModalVouchersComponent extends React.Component {
|
||||||
this.vouchersStore.skuName = this.state.skuName;
|
this.vouchersStore.skuName = this.state.skuName;
|
||||||
this.vouchersStore.skuPrice = this.state.skuPrice;
|
this.vouchersStore.skuPrice = this.state.skuPrice;
|
||||||
console.log('enak',this.state);
|
console.log('enak',this.state);
|
||||||
history.push(LINKS.VERIFY_VOUCHERS);
|
history.push(LINKS.VOUCHER_STEPPER);
|
||||||
}}
|
}}
|
||||||
type="primary"
|
type="primary"
|
||||||
disabled={this.state.buttonDisbaled}
|
disabled={this.state.buttonDisbaled}
|
||||||
|
|
|
||||||
|
|
@ -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 qty = 1;
|
||||||
const total = price * qty;
|
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';
|
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 (
|
return (
|
||||||
<div className="wallet containerMiddle">
|
<div className="wallet containerMiddle">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col s0 m2 l2" />
|
<div className="col s0 m2 l2" />
|
||||||
<div className="col s12 m8 l8">
|
<div className="col s12 m8 l8">
|
||||||
|
|
|
||||||
186
src/common/pages/Vouchers/Stepper/index.js
Normal file
186
src/common/pages/Vouchers/Stepper/index.js
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
9
src/common/pages/Vouchers/Stepper/style.scss
Normal file
9
src/common/pages/Vouchers/Stepper/style.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
.stepper{
|
||||||
|
margin-top: 5vh;
|
||||||
|
.divider-container{
|
||||||
|
max-width: 65vw;
|
||||||
|
}
|
||||||
|
.stepper-container{
|
||||||
|
max-width: 65vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -117,6 +117,7 @@ export const LINKS = {
|
||||||
PAYMENT_VOUCHERS: '/app/vouchers/payment',
|
PAYMENT_VOUCHERS: '/app/vouchers/payment',
|
||||||
CART_DETAIL: '/app/cart',
|
CART_DETAIL: '/app/cart',
|
||||||
TRANSACTION: '/app/transaction',
|
TRANSACTION: '/app/transaction',
|
||||||
|
VOUCHER_STEPPER: '/app/vouchers/buy',
|
||||||
};
|
};
|
||||||
|
|
||||||
@inject('appstate')
|
@inject('appstate')
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user