feat:

- Revamp Design
- Adjust anomaly in design

Dockerfile

@@ -1,7 +1,9 @@
 FROM node:8-alpine
+RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache git
 WORKDIR /app
-COPY package.json /app
-RUN yarn
+COPY package.json package-lock.json /app/
+RUN npm install
 COPY . /app
 CMD npm run watch
-EXPOSE 8080
+EXPOSE 7700

k8s/staging/deployment.yaml

@@ -17,7 +17,7 @@ spec:
         - name: bukopin-redemption-client-react
           image: registry-harbor.app.bangun-kreatif.com/bukopin/bukopin-redemption-client-react:<VERSION>
           ports:
-            - containerPort: 8080
+            - containerPort: 7700
       imagePullSecrets:
         - name: regcred
 

k8s/staging/ingress.yaml

@@ -18,7 +18,7 @@ spec:
               service:
                 name: bukopin-redemption-client-react
                 port:
-                  number: 8080
+                  number: 7700
   tls:
     - hosts:
         - "bukopin-fe.k3s.bangun-kreatif.com"

k8s/staging/service.yaml

@@ -7,7 +7,7 @@ metadata:
     run: bukopin-redemption-client-react
 spec:
   ports:
-    - port: 8080
+    - port: 7700
       protocol: TCP
   selector:
     app:  bukopin-redemption-client-react

src/common/pages/App/index.js

@@ -560,7 +560,7 @@ class App extends React.Component {
         <WithdrawDialog />
 
         <div className={classes.root}>
-          <AppBar style={{ zIndex: 1 }} position="fixed">
+          <AppBar position="fixed">
             <Toolbar className={classes.toolbar}>
               <div className={classes.sectionMobile}>
                 <IconButton className={classes.menuButton} color="action" aria-label="Open drawer" onClick={this.toggleDrawerNew(true)}>

src/common/pages/Dashboard/index.js

@@ -199,7 +199,7 @@ class DashboardComponent extends React.Component {
                       Voucher
                     </Typography>
                     <Typography component="p">
-                      <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '} />
+                      <NumberFormat value={(0).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '} />
                     </Typography>
                   </MuiCardContent>
                   <MuiCardActions>
@@ -330,8 +330,7 @@ class DashboardComponent extends React.Component {
               style={{ marginTop: 15 }}>
               {(this.vouchersStore.list.length > 0) ?
                 this.vouchersStore.list.map((item, index) => {
-                  console.log("itemm", item)
-                  let image = get(item, 'images.main', '');
+                  let image = get(item, 'images.logo', '');
 
                   if (!image.includes('http')) {
                     image = this.http.appendImagePath(image);

src/common/pages/Vouchers/style.scss

@@ -11,11 +11,9 @@
     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;

src/common/pages/Wallet/Modal/index.js

@@ -19,66 +19,13 @@ export default class ModalTopupComponent extends React.Component {
       inputCode2: '',
       inputCode3: '',
       inputCode4: '',
-      confirmLoading: false,
-      onOk: {}
+      confirmLoading: false
     };
     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;
 
@@ -88,29 +35,25 @@ export default class ModalTopupComponent extends React.Component {
         visible={isVisible}
         onOk={async () => {
           this.setState({
-            confirmLoading: true,
-            onOk: onOk()
+            confirmLoading: true
           });
           let voucherCode = this.state.inputCode1 + this.state.inputCode2 + this.state.inputCode3 + this.state.inputCode4;
-          console.log("voucherCode", voucherCode)
 
-          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
-          //   });
-          // }
+          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={() => {

src/common/stores/item.js

@@ -5,7 +5,7 @@ export class ItemStore extends BaseStore {
   @observable listImages = [];
   constructor(context) {
     super(context);
-    this.url = "/categories/11936220-31f7-4f5e-8555-9110dbec4a5d/items";
+    this.url = "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("categories/11936220-31f7-4f5e-8555-9110dbec4a5d/items")
+            return this.http.get("items")
             .then(res => {
               this.list = res.data;
               this.isLoading = false;