@sc-360-v2/storefront-cms-library 0.2.79 → 0.2.80

package/dist/buy-for-tabs-container-item.scss

@@ -0,0 +1,80 @@
+@use "sass:map";
+@use "sass:list";
+[data-div-type="element"] {
+  &[data-element-type="buyForTabsContainer"] {
+    width: 100%;
+    & > div {
+      &.wrapper {
+        width: 100%;
+        height: 100%;
+        padding: var(--_ctm-mob-repe-lt-pg, var(--_ctm-tab-repe-lt-pg, var(--_ctm-repe-lt-pg)));
+
+        background-color: var(
+          --_ctm-mob-repe-dn-bd-cr,
+          var(--_ctm-tab-repe-dn-bd-cr, var(--_ctm-repe-dn-bd-cr))
+        );
+        background-image: var(
+          --_ctm-mob-repe-dn-bd-ie,
+          var(--_ctm-tab-repe-dn-bd-ie, var(--_ctm-repe-dn-bd-ie))
+        );
+        background-attachment: var(
+          --_ctm-mob-repe-dn-bd-at,
+          var(--_ctm-tab-repe-dn-bd-at, var(--_ctm-repe-dn-bd-at))
+        );
+        background-position: var(
+          --_ctm-mob-repe-dn-bd-pn,
+          var(--_ctm-tab-repe-dn-bd-pn, var(--_ctm-repe-dn-bd-pn))
+        );
+        background-repeat: var(
+          --_ctm-mob-repe-dn-bd-rt,
+          var(--_ctm-tab-repe-dn-bd-rt, var(--_ctm-repe-dn-bd-rt))
+        );
+        background-size: var(
+          --_ctm-mob-repe-dn-bd-se,
+          var(--_ctm-tab-repe-dn-bd-se, var(--_ctm-repe-dn-bd-se))
+        );
+        border-radius: var(
+          --_ctm-mob-repe-dn-br-rs,
+          var(--_ctm-tab-repe-dn-br-rs, var(--_ctm-repe-dn-br-rs))
+        );
+        border-color: var(
+          --_ctm-mob-repe-dn-br-cr,
+          var(--_ctm-tab-repe-dn-br-cr, var(--_ctm-repe-dn-br-cr))
+        );
+        border-style: var(
+          --_ctm-mob-repe-dn-br-se,
+          var(--_ctm-tab-repe-dn-br-se, var(--_ctm-repe-dn-br-se))
+        );
+        border-width: var(
+          --_ctm-mob-repe-dn-br-wh,
+          var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
+        );
+        box-shadow: var(
+          --_hover-show-shadow,
+          var(
+            --_sf-hr-bx-sw,
+            var(
+              --_show-shadow,
+              var(
+                  --_ctm-mob-dn-dt-se-sw-ae,
+                  var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-br,
+                  var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-sd,
+                  var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
+                )
+                var(
+                  --_ctm-mob-dn-dt-se-sw-cr,
+                  var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
+                )
+            )
+          )
+        );
+      }
+    }
+  }
+}

package/dist/buyForHeaders.scss

@@ -0,0 +1,203 @@
+.buy-for-container {
+  padding: 1rem;
+  font-family: "Arial", sans-serif;
+
+  .buy-for-header {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+
+    h1 {
+      font-size: 1.5rem;
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+
+      .separator {
+        margin: 0 0.5rem;
+        color: #ccc;
+      }
+
+      a {
+        font-size: 1rem;
+        color: #6c757d;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .impersonate-manage {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+
+      .impersonate-text {
+        background: #f3f5f7;
+        padding: 0.4rem 0.8rem;
+        border-radius: 5px;
+        font-size: 0.9rem;
+      }
+
+      .manage-link {
+        color: #0056d2;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+
+      .employee-switch {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        button {
+          background: white;
+          border: 1px solid #ddd;
+          padding: 0.3rem 0.6rem;
+          border-radius: 6px;
+          cursor: pointer;
+          font-size: 1.2rem;
+
+          &:hover {
+            background-color: #f0f0f0;
+          }
+        }
+
+        #employee-count {
+          font-size: 0.95rem;
+        }
+      }
+    }
+  }
+
+  .employee-info {
+    border-top: 1px solid #eee;
+    padding-top: 1rem;
+    .employee-details-section {
+      display: flex;
+      justify-content: space-between;
+      .employee-details {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+
+        .employee-name {
+          font-size: 1.3rem;
+          font-weight: bold;
+          display: flex;
+          align-items: center;
+
+          .external-link-icon {
+            margin-left: 0.5rem;
+            font-size: 1rem;
+            text-decoration: none;
+          }
+        }
+
+        .autosave-info {
+          background: #e6f9ee;
+          color: #28a745;
+          padding: 0.4rem 0.8rem;
+          border-radius: 5px;
+          font-size: 0.85rem;
+        }
+      }
+    }
+
+    .employee-meta {
+      display: flex;
+      align-items: center;
+      margin: 0.8rem 0;
+      flex-wrap: wrap;
+
+      .meta-item {
+        font-size: 0.9rem;
+        color: #555;
+      }
+
+      .meta-separator {
+        margin: 0 0.5rem;
+        color: #bbb;
+      }
+    }
+
+    .employee-address-info {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1.5rem;
+      margin-top: 1rem;
+
+      .info-block {
+        min-width: 160px;
+
+        h4 {
+          font-size: 0.95rem;
+          color: #6c757d;
+          margin-bottom: 0.2rem;
+        }
+
+        p {
+          font-weight: bold;
+          font-size: 0.95rem;
+          color: #222;
+        }
+      }
+
+      .cart-block {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        .cart-icon {
+          position: relative;
+          font-size: 1.8rem;
+
+          .cart-count {
+            background: #ffcd00;
+            color: #000;
+            border-radius: 50%;
+            font-size: 0.8rem;
+            padding: 0.2rem 0.4rem;
+            position: absolute;
+            top: -10px;
+            right: -10px;
+          }
+        }
+
+        .cart-price {
+          h4 {
+            font-size: 0.95rem;
+            margin-bottom: 0;
+          }
+
+          p {
+            font-weight: bold;
+            font-size: 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  // Responsive
+  @media (max-width: 768px) {
+    .buy-for-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.8rem;
+    }
+
+    .employee-address-info {
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+}

package/dist/{buyFor.scss → buyForPopup.scss}

@@ -14,23 +14,24 @@
   max-width: 600px;
   background: #ffffff;
   border-radius: 12px;
-  padding: 24px;
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
-  max-height: 80vh;
+  max-height: 83vh;
   overflow-y: auto;
 }
 
 .popup_header {
   display: flex;
-  flex-direction: column;
-  margin-bottom: 16px;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--_gray-200);
+  padding: 16px 24px;
 
   h2 {
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 600;
     margin: 0;
+    line-height: 28px;
   }
 
   p {
@@ -40,6 +41,38 @@
   }
 }
 
+.popup_headertitle {
+  ul {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 14px;
+    color: var(--_gray-600);
+
+    li {
+      &::after {
+        background: var(--_gray-300);
+        width: 5px;
+        height: 5px;
+        content: " ";
+        border-radius: 50%;
+        display: inline-block;
+        margin-left: 12px;
+      }
+
+      &:last-child::after {
+        padding: 0;
+        width: 0;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.popup_body {
+  padding: 24px;
+}
+
 .search_input {
   padding: 10px 12px;
   border: 1px solid #ddd;
@@ -47,7 +80,7 @@
   margin-bottom: 16px;
   width: 100%;
   font-size: 14px;
-  width: 300px !important;
+  // width: 300px !important;
   height: 40px !important;
   border: 1px solid var(--_gray-200) !important;
 
@@ -71,31 +104,44 @@
     align-items: center;
     gap: 8px;
     font-weight: 500;
-    font-size: 15px;
+    font-size: 14px;
     margin-bottom: 8px;
+    padding: 8px;
+    border-bottom: 1px solid var(--_gray-200);
+
     input {
       width: auto;
     }
+
+    label {
+      color: var(--_gray-600);
+      font-size: 14px;
+      font-weight: 400;
+    }
   }
 
   .user_card {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 12px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    margin-bottom: 6px;
+    padding: 16px;
+    border: 1px solid var(--_gray-200);
+    border-radius: 6px;
+    margin-bottom: 8px;
     cursor: pointer;
     transition: all 0.2s ease;
 
+    &:last-child {
+      margin-bottom: 0;
+    }
+
     &:hover {
-      background-color: #f5f5f5;
+      background-color: var(--_primary-25);
     }
 
     &.selected {
-      background-color: #e6f4ff;
-      border-color: #007bff;
+      background-color: var(--_primary-25);
+      border-color: var(--_primary-300);
     }
 
     .user_info {
@@ -109,14 +155,18 @@
       .user_id {
         font-size: 12px;
         color: #666;
+        display: flex;
+        gap: 4px;
+        margin-top: 6px;
       }
     }
 
     .selected_icon {
       font-size: 16px;
+
       svg {
         path {
-          stroke: var(--_primary-500);
+          stroke: var(--_primary-400);
         }
       }
     }
@@ -125,12 +175,13 @@
 
 .popup_footer {
   display: flex;
-  justify-content: space-between;
-  margin-top: 24px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--_gray-200);
+  justify-content: end;
 
   button {
     padding: 10px 16px;
-    border-radius: 6px;
+    border-radius: 4px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
@@ -138,20 +189,33 @@
     transition: background 0.2s ease;
 
     &:first-child {
-      background: #f3f3f3;
+      // background: #f3f3f3;
       color: #333;
 
       &:hover {
-        background: #e0e0e0;
+        // background: #e0e0e0;
       }
     }
 
     &.proceed_button {
-      background: #007bff;
+      background: var(--_primary-400);
       color: #fff;
+      display: flex;
+      gap: 10px;
+
+      span {
+        svg {
+          width: 18px;
+          height: 18px;
+
+          path {
+            stroke: #ffffff;
+          }
+        }
+      }
 
       &:disabled {
-        background: #ccc;
+        background: var(--_primary-100);
         cursor: not-allowed;
       }
 

package/dist/cart-details.scss

@@ -359,7 +359,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
     align-items: center;
 
     .create-btn {
-      background-color: #2563eb;
+      background-color: #243dc6;
       color: #fff;
       padding: 0.5rem 1rem;
       border-radius: 0.375rem;

package/dist/cart-products-sidebar.scss

@@ -0,0 +1,201 @@
+@use "sass:map";
+@use "sass:list";
+
+// Variables
+$primary-color: #243dc6;
+$text-color: #2d2d2d;
+$background-color: #ffffff;
+$border-radius: 8px;
+$input-border: #e0e0e0;
+$error-color: #e53935;
+$hint-color: #7d7d7d;
+$shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+
+// Sidebar Overlay
+.sidebar__overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  background: rgba(112, 112, 112, 0.13);
+  z-index: 9999;
+}
+
+.sidebar__container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 220px;
+  max-width: 100%;
+  height: 100vh;
+  background: $background-color;
+  box-shadow: $shadow;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  animation: slide-in 0.3s ease-out;
+  overflow-y: auto;
+
+  @keyframes slide-in {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
+}
+
+// Sidebar Header
+.sidebar__header {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px 16px;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  z-index: 1;
+
+  h2 {
+    font-size: 18px;
+    font-weight: 600;
+    color: $text-color;
+    margin: 0;
+  }
+
+  .close__btn {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+}
+
+// Sidebar Footer
+.sidebar__footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 12px;
+  border-top: 1px solid #eee;
+
+  .discard__btn {
+    background: none;
+    border: none;
+    color: $text-color;
+    cursor: pointer;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
+
+  .share__btn {
+    background: $primary-color;
+    color: $background-color;
+    border: none;
+    padding: 10px 16px;
+    border-radius: $border-radius;
+    cursor: pointer;
+    font-weight: 600;
+    transition: background 0.2s;
+
+    &:hover {
+      // background: darken($primary-color, 5%);
+      background: color-mix(in srgb, #{$primary-color} 95%, transparent 5%);
+    }
+  }
+}
+
+// Cart Popup
+.cart__popup {
+  padding: 12px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.cart__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.total__label {
+  font-size: 16px;
+  font-weight: normal;
+  color: #333;
+}
+
+.total__price {
+  font-size: 20px;
+  font-weight: bold;
+  color: black;
+}
+
+.view-cart__btn {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 15px;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+}
+
+// Cart Content
+.cart__content {
+  .cart__list-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+
+  .cart__items {
+    .cart__item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-bottom: 20px;
+      text-align: center;
+      padding: 10px;
+      border-bottom: 1px solid #eee;
+
+      .item__info {
+        margin-top: 10px;
+        text-align: center;
+      }
+
+      .item__title {
+        font-size: 16px;
+        font-weight: normal;
+        color: #333;
+        margin-bottom: 5px;
+      }
+
+      .item__price {
+        font-size: 18px;
+        font-weight: bold;
+        color: black;
+      }
+
+      .item__image {
+        max-width: 150px;
+        height: auto;
+        border-radius: 4px;
+      }
+    }
+  }
+}