feat: initial commit for mockup bukopin

.gitignore

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

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

@@ -90,7 +90,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",

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';
@@ -373,8 +373,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) => {

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")($);

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/RegisterNew/index.js

@@ -358,7 +358,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 +368,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>

src/common/pages/RegisterNew/styles.js

@@ -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,7 +40,7 @@ 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>

src/common/pages/Transaction/index.js

@@ -29,8 +29,15 @@ export default class TransactionPage extends React.Component {
         created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
         updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
         deleted_at: null,
+        item: {
           name: faker.commerce.productName(),
+        },
+        item_sku: {
+          name: faker.commerce.productName(),
+        },
+        transaction: {
           status: 'Transaction Success',
+        },
         price: faker.commerce.price(),
         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()}`,
       },
@@ -39,31 +46,18 @@ export default class TransactionPage extends React.Component {
         created_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
         updated_at: moment(faker.date.past()).format("dddd, MMMM Do YYYY, HH:mm:ss"),
         deleted_at: null,
+        item: {
           name: faker.commerce.productName(),
+        },
+        item_sku: {
+          name: faker.commerce.productName(),
+        },
+        transaction: {
           status: 'Transaction Success',
+        },
         price: faker.commerce.price(),
         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/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/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
                   })
-                }
+                }}
-                }
                 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
                   })
-                }
+                }}
-                }
                 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;
 
@@ -207,7 +207,15 @@ export default class PaymentVouchers extends React.Component {
                     </Card>
                 </div>
                 <div className="row">
-                <Button type="primary" block onClick={() => {
+                <Button
+                  type="primary"
+                  block
+                  onClick={() => {
+                    this.globalUI.hideDialogLoading();
+                    this.props.history.push(LINKS.TRANSACTION)
+                    openNotificationWithIcon('success')
+
+                    return;
                     this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
                       .then(res => {
                         this.globalUI.hideDialogLoading();
@@ -218,7 +226,10 @@ export default class PaymentVouchers extends React.Component {
                         this.globalUI.openSnackbar(err.message);
                         console.error(err, 'ini errornya');
                       });
-                    }}>Pakai Points</Button>
+                  }}
+                >
+                  Pakai Points
+                </Button>
                 </div>
             </div>
             <div className="col s0 m2 l2" />

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

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
         ]