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

package/dist/employee-bulk-order.scss

@@ -72,9 +72,30 @@
     font-weight: 600;
     font-size: 14px;
     text-align: center;
-    height: 36px;
-    display: grid;
-    align-items: anchor-center;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    padding: 0 12px;
+    .products_header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    .employee_product_actions_sec {
+      width: 50%;
+      display: flex;
+      justify-content: right;
+      gap: 12px;
+      .employee_product_action {
+        padding: 8px;
+        color: #667085;
+      }
+
+      .employee_product_action_save {
+        color: #243dc6;
+      }
+    }
   }
   .employee-content-section {
     display: flex;
@@ -246,12 +267,49 @@
           border-top: 0;
           .em_product-data {
             width: 100%;
-            // height: 177px;
             border-bottom: 1px solid #d0d5dd;
             .em_product-info {
               height: 88px;
               border-bottom: 1px solid #d0d5dd;
             }
+            .selecte_variants_for_cart {
+              height: 68px;
+              overflow: auto;
+              cursor: pointer;
+              .variantOptionValues {
+                height: 24px;
+                color: #475467;
+                font-size: 14px;
+                padding: 0 8px;
+                margin-bottom: 1px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                &:hover {
+                  background: #e6f0ff;
+                  .variantOptionValues_acttions {
+                    opacity: 1;
+                  }
+                }
+                .variantOptionValues_text {
+                  width: calc(100% - 40px);
+                  padding-right: 4px;
+                }
+                .variantOptionValues_acttions {
+                  display: flex;
+                  gap: 8px;
+                  align-items: center;
+                  width: 40px;
+                  opacity: 0;
+                  .svg_icon {
+                    display: flex;
+                  }
+                }
+              }
+              .active_vr {
+                background: #e6f0ff;
+              }
+            }
             .em_product-variant,
             .em_product-info {
               // height: 50%;
@@ -285,7 +343,7 @@
             }
           }
           .product-option-details {
-            height: calc(100% - 204px);
+            height: calc(100% - 214px);
             width: 100%;
             overflow: auto;
             .em_p_variant_options {
@@ -309,6 +367,8 @@
                   }
                   .em_opt_val.selected {
                     border: 1px solid #243dc6;
+                    color: #243dc6;
+                    font-weight: 600;
                   }
                   .em_opt_val.not-avl {
                     position: relative;
@@ -360,50 +420,62 @@
             }
           }
           .product-qty-section {
-            height: 46px;
-            position: relative;
+            height: 56.74px;
+            display: flex;
+            gap: 8px;
+            padding: 8px;
+            border-top: 1px solid #dde0e6;
             input {
               height: 100%;
-              width: 100%;
+              width: 50%;
               border: 1px solid #d0d5dd;
-              /* border-radius: 4px; */
-              border-left: 0;
-              border-right: 0;
-              padding: 0 64px;
+              border-radius: 4px;
               text-align: center;
+              font-weight: 600;
+              font-size: 16px;
+              color: #101828;
             }
-            .qty-action {
-              position: absolute;
-              top: 0;
+            .add_to_cart_btn_for_employee_bulk {
               height: 100%;
-              width: 64px;
-              display: grid;
-              //   align-items: anchor-center;
-              //   text-align: center;
-              background: #e6f0ff;
-              cursor: pointer;
-              &:hover {
-                background: #c3dbff;
-              }
-
-              .svg_icon {
-                display: flex;
-                align-items: center;
-                justify-self: center;
-                cursor: pointer;
-              }
-            }
-            .qty-action.decrease {
-              left: 0;
-            }
-            .qty-action.increase {
-              right: 1px;
-            }
-            .qty_action_disabled {
-              pointer-events: none;
-              opacity: 0.8;
-              cursor: default;
+              width: 50%;
+              background: #243dc6;
+              border-radius: 4px;
+              color: #fff;
+              font-weight: 600;
+              font-size: 16px;
             }
+            // .qty-action {
+            //   position: absolute;
+            //   top: 0;
+            //   height: 100%;
+            //   width: 64px;
+            //   display: grid;
+            //   //   align-items: anchor-center;
+            //   //   text-align: center;
+            //   background: #e6f0ff;
+            //   cursor: pointer;
+            //   &:hover {
+            //     background: #c3dbff;
+            //   }
+
+            //   .svg_icon {
+            //     display: flex;
+            //     align-items: center;
+            //     justify-self: center;
+            //     cursor: pointer;
+            //   }
+            // }
+            // .qty-action.decrease {
+            //   left: 0;
+            // }
+            // .qty-action.increase {
+            //   right: 1px;
+            // }
+            // .qty_action_disabled {
+            //   pointer-events: none;
+            //   opacity: 0.8;
+            //   cursor: default;
+            // }
           }
           .invalid_qty {
             border: #f51605 1px solid !important;
@@ -417,13 +489,14 @@
   }
 }
 
-.heade-body {
-  position: absolute;
-  right: 84px;
+.right_col {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   .employee_bulk_order_header {
     display: flex;
     justify-self: end;
-    gap: 16px;
+    gap: 24px;
     .single_payment_action {
       display: flex;
       align-items: center;
@@ -449,7 +522,106 @@
         height: 24px;
         background: #d0d5dd;
         position: absolute;
-        right: -8px;
+        right: -12px;
+      }
+
+      .single_checkout_sec_opt {
+        display: flex;
+        gap: 8px;
+      }
+
+      .disabled {
+        opacity: 0.4;
+      }
+    }
+    .emp_options_wrapper {
+      display: flex;
+      align-items: center;
+      .user_icon {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 4px;
+        cursor: pointer;
+        &.active {
+          background-color: var(--_gray-200);
+        }
+        & > span {
+          display: flex;
+        }
+        &:hover {
+          background-color: var(--_gray-200);
+        }
+      }
+      .emp_options {
+        position: absolute;
+        top: 65px;
+        width: 200px;
+        background-color: var(--_base-white);
+        border: 1px solid var(--_gray-200);
+        border-radius: 4px;
+        .emp_options_header {
+          padding: 12px 16px;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--_gray-600);
+          border-bottom: 1px solid var(--_gray-200);
+        }
+        .emp_options_list {
+          .emp_options_list_item {
+            padding: 12px 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            &:hover {
+              background-color: var(--_primary-25);
+              color: var(--_primary-400);
+            }
+          }
+        }
+        .emp_options_footer {
+          display: flex;
+          border-top: 1px solid var(--_gray-200);
+          & > div {
+            flex-basis: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 16px;
+            cursor: pointer;
+            &:hover {
+              background-color: var(--_primary-25);
+              svg path {
+                stroke: var(--_primary-400);
+              }
+            }
+          }
+        }
+      }
+    }
+    .emp_review_cart_btn {
+      padding: 8px 16px;
+      border: 1px solid var(--_gray-300);
+      border-radius: 6px;
+      color: var(--_gray-700);
+      cursor: pointer;
+      &:hover {
+        background-color: var(--_gray-50);
+      }
+    }
+    .emp_discard_btn {
+      padding: 8px 16px;
+      border-radius: 6px;
+      color: var(--_gray-700);
+      cursor: pointer;
+      &.disabled {
+        pointer-events: none;
+        opacity: 0.8;
+      }
+      &:hover {
+        background-color: var(--_gray-50);
       }
     }
     .action_item {

package/dist/empty-states.scss

@@ -1,84 +1,84 @@
 .empty_template {
-display: flex;
-flex-direction: column;
-justify-content: center;
-align-items: center;
-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
 
-h3 {
+  h3 {
     font-size: 16px;
     color: var(--_gray-900);
     font-weight: 600;
     margin-bottom: 10px;
-}
-p {
+  }
+  p {
     font-size: 12px;
     color: var(--_gray-600);
-}
+  }
 }
 
 .empty_cart_wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    gap: 6px;
-    margin-top: 24px;
-    img {
-        max-width: 100px;
-        max-height: 100px;
-    }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: 6px;
+  margin-top: 24px;
+  img {
+    max-width: 100px;
+    max-height: 100px;
+  }
 
-    .empty_msg_title {
-      font-family: "Lato";
-      font-weight: 700;
-      font-size: 24px;
-      color: var(--_gray-900);
-      line-height: 32px;
-      margin-top: 24px;
-    }
+  .empty_msg_title {
+    font-family: "Lato";
+    font-weight: 700;
+    font-size: 24px;
+    color: var(--_gray-900);
+    line-height: 32px;
+    margin-top: 24px;
+  }
 
-    .empty_msg_desc {
-      font-family: "Lato";
-      font-size: 14px;
-      line-height: 20px;
-      color: var(--_gray-900);
-    }
-    .emtpy_cart_btn {
+  .empty_msg_desc {
+    font-family: "Lato";
+    font-size: 14px;
+    line-height: 20px;
+    color: var(--_gray-900);
+  }
+  .emtpy_cart_btn {
+    display: flex;
+    gap: 12px;
+    margin-top: 24px;
+    .empty_crt_btn {
+      padding: 12px 24px;
+      border-radius: 6px;
+      background-color: var(--_primary-400);
+      font-weight: 600px;
       display: flex;
-      gap: 12px;
-      margin-top: 24px;
-      .empty_crt_btn {
-        padding: 12px 24px;
-        border-radius: 6px;
-        background-color: var(--_primary-400);
-        font-weight: 600px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        &:hover {
-          background-color: var(--_primary-500);
-        }
-        .label {
-          color: var(--_base-white);
-          font-size: 16px;
-        }
-        svg path {
-          stroke: var(--_base-white);
-        }
+      align-items: center;
+      gap: 8px;
+      &:hover {
+        background-color: var(--_primary-500);
       }
-      .empty_wl_btn {
-padding: 12px 24px;
-        border-radius: 6px;
-        background-color: var(--_base-white);
-        color: var(--_primary-400);
-        font-weight: 500;
+      .label {
+        color: var(--_base-white);
         font-size: 16px;
-        &:hover {
-          background-color: var(--_gray-50);
-        }
       }
-      
+      svg path {
+        stroke: var(--_base-white);
+      }
+    }
+    .empty_wl_btn {
+      padding: 12px 24px;
+      border-radius: 6px;
+      background-color: var(--_base-white);
+      color: var(--_primary-400);
+      font-weight: 500;
+      font-size: 16px;
+      &:hover {
+        background-color: var(--_gray-50);
+      }
     }
-  }
+  }
+}

package/dist/functions.scss

@@ -1,5 +1,7 @@
 @use "sass:list";
 @use "sass:map";
+@use "sass:meta";
+@use "sass:string";
 
 // $breakPoints: (
 //   desktop: (
@@ -36,7 +38,7 @@ $breakPointsV2: (
 );
 
 @function safe-map-get($map, $key) {
-  @if $map != null and type-of($map) == "map" and map-has-key($map, $key) {
+  @if $map != null and meta.type-of($map) == "map" and map.has-key($map, $key) {
     @return map.get($map, $key);
   }
   @return null;
@@ -91,14 +93,14 @@ $breakPointsV2: (
     mobile: $mobile,
   );
   @if ($laptop != "optional") {
-    $list: map-merge(
+    $list: map.merge(
       $list,
       (
         laptop: $laptop,
       )
     );
   } @else {
-    $list: map-merge(
+    $list: map.merge(
       $list,
       (
         laptop: $desktop,
@@ -131,7 +133,7 @@ $breakPointsV2: (
     justify-content: space-between,
     gap: var(--_default-row-gap) var(--_default-col-gap),
   );
-  $css: map-merge($css, $props);
+  $css: map.merge($css, $props);
   @return $css;
 }
 
@@ -197,7 +199,7 @@ $breakPointsV2: (
 
 @function prepareMediaVariable($full-var, $common: inherit) {
   $prefix: "--_ctm-";
-  $core-name: str-slice($full-var, str-length($prefix) + 1); // removes --_ctm-
+  $core-name: string.slice($full-var, string.length($prefix) + 1); // removes --_ctm-
 
   $default-var: var(#{$full-var}, #{$common});
   $tab-var: var(#{$prefix}tab-#{$core-name}, #{$default-var});