occheung
/
web2019
forked from M-Labs/web2019
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(issue22/UI): Uses bootstrap view instead of custom

This commit is contained in:
sovanna 2020-04-14 15:56:17 +09:00
parent 0c4d2cfdac
commit 2825779c96
1 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
static/js/shop.jsx
View File

@ -142,6 +142,7 @@ class Layout extends React.PureComponent {
newCardJustAdded: PropTypes.bool, newCardJustAdded: PropTypes.bool,
onClickToggleMobileSideMenu: PropTypes.func, onClickToggleMobileSideMenu: PropTypes.func,
onClickCloseRFQFeedback: PropTypes.func, onClickCloseRFQFeedback: PropTypes.func,
RFQBodyType: PropTypes.string,
}; };
} }
@ -161,6 +162,7 @@ class Layout extends React.PureComponent {
onClickToggleMobileSideMenu, onClickToggleMobileSideMenu,
onClickCloseRFQFeedback, onClickCloseRFQFeedback,
showRFQFeedback, showRFQFeedback,
RFQBodyType,
} = this.props; } = this.props;
return ( return (
@ -181,22 +183,38 @@ class Layout extends React.PureComponent {
) : null} ) : null}
<div className="rfqFeedback" style={{'display': `${ showRFQFeedback ? 'flex' : 'none'}`}}> <div class={`modal fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'block':'none'}} id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div> <div class="modal-dialog" role="document">
<img width="30px" src="/images/shop/icon-done.svg" alt="close" /> <div class="modal-content">
</div> <div class="modal-body rfqFeedback">
<div style={{'padding': '0 .5em'}}> {RFQBodyType === 'email' ? (
We've received your request and will be in contact soon. <div className="d-flex">
</div>
<div> <div>
<button onClick={onClickCloseRFQFeedback}> <img width="30px" src="/images/shop/icon-done.svg" alt="close" />
<img src="/images/shop/icon-close.svg" alt="close" /> </div>
</button>
<div style={{'padding': '0 .5em'}}>
We've received your request and will be in contact soon.
</div>
<div>
<button onClick={onClickCloseRFQFeedback}>
<img src="/images/shop/icon-close.svg" alt="close" />
</button>
</div>
</div>
) : null }
</div>
</div>
</div> </div>
</div> </div>
<div className={`modal-backdrop fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'initial':'none'}}></div>
</div> </div>
); );
} }
@ -1582,7 +1600,12 @@ class Shop extends React.PureComponent {
body, body,
headers: {'X-MLABS-OH': 'rlebcleu'} headers: {'X-MLABS-OH': 'rlebcleu'}
}).then(response => { }).then(response => {
this.setState({isProcessing: false, shouldShowRFQFeedback: true, isProcessingComplete: true}); this.setState({
isProcessing: false,
shouldShowRFQFeedback: true,
RFQBodyType: 'email',
isProcessingComplete: true,
});
}).catch(err => { }).catch(err => {
this.setState({isProcessing: false}, () => { this.setState({isProcessing: false}, () => {
alert("We cannot receive your request. Try using the export by coping the configuration and send it to us at sales[at]m-labs.hk"); alert("We cannot receive your request. Try using the export by coping the configuration and send it to us at sales[at]m-labs.hk");
@ -2004,6 +2027,7 @@ class Shop extends React.PureComponent {
newCardJustAdded, newCardJustAdded,
isProcessing, isProcessing,
shouldShowRFQFeedback, shouldShowRFQFeedback,
RFQBodyType,
isProcessingComplete, isProcessingComplete,
} = this.state; } = this.state;
@ -2014,6 +2038,7 @@ class Shop extends React.PureComponent {
<Layout <Layout
showRFQFeedback={shouldShowRFQFeedback} showRFQFeedback={shouldShowRFQFeedback}
RFQBodyType={RFQBodyType}
className="shop" className="shop"
mobileSideMenuShouldOpen={mobileSideMenuShouldOpen} mobileSideMenuShouldOpen={mobileSideMenuShouldOpen}
isMobile={isMobile} isMobile={isMobile}