@licklist/design 0.44.551-dev.8 → 0.44.551

package/src/date-time-button/DateTimeButton.stories.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { DateTime } from "luxon";
-import { DateTimeButton, DateTimeButtonProps, Variant } from "./DateTimeButton";
+import { DateTimeButton, DateTimeButtonProps } from "./DateTimeButton";
 
 export default {
   title: "DateTimeButton",
   component: DateTimeButton,
 } as Meta;
 
-const date = DateTime.now();
+const date = DateTime.fromISO("2023-12-28T10:10:10.000Z");
 
 export const Default: Story<DateTimeButtonProps> = (args) => {
   return <DateTimeButton {...args} />;
@@ -48,23 +48,22 @@ export const Time: Story<DateTimeButtonProps> = (args) => {
 };
 
 Time.args = {
-  date: DateTime.now().plus({ hours: 10 }),
+  date: "10:10",
   isSelected: false,
-  isDisabled: false,
+  isDisabled: true,
   onSelect: () => null,
-  variant: Variant.time,
 };
 
-export const Calendar: Story<DateTimeButtonProps> = (args) => {
+export const OnlyTime: Story<DateTimeButtonProps> = (args) => {
   return <DateTimeButton {...args} />;
 };
 
-Calendar.args = {
-  date: DateTime.now(),
+OnlyTime.args = {
+  date: "10:10",
   isSelected: false,
-  isDisabled: false,
+  isDisabled: true,
   onSelect: () => null,
-  variant: Variant.month,
+  isOnlyTimeContainer: true,
 };
 
 export const WithPrice: Story<DateTimeButtonProps> = (args) => {
@@ -76,6 +75,7 @@ WithPrice.args = {
   isSelected: false,
   isDisabled: false,
   onSelect: () => null,
+  isOnlyTimeContainer: false,
   price: "from $8000",
 };
 
@@ -88,9 +88,10 @@ WithAvailability.args = {
   isSelected: false,
   isDisabled: false,
   onSelect: () => null,
-  showResources: true,
+  isOnlyTimeContainer: false,
+  price: "from $8000",
   resources: {
-    bookedResources: 1,
-    totalResources: 3,
+    booked: 1,
+    total: 3,
   },
 };

package/src/date-time-button/DateTimeButton.tsx

@@ -5,44 +5,36 @@ import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/
 import { AvailabilityIndicator } from "../availability-indicator";
 import { DateContent } from "./DateContent";
 
-export enum Variant {
-  week = "week",
-  month = "month",
-  time = "time",
-}
-
-export type DateTimeButtonProps = {
-  date: DateTime;
+export type DateTimeButtonProps<T = DateTime | string> = {
+  date: T;
   isSelected?: boolean;
   isDisabled?: boolean;
   isSoldOut?: boolean;
-  onSelect: (date: DateTime) => void;
+  onSelect: (date: T) => void;
+  isOnlyTimeContainer?: boolean;
   price?: string | number | ReactElement | null;
   resources?: ZoneResourcesAvailability | null;
+  calendarView?: boolean;
   showResources?: boolean;
-  variant: Variant;
 };
 
-export const DateTimeButton = ({
+export const DateTimeButton = <T extends DateTime | string>({
   date,
   isDisabled: _isDisabled,
   isSelected,
-  isSoldOut: _isSoldOut,
+  isSoldOut,
   onSelect,
+  isOnlyTimeContainer,
   price,
   resources,
+  calendarView,
   showResources,
-  variant = Variant.week,
-}: DateTimeButtonProps) => {
-  const isSoldOut =
-    _isSoldOut ||
-    (resources && resources.bookedResources >= resources.totalResources);
-
-  const isTimeVariant = variant === Variant.time;
-
-  const isTimeInPast = isTimeVariant && isDateInPast(date);
+}: DateTimeButtonProps<T>) => {
+  const isTimeVariant = typeof date === "string";
 
-  const isDisabled = _isDisabled || isSoldOut || isTimeInPast;
+  const isDisabled =
+    _isDisabled ||
+    (resources && resources.bookedResources === resources.totalResources);
 
   return (
     <button
@@ -53,32 +45,31 @@ export const DateTimeButton = ({
         "date-time-button",
         isDisabled && "disabled",
         isSelected && "selected",
-        // TODO refactor this
         isTimeVariant && "time-button",
-        isTimeVariant && "only-time-container",
+        isOnlyTimeContainer && "only-time-container",
         !isTimeVariant && "today",
-        variant === Variant.month && "calendar-view"
+        calendarView && "calendar-view"
       )}
     >
-      <DateContent
-        date={date}
-        isDisabled={isDisabled}
-        isSelected={isSelected}
-        variant={variant}
-      />
+      {isTimeVariant ? (
+        date
+      ) : (
+        <DateContent
+          date={date}
+          isDisabled={isDisabled}
+          isSelected={isSelected}
+        />
+      )}
 
       {price && !isDisabled && <div className="price">{price}</div>}
 
       {showResources && resources && (
         <AvailabilityIndicator
           resources={resources}
-          isUnavailable={_isDisabled || isTimeInPast}
+          isUnavailable={_isDisabled}
           isSoldOut={isSoldOut}
         />
       )}
     </button>
   );
 };
-
-const isDateInPast = (date: DateTime): boolean =>
-  date.toUTC() <= DateTime.now().toUTC();

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

@@ -3,7 +3,6 @@ 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 {
@@ -11,6 +10,7 @@ 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,14 +1,13 @@
 import React from "react";
+
 import Accordion from "react-bootstrap/Accordion";
-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 { ProductCategory, Order, SetOrderFn } from "../../../types";
 import { AccordionItem } from "./components/AccordionItem";
 
 export interface EventBookingProductsProps {
   productsCategories?: ProductCategory[];
   setOrder: SetOrderFn;
-  order: OrderItems;
+  order: Record<number, Order>;
 }
 
 export function EventBookingProducts({

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

@@ -1,18 +1,14 @@
 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 { SetOrderFn } from "../../../../../types";
+import { Order, Product, SetOrderFn } from "../../../../../types";
 
 interface CustomToggleProps {
   eventKey: string;
@@ -23,7 +19,7 @@ interface AccordionItemProps {
   name: string;
   products: Product[];
   setOrder: SetOrderFn;
-  order: Record<number, OrderItem>;
+  order: Record<number, Order>;
   productsCategoryId: number;
 }
 
@@ -90,7 +86,7 @@ interface ProductItemProps {
   name: string;
   price: number;
   description: string;
-  order: OrderItems;
+  order: Record<number, Order>;
   setOrder: SetOrderFn;
   productsCategoryId: number;
 }

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

@@ -1,7 +1,9 @@
 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: "cat 1",
+    name: "Early Bird General Admission",
     products: [
       {
-        id: 11,
-        name: "cat 1 prod 1",
+        id: 7,
+        name: "Beer",
         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: 12,
-        name: "cat 2 prod 2",
+        id: 8,
+        name: "Wine",
         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: "cat 2",
+    name: "Nice",
     products: [
       {
-        id: 21,
-        name: "cat 2 prod 1",
+        id: 3,
+        name: "Beer",
         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: 22,
-        name: "cat 2 prod 2",
+        id: 5,
+        name: "Wine",
         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: "cat 3",
+    name: "fine",
     products: [
       {
-        id: 31,
-        name: "cat 3 prod 1",
+        id: 9,
+        name: "Beer",
         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: 32,
-        name: "cat 3 prod 2",
+        id: 10,
+        name: "Wine",
         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,15 +90,14 @@ const productCategories2 = [
         // isRequired: true,
       },
     ],
-    zone: 1,
   },
   {
     id: 4,
-    name: "cat 4",
+    name: "Twice",
     products: [
       {
-        id: 41,
-        name: "cat 4 prod 1",
+        id: 11,
+        name: "Beer",
         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.`,
@@ -107,8 +106,8 @@ const productCategories2 = [
         price: 1,
       },
       {
-        id: 42,
-        name: "cat 4 prod 1",
+        id: 12,
+        name: "Wine",
         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.`,
@@ -142,40 +141,26 @@ export function Default() {
           menuSteps={menuSteps as any}
           peopleAmount={5}
           formValues={{
-            "11": {
-              id: 11,
+            "3": {
+              id: 3,
               quantity: 1,
-              name: "cat 1 prod 1",
+              name: "Beer",
               price: 0,
-              productsCategoryId: 1,
+              productsCategoryId: 2,
             },
-            "21": {
-              id: 21,
+            "5": {
+              id: 5,
               quantity: 2,
-              name: "cat 2 prod 1",
+              name: "Wine",
               price: 1,
               productsCategoryId: 2,
             },
-            "31": {
-              id: 31,
+            "7": {
+              id: 7,
               quantity: 4,
-              name: "cat 3 prod 1",
+              name: "Beer",
               price: 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,
+              productsCategoryId: 1,
             },
           }}
           totalWithDiscount={5}

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

@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useMemo } 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,6 +25,15 @@ 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">
@@ -43,20 +52,19 @@ export const BookingSummary = ({
         </div>
         <hr />
 
-        {values(formValues)?.length > 0 ? (
+        {orderProducts?.length > 0 ? (
           <div>
             <div className="cart-items">
-              <div className="products-by-menu-step">
-                {menuSteps.map((menuStep) => (
+              {menuSteps.map((menuStep: MenuStep) => {
+                return (
                   <ProductsByMenuStep
                     key={menuStep.id}
-                    orderItems={formValues}
+                    orderProducts={orderProducts}
                     step={menuStep}
                     productsWithErrors={productsWithErrors}
                   />
-                ))}
-              </div>
-
+                );
+              })}
               {!shouldHidePeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
@@ -66,7 +74,6 @@ export const BookingSummary = ({
                   </div>
                 </>
               )}
-
               {!!transactionFee && (
                 <>
                   <hr />

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

@@ -1,72 +1,90 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useIntl } from "react-intl";
+import * as Config from "@licklist/core/dist/Config";
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import {
-  OrderItem,
-  OrderItems,
-} from "@licklist/plugins/dist/types/context/Iframe/orderItems";
-import { MenuStep } from "@licklist/plugins/dist/types/context/sale/menuSteps";
-import { values } from "lodash";
-import { ProductSummary } from "../ProductSummary";
-import { getProductError } from "../../utils";
-
-const doesStepHaveItems = (orderItems: OrderItems, step: MenuStep): boolean => {
-  const categoriesIds = step.productCategories.map((category) => category.id);
-
-  const stepItems = values(orderItems).filter((item) =>
-    categoriesIds.includes(item.productsCategoryId)
-  );
-
-  return stepItems.length > 0;
-};
-
-const getOrderItemsForCategory = (
-  orderItems: OrderItems,
-  categoryId: number
-): OrderItem[] =>
-  values(orderItems).filter((item) => item.productsCategoryId === categoryId);
+import { Order, MenuStep } from "../../../../../../types";
 
 export type ProductsByMenuStepsProps = {
-  orderItems: OrderItems;
+  orderProducts: Order[];
   step: MenuStep;
   productsWithErrors?: QuantityCheckProductInfo[];
 };
 
+const getIdFromEntity = (entities: { id: number }[]) =>
+  entities.map(({ id }) => id);
+
 export const ProductsByMenuStep = ({
-  orderItems,
+  orderProducts,
   step,
-  productsWithErrors = [],
+  productsWithErrors,
 }: ProductsByMenuStepsProps) => {
+  const { t } = useTranslation("Design");
+  const { formatNumber } = useIntl();
   const { productCategories } = step;
 
-  if (!doesStepHaveItems(orderItems, step)) return null;
+  const productsByCategories = useMemo(() => {
+    const productsInCategoriesIds = getIdFromEntity(productCategories);
+
+    return orderProducts.filter(({ productsCategoryId }) =>
+      productsInCategoriesIds.includes(productsCategoryId)
+    );
+  }, [productCategories, orderProducts]);
+
+  const productIds = getIdFromEntity(productsByCategories);
+
+  if (!productsByCategories.length) {
+    return null;
+  }
 
   return (
-    <div className="categories">
-      {productCategories.map((category) => {
-        const categoryOrderItems = getOrderItemsForCategory(
-          orderItems,
-          category.id
+    <div className="products-by-menu-step">
+      {productCategories.map(({ name, id, products }) => {
+        const selectedProducts = products.filter(({ id: productId }) =>
+          productIds.includes(productId)
         );
 
-        if (categoryOrderItems.length === 0) return null;
+        if (!selectedProducts.length) {
+          return null;
+        }
 
         return (
-          <div key={category.id} className="products">
-            <p className="m-0 title">{category.name}</p>
-
-            {categoryOrderItems.map((orderItem) => {
-              const productQuantityError = getProductError(
-                productsWithErrors,
-                orderItem.id
+          <div key={id} className="products">
+            <p className="m-0 title">{name}</p>
+            {selectedProducts.map(({ id, name }) => {
+              const orderProduct = productsByCategories.find(
+                ({ id: productId }) => productId === id
               );
 
+              const productQuantityError = (productsWithErrors ?? []).find(
+                (productWithError) =>
+                  productWithError.product_id === orderProduct.id
+              )?.message;
+
               return (
-                <ProductSummary
-                  key={orderItem.id}
-                  name={orderItem.name}
-                  productQuantityError={productQuantityError}
-                  orderProduct={orderItem}
-                />
+                <div className="product" key={id}>
+                  <p className="m-0 name">{name}</p>
+                  <div className="d-flex justify-content-between">
+                    <p className="m-0">
+                      {t("shortQuantity")}:&nbsp;{orderProduct?.quantity}
+                    </p>
+                    <p className="price">
+                      {formatNumber(
+                        (orderProduct?.deposit || orderProduct?.price || 0) *
+                          orderProduct?.quantity,
+                        {
+                          style: "currency",
+                          currency: Config.Currency.GBP,
+                        }
+                      )}
+                    </p>
+                  </div>
+                  {productQuantityError && (
+                    <p className="iframe-event__message-error">
+                      {productQuantityError}
+                    </p>
+                  )}
+                </div>
               );
             })}
           </div>

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

@@ -1,6 +1,5 @@
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { OrderItems } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
-import { MenuStep } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { MenuStep, Order } from "../../../../../types";
 
 export const MOBILE_WIDTH = 576;
 export const ACCORDION_KEY = "booking-summary";
@@ -9,7 +8,9 @@ export type BookingSummaryProps = {
   date: string;
   time?: string;
   menuSteps?: MenuStep[];
-  formValues?: OrderItems;
+  formValues?: {
+    [key: string]: Order;
+  };
   totalWithDiscount?: number;
   shouldHidePeopleAmount?: boolean;
   eventName?: string;

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

@@ -1,7 +1,6 @@
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { OrderItem } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
+import { Order } from "../../../../../types";
 
-export const cartSumByOrderProducts = (orderProducts?: OrderItem[]) => {
+export const cartSumByOrderProducts = (orderProducts?: Order[]) => {
   if (!orderProducts || !orderProducts.length) {
     return 0;
   }
@@ -13,11 +12,3 @@ export const cartSumByOrderProducts = (orderProducts?: OrderItem[]) => {
     );
   }, 0);
 };
-
-export const getProductError = (
-  productsWithErrors: QuantityCheckProductInfo[],
-  productId: OrderItem["id"]
-): string | undefined =>
-  productsWithErrors.find(
-    (productWithError) => productWithError.product_id === productId
-  )?.message;