feat(issue19/UI): Allows to show configuration

sass/css/_shop.scss

@@ -17,14 +17,14 @@ button {
             align-items: center;
             padding: 2rem 3rem;
             text-align: center;
-            position: absolute;
+            /*position: absolute;
-            width: 350px;
+            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"] {
+                    input[type="submit"],
-                        background-color: $btn-primary-2;
+                    .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;
+                    }
                 }
             }
         }

static/css/order-hardware.css

@@ -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;

static/js/shop.jsx

@@ -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'}}>
+                  {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>
-                ) : 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>