Ahmad.zuhdi.y/bukopin-redemption-client-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: initial commit for mockup bukopin

Browse Source
This commit is contained in:
ahmadzuhdi 2023-01-17 21:21:43 +07:00
parent 0ebe039eda
commit 9f0c68b2ce
23 changed files with 142 additions and 568201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

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

BIN
assets/images/kb_bukopin.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

13
package-lock.json generated
View File

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

1
package.json
View File

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

568088
public/static/bundle.js
View File

File diff suppressed because one or more lines are too long

1
public/static/bundle.js.map
View File

File diff suppressed because one or more lines are too long

6
src/common/config/app.js
View File

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

10
src/common/pages/App/index.js
View File

@ -20,7 +20,7 @@ import {
// Drawer,
// List,
// ListItem,
// IconMenu,
IconMenu,
// IconButton,
// MenuItem,
DropDownMenu,
@ -29,8 +29,8 @@ import {
Dialog,
Snackbar,
// Toolbar,
// ToolbarGroup,
// ToolbarSeparator,
ToolbarGroup,
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";
applicationName = "BTN";
applicationIcon = "https://www.niaga.asia/wp-content/uploads/2021/02/IMG-20210223-WA0025.jpg";
applicationName = "KB Bukopin";
}
let onNotifRowClick = (record) => {

2
src/common/pages/ContentManager/Form/index.js
View File

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

2
src/common/pages/Login/index.js
View File

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

2
src/common/pages/Otp/style.js
View File

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

6
src/common/pages/RegisterNew/index.js
View File

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

2
src/common/pages/RegisterNew/styles.js
View File

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

2
src/common/pages/Transaction/ItemList/index.js
View File

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

40
src/common/pages/Transaction/index.js
View File

@ -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) ?
this.purchasedVoucher.data.map(item => {
(data.length > 0) ?
data.map(item => {
return <ItemList data={item}/>
}) :
(

2
src/common/pages/Vouchers/Checkout/index.js
View File

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

6
src/common/pages/Vouchers/ItemCard/index.js
View File

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

62
src/common/pages/Vouchers/Modal/index.js
View File

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

17
src/common/pages/Vouchers/Payment/index.js
View File

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

17
src/common/pages/Vouchers/Stepper/index.js
View File

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

2
src/common/routes.js
View File

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

2
webpack.config.js
View File

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

2
webpack.config.prod.js
View File

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