@licklist/design 0.44.485-dev.7 → 0.44.485-dev.70

package/src/help/popover/HelpPopover.tsx

@@ -1,23 +1,31 @@
 import { useId } from "@react-aria/utils";
-import React from "react";
+import React, { ReactNode } from "react";
 import Button from "react-bootstrap/Button";
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
 import { ButtonVariant } from "react-bootstrap/types";
+import clsx from "clsx";
 import Icon from "../../static/Icon";
 
 export type HelpPopoverProps = {
   children?: React.ReactElement | React.ReactElement[];
   title?: string;
   variant?: ButtonVariant;
+  icon?: ReactNode;
+  bordered?: boolean;
 };
 
-export function HelpPopover(props: HelpPopoverProps) {
-  const { children, title, variant = "light" } = props;
+export function HelpPopover({
+  children,
+  title,
+  variant = "light",
+  icon,
+  bordered = false,
+}: HelpPopoverProps) {
   const popoverId = useId();
 
   const popover = (
-    <Popover id={popoverId}>
+    <Popover id={popoverId} className={clsx(bordered && "border")}>
       <Popover.Title as="h3">{title}</Popover.Title>
       <Popover.Content>{children}</Popover.Content>
     </Popover>
@@ -39,7 +47,7 @@ export function HelpPopover(props: HelpPopoverProps) {
           {...triggerHandler}
           className="btn-icon-popover rounded-circle px-2 py-1 d-inline-flex align-items-center"
         >
-          <Icon type="question" style={{ width: "10px" }} />
+          {icon ?? <Icon type="question" style={{ width: "10px" }} />}
         </Button>
       )}
     </OverlayTrigger>

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -11,18 +11,15 @@ export default {
 
 export function Default() {
   const showImage = boolean("showImage", true);
-  const displayCost = boolean("displayCost", false);
-  const displayType = boolean("displayType", true);
-  const displayDescription = boolean("displayDescription", false);
   const isListView = boolean("isListView", false);
 
   return (
     <div>
       <IframeEventCard
         imageSrc={
-          // eslint-disable-next-line max-len
           showImage
-            ? "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
+            ? // eslint-disable-next-line max-len
+              "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
             : undefined
         }
         title="Glitterbomb Bucks / Baga Chipz"
@@ -43,9 +40,8 @@ export function Default() {
         RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
         the...`}
         snippetSetting={{
-          displayCost,
-          displayType,
-          displayDescription,
+          includeAvailability: ["calendar", "product_sets", "time_slots"],
+          includeFromPrice: ["calendar", "product_sets", "time_slots"],
         }}
         goToDetails={() => null}
         isListView={isListView}
@@ -59,9 +55,6 @@ export function Default() {
 
 export function EventCardSkeleton() {
   const showImage = boolean("showImage", true);
-  const displayCost = boolean("displayCost", false);
-  const displayType = boolean("displayType", true);
-  const displayDescription = boolean("displayDescription", false);
   const isListView = boolean("isListView", false);
 
   return (
@@ -69,9 +62,8 @@ export function EventCardSkeleton() {
       <IframeEventCardSkeleton
         showImage={showImage}
         snippetSetting={{
-          displayCost,
-          displayType,
-          displayDescription,
+          includeAvailability: ["calendar", "product_sets", "time_slots"],
+          includeFromPrice: ["calendar", "product_sets", "time_slots"],
         }}
         isListView={isListView}
       />

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -3,7 +3,7 @@ import { Card } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import clsx from "clsx";
-import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
+import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 import { TipTapEditor } from "../../../tiptap-editor/TipTapEditor";
 import { formatContent } from "../../../events/event-card/utils";
 import { ReactComponent as ClockSvg } from "../../../assets/iframe/clock.svg";
@@ -18,7 +18,8 @@ interface IframeEventCardProps {
   cost?: number;
   date: string;
   imageSrc?: string;
-  snippetSetting?: SnippetSetting;
+  // eslint-disable-next-line react/no-unused-prop-types
+  snippetSetting?: Snippet["widgetSetting"];
   colour?: string;
   goToDetails?: () => void;
   description?: string | null;
@@ -35,11 +36,6 @@ export function IframeEventCard({
   cost,
   date,
   imageSrc,
-  snippetSetting = {
-    displayType: true,
-    displayCost: true,
-    displayDescription: true,
-  },
   colour,
   goToDetails,
   description,
@@ -102,7 +98,7 @@ export function IframeEventCard({
             </div>
           </Card.Text>
 
-          {type && !!snippetSetting.displayType && (
+          {type && (
             <Card.Text as="div" className="list-view-hided">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -113,7 +109,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {typeof cost === "number" && !!snippetSetting.displayCost && (
+          {typeof cost === "number" && (
             <Card.Text as="div">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -127,7 +123,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {description && !!snippetSetting.displayDescription && (
+          {description && (
             <Card.Text as="div" className="list-view-hided">
               <TipTapEditor
                 viewMode

package/src/iframe/event/event-card/IframeEventCardSkeleton.tsx

@@ -2,11 +2,12 @@ import React, { memo } from "react";
 import { Card } from "react-bootstrap";
 import clsx from "clsx";
 import Skeleton from "react-loading-skeleton";
-import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
+import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 
 interface IframeEventCardSkeletonProps {
   showImage?: boolean;
-  snippetSetting?: SnippetSetting;
+  // eslint-disable-next-line react/no-unused-prop-types
+  snippetSetting?: Snippet["widgetSetting"];
   colour?: string;
   isListView?: boolean;
   className?: string;
@@ -15,11 +16,6 @@ interface IframeEventCardSkeletonProps {
 export const IframeEventCardSkeleton = memo(
   ({
     showImage,
-    snippetSetting = {
-      displayType: true,
-      displayCost: true,
-      displayDescription: true,
-    },
     colour,
     isListView = false,
     className,
@@ -61,31 +57,25 @@ export const IframeEventCardSkeleton = memo(
               </div>
             </Card.Text>
 
-            {!!snippetSetting.displayType && (
-              <Card.Text as="div" className="list-view-hided">
-                <div className="d-flex align-items-center mb-3">
-                  <p className="iframe-event-card__bold m-0">
-                    <Skeleton className="skeleton-w6" />
-                  </p>
-                </div>
-              </Card.Text>
-            )}
+            <Card.Text as="div" className="list-view-hided">
+              <div className="d-flex align-items-center mb-3">
+                <p className="iframe-event-card__bold m-0">
+                  <Skeleton className="skeleton-w6" />
+                </p>
+              </div>
+            </Card.Text>
 
-            {!!snippetSetting.displayCost && (
-              <Card.Text as="div">
-                <div className="d-flex align-items-center mb-3">
-                  <p className="iframe-event-card__bold m-0">
-                    <Skeleton className="skeleton-w6" />
-                  </p>
-                </div>
-              </Card.Text>
-            )}
+            <Card.Text as="div">
+              <div className="d-flex align-items-center mb-3">
+                <p className="iframe-event-card__bold m-0">
+                  <Skeleton className="skeleton-w6" />
+                </p>
+              </div>
+            </Card.Text>
 
-            {!!snippetSetting.displayDescription && (
-              <Card.Text as="div" className="list-view-hided">
-                <Skeleton className="w-100 h-100" />
-              </Card.Text>
-            )}
+            <Card.Text as="div" className="list-view-hided">
+              <Skeleton className="w-100 h-100" />
+            </Card.Text>
           </div>
         </Card.Body>
       </Card>

package/src/iframe/event/event-card/IframeEventCards.stories.tsx

@@ -581,9 +581,8 @@ export function Default() {
             date={String(event.startAt)}
             colour={event.colour}
             snippetSetting={{
-              displayCost,
-              displayType,
-              displayDescription,
+              includeAvailability: [],
+              includeFromPrice: [],
             }}
             imageSrc={event.imgSrc}
             goToDetails={() => {}}

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

@@ -8,25 +8,25 @@ export type SummaryDataType = {
   quantity?: number;
 }[];
 
-export type SummaryProps = ({
-  data: SummaryDataType,
-}) => React.PropsWithChildren<any>;
+export const Summary = ({ data = [] }: { data: SummaryDataType }) => {
+  return (
+    <>
+      {data.map(({ name, image, quantity, title }) => {
+        const classNames = clsx("name", "mb-4", image && "align-items-center");
 
-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>
-    );
-  });
+        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,6 +6,7 @@ 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",
@@ -268,6 +269,10 @@ 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,6 +49,7 @@ const productCategories = [
 
         price: 5,
         deposit: 3,
+        minSub: 10,
         isRequired: true,
         images: IMAGES,
       },
@@ -197,14 +198,14 @@ export default {
 } as Meta;
 
 const TimerWrapper = () => {
-  const [timer, setTimer] = useState(60);
+  const [timer, setTimer] = useState(120000);
   const updateTimerState = () => {
     setTimer((prevValue) => {
       if (prevValue <= 0) {
         return 0;
       }
 
-      const nexValue = prevValue - 1;
+      const nexValue = prevValue - 1000;
 
       return nexValue;
     });

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

@@ -25,6 +25,9 @@ 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);
@@ -47,7 +50,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,8 +1,12 @@
 import { Order } from "../../../../../types";
 
-export const cartSumByOrderProducts = (orderProducts: Order[]) =>
-  orderProducts.reduce((prevSumValue: number, product) => {
+export const cartSumByOrderProducts = (orderProducts?: Order[]) => {
+  if (!orderProducts || !orderProducts.length) {
+    return 0;
+  }
+  return 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,6 +425,7 @@ 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,6 +19,7 @@ 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";
@@ -44,6 +45,7 @@ export interface CalendarStepsFormProps {
   onActiveVenueMapChange?: (nextVenueMapId: string) => void;
   title: string;
   menuStepWithVenueMap: Step;
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
 }
 
 export type StepsFormRef = {
@@ -67,6 +69,7 @@ export const CalendarStepsForm = forwardRef<
       title,
       menuStepWithVenueMap,
       onActiveVenueMapChange,
+      soldOutProducts,
     },
     ref
   ) => {
@@ -340,12 +343,14 @@ 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,5 +1,6 @@
 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";
 
@@ -8,6 +9,7 @@ export type CategoryProps = {
   activePointId?: number;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const Category = ({
@@ -15,6 +17,7 @@ export const Category = ({
   activePointId,
   pointProducts,
   onCloseModal,
+  soldOutProducts,
 }: CategoryProps) => {
   return (
     <>
@@ -31,6 +34,7 @@ export const Category = ({
                     activePointId={activePointId}
                     pointProducts={pointProducts}
                     onCloseModal={onCloseModal}
+                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}

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

@@ -2,6 +2,7 @@ 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";
@@ -12,6 +13,7 @@ export type CategoryProductModalProps = {
   category: ProductCategory;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
 };
 
 export const CategoryProductModal = ({
@@ -20,6 +22,7 @@ export const CategoryProductModal = ({
   category,
   pointProducts,
   onCloseModal,
+  soldOutProducts,
 }: CategoryProductModalProps) => {
   const activePointProduct = useMemo(
     () =>
@@ -42,6 +45,7 @@ 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,6 +8,7 @@ import { StepsFormProps } from "../StepsForm/StepsForm";
 interface CategoryProps {
   productCategories: ProductCategory[];
   productsWithErrors?: StepsFormProps["productsWithErrors"];
+  soldOutProducts?: StepsFormProps["productsWithErrors"];
   errors?: DeepMap<Record<string, any>, FieldError>;
 }
 
@@ -15,6 +16,7 @@ export function Category({
   productCategories,
   productsWithErrors,
   errors,
+  soldOutProducts,
 }: CategoryProps) {
   return (
     <>
@@ -37,6 +39,7 @@ export function Category({
                     product={product}
                     category={category}
                     productsWithErrors={productsWithErrors}
+                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}

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

@@ -15,6 +15,7 @@ interface CategoryProductProps {
   category: ProductCategory;
   canExpandDescription?: boolean;
   productsWithErrors?: StepsFormProps["productsWithErrors"];
+  soldOutProducts?: StepsFormProps["productsWithErrors"];
 }
 
 export const CategoryProduct = ({
@@ -22,6 +23,7 @@ export const CategoryProduct = ({
   category,
   canExpandDescription = true,
   productsWithErrors,
+  soldOutProducts,
 }: CategoryProductProps) => {
   const { formatNumber } = useIntl();
   const { t } = useTranslation(["Design", "Validation"]);
@@ -49,6 +51,16 @@ 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;
@@ -71,17 +83,32 @@ 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 } = product;
+          const {
+            isRequired = false,
+            maxAmount = 0,
+            minAmount = 0,
+            minSpend,
+            price,
+          } = product;
 
-          const { quantity = 0 } = value;
+          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;
 
-          if (!quantity && !isRequired) {
+          if (!currentQuantity && !isRequired) {
             return true;
           }
 
-          if (!quantity && isRequired) {
+          if (!currentQuantity && isRequired) {
             return t("Design:pleaseSelectAtLeastFrom", {
               min: 1,
               type: "item",
@@ -89,14 +116,18 @@ export const CategoryProduct = ({
             }) as string;
           }
 
-          if (quantity < minAmount) {
+          if (currentQuantity < minAmount) {
             return t("Validation:fieldMinNumber", {
               min: product.minAmount,
               attribute: product.name,
             }) as string;
           }
 
-          if (maxAmount && quantity >= minAmount && maxAmount < quantity) {
+          if (
+            maxAmount &&
+            currentQuantity >= minAmount &&
+            maxAmount < currentQuantity
+          ) {
             return t("Validation:quantityMaxNumber", {
               max: product.maxAmount,
             }) as string;
@@ -136,7 +167,10 @@ export const CategoryProduct = ({
                 productInfo={productInfo}
                 ref={ref}
                 clearErrors={clearErrors}
-                product={product}
+                product={{
+                  ...product,
+                  isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
+                }}
                 category={category}
                 invalid={invalid}
                 deposit={deposit}

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

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