@sc-360-v2/storefront-cms-library 0.3.5 → 0.3.8

package/dist/builder.js.LICENSE.txt

@@ -1 +1 @@
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */

package/dist/bulk-order-pad.scss

@@ -1,13 +1,6 @@
 .bulk-order-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(30, 28, 44, 0.92);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
+  height: 100%;
 }
-
 .bulk-order-container {
   background: #fff;
   width: 100%;
@@ -20,6 +13,17 @@
     padding: 16px 24px;
     border-bottom: 1px solid #e0e0e0;
   }
+
+  .bulkOrderPad-grid {
+    height: calc(100% - 110px);
+    .bulkOrderPad-content {
+      height: calc(100% - 92px);
+      .bulkOrderPad-section {
+        max-height: calc(100% - 110px);
+        overflow: auto;
+      }
+    }
+  }
 }
 
 .bulk-order-header {
@@ -284,6 +288,7 @@
 
         td.action-td {
           width: 40px;
+          padding: 12px;
           .reset-icon {
             cursor: pointer;
           }

package/dist/button copy.scss

@@ -197,7 +197,8 @@
           --_sf-hr-fc,
           var(--_ctm-mob-dn-dt-se-cr, var(--_ctm-tab-dn-dt-se-cr, var(--_ctm-dn-dt-se-cr)))
         );
-        font-family: var(
+        font-family:
+          var(
             --_sf-hr-ff,
             var(
               --_ctm-mob-dn-dt-se-ft-fy,

package/dist/checkout.scss

@@ -27,6 +27,9 @@ $dark-color: #343a40;
         width: 100%;
       }
     }
+    // .react-international-phone-input-container .react-international-phone-input {
+    //   width: 100%;
+    // }
 
     .checkout_wrapper {
       font-family: Arial, sans-serif;
@@ -141,6 +144,10 @@ $dark-color: #343a40;
               width: auto;
             }
 
+            .error-msg {
+              font-size: 12px;
+              color: #ff0000;
+            }
             label {
               display: flex;
               align-items: center;
@@ -154,22 +161,6 @@ $dark-color: #343a40;
               justify-content: start;
               gap: 8px;
             }
-
-            .submit-btn {
-              align-self: flex-start;
-              margin-top: 1rem;
-              background-color: $primary-color;
-              color: $light-color;
-              border: none;
-              padding: 0.5rem 1rem;
-              font-size: 14px;
-              border-radius: 4px;
-              cursor: pointer;
-
-              &:hover {
-                opacity: 0.8;
-              }
-            }
           }
 
           .shipping-method {
@@ -234,6 +225,140 @@ $dark-color: #343a40;
               }
             }
           }
+          .payment-options {
+            .payment-card {
+              max-width: 400px;
+              font-family: Arial, sans-serif;
+
+              &__form {
+                display: grid;
+                gap: 12px;
+              }
+
+              &__label {
+                display: flex;
+                flex-direction: column;
+                font-size: 0.9rem;
+                font-weight: 500;
+                margin: 10px 0;
+              }
+
+              &__card-input-with-logo {
+                position: relative;
+
+                input {
+                  padding-right: 50px;
+                }
+
+                .payment-card__logo {
+                  position: absolute;
+                  right: 10px;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  height: 24px;
+                  width: auto;
+                  pointer-events: none;
+                }
+              }
+
+              &__input {
+                border: 1px solid #ccc;
+                border-radius: 4px;
+                padding: 8px;
+                font-size: 1rem;
+                margin: 5px 0;
+                width: 100%;
+                box-sizing: border-box;
+              }
+
+              &__row {
+                display: flex;
+                gap: 10px;
+              }
+
+              &__half {
+                flex: 1;
+              }
+
+              &__button {
+                padding: 10px;
+                background-color: #007bff;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                font-weight: bold;
+                cursor: pointer;
+              }
+
+              &__saved {
+                border: 1px solid #ccc;
+                border-radius: 8px;
+                padding: 16px;
+                display: grid;
+                gap: 10px;
+              }
+
+              &__info {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+
+                img {
+                  width: 40px;
+                  height: auto;
+                }
+              }
+
+              &__meta {
+                font-size: 0.9rem;
+                color: #666;
+              }
+
+              &__actions {
+                display: flex;
+                gap: 10px;
+
+                button {
+                  flex: 1;
+                }
+
+                input {
+                  flex: 1;
+                }
+              }
+
+              &__remove {
+                background: none;
+                border: none;
+                color: #007bff;
+                padding: 0;
+                font-size: 0.9rem;
+                cursor: pointer;
+                text-align: left;
+              }
+
+              &__note {
+                font-size: 0.85rem;
+                color: #a94442;
+                margin-top: 12px;
+              }
+            }
+          }
+          .submit-btn {
+            align-self: flex-start;
+            margin-top: 1rem;
+            background-color: $primary-color;
+            color: $light-color;
+            border: none;
+            padding: 0.5rem 1rem;
+            font-size: 14px;
+            border-radius: 4px;
+            cursor: pointer;
+
+            &:hover {
+              opacity: 0.8;
+            }
+          }
         }
       }
     }

package/dist/common-element.scss

@@ -33,3 +33,9 @@ $es: '[data-div-type="element"]';
     // );
   }
 }
+
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/confirmationModal.scss

@@ -0,0 +1,79 @@
+.confirm-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(17, 24, 39, 0.5); // dark semi-transparent
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+
+  .confirm-modal {
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 24px;
+    width: 480px;
+    max-width: 480px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    position: relative;
+    text-align: center;
+    min-height: 174px;
+    line-height: 20px;
+    display: grid;
+    gap: 10px;
+
+    .confirm-modal-header {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-between;
+      .title {
+        font-size: 18px;
+        font-weight: 700;
+        color: #101828;
+      }
+    }
+    .confirm-modal-body {
+      .message {
+        font-size: 14px;
+        color: #475467;
+        text-align: left;
+      }
+    }
+
+    .actions {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      height: 40px;
+      button {
+        height: 40px;
+        width: 204px;
+        font-size: 16px;
+        cursor: pointer;
+        border: none;
+        border-radius: 5px;
+      }
+      .cancel-button {
+        background: transparent;
+        color: #6b7280;
+        font-weight: 500;
+        &:hover {
+          border: 1px solid #d0d5dd;
+        }
+      }
+
+      .confirm-button {
+        background-color: #dc2626; // red-600
+        color: #ffffff;
+        font-weight: 600;
+
+        &:hover {
+          background-color: #b91c1c;
+        }
+      }
+    }
+  }
+}

package/dist/dropdownTemplate.scss

@@ -14,7 +14,7 @@
     }
   }
 
-  .dropdow-input-section {
+  .dropdown-input-section {
     position: relative;
     display: flex;
     justify-content: space-between;
@@ -87,21 +87,19 @@
       overflow-y: auto;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       z-index: 10;
+      min-width: 240px;
+      min-height: 300px;
+      max-height: 300px;
 
-      li {
+      .dropdown-opt {
         font-size: 14px;
         cursor: pointer;
         height: 40px;
 
-        &:hover {
-          background-color: #f4f4f4;
-        }
-
         &.no-result {
           color: #aaa;
           cursor: default;
         }
-
         .dropdown-item {
           width: 100%;
           height: 100%;
@@ -109,6 +107,10 @@
           text-align: left;
           display: flex;
           align-items: center;
+          &:hover {
+            background-color: #f4f4f4;
+          }
+
           .item-image {
             background-image: url("");
             width: 30px;
@@ -127,6 +129,50 @@
           font-weight: bold;
         }
       }
+      .dropdown-group-li {
+        height: auto;
+        .group-header {
+          height: 40px;
+          align-items: center;
+          display: flex;
+          gap: 4px;
+          padding: 4px;
+          input {
+            width: auto;
+          }
+        }
+        .dropdown-item {
+          height: 40px;
+        }
+      }
+
+      .dropdown_selection_actions {
+        display: flex;
+        align-items: center;
+        height: 40px;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        background: #fff;
+        border-top: 1px solid #d1d1d1;
+        .opts_selection_action {
+          width: 50%;
+          height: 100%;
+          /* text-align: center; */
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .svg_icon {
+            cursor: pointer;
+            position: relative !important;
+            background: none !important;
+            right: 0px !important;
+          }
+        }
+      }
+    }
+    .drodown-menu-with-icon-dropdown {
+      top: 11px;
     }
     .dropdown_template_panel_search {
       background: none;
@@ -137,16 +183,33 @@
         background: none !important;
       }
       input {
+        width: 100%;
         padding: 10px 8px;
         border-radius: 4px;
         border: 1px solid #dddddd;
       }
     }
   }
+  .dropdown-with-icon {
+    width: 100%;
+    // pointer-events: none;
+    border: none;
+    padding: 0;
+  }
 }
 .dropdown-with-input-section.full-width {
   width: auto;
-  .dropdow-input-section {
+  .dropdown-input-section {
     width: 100% !important;
   }
 }
+
+.icon_with_label_section {
+  display: flex;
+  gap: 4px;
+  cursor: pointer;
+  .label_elm {
+    color: var(--_primary-400);
+    font-size: 14px;
+  }
+}