Add Multi-cart option to Bulk-add and Partial-add "Add to cart" button (#101)

* Add cart-button to BulkOrder to have multi-cart options

* remove console and extra spacing

* Add multi-cart to quick add + Add create cart button to multi-cart dropdown

* Fix responsive design , Add partial add error message to quick order

* partial add to cart when user is not loggedIn

* Change Bulkd-update error message panel, fix quantity of items added to the cart and empty items sku cart wich added to the cart in quick add

* Add responsive design

* responsive change in bulk-add

* fix the issue with res.errors

* add the condition for res.errors

* move add to cart btn to left per design

* fix issue : clear quantity of item after added successfully

Co-authored-by: yasiloghmani <yasaman.loghmani@EP-ML-10062.local>

Author: yasiloghmani

package.json

@@ -3,7 +3,7 @@
   "version": "3.0.0",
   "private": true,
   "dependencies": {
-    "@moltin/sdk": "5.5.0",
+    "@moltin/sdk": "^5.5.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",

src/BulkOrder.scss

@@ -1,9 +1,12 @@
 @import './theme/common';
 
 .bulkorder {
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
 
   &__form {
-    max-width: 800px;
+    max-width: 600px;
   }
 
   &__group {
@@ -19,7 +22,7 @@
 
   &__textarea {
     width: 100%;
-    min-height: 400px;
+    min-height: 200px;
     padding: 10px;
     font-size: $sizeSmall;
     border: 1px solid $secondBorderColor;
@@ -65,30 +68,228 @@
     }
   }
 
+  &__messagewrap {
+    margin-top: -25px;
+  }
+
   &__feedback {
     width: 100%;
-    padding: 20px 60px;
-    position: absolute;
-    top: 0;
-    left: 0;
     font-size: $sizeSmall;
     color: $mainErrorColor;
-    border: 1px solid $mainErrorColor;
     background-color: $mainBackgroundColor;
-    white-space: pre;
+    white-space: pre-line;
+    text-overflow: clip;
+    line-height: 18px;
+    max-height: 190px;
+    overflow-y: auto;
+    border-radius: 5px;
+    margin-bottom: 30px;
+  }
+
+  &__addtocartdropdowncontainer {
+    position: relative;
+    width: fit-content;
+    margin-bottom: 20px;
+  }
+  
+  &__addtocartdropdownwrap {
+    max-width: 330px;
+    display: flex;
+  }
+
+  &__addtocartbtn {
+    text-align: left;
+    flex-grow: 1;
+    text-overflow: ellipsis;
+    width: 270px;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &__addtocartdropdowntoggle {
+    width: 50px;
+    text-align: center;
+    cursor: pointer;
+
+    &.--open {
+      background-color: $mainColor!important;
+    }
+  }
+
+  @keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &__addtocartdropdownicspinner {
+    animation: rotating 1s linear infinite;
+  }
+
+  &__addtocartdropdowniscaret {
+    margin: 3px 0;
+
+    &.--rotated {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__addtocartdropdowncontent {
+    border: 1px solid $mainColor;
+    width: 100%;
+    max-width: 330px;
+    max-height: 180px;
+    overflow-x: hidden;
+    z-index: 1;
+  }
+
+  &__addtocartdropdownbtn {
+    display: block;
+    width: 100%;
+    height: 32px;
+    padding: 10px;
+    background-color: $mainBackgroundColor;
+    color: $firstComplimentColor;
+    font-size: 13px;
+    line-height: 13px;
+    cursor: pointer;
+    font-weight: bold;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: $sixthComplimentBackground;
+    }
+  }
+  
+  &__createcartmodalbg {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  &__createcartmodal {
+    position: absolute;
+    width: 460px;
+    padding: 25px;
+    z-index: 2;
+    background: $mainNavigationColor;
+    border: 1px solid $secondBorderColor;
+    box-sizing: border-box;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &__createcartheader {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__createcartheadertext {
+    font-weight: bold;
+    font-size: 24px;
+  }
+
+  &__createcartheaderbnt {
+    cursor: pointer;
+  }
+
+  &__messagewrap {
+    position: relative;
+  }
+  
+  &__clearerrorbtn {
+    cursor: pointer;
+    display:block;
+    position: relative;
+    left:93%
+  }
+
+  &__clearerrorbtnicon{
+    fill: $mainErrorColor;
   }
 
   @media (max-width: $mobileWidth - 1px) {
-    &__feedback {
-      padding: 15px;
+
+    .--secondary{
+      width: 100%;
     }
   }
 
   @media (max-width: $mobileXSmallWidth - 1px) {
+
     &__btns {
       .epbtn {
         min-width: 100%;
       }
     }
+
+    &__addtocartdropdowncontainer {
+      width: 100%;
+    }
+    
+    &__addtocartdropdownwrap {
+      max-width: 100%;
+    }
+
+    &__addtocartdropdowncontent {
+      max-width: 100%;
+    }
+  }
+
+  @media screen and (min-width: $tabletSmallWidth) {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    column-gap: 40px;
+
+    &__group {
+      width: 600px;
+    max-width: 800px;
+    }
+
+    &__feedback {
+      max-height: 390px;
+      padding:10px;
+      margin-bottom: 0px;
+    }
+
+    &__messagewrap {
+      margin-top: 0px;
+    }
+
+    &__textarea {
+      min-height: 400px;
+    }
+  }
+  @media screen and (min-width: $fullHDWidth) {
+
+    &__group {
+      width: 700px;
+    }
+
+    &__form {
+     max-width: 700px;
+    }
+  }
+
+  @media (max-width: $mobileSmallWidth - 1px) {
+
+    &__createcartmodalbg {
+      position: fixed;
+    }
+
+    &__createcartmodal {
+      height: 100%;
+      width: 100%;
+    }
   }
 }