esavkin/web2019
1
0
Fork 0
forked from M-Labs/web2019
Code Pull Requests Activity

feat(issue19/UI): Allows to show configuration

Browse Source
This commit is contained in:
sovanna 2020-04-14 16:08:28 +09:00
parent 2825779c96
commit 413703fd96
3 changed files with 89 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
sass/css/_shop.scss
View File

@ -17,14 +17,14 @@ button {
align-items: center;
padding: 2rem 3rem;
text-align: center;
position: absolute;
width: 350px;
/*position: absolute;
width: 350px;*/
background: white;
left: calc(100%/2 - 350px/2);
/*left: calc(100%/2 - 350px/2);*/
-webkit-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75);
box-shadow: 0px 0px 33px -7px rgba(0,0,0,0.75);
top: calc(50% - 50px);
/*top: calc(50% - 50px);*/
border: 1px solid $brand-color;
font-size: .9rem;
@ -280,6 +280,7 @@ button {
width: 90%;
input:not([type="submit"]),
input:not(.submit),
textarea {
border: 1px solid $color-secondary;
border-radius: 3px;
@ -288,11 +289,11 @@ button {
outline: none;
}
input[type="submit"] {
background-color: $btn-primary-2;
input[type="submit"],
.btn-cla {
/*background-color: $btn-primary-2;*/
font-weight: 700;
color: white;
padding: .7rem;
border: 0;
border-radius: 3px;
outline: none;
@ -306,6 +307,13 @@ button {
.errorField {
border: 1px solid #e53e3e !important;
}
.btn-outline-primary,
.btn-outline-primary:hover {
color: $btn-primary-2;
border-color: $btn-primary-2;
background-color: inherit;
}
}
}
}

12
static/css/order-hardware.css
View File

@ -171,9 +171,9 @@
font-size: .85rem;
}
#root-shop .panel .summary>.summary-form form input[type="submit"] {
/*#root-shop .panel .summary>.summary-form form input[type="submit"] {
margin-bottom: 1em;
}
}*/
#root-shop .panel .summary>.summary-price,
#root-shop .panel .summary>.summary-form {
width: 100%;
@ -278,9 +278,9 @@
font-size: .85rem;
}
#root-shop .panel .summary>.summary-form form input[type="submit"] {
/*#root-shop .panel .summary>.summary-form form input[type="submit"] {
margin-bottom: 1em;
}
}*/
#root-shop .mobileBtnDisplaySideMenu {
background-color: #0d3547;
@ -532,9 +532,9 @@
font-size: .85rem;
}
#root-shop .panel .summary>.summary-form form input[type="submit"] {
/*#root-shop .panel .summary>.summary-form form input[type="submit"] {
margin-bottom: 1em;
}
}*/
#root-shop .mobileBtnDisplaySideMenu {
background-color: #0d3547;

85
static/js/shop.jsx
View File

@ -143,6 +143,7 @@ class Layout extends React.PureComponent {
onClickToggleMobileSideMenu: PropTypes.func,
onClickCloseRFQFeedback: PropTypes.func,
RFQBodyType: PropTypes.string,
RFQBodyOrder: PropTypes.string,
};
}
@ -163,6 +164,7 @@ class Layout extends React.PureComponent {
onClickCloseRFQFeedback,
showRFQFeedback,
RFQBodyType,
RFQBodyOrder,
} = this.props;
return (
@ -188,32 +190,42 @@ class Layout extends React.PureComponent {
<div class="modal-content">
<div class="modal-body rfqFeedback">
{RFQBodyType === 'email' ? (
<div className="d-flex">
<div className="d-flex">
{RFQBodyType === 'email' ? (
<div className="d-flex">
<div>
<img width="30px" src="/images/shop/icon-done.svg" alt="close" />
</div>
<div style={{'padding': '0 .5em'}}>
We've received your request and will be in contact soon.
</div>
<div>
<img width="30px" src="/images/shop/icon-done.svg" alt="close" />
</div>
) : null }
<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>
{RFQBodyType === 'show' ? (
<p>
{RFQBodyOrder}
</p>
) : null}
<div>
<button onClick={onClickCloseRFQFeedback}>
<img src="/images/shop/icon-close.svg" alt="close" />
</button>
</div>
) : null }
</div>
</div>
</div>
</div>
</div>
<div className={`modal-backdrop fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'initial':'none'}}></div>
<div onClick={onClickCloseRFQFeedback} className={`modal-backdrop fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'initial':'none'}}></div>
</div>
);
@ -999,6 +1011,10 @@ class OrderForm extends React.PureComponent {
handleSubmit,
} = this;
const {
onClickShow,
} = this.props;
const {
email,
note,
@ -1040,7 +1056,17 @@ class OrderForm extends React.PureComponent {
rows="5"
placeholder="Additional notes" />
<input style={{'backgroundColor': `${isProcessingComplete ? 'gray':'#715ec7'}`}} disabled={isProcessingComplete} type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
<div className="d-flex flex-column flex-sm-row justify-content-between">
<input
className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 mr-sm-2"
style={{'cursor': 'pointer', 'fontWeight': '700'}}
value="Show configurations"
onClick={onClickShow} />
<input className="btn btn-primary w-100 m-0 ml-sm-2" style={Object.assign({}, isProcessingComplete ? {
'backgroundColor': 'gray',
} : {})} disabled={isProcessingComplete} type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
</div>
{/*This will open an email window. Send the email to make your request.*/}
</form>
@ -1368,6 +1394,7 @@ class Shop extends React.PureComponent {
this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
this.timer = null;
}
@ -1569,6 +1596,27 @@ class Shop extends React.PureComponent {
});
}
handleClickShowOrder() {
const crate = {
items: [],
type: this.state.currentMode,
};
const clonedCart = Array.from(this.state.columns.cart.items);
for (const i in clonedCart) {
const item = clonedCart[i];
crate.items.push({
'pn': item.name_number,
});
}
this.setState({
isProcessing: false,
shouldShowRFQFeedback: true,
RFQBodyType: 'show',
RFQBodyOrder: JSON.stringify(crate),
});
}
handleClickSubmit(note, email) {
const crate = {
items: [],
@ -2028,6 +2076,7 @@ class Shop extends React.PureComponent {
isProcessing,
shouldShowRFQFeedback,
RFQBodyType,
RFQBodyOrder,
isProcessingComplete,
} = this.state;
@ -2039,6 +2088,7 @@ class Shop extends React.PureComponent {
<Layout
showRFQFeedback={shouldShowRFQFeedback}
RFQBodyType={RFQBodyType}
RFQBodyOrder={RFQBodyOrder}
className="shop"
mobileSideMenuShouldOpen={mobileSideMenuShouldOpen}
isMobile={isMobile}
@ -2104,7 +2154,8 @@ class Shop extends React.PureComponent {
isProcessingComplete={isProcessingComplete}
processingComplete={this.handleProcessingComplete}
isProcessing={isProcessing}
onClickSubmit={this.handleClickSubmit}>
onClickSubmit={this.handleClickSubmit}
onClickShow={this.handleClickShowOrder}>
</OrderForm>
}>
</OrderPanel>