@licklist/design 0.44.550-dev.5 → 0.44.550-dev.7

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";

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

@@ -1,90 +1,72 @@
-import React, { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { useIntl } from "react-intl";
-import * as Config from "@licklist/core/dist/Config";
+import React from "react";
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { Order, MenuStep } from "../../../../../../types";
+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);
 
 export type ProductsByMenuStepsProps = {
-  orderProducts: Order[];
+  orderItems: OrderItems;
   step: MenuStep;
   productsWithErrors?: QuantityCheckProductInfo[];
 };
 
-const getIdFromEntity = (entities: { id: number }[]) =>
-  entities.map(({ id }) => id);
-
 export const ProductsByMenuStep = ({
-  orderProducts,
+  orderItems,
   step,
-  productsWithErrors,
+  productsWithErrors = [],
 }: ProductsByMenuStepsProps) => {
-  const { t } = useTranslation("Design");
-  const { formatNumber } = useIntl();
   const { productCategories } = step;
 
-  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;
-  }
+  if (!doesStepHaveItems(orderItems, step)) return null;
 
   return (
-    <div className="products-by-menu-step">
-      {productCategories.map(({ name, id, products }) => {
-        const selectedProducts = products.filter(({ id: productId }) =>
-          productIds.includes(productId)
+    <div className="categories">
+      {productCategories.map((category) => {
+        const categoryOrderItems = getOrderItemsForCategory(
+          orderItems,
+          category.id
         );
 
-        if (!selectedProducts.length) {
-          return null;
-        }
+        if (categoryOrderItems.length === 0) return null;
 
         return (
-          <div key={id} className="products">
-            <p className="m-0 title">{name}</p>
-            {selectedProducts.map(({ id, name }) => {
-              const orderProduct = productsByCategories.find(
-                ({ id: productId }) => productId === id
-              );
+          <div key={category.id} className="products">
+            <p className="m-0 title">{category.name}</p>
 
-              const productQuantityError = (productsWithErrors ?? []).find(
-                (productWithError) =>
-                  productWithError.product_id === orderProduct.id
-              )?.message;
+            {categoryOrderItems.map((orderItem) => {
+              const productQuantityError = getProductError(
+                productsWithErrors,
+                orderItem.id
+              );
 
               return (
-                <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>
+                <ProductSummary
+                  key={orderItem.id}
+                  name={orderItem.name}
+                  productQuantityError={productQuantityError}
+                  orderProduct={orderItem}
+                />
               );
             })}
           </div>

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

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

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

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

package/src/iframe/order-process/components/CalendarStepsForm/components/Category.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { ProductCategory } from "../../../../../types";
+import { ProductCategory } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { CategoryProductModal } from "./CategoryProductModal";
 
 export type CategoryProps = {

package/src/iframe/order-process/components/CalendarStepsForm/components/CategoryProductModal.tsx

@@ -3,7 +3,10 @@ import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { ProductCategory, Product } from "../../../../../types";
+import {
+  Product,
+  ProductCategory,
+} from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { CategoryProduct } from "../../CategoryProduct";
 import Icon from "../../../../../static/Icon";
 

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

@@ -6,8 +6,11 @@ import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
+import {
+  Product,
+  ProductCategory,
+} from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { TicketDescription } from "../../../event/ticket-description";
-import { ProductCategory, Product } from "../../../../types";
 import { ProductQuantityInput } from "./components/ProductQuantityInput";
 
 interface CategoryProductProps {

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -4,8 +4,11 @@ import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { FieldValues, RefCallBack, UseFormClearErrors } from "react-hook-form";
 import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
+import {
+  Product,
+  ProductCategory,
+} from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { NumberInput } from "../NumberInput";
-import { Product, ProductCategory } from "../../../../../../types";
 
 interface FormOrderItem {
   id: number;

package/src/iframe/order-process/components/utils/useCategoryVerification.ts

@@ -2,7 +2,7 @@ import { ProductCategory } from "@licklist/core/dist/DataMapper/Product/ProductC
 import { Currency } from "@licklist/core/dist/Config";
 import { useIntl } from "react-intl";
 import { useTranslation } from "react-i18next";
-import { Order } from "src/types";
+import { OrderItems } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
 
 interface CategoryError {
   message: string;
@@ -13,8 +13,9 @@ interface CategoryError {
 export const useCategoryVerification = () => {
   const { t } = useTranslation("Validation");
   const { formatNumber } = useIntl();
+
   return (
-    values: Record<Order["id"], Order>,
+    values: OrderItems,
     productCategories?: ProductCategory[],
     isLastPage?: boolean
   ): CategoryError | void => {

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -49,7 +49,7 @@ export const PaymentPage = ({
   );
 
   const onCloseWindow = () => {
-    // @TODO discuss redirect to site
+    // TODO discuss redirect to site
     window.location.href = "https://booked.it/";
   };
 
@@ -101,14 +101,13 @@ export const PaymentPage = ({
   }
 
   const orderTotalAmountByFormValues = cartSumByOrderProducts(
-    bookingSummaryProps && bookingSummaryProps?.formValues
-      ? Object.values(bookingSummaryProps?.formValues)
-      : undefined
+    bookingSummaryProps?.formValues &&
+      Object.values(bookingSummaryProps?.formValues)
   );
 
   // User can fill promo code only in iframe application.
-  // It didn't possible via payment link. This check will
-  // be applied when there are no metadata and in case when
+  // It isn't possible via payment link. This check will
+  // be applied when there is no metadata and in case when
   // orderValues sum is greater than amount in order.
   const isCalculatedAmountGreaterThanOrderAmount =
     orderTotalAmountByFormValues > data?.amount;