style: Adjust item card height

- Redeem Code

.gitignore

@@ -49,3 +49,6 @@ settings.json
 dist/
 
 public/assets
+public/static
+public/static/**/*.js
+public/static/**/*.js.map

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
+

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

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

k8s/staging/namespace.yaml

@@ -0,0 +1,4 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  name: bukopin-staging

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

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",
@@ -11914,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",

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",

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"/>
+    <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;

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"/>
+    <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;

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"/>
+    <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;

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"/>
+    <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;

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/";
+apiUrl = "https://herbal-backend.k3s.bangun-kreatif.com/v1/";
-imageUrl = "https://giift-api.asacreative.com";
+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';

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,
+  ToolbarGroup,
-  // ToolbarSeparator,
+  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";
+      applicationIcon = "https://www.niaga.asia/wp-content/uploads/2021/02/IMG-20210223-WA0025.jpg";
-      applicationName = "BTN";
+      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,
+                    width: 70,
-                    height: 30
+                    height: 40
                   }}
                   src={applicationIcon} />
               </Link>

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)"
@@ -94,4 +94,4 @@ export const styles = theme => ({
       fullList: {
         width: 'auto',
       },
-});
+});

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")($);
@@ -109,14 +109,14 @@ export default class Form extends React.Component {
   async componentDidMount() {
     console.log(this.props.match.params.id,'ini id params')
     window.scrollTo(0, 0);
-    
+
     this.contentManagerStore.getTags();
     // this.contentManagerStore.getTypes();
     this.contentManagerStore.clearItems();
     if(this.props.match.params.id){
-      this.contentManagerStore.getDetail(this.props.match.params.id).then(res => {  
+      this.contentManagerStore.getDetail(this.props.match.params.id).then(res => {
         console.log(this.contentManagerStore.selected.title,this.contentManagerStore.selected.content,'res detail')
-        
+
         let newArray = this.contentManagerStore.selected.additional_data.items.map(it => it);
         let newTagsArray =this.contentManagerStore.selected.tags.map(it => it);
 
@@ -157,7 +157,7 @@ export default class Form extends React.Component {
     // setTimeout(() => {
     //   $('.fr-wrapper').children[0].style.display = 'none';
     // }, 1000);
-    
+
   }
 
   handleModelChange = (model) => {
@@ -209,14 +209,14 @@ export default class Form extends React.Component {
         .catch(err => {
           this.globalUI.openSnackbar(err.message);
           console.error(err, 'ini errornya');
-          
+
         });
     }
-    
+
   };
 
   deleteData = () => {
-    
+
   };
 
   searchItem = ()=>{
@@ -245,10 +245,10 @@ export default class Form extends React.Component {
         .catch(err => {
           this.globalUI.openSnackbar(err.message);
           console.error(err, 'ini errornya');
-          
+
         });
     }
-    
+
   };
 
   handleBackClose = () => {
@@ -314,7 +314,7 @@ export default class Form extends React.Component {
         console.log("new fileList",newFileList);
         this.setState({fileList : newFileList});
       })
-      
+
 
   }
 
@@ -469,10 +469,10 @@ export default class Form extends React.Component {
           }
         }, () => {
           console.log("value",this.state.formData.additional_data[key]);
-          
+
           console.log("value2",v);
           console.log("key",key);
-          
+
         });
       }
     });
@@ -675,10 +675,10 @@ export default class Form extends React.Component {
                           )}
                         </div>
                       ) : ('')}
-                      
+
                       {this.props.match.params.id ? (<ButtonAntd type={'primary'} style={{width: '100%', marginTop: 25}} onClick={this.handleOpen} icon={'save'}>Save</ButtonAntd>) : (<ButtonAntd type={'primary'} style={{width: '100%', marginTop: 25}} onClick={this.handleOpen} icon={'upload'}>Publish</ButtonAntd>)}
-                      
+
-                      
+
                     </div>
                   </Card>
                 </Affix>

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);

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">

src/common/pages/Otp/style.js

@@ -30,7 +30,7 @@ export const styles = theme => ({
     },
     logoContainer : {
         textAlign : 'center',
-        background : yellow['500'],
+        background : '#FAAF03',
         padding : 20
     }
-});
+});

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

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

src/common/pages/RegisterNew/index.js

@@ -129,6 +129,7 @@ class RegisterPage extends React.Component {
             });
         }
 
+      {console.log("namee", name)}
         this.setState({
             [name]: event.target.value,
         });
@@ -208,45 +209,46 @@ class RegisterPage extends React.Component {
                 no_rekening : this.state.no_rekening
             }
         };
-        this.authStore.register(data).then(res => {
+        this.props.history.push(LINKS.VOUCHERS);
-            //message.success("Please check your email to confirm your account");this.props.history.push(LINKS.LOGIN);
+        // this.authStore.register(data).then(res => {
-            setTimeout(() => {
+        //     //message.success("Please check your email to confirm your account");this.props.history.push(LINKS.LOGIN);
-                this.setState({ isLoading: false });
+        //     setTimeout(() => {
-              this.props.history.push(LINKS.REGISTER_COMPLETED);
+        //         this.setState({ isLoading: false });
-            //     this.props.history.push(LINKS.LOGIN);
+        //       this.props.history.push(LINKS.REGISTER_COMPLETED);
-            }, 250);
+        //     //     this.props.history.push(LINKS.LOGIN);
-        }).catch(err => {
+        //     }, 250);
-            this.setState({ isLoading: false });
+        // }).catch(err => {
-
+        //     this.setState({ isLoading: false });
-            if (err.type === 'BodyValidationError') {
+        //
-              message.error(err.detail[0].message);
+        //     if (err.type === 'BodyValidationError') {
-            } else {
+        //       message.error(err.detail[0].message);
-              if (err.message.toLowerCase().includes('email')) {
+        //     } else {
-                this.setState({
+        //       if (err.message.toLowerCase().includes('email')) {
-                  errors: {
+        //         this.setState({
-                    ...this.state.errors,
+        //           errors: {
-                    email_exists: 'Email sudah terdaftar'
+        //             ...this.state.errors,
-                  }
+        //             email_exists: 'Email sudah terdaftar'
-                })
+        //           }
-              } else if (err.message.toLowerCase().includes('phone number')) {
+        //         })
-                this.setState({
+        //       } else if (err.message.toLowerCase().includes('phone number')) {
-                  errors: {
+        //         this.setState({
-                    ...this.state.errors,
+        //           errors: {
-                    phone_exists: 'Nomer handphone sudah terdaftar'
+        //             ...this.state.errors,
-                  }
+        //             phone_exists: 'Nomer handphone sudah terdaftar'
-                })
+        //           }
-              } else if (err.message.toLowerCase().includes('referal')) {
+        //         })
-                this.setState({
+        //       } else if (err.message.toLowerCase().includes('referal')) {
-                  errors: {
+        //         this.setState({
-                    ...this.state.errors,
+        //           errors: {
-                    referal_not_found: 'Kode Referal Salah - Silahkan Hubungi Petugas BTN'
+        //             ...this.state.errors,
-                  }
+        //             referal_not_found: 'Kode Referal Salah - Silahkan Hubungi Petugas BTN'
-                })
+        //           }
-              } else {
+        //         })
-                message.error(err.message);
+        //       } else {
-              }
+        //         message.error(err.message);
-            }
+        //       }
-        });
+        //     }
+        // });
     };
 
     handleChangeUploadKtp = (info) => {
@@ -358,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'
@@ -368,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>
@@ -634,7 +636,7 @@ class RegisterPage extends React.Component {
                                     <div style={{ padding: 5, marginTop: 20 }}>
                                         <Button
                                           fullWidth
-                                          variant="contained" style={{ backgroundColor: '#ffeb3b' }} onClick={this.register}>
+                                          variant="contained" style={{ backgroundColor: '#FAAF03' }} onClick={this.register}>
                                             {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Daftar"}
                                         </Button>
 

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
     },
 });

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>

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,
-        name: faker.commerce.productName(),
+        item: {
-        status: 'Transaction Success',
+          name: faker.commerce.productName(),
-        price: faker.commerce.price(),
+        },
+        item_sku: {
+          name: faker.commerce.productName(),
+        },
+        transaction: {
+          status: 'Transaction Success',
+        },
+        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,
-        name: faker.commerce.productName(),
+        item: {
-        status: 'Transaction Success',
+          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) ?
+              (data.length > 0) ?
-                this.purchasedVoucher.data.map(item => {
+                data.map(item => {
                   return <ItemList data={item}/>
                 }) :
                 (

src/common/pages/Transaction/style.scss

@@ -6,7 +6,7 @@
   align-items: center;
 
   .parentContainer{
-    width: 40vw;
+    width: 60vw;
 
     .barContainer{
       display: flex;

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;
 

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

@@ -1,7 +1,7 @@
 @media(min-width: 1000px){
   .imageCard{
     width: 20vw;
-    height: 25vh;
+    height: 35vh;
   }
 
   .upper-card{

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}/>

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,
+                    skuName : get(data, 'name', '').name,
-                    skuPrice : points[0].price,
+                    skuPrice : get(data, 'regular_price', '0.0'),
-                    buttonDisbaled:false
+                    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,
+                    skuName : get(data, 'name', '').name,
-                    skuPrice : points[0].price,
+                    skuPrice : get(data, 'regular_price', '0.0'),
-                    buttonDisbaled:false
+                    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>

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,18 +207,29 @@ 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 => {
+                      .then(res => {
-                      this.globalUI.hideDialogLoading();
+                        this.globalUI.hideDialogLoading();
-                      this.props.history.push(LINKS.TRANSACTION)
+                        this.props.history.push(LINKS.TRANSACTION)
                         openNotificationWithIcon('success')
-                    })
+                      })
-                    .catch(err => {
+                      .catch(err => {
-                      this.globalUI.openSnackbar(err.message);
+                        this.globalUI.openSnackbar(err.message);
-                      console.error(err, 'ini errornya');
+                        console.error(err, 'ini errornya');
-                    });
+                      });
-                    }}>Pakai Points</Button>
+                  }}
+                >
+                  Pakai Points
+                </Button>
                 </div>
             </div>
             <div className="col s0 m2 l2" />

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{

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) => {

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{

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

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>
     );

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

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;

src/common/styles/style.scss

@@ -7,7 +7,7 @@
 
 body {
   -webkit-font-smoothing: antialiased !important;
-  background-color: #f1f5f9;
+  background-color: #FEFAF0;
   text-transform: none;
   padding-top: 56px;
   font-family: 'Montserrat', "Avenir Next W01", "Proxima Nova W01", "Rubik", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

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
         ]

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
         ]