@licklist/design 0.44.485-dev.38 → 0.44.485-dev.4

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

@@ -1,7 +1,6 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { Path, KonvaNodeEvents, Group, Circle } from "react-konva";
 import Konva from "konva";
-import { ProductTooltip } from "../ProductTooltip";
 
 const ICON_DATA =
   "M14 0C9.3569 0.6633 4.6431 0.6633 0 0L6 7V13H3V14H11V13H8V7L14 0Z";
@@ -63,8 +62,6 @@ export const ProductIcon = ({
   const defaultX = -X_OFFSET;
   const defaultY = -Y_OFFSET;
 
-  const [hovered, setHovered] = useState<boolean>(false);
-
   const cssVariableValues = useMemo(() => {
     return {
       pointBackgroundColor:
@@ -122,12 +119,7 @@ export const ProductIcon = ({
   };
 
   return (
-    <Group
-      x={x}
-      y={y}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
+    <Group x={x} y={y}>
       <Circle
         radius={CIRCLE_RADIUS}
         strokeWidth={POINT_STROKE_WIDTH}
@@ -135,9 +127,6 @@ export const ProductIcon = ({
         y={defaultY * 0.75}
         {...circleColors()}
       />
-      {hovered && isSoldOut && (
-        <ProductTooltip x={defaultX} y={defaultY} text="Sold out" />
-      )}
       {isProductChoosed ? (
         <Path
           x={defaultX}

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

@@ -11,7 +11,6 @@ import {
   EventVenueMapContext,
   EventVenueMapContextProps,
 } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { useImage } from "../../hooks/useImage";
 import { useStageActions } from "../../hooks/useStageActions";
 import { MapPoint } from "../MapPoint";
@@ -33,7 +32,6 @@ export type VenueMapProps = {
   usedInIframe?: boolean;
   choosedProductUuids?: string[];
   errorOnChoosedProductUuids?: string[];
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
@@ -47,7 +45,6 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       usedInIframe = false,
       choosedProductUuids = [],
       errorOnChoosedProductUuids = [],
-      soldOutProducts,
     },
     ref
   ) => {
@@ -115,18 +112,13 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       );
 
       if (!currentProduct) return false;
-      const selectedProduct = products.find(
-        (product) => product.uuid === currentProduct.productUuid
-      );
+
       return (
-        selectedProduct?.isSoldOut ||
-        (selectedProduct &&
-          !!soldOutProducts?.find(
-            (product) => product?.product_id === selectedProduct?.id
-          )) ||
-        false
+        products.find((product) => product.uuid === currentProduct.productUuid)
+          ?.isSoldOut || false
       );
     };
+
     return (
       <div className="venue-map" style={{ width, height }}>
         <div className="zone-name">

package/src/iframe/event/event-order-short-summary/components/Summary/Summary.tsx

@@ -8,25 +8,25 @@ export type SummaryDataType = {
   quantity?: number;
 }[];
 
-export const Summary = ({ data = [] }: { data: SummaryDataType }) => {
-  return (
-    <>
-      {data.map(({ name, image, quantity, title }) => {
-        const classNames = clsx("name", "mb-4", image && "align-items-center");
+export type SummaryProps = ({
+  data: SummaryDataType,
+}) => React.PropsWithChildren<any>;
 
-        return (
-          <div key={name} className="summary">
-            <p className="title mb-1">{title}</p>
-            <div className={classNames}>
-              {image && <img className="image mr-3" src={image} alt={name} />}
-              {quantity && quantity > 1 && (
-                <span className="quantity mr-3">{quantity}x</span>
-              )}
-              {name}
-            </div>
-          </div>
-        );
-      })}
-    </>
-  );
+export const Summary: SummaryProps = ({ data = [] }) => {
+  return data.map(({ name, image, quantity, title }) => {
+    const classNames = clsx("name", "mb-4", image && "align-items-center");
+
+    return (
+      <div key={name} className="summary">
+        <p className="title mb-1">{title}</p>
+        <div className={classNames}>
+          {image && <img className="image mr-3" src={image} alt={name} />}
+          {quantity && quantity > 1 && (
+            <span className="quantity mr-3">{quantity}x</span>
+          )}
+          {name}
+        </div>
+      </div>
+    );
+  });
 };

package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx

@@ -6,7 +6,6 @@ import { Page, PageBody, PageHeader } from "../../page";
 import { BookingSummaryFooter } from "../../order-process/components/BookingSummaryFooter";
 import { BookingSummary } from "../../order-process/components/BookingSummary";
 import { CalendarSelect } from "../event-calendar/components/CalendarSelect";
-import { Product } from "../../../types";
 
 export default {
   title: "Iframe/Event/IframeEventVenueMap",
@@ -269,10 +268,6 @@ export function Default() {
               pointProducts={MENU_STEPS[0].pointProducts}
               usedInIframe={usedInIframe}
               onPointClick={(pointId) => console.log({ pointId })}
-              products={
-                MENU_STEPS[0].productCategories[0]
-                  .products as Partial<Product>[]
-              }
               choosedProductUuids={[
                 "beb6393c-2fdd-40f7-bb92-8800685b203f",
                 "beb6393c-2fdd-40f7-bb92-8800685b203a",

package/src/iframe/order-process/OrderProcess.stories.tsx

@@ -49,7 +49,6 @@ const productCategories = [
 
         price: 5,
         deposit: 3,
-        minSub: 10,
         isRequired: true,
         images: IMAGES,
       },

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

@@ -25,9 +25,6 @@ export const BookingSummary = ({
   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);
@@ -50,7 +47,7 @@ export const BookingSummary = ({
         </div>
         <hr />
 
-        {orderProducts?.length > 0 ? (
+        {orderProducts.length > 0 ? (
           <div>
             <div className="cart-items">
               {menuSteps.map((menuStep: MenuStep) => {

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

@@ -6,13 +6,13 @@ export const ACCORDION_KEY = "booking-summary";
 
 export type BookingSummaryProps = {
   date: string;
-  menuSteps?: MenuStep[];
-  formValues?: {
+  menuSteps: MenuStep[];
+  formValues: {
     [key: string]: Order;
   };
   totalWithDiscount?: number;
   isNotShownPeopleAmount?: boolean;
-  eventName?: string;
+  eventName: string;
   hasPeopleInput?: boolean;
   transactionFee?: number;
   isFreePayment?: boolean;

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

@@ -1,12 +1,8 @@
 import { Order } from "../../../../../types";
 
-export const cartSumByOrderProducts = (orderProducts?: Order[]) => {
-  if (!orderProducts || !orderProducts.length) {
-    return 0;
-  }
-  return orderProducts.reduce((prevSumValue: number, product) => {
+export const cartSumByOrderProducts = (orderProducts: Order[]) =>
+  orderProducts.reduce((prevSumValue: number, product) => {
     return (
       prevSumValue + (product?.deposit || product?.price) * product.quantity
     );
   }, 0);
-};

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

@@ -425,7 +425,6 @@ export function Default() {
                 menuStepWithVenueMap={MENU_STEPS[0] as any}
                 title="Select a product"
                 activeVenueMapId="7"
-                soldOutProducts={[{ product_id: 148, message: "message" }]}
               />
             }
             rightBlock={

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

@@ -19,7 +19,6 @@ import {
 import { Step } from "@licklist/core/dist/DataMapper/Product/StepDataMapper";
 import { useTranslation } from "react-i18next";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { Category } from "./components/Category";
 import { MenuStep } from "../../../../types";
 import { STEP_FORM_ID } from "../../constants";
@@ -45,7 +44,6 @@ export interface CalendarStepsFormProps {
   onActiveVenueMapChange?: (nextVenueMapId: string) => void;
   title: string;
   menuStepWithVenueMap: Step;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 }
 
 export type StepsFormRef = {
@@ -69,7 +67,6 @@ export const CalendarStepsForm = forwardRef<
       title,
       menuStepWithVenueMap,
       onActiveVenueMapChange,
-      soldOutProducts,
     },
     ref
   ) => {
@@ -343,14 +340,12 @@ export const CalendarStepsForm = forwardRef<
                       ref={canvasRef}
                       choosedProductUuids={choosedProductUuids}
                       errorOnChoosedProductUuids={errorOnChoosedProductUuids}
-                      soldOutProducts={soldOutProducts}
                     />
                     <Category
                       productCategories={step?.productCategories}
                       activePointId={activePointId}
                       pointProducts={menuStepWithVenueMap.pointProducts}
                       onCloseModal={onCloseProductModal}
-                      soldOutProducts={soldOutProducts}
                     />
                   </>
                 )}

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory } from "../../../../../types";
 import { CategoryProductModal } from "./CategoryProductModal";
 
@@ -9,7 +8,6 @@ export type CategoryProps = {
   activePointId?: number;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const Category = ({
@@ -17,7 +15,6 @@ export const Category = ({
   activePointId,
   pointProducts,
   onCloseModal,
-  soldOutProducts,
 }: CategoryProps) => {
   return (
     <>
@@ -34,7 +31,6 @@ export const Category = ({
                     activePointId={activePointId}
                     pointProducts={pointProducts}
                     onCloseModal={onCloseModal}
-                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}

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

@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory, Product } from "../../../../../types";
 import { CategoryProduct } from "../../CategoryProduct";
 import Icon from "../../../../../static/Icon";
@@ -13,7 +12,6 @@ export type CategoryProductModalProps = {
   category: ProductCategory;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const CategoryProductModal = ({
@@ -22,7 +20,6 @@ export const CategoryProductModal = ({
   category,
   pointProducts,
   onCloseModal,
-  soldOutProducts,
 }: CategoryProductModalProps) => {
   const activePointProduct = useMemo(
     () =>
@@ -45,7 +42,6 @@ export const CategoryProductModal = ({
         product={product}
         category={category}
         canExpandDescription={false}
-        soldOutProducts={soldOutProducts}
       />
       <div className="close-modal-button">
         <Button

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

@@ -8,7 +8,6 @@ import { StepsFormProps } from "../StepsForm/StepsForm";
 interface CategoryProps {
   productCategories: ProductCategory[];
   productsWithErrors?: StepsFormProps["productsWithErrors"];
-  soldOutProducts?: StepsFormProps["productsWithErrors"];
   errors?: DeepMap<Record<string, any>, FieldError>;
 }
 
@@ -16,7 +15,6 @@ export function Category({
   productCategories,
   productsWithErrors,
   errors,
-  soldOutProducts,
 }: CategoryProps) {
   return (
     <>
@@ -39,7 +37,6 @@ export function Category({
                     product={product}
                     category={category}
                     productsWithErrors={productsWithErrors}
-                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}

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

@@ -15,7 +15,6 @@ interface CategoryProductProps {
   category: ProductCategory;
   canExpandDescription?: boolean;
   productsWithErrors?: StepsFormProps["productsWithErrors"];
-  soldOutProducts?: StepsFormProps["productsWithErrors"];
 }
 
 export const CategoryProduct = ({
@@ -23,7 +22,6 @@ export const CategoryProduct = ({
   category,
   canExpandDescription = true,
   productsWithErrors,
-  soldOutProducts,
 }: CategoryProductProps) => {
   const { formatNumber } = useIntl();
   const { t } = useTranslation(["Design", "Validation"]);
@@ -51,16 +49,6 @@ export const CategoryProduct = ({
     return product.deposit;
   }, [category, product]);
 
-  const checkIfSoldOutProduct = () => {
-    if (!soldOutProducts || product?.isSoldOut) {
-      return undefined;
-    }
-    const error = soldOutProducts.find(
-      (productWithError) => productWithError.product_id === product.id
-    );
-    return !!error?.message;
-  };
-
   useEffect(() => {
     if (!productQuantityError) {
       return;
@@ -83,32 +71,17 @@ export const CategoryProduct = ({
           // One case when no value is that we have product,
           // but didn't click on number input.
           // If it will be required then required check fired firstly.
+          if (!value) return true;
 
-          const {
-            isRequired = false,
-            maxAmount = 0,
-            minAmount = 0,
-            minSpend,
-            price,
-          } = product;
+          const { isRequired = false, maxAmount = 0, minAmount = 0 } = product;
 
-          const currentQuantity = value?.quantity ?? 0;
-          if (minSpend && currentQuantity * price < minSpend) {
-            return t("Design:minimumSpendSumValidation", {
-              minSpend: formatNumber(minSpend, {
-                style: "currency",
-                currency: Config.Currency.GBP,
-              }),
-            }) as string;
-          }
-
-          if (!value) return true;
+          const { quantity = 0 } = value;
 
-          if (!currentQuantity && !isRequired) {
+          if (!quantity && !isRequired) {
             return true;
           }
 
-          if (!currentQuantity && isRequired) {
+          if (!quantity && isRequired) {
             return t("Design:pleaseSelectAtLeastFrom", {
               min: 1,
               type: "item",
@@ -116,18 +89,14 @@ export const CategoryProduct = ({
             }) as string;
           }
 
-          if (currentQuantity < minAmount) {
+          if (quantity < minAmount) {
             return t("Validation:fieldMinNumber", {
               min: product.minAmount,
               attribute: product.name,
             }) as string;
           }
 
-          if (
-            maxAmount &&
-            currentQuantity >= minAmount &&
-            maxAmount < currentQuantity
-          ) {
+          if (maxAmount && quantity >= minAmount && maxAmount < quantity) {
             return t("Validation:quantityMaxNumber", {
               max: product.maxAmount,
             }) as string;
@@ -167,10 +136,7 @@ export const CategoryProduct = ({
                 productInfo={productInfo}
                 ref={ref}
                 clearErrors={clearErrors}
-                product={{
-                  ...product,
-                  isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
-                }}
+                product={product}
                 category={category}
                 invalid={invalid}
                 deposit={deposit}

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

@@ -10,7 +10,6 @@ interface NumberInputProps {
   onArrowDown?: (value: number) => void;
   min?: number;
   max?: number;
-  placeholder?: string;
   defaultValue?: number;
   disabled?: boolean;
 }
@@ -25,7 +24,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       onArrowUp,
       min,
       max,
-      placeholder,
       defaultValue,
       disabled,
     },
@@ -68,7 +66,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           min={min}
           max={max}
           defaultValue={defaultValue}
-          placeholder={placeholder}
           height="5rem"
           disabled={disabled}
           ref={ref}

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

@@ -83,7 +83,7 @@ export const ProductQuantityInput = ({
           deposit,
           price: product.price,
           productsCategoryId: category.id,
-          quantity: val || null,
+          quantity: val,
         });
         clearErrors(`${product.id}` as const);
       }}
@@ -110,9 +110,8 @@ export const ProductQuantityInput = ({
         clearErrors(`${product.id}` as const);
       }}
       min={0}
-      placeholder="0"
       disabled={product.isSoldOut}
-      value={productInfo?.quantity}
+      value={productInfo?.quantity || 0}
       className={clsx(invalid && "error")}
     />
   );

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

@@ -32,7 +32,6 @@ export interface StepsFormProps {
   setFormErrors?: (errors: Record<string, any>) => void;
   id?: string;
   productsWithErrors?: ProductQuantityCheckResponse["products"];
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
 }
 
 export type StepsFormRef = {
@@ -50,7 +49,6 @@ export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
       setFormErrors,
       id = STEP_FORM_ID,
       productsWithErrors,
-      soldOutProducts,
     },
     ref
   ) => {
@@ -152,7 +150,6 @@ export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
                 productCategories={step?.productCategories}
                 productsWithErrors={productsWithErrors}
                 errors={errors}
-                soldOutProducts={soldOutProducts}
               />
 
               {errors[NO_ORDER_ITEMS_ERROR] && (

package/src/iframe/payment/order-items-table/OrderItemsTable.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
-import { ORDER_FEE_CHARGE_TYPE_CLIENT } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { OrderItemsTable } from "./OrderItemsTable";
 
 export default {
@@ -25,7 +24,6 @@ export function Default(args) {
 
 Default.args = {
   order: {
-    feeChargeType: ORDER_FEE_CHARGE_TYPE_CLIENT,
     products: [
       {
         id: 1,

package/src/iframe/payment/order-items-table/hooks/useTableData.tsx

@@ -20,7 +20,7 @@ import {
 import { OrderItemsTableProps, SummaryItem } from "../types";
 
 const CURRENCY_DEFAULT = "GBP";
-export const PAYMENT_TYPE_TRANSLATE_KEYS = {
+const TRANSLATE_KEYS = {
   [PAYMENT_TYPE_NET_PROFIT]: "netAmount",
   [PAYMENT_TYPE_FEE]: "bookeditFee",
   [PAYMENT_TYPE_VAT]: "vat",
@@ -128,11 +128,7 @@ export const useTableData = ({
   };
 
   const paymentNotProcessedSummary = () => {
-    const externalPaymentDetail = paymentDetail
-      ? getExternalPaymentDetail(paymentDetail)
-      : undefined;
-
-    const total = calculateTotalPrice(order, externalPaymentDetail);
+    const total = calculateTotalPrice(order.orderProducts);
 
     const summaryItems: SummaryItem[] = [
       {
@@ -148,7 +144,7 @@ export const useTableData = ({
       });
     }
 
-    if (externalPaymentDetail) {
+    if (paymentDetail) {
       return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
     }
 
@@ -156,18 +152,7 @@ export const useTableData = ({
   };
 
   const processedPaymentSummary = () => {
-    const externalPaymentDetail =
-      paymentDetail && !order.payments.length
-        ? getExternalPaymentDetail(paymentDetail)
-        : Object.keys(PAYMENT_TYPE_TRANSLATE_KEYS).map((key) => {
-            return {
-              translateKey: PAYMENT_TYPE_TRANSLATE_KEYS[key],
-              price: getPaymentValueByType(order.payments, key),
-            };
-          });
-
-    const total = calculateTotalPrice(order, externalPaymentDetail);
-
+    const total = calculateTotalPrice(order.orderProducts);
     const totalDiscount = calculateTotalDiscount(order.payments);
     const totalWithDiscount = total - Number(totalDiscount);
     let summaryItems: SummaryItem[] = [
@@ -185,7 +170,7 @@ export const useTableData = ({
     }
 
     if (paymentDetail && !order.payments.length) {
-      return [...summaryItems, ...externalPaymentDetail];
+      return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
     }
 
     summaryItems.push({
@@ -195,7 +180,15 @@ export const useTableData = ({
     if (totalWithDiscount <= 0) {
       return summaryItems;
     }
-    summaryItems = [...summaryItems, ...externalPaymentDetail];
+    summaryItems = [
+      ...summaryItems,
+      ...Object.keys(TRANSLATE_KEYS).map((key) => {
+        return {
+          translateKey: TRANSLATE_KEYS[key],
+          price: getPaymentValueByType(order.payments, key),
+        };
+      }),
+    ];
 
     if (totalWithDiscount > order.totalAmount) {
       summaryItems.push({