feat(issue19/UI): Allows to show configuration
This commit is contained in:
parent
2825779c96
commit
413703fd96
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user