@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/events/event-statistic-modal/hooks/useTableData.tsx

@@ -1,46 +1,44 @@
-import { useState, useEffect } from "react";
-import clsx from "clsx";
-import { useIntl } from "react-intl";
-import { useTranslation } from "react-i18next";
-import * as Config from "@licklist/core/dist/Config";
-import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
-import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
-import { convertEventStatisticToTableData, TRANSLATION_KEYS } from "../utils";
-import { StaticTableData } from "../../../table";
+import { useState, useEffect } from 'react'
+import clsx from 'clsx'
+import { useIntl } from 'react-intl'
+import { useTranslation } from 'react-i18next'
+import * as Config from '@licklist/core/dist/Config'
+import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
+import { Event } from '@licklist/core/dist/DataMapper/Provider/EventDataMapper'
+import { convertEventStatisticToTableData, TRANSLATION_KEYS } from '../utils'
+import { StaticTableData } from '../../../table'
 
 export const useTableData = (
-  date: Event["startAt"] | null,
+  date: Event['startAt'] | null,
   eventStatistic: EventStatistic | null,
 ) => {
-  const { t } = useTranslation("Design");
-  const { formatNumber } = useIntl();
-  const [tableRows, setTableRows] = useState<StaticTableData[]>([]);
+  const { t } = useTranslation('Design')
+  const { formatNumber } = useIntl()
+  const [tableRows, setTableRows] = useState<StaticTableData[]>([])
 
-  const boldContent = (content: string | number, isHeader = false) => {
-    return (
-      <div className={clsx("bold", isHeader && "header-row")}>{content}</div>
-    );
-  };
+  const boldContent = (content: string | number, isHeader = false) => (
+    <div className={clsx('bold', isHeader && 'header-row')}>{content}</div>
+  )
 
   const translatedValue = (content: string | number) => {
-    const key = String(content);
+    const key = String(content)
 
     if (!Object.keys(TRANSLATION_KEYS).includes(key)) {
-      return key;
+      return key
     }
 
-    return t(key);
-  };
+    return t(key)
+  }
 
   const transformStatisticToTableRows = (
-    date: Event["startAt"],
+    date: Event['startAt'],
     statistic: EventStatistic | null,
   ) => {
     if (!statistic) {
-      return [];
+      return []
     }
 
-    const tableDataRows: StaticTableData[] = [];
+    const tableDataRows: StaticTableData[] = []
 
     convertEventStatisticToTableData(date, statistic).forEach(
       ({ name, quantity, total, isBold, isHeader, key }) => {
@@ -48,13 +46,13 @@ export const useTableData = (
           String(total),
         )
           ? formatNumber(Number(total), {
-              style: "currency",
+              style: 'currency',
               currency: Config.Currency.GBP,
             })
-          : total;
+          : total
 
-        const formattedName = translatedValue(name);
-        const formattedQuantity = translatedValue(quantity);
+        const formattedName = translatedValue(name)
+        const formattedQuantity = translatedValue(quantity)
 
         if (!isBold) {
           tableDataRows.push({
@@ -62,8 +60,8 @@ export const useTableData = (
             quantity: formattedQuantity,
             total: formattedTotal,
             key,
-          });
-          return;
+          })
+          return
         }
 
         tableDataRows.push({
@@ -76,17 +74,17 @@ export const useTableData = (
             isHeader,
           ),
           key,
-        });
+        })
       },
-    );
+    )
 
-    return tableDataRows;
-  };
+    return tableDataRows
+  }
 
   useEffect(() => {
-    setTableRows(transformStatisticToTableRows(date, eventStatistic));
+    setTableRows(transformStatisticToTableRows(date, eventStatistic))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [date, eventStatistic]);
+  }, [date, eventStatistic])
 
-  return tableRows;
-};
+  return tableRows
+}

package/src/events/event-statistic-modal/index.ts

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

package/src/events/event-statistic-modal/utils/index.ts

@@ -1,40 +1,40 @@
-import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
-import { DateTime } from "luxon";
-import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
+import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
+import { DateTime } from 'luxon'
+import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from '@licklist/core/dist/Config'
 
 export const TRANSLATION_KEYS = {
-  shortQuantity: "shortQuantity",
-  total: "total",
-  totalPerCategory: "totalPerCategory",
-};
+  shortQuantity: 'shortQuantity',
+  total: 'total',
+  totalPerCategory: 'totalPerCategory',
+}
 
 type TableDataRecord = {
-  name: string;
-  key: string;
-  isHeader?: boolean;
-  isBold?: boolean;
-  quantity: string;
-  total: string;
+  name: string
+  key: string
+  isHeader?: boolean
+  isBold?: boolean
+  quantity: string
+  total: string
   metadata?: {
-    _productsSold: number;
-    _total: number;
-  };
-};
+    _productsSold: number
+    _total: number
+  }
+}
 
 export const convertEventStatisticToTableData = (
   date: string,
   eventStatistic: EventStatistic,
 ) => {
-  let totalAmount = 0;
-  let totalQuantity = 0;
+  let totalAmount = 0
+  let totalQuantity = 0
 
   if (!eventStatistic) {
-    return [];
+    return []
   }
 
   const summaryFormattedDate = DateTime.fromISO(date)
     .toUTC()
-    .toFormat(DATE_FORMAT);
+    .toFormat(DATE_FORMAT)
 
   const summaryDays =
     Object.keys(eventStatistic?.productCategorySummary)?.filter(
@@ -42,9 +42,9 @@ export const convertEventStatisticToTableData = (
         DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(
           DATE_FORMAT,
         ) === summaryFormattedDate,
-    ) ?? [];
+    ) ?? []
 
-  const summaryMap = new Map<string, TableDataRecord>();
+  const summaryMap = new Map<string, TableDataRecord>()
 
   summaryDays
     .map((day) => eventStatistic?.productCategorySummary[day])
@@ -58,9 +58,9 @@ export const convertEventStatisticToTableData = (
     )
     .forEach(
       ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
-        let quantity = 0;
+        let quantity = 0
 
-        totalAmount += totalPerCategory || 0;
+        totalAmount += totalPerCategory || 0
 
         if (!summaryMap.has(`${categoryName}`)) {
           summaryMap.set(`${categoryName}`, {
@@ -70,12 +70,12 @@ export const convertEventStatisticToTableData = (
             isHeader: true,
             quantity: TRANSLATION_KEYS.shortQuantity,
             total: TRANSLATION_KEYS.total,
-          });
+          })
         }
 
         productsSummary?.forEach(
           ({ productsSold, name, totalQuantity, total }) => {
-            quantity += productsSold;
+            quantity += productsSold
 
             const existingProduct = summaryMap.get(
               `${categoryName}.${name}`,
@@ -84,7 +84,7 @@ export const convertEventStatisticToTableData = (
                 _productsSold: 0,
                 _total: 0,
               },
-            };
+            }
 
             summaryMap.set(`${categoryName}.${name}`, {
               name,
@@ -100,27 +100,27 @@ export const convertEventStatisticToTableData = (
                   existingProduct.metadata._productsSold + productsSold,
                 _total: existingProduct.metadata._total + total,
               },
-            });
+            })
           },
-        );
+        )
 
         const prevTotalPerCategory = summaryMap.get(
           `${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
         ) ?? {
           quantity: 0,
           total: 0,
-        };
+        }
         summaryMap.set(`${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`, {
           name: TRANSLATION_KEYS.totalPerCategory,
           key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
           quantity: String(Number(prevTotalPerCategory.quantity) + quantity),
           total: String(Number(prevTotalPerCategory.total) + totalPerCategory),
           isBold: true,
-        });
+        })
 
-        totalQuantity += quantity;
+        totalQuantity += quantity
       },
-    );
+    )
 
   summaryMap.set(`${TRANSLATION_KEYS.total}.${totalAmount}`, {
     name: TRANSLATION_KEYS.total,
@@ -128,7 +128,7 @@ export const convertEventStatisticToTableData = (
     quantity: String(totalQuantity),
     total: String(totalAmount),
     isBold: true,
-  });
+  })
 
-  return [...summaryMap.values()];
-};
+  return [...summaryMap.values()]
+}

package/src/events/event-venue-map/EventVenueMap.stories.tsx

@@ -1,13 +1,13 @@
-import { useState } from "react";
-import { Meta, Story } from "@storybook/react";
-import { boolean } from "@storybook/addon-knobs";
-import { EventVenueMap, EventVenueMapProps } from "./EventVenueMap";
-import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
+import { useState } from 'react'
+import { Meta, Story } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
+import { EventVenueMap, EventVenueMapProps } from './EventVenueMap'
+import { PointProduct } from '@licklist/core/dist/DataMapper/Product/PointProductDataMapper'
 
 export default {
-  title: "Events/EventVenueMap",
+  title: 'Events/EventVenueMap',
   component: EventVenueMap,
-} as Meta;
+} as Meta
 
 export const EventVenueMapComponent: Story<EventVenueMapProps> = (args) => {
   const [pointProducts, onPointProductsChange] = useState<
@@ -17,10 +17,10 @@ export const EventVenueMapComponent: Story<EventVenueMapProps> = (args) => {
       id: 1,
       pointId: 1,
       menuStepId: 1,
-      productUuid: "product-1",
+      productUuid: 'product-1',
     },
-  ]);
-  const editMode = boolean("editMode", false);
+  ])
+  const editMode = boolean('editMode', false)
 
   return (
     <div style={{ width: window.innerWidth, height: window.innerHeight }}>
@@ -31,32 +31,32 @@ export const EventVenueMapComponent: Story<EventVenueMapProps> = (args) => {
         onPointProductsChange={onPointProductsChange}
       />
     </div>
-  );
-};
+  )
+}
 
 EventVenueMapComponent.args = {
-  url: "https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s",
-  name: "Underground venue map",
+  url: 'https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s',
+  name: 'Underground venue map',
   products: [
     {
       id: 1,
-      name: "Test 1",
-      uuid: "product-1",
+      name: 'Test 1',
+      uuid: 'product-1',
     },
     {
       id: 2,
-      name: "Test 2",
-      uuid: "product-2",
+      name: 'Test 2',
+      uuid: 'product-2',
     },
     {
       id: 3,
-      name: "Test 3",
-      uuid: "product-3",
+      name: 'Test 3',
+      uuid: 'product-3',
     },
     {
       id: 4,
-      name: "Test 4",
-      uuid: "product-4",
+      name: 'Test 4',
+      uuid: 'product-4',
     },
   ],
   points: [
@@ -66,4 +66,4 @@ EventVenueMapComponent.args = {
       yCoordinate: 250,
     },
   ],
-};
+}

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -1,32 +1,32 @@
-import { forwardRef } from "react";
-import { EventVenueMapProvider } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
-import { Point } from "@licklist/plugins/dist/types/context/event/point";
-import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { VenueMap, VenueMapRef } from "./components/VenueMap";
-import { useCanvasSize } from "./hooks/useCanvasSize";
+import { forwardRef } from 'react'
+import { EventVenueMapProvider } from '@licklist/plugins/dist/context/event/EventVenueMapContext'
+import { Point } from '@licklist/plugins/dist/types/context/event/point'
+import { PointProduct } from '@licklist/core/dist/DataMapper/Product/PointProductDataMapper'
+import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
+import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock'
+import { VenueMap, VenueMapRef } from './components/VenueMap'
+import { useCanvasSize } from './hooks/useCanvasSize'
 
 export type EventVenueMapIframeProps = {
-  width?: number;
-  height?: number;
-  onPointClick?: (pointId?: number) => void;
-  usedInIframe?: boolean;
-  choosedProductUuids?: string[];
-  errorOnChoosedProductUuids?: string[];
-};
+  width?: number
+  height?: number
+  onPointClick?: (pointId?: number) => void
+  usedInIframe?: boolean
+  choosedProductUuids?: string[]
+  errorOnChoosedProductUuids?: string[]
+}
 
 export type EventVenueMapProps = {
-  url: string;
-  points?: Partial<Point>[];
-  name?: string;
-  onPointsChange?: (value: Partial<Point>[]) => void;
-  editMode?: boolean;
-  products?: Partial<Product>[];
-  pointProducts?: Partial<PointProduct>[];
-  onPointProductsChange?: (values: Partial<PointProduct>[]) => void;
-  soldOutProducts?: QuantityCheckProductInfo[];
-} & EventVenueMapIframeProps;
+  url: string
+  points?: Partial<Point>[]
+  name?: string
+  onPointsChange?: (value: Partial<Point>[]) => void
+  editMode?: boolean
+  products?: Partial<Product>[]
+  pointProducts?: Partial<PointProduct>[]
+  onPointProductsChange?: (values: Partial<PointProduct>[]) => void
+  soldOutProducts?: QuantityCheckProductInfo[]
+} & EventVenueMapIframeProps
 
 export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
   (
@@ -49,7 +49,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
     },
     ref,
   ) => {
-    const canvasSizes = useCanvasSize({ width, height });
+    const canvasSizes = useCanvasSize({ width, height })
 
     return (
       <EventVenueMapProvider
@@ -72,6 +72,6 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
           soldOutProducts={soldOutProducts}
         />
       </EventVenueMapProvider>
-    );
+    )
   },
-);
+)

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

@@ -1,18 +1,18 @@
-import { useContext, useEffect, useState, useRef } from "react";
-import { EventVenueMapContext } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
-import { Point } from "@licklist/plugins/dist/types/context/event/point";
-import { ImageOffset } from "../../types";
+import { useContext, useEffect, useState, useRef } from 'react'
+import { EventVenueMapContext } from '@licklist/plugins/dist/context/event/EventVenueMapContext'
+import { Point } from '@licklist/plugins/dist/types/context/event/point'
+import { ImageOffset } from '../../types'
 import {
   calculateDropdownOffsets,
   calculatePointsCoordinates,
-} from "../../utils";
-import { DropdownWrapper } from "./components/DropdownWrapper";
-import { SelectControl } from "./components/SelectControl";
+} from '../../utils'
+import { DropdownWrapper } from './components/DropdownWrapper'
+import { SelectControl } from './components/SelectControl'
 
 type DropdownProps = ImageOffset & {
-  stageX: number;
-  stageY: number;
-};
+  stageX: number
+  stageY: number
+}
 
 export const Dropdown = ({
   imageOffsetX,
@@ -22,48 +22,48 @@ export const Dropdown = ({
   stageX,
   stageY,
 }: DropdownProps) => {
-  const dropdownContainerRef = useRef<HTMLDivElement | null>(null);
-  const [defaultContainerWidth, setDefaultContainerWidth] = useState<number>(0);
+  const dropdownContainerRef = useRef<HTMLDivElement | null>(null)
+  const [defaultContainerWidth, setDefaultContainerWidth] = useState<number>(0)
 
   const dropdownResizeObserver = new ResizeObserver((entries) => {
-    const [dropdownDiv] = entries;
+    const [dropdownDiv] = entries
 
-    setDefaultContainerWidth(dropdownDiv.contentRect.width);
-  });
+    setDefaultContainerWidth(dropdownDiv.contentRect.width)
+  })
 
   const { mapPoints, activeElementKey, editMode } =
-    useContext(EventVenueMapContext);
+    useContext(EventVenueMapContext)
   const [selectedPoint, setSelectedPoint] = useState<Partial<Point> | null>(
     null,
-  );
+  )
 
-  const isDisabled = editMode || !selectedPoint;
+  const isDisabled = editMode || !selectedPoint
 
   useEffect(() => {
     const selectedPoint = mapPoints.find(
       (point) => String(point?.id || point?.localId) === activeElementKey,
-    );
+    )
 
-    setSelectedPoint(selectedPoint || null);
-  }, [mapPoints, activeElementKey, setSelectedPoint]);
+    setSelectedPoint(selectedPoint || null)
+  }, [mapPoints, activeElementKey, setSelectedPoint])
 
   useEffect(() => {
-    const currentRef = dropdownContainerRef.current;
+    const currentRef = dropdownContainerRef.current
 
-    if (!currentRef) return undefined;
+    if (!currentRef) return undefined
 
-    dropdownResizeObserver.observe(currentRef);
+    dropdownResizeObserver.observe(currentRef)
 
     return () => {
-      if (!currentRef) return;
-      dropdownResizeObserver.unobserve(currentRef);
-    };
+      if (!currentRef) return
+      dropdownResizeObserver.unobserve(currentRef)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dropdownContainerRef, selectedPoint]);
+  }, [dropdownContainerRef, selectedPoint])
 
   const pointCoordinates = selectedPoint
     ? { x: selectedPoint.xCoordinate, y: selectedPoint.yCoordinate }
-    : { x: 0, y: 0 };
+    : { x: 0, y: 0 }
 
   const [pointX, pointY] = calculatePointsCoordinates(
     pointCoordinates.x,
@@ -73,20 +73,20 @@ export const Dropdown = ({
       imageOffsetX,
       imageOffsetY,
     },
-  );
+  )
 
   const styles = () => {
     const { left, top } = calculateDropdownOffsets(
       { x: pointX, y: pointY },
       { scale, x: stageX, y: stageY },
-    );
+    )
 
     return {
       left: Math.round(left - defaultContainerWidth / 2),
       top: Math.round(top),
-      display: isDisabled ? "none" : undefined,
-    };
-  };
+      display: isDisabled ? 'none' : undefined,
+    }
+  }
 
   return (
     <div
@@ -98,5 +98,5 @@ export const Dropdown = ({
         <SelectControl selectedPoint={selectedPoint} />
       </DropdownWrapper>
     </div>
-  );
-};
+  )
+}

package/src/events/event-venue-map/components/Dropdown/components/DropdownWrapper/DropdownWrapper.tsx

@@ -1,10 +1,8 @@
-import { FC } from "react";
+import { FC } from 'react'
 
-export const DropdownWrapper: FC = ({ children }) => {
-  return (
-    <div className="canvas-dropdown-wrapper">
-      <div className="arrow" />
-      <div className="children-container">{children}</div>
-    </div>
-  );
-};
+export const DropdownWrapper: FC = ({ children }) => (
+  <div className="canvas-dropdown-wrapper">
+    <div className="arrow" />
+    <div className="children-container">{children}</div>
+  </div>
+)

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

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

package/src/events/event-venue-map/components/Dropdown/components/ProductsControl/ProductsControl.tsx

@@ -1,24 +1,24 @@
-import { Button } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { Button } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
 
 type ProductsControlProps = {
-  products: Partial<Product>[];
-  onChange: (productUuid: string) => void;
-};
+  products: Partial<Product>[]
+  onChange: (productUuid: string) => void
+}
 
 export const ProductsControl = ({
   products,
   onChange,
 }: ProductsControlProps) => {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
   return (
     <div className="products-control mb-3">
       {products.map(({ id, name, uuid }) => {
         const onClick = () => {
-          onChange(uuid);
-        };
+          onChange(uuid)
+        }
 
         return (
           <div className="product" key={id}>
@@ -31,12 +31,12 @@ export const ProductsControl = ({
                 className="ml-3 select-product-button"
                 onClick={onClick}
               >
-                {t("add")}
+                {t('add')}
               </Button>
             </div>
           </div>
-        );
+        )
       })}
     </div>
-  );
-};
+  )
+}

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

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