npm - @sc-360-v2/storefront-cms-library - Versions diffs - 0.3.59 → 0.3.61 - Mend

@sc-360-v2/storefront-cms-library 0.3.59 → 0.3.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/dist/builder.js +1 -1
package/dist/button.scss +1 -1
package/dist/cart-details.scss +1 -1
package/dist/category-groups-element.scss +130 -0
package/dist/employee-bulk-order.scss +425 -373
package/dist/icons.js +1 -1
package/dist/index.js +1 -1
package/dist/modal.scss +1 -0
package/dist/order-status.scss +1319 -1257
package/dist/prefix-list.scss +1 -0
package/dist/product-image.scss +12 -1
package/dist/types/builder/enums/index.d.ts +4 -2
package/dist/widget.scss +1 -0
package/package.json +1 -1

package/dist/employee-bulk-order.scss CHANGED Viewed

@@ -3536,465 +3536,517 @@
   border-radius: 6px;
   padding: 16px;
   color: #333333;
-  .order-header {
-    border-bottom: 1px solid #eaecf0;
-    padding-bottom: 24px;
-    .user-info {
-      display: flex;
-      flex-direction: column;
-      h3 {
-        font-size: 20px;
-        font-weight: 600;
-        color: #101828;
-        line-height: 30px;
-        span {
-          margin-left: 6px;
-          svg {
-            path {
-              stroke: #475467;
+  .each-order {
+    border: 1px solid var(--_gray-200);
+    border-radius: 8px;
+    padding: 16px;
+    .order-header {
+      border-bottom: 1px solid #eaecf0;
+      padding-bottom: 24px;
+      .user-info {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 12px;
+        margin-bottom: 12px;
+        border-bottom: 1px solid var(--_gray-200);
+        h3 {
+          font-size: 20px;
+          font-weight: 700;
+          color: var(--_gray-900);
+          line-height: 30px;
+          margin-bottom: 6px;
+          span {
+            margin-left: 6px;
+            svg {
+              path {
+                stroke: #475467;
+              }
             }
           }
         }
-      }
-      .user-meta-list {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        .meta-item {
+        .user-meta-list {
           display: flex;
-          flex-direction: row;
           align-items: center;
-          .meta-icon {
-            svg {
-              width: 12px;
-              height: 12px;
+          gap: 12px;
+          .meta-item {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            .meta-icon {
+              display: flex;
+              svg {
+                width: 18px;
+                height: 18px;
+              }
+              padding-right: 6px;
+            }
+            .meta-text {
+              font-size: 12px;
+              font-weight: 400;
+              color: #475467;
+              line-height: 18px;
+            }
+            &:not(:first-child)::before {
+              content: "";
+              display: inline-block;
+              width: 5px;
+              height: 5px;
+              background: #d0d5dd;
+              border-radius: 50%;
+              margin-right: 12px;
             }
-            padding-right: 6px;
-          }
-          .meta-text {
-            font-size: 12px;
-            font-weight: 400;
-            color: #475467;
-            line-height: 18px;
-          }
-          &:not(:first-child)::before {
-            content: "";
-            display: inline-block;
-            width: 5px;
-            height: 5px;
-            background: #d0d5dd;
-            border-radius: 50%;
-            margin-right: 12px;
           }
         }
       }
     }
-  }
-  .order-successful {
-    display: flex;
-    align-items: center;
-    // background: #f0fdf4;
-    // border-radius: 6px;
-    // padding: 16px;
-    // margin-bottom: 24px;
-    background-color: #f6fef9;
-    border-radius: 6px;
-    border: 1px solid #d0d5dd;
-    padding: 12px;
-    .check-icon {
-      font-size: 28px;
-      margin-right: 12px;
-    }
-    .success-text {
+    .order-successful,
+    .order-pending,
+    .order-failed {
       display: flex;
-      flex-direction: column;
-      justify-content: center;
-      gap: 8px;
-      .success_toast_header {
+      align-items: center;
+      // background: #f0fdf4;
+      // border-radius: 6px;
+      // padding: 16px;
+      // margin-bottom: 24px;
+      background-color: #f6fef9;
+      border-radius: 6px;
+      border: 1px solid #d0d5dd;
+      padding: 12px;
+      margin-block: 16px;
+      .check-icon {
+        font-size: 28px;
+        margin-right: 12px;
+      }
+      .success-text {
         display: flex;
-        gap: 6px;
-        align-items: center;
-        .success__dropdown__icon {
-          svg {
-            width: 32px;
-            height: 32px;
-            path {
-              stroke: #099250;
-              fill: #ffffff;
-              stroke-width: 0.8;
+        flex-direction: column;
+        justify-content: center;
+        gap: 8px;
+        .success_toast_header {
+          display: flex;
+          gap: 6px;
+          align-items: center;
+          .success__dropdown__icon {
+            display: flex;
+            svg {
+              width: 24px;
+              height: 24px;
+              path {
+                stroke: #099250;
+                fill: #fff;
+              }
             }
           }
+          h2 {
+            color: #101828;
+            font-size: 20px;
+            font-weight: 600;
+            line-height: 32px;
+            font-family: "Lato";
+          }
         }
-        h2 {
-          color: #101828;
-          font-size: 24px;
-          font-weight: 600;
-          line-height: 32px;
-          font-family: "Lato";
+        p {
+          color: #475467;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
         }
       }
-      p {
-        color: #475467;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 20px;
+    }
+    .order-failed {
+      background-color: var(--_error-100);
+      border: 1px solid var(--_error-200);
+      .success__dropdown__icon {
+        svg path {
+          stroke: var(--_error-700) !important;
+        }
       }
     }
-  }
-  .error_toast_message_wrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #fffbfa;
-    border-radius: 6px;
-    border: 1px solid #fda29b;
-    padding: 12px;
-    .error_toast_message_left_section {
+    .order-pending {
+      background-color: #f5f6f9;
+      border: 1px solid #c5d2fc;
+      svg path {
+        stroke: var(--_primary-700);
+      }
+    }
+    .error_toast_message_wrapper {
       display: flex;
-      flex-direction: column;
-      gap: 8px;
-      .error_toast_message_header {
+      justify-content: space-between;
+      align-items: center;
+      background-color: #fffbfa;
+      border-radius: 6px;
+      border: 1px solid #fda29b;
+      padding: 12px;
+      .error_toast_message_left_section {
         display: flex;
+        flex-direction: column;
         gap: 8px;
-        align-items: center;
-        h2 {
-          color: #101828;
-          font-size: 24px;
-          font-weight: 600;
-          line-height: 32px;
-          font-family: "Lato";
-        }
-        .error__dropdown__icon {
-          svg {
-            width: 32px;
-            height: 32px;
-            path {
-              stroke: #d92d20;
-              fill: #ffffff;
-              stroke-width: 0.8;
+        .error_toast_message_header {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+          h2 {
+            color: #101828;
+            font-size: 24px;
+            font-weight: 600;
+            line-height: 32px;
+            font-family: "Lato";
+          }
+          .error__dropdown__icon {
+            svg {
+              width: 32px;
+              height: 32px;
+              path {
+                stroke: #d92d20;
+                fill: #ffffff;
+                stroke-width: 0.8;
+              }
             }
           }
         }
+        p {
+          color: #475467;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+        }
       }
-      p {
-        color: #475467;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 20px;
+      .error_message_btn {
+        background-color: #243dc6;
+        color: #ffffff;
+        border-radius: 6px;
+        font-size: 16px;
+        font-weight: 600;
+        padding: 12px 24px;
       }
     }
-    .error_message_btn {
-      background-color: #243dc6;
-      color: #ffffff;
-      border-radius: 6px;
-      font-size: 16px;
-      font-weight: 600;
-      padding: 12px 24px;
-    }
-  }
-  .order-details-wrapper {
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    gap: 48px;
-    padding-bottom: 24px;
-  }
+    .order-details-wrapper {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 48px;
+      padding-bottom: 24px;
+    }
-  .order-info-section {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    .order_info_header {
-      font-size: 14px;
-      font-weight: 600;
-      color: #101828;
-      padding: 12px 16px;
-      border: 1px solid #eaecf0;
-      border-radius: 6px;
-      background: #f5f5f5;
-      span {
+    .order-info-section {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      .order_info_header {
         font-size: 14px;
         font-weight: 600;
-        color: var(--_gray-600);
+        color: #101828;
+        padding: 12px 16px;
+        border: 1px solid #eaecf0;
+        border-radius: 6px;
+        background: #f5f5f5;
+        span {
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--_gray-600);
+        }
       }
     }
-  }
-  .quick-actions-section {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    .quick_actions_header {
-      font-size: 14px;
-      font-weight: 600;
-      color: #101828;
-      padding: 12px 16px;
-      border: 1px solid #eaecf0;
-      border-radius: 6px;
-      background: #f5f5f5;
-      span {
+    .quick-actions-section {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      .quick_actions_header {
         font-size: 14px;
         font-weight: 600;
-        color: var(--_gray-600);
+        color: #101828;
+        padding: 12px 16px;
+        border: 1px solid #eaecf0;
+        border-radius: 6px;
+        background: #f5f5f5;
+        span {
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--_gray-600);
+        }
       }
     }
-  }
-  .order-info {
-    display: flex;
-    flex-direction: column;
-    /* space between the two rows */
-    .order-row {
-      display: grid;
-      gap: 12px 24px;
-      /* 12px vertical, 24px horizontal */
-      /* First row: two equal columns + bottom border */
-      &:first-child {
-        grid-template-columns: repeat(2, 1fr);
-        border-bottom: 1px dashed var(--_gray-400);
-        padding-bottom: 24px;
-      }
-      /* Second row: three equal columns */
-      &:nth-child(2) {
-        grid-template-columns: repeat(3, 1fr);
-        margin-top: 24px;
-      }
-      /* Each individual info‐cell styling */
-      > div {
-        strong {
-          display: block;
-          font-size: 14px;
-          color: var(--_gray-500);
-          line-height: 20px;
-          margin-bottom: 4px;
-          font-weight: 400;
+    .order-info {
+      display: flex;
+      flex-direction: column;
+      /* space between the two rows */
+      .order-row {
+        display: grid;
+        gap: 12px 24px;
+        /* 12px vertical, 24px horizontal */
+        /* First row: two equal columns + bottom border */
+        &:first-child {
+          grid-template-columns: repeat(2, 1fr);
+          border-bottom: 1px dashed var(--_gray-400);
+          padding-bottom: 24px;
         }
-        p {
-          margin: 0;
-          margin-bottom: 4px;
-          font-size: 20px;
-          font-weight: 600;
-          color: var(--_gray-900);
-          line-height: 30px;
-        }
-        .delivery_address {
-          font-size: 14px;
-          font-weight: 400;
-          color: var(--_gray-400);
-          line-height: 20px;
-        }
-        .shipping-type {
-          font-size: 14px;
-          font-weight: 400;
-          color: var(--_gray-900);
-          line-height: 20px;
+        /* Second row: three equal columns */
+        &:nth-child(2) {
+          grid-template-columns: repeat(3, 1fr);
+          margin-top: 24px;
         }
-        .status {
-          margin-left: 6px;
-          padding: 2px 8px;
-          border-radius: 4px;
-          font-size: 12;
-          font-weight: 500;
-          line-height: 18px;
-        }
+        /* Each individual info‐cell styling */
+        > div {
+          strong {
+            display: block;
+            font-size: 14px;
+            color: var(--_gray-500);
+            line-height: 20px;
+            margin-bottom: 4px;
+            font-weight: 400;
+          }
-        .link-button {
-          color: #243dc6;
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 20px;
-        }
+          p {
+            margin: 0;
+            margin-bottom: 4px;
+            font-size: 20px;
+            font-weight: 600;
+            color: var(--_gray-900);
+            line-height: 30px;
+          }
+          .delivery_address {
+            font-size: 14px;
+            font-weight: 400;
+            color: var(--_gray-400);
+            line-height: 20px;
+          }
+          .shipping-type {
+            font-size: 14px;
+            font-weight: 400;
+            color: var(--_gray-900);
+            line-height: 20px;
+          }
-        .submitted {
-          font-size: 12px;
-          font-weight: 500;
-          line-height: 18px;
-          background: #eff8ff;
-          color: #0040c1;
-          display: inline-block;
-          height: 22px;
-          &::before {
-            content: "";
+          .status {
+            margin-left: 6px;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 500;
+            line-height: 18px;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            &::before {
+              content: "";
+              display: inline-block;
+              width: 6px;
+              height: 6px;
+              border-radius: 50%;
+            }
+            &.success {
+              background-color: var(--_success-200);
+              &::before {
+                background-color: var(--_success-700);
+              }
+            }
+            &.failed {
+              background-color: var(--_error-100);
+              &::before {
+                background-color: var(--_error-700);
+              }
+            }
+          }
+          .link-button {
+            color: #243dc6;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+          }
+          .submitted {
+            font-size: 12px;
+            font-weight: 500;
+            line-height: 18px;
+            background: #eff8ff;
+            color: #0040c1;
             display: inline-block;
-            width: 6px;
-            height: 6px;
-            background-color: #0040c1;
-            border-radius: 50%;
-            margin-right: 6px;
-            vertical-align: middle;
-            margin-top: -1px;
+            height: 22px;
+            &::before {
+              content: "";
+              display: inline-block;
+              width: 6px;
+              height: 6px;
+              background-color: #0040c1;
+              border-radius: 50%;
+              margin-right: 6px;
+              vertical-align: middle;
+              margin-top: -1px;
+            }
           }
-        }
-        .order-date {
-          font-size: 14px;
-          font-weight: 400;
-          color: var(--_gray-400);
-          line-height: 20px;
-        }
+          .order-date {
+            font-size: 14px;
+            font-weight: 400;
+            color: var(--_gray-400);
+            line-height: 20px;
+          }
-        .inclusive-tax {
-          margin-left: 4px;
-          font-size: 0.7rem;
-          color: #6b7280;
+          .inclusive-tax {
+            margin-left: 4px;
+            font-size: 0.7rem;
+            color: #6b7280;
+          }
         }
       }
     }
-  }
-  .quick-actions {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 8px;
-    color: #243dc6;
-    .action-button {
+    .quick-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
       padding: 8px;
-      font-size: 14px;
-      border-radius: 4px;
-      background: none;
       color: #243dc6;
-      cursor: pointer;
-      text-align: start;
+      .action-button {
+        padding: 8px;
+        font-size: 14px;
+        border-radius: 4px;
+        background: none;
+        color: #243dc6;
+        cursor: pointer;
+        text-align: start;
-      &:hover {
-        color: #0d60e5;
+        &:hover {
+          color: #0d60e5;
+        }
       }
     }
-  }
-  .cart-items {
-    h3 {
-      font-size: 14px;
-      color: #667085;
-      margin-bottom: 24px;
-      line-height: 20px;
-      font-weight: 400;
-    }
-    .items-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 24px;
-      margin-bottom: 24px;
-    }
+    .cart-items {
+      h3 {
+        font-size: 14px;
+        color: #667085;
+        margin-bottom: 24px;
+        line-height: 20px;
+        font-weight: 400;
+      }
-    .item-card {
-      gap: 12px;
-      display: flex;
-      align-items: flex-start;
+      .items-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 24px;
+        margin-bottom: 24px;
+      }
-      img {
-        width: 69px;
-        height: 80px;
-        object-fit: cover;
-        border-radius: 4px;
+      .item-card {
+        gap: 12px;
         display: flex;
         align-items: flex-start;
-      }
-      .item-details {
-        flex: 1;
-        .item-name {
-          display: -webkit-box;
-          -webkit-line-clamp: 1;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          margin: 0 0 4px;
-          font-size: 14px;
-          font-weight: 600;
-          color: var(--_gray-900);
-          line-height: 20px;
+        img {
+          width: 69px;
+          height: 80px;
+          object-fit: cover;
+          border-radius: 4px;
+          display: flex;
+          align-items: flex-start;
         }
-        .item-specs {
-          font-size: 12px;
-          color: #475467;
-          font-weight: 400;
-        }
-        .item-qty {
-          font-size: 12px;
-          font-weight: 400;
-          color: #475467;
-          span {
+        .item-details {
+          flex: 1;
+          .item-name {
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin: 0 0 4px;
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--_gray-900);
+            line-height: 20px;
+          }
+          .item-specs {
             font-size: 12px;
+            color: #475467;
             font-weight: 400;
+          }
+          .item-qty {
+            font-size: 12px;
+            font-weight: 400;
+            color: #475467;
+            span {
+              font-size: 12px;
+              font-weight: 400;
+              color: #101828;
+            }
+          }
+          .estimated-delivery {
+            margin: 0;
+            font-size: 12px;
+            color: var(--_gray-600);
+            line-height: 18px;
+          }
+          .delivery-date {
+            margin: 0;
+            font-size: 12px;
+            font-weight: bold;
             color: #101828;
           }
         }
-        .estimated-delivery {
-          margin: 0;
-          font-size: 12px;
-          color: var(--_gray-600);
-          line-height: 18px;
-        }
-        .delivery-date {
-          margin: 0;
+        .item-price {
           font-size: 12px;
-          font-weight: bold;
-          color: #101828;
+          font-weight: 600;
+          color: #1e293b;
+          margin-left: 12px;
         }
       }
-      .item-price {
-        font-size: 12px;
-        font-weight: 600;
-        color: #1e293b;
-        margin-left: 12px;
-      }
-    }
-    .show-more-wrapper {
-      margin: 32px 16px 16px 0px;
-      button {
-        padding: 12px 16px;
-        color: var(--_primary-400);
-        font-weight: 600;
-        border-radius: 6px;
-        &:hover {
-          background-color: var(--_primary-25);
+      .show-more-wrapper {
+        margin: 32px 16px 16px 0px;
+        button {
+          padding: 12px 16px;
+          color: var(--_primary-400);
+          font-weight: 600;
+          border-radius: 6px;
+          &:hover {
+            background-color: var(--_primary-25);
+          }
         }
       }
     }
-  }
-  .order-attributes {
-    border-top: 1px solid #eaecf0;
-    padding-top: 24px;
+    .order-attributes {
+      border-top: 1px solid #eaecf0;
+      padding-top: 24px;
-    h4 {
-      font-size: 14px;
-      font-weight: 400;
-      color: var(--_gray-500);
-      line-height: 20px;
-    }
+      h4 {
+        font-size: 14px;
+        font-weight: 400;
+        color: var(--_gray-500);
+        line-height: 20px;
+      }
-    p {
-      font-size: 14px;
-      font-weight: 600;
-      line-height: 20px;
-      color: var(--_gray-900);
+      p {
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 20px;
+        color: var(--_gray-900);
+      }
     }
-  }
-  @media (max-width: 768px) {
-    .order-details-wrapper {
-      grid-template-columns: 1fr;
-    }
+    @media (max-width: 768px) {
+      .order-details-wrapper {
+        grid-template-columns: 1fr;
+      }
-    .items-grid {
-      grid-template-columns: 1fr;
+      .items-grid {
+        grid-template-columns: 1fr;
+      }
     }
   }
 }