@licklist/design 0.68.0 → 0.68.1-dev.0

package/src/events/event-card/EventCard.tsx

@@ -1,48 +1,48 @@
-import { useMemo } from "react";
+import { useMemo } from 'react'
 import {
   Badge,
   Card,
   OverlayTrigger,
   Popover,
   ProgressBar,
-} from "react-bootstrap";
-import { useIntl } from "react-intl";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import * as Config from "@licklist/core/dist/Config";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+} from 'react-bootstrap'
+import { useIntl } from 'react-intl'
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+import * as Config from '@licklist/core/dist/Config'
+import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
+import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
 import {
   FaEye,
   FaExternalLinkAlt,
   FaEdit,
   FaCopy,
   FaTrashAlt,
-} from "react-icons/fa";
-import { Sale } from "../../types/bookings";
-import { TipTapEditor } from "../../tiptap-editor/TipTapEditor";
+} from 'react-icons/fa'
+import { Sale } from '../../types/bookings'
+import { TipTapEditor } from '../../tiptap-editor/TipTapEditor'
 import {
   EVENT_DESCRIPTION_SIZE,
   formatContentWithoutTags,
   getStatisticInfo,
-} from "./utils";
-import { ReactComponent as ChartBarIcon } from "../../assets/dashboard/chartBar.svg";
+} from './utils'
+import { ReactComponent as ChartBarIcon } from '../../assets/dashboard/chartBar.svg'
 
 export interface EventCardProps extends HasPermissionProp {
-  name: string;
-  description: string;
-  date: string;
-  imageUrl?: string | null;
-  sales?: Sale[];
-  onPreview: () => void;
-  onEdit: () => void;
-  onCopy: () => void;
-  onRemove: () => void;
-  eventStatistic?: EventStatistic | null;
-  onStatistic: () => void;
-  titleId?: string;
-  descriptionId?: string;
-  productSetName?: string;
+  name: string
+  description: string
+  date: string
+  imageUrl?: string | null
+  sales?: Sale[]
+  onPreview: () => void
+  onEdit: () => void
+  onCopy: () => void
+  onRemove: () => void
+  eventStatistic?: EventStatistic | null
+  onStatistic: () => void
+  titleId?: string
+  descriptionId?: string
+  productSetName?: string
 }
 
 export function EventCard({
@@ -62,18 +62,18 @@ export function EventCard({
   titleId,
   descriptionId,
 }: EventCardProps) {
-  const { t } = useTranslation("Design");
-  const { formatNumber, formatDate } = useIntl();
-  const { totalViews, ...statistics } = getStatisticInfo(eventStatistic, date);
+  const { t } = useTranslation('Design')
+  const { formatNumber, formatDate } = useIntl()
+  const { totalViews, ...statistics } = getStatisticInfo(eventStatistic, date)
   const memoedContent = useMemo(
     () => formatContentWithoutTags(description, EVENT_DESCRIPTION_SIZE),
     [description],
-  );
+  )
 
   return (
     <Card className="d-flex flex-column event-card h-100">
       <div
-        className={clsx("event-card-image-container", !imageUrl && "no-image")}
+        className={clsx('event-card-image-container', !imageUrl && 'no-image')}
       >
         {imageUrl && <Card.Img variant="top" src={imageUrl} />}
         <Badge
@@ -83,12 +83,12 @@ export function EventCard({
           variant="primary"
         >
           {formatDate(new Date(date), {
-            weekday: "short",
-            day: "numeric",
-            month: "short",
-            year: "numeric",
-            hour: "numeric",
-            minute: "numeric",
+            weekday: 'short',
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
           })}
         </Badge>
       </div>
@@ -98,26 +98,24 @@ export function EventCard({
           <TipTapEditor
             viewMode
             disabled
-            className={clsx("event-description", !imageUrl && "no-image")}
+            className={clsx('event-description', !imageUrl && 'no-image')}
             content={memoedContent}
             id={descriptionId}
           />
           <div className="mt-2 ml-2">
-            {Object.keys(statistics).map((key) => {
-              return (
-                <div className="event-card-sale" key={key}>
-                  <span className="event-card-sale-name">
-                    {t(key)}:{" "}
-                    {key === "totalAmount"
-                      ? formatNumber(statistics[key], {
-                          style: "currency",
-                          currency: Config.Currency.GBP,
-                        })
-                      : statistics[key]}
-                  </span>
-                </div>
-              );
-            })}
+            {Object.keys(statistics).map((key) => (
+              <div className="event-card-sale" key={key}>
+                <span className="event-card-sale-name">
+                  {t(key)}:{' '}
+                  {key === 'totalAmount'
+                    ? formatNumber(statistics[key], {
+                        style: 'currency',
+                        currency: Config.Currency.GBP,
+                      })
+                    : statistics[key]}
+                </span>
+              </div>
+            ))}
           </div>
 
           {sales &&
@@ -125,11 +123,11 @@ export function EventCard({
               <div className="event-card-sale" key={sale.id}>
                 {/* TODO: make it an i18n message instead */}
                 <div className="event-card-sale-text">
-                  <span className="event-card-sale-name">{sale.name}</span>{" "}
+                  <span className="event-card-sale-name">{sale.name}</span>{' '}
                   <span className="event-card-sale-quantity">
                     {[sale.current, sale.max]
                       .map((value) => formatNumber(value))
-                      .join(" / ")}
+                      .join(' / ')}
                   </span>
                 </div>
                 <ProgressBar now={sale.current} max={sale.max} />
@@ -141,7 +139,7 @@ export function EventCard({
         {productSetName && (
           <OverlayTrigger
             // Workaround for bootstrap error with "hover trigger"
-            trigger={["hover", "hover"]}
+            trigger={['hover', 'hover']}
             overlay={
               <Popover id="event-product-set-popover">
                 <Popover.Content className="event-product-set-card">
@@ -151,7 +149,7 @@ export function EventCard({
             }
           >
             <div className="pl-3 text-truncate">
-              {t("Design:productSet")}: {productSetName}
+              {t('Design:productSet')}: {productSetName}
             </div>
           </OverlayTrigger>
         )}
@@ -207,5 +205,5 @@ export function EventCard({
         </div>
       </Card.Footer>
     </Card>
-  );
+  )
 }

package/src/events/event-card/EventCardSkeleton.tsx

@@ -1,39 +1,37 @@
-import { memo } from "react";
-import { Card } from "react-bootstrap";
-import Skeleton from "react-loading-skeleton";
+import { memo } from 'react'
+import { Card } from 'react-bootstrap'
+import Skeleton from 'react-loading-skeleton'
 
-export const EventCardSkeleton = memo(() => {
-  return (
-    <Card className="d-flex flex-column event-card h-100">
-      <div className="event-card-image-container">
-        <Skeleton className="card-img-top" />
+export const EventCardSkeleton = memo(() => (
+  <Card className="d-flex flex-column event-card h-100">
+    <div className="event-card-image-container">
+      <Skeleton className="card-img-top" />
+    </div>
+    <Card.Body>
+      <Skeleton className="card-title h5" />
+      <div className="flex-grow-1">
+        <div className="editor-without-menu editor-disabled event-description">
+          <Skeleton />
+          <Skeleton />
+          <Skeleton />
+        </div>
+        <div className="mt-2">
+          <Skeleton />
+          <Skeleton />
+        </div>
       </div>
-      <Card.Body>
-        <Skeleton className="card-title h5" />
-        <div className="flex-grow-1">
-          <div className="editor-without-menu editor-disabled event-description">
-            <Skeleton />
-            <Skeleton />
-            <Skeleton />
-          </div>
-          <div className="mt-2">
-            <Skeleton />
-            <Skeleton />
-          </div>
+    </Card.Body>
+    <Card.Footer>
+      <div className="d-flex w-100 justify-content-between">
+        <div className="skeleton-w4">
+          <Skeleton />
         </div>
-      </Card.Body>
-      <Card.Footer>
-        <div className="d-flex w-100 justify-content-between">
-          <div className="skeleton-w4">
-            <Skeleton />
-          </div>
-          <div className="skeleton-w6">
-            <Skeleton />
-          </div>
+        <div className="skeleton-w6">
+          <Skeleton />
         </div>
-      </Card.Footer>
-    </Card>
-  );
-});
+      </div>
+    </Card.Footer>
+  </Card>
+))
 
-EventCardSkeleton.displayName = "EventCardSkeleton";
+EventCardSkeleton.displayName = 'EventCardSkeleton'

package/src/events/event-card/index.ts

@@ -1,2 +1,2 @@
-export * from "./EventCard";
-export * from "./EventCardSkeleton";
+export * from './EventCard'
+export * from './EventCardSkeleton'

package/src/events/event-card/utils.ts

@@ -1,31 +1,31 @@
-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'
+import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
+import { DateTime } from 'luxon'
 
 export function formatContent(content, maxSymbols) {
-  if (!content) return "";
-  if (content.length > maxSymbols) return `${content.slice(0, maxSymbols)}...`;
-  return content;
+  if (!content) return ''
+  if (content.length > maxSymbols) return `${content.slice(0, maxSymbols)}...`
+  return content
 }
 
 export const formatContentWithoutTags = (
   content,
   maxLength = EVENT_DESCRIPTION_SIZE,
 ) => {
-  if (!content) return "";
-  if (content < maxLength) return content;
-  const text = content.replace(/<[^>]*>/g, "");
+  if (!content) return ''
+  if (content < maxLength) return content
+  const text = content.replace(/<[^>]*>/g, '')
   const trimmedText = text
     .trim()
-    .replace(/&nbsp;|[^a-zA-Z0-9\s]/g, "")
-    .replace(/\s\s+/g, " ");
+    .replace(/&nbsp;|[^a-zA-Z0-9\s]/g, '')
+    .replace(/\s\s+/g, ' ')
 
-  const words = trimmedText.slice(0, maxLength).split(" ");
-  const index = String(content).indexOf(words[words.length - 2]);
-  return content.slice(0, index).concat("...");
-};
+  const words = trimmedText.slice(0, maxLength).split(' ')
+  const index = String(content).indexOf(words[words.length - 2])
+  return content.slice(0, index).concat('...')
+}
 
-export const EVENT_DESCRIPTION_SIZE = 350;
+export const EVENT_DESCRIPTION_SIZE = 350
 
 /**
  * Calculate the total number of views from the given dates and event statistic.
@@ -41,7 +41,7 @@ export const calculateTotalViews = (
   dates.reduce(
     (acc, date) => acc + (eventStatistic.views[date]?.pageViews ?? 0),
     0,
-  );
+  )
 
 /**
  * Calculates the total number of products sold and the total amount sold
@@ -55,21 +55,21 @@ export const calculateTotalSoldAndAmount = (
   dates: string[],
   eventStatistic: EventStatistic,
 ): [number, number] => {
-  let totalSold = 0;
-  let totalAmount = 0;
+  let totalSold = 0
+  let totalAmount = 0
   dates.forEach((date) =>
     Object.values(eventStatistic.productCategorySummary[date] ?? {}).forEach(
       ({ totalPerCategory, productsSummary }) => {
-        totalAmount += totalPerCategory || 0;
+        totalAmount += totalPerCategory || 0
         totalSold +=
           productsSummary?.reduce((acc, curr) => acc + curr.productsSold, 0) ??
-          0;
+          0
       },
     ),
-  );
+  )
 
-  return [totalSold, totalAmount];
-};
+  return [totalSold, totalAmount]
+}
 
 /**
  * Get statistic information for a given event and date.
@@ -85,20 +85,20 @@ export const getStatisticInfo = (
   eventStatistic: EventStatistic | null,
   date: string,
 ): {
-  totalViews: number;
-  totalSold: number;
-  totalAmount: number;
+  totalViews: number
+  totalSold: number
+  totalAmount: number
 } => {
-  const defaultValues = { totalViews: 0, totalSold: 0, totalAmount: 0 };
-  if (!eventStatistic) return defaultValues;
+  const defaultValues = { totalViews: 0, totalSold: 0, totalAmount: 0 }
+  if (!eventStatistic) return defaultValues
 
   const viewsFormattedDate = DateTime.fromISO(date)
     .toUTC()
-    .toFormat(DATE_FORMAT);
+    .toFormat(DATE_FORMAT)
 
   const summaryFormattedDate = DateTime.fromISO(date)
     .toUTC()
-    .toFormat(DATE_FORMAT);
+    .toFormat(DATE_FORMAT)
 
   const summaryDays =
     Object.keys(eventStatistic?.productCategorySummary)?.filter(
@@ -106,13 +106,13 @@ export const getStatisticInfo = (
         DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(
           DATE_FORMAT,
         ) === summaryFormattedDate,
-    ) ?? [];
+    ) ?? []
 
-  const totalViews = calculateTotalViews([viewsFormattedDate], eventStatistic);
+  const totalViews = calculateTotalViews([viewsFormattedDate], eventStatistic)
   const [totalSold, totalAmount] = calculateTotalSoldAndAmount(
     summaryDays,
     eventStatistic,
-  );
+  )
 
-  return { totalViews, totalSold, totalAmount };
-};
+  return { totalViews, totalSold, totalAmount }
+}

package/src/events/event-statistic-modal/EventStatisticModal.stories.tsx

@@ -1,19 +1,19 @@
-import { useState } from "react";
-import { Meta, Story } from "@storybook/react";
-import { boolean } from "@storybook/addon-knobs";
+import { useState } from 'react'
+import { Meta, Story } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
 import {
   EventStatisticModal,
   EventStatisticModalProps,
-} from "./EventStatisticModal";
+} from './EventStatisticModal'
 
 export default {
-  title: "Events/EventStatisticModal",
+  title: 'Events/EventStatisticModal',
   component: EventStatisticModal,
-} as Meta;
+} as Meta
 
 export const Default: Story<EventStatisticModalProps> = (args) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const isEmptyEventStatistic = boolean("isEmptyEventStatistic", false);
+  const [isOpen, setIsOpen] = useState(false)
+  const isEmptyEventStatistic = boolean('isEmptyEventStatistic', false)
 
   return (
     <div>
@@ -27,28 +27,28 @@ export const Default: Story<EventStatisticModalProps> = (args) => {
         date={args.date}
       />
     </div>
-  );
-};
+  )
+}
 
 Default.args = {
-  date: "2023-08-31T09:35:00.000+03:00",
+  date: '2023-08-31T09:35:00.000+03:00',
   eventStatistic: {
     views: {
-      "2023-08-31": {
+      '2023-08-31': {
         visitors: 10,
         pageViews: 50,
       },
     },
     productCategorySummary: {
-      "2023-08-31 09:35:00": [
+      '2023-08-31 09:35:00': [
         {
           eventId: 1236,
-          categoryName: "ticket",
+          categoryName: 'ticket',
           totalPerCategory: 1300,
           productsSummary: [
             {
               id: 221,
-              name: "VIP",
+              name: 'VIP',
               productsSold: 13,
               totalQuantity: 25,
               total: 1300,
@@ -57,12 +57,12 @@ Default.args = {
         },
         {
           eventId: 1236,
-          categoryName: "booking cat",
+          categoryName: 'booking cat',
           totalPerCategory: 275,
           productsSummary: [
             {
               id: 222,
-              name: "Table booking",
+              name: 'Table booking',
               productsSold: 11,
               totalQuantity: null,
               total: 275,
@@ -71,19 +71,19 @@ Default.args = {
         },
         {
           eventId: 1236,
-          categoryName: "Menu",
+          categoryName: 'Menu',
           totalPerCategory: 450,
           productsSummary: [
             {
               id: 223,
-              name: "Wine 1 bottle",
+              name: 'Wine 1 bottle',
               productsSold: 9,
               totalQuantity: null,
               total: 360,
             },
             {
               id: 224,
-              name: "caesar salad",
+              name: 'caesar salad',
               productsSold: 9,
               totalQuantity: null,
               total: 90,
@@ -91,15 +91,15 @@ Default.args = {
           ],
         },
       ],
-      "2023-08-31 10:35:00": [
+      '2023-08-31 10:35:00': [
         {
           eventId: 1236,
-          categoryName: "ticket",
+          categoryName: 'ticket',
           totalPerCategory: 1300,
           productsSummary: [
             {
               id: 221,
-              name: "VIP",
+              name: 'VIP',
               productsSold: 13,
               totalQuantity: 25,
               total: 1300,
@@ -108,12 +108,12 @@ Default.args = {
         },
         {
           eventId: 1236,
-          categoryName: "booking cat",
+          categoryName: 'booking cat',
           totalPerCategory: 275,
           productsSummary: [
             {
               id: 222,
-              name: "Table booking",
+              name: 'Table booking',
               productsSold: 11,
               totalQuantity: null,
               total: 275,
@@ -122,19 +122,19 @@ Default.args = {
         },
         {
           eventId: 1236,
-          categoryName: "Menu",
+          categoryName: 'Menu',
           totalPerCategory: 450,
           productsSummary: [
             {
               id: 223,
-              name: "Wine 1 bottle",
+              name: 'Wine 1 bottle',
               productsSold: 9,
               totalQuantity: null,
               total: 360,
             },
             {
               id: 224,
-              name: "caesar salad",
+              name: 'caesar salad',
               productsSold: 9,
               totalQuantity: null,
               total: 90,
@@ -144,4 +144,4 @@ Default.args = {
       ],
     },
   },
-};
+}

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -1,18 +1,18 @@
-import { Modal, Button } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
-import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
-import { FaTimes } from "react-icons/fa";
-import { StaticTable } from "../../table";
-import { useTableData } from "./hooks/useTableData";
+import { Modal, Button } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
+import { Event } from '@licklist/core/dist/DataMapper/Provider/EventDataMapper'
+import { FaTimes } from 'react-icons/fa'
+import { StaticTable } from '../../table'
+import { useTableData } from './hooks/useTableData'
 
 export type EventStatisticModalProps = {
-  isOpen: boolean;
-  setIsOpen: (value: boolean) => void;
-  date?: Event["startAt"] | null;
-  eventStatistic?: EventStatistic | null;
-  title?: string;
-};
+  isOpen: boolean
+  setIsOpen: (value: boolean) => void
+  date?: Event['startAt'] | null
+  eventStatistic?: EventStatistic | null
+  title?: string
+}
 
 export const EventStatisticModal = ({
   isOpen,
@@ -21,12 +21,12 @@ export const EventStatisticModal = ({
   eventStatistic,
   title,
 }: EventStatisticModalProps) => {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
-  const data = useTableData(date, eventStatistic);
+  const data = useTableData(date, eventStatistic)
   const handleClose = () => {
-    setIsOpen(false);
-  };
+    setIsOpen(false)
+  }
 
   return (
     <Modal
@@ -38,7 +38,7 @@ export const EventStatisticModal = ({
       className="event-statistic-modal"
     >
       <Modal.Header>
-        <Modal.Title as="h6">{title ?? t("eventStatistic")}</Modal.Title>
+        <Modal.Title as="h6">{title ?? t('eventStatistic')}</Modal.Title>
         <Button
           variant="danger"
           className="btn-sm rounded"
@@ -50,12 +50,12 @@ export const EventStatisticModal = ({
       <Modal.Body>
         {data.length ? (
           <>
-            <h5 className="mb-5">{t("statistics")}</h5>
+            <h5 className="mb-5">{t('statistics')}</h5>
             <StaticTable
               columns={[
-                { key: "name", label: "" },
-                { key: "quantity", label: "" },
-                { key: "total", label: "" },
+                { key: 'name', label: '' },
+                { key: 'quantity', label: '' },
+                { key: 'total', label: '' },
               ]}
               data={data}
               className="striped-static-table"
@@ -63,10 +63,10 @@ export const EventStatisticModal = ({
           </>
         ) : (
           <div className="no-statistic">
-            <h5>{t("noStatisticsForSelectedEvent")}</h5>
+            <h5>{t('noStatisticsForSelectedEvent')}</h5>
           </div>
         )}
       </Modal.Body>
     </Modal>
-  );
-};
+  )
+}