@licklist/design 0.44.550 → 0.44.551-dev.0

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

@@ -91,6 +91,57 @@ Default.args = {
           ],
         },
       ],
+      "2023-08-31 10:35:00": [
+        {
+          eventId: 1236,
+          categoryName: "ticket",
+          totalPerCategory: 1300,
+          productsSummary: [
+            {
+              id: 221,
+              name: "VIP",
+              productsSold: 13,
+              totalQuantity: 25,
+              total: 1300,
+            },
+          ],
+        },
+        {
+          eventId: 1236,
+          categoryName: "booking cat",
+          totalPerCategory: 275,
+          productsSummary: [
+            {
+              id: 222,
+              name: "Table booking",
+              productsSold: 11,
+              totalQuantity: null,
+              total: 275,
+            },
+          ],
+        },
+        {
+          eventId: 1236,
+          categoryName: "Menu",
+          totalPerCategory: 450,
+          productsSummary: [
+            {
+              id: 223,
+              name: "Wine 1 bottle",
+              productsSold: 9,
+              totalQuantity: null,
+              total: 360,
+            },
+            {
+              id: 224,
+              name: "caesar salad",
+              productsSold: 9,
+              totalQuantity: null,
+              total: 90,
+            },
+          ],
+        },
+      ],
     },
   },
 };

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

@@ -8,6 +8,19 @@ export const TRANSLATION_KEYS = {
   totalPerCategory: "totalPerCategory",
 };
 
+type TableDataRecord = {
+  name: string;
+  key: string;
+  isHeader?: boolean;
+  isBold?: boolean;
+  quantity: string;
+  total: string;
+  metadata?: {
+    _productsSold: number;
+    _total: number;
+  };
+};
+
 export const convertEventStatisticToTableData = (
   date: string,
   eventStatistic: EventStatistic
@@ -19,15 +32,6 @@ export const convertEventStatisticToTableData = (
     return [];
   }
 
-  const tableDataArray: {
-    name: string;
-    key: string;
-    isHeader?: boolean;
-    isBold?: boolean;
-    quantity: string | number;
-    total: string | number;
-  }[] = [];
-
   const summaryFormattedDate = DateTime.fromISO(date)
     .toUTC()
     .toFormat(DATE_FORMAT);
@@ -40,16 +44,26 @@ export const convertEventStatisticToTableData = (
         ) === summaryFormattedDate
     ) ?? [];
 
+  const summaryMap = new Map<string, TableDataRecord>();
+
   summaryDays
     .map((day) => eventStatistic?.productCategorySummary[day])
-    .forEach((summaries) => {
-      summaries.forEach(
-        ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
-          let quantity = 0;
+    .flat()
+    .sort((prev, next) =>
+      prev.categoryName === next.categoryName
+        ? 0
+        : prev.categoryName > next.categoryName
+        ? 1
+        : -1
+    )
+    .forEach(
+      ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
+        let quantity = 0;
 
-          totalAmount += totalPerCategory || 0;
+        totalAmount += totalPerCategory || 0;
 
-          tableDataArray.push({
+        if (!summaryMap.has(`${categoryName}`)) {
+          summaryMap.set(`${categoryName}`, {
             name: categoryName,
             key: `${eventId}.${categoryName}`,
             isBold: true,
@@ -57,42 +71,64 @@ export const convertEventStatisticToTableData = (
             quantity: TRANSLATION_KEYS.shortQuantity,
             total: TRANSLATION_KEYS.total,
           });
+        }
 
-          productsSummary?.forEach(
-            ({ productsSold, name, totalQuantity, total }) => {
-              quantity += productsSold;
-
-              tableDataArray.push({
-                name,
-                key: `${eventId}.${categoryName}.${name}`,
-                quantity: totalQuantity
-                  ? `${productsSold} / ${totalQuantity}`
-                  : String(productsSold),
-                total: String(total),
-              });
-            }
-          );
-
-          tableDataArray.push({
-            name: TRANSLATION_KEYS.totalPerCategory,
-            key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
-            quantity,
-            total: totalPerCategory,
-            isBold: true,
-          });
+        productsSummary?.forEach(
+          ({ productsSold, name, totalQuantity, total }) => {
+            quantity += productsSold;
 
-          totalQuantity += quantity;
-        }
-      );
-    });
+            const existingProduct = summaryMap.get(
+              `${categoryName}.${name}`
+            ) ?? {
+              metadata: {
+                _productsSold: 0,
+                _total: 0,
+              },
+            };
+
+            summaryMap.set(`${categoryName}.${name}`, {
+              name,
+              key: `${eventId}.${categoryName}.${name}`,
+              quantity: totalQuantity
+                ? `${
+                    existingProduct.metadata._productsSold + productsSold
+                  } / ${totalQuantity}`
+                : String(existingProduct.metadata._productsSold + productsSold),
+              total: String(existingProduct.metadata._total + total),
+              metadata: {
+                _productsSold:
+                  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;
+      }
+    );
 
-  tableDataArray.push({
+  summaryMap.set(`${TRANSLATION_KEYS.total}.${totalAmount}`, {
     name: TRANSLATION_KEYS.total,
     key: `${TRANSLATION_KEYS.total}.${totalAmount}`,
-    quantity: totalQuantity,
-    total: totalAmount,
+    quantity: String(totalQuantity),
+    total: String(totalAmount),
     isBold: true,
   });
 
-  return tableDataArray;
+  return [...summaryMap.values()];
 };

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

@@ -3,6 +3,7 @@ import { Group } from "react-konva";
 import Konva from "konva";
 import { EventVenueMapContext } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
 import { Point } from "@licklist/plugins/dist/types/context/event/point";
+import { Product } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { ImageOffset } from "../../types";
 import { PointIcon } from "./components/PointIcon";
 import {
@@ -10,7 +11,6 @@ import {
   calculatePointsCoordinates,
 } from "../../utils";
 import { ProductIcon } from "./components/ProductIcon";
-import { Product } from "../../../../types";
 
 type MapPointProps = Partial<Point> &
   ImageOffset & {

package/src/iframe/event/event-booking-products/EventBookingProducts.tsx

@@ -1,13 +1,14 @@
 import React from "react";
-
 import Accordion from "react-bootstrap/Accordion";
-import { ProductCategory, Order, SetOrderFn } from "../../../types";
+import { OrderItems } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
+import { ProductCategory } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { SetOrderFn } from "../../../types";
 import { AccordionItem } from "./components/AccordionItem";
 
 export interface EventBookingProductsProps {
   productsCategories?: ProductCategory[];
   setOrder: SetOrderFn;
-  order: Record<number, Order>;
+  order: OrderItems;
 }
 
 export function EventBookingProducts({

package/src/iframe/event/event-booking-products/components/AccordionItem/AccordionItem.tsx

@@ -1,14 +1,18 @@
 import React from "react";
 import clsx from "clsx";
 import { useIntl } from "react-intl";
-
 import Accordion from "react-bootstrap/Accordion";
 import Card from "react-bootstrap/Card";
 import { useAccordionToggle } from "react-bootstrap/AccordionToggle";
 import AccordionContext from "react-bootstrap/AccordionContext";
+import {
+  OrderItem,
+  OrderItems,
+} from "@licklist/plugins/dist/types/context/Iframe/orderItems";
+import { Product } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { NumberInput } from "../../../../../static";
 import Icon from "../../../../../static/Icon";
-import { Order, Product, SetOrderFn } from "../../../../../types";
+import { SetOrderFn } from "../../../../../types";
 
 interface CustomToggleProps {
   eventKey: string;
@@ -19,7 +23,7 @@ interface AccordionItemProps {
   name: string;
   products: Product[];
   setOrder: SetOrderFn;
-  order: Record<number, Order>;
+  order: Record<number, OrderItem>;
   productsCategoryId: number;
 }
 
@@ -86,7 +90,7 @@ interface ProductItemProps {
   name: string;
   price: number;
   description: string;
-  order: Record<number, Order>;
+  order: OrderItems;
   setOrder: SetOrderFn;
   productsCategoryId: number;
 }

package/src/iframe/event/event-order-summary/EventOrderSummary.tsx

@@ -1,9 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-
 import { StaticTable, StaticTableData } from "../../../table/StaticTable";
 
-export { Order } from "../../../types";
 interface EventOrderSummaryProps {
   data: StaticTableData[];
   tableName?: string;

package/src/iframe/order-process/components/BookingSummary/BookingSummary.stories.tsx

@@ -10,11 +10,11 @@ export default {
 const productCategories = [
   {
     id: 1,
-    name: "Early Bird General Admission",
+    name: "cat 1",
     products: [
       {
-        id: 7,
-        name: "Beer",
+        id: 11,
+        name: "cat 1 prod 1",
         description: `Ticket <em>is</em> valid for students and non students. 
           You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
           Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -23,8 +23,8 @@ const productCategories = [
         price: 1,
       },
       {
-        id: 8,
-        name: "Wine",
+        id: 12,
+        name: "cat 2 prod 2",
         description: `Ticket is valid for students and non students.
            You do not need <strong>student ID</strong> for this event but do require regular age ID e.g. driving licence or passport.
             Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -37,11 +37,11 @@ const productCategories = [
   },
   {
     id: 2,
-    name: "Nice",
+    name: "cat 2",
     products: [
       {
-        id: 3,
-        name: "Beer",
+        id: 21,
+        name: "cat 2 prod 1",
         description: `Ticket is valid for students and non students. 
           You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
           Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -50,8 +50,8 @@ const productCategories = [
         price: 1,
       },
       {
-        id: 5,
-        name: "Wine",
+        id: 22,
+        name: "cat 2 prod 2",
         description: `Ticket is valid for students and non students.
            You do not need <strong>student ID</strong> for this event but do require regular age ID e.g. driving licence or passport.
             Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -66,11 +66,11 @@ const productCategories = [
 const productCategories2 = [
   {
     id: 3,
-    name: "fine",
+    name: "cat 3",
     products: [
       {
-        id: 9,
-        name: "Beer",
+        id: 31,
+        name: "cat 3 prod 1",
         description: `Ticket is valid for students and non students. 
           You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
           Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -79,8 +79,8 @@ const productCategories2 = [
         price: 1,
       },
       {
-        id: 10,
-        name: "Wine",
+        id: 32,
+        name: "cat 3 prod 2",
         description: `Ticket is valid for students and non students.
            You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
             Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -90,14 +90,15 @@ const productCategories2 = [
         // isRequired: true,
       },
     ],
+    zone: 1,
   },
   {
     id: 4,
-    name: "Twice",
+    name: "cat 4",
     products: [
       {
-        id: 11,
-        name: "Beer",
+        id: 41,
+        name: "cat 4 prod 1",
         description: `Ticket is valid for students and non students. 
           You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
           Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -106,8 +107,8 @@ const productCategories2 = [
         price: 1,
       },
       {
-        id: 12,
-        name: "Wine",
+        id: 42,
+        name: "cat 4 prod 1",
         description: `Ticket is valid for students and non students.
            You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
             Ticket valid for entry before 11.30pm for 12.30am showtime.`,
@@ -141,26 +142,40 @@ export function Default() {
           menuSteps={menuSteps as any}
           peopleAmount={5}
           formValues={{
-            "3": {
-              id: 3,
+            "11": {
+              id: 11,
               quantity: 1,
-              name: "Beer",
+              name: "cat 1 prod 1",
               price: 0,
-              productsCategoryId: 2,
+              productsCategoryId: 1,
             },
-            "5": {
-              id: 5,
+            "21": {
+              id: 21,
               quantity: 2,
-              name: "Wine",
+              name: "cat 2 prod 1",
               price: 1,
               productsCategoryId: 2,
             },
-            "7": {
-              id: 7,
+            "31": {
+              id: 31,
               quantity: 4,
-              name: "Beer",
+              name: "cat 3 prod 1",
               price: 1,
-              productsCategoryId: 1,
+              productsCategoryId: 3,
+            },
+            "32": {
+              id: 32,
+              quantity: 4,
+              name: "cat 3 prod 2",
+              price: 1,
+              productsCategoryId: 3,
+            },
+            "41": {
+              id: 41,
+              quantity: 4,
+              name: "cat 4 prod 1",
+              price: 1,
+              productsCategoryId: 4,
             },
           }}
           totalWithDiscount={5}

package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx

@@ -1,9 +1,9 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
+import { values } from "lodash";
 import { LoaderIndicator } from "../../../../static";
-import { MenuStep, Order } from "../../../../types";
 import { ProductsByMenuStep } from "./components/ProductsByMenuStep";
 import { BookingSummaryProps } from "./types";
 import { SummaryTotal } from "./components/SummaryTotal";
@@ -13,11 +13,11 @@ export const BookingSummary = ({
   date,
   time,
   menuSteps,
-  formValues,
+  formValues = {},
   shouldHidePeopleAmount,
   eventName,
   transactionFee = 0,
-  productsWithErrors,
+  productsWithErrors = [],
   isLoading,
   hasPeopleInput,
   peopleAmount,
@@ -25,15 +25,6 @@ export const BookingSummary = ({
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
 
-  const orderProducts = useMemo(() => {
-    if (!formValues) {
-      return undefined;
-    }
-    const products = Object.values(formValues).filter(Boolean) as Order[];
-
-    return products?.filter((prod) => prod?.quantity !== 0);
-  }, [formValues]);
-
   if (isLoading) {
     return (
       <div className="payment-booking-summary">
@@ -52,19 +43,20 @@ export const BookingSummary = ({
         </div>
         <hr />
 
-        {orderProducts?.length > 0 ? (
+        {values(formValues)?.length > 0 ? (
           <div>
             <div className="cart-items">
-              {menuSteps.map((menuStep: MenuStep) => {
-                return (
+              <div className="products-by-menu-step">
+                {menuSteps.map((menuStep) => (
                   <ProductsByMenuStep
                     key={menuStep.id}
-                    orderProducts={orderProducts}
+                    orderItems={formValues}
                     step={menuStep}
                     productsWithErrors={productsWithErrors}
                   />
-                );
-              })}
+                ))}
+              </div>
+
               {!shouldHidePeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
@@ -74,6 +66,7 @@ export const BookingSummary = ({
                   </div>
                 </>
               )}
+
               {!!transactionFee && (
                 <>
                   <hr />

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useIntl } from "react-intl";
+import * as Config from "@licklist/core/dist/Config";
+import { OrderItem } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
+
+type ProductSummaryProps = {
+  name?: string;
+  productQuantityError?: string;
+  orderProduct: OrderItem;
+};
+
+export const ProductSummary = ({
+  name,
+  productQuantityError,
+  orderProduct,
+}: ProductSummaryProps) => {
+  const { t } = useTranslation("Design");
+  const { formatNumber } = useIntl();
+
+  const price = formatNumber(
+    (orderProduct?.deposit || orderProduct?.price || 0) *
+      orderProduct?.quantity,
+    { style: "currency", currency: Config.Currency.GBP }
+  );
+
+  return (
+    <div className="product">
+      <p className="m-0 name">{name ?? orderProduct?.name}</p>
+      <div className="d-flex justify-content-between">
+        <p className="m-0">
+          {t("shortQuantity")}:&nbsp;{orderProduct?.quantity}
+        </p>
+
+        <p className="price">{price}</p>
+      </div>
+
+      {productQuantityError && (
+        <p className="iframe-event__message-error">{productQuantityError}</p>
+      )}
+    </div>
+  );
+};

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/index.ts

@@ -0,0 +1 @@
+export * from "./ProductSummary";