@sc-360-v2/storefront-cms-library 0.3.63 → 0.3.65

package/dist/submit-quote.scss

@@ -1,34 +1,32 @@
 .submit-quote-main {
   display: flex;
-  gap: 24px;
-  padding: 32px;
-  width: 100%;
-  justify-content: space-between;
+  gap: 60px;
+  padding: 24px;
+  background-color: #f9f9f9;
 
   .quote-items {
     flex: 2;
-    min-height: calc(100% - 61px);
-    overflow-y: auto;
   }
 
   .quote-item {
-    padding: 32px 0;
+    // padding: 32px 0;
     display: flex;
     gap: 24px;
-    border-bottom: 1px dashed var(--_gray-400);
-    padding-right: 10px;
-    &:first-child {
-      padding-top: 0;
+    &:not(:last-child) {
+      border-bottom: 1px dotted var(--_gray-400);
     }
-    &:last-child {
-      border-bottom: 0;
+    &:not(:last-child) {
+      padding-bottom: 12px;
+    }
+    &:not(:first-child) {
+      padding-top: 12px;
     }
 
     .quote-item__image {
       width: 120px;
       height: 120px;
       object-fit: cover;
-      border-radius: 6px;
+      border-radius: 4px;
       background-color: #f0f0f0;
     }
 
@@ -38,73 +36,47 @@
       flex-direction: column;
 
       .quote-item__header {
-        display: flex;
-        flex-direction: column;
-        // gap: 16px;
         margin-bottom: 16px;
         padding-bottom: 16px;
-        border-bottom: 1px dashed var(--_gray-400);
-        // align-items: center;
+        border-bottom: 1px dotted #d0d0d0;
 
         .quote-item__title {
           font-size: 16px;
-          font-weight: 500;
-          color: var(--_gray-900);
-          &:after {
-            width: 1px;
-            height: 10px;
-            background: var(--_gray-600);
-            display: inline-block;
-            content: "";
-            margin-left: 16px;
-          }
+          font-weight: 600;
+          color: #111;
         }
 
         .quote-item__meta {
           display: flex;
-          gap: 6px;
+          gap: 10px;
           font-size: 14px;
-          font-weight: 400;
-          color: var(--_gray-600);
-          // span {
-          //   &::after {
-          //     width: 1px;
-          //     height: 10px;
-          //     background: var(--_gray-600);
-          //     content: "";
-          //     display: inline-block;
-          //     margin-left: 6px;
-          //   }
-          //   &:last-child::after {
-          //     width: 0 !important;
-          //     margin: 0 !important;
-          //   }
-          // }
+          color: var(--_gray-500);
         }
       }
 
       .quote-item__row {
         display: flex;
-        gap: 8px;
+        gap: 16px;
         align-items: flex-start;
-        white-space: nowrap;
 
         .field {
           display: flex;
           flex-direction: column;
           font-size: 14px;
+          &.price_column {
+            padding-right: 40px;
+          }
 
           label {
             margin-bottom: 6px;
             font-weight: 500;
-            color: var(--_gray-700);
+            color: #333;
           }
 
           .value {
-            font-weight: 700;
-            font-size: 20px;
-            line-height: 38px;
-            color: var(--_gray-900);
+            font-weight: 600;
+            font-size: 16px;
+            color: #111;
           }
 
           input {
@@ -112,7 +84,7 @@
             padding: 8px 12px;
             font-size: 15px;
             border: 1px solid #ccc;
-            border-radius: 6px;
+            border-radius: 4px;
             outline: none;
             width: 130px;
 
@@ -126,15 +98,21 @@
             display: flex;
             align-items: center;
             border: 1px solid #ccc;
-            border-radius: 6px;
+            border-radius: 4px;
             overflow: hidden;
             width: 130px;
             height: 40px;
+            &:focus-within {
+              border: 1px solid var(--_primary-300);
+              outline: 2px solid var(--_primary-100);
+            }
 
             span {
               padding: 0 8px;
               font-size: 15px;
               color: var(--_gray-500);
+              display: flex;
+              align-items: center;
             }
 
             input {
@@ -142,6 +120,10 @@
               width: 100%;
               height: 100%;
               padding-left: 6px;
+              &:focus {
+                box-shadow: none;
+                outline: none;
+              }
             }
           }
         }
@@ -157,7 +139,6 @@
           .quote-total {
             display: flex;
             flex-direction: column;
-            gap: 6px;
 
             > div {
               display: flex;
@@ -167,34 +148,30 @@
 
               .label {
                 font-size: 14px;
-                color: var(--_gray-700);
-                line-height: 20px;
-                font-weight: 500;
+                color: #444;
               }
 
               .amount {
                 font-size: 18px;
                 font-weight: 700;
-                color: var(--_gray-900);
-                line-height: 28px;
-                min-width: 80px;
+                color: #111;
               }
             }
 
             small {
-              font-size: 14px;
-              font-weight: 400;
-              line-height: 20px;
-              color: var(--_gray-500);
+              font-size: 13px;
+              color: #888;
+              margin-top: 4px;
             }
+
             &.discounted {
               .label {
                 color: #198754;
               }
 
-              // .amount {
-              //   color: #198754;
-              // }
+              .amount {
+                color: #198754;
+              }
             }
           }
         }
@@ -203,80 +180,60 @@
   }
 
   .quote-summary {
-    // background: #f8f9fa;
-    border: 1px solid #e3e3e3;
+    background: #f8f9fa;
+    border: 1px solid var(--_gray-300);
     border-radius: 4px;
-    // padding: 24px;
     width: 100%;
     max-width: 400px;
-
-    h3 {
-      font-size: 16px;
-      font-weight: 700;
-      color: var(--_gray-900);
-      background: #f5f5f5;
-      line-height: 24px;
-      padding: 12px;
-      border-radius: 4px 4px 0 0;
-    }
-    .quote-summary-body {
-      padding: 0 16px 16px 16px;
-    }
+    overflow: hidden;
+    height: fit-content;
+    position: sticky;
+    top: 10px;
 
     &__row {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 16px 0;
-      border-bottom: 1px dashed var(--_gray-400);
+      padding: 12px 0;
+      border-bottom: 1px dotted #ccc;
+
       .label {
         font-size: 14px;
-        font-weight: 400;
-        line-height: 20px;
-        color: var(--_gray-500);
-      }
-      .label-quote {
-        font-size: 16px;
-        font-weight: 600;
-        line-height: 24px;
-        color: #1f1930;
+        color: #666;
       }
 
       .value {
-        font-size: 14px;
+        font-size: 16px;
         font-weight: 500;
-        color: var(--_gray-900);
-        line-height: 20px;
+        color: #333;
 
         &.highlight {
           font-size: 20px;
           font-weight: 700;
-          color: #1f1930;
+          color: #000;
         }
       }
 
       &--quoted {
-        margin-bottom: 16px;
+        margin-bottom: 20px;
+      }
+      .label-quote {
+        font-weight: 600;
       }
     }
-    .label-notes {
-      margin-bottom: 6px;
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--_gray-700);
-      display: inline-block;
-    }
+
     &__notes {
       width: 100%;
       height: 100px;
       padding: 12px;
       border: 1px solid #ddd;
-      border-radius: 6px;
+      border-radius: 4px;
       resize: none;
       font-size: 14px;
       font-family: inherit;
       margin-bottom: 20px;
       box-sizing: border-box;
+      margin-top: 6px;
 
       &::placeholder {
         color: #999;
@@ -284,14 +241,14 @@
 
       &:focus {
         outline: none;
-        border-color: #1a40f2;
+        border-color: var(--_primary-500);
       }
     }
 
     &__button {
       width: 100%;
-      padding: 12px;
-      background-color: #1a40f2;
+      padding: 14px;
+      background-color: var(--_primary-400);
       color: #fff;
       font-size: 16px;
       font-weight: 600;
@@ -301,8 +258,19 @@
       transition: background-color 0.2s ease;
 
       &:hover {
-        background-color: #1232c8;
+        background-color: var(--_primary-500);
       }
     }
+    & > h3 {
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--_gray-900);
+      background-color: #f5f5f5;
+      padding: 12px;
+      border-bottom: 1px solid var(--_gray-300);
+    }
+    .quote-summary-body {
+      padding: 0px 16px 16px 16px;
+    }
   }
 }

package/dist/types/builder/enums/data-connectors.d.ts

@@ -17,5 +17,7 @@ export declare enum dataConnectorapis {
     BUNLES_BY_ID = "BUNLES_BY_ID",
     BUNDLE_BY_TYPE = "BUNDLE_BY_TYPE",
     PRODUCT_BUNDLE_DETAILS = "PRODUCT_BUNDLE_DETAILS",
-    CATEGORY_BUNDLE_DETAILS = "CATEGORY_BUNDLE_DETAILS"
+    CATEGORY_BUNDLE_DETAILS = "CATEGORY_BUNDLE_DETAILS",
+    CATEGORY_GROUPS = "CATEGORY_GROUPS",
+    CATEGORIES_BY_GROUP_ID = "CATEGORIES_BY_GROUP_ID"
 }

package/dist/types/builder/enums/index.d.ts

@@ -345,6 +345,9 @@ export declare const CMSElementsListEnum: {
     SHIPPING_PAYMENT: string;
     CATEGORY_GROUPS: string;
     CART_WRAPPER: string;
+    OPTION_BAR: string;
+    MY_TEMPLATES: string;
+    REQUEST_FOR_QUOTE: string;
 };
 export declare enum CMSResponsiveModeEnums {
     DESKTOP = "desktop",

package/dist/types/builder/tools/element-edit/categoryGroups.d.ts

@@ -0,0 +1,17 @@
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+}
+export interface selfDesignInterface {
+    selectorKey: string;
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    DESIGN = "design",
+    CONTENT = "content",
+    DATA_CONNECTOR = "dataConnector"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

package/dist/types/builder/tools/element-edit/common.d.ts

@@ -23,6 +23,7 @@ export interface CMSElementEditPopupLayoutInterface {
     dropdownListItemPadding?: CMSIBSizeInterface;
     dividerBetweenListItems?: CMSIBSizeInterface;
     maxItemsToDisplay?: CMSIBSizeInterface;
+    dataConnector?: any;
 }
 export interface CMSElementEditPopupDesignInterface {
     backgroundColor: CMSIBCommonInterface;

package/dist/types/builder/tools/element-edit/index.d.ts

@@ -106,4 +106,8 @@ import * as megaMenu from "./mega-menu";
 import * as megaMenuContainer from "./megaMenuContainer";
 import * as simpleList from "./simple-list";
 import * as cartWrapper from "./cart-wrapper";
-export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, searchResultsHeading, itemStock, cartDetails, cartSummary, checkout, allocationDetails, line, tabsV2, tabContainer, marchandiserSets, createForm, quickLinks, addOrder, buyForWithTabs, buyForTabsContainer, toaster, spotlight, bundleDetails, productCustomizations, iconList, orderStatus, menuV2, menuItem, layouterPro, layouterProItem, filterResults, productSizeChart, userElements, badge, cartAttributes, languageMenu, loader, addProductsTab, quotaDetails, shippingPayments, productDescription, megaMenu, megaMenuContainer, simpleList, cartWrapper, };
+import * as optionBar from "./optionBar";
+import * as myTemplates from "./my-templates";
+import * as requestForQuote from "./request-for-quote";
+import * as categoryGroups from "./categoryGroups";
+export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, searchResultsHeading, itemStock, cartDetails, cartSummary, checkout, allocationDetails, line, tabsV2, tabContainer, marchandiserSets, createForm, quickLinks, addOrder, buyForWithTabs, buyForTabsContainer, toaster, spotlight, bundleDetails, productCustomizations, iconList, orderStatus, menuV2, menuItem, layouterPro, layouterProItem, filterResults, productSizeChart, userElements, badge, cartAttributes, languageMenu, loader, addProductsTab, quotaDetails, shippingPayments, productDescription, megaMenu, megaMenuContainer, simpleList, cartWrapper, optionBar, myTemplates, requestForQuote, categoryGroups, };

package/dist/types/builder/tools/element-edit/my-templates.d.ts

@@ -0,0 +1,23 @@
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+}
+interface selfDesignInterface {
+    selectorKey: string;
+    [key: string]: any;
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design",
+    TITLE = "title",
+    ALLOCATION = "allocation",
+    ALLOCATION_CARD = "allocationCard",
+    DIVIDER = "divider",
+    QUOTA_DETAILS = "quotaDetails",
+    DEFAULT_STATE = "defaultState"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

package/dist/types/builder/tools/element-edit/optionBar.d.ts

@@ -0,0 +1,24 @@
+import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
+export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
+}
+interface selfLayoutInterface {
+    selectorKey: string;
+}
+interface selfDesignInterface {
+    selectorKey: string;
+    [key: string]: any;
+}
+export declare enum SelectorKeysEnum {
+    LAYOUT = "layout",
+    CONTENT = "content",
+    DESIGN = "design",
+    TITLE = "title",
+    ALLOCATION = "allocation",
+    ALLOCATION_CARD = "allocationCard",
+    DIVIDER = "divider",
+    QUOTA_DETAILS = "quotaDetails",
+    DEFAULT_STATE = "defaultState",
+    DATA_CONNECTOR = "dataConnector"
+}
+export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
+export {};

package/dist/types/builder/tools/element-edit/quickLinks.d.ts

@@ -17,7 +17,9 @@ export declare enum QuickLinksSelectorKeysEnum {
     QuickLinks_WIDGET = "quickLinksWidgetDesign",
     QUICK_LINKS_TEXT_LAYOUT = "quickLinksTextLayout",
     QUICK_LINKS_WIDGET_LAYOUT = "quickLinksWidgetLayout",
-    TEXT_CONTAINER_DESIGN = "quickLinksTextContainerDesign"
+    TEXT_CONTAINER_DESIGN = "quickLinksTextContainerDesign",
+    ITEM_STYLE_DEFAULT_STYLE = "itemStyleDefault",
+    ITEM_STYLE_HOVER_STYLE = "itemStyleHoverState"
 }
 export interface SelectorKeys {
     LAYOUT: string;
@@ -364,58 +366,117 @@ export declare const getDefaultData: () => {
         };
         itemStyle: {
             selectorKey: QuickLinksSelectorKeysEnum;
-            backgroundColor: CMSIBCommonInterface;
-            cropRatio: CMSIBCommonInterface;
-            zoomImage: CMSIBCommonInterface;
-            flip: CMSIBCommonInterface;
-            rotate: import("../../interfaces/global").CMSIBSizeInterface;
-            theme: CMSIBCommonInterface;
-            font: CMSIBCommonInterface;
-            fontSize: import("../../interfaces/global").CMSIBSizeInterface;
-            textColor: CMSIBCommonInterface;
-            bold: CMSIBCommonInterface;
-            italic: CMSIBCommonInterface;
-            linethrough: CMSIBCommonInterface;
-            underline: CMSIBCommonInterface;
-            textAlign: CMSIBCommonInterface;
-            characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
-            lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
-            showBorder: CMSIBCommonInterface;
-            borderStyle: CMSIBCommonInterface;
-            borderColor: CMSIBCommonInterface;
-            borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
-            borderRadius: import("../../interfaces/global").CSSPaddingValues;
-            showShadow: CMSIBCommonInterface;
-            shadowColor: CMSIBCommonInterface;
-            angle: import("../../interfaces/global").CMSIBSizeInterface;
-            spread: import("../../interfaces/global").CMSIBSizeInterface;
-            blur: import("../../interfaces/global").CMSIBSizeInterface;
-            showIcon: {
-                value: boolean;
-                property?: any;
-                propertyType?: any;
-                isReadOnly?: boolean | undefined;
-                parentRef?: string | undefined;
-            };
-            iconSize: {
-                value: string;
-                propertyType: CMSElementEditTypes;
-                unit: number;
-                property: string;
+            defaultStyle: {
+                selectorKey: QuickLinksSelectorKeysEnum;
+                backgroundColor: CMSIBCommonInterface;
+                cropRatio: CMSIBCommonInterface;
+                zoomImage: CMSIBCommonInterface;
+                flip: CMSIBCommonInterface;
+                rotate: import("../../interfaces/global").CMSIBSizeInterface;
+                theme: CMSIBCommonInterface;
+                font: CMSIBCommonInterface;
+                fontSize: import("../../interfaces/global").CMSIBSizeInterface;
+                textColor: CMSIBCommonInterface;
+                bold: CMSIBCommonInterface;
+                italic: CMSIBCommonInterface;
+                linethrough: CMSIBCommonInterface;
+                underline: CMSIBCommonInterface;
+                textAlign: CMSIBCommonInterface;
+                characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
+                lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
+                showBorder: CMSIBCommonInterface;
+                borderStyle: CMSIBCommonInterface;
+                borderColor: CMSIBCommonInterface;
+                borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
+                borderRadius: import("../../interfaces/global").CSSPaddingValues;
+                showShadow: CMSIBCommonInterface;
+                shadowColor: CMSIBCommonInterface;
+                angle: import("../../interfaces/global").CMSIBSizeInterface;
+                spread: import("../../interfaces/global").CMSIBSizeInterface;
+                blur: import("../../interfaces/global").CMSIBSizeInterface;
+                showIcon: {
+                    value: boolean;
+                    property?: any;
+                    propertyType?: any;
+                    isReadOnly?: boolean | undefined;
+                    parentRef?: string | undefined;
+                };
+                iconSize: {
+                    value: string;
+                    propertyType: CMSElementEditTypes;
+                    unit: number;
+                    property: string;
+                };
+                iconColor: {
+                    value: {
+                        hex: string;
+                        rgb: {
+                            r: string;
+                            g: string;
+                            b: string;
+                            a: number;
+                        };
+                    };
+                    property: string;
+                    propertyType: CMSElementEditTypes;
+                    parentRef: string;
+                };
             };
-            iconColor: {
-                value: {
-                    hex: string;
-                    rgb: {
-                        r: string;
-                        g: string;
-                        b: string;
-                        a: number;
+            hoverStyle: {
+                selectorKey: QuickLinksSelectorKeysEnum;
+                backgroundColor: CMSIBCommonInterface;
+                cropRatio: CMSIBCommonInterface;
+                zoomImage: CMSIBCommonInterface;
+                flip: CMSIBCommonInterface;
+                rotate: import("../../interfaces/global").CMSIBSizeInterface;
+                theme: CMSIBCommonInterface;
+                font: CMSIBCommonInterface;
+                fontSize: import("../../interfaces/global").CMSIBSizeInterface;
+                textColor: CMSIBCommonInterface;
+                bold: CMSIBCommonInterface;
+                italic: CMSIBCommonInterface;
+                linethrough: CMSIBCommonInterface;
+                underline: CMSIBCommonInterface;
+                textAlign: CMSIBCommonInterface;
+                characterSpacing: import("../../interfaces/global").CMSIBSizeInterface;
+                lineHeight: import("../../interfaces/global").CMSIBSizeInterface;
+                showBorder: CMSIBCommonInterface;
+                borderStyle: CMSIBCommonInterface;
+                borderColor: CMSIBCommonInterface;
+                borderPerSlide: import("../../interfaces/global").CSSPaddingValues;
+                borderRadius: import("../../interfaces/global").CSSPaddingValues;
+                showShadow: CMSIBCommonInterface;
+                shadowColor: CMSIBCommonInterface;
+                angle: import("../../interfaces/global").CMSIBSizeInterface;
+                spread: import("../../interfaces/global").CMSIBSizeInterface;
+                blur: import("../../interfaces/global").CMSIBSizeInterface;
+                showIcon: {
+                    value: boolean;
+                    property?: any;
+                    propertyType?: any;
+                    isReadOnly?: boolean | undefined;
+                    parentRef?: string | undefined;
+                };
+                iconSize: {
+                    value: string;
+                    propertyType: CMSElementEditTypes;
+                    unit: number;
+                    property: string;
+                };
+                iconColor: {
+                    value: {
+                        hex: string;
+                        rgb: {
+                            r: string;
+                            g: string;
+                            b: string;
+                            a: number;
+                        };
                     };
+                    property: string;
+                    propertyType: CMSElementEditTypes;
+                    parentRef: string;
                 };
-                property: string;
-                propertyType: CMSElementEditTypes;
-                parentRef: string;
             };
         };
         quickLinksTextLayout: {