feat(issue19/UI): Allows to load custom configuration

sass/css/_shop.scss

@@ -40,6 +40,17 @@ button {
                     width: 15px;
                 }
             }
+
+            .btn.btn-primary.disabled {
+                background-color: gray;
+            }
+
+            .btn-outline-primary,
+            .btn-outline-primary:hover {
+                color: $btn-primary-2;
+                border-color: $btn-primary-2;
+                background-color: inherit;
+            }
         }
 
         display: flex;

static/js/shop.jsx

@@ -328,6 +328,14 @@ class Layout extends React.PureComponent {
                     <div className="w-100">
 
                       <form className="form w-100">
+                        <div className="form-group">
+                          <p className="small">
+                            Add your own configuration below. Should be something like:
+                            <br />
+                            {JSON.stringify({"items":[{"pn":"1123"},{"pn":"2118"},{"pn":"2118"},{"pn":"2128"}],"type":"desktop"})}
+                          </p>
+                        </div>
+
                         <div className="form-group w-100">
                           <textarea
                             onChange={this.handleCustomConfig}
@@ -343,7 +351,10 @@ class Layout extends React.PureComponent {
                         ) : null}
                       </form>
 
-                      <a type="button" onClick={this.handleClickLoad} class="btn btn-sm btn-primary">Load configuration</a>
+                      <div className="d-flex flex-column flex-sm-row justify-content-end">
+                        <a type="button" onClick={onClickCloseRFQFeedback} class="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 mr-sm-2">Close</a>
+                        <a type="button" onClick={this.handleClickLoad} class={`btn btn-sm btn-primary m-0 ml-sm-2 ${this.state.error ? 'disabled':''}`}>Load configuration</a>
+                      </div>
                     </div>
                   ) : null}
 
@@ -1774,9 +1785,52 @@ class Shop extends React.PureComponent {
   }
 
   handleLoadCustomConf(customconf) {
-    if (customconf) {
-      console.log('custom conf: ', customconf);
-    }
+    if (!customconf) {return; }
+
+    const items = this.props.data.items;
+    const self = this;
+
+    let new_items = [];
+
+
+    this.setState({
+      ...this.state,
+      columns: {
+        ...this.state.columns,
+        cart: {
+          ...this.state.columns.cart,
+          items: [],
+        },
+      },
+    }, function () {
+
+      customconf.items.map(function (item) {
+        Object.keys(items).map(key => {
+          if (item.pn && item.pn === items[key].name_number) {
+            new_items.push(Object.assign({
+              ...items[key],
+            }, {
+              id: uuidv4(),
+            }));
+          }
+        });
+
+        return item;
+      });
+
+
+      this.setState({
+        ...this.state,
+        columns: {
+          ...this.state.columns,
+          cart: {
+            ...this.state.columns.cart,
+            items: new_items,
+          },
+        },
+        currentMode: customconf.type,
+      });
+    });
   }
 
   handleClickSubmit(note, email) {