From 2825779c96e769dcfa36d6c08082d251cb718430 Mon Sep 17 00:00:00 2001
From: sovanna <sovanna.hing@gmail.com>
Date: Tue, 14 Apr 2020 15:56:17 +0900
Subject: [PATCH] feat(issue22/UI): Uses bootstrap view instead of custom

---
 static/js/shop.jsx | 49 ++++++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/static/js/shop.jsx b/static/js/shop.jsx
index df7f4de4..083ccb84 100644
--- a/static/js/shop.jsx
+++ b/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,22 +183,38 @@ class Layout extends React.PureComponent {
         ) : null}
 
 
-        <div className="rfqFeedback" style={{'display': `${ showRFQFeedback ? 'flex' : 'none'}`}}>
-          <div>
-            <img width="30px" src="/images/shop/icon-done.svg" alt="close" />
-          </div>
+        <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">
 
-          <div style={{'padding': '0 .5em'}}>
-            We've received your request and will be in contact soon.
-          </div>
+                {RFQBodyType === 'email' ? (
+                  <div className="d-flex">
 
-          <div>
-            <button onClick={onClickCloseRFQFeedback}>
-              <img src="/images/shop/icon-close.svg" alt="close" />
-            </button>
+                    <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>
+                      <button onClick={onClickCloseRFQFeedback}>
+                        <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}