Update README.md

README.md

@@ -1,10 +1,15 @@
-# mobx-ssr-example
+#BTN Registration
-Server-side rendering with mobx and react-router
+
+####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
+npm run build2:parcel:prod
-node src/index.js
 ```
-Runs an express server on port 3000
+the compiled file will be available in dist folder

package-lock.json

@@ -6327,10 +6327,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 +6997,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7019,11 +7016,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 +7035,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 +7149,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7157,6 +7160,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7169,17 +7173,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 +7203,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -7268,7 +7276,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7278,6 +7287,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7353,7 +7363,8 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7383,6 +7394,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 +7412,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7438,11 +7451,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },
@@ -14769,8 +14784,11 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/react-gif/-/react-gif-0.1.0.tgz",
       "integrity": "sha1-/A21vUnTHdRRnIVRAp+zXTtk04E=",
-      "requires": {
+      "dependencies": {
-        "exploder": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
+        "exploder": {
+          "version": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0",
+          "from": "git://github.com/cezary/exploder.git#721e1a2f777ff5dafe853981ca21b8874aae1fb0"
+        }
       }
     },
     "react-google-charts": {

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>
 

src/common/pages/RegisterCompleted/index.js

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

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,16 @@ 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: ''
+                }
+            });
+        }
+
         this.setState({
             [name]: event.target.value,
         });
@@ -163,6 +177,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,7 +204,9 @@ 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);
@@ -209,8 +235,16 @@ class RegisterPage extends React.Component {
                     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);
               }
-              // message.error(err.message);
             }
         });
     };
@@ -354,7 +388,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 +400,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 +415,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 +428,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 +438,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 +596,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 +625,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 +634,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: '#ffeb3b' }} 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>
 

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}>
-        <Routes></Routes>
+          <MuiThemeProviderNew theme={theme}>
+            <Routes></Routes>
+          </MuiThemeProviderNew>
         </MuiThemeProvider>
       </div>
     )

src/common/styles/style.scss

@@ -2,6 +2,7 @@
 @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 {
@@ -9,7 +10,7 @@ body {
   background-color: #f1f5f9;
   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;