style: Adjust item card height

feat: Items based on category voucher
fix: Adjust redeem voucher message
2023-01-18 15:55:08 +07:00 · 2023-01-18 15:40:08 +07:00 · 2023-01-18 14:17:01 +07:00 · 2023-01-18 13:36:31 +07:00 · 2023-01-18 12:29:29 +07:00 · 2023-01-18 11:34:11 +07:00
47 changed files with 508 additions and 568330 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -49,3 +49,6 @@ settings.json
 dist/

 public/assets
+public/static
+public/static/**/*.js
+public/static/**/*.js.map
--- a/README.md
+++ b/README.md
@@ -1,10 +1,15 @@
-# mobx-ssr-example
-Server-side rendering with mobx and react-router
+#BTN Registration
+
+####Build and run
+
+edit `/src/common/config/app.js` according to your server
+```
+apiUrl = "https://giift-api.asacreative.com/";
+imageUrl = "https://giift-api.asacreative.com";
+```

-#Build and run
 ```
 npm install
-gulp app
-node src/index.js
+npm run build2:parcel:prod
 ```
-Runs an express server on port 3000
+the compiled file will be available in dist folder
--- a/assets/images/kb_bukopin.jpeg
+++ b/assets/images/kb_bukopin.jpeg
--- a/k8s/staging/deployment.yaml
+++ b/k8s/staging/deployment.yaml
@@ -0,0 +1,23 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: bukopin-redemption-client-react
+  namespace: bukopin-staging
+spec:
+  selector:
+    matchLabels:
+      app: bukopin-redemption-client-react
+  replicas: 1
+  template:
+    metadata:
+      labels:
+        app: bukopin-redemption-client-react
+    spec:
+      containers:
+        - name: bukopin-redemption-client-react
+          image: registry-harbor.app.bangun-kreatif.com/bukopin/bukopin-redemption-client-react:<VERSION>
+          ports:
+            - containerPort: 8080
+      imagePullSecrets:
+        - name: regcred
+
--- a/k8s/staging/ingress.yaml
+++ b/k8s/staging/ingress.yaml
@@ -0,0 +1,25 @@
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: bukopin-redemption-client-react
+  namespace: bukopin-staging
+  annotations:
+    kubernetes.io/ingress.class: "traefik"
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+    traefik.ingress.kubernetes.io/router.middlewares: bukopin-staging-redirect-https@kubernetescrd
+spec:
+  rules:
+    - host: "bukopin-fe.k3s.bangun-kreatif.com"
+      http:
+        paths:
+          - pathType: Prefix
+            path: /
+            backend:
+              service:
+                name: bukopin-redemption-client-react
+                port:
+                  number: 8080
+  tls:
+    - hosts:
+        - "bukopin-fe.k3s.bangun-kreatif.com"
+      secretName: bukopin-fe-k3s-bangun-kreatif-com-tls
--- a/k8s/staging/middleware.yaml
+++ b/k8s/staging/middleware.yaml
@@ -0,0 +1,9 @@
+apiVersion: traefik.containo.us/v1alpha1
+kind: Middleware
+metadata:
+  name: redirect-https
+  namespace: bukopin-staging
+spec:
+  redirectScheme:
+    scheme: https
+    permanent: true
--- a/k8s/staging/namespace.yaml
+++ b/k8s/staging/namespace.yaml
@@ -0,0 +1,4 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: bukopin-staging
--- a/k8s/staging/service.yaml
+++ b/k8s/staging/service.yaml
@@ -0,0 +1,13 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: bukopin-redemption-client-react
+  namespace: bukopin-staging
+  labels:
+    run: bukopin-redemption-client-react
+spec:
+  ports:
+    - port: 8080
+      protocol: TCP
+  selector:
+    app:  bukopin-redemption-client-react
--- a/package-lock.json
+++ b/package-lock.json
@@ -4377,11 +4377,6 @@
      "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.8.tgz",
      "integrity": "sha512-PM54PkseWbiiD/mMsbvW351/u+dafwTJ0ye2qB60G1aGQP9j3xK2gmMDc+R34L3nDtx4qMCitXT75mkbkGJDLw=="
    },
-    "commander": {
-      "version": "2.2.0",
-      "resolved": "http://registry.npmjs.org/commander/-/commander-2.2.0.tgz",
-      "integrity": "sha1-F1rUuTF/P/YV8gHB5XIk9Vo+kd8="
-    },
    "commondir": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -6327,10 +6322,6 @@
      "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",
@@ -7001,7 +6992,8 @@
        },
        "ansi-regex": {
          "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
@@ -7019,11 +7011,13 @@
        },
        "balanced-match": {
          "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
          "bundled": true,
+          "optional": true,
          "requires": {
            "balanced-match": "^1.0.0",
            "concat-map": "0.0.1"
@@ -7036,15 +7030,18 @@
        },
        "code-point-at": {
          "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
@@ -7147,7 +7144,8 @@
        },
        "inherits": {
          "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        },
        "ini": {
          "version": "1.3.5",
@@ -7157,6 +7155,7 @@
        "is-fullwidth-code-point": {
          "version": "1.0.0",
          "bundled": true,
+          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -7169,17 +7168,20 @@
        "minimatch": {
          "version": "3.0.4",
          "bundled": true,
+          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
        },
        "minimist": {
          "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        },
        "minipass": {
          "version": "2.3.5",
          "bundled": true,
+          "optional": true,
          "requires": {
            "safe-buffer": "^5.1.2",
            "yallist": "^3.0.0"
@@ -7196,6 +7198,7 @@
        "mkdirp": {
          "version": "0.5.1",
          "bundled": true,
+          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@@ -7268,7 +7271,8 @@
        },
        "number-is-nan": {
          "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -7278,6 +7282,7 @@
        "once": {
          "version": "1.4.0",
          "bundled": true,
+          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -7353,7 +7358,8 @@
        },
        "safe-buffer": {
          "version": "5.1.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        },
        "safer-buffer": {
          "version": "2.1.2",
@@ -7383,6 +7389,7 @@
        "string-width": {
          "version": "1.0.2",
          "bundled": true,
+          "optional": true,
          "requires": {
            "code-point-at": "^1.0.0",
            "is-fullwidth-code-point": "^1.0.0",
@@ -7400,6 +7407,7 @@
        "strip-ansi": {
          "version": "3.0.1",
          "bundled": true,
+          "optional": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
@@ -7438,11 +7446,13 @@
        },
        "wrappy": {
          "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        },
        "yallist": {
          "version": "3.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
        }
      }
    },
@@ -11899,14 +11909,6 @@
      "resolved": "https://registry.npmjs.org/numbro/-/numbro-1.11.1.tgz",
      "integrity": "sha512-qL0Etqbunz4RtPx4bNjMONe9HyUpgbrM4Sa3VpWY5oRdp9ry5DufAj6lCvnIcluRBA9QUacrllYc73QK0G6VAw=="
    },
-    "nwbuild": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/nwbuild/-/nwbuild-0.0.5.tgz",
-      "integrity": "sha1-9Gc+85BMJzqxzaX0/fx8D4qEpAM=",
-      "requires": {
-        "commander": "2.2.0"
-      }
-    },
    "oauth-sign": {
      "version": "0.9.0",
      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
@@ -14769,8 +14771,11 @@
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/react-gif/-/react-gif-0.1.0.tgz",
      "integrity": "sha1-/A21vUnTHdRRnIVRAp+zXTtk04E=",
-      "requires": {
-        "exploder": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
+      "dependencies": {
+        "exploder": {
+          "version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0",
+          "from": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
+        }
      }
    },
    "react-google-charts": {
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
  "description": "Server-side rendering with mobx and react-router",
  "main": "src/index.js",
  "scripts": {
-    "start": "node src/index.js",
+    "start": "node -r esm src/index.js",
    "babel-node": "node node_modules/@babel/node/bin/babel-node.js --presets=@babel/preset-env --plugins=@babel/plugin-transform-runtime",
    "watch:client": "webpack --watch",
    "watch:server": "npm run babel-node -- ./src/index.js",
@@ -55,6 +55,7 @@
    "cssnano": "^4.1.8",
    "debug": "^4.1.1",
    "decimal.js-light": "^2.3.1",
+    "esm": "^3.2.25",
    "exenv": "^1.2.2",
    "express": "^4.16.2",
    "faker": "^4.1.0",
@@ -90,7 +91,6 @@
    "mobx-react": "^5.4.3",
    "mobx-react-devtools": "^6.0.3",
    "moment": "^2.24.0",
-    "nwbuild": "0.0.5",
    "parcel-bundler": "^1.11.0",
    "prop-types": "^15.6.2",
    "raw-loader": "^0.5.1",
@@ -108,7 +108,6 @@
    "react-easy-print": "^0.6.0-beta.3",
    "react-flexible-carousel": "^1.2.6",
    "react-froala-wysiwyg": "^2.8.4",
-    "react-gif": "^0.1.0",
    "react-google-charts": "^3.0.8",
    "react-grid-gallery": "^0.5.2",
    "react-handsontable": "^0.3.1",
--- a/public/index.html
+++ b/public/index.html
@@ -2,9 +2,9 @@
 <html>
 <head>
    <meta charset="utf-8">
-    <title>BTN</title>
+    <title>KB Bukopin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
+    <link rel="icon" type="image/png" href="/assets/images/kb_bukopin.jpeg" sizes="96x96" />
    <style>
        body {
            visibility: hidden;
--- a/public/index.parcel.html
+++ b/public/index.parcel.html
@@ -2,9 +2,9 @@
 <html>
 <head>
    <meta charset="utf-8">
-    <title>BTN</title>
+    <title>KB Bukopin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
+    <link rel="icon" type="image/png" href="/assets/images/kb_bukopin.jpeg" sizes="96x96" />
    <style>
        body {
            visibility: hidden;
--- a/public/index.prod.html
+++ b/public/index.prod.html
@@ -2,9 +2,9 @@
 <html>
 <head>
    <meta charset="utf-8">
-    <title>BTN</title>
+    <title>KB Bukopin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
+    <link rel="icon" type="image/png" href="/assets/images/kb_bukopin.jpeg" sizes="96x96" />
    <style>
        body {
            visibility: hidden;
--- a/public/index.test.html
+++ b/public/index.test.html
@@ -2,9 +2,9 @@
 <html>
 <head>
    <meta charset="utf-8">
-    <title>BTN</title>
+    <title>KB Bukopin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <link rel="icon" type="image/png" href="/assets/images/logo-bankbtn.png" sizes="96x96" />
+    <link rel="icon" type="image/png" href="/assets/images/kb_bukopin.jpeg" sizes="96x96" />
    <style>
        body {
            visibility: hidden;
--- a/public/static/bundle.js
+++ b/public/static/bundle.js
--- a/public/static/bundle.js.map
+++ b/public/static/bundle.js.map
--- a/src/common/config/app.js
+++ b/src/common/config/app.js
@@ -24,13 +24,13 @@ let type = 'akuntiket';
 // apiUrl = "https://marketplace-sillyfish-api.asacreative.com/v1/";
 // imageUrl = "https://marketplace-sillyfish-api.asacreative.com";

-apiUrl = "https://giift-api.asacreative.com/";
-imageUrl = "https://giift-api.asacreative.com";
+apiUrl = "https://herbal-backend.k3s.bangun-kreatif.com/v1/";
+imageUrl = "https://herbal-backend.k3s.bangun-kreatif.com/v1/";

 type = 'localhost';
 if(window.location.href.includes("localhost") || window.location.href.includes("marketplace-store")){
  // appUrl = 'http://localhost:7700';
-  apiUrl = "https://giift-api.asacreative.com/";
+  // apiUrl = "https://giift-api.asacreative.com/";
  // apiUrl = "http://localhost:4001/"
 }else{
  // appUrl = 'https://sillyfish.asacreative.com';
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -20,7 +20,7 @@ import {
  // Drawer,
  // List,
  // ListItem,
-  // IconMenu,
+  IconMenu,
  // IconButton,
  // MenuItem,
  DropDownMenu,
@@ -29,8 +29,8 @@ import {
  Dialog,
  Snackbar,
  // Toolbar,
-  // ToolbarGroup,
-  // ToolbarSeparator,
+  ToolbarGroup,
+  ToolbarSeparator,
  // ToolbarTitle,
  // Badge
 } from 'material-ui';
@@ -260,10 +260,6 @@ class App extends React.Component {
    });
  }

-  openCreateProjectDialog() {
-
-  }
-
  handleToggleIcon = () => this.setState({ open: !this.state.open });
  handleToggleIconSecondary = () => this.setState({ openSecondary: !this.state.openSecondary });
  handleClose = () => this.setState({ open: false });
@@ -373,8 +369,8 @@ class App extends React.Component {
    let applicationIcon = require('../../../../assets/images/logo_new.png');
    let applicationName = 'Giift';
    if (APP_TYPE === 'btn') {
-      applicationIcon = "http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png";
-      applicationName = "BTN";
+      applicationIcon = "https://www.niaga.asia/wp-content/uploads/2021/02/IMG-20210223-WA0025.jpg";
+      applicationName = "KB Bukopin";
    }

    let onNotifRowClick = (record) => {
@@ -564,7 +560,7 @@ class App extends React.Component {
        <WithdrawDialog />

        <div className={classes.root}>
-          <AppBar position="fixed">
+          <AppBar style={{ zIndex: 1 }} position="fixed">
            <Toolbar className={classes.toolbar}>
              <div className={classes.sectionMobile}>
                <IconButton className={classes.menuButton} color="action" aria-label="Open drawer" onClick={this.toggleDrawerNew(true)}>
@@ -577,8 +573,8 @@ class App extends React.Component {
                <img
                  className={classes.title}
                  style={{
-                    width: 100,
-                    height: 30
+                    width: 70,
+                    height: 40
                  }}
                  src={applicationIcon} />
              </Link>
--- a/src/common/pages/App/styles.js
+++ b/src/common/pages/App/styles.js
@@ -9,7 +9,7 @@ export const styles = theme => ({
        width: "100%",
        top: 0,
        zIndex: 1000,
-        backgroundColor: yellow['500'],
+        backgroundColor: '#FAAF03',
        height: '70px !important',
        padding: "8px 24px",
        borderBottom: "1px solid rgb(223, 223, 223)"
--- a/src/common/pages/ConfirmationCompleted/index.js
+++ b/src/common/pages/ConfirmationCompleted/index.js
@@ -74,12 +74,6 @@ export default class ConfirmationCompletedComponent extends React.Component{
                            <Hidden smDown>
                                <Grid item xs={6}>
                                    <img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/>
-                                    <Typography style={{color : '#FFF'}} variant={"h6"}>
-                                        Selamat Datang di BTN Point
-                                    </Typography>
-                                    <Typography style={{color : '#FFF'}} variant={"subtitle2"}>
-                                        Daftar untuk mendapatkan berbagai macam manfaat dan keuntungan
-                                    </Typography>
                                </Grid>
                            </Hidden>
                            <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
@@ -88,7 +82,22 @@ export default class ConfirmationCompletedComponent extends React.Component{
                                  Konfirmasi Berhasil
                                </Typography>
                                <Typography variant="body1" gutterBottom>
-                                  Terima Kasih, mohon cek email anda untuk langkah selanjutnya
+                                  Mohon cek email Anda untuk melihat hadiah. Dapatkan tambahan hadiah dan benefit lainnya dengan menjadi nasabah BTN.
+                                  {/*<Typography style={{color : '#000'}} variant={"h6"}>*/}
+                                    {/*Selamat Datang di BTN Shop*/}
+                                  {/*</Typography>*/}
+                                  {/*<Typography style={{color : '#000'}} variant={"subtitle2"}>*/}
+                                    {/*Dapatkan tambahan hadiah dan benefit lainnya dengan menjadi nasabah BTN, Silahkan klik disini*/}
+                                  {/*</Typography>*/}
+                                  <a href="https://open-account.btn.co.id/form.html" target={"_blank"}>
+
+                                    <Button
+                                      variant="contained"
+                                      style={{ backgroundColor: '#ffeb3b', marginTop: '15px' }}>
+                                      Jadi Nasabah BTN
+                                    </Button>
+
+                                  </a>
                                  {/*We have sent an email with a confirmation link to your email address. Please allow 5-10 minutes for this message to arrive.*/}
                                </Typography>

--- a/src/common/pages/ContentManager/Form/index.js
+++ b/src/common/pages/ContentManager/Form/index.js
@@ -26,7 +26,7 @@ import {lowerCase,debounce} from 'lodash';
 // import 'froala-editor/css/froala_style.min.css';
 // import 'froala-editor/css/froala_editor.pkgd.min.css';
 const $ = require("jquery");
-require("froala-editor/js/froala_editor.pkgd.min.js")($);
+// require("froala-editor/js/froala_editor.pkgd.min.js")($);
 window.$ = window.jQuery = $;
 // require("froala-editor/js/froala_editor.pkgd.min.js")($);
 // require("froala-editor/js/plugins/code_view.min.js")($);
--- a/src/common/pages/Dashboard/index.js
+++ b/src/common/pages/Dashboard/index.js
@@ -199,7 +199,7 @@ class DashboardComponent extends React.Component {
                      Voucher
                    </Typography>
                    <Typography component="p">
-                      <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '} />
+                      <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '} />
                    </Typography>
                  </MuiCardContent>
                  <MuiCardActions>
@@ -330,7 +330,8 @@ class DashboardComponent extends React.Component {
              style={{ marginTop: 15 }}>
              {(this.vouchersStore.list.length > 0) ?
                this.vouchersStore.list.map((item, index) => {
-                  let image = get(item, 'images.logo', '');
+                  console.log("itemm", item)
+                  let image = get(item, 'images.main', '');

                  if (!image.includes('http')) {
                    image = this.http.appendImagePath(image);
--- a/src/common/pages/Login/index.js
+++ b/src/common/pages/Login/index.js
@@ -46,7 +46,7 @@ export default class LoginComponent extends React.Component {

    let loginImage = 'http://giift.asacreative.com/giift_logo_wide.4d15de72.png';
    if(APP_TYPE === 'btn') {
-      loginImage = 'http://btn-redemption-2.bangun-kreatif.com/dr6u0fppdi4xy.cloudfront.net/FilesDirectory/Albilad/ImgIconImage/logo-btn.png'
+      loginImage = 'https://www.niaga.asia/wp-content/uploads/2021/02/IMG-20210223-WA0025.jpg'
    }
    return (
      <div className="loginWrapper">
--- a/src/common/pages/Otp/style.js
+++ b/src/common/pages/Otp/style.js
@@ -30,7 +30,7 @@ export const styles = theme => ({
    },
    logoContainer : {
        textAlign : 'center',
-        background : yellow['500'],
+        background : '#FAAF03',
        padding : 20
    }
 });
--- a/src/common/pages/Register/index.js
+++ b/src/common/pages/Register/index.js
@@ -73,7 +73,7 @@ export default class ComponentName extends React.Component {
          //   description: 'Please check your email to continue'
          // });
          this.props.history.push({
-            pathname:LINKS.REGISTER_COMPLETED
+            pathname:LINKS.VOUCHERS
          });
          this.setState({isLoading: false, isSuccess: true})
          // this
--- a/src/common/pages/RegisterCompleted/index.js
+++ b/src/common/pages/RegisterCompleted/index.js
@@ -75,7 +75,7 @@ export default class RegisterCompletedComponent extends React.Component{
                                <Grid item xs={6}>
                                    <img src={require('../../../../assets/images/login/register_image_2.png')} width={"80%"}/>
                                    <Typography style={{color : '#FFF'}} variant={"h6"}>
-                                        Selamat Datang di BTN Point
+                                        Selamat Datang di KB Bukopin
                                    </Typography>
                                    <Typography style={{color : '#FFF'}} variant={"subtitle2"}>
                                        Daftar untuk mendapatkan berbagai macam manfaat dan keuntungan
@@ -85,10 +85,11 @@ export default class RegisterCompletedComponent extends React.Component{
                            <Grid item xs={12} sm={12} md={6} style={{paddingLeft : 50,paddingRight : 50}}>
                              <Paper className={classes.formRegister}>
                                <Typography variant="h6" gutterBottom>
-                                  Pendaftaran Berhasil
+                                  Selamat anda telah berhasil terdaftar
                                </Typography>
                                <Typography variant="body1" gutterBottom>
-                                  Kami telah mengirim sebuah surat elektronik yang berisi tautan untuk konfirmasi pendaftaran ke email anda, harap menunggu 5 sampai 10 menit untuk surat sampai
+                                  Mohon cek email Anda untuk konfirmasi pendaftaran
+                                  {/*Kami telah mengirim sebuah email yang berisi tautan untuk konfirmasi pendaftaran ke email anda, harap menunggu 5 sampai 10 menit untuk surat sampai*/}
                                  {/*We have sent an email with a confirmation link to your email address. Please allow 5-10 minutes for this message to arrive.*/}
                                </Typography>

--- a/src/common/pages/RegisterNew/index.js
+++ b/src/common/pages/RegisterNew/index.js
@@ -45,6 +45,9 @@ class RegisterPage extends React.Component {
        errors: {
          email_exists: '',
          phone_exists: '',
+          referal_not_found: '',
+          no_ktp: '',
+          no_rekening: ''
        },

        // form
@@ -54,6 +57,7 @@ class RegisterPage extends React.Component {
        password: "",
        full_name: "",
        no_ktp: '',
+        no_rekening: '',
        upload_ktp: '',
        upload_photo: '',
        address: '',
@@ -115,6 +119,17 @@ class RegisterPage extends React.Component {
    };

    handleChange = name => event => {
+        if((name === 'no_ktp' || name === 'no_rekening') && (this.state.errors.no_ktp !== '' && this.state.errors.no_rekening !== '')){
+            this.setState({
+                errors:{
+                    ...this.state.errors,
+                    no_ktp: '',
+                    no_rekening: ''
+                }
+            });
+        }
+
+      {console.log("namee", name)}
        this.setState({
            [name]: event.target.value,
        });
@@ -163,6 +178,16 @@ class RegisterPage extends React.Component {
         })
        }

+        if(this.state.no_ktp === '' && this.state.no_rekening === ''){
+            return this.setState({
+                errors: {
+                  ...this.state.errors,
+                  no_ktp: 'Salah satu harus diisi',
+                  no_rekening: 'Salah satu harus diisi'
+                }
+              })
+        }
+
        this.setState({ isLoading: true });

        let data = {
@@ -180,39 +205,50 @@ class RegisterPage extends React.Component {
            // subdistrict_id: this.state.subdistrict,
            // zip_code: this.state.zip_code,
            referal: this.state.query.referal,
-            additional_data: {}
+            additional_data: {
+                no_rekening : this.state.no_rekening
+            }
        };
-        this.authStore.register(data).then(res => {
-            //message.success("Please check your email to confirm your account");this.props.history.push(LINKS.LOGIN);
-            setTimeout(() => {
-                this.setState({ isLoading: false });
-              this.props.history.push(LINKS.REGISTER_COMPLETED);
-            //     this.props.history.push(LINKS.LOGIN);
-            }, 250);
-        }).catch(err => {
-            this.setState({ isLoading: false });
-
-            if (err.type === 'BodyValidationError') {
-              message.error(err.detail[0].message);
-            } else {
-              if (err.message.toLowerCase().includes('email')) {
-                this.setState({
-                  errors: {
-                    ...this.state.errors,
-                    email_exists: 'Email sudah terdaftar'
-                  }
-                })
-              } else if (err.message.toLowerCase().includes('phone number')) {
-                this.setState({
-                  errors: {
-                    ...this.state.errors,
-                    phone_exists: 'Nomer handphone sudah terdaftar'
-                  }
-                })
-              }
+        this.props.history.push(LINKS.VOUCHERS);
+        // this.authStore.register(data).then(res => {
+        //     //message.success("Please check your email to confirm your account");this.props.history.push(LINKS.LOGIN);
+        //     setTimeout(() => {
+        //         this.setState({ isLoading: false });
+        //       this.props.history.push(LINKS.REGISTER_COMPLETED);
+        //     //     this.props.history.push(LINKS.LOGIN);
+        //     }, 250);
+        // }).catch(err => {
+        //     this.setState({ isLoading: false });
+        //
+        //     if (err.type === 'BodyValidationError') {
+        //       message.error(err.detail[0].message);
+        //     } else {
+        //       if (err.message.toLowerCase().includes('email')) {
+        //         this.setState({
+        //           errors: {
+        //             ...this.state.errors,
+        //             email_exists: 'Email sudah terdaftar'
+        //           }
+        //         })
+        //       } else if (err.message.toLowerCase().includes('phone number')) {
+        //         this.setState({
+        //           errors: {
+        //             ...this.state.errors,
+        //             phone_exists: 'Nomer handphone sudah terdaftar'
+        //           }
+        //         })
+        //       } else if (err.message.toLowerCase().includes('referal')) {
+        //         this.setState({
+        //           errors: {
+        //             ...this.state.errors,
+        //             referal_not_found: 'Kode Referal Salah - Silahkan Hubungi Petugas BTN'
+        //           }
+        //         })
+        //       } else {
        //         message.error(err.message);
-            }
-        });
+        //       }
+        //     }
+        // });
    };

    handleChangeUploadKtp = (info) => {
@@ -324,7 +360,7 @@ class RegisterPage extends React.Component {

                <Grid container spacing={0} className={classes.gridContainer}>
                    <Grid item cols={12} className={classes.logoContainer}>
-                        <img src={require('../../../../assets/images/logo_new.png')} className={classes.logo} />
+                        <img src={require('../../../../assets/images/kb_bukopin.jpeg')} className={classes.logo} />
                    </Grid>
                    <Grid item xs={12} sm={12} md={10} lg={10} className={classes.registerContainer} style={{
                      alignSelf: 'center'
@@ -334,10 +370,10 @@ class RegisterPage extends React.Component {
                                <Grid item xs={5}>
                                    <img src={require('../../../../assets/images/register_image_2.png')} width={"80%"} />
                                    <Typography style={{ color: '#FFF' }} variant={"h6"}>
-                                        Selamat Datang di BTN Shop!
+                                        Selamat Datang di Bukopin Shop!
                                    </Typography>
                                    <Typography style={{ color: '#FFF' }} variant={"subtitle2"}>
-                                        Dapatkan promo dan keuntungan lebih dari BTN!
+                                        Dapatkan promo dan keuntungan lebih dari Bukopin!
                                    </Typography>
                                </Grid>
                            </Hidden>
@@ -354,7 +390,7 @@ class RegisterPage extends React.Component {
                                        flexDirection: 'row'
                                    }}>
                                        <Grid container spacing={16}>
-                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 7, paddingRight: 5 }}>
                                                <TextField
                                                    id="name"
                                                    label="Nama Lengkap"
@@ -366,7 +402,7 @@ class RegisterPage extends React.Component {
                                                    fullWidth
                                                />
                                            </Grid>
-                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 7 }}>
                                                <TextField
                                                    id="phone"
                                                    label="Nomor Handphone"
@@ -381,7 +417,7 @@ class RegisterPage extends React.Component {
                                                />
                                            </Grid>

-                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 7, paddingRight: 5 }}>
                                                <TextField
                                                    id="email"
                                                    label="Email"
@@ -394,7 +430,7 @@ class RegisterPage extends React.Component {
                                                    helperText={this.state.errors.email_exists}
                                                />
                                            </Grid>
-                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 5 }}>
+                                            <Grid item xs={12} sm={12} md={6} style={{ paddingLeft: 5, paddingRight: 7 }}>
                                                <TextField
                                                    id="ktp"
                                                    label="Nomor KTP"
@@ -404,6 +440,8 @@ class RegisterPage extends React.Component {
                                                    type={"number"}
                                                    variant="outlined"
                                                    fullWidth
+                                                    error={!!this.state.errors.no_ktp}
+                                                    helperText={this.state.errors.no_ktp}
                                                />
                                            </Grid>

@@ -560,6 +598,19 @@ class RegisterPage extends React.Component {
                                            {/*</Grid>*/}
                                        </Grid>
                                    </div>
+                                    <Grid item xs={12} sm={12} md={12}>
+                                      <TextField
+                                        label="Nomor Rekening"
+                                        value={this.state.no_rekening}
+                                        onChange={this.handleChange('no_rekening')}
+                                        margin="normal"
+                                        type={"number"}
+                                        fullWidth
+                                        error={!!this.state.errors.no_rekening}
+                                        helperText={this.state.errors.no_rekening}
+                                        variant="outlined"
+                                      />
+                                    </Grid>

                                    <Grid item xs={12} sm={12} md={12}>
                                      <TextField
@@ -576,6 +627,8 @@ class RegisterPage extends React.Component {
                                        margin="normal"
                                        type={"password"}
                                        fullWidth
+                                        error={!!this.state.errors.referal_not_found}
+                                        helperText={this.state.errors.referal_not_found || 'Hubungi petugas untuk mendapatkan hadiah'}
                                        variant="outlined"
                                      />
                                    </Grid>
@@ -583,11 +636,13 @@ class RegisterPage extends React.Component {
                                    <div style={{ padding: 5, marginTop: 20 }}>
                                        <Button
                                          fullWidth
-                                          variant="contained" style={{ backgroundColor: '#ffeb3b',marginBottom: 16 }} onClick={this.register}>
+                                          variant="contained" style={{ backgroundColor: '#FAAF03' }} onClick={this.register}>
                                            {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Daftar"}
                                        </Button>

-                                      <Typography variant="subtitle2" gutterBottom>
+                                      <Typography variant="subtitle2" gutterBottom style={{
+                                        marginTop: 16
+                                      }}>
                                      Belum menerima email? <Link to={"/resend_email"} replace>Kirim ulang email</Link>
                                      </Typography>

--- a/src/common/pages/RegisterNew/styles.js
+++ b/src/common/pages/RegisterNew/styles.js
@@ -4,7 +4,7 @@ export const styles = theme => ({
        flex :1,
        flexGrow : 1,
        height : "100vh",
-        backgroundColor:'#024f8e',
+        backgroundColor:'#FEFAF0',
        marginTop: '-56px',
    },
    gridContainer : {
@@ -31,7 +31,7 @@ export const styles = theme => ({
    },
    logoContainer : {
        textAlign : 'center',
-        background : yellow['500'],
+        background : '#FAAF03',
        padding : 20
    },
 });
--- a/src/common/pages/Root/index.js
+++ b/src/common/pages/Root/index.js
@@ -3,8 +3,22 @@ import {observer, inject} from 'mobx-react';
 import Routes, { LINKS } from "../../routes";
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
+import { MuiThemeProvider as MuiThemeProviderNew, createMuiTheme } from '@material-ui/core/styles';
 import typography from 'material-ui/styles/typography';

+const theme = createMuiTheme({
+  typography: {
+    // Use the system font instead of the default Roboto font.
+    fontFamily: [
+      'Montserrat',
+      'Roboto',
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"'
+    ].join(','),
+  }
+});
+
@inject('appstate')
@observer
 export default class ComponentName extends React.Component {
@@ -60,7 +74,9 @@ export default class ComponentName extends React.Component {
    return (
      <div>
        <MuiThemeProvider muiTheme={muiTheme}>
+          <MuiThemeProviderNew theme={theme}>
            <Routes></Routes>
+          </MuiThemeProviderNew>
        </MuiThemeProvider>
      </div>
    )
--- a/src/common/pages/Transaction/ItemList/index.js
+++ b/src/common/pages/Transaction/ItemList/index.js
@@ -40,10 +40,11 @@ export default class ItemList extends React.Component {
              <p className={'transactionDate'}>{moment(data.updated_at).format("dddd, MMMM Do YYYY, HH:mm:ss")}</p>
            </div>
            <div className={'bodyContainer'}>
-              <p className={'nameText'}>{data.item.name + " : " + data.item_sku.name}</p>
+              <p className={'nameText'}>{data.item.name}</p>
              <div className={'childContainer'}>
                <p className={'childTitle'}>Price</p>
-                <p className={'childText'}>{(+data.item_sku.price).toFixed(0)} Points</p>
+                {/*<p className={'childText'}>{(+data.price).toFixed(0)} Points</p>*/}
+                <p className={'childText'}>{data.price} Points</p>
              </div>
              <div className={'childContainer'}>
                <p className={'childTitle'}>Voucher Code</p>
--- a/src/common/pages/Transaction/index.js
+++ b/src/common/pages/Transaction/index.js
@@ -29,41 +29,35 @@ export default class TransactionPage extends React.Component {
        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        deleted_at: null,
+        item: {
          name: faker.commerce.productName(),
+        },
+        item_sku: {
+          name: faker.commerce.productName(),
+        },
+        transaction: {
          status: 'Transaction Success',
-        price: faker.commerce.price(),
+        },
+        price: faker.commerce.price(1000, 1000000, 0, ''),
        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
      },
      {
        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
-        updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
+        updated_at: moment(faker.date.past(5, '2020-01-01T00:00:00.000Z')).format("dddd, MMMM Do YYYY, HH:mm:ss"),
        deleted_at: null,
+        item: {
          name: faker.commerce.productName(),
+        },
+        item_sku: {
+          name: faker.commerce.productName(),
+        },
+        transaction: {
          status: 'Transaction Success',
+        },
        price: faker.commerce.price(),
        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
-      },
-      {
-        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
-        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
-        updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
-        deleted_at: null,
-        name: faker.commerce.productName(),
-        status: 'Transaction Success',
-        price: faker.commerce.price(),
-        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
-      },
-      {
-        transaction_id: `INV/20190101/VII/X/${faker.random.alphaNumeric(6).toUpperCase()}`,
-        created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
-        updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
-        deleted_at: null,
-        name: faker.commerce.productName(),
-        status: 'Transaction Success',
-        price: faker.commerce.price(),
-        voucher_code: `${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()} - ${faker.random.alphaNumeric(5).toUpperCase()}`,
-      },
+      }
    ];

    return(
@@ -91,8 +85,8 @@ export default class TransactionPage extends React.Component {

          <div className={'listContainer'}>
            {
-              (this.purchasedVoucher.data.length > 0) ?
-                this.purchasedVoucher.data.map(item => {
+              (data.length > 0) ?
+                data.map(item => {
                  return <ItemList data={item}/>
                }) :
                (
--- a/src/common/pages/Transaction/style.scss
+++ b/src/common/pages/Transaction/style.scss
@@ -6,7 +6,7 @@
  align-items: center;

  .parentContainer{
-    width: 40vw;
+    width: 60vw;

    .barContainer{
      display: flex;
--- a/src/common/pages/Vouchers/Checkout/index.js
+++ b/src/common/pages/Vouchers/Checkout/index.js
@@ -46,7 +46,7 @@ export class CheckoutVouchers extends React.Component {

  render() {
    const {classes} = this.props;
-    const logoUrl = (this.props.vouchersStore.dataItems.images.logo) ? get(this.vouchersStore.dataItems, 'images.logo', '') : 'http://lorempixel.com/400/200';
+    const logoUrl = (this.props.vouchersStore.dataItems.images.main) ? get(this.vouchersStore.dataItems, 'images.main', '') : 'http://lorempixel.com/400/200';

    let image = logoUrl;

--- a/src/common/pages/Vouchers/Checkout/style.scss
+++ b/src/common/pages/Vouchers/Checkout/style.scss
@@ -1,7 +1,7 @@
@media(min-width: 1000px){
  .imageCard{
    width: 20vw;
-    height: 25vh;
+    height: 35vh;
  }

  .upper-card{
--- a/src/common/pages/Vouchers/ItemCard/index.js
+++ b/src/common/pages/Vouchers/ItemCard/index.js
@@ -29,12 +29,16 @@ export class ItemCard extends React.Component {
  render() {
    const {data = {}} = this.props;

-    let image = get(data, 'images.logo', '');
+    // console.log({data})
+
+    let image = get(data, 'images.main', '');

    if (!image.includes('http')) {
      image = this.http.appendImagePath(image);
    }

+    console.log({image})
+
    return (
      <Card className={'itemCard'}>
        <img className={'imageCard'} src={image}/>
--- a/src/common/pages/Vouchers/Modal/index.js
+++ b/src/common/pages/Vouchers/Modal/index.js
@@ -40,7 +40,7 @@ export default class ModalVouchersComponent extends React.Component {
  render() {
    const {item} = this.props.appstate;
    const {data = {}, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Modal'} = this.props;
-    let image = get(data, 'images.logo', '');
+    let image = get(data, 'images.main', '');

    if (!image.includes('http')) {
      image = this.http.appendImagePath(image);
@@ -102,38 +102,45 @@ export default class ModalVouchersComponent extends React.Component {
                placeholder="Please Select your Option"
                optionFilterProp="children"
                onChange={(value) => {
+                  console.log({value})
                  this.setState({selectedOption: value});
                  this.setState({hidden: 'none'});
                  // console.log('onChange',value);
-                  const points = item.selectedData.sku.filter(item => item.id == value);
+                  // const points = item.selectedData.sku.filter(item => item.id == value);
                  this.setState({
-                    skuName :points[0].name,
-                    skuPrice : points[0].price,
-                    buttonDisbaled:false
+                    skuName : get(data, 'name', '').name,
+                    skuPrice : get(data, 'regular_price', '0.0'),
+                    buttonDisbaled: false
                  })
-                }
-                }
+                }}
                onDropdownVisibleChange={(value) => {
                  this.setState({hidden: 'inline'})
                }}
              >
-                {(item.selectedData.sku || []).map((item, index) => {
+                {(item.selectedData.sku || [{
+                  vouchers: [{count: +get(data, 'stock', '0.0')}],
+                  price: get(data, 'regular_price', '0.0'),
+                  id: get(data, 'id', ''),
+                  name: get(data, 'name', '')
+                }]).map((selectedItem, index) => {
                  // const {vouchers:[{count}]} = item;

+                  console.log({item: selectedItem})
+
                  let count = 1;

                  if (data.source === 'internal') {
-                    count = get(item, 'vouchers[0].count', 0) || 0;
+                    count = get(selectedItem, 'vouchers[0].count', 0) || 0;
                  }
                  console.log(count);
                  const outOfStock = !(+count > 0);

                  return (
-                    <Option disabled={outOfStock} value={item.id}>
+                    <Option disabled={outOfStock} value={selectedItem.id}>
                      <div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
-                        <span>{item.name} {outOfStock ? " - Out of Stock" : ""}</span>
+                        <span>{selectedItem.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}/>
+                        Rp. <NumberFormat value={(+selectedItem.price).toFixed(0)} displayType={'text'} thousandSeparator={true}/>
                      </span>
                      </div>
                    </Option>
@@ -144,7 +151,9 @@ export default class ModalVouchersComponent extends React.Component {
              <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>
+                  <p className={'costValueModal'}>
+                    <NumberFormat value={(+this.state.skuPrice).toFixed(0)} displayType={'text'} thousandSeparator={true}/>
+                  </p>
                </div>
                <div className={'costRightPaneModal'}>
                  <Route render={({ history}) => (
@@ -205,38 +214,45 @@ export default class ModalVouchersComponent extends React.Component {
                placeholder="Please Select your Option"
                optionFilterProp="children"
                onChange={(value) => {
+                  console.log({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
+                    skuName : get(data, 'name', '').name,
+                    skuPrice : get(data, 'regular_price', '0.0'),
+                    buttonDisbaled: false
                  })
-                }
-                }
+                }}
                onDropdownVisibleChange={(value) => {
                  this.setState({hidden: 'inline'})
                }}
              >
-                {(item.selectedData.sku || []).map((item, index) => {
+                {(item.selectedData.sku || [{
+                  vouchers: [{count: +get(data, 'stock', '0.0')}],
+                  price: get(data, 'regular_price', '0.0'),
+                  id: get(data, 'id', ''),
+                  name: get(data, 'name', '')
+                }]).map((selectedItem, index) => {
                  // const {vouchers:[{count}]} = item;

+                  console.log({item: selectedItem})
+
                  let count = 1;

                  if (data.source === 'internal') {
-                    count = get(item, 'vouchers[0].count', 0) || 0;
+                    count = get(selectedItem, 'vouchers[0].count', 0) || 0;
                  }
                  console.log(count);
                  const outOfStock = !(+count > 0);

                  return (
-                    <Option disabled={outOfStock} value={item.id}>
+                    <Option disabled={outOfStock} value={selectedItem.id}>
                      <div style={{display:'flex',justifyContent:'space-between', width:'100%'}}>
-                        <span>{item.name} {outOfStock ? " - Out of Stock" : ""}</span>
+                        <span>{selectedItem.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}/>
+                        Rp. <NumberFormat value={(+selectedItem.price).toFixed(0)} displayType={'text'} thousandSeparator={true}/>
                      </span>
                      </div>
                    </Option>
--- a/src/common/pages/Vouchers/Payment/index.js
+++ b/src/common/pages/Vouchers/Payment/index.js
@@ -59,7 +59,7 @@ export default class PaymentVouchers extends React.Component {
    //   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';
+    const logoUrl = (this.props.vouchersStore.dataItems.images.main) ? get(this.vouchersStore.dataItems, 'images.main', '') : 'http://lorempixel.com/400/200';

    let image = logoUrl;

@@ -110,7 +110,7 @@ export default class PaymentVouchers extends React.Component {
                {this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}
              </h3>
              <h3 className={'item-points'}>
-                BTN Points Payment
+                KB Bukopin Payment
              </h3>
            </div>
            <img className={'image-logo'} src={image} />
@@ -207,7 +207,15 @@ export default class PaymentVouchers extends React.Component {
                    </Card>
                </div>
                <div className="row">
-                <Button type="primary" block onClick={() => {
+                <Button
+                  type="primary"
+                  block
+                  onClick={() => {
+                    this.globalUI.hideDialogLoading();
+                    this.props.history.push(LINKS.TRANSACTION)
+                    openNotificationWithIcon('success')
+
+                    return;
                    this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
                      .then(res => {
                        this.globalUI.hideDialogLoading();
@@ -218,7 +226,10 @@ export default class PaymentVouchers extends React.Component {
                        this.globalUI.openSnackbar(err.message);
                        console.error(err, 'ini errornya');
                      });
-                    }}>Pakai Points</Button>
+                  }}
+                >
+                  Pakai Points
+                </Button>
                </div>
            </div>
            <div className="col s0 m2 l2" />
--- a/src/common/pages/Vouchers/Payment/style.scss
+++ b/src/common/pages/Vouchers/Payment/style.scss
@@ -9,7 +9,7 @@
@media(min-width: 1000px){
  .image-logo{
    width: 10vw;
-    height: 10vh;
+    height: 35vh;
  }

  .item-container{
--- a/src/common/pages/Vouchers/Stepper/index.js
+++ b/src/common/pages/Vouchers/Stepper/index.js
@@ -67,6 +67,23 @@ export class VoucherStepper extends React.Component {
        content: 'Sistem akan langsung memotong point anda ketika anda menekan tombol konfirmasi dibawah.',
        onOk: () => {
          this.globalUI.showDialogLoading();
+          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,
+          });
+
+          return;
          this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
            .then(res => {
              const openNotificationWithIcon = (type) => {
--- a/src/common/pages/Vouchers/style.scss
+++ b/src/common/pages/Vouchers/style.scss
@@ -8,12 +8,14 @@
  }

  .itemCard{
-    background-color: #eee;
+    background-color: white;
    border: #ccc 1px solid;
    width: 100%;
+    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
+    text-align: center;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
@@ -21,7 +23,7 @@

  .imageCard{
    width: 120px;
-    max-height: 60px;
+    max-height: 100px;
  }

  .titleCard{
--- a/src/common/pages/Wallet/Modal/index.js
+++ b/src/common/pages/Wallet/Modal/index.js
@@ -19,13 +19,66 @@ export default class ModalTopupComponent extends React.Component {
      inputCode2: '',
      inputCode3: '',
      inputCode4: '',
-      confirmLoading: false
+      confirmLoading: false,
+      onOk: {}
    };
    this.defaultState = Object.assign({}, this.state);
  }

  componentDidMount() {}

+  redeemCode (code) {
+
+    const codeList = [
+      {
+        code: 'MLXNAPNU18nd0871',
+        amount: 10000
+      },
+      {
+        code: 'ABAKO1239KLKHASD',
+        amount: 20000
+      },
+
+      {
+        code: 'W54VCZJN23FGSDAG',
+        amount: 50000
+      },
+      {
+        code: '123456789ABCEFGH',
+        amount: 100000
+      }
+    ]
+
+    let rightCode = {};
+
+    codeList.map((cl) => {
+      if (cl.code === code){
+        rightCode = cl
+      }}
+    )
+
+    this.setState({
+      inputCode1: '',
+      inputCode2: '',
+      inputCode3: '',
+      inputCode4: ''
+    });
+
+    if (rightCode.code){
+      message.success("Voucher redeem success");
+      this.props.appstate.wallet.data.wallet = this.props.appstate.wallet.data.wallet + rightCode.amount
+      this.setState({
+        confirmLoading: false
+      });
+      this.state.onOk()
+    }else{
+      this.setState({
+        confirmLoading: false
+      });
+      message.warning("Voucher redeem failed")
+    }
+}
+
  render() {
    const {data, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Redeem your code'} = this.props;

@@ -35,25 +88,29 @@ export default class ModalTopupComponent extends React.Component {
        visible={isVisible}
        onOk={async () => {
          this.setState({
-            confirmLoading: true
+            confirmLoading: true,
+            onOk: onOk()
          });
          let voucherCode = this.state.inputCode1 + this.state.inputCode2 + this.state.inputCode3 + this.state.inputCode4;
+          console.log("voucherCode", voucherCode)

-          try {
-            await this.props.appstate.wallet.redeemVoucherCode(voucherCode);
-            this.props.onOk();
-            message.info("Voucher redeem success");
-          } catch (e) {
-            message.error(e.message);
-          } finally {
-            this.setState({
-              inputCode1: '',
-              inputCode2: '',
-              inputCode3: '',
-              inputCode4: '',
-              confirmLoading: false
-            });
-          }
+          this.redeemCode(voucherCode)
+
+          // try {
+          //   await this.props.appstate.wallet.redeemVoucherCode(voucherCode);
+          //   this.props.onOk();
+          //   message.info("Voucher redeem success");
+          // } catch (e) {
+          //   message.error(e.message);
+          // } finally {
+          //   this.setState({
+          //     inputCode1: '',
+          //     inputCode2: '',
+          //     inputCode3: '',
+          //     inputCode4: '',
+          //     confirmLoading: false
+          //   });
+          // }

        }}
        onCancel={() => {
--- a/src/common/routes.js
+++ b/src/common/routes.js
@@ -178,7 +178,7 @@ export default class Routes extends React.Component {
          <Route exact path={LINKS.INVITE_CONFIRMATION_LOGIN} component={InviteConfirmationLoginComponent}/>
          <Route exact path={LINKS.ACCEPT_INVITE} component={AcceptInvite}/>
          <Route path={LINKS.CHANGE_PASSWORD} component={ChangePassword}/>
-          <PrivateRoute path={LINKS.APP_CONTAINER} component={AppContainer}/>
+          <Route path={LINKS.APP_CONTAINER} component={AppContainer}/>
        </Switch>
      </Router>
    );
--- a/src/common/stores/item.js
+++ b/src/common/stores/item.js
@@ -5,7 +5,7 @@ export class ItemStore extends BaseStore {
  @observable listImages = [];
  constructor(context) {
    super(context);
-    this.url = "items";
+    this.url = "/categories/11936220-31f7-4f5e-8555-9110dbec4a5d/items";
  }

  @action
--- a/src/common/stores/vouchers.js
+++ b/src/common/stores/vouchers.js
@@ -26,7 +26,7 @@ export default class Vouchers {
        getList(){
            console.log('res');
            this.isLoading = true;
-            return this.http.get("items")
+            return this.http.get("categories/11936220-31f7-4f5e-8555-9110dbec4a5d/items")
            .then(res => {
              this.list = res.data;
              this.isLoading = false;
--- a/src/common/styles/style.scss
+++ b/src/common/styles/style.scss
@@ -2,14 +2,15 @@
@import "./helper.scss";
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600');
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import "./animated.scss";

 body {
  -webkit-font-smoothing: antialiased !important;
-  background-color: #f1f5f9;
+  background-color: #FEFAF0;
  text-transform: none;
  padding-top: 56px;
-  font-family: "Avenir Next W01", "Proxima Nova W01", "Rubik", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-family: 'Montserrat', "Avenir Next W01", "Proxima Nova W01", "Rubik", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.5;
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -57,7 +57,7 @@ module.exports = {
        test: /\.sass?$/,
        use: 'happypack/loader?id=styles'
      }, {
-        test: /\.(jpg|png)$/,
+        test: /\.(jpg|jpeg|png|gif)$/,
        loaders: [
          'url-loader?limit=10000&publicPath=static/' // Any png-image or woff-font below or equal to 10K will be converted to inline base64 instead
        ]
--- a/webpack.config.prod.js
+++ b/webpack.config.prod.js
@@ -47,7 +47,7 @@ module.exports = {
        test: /\.sass?$/,
        use: 'happypack/loader?id=styles'
      }, {
-        test: /\.(jpg|png)$/,
+        test: /\.(jpg|jpeg|png|gif)$/,
        loaders: [
          'url-loader?limit=10000&publicPath=dist/' // Any png-image or woff-font below or equal to 10K will be converted to inline base64 instead
        ]
Author	SHA1	Message	Date
Marselino Widis	0abfb5245a	style: Adjust item card height	2023-01-18 15:55:08 +07:00
Marselino Widis	5467d91085	feat: Items based on category voucher	2023-01-18 15:40:08 +07:00
Marselino Widis	1206c4f013	fix: Adjust redeem voucher message	2023-01-18 14:17:01 +07:00
Marselino Widis	ffaae28e64	feat: - Redeem Code	2023-01-18 13:36:31 +07:00
Marselino Widis	9b915d22c6	feat: - Revamp Design - Adjust anomaly in design	2023-01-18 12:29:29 +07:00
Marselino Widis	d46407cc68	Fix: Error on run	2023-01-18 11:34:11 +07:00
Marselino Widis	26e6047805	Merge remote-tracking branch 'origin/bukopin' into bukopin	2023-01-18 03:12:46 +07:00
Marselino Widis	470a70cb1f	Adjust Design	2023-01-18 03:12:40 +07:00
faizal	ba8629005e	add manifest k8s	2023-01-17 23:21:08 +07:00
Marselino Widis	ba84c86493	Test push	2023-01-17 23:15:47 +07:00
ahmadzuhdi	9169538996	feat: add more to .gitignore	2023-01-17 21:29:27 +07:00
ahmadzuhdi	9f0c68b2ce	feat: initial commit for mockup bukopin	2023-01-17 21:27:45 +07:00
Ahmad Zuhdi	0ebe039eda	Update README.md	2019-10-28 06:45:12 +00:00
ahmad zuhdi	d72b4c3b5c	update: how to build with parcel	2019-10-25 13:45:09 +07:00
enggar_ganteng	0015c0b654	update : register page	2019-02-25 14:59:46 +07:00
enggar_ganteng	50a12fe2fd	update : register add new field(no_rekening)	2019-02-25 14:56:52 +07:00
ahmadzuhdi	0c0e321b05	feat: referal checker	2019-02-02 12:05:12 +07:00
ahmadzuhdi	4bbeb66ea6	update: otp to redirect	2019-02-02 02:57:47 +07:00
ahmadzuhdi	97acead5f1	update: wording	2019-02-01 23:51:37 +07:00
ahmadzuhdi	9b18340242	update: wording confirmation completed	2019-02-01 23:25:24 +07:00
ahmadzuhdi	87c81c2416	update: wording register complete	2019-02-01 21:58:17 +07:00
Hasta Ragil Saputra	b5d734c959	feat: change font size	2019-02-01 21:46:24 +07:00