feat(issue19/UI): Allows to show configuration

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

View File

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

View File

@ -171,9 +171,9 @@
font-size: .85rem; 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; margin-bottom: 1em;
} }*/
#root-shop .panel .summary>.summary-price, #root-shop .panel .summary>.summary-price,
#root-shop .panel .summary>.summary-form { #root-shop .panel .summary>.summary-form {
width: 100%; width: 100%;
@ -278,9 +278,9 @@
font-size: .85rem; 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; margin-bottom: 1em;
} }*/
#root-shop .mobileBtnDisplaySideMenu { #root-shop .mobileBtnDisplaySideMenu {
background-color: #0d3547; background-color: #0d3547;
@ -532,9 +532,9 @@
font-size: .85rem; 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; margin-bottom: 1em;
} }*/
#root-shop .mobileBtnDisplaySideMenu { #root-shop .mobileBtnDisplaySideMenu {
background-color: #0d3547; background-color: #0d3547;

View File

@ -143,6 +143,7 @@ class Layout extends React.PureComponent {
onClickToggleMobileSideMenu: PropTypes.func, onClickToggleMobileSideMenu: PropTypes.func,
onClickCloseRFQFeedback: PropTypes.func, onClickCloseRFQFeedback: PropTypes.func,
RFQBodyType: PropTypes.string, RFQBodyType: PropTypes.string,
RFQBodyOrder: PropTypes.string,
}; };
} }
@ -163,6 +164,7 @@ class Layout extends React.PureComponent {
onClickCloseRFQFeedback, onClickCloseRFQFeedback,
showRFQFeedback, showRFQFeedback,
RFQBodyType, RFQBodyType,
RFQBodyOrder,
} = this.props; } = this.props;
return ( return (
@ -188,32 +190,42 @@ class Layout extends React.PureComponent {
<div class="modal-content"> <div class="modal-content">
<div class="modal-body rfqFeedback"> <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> </div>
) : null }
<div style={{'padding': '0 .5em'}}> {RFQBodyType === 'show' ? (
We've received your request and will be in contact soon. <p>
</div> {RFQBodyOrder}
</p>
<div> ) : null}
<button onClick={onClickCloseRFQFeedback}>
<img src="/images/shop/icon-close.svg" alt="close" />
</button>
</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>
</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> </div>
); );
@ -999,6 +1011,10 @@ class OrderForm extends React.PureComponent {
handleSubmit, handleSubmit,
} = this; } = this;
const {
onClickShow,
} = this.props;
const { const {
email, email,
note, note,
@ -1040,7 +1056,17 @@ class OrderForm extends React.PureComponent {
rows="5" rows="5"
placeholder="Additional notes" /> 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.*/} {/*This will open an email window. Send the email to make your request.*/}
</form> </form>
@ -1368,6 +1394,7 @@ class Shop extends React.PureComponent {
this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this); this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this); this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this); this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
this.timer = null; 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) { handleClickSubmit(note, email) {
const crate = { const crate = {
items: [], items: [],
@ -2028,6 +2076,7 @@ class Shop extends React.PureComponent {
isProcessing, isProcessing,
shouldShowRFQFeedback, shouldShowRFQFeedback,
RFQBodyType, RFQBodyType,
RFQBodyOrder,
isProcessingComplete, isProcessingComplete,
} = this.state; } = this.state;
@ -2039,6 +2088,7 @@ class Shop extends React.PureComponent {
<Layout <Layout
showRFQFeedback={shouldShowRFQFeedback} showRFQFeedback={shouldShowRFQFeedback}
RFQBodyType={RFQBodyType} RFQBodyType={RFQBodyType}
RFQBodyOrder={RFQBodyOrder}
className="shop" className="shop"
mobileSideMenuShouldOpen={mobileSideMenuShouldOpen} mobileSideMenuShouldOpen={mobileSideMenuShouldOpen}
isMobile={isMobile} isMobile={isMobile}
@ -2104,7 +2154,8 @@ class Shop extends React.PureComponent {
isProcessingComplete={isProcessingComplete} isProcessingComplete={isProcessingComplete}
processingComplete={this.handleProcessingComplete} processingComplete={this.handleProcessingComplete}
isProcessing={isProcessing} isProcessing={isProcessing}
onClickSubmit={this.handleClickSubmit}> onClickSubmit={this.handleClickSubmit}
onClickShow={this.handleClickShowOrder}>
</OrderForm> </OrderForm>
}> }>
</OrderPanel> </OrderPanel>