@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/events/event-venue-map/components/MapPoint/components/ProductIcon/ProductIcon.tsx

@@ -1,56 +1,56 @@
-import { useMemo, useState } from "react";
-import { Path, KonvaNodeEvents, Group, Circle } from "react-konva";
-import Konva from "konva";
-import { ProductTooltip } from "../ProductTooltip";
+import { useMemo, useState } from 'react'
+import { Path, KonvaNodeEvents, Group, Circle } from 'react-konva'
+import Konva from 'konva'
+import { ProductTooltip } from '../ProductTooltip'
 
 const ICON_DATA =
-  "M14 0C9.3569 0.6633 4.6431 0.6633 0 0L6 7V13H3V14H11V13H8V7L14 0Z";
+  'M14 0C9.3569 0.6633 4.6431 0.6633 0 0L6 7V13H3V14H11V13H8V7L14 0Z'
 
-const CHOOSED_ICON_DATA = "M1.5 6L5.5 10L13.5 2";
+const CHOOSED_ICON_DATA = 'M1.5 6L5.5 10L13.5 2'
 
-const ICON_WIDTH = 28;
-const ICON_HEIGHT = 28;
+const ICON_WIDTH = 28
+const ICON_HEIGHT = 28
 
-const CIRCLE_RADIUS = ICON_WIDTH / 2;
-const X_OFFSET = ICON_WIDTH / 4;
-const Y_OFFSET = ICON_HEIGHT;
+const CIRCLE_RADIUS = ICON_WIDTH / 2
+const X_OFFSET = ICON_WIDTH / 4
+const Y_OFFSET = ICON_HEIGHT
 
-const DEFAULT_STROKE_WIDTH = 1;
-const POINT_STROKE_WIDTH = 2;
-const CHOOSED_PRODUCT_STROKE_WIDTH = 2;
+const DEFAULT_STROKE_WIDTH = 1
+const POINT_STROKE_WIDTH = 2
+const CHOOSED_PRODUCT_STROKE_WIDTH = 2
 
-const BACKGROUND_COLOR = "#FFFFFF";
-const BACKGROUND_COLOR_TRANSPARENT = "#FFFFFF80";
-const FILL_COLOR = "#0E8CE2";
-const ERROR_COLOR_TRANSPARENT = "#ff000080";
-const NO_PRODUCT_ON_POINT = "#878787";
-const SNIPPET_TEMPLATE_ID = "snippet-template-context";
+const BACKGROUND_COLOR = '#FFFFFF'
+const BACKGROUND_COLOR_TRANSPARENT = '#FFFFFF80'
+const FILL_COLOR = '#0E8CE2'
+const ERROR_COLOR_TRANSPARENT = '#ff000080'
+const NO_PRODUCT_ON_POINT = '#878787'
+const SNIPPET_TEMPLATE_ID = 'snippet-template-context'
 
 export type ProductIconProps = KonvaNodeEvents &
   Konva.ShapeConfig & {
-    x: number;
-    y: number;
-    isActive?: boolean;
-    isSoldOut?: boolean;
-    isErrorOnChoosedProduct: boolean;
-    isProductChoosed: boolean;
-  };
+    x: number
+    y: number
+    isActive?: boolean
+    isSoldOut?: boolean
+    isErrorOnChoosedProduct: boolean
+    isProductChoosed: boolean
+  }
 
-const getTransparentColorByValue = (color: string) => `${color}80`;
+const getTransparentColorByValue = (color: string) => `${color}80`
 
 const getSnippetCssStyleVariableValue = (name: string, transparent = false) => {
-  const element = document.getElementById(SNIPPET_TEMPLATE_ID);
+  const element = document.getElementById(SNIPPET_TEMPLATE_ID)
 
-  if (!element) return undefined;
+  if (!element) return undefined
 
-  const value = getComputedStyle(element).getPropertyValue(name);
+  const value = getComputedStyle(element).getPropertyValue(name)
 
   if (!value || (value && !transparent)) {
-    return value;
+    return value
   }
 
-  return getTransparentColorByValue(value);
-};
+  return getTransparentColorByValue(value)
+}
 
 export const ProductIcon = ({
   x,
@@ -60,66 +60,67 @@ export const ProductIcon = ({
   isErrorOnChoosedProduct,
   isProductChoosed,
 }: ProductIconProps) => {
-  const defaultX = -X_OFFSET;
-  const defaultY = -Y_OFFSET;
+  const defaultX = -X_OFFSET
+  const defaultY = -Y_OFFSET
 
-  const [hovered, setHovered] = useState<boolean>(false);
+  const [hovered, setHovered] = useState<boolean>(false)
 
-  const cssVariableValues = useMemo(() => {
-    return {
+  const cssVariableValues = useMemo(
+    () => ({
       pointBackgroundColor:
         getSnippetCssStyleVariableValue(
-          "--snippet-canvas-point-background-color",
+          '--snippet-canvas-point-background-color',
         ) || BACKGROUND_COLOR,
       pointBorderColor:
         getSnippetCssStyleVariableValue(
-          "--snippet-canvas-point-border-color",
+          '--snippet-canvas-point-border-color',
           true,
         ) || BACKGROUND_COLOR_TRANSPARENT,
       pointFontColor:
-        getSnippetCssStyleVariableValue("--snippet-canvas-point-font-color") ||
+        getSnippetCssStyleVariableValue('--snippet-canvas-point-font-color') ||
         FILL_COLOR,
 
       activePointBackgroundColor:
         getSnippetCssStyleVariableValue(
-          "--snippet-canvas-active-point-background-color",
+          '--snippet-canvas-active-point-background-color',
         ) || FILL_COLOR,
       activePointBorderColor:
         getSnippetCssStyleVariableValue(
-          "--snippet-canvas-active-point-border-color",
+          '--snippet-canvas-active-point-border-color',
           true,
         ) || BACKGROUND_COLOR_TRANSPARENT,
       activePointFontColor:
         getSnippetCssStyleVariableValue(
-          "--snippet-canvas-active-point-font-color",
+          '--snippet-canvas-active-point-font-color',
         ) || BACKGROUND_COLOR,
-    };
+    }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isActive, isErrorOnChoosedProduct, isProductChoosed]);
+    [isActive, isErrorOnChoosedProduct, isProductChoosed],
+  )
 
   const circleColors = () => {
-    let fill = cssVariableValues.pointBackgroundColor;
-    let stroke = cssVariableValues.pointBorderColor;
+    let fill = cssVariableValues.pointBackgroundColor
+    let stroke = cssVariableValues.pointBorderColor
 
     if (isActive) {
-      stroke = cssVariableValues.activePointBorderColor;
+      stroke = cssVariableValues.activePointBorderColor
     }
 
     if (isProductChoosed) {
-      fill = cssVariableValues.activePointBackgroundColor;
+      fill = cssVariableValues.activePointBackgroundColor
     }
 
     if (isErrorOnChoosedProduct) {
-      stroke = ERROR_COLOR_TRANSPARENT;
+      stroke = ERROR_COLOR_TRANSPARENT
     }
 
     if (isSoldOut) {
-      stroke = NO_PRODUCT_ON_POINT;
-      fill = NO_PRODUCT_ON_POINT;
+      stroke = NO_PRODUCT_ON_POINT
+      fill = NO_PRODUCT_ON_POINT
     }
 
-    return { fill, stroke };
-  };
+    return { fill, stroke }
+  }
 
   return (
     <Group
@@ -162,5 +163,5 @@ export const ProductIcon = ({
         />
       )}
     </Group>
-  );
-};
+  )
+}

package/src/events/event-venue-map/components/MapPoint/components/ProductIcon/index.ts

@@ -1,2 +1,2 @@
-export { ProductIcon } from "./ProductIcon";
-export type { ProductIconProps } from "./ProductIcon";
+export { ProductIcon } from './ProductIcon'
+export type { ProductIconProps } from './ProductIcon'

package/src/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.tsx

@@ -1,67 +1,65 @@
-import { Group, Rect, Text } from "react-konva";
+import { Group, Rect, Text } from 'react-konva'
 
-const TOOLTIP_WIDTH = 60;
-const TOOLTIP_HEIGHT = 20;
+const TOOLTIP_WIDTH = 60
+const TOOLTIP_HEIGHT = 20
 
-const BACKGROUND_COLOR = "#000";
-const BACKGROUND_Y_OFFSET = 1;
-const BACKGROUND_X_OFFSET = 30;
-const BACKGROUND_RADIUS = 5;
-const BACKGROUND_OPACITY = 0.8;
+const BACKGROUND_COLOR = '#000'
+const BACKGROUND_Y_OFFSET = 1
+const BACKGROUND_X_OFFSET = 30
+const BACKGROUND_RADIUS = 5
+const BACKGROUND_OPACITY = 0.8
 
-const TEXT_Y_OFFSET = 4;
-const TEXT_STROKE_WIDTH = 5;
-const TEXT_COLOR = "#FFF";
-const TEXT_ALIGN = "center";
-const TEXT_VERTICAL_ALIGN = "middle";
+const TEXT_Y_OFFSET = 4
+const TEXT_STROKE_WIDTH = 5
+const TEXT_COLOR = '#FFF'
+const TEXT_ALIGN = 'center'
+const TEXT_VERTICAL_ALIGN = 'middle'
 
 type ProductTooltipProps = {
-  x: number;
-  y: number;
-  text: string;
-};
+  x: number
+  y: number
+  text: string
+}
 
-export const ProductTooltip = ({ x, y, text }: ProductTooltipProps) => {
-  return (
-    <Group
+export const ProductTooltip = ({ x, y, text }: ProductTooltipProps) => (
+  <Group
+    width={TOOLTIP_WIDTH}
+    height={TOOLTIP_HEIGHT}
+    x={x + BACKGROUND_X_OFFSET}
+    y={y - BACKGROUND_Y_OFFSET}
+  >
+    <Rect
+      x={-5}
+      y={5}
+      sceneFunc={(context) => {
+        context.beginPath()
+        context.moveTo(0, 5)
+        context.lineTo(5, 0)
+        context.lineTo(5, 10)
+        context.closePath()
+        context.fill()
+      }}
+      fill={BACKGROUND_COLOR}
+      borderColor={BACKGROUND_COLOR}
+      opacity={BACKGROUND_OPACITY}
+    />
+    <Rect
+      x={0}
+      y={0}
       width={TOOLTIP_WIDTH}
       height={TOOLTIP_HEIGHT}
-      x={x + BACKGROUND_X_OFFSET}
-      y={y - BACKGROUND_Y_OFFSET}
-    >
-      <Rect
-        x={-5}
-        y={5}
-        sceneFunc={(context) => {
-          context.beginPath();
-          context.moveTo(0, 5);
-          context.lineTo(5, 0);
-          context.lineTo(5, 10);
-          context.closePath();
-          context.fill();
-        }}
-        fill={BACKGROUND_COLOR}
-        borderColor={BACKGROUND_COLOR}
-        opacity={BACKGROUND_OPACITY}
-      />
-      <Rect
-        x={0}
-        y={0}
-        width={TOOLTIP_WIDTH}
-        height={TOOLTIP_HEIGHT}
-        fill={BACKGROUND_COLOR}
-        cornerRadius={BACKGROUND_RADIUS}
-        opacity={BACKGROUND_OPACITY}
-      />
-      <Text
-        y={TEXT_Y_OFFSET}
-        text={text}
-        strokeWidth={TEXT_STROKE_WIDTH}
-        width={TOOLTIP_WIDTH}
-        align={TEXT_ALIGN}
-        verticalAlign={TEXT_VERTICAL_ALIGN}
-        fill={TEXT_COLOR}
-      />
-    </Group>
-  );
-};
+      fill={BACKGROUND_COLOR}
+      cornerRadius={BACKGROUND_RADIUS}
+      opacity={BACKGROUND_OPACITY}
+    />
+    <Text
+      y={TEXT_Y_OFFSET}
+      text={text}
+      strokeWidth={TEXT_STROKE_WIDTH}
+      width={TOOLTIP_WIDTH}
+      align={TEXT_ALIGN}
+      verticalAlign={TEXT_VERTICAL_ALIGN}
+      fill={TEXT_COLOR}
+    />
+  </Group>
+)

package/src/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.ts

@@ -1 +1 @@
-export { ProductTooltip } from "./ProductTooltip";
+export { ProductTooltip } from './ProductTooltip'

package/src/events/event-venue-map/components/MapPoint/index.ts

@@ -1 +1 @@
-export { MapPoint } from "./MapPoint";
+export { MapPoint } from './MapPoint'

package/src/events/event-venue-map/components/Scrollbars/Scrollbars.tsx

@@ -1,32 +1,32 @@
-import { useContext } from "react";
-import { EventVenueMapContext } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
-import { useWindowDimensions } from "@licklist/plugins/dist/hooks/Media/useWindowDimensions";
+import { useContext } from 'react'
+import { EventVenueMapContext } from '@licklist/plugins/dist/context/event/EventVenueMapContext'
+import { useWindowDimensions } from '@licklist/plugins/dist/hooks/Media/useWindowDimensions'
 import {
   calculateHorizontalScrollParameters,
   calculateVerticalScrollParameters,
   getElementParameters,
-} from "../../utils";
-import { CanvasRefs } from "../../types";
-import { useDrag } from "../../hooks/useDrag";
-import { MOBILE_WIDTH } from "../../../../iframe/order-process/components/BookingSummary/types";
+} from '../../utils'
+import { CanvasRefs } from '../../types'
+import { useDrag } from '../../hooks/useDrag'
+import { MOBILE_WIDTH } from '../../../../iframe/order-process/components/BookingSummary/types'
 
 export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
-  const { width } = useWindowDimensions();
-  const { stage } = useContext(EventVenueMapContext);
-  const { onDragX, onDragY } = useDrag({ stageRef, imageRef, layerRef });
+  const { width } = useWindowDimensions()
+  const { stage } = useContext(EventVenueMapContext)
+  const { onDragX, onDragY } = useDrag({ stageRef, imageRef, layerRef })
 
-  const isMobileView = MOBILE_WIDTH <= width;
+  const isMobileView = MOBILE_WIDTH <= width
 
   const horizontalScrollbarStyles = () => {
     if (!stageRef || !imageRef || !layerRef) {
       return {
         width: 0,
         left: 0,
-      };
+      }
     }
 
-    const { x, y } = stage;
-    const { width, height } = stageRef.attrs;
+    const { x, y } = stage
+    const { width, height } = stageRef.attrs
 
     const { totalLayerWidth, maxXOverflowNumber } = getElementParameters({
       x,
@@ -34,7 +34,7 @@ export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
       width,
       height,
       layer: layerRef,
-    });
+    })
 
     if (
       Math.round(totalLayerWidth) <= Math.round(width) ||
@@ -43,7 +43,7 @@ export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
       return {
         width: 0,
         left: 0,
-      };
+      }
     }
 
     const { width: calculatedWidth, left } =
@@ -51,24 +51,24 @@ export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
         x,
         width,
         totalLayerWidth,
-      });
+      })
 
     return {
       width: calculatedWidth,
       left,
-    };
-  };
+    }
+  }
 
   const verticalScrollbarStyles = () => {
     if (!stageRef || !imageRef || !layerRef) {
       return {
         height: 0,
         top: 0,
-      };
+      }
     }
 
-    const { x, y } = stage;
-    const { width, height } = stageRef.attrs;
+    const { x, y } = stage
+    const { width, height } = stageRef.attrs
 
     const { totalLayerHeight, maxYOverflowNumber } = getElementParameters({
       x,
@@ -76,7 +76,7 @@ export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
       width,
       height,
       layer: layerRef,
-    });
+    })
 
     if (
       Math.round(totalLayerHeight) <= Math.round(height) ||
@@ -85,7 +85,7 @@ export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
       return {
         height: 0,
         top: 0,
-      };
+      }
     }
 
     const { height: calculatedHeight, top } = calculateVerticalScrollParameters(
@@ -94,13 +94,13 @@ export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
         height,
         totalLayerHeight,
       },
-    );
+    )
 
     return {
       height: calculatedHeight,
       top,
-    };
-  };
+    }
+  }
 
   return (
     <div className="canvas-scrollbars">
@@ -123,5 +123,5 @@ export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
         )}
       </div>
     </div>
-  );
-};
+  )
+}

package/src/events/event-venue-map/components/Scrollbars/index.ts

@@ -1 +1 @@
-export { Scrollbars } from "./Scrollbars";
+export { Scrollbars } from './Scrollbars'

package/src/events/event-venue-map/components/VenueMap/VenueMap.tsx

@@ -4,37 +4,37 @@ import {
   useEffect,
   forwardRef,
   useImperativeHandle,
-} from "react";
-import { Stage, Layer, Image } from "react-konva";
-import Konva from "konva";
+} from 'react'
+import { Stage, Layer, Image } from 'react-konva'
+import Konva from 'konva'
 import {
   EventVenueMapContext,
   EventVenueMapContextProps,
-} from "@licklist/plugins/dist/context/event/EventVenueMapContext";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { useImage } from "../../hooks/useImage";
-import { useStageActions } from "../../hooks/useStageActions";
-import { MapPoint } from "../MapPoint";
-import { Scrollbars } from "../Scrollbars";
-import { ZoomButtons } from "../ZoomButtons";
-import { Dropdown } from "../Dropdown";
+} from '@licklist/plugins/dist/context/event/EventVenueMapContext'
+import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock'
+import { useImage } from '../../hooks/useImage'
+import { useStageActions } from '../../hooks/useStageActions'
+import { MapPoint } from '../MapPoint'
+import { Scrollbars } from '../Scrollbars'
+import { ZoomButtons } from '../ZoomButtons'
+import { Dropdown } from '../Dropdown'
 
 export type VenueMapRef = Pick<
   EventVenueMapContextProps,
-  "activeElementKey" | "setActiveElementKey"
->;
+  'activeElementKey' | 'setActiveElementKey'
+>
 
 export type VenueMapProps = {
-  url: string;
-  name: string;
-  width: number;
-  height: number;
-  onPointClick?: (pointId?: number) => void;
-  usedInIframe?: boolean;
-  choosedProductUuids?: string[];
-  errorOnChoosedProductUuids?: string[];
-  soldOutProducts?: QuantityCheckProductInfo[];
-};
+  url: string
+  name: string
+  width: number
+  height: number
+  onPointClick?: (pointId?: number) => void
+  usedInIframe?: boolean
+  choosedProductUuids?: string[]
+  errorOnChoosedProductUuids?: string[]
+  soldOutProducts?: QuantityCheckProductInfo[]
+}
 
 export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
   (
@@ -59,11 +59,11 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       mapPointProducts,
       activeElementKey,
       setActiveElementKey,
-    } = useContext(EventVenueMapContext);
+    } = useContext(EventVenueMapContext)
 
-    const layerRef = useRef<Konva.Layer>(null);
-    const stageRef = useRef<Konva.Stage>(null);
-    const imageRef = useRef<Konva.Image>(null);
+    const layerRef = useRef<Konva.Layer>(null)
+    const stageRef = useRef<Konva.Stage>(null)
+    const imageRef = useRef<Konva.Image>(null)
 
     const [
       image,
@@ -74,21 +74,19 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
         scaledHeight,
         imageScale,
       },
-    ] = useImage(url, { width, height });
+    ] = useImage(url, { width, height })
 
     const { onWheel, onClick, changeCursorType } = useStageActions({
       stageRef: stageRef.current,
       imageRef: imageRef.current,
       layerRef: layerRef.current,
       imageScale,
-    });
+    })
 
-    useImperativeHandle(ref, () => {
-      return {
-        activeElementKey,
-        setActiveElementKey,
-      };
-    });
+    useImperativeHandle(ref, () => ({
+      activeElementKey,
+      setActiveElementKey,
+    }))
 
     useEffect(() => {
       setMapPoints((mapPoints) =>
@@ -96,28 +94,28 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
           ...point,
           pointNumber: index + 1,
         })),
-      );
+      )
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [])
 
     useEffect(() => {
       if (!onPointClick) {
-        return;
+        return
       }
 
-      onPointClick(activeElementKey ? Number(activeElementKey) : undefined);
+      onPointClick(activeElementKey ? Number(activeElementKey) : undefined)
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [onPointClick, activeElementKey]);
+    }, [onPointClick, activeElementKey])
 
     const isProductSoldOut = (pointId: number): boolean => {
       const currentProduct = mapPointProducts.find(
         (point) => point.pointId === pointId,
-      );
+      )
 
-      if (!currentProduct) return false;
+      if (!currentProduct) return false
       const selectedProduct = products.find(
         (product) => product.uuid === currentProduct.productUuid,
-      );
+      )
       return (
         selectedProduct?.isSoldOut ||
         (selectedProduct &&
@@ -125,8 +123,8 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
             (product) => product?.product_id === selectedProduct?.id,
           )) ||
         false
-      );
-    };
+      )
+    }
     return (
       <div className="venue-map" style={{ width, height }}>
         <div className="zone-name">
@@ -162,23 +160,21 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
                     height={scaledHeight}
                     ref={imageRef}
                   />
-                  {mapPoints.map((point) => {
-                    return (
-                      <MapPoint
-                        {...point}
-                        imageOffsetX={imageOffsetX}
-                        imageOffsetY={imageOffsetY}
-                        imageScale={imageScale}
-                        key={point.id || point.localId}
-                        isSoldOut={isProductSoldOut(point.id)}
-                        scale={scale}
-                        changeCursorType={changeCursorType}
-                        usedInIframe={usedInIframe}
-                        choosedProductUuids={choosedProductUuids}
-                        errorOnChoosedProductUuids={errorOnChoosedProductUuids}
-                      />
-                    );
-                  })}
+                  {mapPoints.map((point) => (
+                    <MapPoint
+                      {...point}
+                      imageOffsetX={imageOffsetX}
+                      imageOffsetY={imageOffsetY}
+                      imageScale={imageScale}
+                      key={point.id || point.localId}
+                      isSoldOut={isProductSoldOut(point.id)}
+                      scale={scale}
+                      changeCursorType={changeCursorType}
+                      usedInIframe={usedInIframe}
+                      choosedProductUuids={choosedProductUuids}
+                      errorOnChoosedProductUuids={errorOnChoosedProductUuids}
+                    />
+                  ))}
                 </Layer>
               </EventVenueMapContext.Provider>
             </Stage>
@@ -195,6 +191,6 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
           />
         )}
       </div>
-    );
+    )
   },
-);
+)

package/src/events/event-venue-map/components/VenueMap/index.ts

@@ -1,2 +1,2 @@
-export { VenueMap } from "./VenueMap";
-export type { VenueMapRef } from "./VenueMap";
+export { VenueMap } from './VenueMap'
+export type { VenueMapRef } from './VenueMap'