@licklist/design 0.52.0 → 0.53.0-dev.0

package/dist/styles/snippet-templates/SnippetTemplateCard.scss

@@ -28,12 +28,13 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
   border: 1px solid #ccc;
   border-radius: $border-radius;
   height: 10rem;
-  width: 15rem;
+  min-width: 15rem;
   padding: 1rem;
 
   @include media-breakpoint-down(sm) {
     height: 100%;
     max-height: 10rem;
+    width: 100%;
   }
 
   p {
@@ -109,4 +110,4 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
   &:hover {
     border: 2px solid $blue;
   }
-}
+}

package/dist/styles/static/Tabs.scss

@@ -11,6 +11,12 @@ $tab-nav-link-active-border-bottom: 1px solid $tab-nav-link-active-color !defaul
   margin-left: -1.25rem;
   border-bottom: 1px solid $nav-tabs-border-color;
 
+  @include media-breakpoint-down(sm) {
+    display: flex;
+    flex-direction: column;
+    white-space: nowrap;
+  }
+
   .nav-link {
     color: $tab-nav-link-color;
     background-color: transparent;

package/dist/styles/themes/bookedit/_index.scss

@@ -98,7 +98,8 @@
       color: gray("600");
 
       &.sortable {
-        &::before, &::after {
+        &::before,
+        &::after {
           opacity: 1;
         }
 
@@ -132,20 +133,20 @@
     width: 2.5rem;
     height: 2.5rem;
     background-color: transparent;
-  
+
     svg {
       margin-bottom: 2.5px;
     }
 
     &:hover {
       cursor: pointer;
-      border-radius: .5rem;
+      border-radius: 0.5rem;
       background-color: lighten($primary, 40);
     }
   }
 
   .page-item {
-    margin-left: .4rem;
+    margin-left: 0.4rem;
     min-width: 15px;
     width: 2.5rem;
     height: 2.5rem;
@@ -153,7 +154,7 @@
     .page-link {
       border: 0;
       padding: 0;
-      border-radius: .5rem;
+      border-radius: 0.5rem;
       height: 100%;
       display: flex;
       align-items: center;
@@ -162,13 +163,13 @@
       color: $black;
       font-weight: 600;
       font-size: 0.875rem;
-      
+
       &:hover {
-        border-radius: .5rem;
+        border-radius: 0.5rem;
         background-color: lighten($primary, 40);
       }
     }
-    
+
     &.active {
       .page-link {
         border: 2px solid $primary;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.52.0",
+  "version": "0.53.0-dev.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -53,9 +53,9 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.9",
-    "@licklist/core": "^0.17.0",
+    "@licklist/core": ">=0.15.41-dev.0 < 0.15.41",
     "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": "^0.25.0",
+    "@licklist/plugins": ">=0.24.0-dev.0 < 0.24.0",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",

package/src/calendar/Calendar.tsx

@@ -1,12 +1,9 @@
 import React, { Dispatch, ReactElement, SetStateAction } from "react";
 import { DateTime } from "luxon";
-import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
+import { DateTimeButtonProps } from "src/date-time-button";
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
 
-// same as apps/iframe/src/types/availability.ts
-export type AvailableTimes = Record<string, string[]>;
-
 export const defaultStartDay = DateTime.now().set({
   millisecond: 0,
   second: 0,
@@ -18,32 +15,28 @@ export type CalendarProps = {
   currentDate: DateTime;
   setCurrentDate: Dispatch<SetStateAction<DateTime>>;
   calendarDates: DateTime[];
-  disabledDates?: DateTime[];
   selectedDate: DateTime | null;
   setSelectedDate: Dispatch<SetStateAction<DateTime | null>>;
   fromPrice?: string | ReactElement | null;
   isLoading?: boolean;
   initialDate?: DateTime;
-  getAvailability?: (date: DateTime) => ZoneResourcesAvailability | null;
-  includeAvailability?: boolean;
-  availableTimes?: AvailableTimes;
-  shouldCalculateResources?: boolean;
+  getDateTimeButtonProps: (
+    date: DateTime
+  ) => Pick<
+    DateTimeButtonProps,
+    "resources" | "showResources" | "shouldCalculateResources" | "isDisabled"
+  >;
 };
 
 export const Calendar = ({
-  disabledDates = [],
   initialDate = defaultStartDay,
   ...props
 }: CalendarProps) => {
   return (
     <div className="calendar-wrapper">
       <div className="calendar">
-        <CalendarButtons
-          disabledDates={disabledDates}
-          initialDate={initialDate}
-          {...props}
-        />
-        <CalendarDates disabledDates={disabledDates} {...props} />
+        <CalendarButtons initialDate={initialDate} {...props} />
+        <CalendarDates {...props} />
       </div>
     </div>
   );

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/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);
 };