@licklist/design 0.44.550 → 0.44.551-dev.0

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>
         }

package/src/iframe/payment/payment-status-page/component/PaymentStatusBody.tsx

@@ -3,12 +3,12 @@ import { useTranslation } from "react-i18next";
 import {
   ORDER_STATUS_PENDING,
   ORDER_STATUS_SUCCESS,
-  OrderStatusPrefix,
+  OrderStatus,
 } from "../PaymentStatusPage";
 import { StatusBody } from "../../status-body/StatusBody";
 
 interface PaymentStatusBodyProps {
-  status: OrderStatusPrefix;
+  status: OrderStatus;
   onBack: () => void;
   onTryAgain?: () => void;
   email?: string;

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -126,7 +126,8 @@ export const DateAndRecurrenceInput = ({
       }
     }
 
-    const availableTime = availableTimesFormRef?.current?.getValues()?.availableTimes || null;
+    const availableTime =
+      availableTimesFormRef?.current?.getValues()?.availableTimes || null;
 
     const values = {
       rrule: next.rrule,

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import { NumberInputHorizontal } from "./NumberInputHorizontal";
+
+export default {
+  title: "Manual Booking/NumberInputHorizontal",
+} as Meta;
+
+export const Default: Story<any> = (args) => {
+  const ref = useRef(null);
+  const [value, setValue] = useState(0);
+  const [isDisabled, setDisabled] = useState(true);
+
+  const onPriceClick = (e) => {
+    if (!isDisabled) {
+      return;
+    }
+    console.log("click");
+    setDisabled(false);
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onPriceClick}
+      onKeyDown={onPriceClick}
+      style={{ height: "250px", width: "370px" }}
+    >
+      <NumberInputHorizontal
+        ref={ref}
+        hasCurrency
+        onSelect={onPriceClick}
+        onChange={(val) => {
+          setValue(val);
+        }}
+        onMinusClick={() => {
+          setValue(value - 1 || 0);
+        }}
+        onPlusClick={() => {
+          setValue((value ?? 0) + 1);
+        }}
+        value={value}
+        disabled={isDisabled}
+      />
+    </div>
+  );
+};

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React, { forwardRef } from "react";
+import React, { SyntheticEvent, forwardRef } from "react";
 import { FormControl } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Icon } from "../../../static";
@@ -13,6 +13,8 @@ interface NumberInputHorizontalProps {
   onChange: (value: number) => void;
   onPlusClick: (value: number) => void;
   onMinusClick: (value: number) => void;
+  onSelect?: (e: SyntheticEvent) => void;
+  step?: number;
   min?: number;
   max?: number;
   size?: Sizes;
@@ -30,11 +32,13 @@ export const NumberInputHorizontal = forwardRef<
       disabled = false,
       className = "",
       value,
+      step,
       size = "small",
       hasCurrency,
       onChange,
       onPlusClick,
       onMinusClick,
+      onSelect,
       min,
       max,
       defaultValue,
@@ -54,7 +58,12 @@ export const NumberInputHorizontal = forwardRef<
       }
     };
 
-    const onClick = (e) => e.target.select();
+    const onClick = (e) => {
+      if (onSelect) {
+        onSelect(e);
+      }
+      e.target.select();
+    };
 
     const handleArrowDownClick = () => {
       if (min !== undefined && value > min) {
@@ -98,13 +107,17 @@ export const NumberInputHorizontal = forwardRef<
             ref={ref}
             onClick={onClick}
             type={disabled && hasBigSize ? "text" : "number"}
-            className={hasBigSize ? "big-sizes-input" : "small-sizes-input"}
+            className={clsx(
+              hasBigSize ? "big-sizes-input" : "small-sizes-input",
+              disabled && "border-0"
+            )}
             onChange={(e) => onChange(Number(e.target.value))}
             value={disabled && hasBigSize && !isLoading ? soldOut : value}
             min={min}
             max={max}
+            step={step}
             defaultValue={defaultValue}
-            disabled={disabled}
+            disabled={disabled && !onSelect}
           />
         </div>
         <button

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -131,6 +131,12 @@
         font-weight: 500;
       }
 
+      .categories {
+        &:not(:last-child) {
+          border-bottom: 2px solid $separator-color;
+        }
+      }
+
       .products {
         margin-top: 0.5rem;
 
@@ -144,10 +150,6 @@
               margin-bottom: 0.5rem;
             }
           }
-
-          &:not(:last-child) {
-            border-bottom: 2px solid $separator-color;
-          }
         }
 
         &:not(:last-child) {

package/src/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/src/types/iframe.ts

@@ -1,61 +1,5 @@
-import { Product as CoreProduct } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
-
-export interface Product {
-  id: number;
-  name: string;
-  description: string;
-  deposit: number;
-  price: number;
-  minSub?: number;
-  minAmount?: number;
-  maxAmount?: number;
-  minSpend?: number | null;
-  isSoldOut?: boolean;
-  isRequired?: boolean;
-  isUnlimited?: boolean;
-  images: CoreProduct["images"];
-  capacity?: number | null;
-  uuid: string;
-}
-
-export interface ProductCategory {
-  id: number;
-  name: string;
-  allowDeposits?: boolean;
-  remainderExpireAfter?: number | null;
-  minSubItems: number | null;
-  maxSubItems: number | null;
-  products?: Product[];
-  zone?: Zone | null;
-}
-
-export interface MenuStep {
-  id: number;
-  name: string;
-  productCategories?: ProductCategory[];
-}
-
-export interface Menu {
-  id: number;
-  menuSteps: MenuStep[];
-}
-
-// TODO similar type exists in iframe app
-// remove this when components are moved to iframe
-export interface Order {
-  id: number;
-  quantity: number;
-  price: number;
-  name: string;
-  productsCategoryId: number;
-  deposit?: number | null;
-}
+import { OrderItems } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
 
 export type SetOrderFn = (
-  val:
-    | Record<number, Order>
-    | ((prevVar: Record<number, Order>) => Record<number, Order>)
+  val: OrderItems | ((prevVar: OrderItems) => OrderItems)
 ) => void;
-
-export type WizardFormValues = { [key: string]: any };