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
23 changed files with 156 additions and 93 deletions
--- 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",
@@ -107,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>
-  <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" />
+    <title>KB Bukopin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <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>
-  <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" />
+    <title>KB Bukopin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <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>
-  <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" />
+    <title>KB Bukopin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <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>
-  <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" />
+    <title>KB Bukopin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link rel="icon" type="image/png" href="/assets/images/kb_bukopin.jpeg" sizes="96x96" />
    <style>
        body {
            visibility: hidden;
--- a/src/common/pages/App/index.js
+++ b/src/common/pages/App/index.js
@@ -560,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)}>
@@ -573,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)"
@@ -94,4 +94,4 @@ export const styles = theme => ({
      fullList: {
        width: 'auto',
      },
-});
+});
--- 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/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
--- a/src/common/pages/RegisterNew/index.js
+++ b/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 => {
-            //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);
-              }
-            }
-        });
+        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) => {
@@ -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>

--- 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 : {
--- a/src/common/pages/Transaction/ItemList/index.js
+++ b/src/common/pages/Transaction/ItemList/index.js
@@ -43,7 +43,8 @@ export default class ItemList extends React.Component {
              <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
@@ -38,13 +38,13 @@ export default class TransactionPage extends React.Component {
        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(),
--- 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/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/Payment/index.js
+++ b/src/common/pages/Vouchers/Payment/index.js
@@ -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} />
--- 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/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/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
@@ -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;
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