@sc-360-v2/storefront-cms-library 0.3.38 → 0.3.40

package/dist/bulk-order-pad.scss

@@ -15,7 +15,7 @@
     border-bottom: 1px solid var(--_gray-200);
 
     .dropdown-with-input-section {
-      border: 0.5px solid var(--_gray-300);
+      // border: 0.5px solid var(--_gray-300);
       border-radius: 4px;
     }
   }
@@ -56,7 +56,7 @@
 
   .bulkOrderPad-grid {
     height: 100%;
-    
+
     .bulkOrderPad-content {
       height: calc(100% - 92px);
       .bulkOrderPad-section {
@@ -263,8 +263,8 @@
         border-radius: 4px;
         overflow: hidden;
         img {
-         width: 100%;
-         height: 100%;
+          width: 100%;
+          height: 100%;
         }
       }
 
@@ -358,7 +358,7 @@
       }
 
       .discard {
-        padding: 10px 18px;
+        padding: 12px 16px;
         border-radius: 4px;
         color: var(--_gray-600);
         font-weight: 600;
@@ -367,14 +367,14 @@
         line-height: 24px;
 
         &:hover {
-          border: 1px solid var(--_gray-600);
+          background-color: var(--_gray-50);
+          color: var(--_gray-900);
         }
       }
 
       .add-tocart {
         padding: 10px 18px;
         border-radius: 4px;
-        border: 1px solid var(--_primary-500);
         color: #fff;
         font-weight: 600;
         font-size: 16px;
@@ -382,7 +382,7 @@
         display: flex;
         align-items: center;
         gap: 8px;
-        background: var(--_primary-500);
+        background: var(--_primary-400);
 
         svg {
           width: 20px;
@@ -418,29 +418,28 @@
         overflow-x: auto;
       }
 
-      .dropdown-with-input-section {
-        gap: 6px;
+      // .dropdown-with-input-section {
+      //   gap: 6px;
 
-        label {
-          font-size: 14px;
-          line-height: 20px;
-          color: var(--_gray-700);
-          font-family: "Lato";
-        }
+      //   label {
+      //     font-size: 14px;
+      //     line-height: 20px;
+      //     color: var(--_gray-700);
+      //     font-family: "Lato";
+      //   }
 
-        .dropdown-input-section {
-          border: 1px solid var(--_gray-300);
-          border-radius: 4px;
-          max-width: 320px;
-          background: #fff;
-          
-        }
-      }
+      //   .dropdown-input-section {
+      //     border: 1px solid var(--_gray-300);
+      //     border-radius: 4px;
+      //     max-width: 320px;
+      //     background: #fff;
+      //   }
+      // }
 
       .dropdown-options {
         display: flex;
-        flex-direction: column;
-        gap: 6px;
+        width: 600px;
+        gap: 12px;
 
         .dropdown-with-input-section {
           gap: 6px;
@@ -455,13 +454,11 @@
           .dropdown-input-section {
             border: 1px solid var(--_gray-300);
             border-radius: 4px;
-            max-width: 320px;
-            background: #fff;
+            max-width: 280px;
+            background: var(--_base-white);
           }
         }
       }
-
-      
     }
 
     .bulkOrderPad-content-container {
@@ -482,7 +479,6 @@
         align-items: center;
         margin-top: 40px;
 
-
         .vertical_vector {
           height: 100%;
           width: 1px;
@@ -516,11 +512,10 @@
           width: 100%;
           height: 1px;
           background: #f0f0f0;
-          
         }
         .title {
-            padding-inline: 10px;
-          }
+          padding-inline: 10px;
+        }
       }
 
       table {

package/dist/buyForHeaders.scss

@@ -8,6 +8,17 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem;
+    .buy-for-header-subtitle {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 14px;
+      font-weight: normal;
+      color: var(--_gray-600);
+      svg path {
+        stroke: var(--_gray-600);
+      }
+    }
 
     h1 {
       font-size: var(--_ctm-buy-dn-pe-te-ss-ft-se);
@@ -20,6 +31,8 @@
       letter-spacing: var(--_ctm-buy-dn-pe-te-ss-lr-sg);
       line-height: var(--_ctm-buy-dn-pe-te-ss-le-ht);
       text-decoration: var(--_ctm-buy-dn-pe-te-ss-ue);
+      display: flex;
+      gap: 12px;
 
       .separator {
         margin: 0 0.5rem;
@@ -41,6 +54,7 @@
       display: flex;
       align-items: center;
       gap: 1rem;
+      text-wrap: nowrap;
 
       .impersonate-text {
         background: #f3f5f7;
@@ -59,6 +73,7 @@
         text-decoration: var(--_ctm-buy-dn-me-es-ll-ss-ue);
         letter-spacing: var(--_ctm-buy-dn-me-es-ll-ss-lr-sg);
         line-height: var(--_ctm-buy-dn-me-es-ll-ss-le-ht);
+        cursor: pointer;
       }
 
       .employee-switch {
@@ -88,15 +103,40 @@
 
   .employee-info {
     border-top: 1px solid #eee;
-    padding-top: 1rem;
     .employee-details-section {
       display: flex;
       justify-content: space-between;
+      padding-block: 24px;
+      .employee-meta-info {
+        display: flex;
+        li {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          &:not(:last-child)::after {
+            content: "";
+            width: 6px;
+            height: 6px;
+            margin-inline-end: 8px;
+            display: inline-block;
+            background-color: var(--_gray-200);
+            border-radius: 50%;
+          }
+        }
+      }
       .employee-details {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        flex-wrap: wrap;
+        gap: 12px;
+
+        .employee-info-status {
+          font-size: 14px;
+          color: var(--_success-600);
+          background: var(--_success-50);
+          padding: 4px 8px 6px 8px;
+          border-radius: 6px;
+        }
 
         .employee-name {
           font-size: var(--_ctm-buy-dn-ee-ne-ss-ft-se);
@@ -266,3 +306,81 @@
     }
   }
 }
+
+.buy-for-address-block {
+  display: flex;
+  gap: 24px;
+  border-block: 1px solid var(--_gray-200);
+  padding-block: 24px;
+  .buy-for-shipping-address {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 24px;
+    width: 100%;
+    align-items: flex-start;
+
+    .buy-for-shipping {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      position: relative;
+      &:not(:first-child)::before {
+        content: "";
+        width: 1px;
+        height: 40px;
+        background-color: var(--_gray-200);
+        display: inline-block;
+        position: absolute;
+        margin-left: -12px;
+        top: 4px;
+      }
+      h6 {
+        color: var(--_gray-500);
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      .buy-for-shipping-details {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--_gray-900);
+        line-height: 20px;
+      }
+    }
+  }
+  .buy-for-cart-main {
+    width: 130px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 40px;
+    border-left: 1px solid var(--_gray-200);
+    padding-left: 12px;
+
+    .cart-icon {
+      position: relative;
+
+      .badge {
+        position: absolute;
+        top: -9px;
+        background: #ffd700;
+        border-radius: 4px;
+        left: 12px;
+        padding: 2px 4px;
+        line-height: normal;
+        color: var(--_gray-900);
+        font-weight: 400;
+      }
+    }
+
+    .buy-for-cart-content {
+      .cart-amount {
+        color: var(--_gray-900);
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 20px;
+      }
+    }
+  }
+}

package/dist/buyForPopup.scss

@@ -12,24 +12,47 @@
 .popup_container {
   width: 90%;
   max-width: 600px;
-  background: #ffffff;
+  background: var(--_base-white);
   border-radius: 12px;
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   max-height: 83vh;
-  overflow-y: auto;
 }
 
 .popup_header {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   border-bottom: 1px solid var(--_gray-200);
   padding: 16px 24px;
+  gap: 4px;
+
+  .close-icon {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    svg {
+      width: 18px;
+      height: 18px;
+      path {
+        stroke: var(--_gray-600);
+      }
+    }
+    &:hover {
+      background-color: var(--_gray-100);
+      svg path {
+        stroke: var(--_gray-900);
+      }
+    }
+  }
 
   h2 {
     font-size: 18px;
-    font-weight: 600;
+    font-weight: normal;
     margin: 0;
     line-height: 28px;
   }
@@ -48,6 +71,7 @@
     gap: 12px;
     font-size: 14px;
     color: var(--_gray-600);
+    list-style: none;
 
     li {
       &::after {
@@ -71,6 +95,7 @@
 
 .popup_body {
   padding: 24px;
+  flex-grow: 1;
 }
 
 .search_input {
@@ -85,8 +110,8 @@
   border: 1px solid var(--_gray-200) !important;
 
   &:focus {
-    outline: none;
-    border-color: #007bff;
+    border: 1px solid var(--_primary-200) !important;
+    outline: 2px solid var(--_primary-50);
   }
 }
 
@@ -95,7 +120,7 @@
   flex-direction: column;
   gap: 16px;
   overflow-y: auto;
-  max-height: 50vh;
+  max-height: 30vh;
 }
 
 .group_section {
@@ -178,15 +203,24 @@
   padding: 16px 24px;
   border-top: 1px solid var(--_gray-200);
   justify-content: end;
+  gap: 12px;
 
   button {
     padding: 10px 16px;
-    border-radius: 4px;
+    border-radius: 6px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     border: none;
     transition: background 0.2s ease;
+    display: flex;
+    align-items: center;
+    &[aria-label="Discard"] {
+      &:hover {
+        background-color: var(--_gray-100);
+        color: var(--_gray-900);
+      }
+    }
 
     &:first-child {
       // background: #f3f3f3;

package/dist/cart-details.scss

@@ -201,7 +201,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
   display: flex;
   flex-direction: column;
   // gap: 1rem; //cart template modal issue
-  padding: 10px 16px;
+  // padding: 10px 16px;
   width: 100%;
   overflow-y: auto;
 
@@ -221,7 +221,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       font-weight: 700;
     }
 
-    input,
+    input[type="radio"],
     textarea {
       width: 100%;
       padding: 0.5rem 0.75rem;
@@ -270,40 +270,36 @@ $resizeActive: '[data-cms-element-resizer="true"]';
       align-items: center;
       gap: 1rem;
 
-      .dropdown {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        max-width: 400px;
-
-        .quick-order-product-dropdown-section {
-          padding: 0rem;
-          border: 1px solid #d1d5db;
-          border-radius: 0.375px;
-
-          &:focus {
-            &:focus {
-              border-color: #2563eb;
-              box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
-            }
-          }
-
-          .dropdown-input-section {
-            padding: 0.5rem;
-
-            .input-field {
-              border: none;
-              box-shadow: none;
-              padding: 0px;
-            }
-
-            .dropdown-menu {
-              top: 40px;
-            }
-          }
-        }
-      }
+      // .dropdown {
+      //   flex: 1;
+      //   display: flex;
+      //   flex-direction: column;
+      //   gap: 8px;
+      //   max-width: 400px;
+
+      //   .quick-order-product-dropdown-section {
+      //     &:focus {
+      //       &:focus {
+      //         border-color: #2563eb;
+      //         box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
+      //       }
+      //     }
+
+      //     .dropdown-input-section {
+      //       // padding: 0.5rem;
+
+      //       .input-field {
+      //         border: none;
+      //         box-shadow: none;
+      //         padding: 0px;
+      //       }
+
+      //       .dropdown-menu {
+      //         top: 40px;
+      //       }
+      //     }
+      //   }
+      // }
 
       .checkbox-wrapper {
         display: flex;
@@ -364,9 +360,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 
           .delete-icon {
             cursor: pointer;
+            display: flex;
             svg {
-              width: 20px;
-              height: 20px;
+              width: 24px;
+              height: 24px;
               path {
                 stroke: #6b7280; // gray-500
               }
@@ -408,14 +405,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     .discard-btn {
       background: none;
       border: none;
-      padding: 12px 24px;
-      color: #374151;
-      font-size: 0.875rem;
+      padding: 8px 16px;
+      color: var(--_gray-600);
+      font-size: 16px;
       cursor: pointer;
       line-height: 24px;
+      border-radius: 6px;
 
       &:hover {
-        text-decoration: underline;
+        background-color: var(--_gray-50);
+        color: var(--_gray-900);
       }
     }
   }
@@ -428,8 +427,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
 .cart_products_wrapper,
 .infinite-list-container {
   flex: 1 1 auto;
-    overflow-y: auto;
-    // padding: 1rem;
+  overflow-y: auto;
+  // padding: 1rem;
 
   .cart_item_wrapper {
     border-radius: 4px;
@@ -498,10 +497,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
               font-size: 18px;
               font-weight: 700;
               line-height: 28px;
-width: 380px;
+              width: 380px;
               white-space: nowrap;
               overflow: hidden;
-              text-overflow: ellipsis;            }
+              text-overflow: ellipsis;
+            }
 
             .product_code {
               display: flex;
@@ -575,8 +575,8 @@ width: 380px;
               font-size: 14px;
               font-weight: 400;
               line-height: 20px;
-              .attr_val_info_detail{
-                b{
+              .attr_val_info_detail {
+                b {
                   margin-right: 4px;
                 }
               }
@@ -590,18 +590,18 @@ width: 380px;
                   width: 18px;
                   height: 18px;
                   margin-top: 2px;
-                   transition: transform 400ms linear;
+                  transition: transform 400ms linear;
                 }
               }
             }
-            .svg_icon svg{
+            .svg_icon svg {
               vertical-align: middle;
             }
             .svg_icon.down svg {
               transform: rotate(180deg);
-               transition: transform 400ms linear;
+              transition: transform 400ms linear;
               //  width: 20px;
-                  // height: 20px;
+              // height: 20px;
             }
             .customizationInfo_button {
               display: flex;
@@ -709,7 +709,6 @@ width: 380px;
                 border-left: 1px solid #d0d5dd;
                 max-width: 80px;
                 text-align: center;
-                
               }
             }
           }
@@ -737,30 +736,28 @@ width: 380px;
             }
             &:hover {
               svg {
-              path {
-                stroke: var(--_error-700);
+                path {
+                  stroke: var(--_error-700);
+                }
               }
             }
-            }
           }
           .svg_icon {
             display: flex;
             justify-content: center;
             align-items: center;
-            
+
             &:hover {
               svg {
-              path {
-                stroke: var(--_gray-900);
+                path {
+                  stroke: var(--_gray-900);
+                }
               }
             }
-
-            }
             svg {
               path {
                 stroke: var(--_gray-600);
               }
-             
             }
           }
           .product_action_button {
@@ -1400,10 +1397,10 @@ width: 380px;
 //   }
 // }
 
- .cart-item-attr-grid {
+.cart-item-attr-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
-  gap: 1rem; 
+  gap: 1rem;
   margin-top: 24px;
 
   .attr-grid-item {
@@ -1412,4 +1409,4 @@ width: 380px;
     border-radius: 6px;
     background-color: var(--_base-white);
   }
-}
+}