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

static/js/shop.jsx

@@ -142,6 +142,7 @@ class Layout extends React.PureComponent {
       newCardJustAdded: PropTypes.bool,
       onClickToggleMobileSideMenu: PropTypes.func,
       onClickCloseRFQFeedback: PropTypes.func,
+      RFQBodyType: PropTypes.string,
     };
   }
 
@@ -161,6 +162,7 @@ class Layout extends React.PureComponent {
       onClickToggleMobileSideMenu,
       onClickCloseRFQFeedback,
       showRFQFeedback,
+      RFQBodyType,
     } = this.props;
 
     return (
@@ -181,7 +183,14 @@ class Layout extends React.PureComponent {
         ) : 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 class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-body rfqFeedback">
+
+                {RFQBodyType === 'email' ? (
+                  <div className="d-flex">
+
                     <div>
                       <img width="30px" src="/images/shop/icon-done.svg" alt="close" />
                     </div>
@@ -195,7 +204,16 @@ class Layout extends React.PureComponent {
                         <img src="/images/shop/icon-close.svg" alt="close" />
                       </button>
                     </div>
+
                   </div>
+                ) : null }
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className={`modal-backdrop fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'initial':'none'}}></div>
 
       </div>
     );
@@ -1582,7 +1600,12 @@ class Shop extends React.PureComponent {
       body,
       headers: {'X-MLABS-OH': 'rlebcleu'}
     }).then(response => {
-      this.setState({isProcessing: false, shouldShowRFQFeedback: true, isProcessingComplete: true});
+      this.setState({
+        isProcessing: false,
+        shouldShowRFQFeedback: true,
+        RFQBodyType: 'email',
+        isProcessingComplete: true,
+      });
     }).catch(err => {
       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");
@@ -2004,6 +2027,7 @@ class Shop extends React.PureComponent {
       newCardJustAdded,
       isProcessing,
       shouldShowRFQFeedback,
+      RFQBodyType,
       isProcessingComplete,
     } = this.state;
 
@@ -2014,6 +2038,7 @@ class Shop extends React.PureComponent {
 
         <Layout
             showRFQFeedback={shouldShowRFQFeedback}
+            RFQBodyType={RFQBodyType}
             className="shop"
             mobileSideMenuShouldOpen={mobileSideMenuShouldOpen}
             isMobile={isMobile}