@licklist/design 0.44.551 → 0.45.0

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;

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -1,7 +1,5 @@
-// eslint-disable-next-line max-len
 import React, { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-
 import { PaymentStatusBody } from "./component";
 import { LoaderIndicator } from "../../../static/loader/LoaderIndicator";
 import { Page, PageBody } from "../../page";
@@ -16,7 +14,7 @@ export const ORDER_STATUS_FAILED = "failed";
 export const ORDER_STATUS_SUCCESS = "success";
 export const ORDER_STATUS_PENDING = "pending";
 
-export type OrderStatusPrefix =
+export type OrderStatus =
   | typeof ORDER_STATUS_SUCCESS
   | typeof ORDER_STATUS_FAILED
   | typeof ORDER_STATUS_PENDING;
@@ -26,7 +24,7 @@ interface PaymentStatusComponentProps {
   onBack?: () => void;
   onTryAgain?: () => void;
   isLoading?: boolean;
-  status: OrderStatusPrefix;
+  status: OrderStatus;
   isAppUsingInIframe?: boolean;
   bookingSummaryProps?: BookingSummaryProps;
   EventCardComponent?: ReactNode;
@@ -36,6 +34,12 @@ interface PaymentStatusComponentProps {
   paymentMetadata?: PaymentMetadata;
 }
 
+const titles: Record<OrderStatus, string> = {
+  [ORDER_STATUS_SUCCESS]: "purchaseSuccessful",
+  [ORDER_STATUS_PENDING]: "pendingPayment",
+  [ORDER_STATUS_FAILED]: "purchaseFailed",
+};
+
 // @TODO In future think, how to reuse this component in Iframe Pending, Success and Failed Pages
 export const PaymentStatusPage = ({
   onCloseWindow,
@@ -53,27 +57,10 @@ export const PaymentStatusPage = ({
 }: PaymentStatusComponentProps) => {
   const { t } = useTranslation("Design");
 
-  const getTitle = () => {
-    switch (status) {
-      case ORDER_STATUS_SUCCESS:
-        return t("purchaseSuccessful");
-      case ORDER_STATUS_PENDING:
-        return t("pendingPayment");
-      default:
-        return t("purchaseFailed");
-    }
-  };
-
-  const title = getTitle();
-
-  if (isLoading) {
-    return <LoaderIndicator isLoaded={false} />;
-  }
+  if (isLoading) return <LoaderIndicator isLoaded={false} />;
 
   const orderTotalAmounByFormValues = cartSumByOrderProducts(
-    bookingSummaryProps && bookingSummaryProps?.formValues
-      ? Object.values(bookingSummaryProps?.formValues)
-      : undefined
+    Object.values(bookingSummaryProps?.formValues ?? {})
   );
 
   // User can fill promocode only in iframe appcliation.
@@ -88,6 +75,7 @@ export const PaymentStatusPage = ({
   return (
     <Page
       className="payment-status-page"
+      isAppUsingInIframe={isAppUsingInIframe}
       headerBlock={
         <PaymentStatusHeader
           success={status !== ORDER_STATUS_FAILED}
@@ -98,11 +86,10 @@ export const PaymentStatusPage = ({
           }
         />
       }
-      isAppUsingInIframe={isAppUsingInIframe}
     >
       <PageBody
         leftBlock={
-          <PageBody.LeftBlock title={title}>
+          <PageBody.LeftBlock title={t(titles[status])}>
             <div>
               {EventCardComponent}
               <PaymentStatusBody
@@ -168,7 +155,7 @@ export const PaymentStatusPage = ({
             {bookingSummaryProps ? (
               <BookingSummary {...bookingSummaryProps} />
             ) : (
-              <h6>{title}</h6>
+              <h6>{t(titles[status])}</h6>
             )}
           </PageBody.RightBlock>
         }