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

Compare commits

base: Ahmad.zuhdi.y:4a7dfe6d52efe43748445311e3c39967186e4ccb
Branches Tags
Ahmad.zuhdi.y:bukopin Ahmad.zuhdi.y:devops-staging
...
compare: Ahmad.zuhdi.y:bukopin
Branches Tags
Ahmad.zuhdi.y:devops-staging Ahmad.zuhdi.y:bukopin

5 Commits
4a7dfe6d52 ... bukopin

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
20 changed files with 152 additions and 89 deletions
Expand all files Collapse all files

6
public/index.html
View File

@@ -2,9 +2,9 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>BTN</title> <title>KB Bukopin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <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" /> <link rel="icon" type="image/png" href="/assets/images/kb_bukopin.jpeg" sizes="96x96" />
<style> <style>
body { body {
visibility: hidden; visibility: hidden;

6
public/index.parcel.html
View File

@@ -2,9 +2,9 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>BTN</title> <title>KB Bukopin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <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" /> <link rel="icon" type="image/png" href="/assets/images/kb_bukopin.jpeg" sizes="96x96" />
<style> <style>
body { body {
visibility: hidden; visibility: hidden;

6
public/index.prod.html
View File

@@ -2,9 +2,9 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>BTN</title> <title>KB Bukopin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <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" /> <link rel="icon" type="image/png" href="/assets/images/kb_bukopin.jpeg" sizes="96x96" />
<style> <style>
body { body {
visibility: hidden; visibility: hidden;

6
public/index.test.html
View File

@@ -2,9 +2,9 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>BTN</title> <title>KB Bukopin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <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" /> <link rel="icon" type="image/png" href="/assets/images/kb_bukopin.jpeg" sizes="96x96" />
<style> <style>
body { body {
visibility: hidden; visibility: hidden;

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

@@ -560,7 +560,7 @@ class App extends React.Component {
<WithdrawDialog /> <WithdrawDialog />
<div className={classes.root}> <div className={classes.root}>
<AppBar position="fixed"> <AppBar style={{ zIndex: 1 }} position="fixed">
<Toolbar className={classes.toolbar}> <Toolbar className={classes.toolbar}>
<div className={classes.sectionMobile}> <div className={classes.sectionMobile}>
<IconButton className={classes.menuButton} color="action" aria-label="Open drawer" onClick={this.toggleDrawerNew(true)}> <IconButton className={classes.menuButton} color="action" aria-label="Open drawer" onClick={this.toggleDrawerNew(true)}>
@@ -573,8 +573,8 @@ class App extends React.Component {
<img <img
className={classes.title} className={classes.title}
style={{ style={{
width: 100, width: 70,
height: 30 height: 40
}} }}
src={applicationIcon} /> src={applicationIcon} />
</Link> </Link>

4
src/common/pages/App/styles.js
View File

@@ -9,7 +9,7 @@ export const styles = theme => ({
width: "100%", width: "100%",
top: 0, top: 0,
zIndex: 1000, zIndex: 1000,
backgroundColor: yellow['500'], backgroundColor: '#FAAF03',
height: '70px !important', height: '70px !important',
padding: "8px 24px", padding: "8px 24px",
borderBottom: "1px solid rgb(223, 223, 223)" borderBottom: "1px solid rgb(223, 223, 223)"
@@ -94,4 +94,4 @@ export const styles = theme => ({
fullList: { fullList: {
width: 'auto', width: 'auto',
}, },
}); });

5
src/common/pages/Dashboard/index.js
View File

@@ -199,7 +199,7 @@ class DashboardComponent extends React.Component {
Voucher Voucher
</Typography> </Typography>
<Typography component="p"> <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> </Typography>
</MuiCardContent> </MuiCardContent>
<MuiCardActions> <MuiCardActions>
@@ -330,7 +330,8 @@ class DashboardComponent extends React.Component {
style={{ marginTop: 15 }}> style={{ marginTop: 15 }}>
{(this.vouchersStore.list.length > 0) ? {(this.vouchersStore.list.length > 0) ?
this.vouchersStore.list.map((item, index) => { 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')) { if (!image.includes('http')) {
image = this.http.appendImagePath(image); image = this.http.appendImagePath(image);

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

@@ -129,6 +129,7 @@ class RegisterPage extends React.Component {
}); });
} }
{console.log("namee", name)}
this.setState({ this.setState({
[name]: event.target.value, [name]: event.target.value,
}); });
@@ -208,45 +209,46 @@ class RegisterPage extends React.Component {
no_rekening : this.state.no_rekening no_rekening : this.state.no_rekening
} }
}; };
this.authStore.register(data).then(res => { this.props.history.push(LINKS.VOUCHERS);
//message.success("Please check your email to confirm your account");this.props.history.push(LINKS.LOGIN); // this.authStore.register(data).then(res => {
setTimeout(() => { // //message.success("Please check your email to confirm your account");this.props.history.push(LINKS.LOGIN);
this.setState({ isLoading: false }); // setTimeout(() => {
this.props.history.push(LINKS.REGISTER_COMPLETED); // this.setState({ isLoading: false });
// this.props.history.push(LINKS.LOGIN); // this.props.history.push(LINKS.REGISTER_COMPLETED);
}, 250); // // this.props.history.push(LINKS.LOGIN);
}).catch(err => { // }, 250);
this.setState({ isLoading: false }); // }).catch(err => {
// this.setState({ isLoading: false });
if (err.type === 'BodyValidationError') { //
message.error(err.detail[0].message); // if (err.type === 'BodyValidationError') {
} else { // message.error(err.detail[0].message);
if (err.message.toLowerCase().includes('email')) { // } else {
this.setState({ // if (err.message.toLowerCase().includes('email')) {
errors: { // this.setState({
...this.state.errors, // errors: {
email_exists: 'Email sudah terdaftar' // ...this.state.errors,
} // email_exists: 'Email sudah terdaftar'
}) // }
} else if (err.message.toLowerCase().includes('phone number')) { // })
this.setState({ // } else if (err.message.toLowerCase().includes('phone number')) {
errors: { // this.setState({
...this.state.errors, // errors: {
phone_exists: 'Nomer handphone sudah terdaftar' // ...this.state.errors,
} // phone_exists: 'Nomer handphone sudah terdaftar'
}) // }
} else if (err.message.toLowerCase().includes('referal')) { // })
this.setState({ // } else if (err.message.toLowerCase().includes('referal')) {
errors: { // this.setState({
...this.state.errors, // errors: {
referal_not_found: 'Kode Referal Salah - Silahkan Hubungi Petugas BTN' // ...this.state.errors,
} // referal_not_found: 'Kode Referal Salah - Silahkan Hubungi Petugas BTN'
}) // }
} else { // })
message.error(err.message); // } else {
} // message.error(err.message);
} // }
}); // }
// });
}; };
handleChangeUploadKtp = (info) => { handleChangeUploadKtp = (info) => {
@@ -634,7 +636,7 @@ class RegisterPage extends React.Component {
<div style={{ padding: 5, marginTop: 20 }}> <div style={{ padding: 5, marginTop: 20 }}>
<Button <Button
fullWidth 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"} {this.state.isLoading ? <CircularProgress className={classes.progress} /> : "Daftar"}
</Button> </Button>

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

@@ -4,7 +4,7 @@ export const styles = theme => ({
flex :1, flex :1,
flexGrow : 1, flexGrow : 1,
height : "100vh", height : "100vh",
backgroundColor:'#024f8e', backgroundColor:'#FEFAF0',
marginTop: '-56px', marginTop: '-56px',
}, },
gridContainer : { gridContainer : {

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

@@ -43,7 +43,8 @@ export default class ItemList extends React.Component {
<p className={'nameText'}>{data.item.name}</p> <p className={'nameText'}>{data.item.name}</p>
<div className={'childContainer'}> <div className={'childContainer'}>
<p className={'childTitle'}>Price</p> <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>
<div className={'childContainer'}> <div className={'childContainer'}>
<p className={'childTitle'}>Voucher Code</p> <p className={'childTitle'}>Voucher Code</p>

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

@@ -38,13 +38,13 @@ export default class TransactionPage extends React.Component {
transaction: { transaction: {
status: 'Transaction Success', 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()}`, 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()}`, 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"), 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, deleted_at: null,
item: { item: {
name: faker.commerce.productName(), name: faker.commerce.productName(),

2
src/common/pages/Transaction/style.scss
View File

@@ -6,7 +6,7 @@
align-items: center; align-items: center;
.parentContainer{ .parentContainer{
width: 40vw; width: 60vw;
.barContainer{ .barContainer{
display: flex; display: flex;

2
src/common/pages/Vouchers/Checkout/style.scss
View File

@@ -1,7 +1,7 @@
@media(min-width: 1000px){ @media(min-width: 1000px){
.imageCard{ .imageCard{
width: 20vw; width: 20vw;
height: 25vh; height: 35vh;
} }
.upper-card{ .upper-card{

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

@@ -110,7 +110,7 @@ export default class PaymentVouchers extends React.Component {
{this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName} {this.props.vouchersStore.dataItems.name} - {this.props.vouchersStore.skuName}
</h3> </h3>
<h3 className={'item-points'}> <h3 className={'item-points'}>
BTN Points Payment KB Bukopin Payment
</h3> </h3>
</div> </div>
<img className={'image-logo'} src={image} /> <img className={'image-logo'} src={image} />

2
src/common/pages/Vouchers/Payment/style.scss
View File

@@ -9,7 +9,7 @@
@media(min-width: 1000px){ @media(min-width: 1000px){
.image-logo{ .image-logo{
width: 10vw; width: 10vw;
height: 10vh; height: 35vh;
} }
.item-container{ .item-container{

6
src/common/pages/Vouchers/style.scss
View File

@@ -8,12 +8,14 @@
} }
.itemCard{ .itemCard{
background-color: #eee; background-color: white;
border: #ccc 1px solid; border: #ccc 1px solid;
width: 100%; width: 100%;
height: 200px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
@@ -21,7 +23,7 @@
.imageCard{ .imageCard{
width: 120px; width: 120px;
max-height: 60px; max-height: 100px;
} }
.titleCard{ .titleCard{

91
src/common/pages/Wallet/Modal/index.js
View File

@@ -19,13 +19,66 @@ export default class ModalTopupComponent extends React.Component {
inputCode2: '', inputCode2: '',
inputCode3: '', inputCode3: '',
inputCode4: '', inputCode4: '',
confirmLoading: false confirmLoading: false,
onOk: {}
}; };
this.defaultState = Object.assign({}, this.state); this.defaultState = Object.assign({}, this.state);
} }
componentDidMount() {} 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() { render() {
const {data, isVisible = false, onOk = () => {}, onCancel = () => {}, title='Redeem your code'} = this.props; 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} visible={isVisible}
onOk={async () => { onOk={async () => {
this.setState({ this.setState({
confirmLoading: true confirmLoading: true,
onOk: onOk()
}); });
let voucherCode = this.state.inputCode1 + this.state.inputCode2 + this.state.inputCode3 + this.state.inputCode4; let voucherCode = this.state.inputCode1 + this.state.inputCode2 + this.state.inputCode3 + this.state.inputCode4;
console.log("voucherCode", voucherCode)
try { this.redeemCode(voucherCode)
await this.props.appstate.wallet.redeemVoucherCode(voucherCode);
this.props.onOk(); // try {
message.info("Voucher redeem success"); // await this.props.appstate.wallet.redeemVoucherCode(voucherCode);
} catch (e) { // this.props.onOk();
message.error(e.message); // message.info("Voucher redeem success");
} finally { // } catch (e) {
this.setState({ // message.error(e.message);
inputCode1: '', // } finally {
inputCode2: '', // this.setState({
inputCode3: '', // inputCode1: '',
inputCode4: '', // inputCode2: '',
confirmLoading: false // inputCode3: '',
}); // inputCode4: '',
} // confirmLoading: false
// });
// }
}} }}
onCancel={() => { onCancel={() => {

2
src/common/stores/item.js
View File

@@ -5,7 +5,7 @@ export class ItemStore extends BaseStore {
@observable listImages = []; @observable listImages = [];
constructor(context) { constructor(context) {
super(context); super(context);
this.url = "items"; this.url = "/categories/11936220-31f7-4f5e-8555-9110dbec4a5d/items";
} }
@action @action

2
src/common/stores/vouchers.js
View File

@@ -26,7 +26,7 @@ export default class Vouchers {
getList(){ getList(){
console.log('res'); console.log('res');
this.isLoading = true; this.isLoading = true;
return this.http.get("items") return this.http.get("categories/11936220-31f7-4f5e-8555-9110dbec4a5d/items")
.then(res => { .then(res => {
this.list = res.data; this.list = res.data;
this.isLoading = false; this.isLoading = false;

2
src/common/styles/style.scss
View File

@@ -7,7 +7,7 @@
body { body {
-webkit-font-smoothing: antialiased !important; -webkit-font-smoothing: antialiased !important;
background-color: #f1f5f9; background-color: #FEFAF0;
text-transform: none; text-transform: none;
padding-top: 56px; 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; font-family: 'Montserrat', "Avenir Next W01", "Proxima Nova W01", "Rubik", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;