@licklist/design 0.50.1-dev.8 → 0.50.1

package/src/calendar/utils/index.ts

@@ -1,22 +1,13 @@
 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())
+export const isSelectedDateDisabled = (
+  selectedDate: DateTime,
+  disabledDates: DateTime[] = []
+) => {
+  return !!disabledDates.find((disabledDate) =>
+    isEqual(disabledDate.toObject(), selectedDate.toObject())
   );
-
-  const noAvailableTimes = availableTimes
-    ? !availableTimes?.[date.toFormat(DATE_FORMAT)]
-    : false;
-
-  return disabledByDates || noAvailableTimes;
 };
 
 export const getMonthCalendarDates = (initialDate: DateTime): DateTime[] => {

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

@@ -2,7 +2,6 @@ import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
 import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
-import { has } from "lodash";
 import { AvailabilityIndicator } from "../availability-indicator";
 import { DateContent } from "./DateContent";
 
@@ -19,9 +18,8 @@ export type DateTimeButtonProps = {
   isSoldOut?: boolean;
   onSelect: (date: DateTime) => void;
   price?: string | number | ReactElement | null;
-  resources: ZoneResourcesAvailability | null | undefined;
+  resources?: ZoneResourcesAvailability | null;
   showResources?: boolean;
-  shouldCalculateResources?: boolean;
   variant: Variant;
 };
 
@@ -34,28 +32,17 @@ export const DateTimeButton = ({
   price,
   resources,
   showResources,
-  shouldCalculateResources = true,
   variant = Variant.week,
 }: DateTimeButtonProps) => {
   const isSoldOut =
     _isSoldOut ||
-    // only consider resources if shouldCalculateResources is true
-    (shouldCalculateResources &&
-      resources &&
-      resources.bookedResources >= resources.totalResources);
+    (resources && resources.bookedResources >= resources.totalResources);
 
   const isTimeVariant = variant === Variant.time;
 
   const isTimeInPast = isTimeVariant && isDateInPast(date);
 
-  const noResources =
-    shouldCalculateResources &&
-    // only consider resources if shouldCalculateResources is true
-    (!resources ||
-      !has(resources, "bookedResources") ||
-      !has(resources, "totalResources"));
-
-  const isDisabled = _isDisabled || isSoldOut || isTimeInPast || noResources;
+  const isDisabled = _isDisabled || isSoldOut || isTimeInPast;
 
   return (
     <button

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

@@ -1,8 +1,9 @@
-import React, { useState, useRef, useEffect } from "react";
-import { DateTime } from "luxon";
+import React, { useMemo, useState, useRef, useEffect } from "react";
+import { DateTime, Interval } from "luxon";
 import { Col, Form } from "react-bootstrap";
-import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { Controller, RegisterOptions, useFormContext } 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";
@@ -10,7 +11,6 @@ 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,6 +35,7 @@ export function IntervalInput({
   const {
     register,
     formState: { errors },
+    watch,
     control,
     trigger,
     setValue,
@@ -43,9 +44,9 @@ export function IntervalInput({
   const formattedDuration = useFormattedDuration();
   const validationOptions = useValidationOptions();
 
-  const rrule = useWatch({ control, name: "rrule" });
-  const start = useWatch({ control, name: "start" });
-  const end = useWatch({ control, name: "end" });
+  const rrule = watch("rrule");
+  const start = watch("start");
+  const end = watch("end");
   const [recurrent, setRecurrent] = useState(Boolean(rrule));
   const [isOverriden, setIsOverriden] = useState(false);
   const recurrentId = useId();
@@ -122,7 +123,6 @@ export function IntervalInput({
               onChangeEndDate(nextEndtDate)
             }
             min={start}
-            required
             isInvalid={Boolean(errors.end)}
             onClick={() => endDateInput?.current?.showPicker()}
             ref={endDateInput}
@@ -180,3 +180,75 @@ 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/event-card/EventCard.stories.tsx

@@ -33,7 +33,6 @@ 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,11 +1,5 @@
 import React, { useMemo } from "react";
-import {
-  Badge,
-  Card,
-  OverlayTrigger,
-  Popover,
-  ProgressBar,
-} from "react-bootstrap";
+import { Badge, Card, ProgressBar } from "react-bootstrap";
 import { useIntl } from "react-intl";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
@@ -36,7 +30,6 @@ export interface EventCardProps extends HasPermissionProp {
   onStatistic: () => void;
   titleId?: string;
   descriptionId?: string;
-  productSetName?: string;
 }
 
 export function EventCard({
@@ -50,7 +43,6 @@ export function EventCard({
   onCopy,
   onRemove,
   hasPermission = true,
-  productSetName,
   onStatistic,
   eventStatistic,
   titleId,
@@ -131,24 +123,7 @@ export function EventCard({
             ))}
         </div>
       </Card.Body>
-      <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>
-        )}
+      <Card.Footer>
         <div className="d-flex w-100 justify-content-between">
           <div className="d-flex">
             <button

package/src/iframe/event/event-booking-products/EventBookingProducts.tsx

@@ -27,7 +27,7 @@ export function EventBookingProducts({
             <AccordionItem
               key={productsCategory.id}
               eventKey={`${productsCategory.id}`}
-              productCategoryId={productsCategory.id}
+              productsCategoryId={productsCategory.id}
               name={productsCategory.name}
               products={productsCategory.products}
               order={order}

package/src/iframe/event/event-booking-products/components/AccordionItem/AccordionItem.tsx

@@ -24,7 +24,7 @@ interface AccordionItemProps {
   products: Product[];
   setOrder: SetOrderFn;
   order: Record<number, OrderItem>;
-  productCategoryId: number;
+  productsCategoryId: number;
 }
 
 function CustomToggle({
@@ -60,7 +60,7 @@ export function AccordionItem({
   order,
   setOrder,
   products,
-  productCategoryId,
+  productsCategoryId,
 }: AccordionItemProps) {
   return (
     <Card className="event-booking-products__card">
@@ -71,7 +71,7 @@ export function AccordionItem({
             <ProductItem
               key={product.id}
               id={product.id}
-              productCategoryId={productCategoryId}
+              productsCategoryId={productsCategoryId}
               price={product.price}
               name={product.name}
               description={product.description}
@@ -92,7 +92,7 @@ interface ProductItemProps {
   description: string;
   order: OrderItems;
   setOrder: SetOrderFn;
-  productCategoryId: OrderItem["productCategoryId"];
+  productsCategoryId: number;
 }
 
 function ProductItem({
@@ -102,7 +102,7 @@ function ProductItem({
   description,
   order,
   setOrder,
-  productCategoryId,
+  productsCategoryId,
 }: ProductItemProps) {
   const { formatNumber } = useIntl();
 
@@ -120,7 +120,7 @@ function ProductItem({
                 quantity: val,
                 name,
                 price,
-                productCategoryId,
+                productsCategoryId,
               },
             }));
           }}
@@ -132,7 +132,7 @@ function ProductItem({
                 quantity: prev[id]?.quantity - 1 || 0,
                 name,
                 price,
-                productCategoryId,
+                productsCategoryId,
               },
             }))
           }
@@ -144,7 +144,7 @@ function ProductItem({
                 quantity: prev[id]?.quantity + 1 || 1,
                 name,
                 price,
-                productCategoryId,
+                productsCategoryId,
               },
             }))
           }

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

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

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

@@ -147,35 +147,35 @@ export function Default() {
               quantity: 1,
               name: "cat 1 prod 1",
               price: 0,
-              productCategoryId: 1,
+              productsCategoryId: 1,
             },
             "21": {
               id: 21,
               quantity: 2,
               name: "cat 2 prod 1",
               price: 1,
-              productCategoryId: 2,
+              productsCategoryId: 2,
             },
             "31": {
               id: 31,
               quantity: 4,
               name: "cat 3 prod 1",
               price: 1,
-              productCategoryId: 3,
+              productsCategoryId: 3,
             },
             "32": {
               id: 32,
               quantity: 4,
               name: "cat 3 prod 2",
               price: 1,
-              productCategoryId: 3,
+              productsCategoryId: 3,
             },
             "41": {
               id: 41,
               quantity: 4,
               name: "cat 4 prod 1",
               price: 1,
-              productCategoryId: 4,
+              productsCategoryId: 4,
             },
           }}
           totalWithDiscount={5}

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

@@ -20,7 +20,6 @@ export const BookingSummary = ({
   productsWithErrors = [],
   isLoading,
   hasPeopleInput,
-  isPaymentLink,
   peopleAmount,
 }: Omit<BookingSummaryProps, "totallWithDiscount">) => {
   const { t } = useTranslation("Design");
@@ -50,7 +49,6 @@ 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,27 +8,21 @@ 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 priceForOneProduct =
-    !isPaymentLink && orderProduct?.hasDeposit
-      ? orderProduct?.deposit
-      : orderProduct?.price;
-
-  const fullPrice = formatNumber(priceForOneProduct * orderProduct?.quantity, {
-    style: "currency",
-    currency: Config.Currency.GBP,
-  });
+  const price = formatNumber(
+    (orderProduct?.deposit || orderProduct?.price || 0) *
+      orderProduct?.quantity,
+    { style: "currency", currency: Config.Currency.GBP }
+  );
 
   return (
     <div className="product">
@@ -38,7 +32,7 @@ export const ProductSummary = ({
           {t("shortQuantity")}:&nbsp;{orderProduct?.quantity}
         </p>
 
-        <p className="price">{fullPrice}</p>
+        <p className="price">{price}</p>
       </div>
 
       {productQuantityError && (

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

@@ -13,7 +13,7 @@ const doesStepHaveItems = (orderItems: OrderItems, step: MenuStep): boolean => {
   const categoriesIds = step.productCategories.map((category) => category.id);
 
   const stepItems = values(orderItems).filter((item) =>
-    categoriesIds.includes(item.productCategoryId)
+    categoriesIds.includes(item.productsCategoryId)
   );
 
   return stepItems.length > 0;
@@ -23,20 +23,18 @@ const getOrderItemsForCategory = (
   orderItems: OrderItems,
   categoryId: number
 ): OrderItem[] =>
-  values(orderItems).filter((item) => item.productCategoryId === categoryId);
+  values(orderItems).filter((item) => item.productsCategoryId === categoryId);
 
 export type ProductsByMenuStepsProps = {
   orderItems: OrderItems;
   step: MenuStep;
   productsWithErrors?: QuantityCheckProductInfo[];
-  isPaymentLink?: boolean;
 };
 
 export const ProductsByMenuStep = ({
   orderItems,
   step,
   productsWithErrors = [],
-  isPaymentLink,
 }: ProductsByMenuStepsProps) => {
   const { productCategories } = step;
 
@@ -64,7 +62,6 @@ 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,5 +19,4 @@ export type BookingSummaryProps = {
   productsWithErrors?: QuantityCheckProductInfo[];
   isLoading?: boolean;
   peopleAmount: number;
-  isPaymentLink?: boolean;
 };

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

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

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

@@ -1,7 +1,6 @@
 import React, { ReactNode, PropsWithChildren } from "react";
 import { useTranslation } from "react-i18next";
 import Button from "react-bootstrap/Button";
-import { Spinner } from "react-bootstrap";
 import { STEP_FORM_ID } from "../../constants";
 
 type ButtonPropsWithoutOnClick = {
@@ -19,41 +18,29 @@ type FooterProps = Partial<
     disabled?: boolean;
     buttonLabel?: ReactNode;
     showButton?: boolean;
-    isLoading: boolean;
   } & (ButtonPropsWithoutOnClick | ButtonPropsWithOnClick)
 >;
 
 export type BookingSummaryFooterProps = PropsWithChildren<FooterProps>;
 
 export const BookingSummaryFooter = ({
-  disabled: _disabled = false,
+  disabled = false,
   onClick,
   buttonLabel,
   form = STEP_FORM_ID,
   children,
   showButton = true,
-  isLoading = false,
 }: BookingSummaryFooterProps) => {
   const { t } = useTranslation("Design");
 
   const buttonProps = onClick ? { onClick } : { type: "submit", form };
 
-  const disabled = _disabled || isLoading;
-
   return (
     <div className="d-flex flex-column">
       {children}
       {showButton && (
-        <Button
-          className="m-0 d-flex align-items-center justify-content-center mt-3"
-          disabled={disabled}
-          {...buttonProps}
-        >
-          {isLoading ? (
-            <Spinner animation="border" size="sm" role="status" />
-          ) : (
-            buttonLabel ?? t("continue")
-          )}
+        <Button className="m-0 mt-3" disabled={disabled} {...buttonProps}>
+          {buttonLabel ?? t("continue")}
         </Button>
       )}
     </div>

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

@@ -42,6 +42,18 @@ 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;
@@ -134,13 +146,10 @@ export const CategoryProduct = ({
             </div>
             <div className="iframe-event__product-price-wrapper">
               <span className="product-price">
-                {formatNumber(
-                  category.allowDeposits ? product?.deposit : product.price,
-                  {
-                    style: "currency",
-                    currency: Config.Currency.GBP,
-                  }
-                )}
+                {formatNumber(deposit ?? product.price, {
+                  style: "currency",
+                  currency: Config.Currency.GBP,
+                })}
               </span>
               <ProductQuantityInput
                 onChange={onChange}
@@ -153,16 +162,17 @@ export const CategoryProduct = ({
                 }}
                 category={category}
                 invalid={invalid}
+                deposit={deposit}
               />
             </div>
-            {category.allowDeposits && !category?.remainderExpireAfter && (
+            {deposit && !category?.remainderExpireAfter && (
               <div className="mt-4">
                 {t("Design:payNowAndUponArrival", {
-                  deposit: formatNumber(product?.deposit, {
+                  deposit: formatNumber(deposit, {
                     style: "currency",
                     currency: Config.Currency.GBP,
                   }),
-                  remainder: formatNumber(product.price - product?.deposit, {
+                  remainder: formatNumber(product.price - deposit, {
                     style: "currency",
                     currency: Config.Currency.GBP,
                   }),
@@ -170,14 +180,14 @@ export const CategoryProduct = ({
               </div>
             )}
 
-            {category.allowDeposits && category?.remainderExpireAfter > 0 && (
+            {deposit && category?.remainderExpireAfter > 0 && (
               <div className="mt-4">
                 {t("Design:payNowAndReminderDays", {
-                  deposit: formatNumber(product?.deposit, {
+                  deposit: formatNumber(deposit, {
                     style: "currency",
                     currency: Config.Currency.GBP,
                   }),
-                  remainder: formatNumber(product.price - product?.deposit, {
+                  remainder: formatNumber(product.price - deposit, {
                     style: "currency",
                     currency: Config.Currency.GBP,
                   }),