@licklist/design 0.66.10-dev.0 → 0.66.10-dev.4

package/src/sortable-tree/SortableTreeItem.tsx

@@ -19,6 +19,7 @@ export const ProductSetModalClasses = {
   step: "edit-product-step",
   category: "edit-product-category",
   product: "edit-product",
+  productZones: "edit-product-zone",
 } as const;
 
 export type ProductSetModalClassesType =
@@ -35,6 +36,7 @@ export interface SortableTreeItemProps {
   postItem?: ReactNode;
   sortableItems?: string[];
   isExpanded?: boolean;
+  shouldExpand?: boolean;
   isInvalid?: boolean;
   isIconInHeader?: boolean;
   treeLineIconColor?: string;
@@ -65,6 +67,7 @@ export function SortableTreeItem({
   postItem,
   sortableItems,
   isExpanded = false,
+  shouldExpand = true,
   isInvalid = false,
   isIconInHeader = true,
   treeLineIconColor = "",
@@ -99,11 +102,14 @@ export function SortableTreeItem({
     transform: dragTransform,
   } = useDraggable({
     id,
-    disabled: isOverride,
+    disabled: isOverride || !shouldExpand,
   });
 
   const onHandleExpand = useCallback(
     (event) => {
+      if (!shouldExpand) {
+        return;
+      }
       const deltaX = event.pageX - position.pageX;
       const deltaY = event.pageY - position.pageY;
       const euclidean = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -119,14 +125,20 @@ export function SortableTreeItem({
 
       setExpanded((expanded) => !expanded);
     },
-    [position, setIsExpanded],
+    [position, shouldExpand, setIsExpanded],
   );
 
   const isVisibleDeleteButton = Boolean(onDelete) && !isOverride;
 
-  const onButtonMouseDown = useCallback((event) => {
-    setPosition({ pageX: event.pageX, pageY: event.pageY });
-  }, []);
+  const onButtonMouseDown = useCallback(
+    (event) => {
+      if (!shouldExpand) {
+        return;
+      }
+      setPosition({ pageX: event.pageX, pageY: event.pageY });
+    },
+    [shouldExpand],
+  );
 
   const onHide = async () => {
     if (!validate) setIsModalVisible(false);
@@ -196,47 +208,49 @@ export function SortableTreeItem({
             : null
         }
       >
-        <div className="sortable-tree-line">
-          <Button
-            variant="link"
-            size="sm"
-            onMouseDown={onButtonMouseDown}
-            onMouseUp={onHandleExpand}
-          >
-            {expanded ? (
-              <FaMinus size={10} />
-            ) : (
-              <div className="expand-icon-container">
-                <div />
-                <div />
-                <div />
-              </div>
-            )}
-          </Button>
-
-          {expanded && (
-            <svg
-              className="sortable-tree-line-icon"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              width="100%"
-              height="100%"
-              viewBox="0 0 100 100"
-              preserveAspectRatio="none"
+        {shouldExpand && (
+          <div className="sortable-tree-line">
+            <Button
+              variant="link"
+              size="sm"
+              onMouseDown={onButtonMouseDown}
+              onMouseUp={onHandleExpand}
             >
-              <g>
-                <path
-                  className={clsx(
-                    "sortable-tree-line-icon-path",
-                    treeLineIconColor && "sortable-tree-line-product-element",
-                  )}
-                  style={{ stroke: treeLineIconColor }}
-                  d="M 50 0 V 100"
-                />
-              </g>
-            </svg>
-          )}
-        </div>
+              {expanded ? (
+                <FaMinus size={10} />
+              ) : (
+                <div className="expand-icon-container">
+                  <div />
+                  <div />
+                  <div />
+                </div>
+              )}
+            </Button>
+
+            {expanded && (
+              <svg
+                className="sortable-tree-line-icon"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                width="100%"
+                height="100%"
+                viewBox="0 0 100 100"
+                preserveAspectRatio="none"
+              >
+                <g>
+                  <path
+                    className={clsx(
+                      "sortable-tree-line-icon-path",
+                      treeLineIconColor && "sortable-tree-line-product-element",
+                    )}
+                    style={{ stroke: treeLineIconColor }}
+                    d="M 50 0 V 100"
+                  />
+                </g>
+              </svg>
+            )}
+          </div>
+        )}
 
         <div className="sortable-tree-item-wrapper">
           <div

package/src/styles/product-set/CreateProductSetItem.scss

@@ -17,6 +17,14 @@ $product-set-item-hover-bg-color: #d9efff !default;
   }
 }
 
+.product-set-item-wrapper-zone {
+  color:#84269B;
+  background-color: rgba($color: #84269B, $alpha: 0.1);
+  .product-set-item-icon {
+    background-color: #84269B;
+  }
+}
+
 .product-set-item-wrapper-category {
   color: #1A93AA;
   background-color: rgba($color: #1A93AA, $alpha: 0.1);

package/src/styles/product-set/EditZoneSettingModal.scss

@@ -0,0 +1,16 @@
+.edit-right-form-modal.edit-product-zone {
+    padding: 0;
+    .top-label-container {
+      background-color: #EFE9F5;
+      span {
+        color:#84269B;
+      }
+    }
+    @include media-breakpoint-down(sm) {
+      top: 5%;
+      .step-save-btn {
+        margin-top: 1rem;
+        width: 100%;
+      }
+    }
+  }

package/src/styles/product-set/ProductSetForm.scss

@@ -50,7 +50,7 @@
 
   .step-badge,
   .category-badge,
-  .product-badge {
+  .product-badge  {
     font-size: 0.875rem;
     font-weight: 600;
   }
@@ -67,6 +67,8 @@
     background-color: #e9f5ea;
     color: #269b36;
   }
+
+
 }
 
 .product-set-mobile-footer {
@@ -174,3 +176,14 @@
     }
   }
 }
+
+
+.sortable-tree-item-toggle {
+
+  .product-zone-badge {
+    background-color: #EFE9F5;
+    color:#84269B;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+}

package/src/styles/product-set/_index.scss

@@ -10,4 +10,5 @@
 @import "./EditCategoryModal.scss";
 @import "./EditProductModal.scss";
 @import "./EditVenueMapSetModal";
-@import './SelectCategoryModal.scss'
+@import './SelectCategoryModal.scss';
+@import "./EditZoneSettingModal.scss"