@licklist/design 0.51.3 → 0.53.0-dev.0

package/src/calendar/components/CalendarButtons/CalendarButtons.tsx

@@ -4,26 +4,25 @@ import { useTranslation } from "react-i18next";
 import { range } from "lodash";
 import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
 import { CalendarSelect } from "../CalendarSelect";
-import { isDateDisabled } from "../../utils";
 import { CalendarProps } from "../../Calendar";
 
 type CalendarButtonsProps = Pick<
   CalendarProps,
   | "isLoading"
-  | "disabledDates"
   | "initialDate"
   | "currentDate"
   | "setCurrentDate"
   | "setSelectedDate"
+  | "getDateTimeButtonProps"
 >;
 
 export const CalendarButtons = ({
-  disabledDates = [],
   isLoading = false,
   initialDate,
   currentDate,
   setCurrentDate,
   setSelectedDate,
+  getDateTimeButtonProps,
 }: CalendarButtonsProps) => {
   const { t } = useTranslation("Design");
 
@@ -66,7 +65,9 @@ export const CalendarButtons = ({
   const onTodayClick = () => {
     setCurrentDate(initialDate);
 
-    if (isDateDisabled(initialDate, disabledDates)) return;
+    const { isDisabled } = getDateTimeButtonProps(initialDate);
+
+    if (isDisabled) return;
 
     setSelectedDate(initialDate);
   };
@@ -75,7 +76,9 @@ export const CalendarButtons = ({
     const nextDate = initialDate.set({ day: initialDate.day + 1 });
     setCurrentDate(nextDate);
 
-    if (isDateDisabled(nextDate, disabledDates)) return;
+    const { isDisabled } = getDateTimeButtonProps(initialDate);
+
+    if (isDisabled) return;
 
     setSelectedDate(nextDate);
   };

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -2,25 +2,25 @@ import React, { useMemo } from "react";
 import { DateTime } from "luxon";
 import { DateTimeButton, Variant } from "../../../date-time-button";
 import { CalendarWeekdays } from "../CalendarWeekdays";
-import { isDateDisabled } from "../../utils";
 import { CalendarProps } from "../../Calendar";
 
-export type CalendarDatesProps = Omit<
+export type CalendarDatesProps = Pick<
   CalendarProps,
-  "currentDate" | "setCurrentDate" | "initialDate"
+  | "isLoading"
+  | "calendarDates"
+  | "selectedDate"
+  | "setSelectedDate"
+  | "fromPrice"
+  | "getDateTimeButtonProps"
 >;
 
 export const CalendarDates = ({
-  disabledDates = [],
   isLoading = false,
   calendarDates,
   selectedDate,
   setSelectedDate,
   fromPrice,
-  getAvailability,
-  includeAvailability,
-  shouldCalculateResources,
-  availableTimes,
+  getDateTimeButtonProps,
 }: CalendarDatesProps) => {
   const fillCalendarDates = useMemo(() => {
     let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
@@ -46,8 +46,9 @@ export const CalendarDates = ({
         {fillCalendarDates.map((date: DateTime | null) => {
           if (date === null) return <div />;
 
-          const isDisabled =
-            isLoading || isDateDisabled(date, disabledDates, availableTimes);
+          const props = getDateTimeButtonProps(date);
+
+          const isDisabled = isLoading || props.isDisabled;
 
           return (
             <DateTimeButton
@@ -59,10 +60,8 @@ export const CalendarDates = ({
               date={date}
               onSelect={() => setSelectedDate(date)}
               price={fromPrice}
-              resources={getAvailability?.(date)}
-              showResources={includeAvailability}
               variant={Variant.month}
-              shouldCalculateResources={shouldCalculateResources}
+              {...props}
             />
           );
         })}

package/src/calendar/utils/index.ts

@@ -1,23 +1,4 @@
 import { DateTime, Interval } from "luxon";
-import isEqual from "lodash/isEqual";
-import { DATE_FORMAT } from "@licklist/core/dist/Config";
-import { AvailableTimes } from "../Calendar";
-
-export const isDateDisabled = (
-  date: DateTime,
-  disabledDates: DateTime[] = [],
-  availableTimes?: AvailableTimes
-): boolean => {
-  const disabledByDates = !!disabledDates.find((disabledDate) =>
-    isEqual(disabledDate.toObject(), date.toObject())
-  );
-
-  const noAvailableTimes = availableTimes
-    ? !availableTimes?.[date.toFormat(DATE_FORMAT)]
-    : false;
-
-  return disabledByDates || noAvailableTimes;
-};
 
 export const getMonthCalendarDates = (initialDate: DateTime): DateTime[] => {
   const startOfMonth = initialDate.startOf("month");

package/src/date-time-button/DateTimeButton.tsx

@@ -14,12 +14,12 @@ export enum Variant {
 
 export type DateTimeButtonProps = {
   date: DateTime;
-  isSelected?: boolean;
-  isDisabled?: boolean;
+  isSelected: boolean;
+  isDisabled: boolean;
   isSoldOut?: boolean;
   onSelect: (date: DateTime) => void;
   price?: string | number | ReactElement | null;
-  resources: ZoneResourcesAvailability | null | undefined;
+  resources?: ZoneResourcesAvailability | null;
   showResources?: boolean;
   shouldCalculateResources?: boolean;
   variant: Variant;

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -1,9 +1,8 @@
-import React, { useMemo, useState, useRef, useEffect } from "react";
-import { DateTime, Interval } from "luxon";
+import React, { useState, useRef, useEffect } from "react";
+import { DateTime } from "luxon";
 import { Col, Form } from "react-bootstrap";
-import { Controller, RegisterOptions, useFormContext } from "react-hook-form";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useIntl } from "react-intl";
 
 import { useId } from "@react-aria/utils";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
@@ -11,6 +10,7 @@ import HTMLInputDateElement from "../../types/static/HTMLInputDateElement";
 import { RecurrenceInput } from "../../recurrence-input";
 import { WarningMessage } from "../../static";
 import { ProductSetFormValues } from "../../product-set/form";
+import { useFormattedDuration, useValidationOptions } from "./hooks";
 
 interface IntervalInputProps {
   editedProductSet?: ProductSetFormValues;
@@ -35,7 +35,6 @@ export function IntervalInput({
   const {
     register,
     formState: { errors },
-    watch,
     control,
     trigger,
     setValue,
@@ -44,9 +43,9 @@ export function IntervalInput({
   const formattedDuration = useFormattedDuration();
   const validationOptions = useValidationOptions();
 
-  const rrule = watch("rrule");
-  const start = watch("start");
-  const end = watch("end");
+  const rrule = useWatch({ control, name: "rrule" });
+  const start = useWatch({ control, name: "start" });
+  const end = useWatch({ control, name: "end" });
   const [recurrent, setRecurrent] = useState(Boolean(rrule));
   const [isOverriden, setIsOverriden] = useState(false);
   const recurrentId = useId();
@@ -123,6 +122,7 @@ export function IntervalInput({
               onChangeEndDate(nextEndtDate)
             }
             min={start}
+            required
             isInvalid={Boolean(errors.end)}
             onClick={() => endDateInput?.current?.showPicker()}
             ref={endDateInput}
@@ -180,75 +180,3 @@ export function IntervalInput({
     </>
   );
 }
-
-const useFormattedDuration = () => {
-  const { watch } = useFormContext<IntervalInputValues>();
-  const start = watch("start");
-  const end = watch("end");
-  const { formatList, formatNumber } = useIntl();
-
-  return useMemo(() => {
-    const interval = Interval.fromDateTimes(
-      DateTime.fromISO(start),
-      DateTime.fromISO(end)
-    ).toDuration(["days", "hours", "minutes"]);
-
-    if (!interval.isValid) return undefined;
-
-    const formatUnit = (value: number, unit: string) =>
-      formatNumber(value, { style: "unit", unit, unitDisplay: "long" });
-
-    const units = (
-      [
-        [interval.days, "day"],
-        [interval.hours, "hour"],
-        [interval.minutes, "minute"],
-      ] as Parameters<typeof formatUnit>[]
-    ).filter(([value]) => value);
-
-    return formatList(
-      units.map((args) => formatUnit(...args)),
-      { style: "long", type: "unit" }
-    );
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [start, end]);
-};
-
-const useValidationOptions = () => {
-  const { watch } = useFormContext();
-  const { t } = useTranslation(["Design", "Validation"]);
-  const start = watch("start");
-  const end = watch("end");
-
-  return {
-    start: useMemo<RegisterOptions>(
-      () => ({
-        required: t("Validation:fieldRequired", {
-          attribute: t("start"),
-        }) as string,
-        // TODO: uncomment when event splitting is implemented
-        // and extract into plugins
-        validate: (value) =>
-          DateTime.fromISO(value).diffNow().toMillis() > 0 ||
-          (t("Validation:fieldValidEventStart") as string),
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      []
-    ),
-
-    end: useMemo<RegisterOptions>(
-      () => ({
-        // TODO: uncomment when event splitting is implemented
-        // and extract into plugins
-        validate: (value) =>
-          // endAt not required
-          value
-            ? DateTime.fromISO(value).diff(DateTime.fromISO(start)).toMillis() >
-                0 || (t("Validation:fieldValidEventEnd") as string)
-            : true,
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [start, end]
-    ),
-  };
-};

package/src/events/edit-event-modal/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useFormattedDuration";
+export * from "./useValidationOptions";

package/src/events/edit-event-modal/hooks/useFormattedDuration.tsx

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { useIntl } from "react-intl";
+import { DateTime, Interval } from "luxon";
+import { IntervalInputValues } from "../IntervalInput";
+
+export const useFormattedDuration = () => {
+  const { control } = useFormContext<IntervalInputValues>();
+  const start = useWatch({ control, name: "start" });
+  const end = useWatch({ control, name: "end" });
+  const { formatList, formatNumber } = useIntl();
+
+  const duration = useMemo(() => {
+    const interval = Interval.fromDateTimes(
+      DateTime.fromISO(start),
+      DateTime.fromISO(end)
+    ).toDuration(["days", "hours", "minutes"]);
+
+    if (!interval.isValid) return undefined;
+
+    const formatUnit = (value: number, unit: string) =>
+      formatNumber(value, { style: "unit", unit, unitDisplay: "long" });
+
+    const units = (
+      [
+        [interval.days, "day"],
+        [interval.hours, "hour"],
+        [interval.minutes, "minute"],
+      ] as Parameters<typeof formatUnit>[]
+    ).filter(([value]) => value);
+
+    return formatList(
+      units.map((args) => formatUnit(...args)),
+      { style: "long", type: "unit" }
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [start, end]);
+
+  return duration;
+};

package/src/events/edit-event-modal/hooks/useValidationOptions.tsx

@@ -0,0 +1,36 @@
+import { DateTime } from "luxon";
+import { useFormContext, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+export const useValidationOptions = () => {
+  const { control } = useFormContext();
+  const { t } = useTranslation(["Design", "Validation"]);
+  const start = useWatch({ control, name: "start" });
+
+  return {
+    start: {
+      required: t("Validation:fieldRequired", {
+        attribute: t("start"),
+      }) as string,
+      // TODO: uncomment when event splitting is implemented
+      // and extract into plugins
+      validate: (value) =>
+        DateTime.fromISO(value).diffNow().toMillis() > 0 ||
+        (t("Validation:fieldValidEventStart") as string),
+    },
+
+    end: {
+      required: t("Validation:fieldRequired", {
+        attribute: t("end"),
+      }) as string,
+      // TODO: uncomment when event splitting is implemented
+      // and extract into plugins
+      validate: (value) =>
+        // endAt not required
+        value
+          ? DateTime.fromISO(value).diff(DateTime.fromISO(start)).toMillis() >
+              0 || (t("Validation:fieldValidEventEnd") as string)
+          : true,
+    },
+  };
+};

package/src/events/event-card/EventCard.stories.tsx

@@ -33,6 +33,7 @@ export const Default: Story<EventCardProps> = () => {
           RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
           the...`}
         date="2023-08-31T09:35:00.000+03:00"
+        productSetName="New product set"
         imageUrl={showImage ? `https://source.unsplash.com/random` : null}
         hasPermission={hasPermission}
         onPreview={() => undefined}

package/src/events/event-card/EventCard.tsx

@@ -1,5 +1,11 @@
 import React, { useMemo } from "react";
-import { Badge, Card, ProgressBar } from "react-bootstrap";
+import {
+  Badge,
+  Card,
+  OverlayTrigger,
+  Popover,
+  ProgressBar,
+} from "react-bootstrap";
 import { useIntl } from "react-intl";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
@@ -30,6 +36,7 @@ export interface EventCardProps extends HasPermissionProp {
   onStatistic: () => void;
   titleId?: string;
   descriptionId?: string;
+  productSetName?: string;
 }
 
 export function EventCard({
@@ -43,6 +50,7 @@ export function EventCard({
   onCopy,
   onRemove,
   hasPermission = true,
+  productSetName,
   onStatistic,
   eventStatistic,
   titleId,
@@ -123,7 +131,24 @@ export function EventCard({
             ))}
         </div>
       </Card.Body>
-      <Card.Footer>
+      <Card.Footer className="flex-column">
+        {productSetName && (
+          <OverlayTrigger
+            // Workaround for bootstrap error with "hover trigger"
+            trigger={["hover", "hover"]}
+            overlay={
+              <Popover id="event-product-set-popover">
+                <Popover.Content className="event-product-set-card">
+                  {productSetName}
+                </Popover.Content>
+              </Popover>
+            }
+          >
+            <div className="pl-3 text-truncate">
+              {t("Design:productSet")}: {productSetName}
+            </div>
+          </OverlayTrigger>
+        )}
         <div className="d-flex w-100 justify-content-between">
           <div className="d-flex">
             <button

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

@@ -28,6 +28,7 @@ interface IframeEventCardProps {
   shortDate: string;
   titleId?: string;
   descriptionId?: string;
+  imageClassName?: string;
 }
 
 export function IframeEventCard({
@@ -44,6 +45,7 @@ export function IframeEventCard({
   shortDate,
   titleId,
   descriptionId,
+  imageClassName,
 }: IframeEventCardProps) {
   const { formatNumber } = useIntl();
   const { t } = useTranslation("Design");
@@ -70,7 +72,7 @@ export function IframeEventCard({
     >
       {imageSrc && (
         <Card.Img
-          className="card-image"
+          className={imageClassName ?? "card-image"}
           variant="top"
           as="div"
           style={{ backgroundImage: `url("${imageSrc}")` }}

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

@@ -20,6 +20,7 @@ export const BookingSummary = ({
   productsWithErrors = [],
   isLoading,
   hasPeopleInput,
+  isPaymentLink,
   peopleAmount,
 }: Omit<BookingSummaryProps, "totallWithDiscount">) => {
   const { t } = useTranslation("Design");
@@ -49,6 +50,7 @@ export const BookingSummary = ({
               <div className="products-by-menu-step">
                 {menuSteps.map((menuStep) => (
                   <ProductsByMenuStep
+                    isPaymentLink={isPaymentLink}
                     key={menuStep.id}
                     orderItems={formValues}
                     step={menuStep}

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

@@ -8,21 +8,27 @@ type ProductSummaryProps = {
   name?: string;
   productQuantityError?: string;
   orderProduct: OrderItem;
+  isPaymentLink?: boolean;
 };
 
 export const ProductSummary = ({
   name,
   productQuantityError,
   orderProduct,
+  isPaymentLink,
 }: ProductSummaryProps) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
 
-  const price = formatNumber(
-    (orderProduct?.deposit || orderProduct?.price || 0) *
-      orderProduct?.quantity,
-    { style: "currency", currency: Config.Currency.GBP }
-  );
+  const priceForOneProduct =
+    !isPaymentLink && orderProduct?.hasDeposit
+      ? orderProduct?.deposit
+      : orderProduct?.price;
+
+  const fullPrice = formatNumber(priceForOneProduct * orderProduct?.quantity, {
+    style: "currency",
+    currency: Config.Currency.GBP,
+  });
 
   return (
     <div className="product">
@@ -32,7 +38,7 @@ export const ProductSummary = ({
           {t("shortQuantity")}:&nbsp;{orderProduct?.quantity}
         </p>
 
-        <p className="price">{price}</p>
+        <p className="price">{fullPrice}</p>
       </div>
 
       {productQuantityError && (

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

@@ -29,12 +29,14 @@ export type ProductsByMenuStepsProps = {
   orderItems: OrderItems;
   step: MenuStep;
   productsWithErrors?: QuantityCheckProductInfo[];
+  isPaymentLink?: boolean;
 };
 
 export const ProductsByMenuStep = ({
   orderItems,
   step,
   productsWithErrors = [],
+  isPaymentLink,
 }: ProductsByMenuStepsProps) => {
   const { productCategories } = step;
 
@@ -62,6 +64,7 @@ export const ProductsByMenuStep = ({
 
               return (
                 <ProductSummary
+                  isPaymentLink={isPaymentLink}
                   key={orderItem.id}
                   name={orderItem.name}
                   productQuantityError={productQuantityError}

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

@@ -19,4 +19,5 @@ export type BookingSummaryProps = {
   productsWithErrors?: QuantityCheckProductInfo[];
   isLoading?: boolean;
   peopleAmount: number;
+  isPaymentLink?: boolean;
 };

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

@@ -7,10 +7,8 @@ export const cartSumByOrderProducts = (orderProducts?: OrderItem[]) => {
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
     if (!product) return 0;
-
-    return (
-      prevSumValue + (product?.deposit || product?.price) * product.quantity
-    );
+    const price = product?.hasDeposit ? product?.deposit : product?.price;
+    return prevSumValue + price * product.quantity;
   }, 0);
 };
 

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

@@ -42,18 +42,6 @@ export const CategoryProduct = ({
     return error?.message;
   }, [productsWithErrors, product.id]);
 
-  const deposit = useMemo(() => {
-    if (
-      !category.allowDeposits ||
-      !product.deposit ||
-      product?.isSoldOut ||
-      product.deposit >= product.price
-    ) {
-      return undefined;
-    }
-    return product.deposit;
-  }, [category, product]);
-
   const checkIfSoldOutProduct = () => {
     if (!soldOutProducts || product?.isSoldOut) {
       return undefined;
@@ -146,10 +134,13 @@ export const CategoryProduct = ({
             </div>
             <div className="iframe-event__product-price-wrapper">
               <span className="product-price">
-                {formatNumber(deposit ?? product.price, {
-                  style: "currency",
-                  currency: Config.Currency.GBP,
-                })}
+                {formatNumber(
+                  category.allowDeposits ? product?.deposit : product.price,
+                  {
+                    style: "currency",
+                    currency: Config.Currency.GBP,
+                  }
+                )}
               </span>
               <ProductQuantityInput
                 onChange={onChange}
@@ -162,17 +153,16 @@ export const CategoryProduct = ({
                 }}
                 category={category}
                 invalid={invalid}
-                deposit={deposit}
               />
             </div>
-            {deposit && !category?.remainderExpireAfter && (
+            {category.allowDeposits && !category?.remainderExpireAfter && (
               <div className="mt-4">
                 {t("Design:payNowAndUponArrival", {
-                  deposit: formatNumber(deposit, {
+                  deposit: formatNumber(product?.deposit, {
                     style: "currency",
                     currency: Config.Currency.GBP,
                   }),
-                  remainder: formatNumber(product.price - deposit, {
+                  remainder: formatNumber(product.price - product?.deposit, {
                     style: "currency",
                     currency: Config.Currency.GBP,
                   }),
@@ -180,14 +170,14 @@ export const CategoryProduct = ({
               </div>
             )}
 
-            {deposit && category?.remainderExpireAfter > 0 && (
+            {category.allowDeposits && category?.remainderExpireAfter > 0 && (
               <div className="mt-4">
                 {t("Design:payNowAndReminderDays", {
-                  deposit: formatNumber(deposit, {
+                  deposit: formatNumber(product?.deposit, {
                     style: "currency",
                     currency: Config.Currency.GBP,
                   }),
-                  remainder: formatNumber(product.price - deposit, {
+                  remainder: formatNumber(product.price - product?.deposit, {
                     style: "currency",
                     currency: Config.Currency.GBP,
                   }),

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

@@ -32,7 +32,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     ref
   ) => {
     const handleArrowUpClick = () => {
-      if (max !== undefined && value < max) {
+      if (max !== undefined && (value || 0) < max) {
         onArrowUp(value + 1);
       }
       if (max === undefined) {

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

@@ -15,6 +15,7 @@ interface FormOrderItem {
   name: string;
   price: number;
   productCategoryId: number;
+  hasDeposit?: boolean;
   zoneId?: Zone["id"];
   deposit?: number | null;
   quantity: number;
@@ -40,19 +41,23 @@ export const ProductQuantityInput = ({
   refCallback,
   productInfo,
   invalid,
-  deposit,
 }: ProductQuantityInputProps) => {
   const { t } = useTranslation("Design");
 
   const onChange = (quantity: number | null) => {
+    let productQuantity = quantity;
+    if (product?.maxAmount && quantity > product?.maxAmount) {
+      productQuantity = product?.maxAmount;
+    }
     _onChange({
       id: product.id,
       name: product.name,
-      deposit,
+      deposit: product?.deposit,
+      hasDeposit: category.allowDeposits,
       price: product.price,
       productCategoryId: category.id,
       zoneId: category.zone?.id,
-      quantity,
+      quantity: productQuantity,
       capacity: product?.capacity,
     });
   };
@@ -99,6 +104,7 @@ export const ProductQuantityInput = ({
         clearErrors(`${product.id}` as const);
       }}
       min={0}
+      max={product?.maxAmount ? Number(product?.maxAmount) : undefined}
       placeholder="0"
       disabled={product.isSoldOut}
       value={productInfo?.quantity}