@licklist/design 0.56.0 → 0.58.0-dev.0

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/order-process/components/CategoryProduct/CategoryProduct.tsx

@@ -32,6 +32,9 @@ export const CategoryProduct = ({
   const { t } = useTranslation(["Design", "Validation"]);
   const { control, clearErrors, setError } = useFormContext();
 
+  const hasDeposits =
+    category.allowDeposits && product?.deposit < product.price;
+
   const productQuantityError = useMemo(() => {
     if (!productsWithErrors) {
       return undefined;
@@ -155,7 +158,7 @@ export const CategoryProduct = ({
                 invalid={invalid}
               />
             </div>
-            {category.allowDeposits && !category?.remainderExpireAfter && (
+            {hasDeposits && !category?.remainderExpireAfter && (
               <div className="mt-4">
                 {t("Design:payNowAndUponArrival", {
                   deposit: formatNumber(product?.deposit, {
@@ -170,7 +173,7 @@ export const CategoryProduct = ({
               </div>
             )}
 
-            {category.allowDeposits && category?.remainderExpireAfter > 0 && (
+            {hasDeposits && category?.remainderExpireAfter > 0 && (
               <div className="mt-4">
                 {t("Design:payNowAndReminderDays", {
                   deposit: formatNumber(product?.deposit, {

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

@@ -53,7 +53,7 @@ export const ProductQuantityInput = ({
       id: product.id,
       name: product.name,
       deposit: product?.deposit,
-      hasDeposit: category.allowDeposits,
+      hasDeposit: category.allowDeposits && product?.deposit < product.price,
       price: product.price,
       productCategoryId: category.id,
       zoneId: category.zone?.id,

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -201,15 +201,7 @@ export const EmailTemplateControl = React.forwardRef(
     return (
       <>
         <Row>
-          <Form.Group
-            as={Col}
-            controlId="type"
-            xs
-            sm={12}
-            md={8}
-            lg={10}
-            xl={12}
-          >
+          <Form.Group as={Col} controlId="type" sm={12}>
             <Form.Label>{t("type")}</Form.Label>
             <Form.Control
               as="select"
@@ -372,9 +364,7 @@ export const EmailTemplateControl = React.forwardRef(
                 if (option.type === OPTION_TYPE.checkbox) {
                   return (
                     <Form.Check
-                      {...register(
-                        `templateOptionValues.${option?.id}.value` as any
-                      )}
+                      {...register(`templateOptionValues.${option?.id}.value`)}
                       type="checkbox"
                       label={t(`Design:${option.name}`)}
                       id={option.name + option.id}
@@ -397,7 +387,7 @@ export const EmailTemplateControl = React.forwardRef(
                         onChange={() => {
                           setIsIncludePDF(!isIncludePDF);
                           setValue(
-                            `templateOptionValues.${option.id}.value` as any,
+                            `templateOptionValues.${option.id}.value`,
                             ""
                           );
                         }}
@@ -413,7 +403,7 @@ export const EmailTemplateControl = React.forwardRef(
                           <Form.Control
                             as="select"
                             {...register(
-                              `templateOptionValues.${option.id}.value` as any
+                              `templateOptionValues.${option.id}.value`
                             )}
                             defaultValue={option.selectedValue || ""}
                           >
@@ -442,7 +432,7 @@ export const EmailTemplateControl = React.forwardRef(
                       </Form.Label>
                       <Form.Control
                         {...register(
-                          `templateOptionValues.${option?.id}.value` as any
+                          `templateOptionValues.${option?.id}.value`
                         )}
                         type="number"
                         placeholder={t(`Design:${option.name}`)}

package/src/sales/booking/results/components/ResultCard.tsx

@@ -12,7 +12,6 @@ import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import * as Config from "@licklist/core/dist/Config";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
-
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -22,8 +21,6 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
-// @TODO integrate when API will be available
-// activity and staff keys
 export const ResultCard = ({
   order,
   className,

package/src/sales/manual-booking/summary/ManualBookingSummary.tsx

@@ -24,6 +24,7 @@ export interface ManualBookingSummaryProps {
   isFeeFetching: boolean;
   orderDate: string;
   relyOnPeopleType?: RelyOnPeopleType | null;
+  isMobileView?: boolean;
 }
 
 export const ManualBookingSummary = ({
@@ -35,6 +36,7 @@ export const ManualBookingSummary = ({
   orderDate,
   relyOnPeopleType,
   hasBookingCategory,
+  isMobileView,
 }: ManualBookingSummaryProps) => {
   const { t } = useTranslation(["Design", "Sale"]);
   const { formatNumber } = useIntl();
@@ -44,7 +46,13 @@ export const ManualBookingSummary = ({
   const date = currentDate.toFormat(DATE_TIME_MANUAL_BOOKING_FORMAT);
   const time = currentDate.toFormat(TIME_FORMAT);
   return (
-    <div className="manual-booking-summary">
+    <div
+      className={
+        isMobileView
+          ? "manual-booking-summary-mobile"
+          : "manual-booking-summary"
+      }
+    >
       <div className="receipt-title">{t("Sale:receipt")}</div>
       <div className="event-name border-summary-item">{eventName}</div>
       <div className="border-summary-item">{date}</div>

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -208,6 +208,9 @@ export function Preview({
                           selectedDate={selectedDate}
                           setSelectedDate={setSelectedDate}
                           calendarDates={calendarDates}
+                          getDateTimeButtonProps={() => ({
+                            isDisabled: false,
+                          })}
                         />
                       </SettingButton>
                     </div>

package/src/static/date-range-input/DateRangeInput.tsx

@@ -11,10 +11,13 @@ import {
   rangeDatesToStringDates,
   stringDatesToInputValue,
 } from "./utils";
+import { MOBILE_WIDTH } from "../../iframe/order-process/components/BookingSummary/types";
 
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 
+type DateRangeDirection = "vertical" | "horizontal";
+
 type DateRangeInputProps = {
   placeholder: string;
   startDate?: string;
@@ -33,7 +36,7 @@ export const DateRangeInput = ({
   disabled,
 }: DateRangeInputProps) => {
   const { t } = useTranslation("Design");
-
+  const [direction, setDirection] = useState<DateRangeDirection>("horizontal");
   const [state, setState] = useState<Range[]>([
     {
       startDate: new Date(),
@@ -82,6 +85,24 @@ export const DateRangeInput = ({
     }
   }, [startDate, endDate]);
 
+  useEffect(() => {
+    const resizeBodyInMobile = () => {
+      if (window.innerWidth > MOBILE_WIDTH) {
+        setDirection("horizontal");
+        return;
+      }
+
+      setDirection("vertical");
+    };
+
+    resizeBodyInMobile();
+    window.addEventListener("resize", resizeBodyInMobile);
+
+    return () => {
+      window.removeEventListener("resize", resizeBodyInMobile);
+    };
+  }, []);
+
   return (
     <div>
       <OverlayTrigger
@@ -94,7 +115,7 @@ export const DateRangeInput = ({
                 moveRangeOnFirstSelection={false}
                 ranges={state}
                 months={months}
-                direction="horizontal"
+                direction={direction}
               />
               <div className="mt-3 d-flex justify-content-end">
                 <Button onClick={onReset} variant="link">

package/src/static/switch/BooleanSwitch.tsx

@@ -23,7 +23,7 @@ export function BooleanSwitch({
   const { t } = useTranslation("Design");
 
   const options: SelectItem[] = [
-    { id: 1, value: firstValueTitle ??  t("yes") },
+    { id: 1, value: firstValueTitle ?? t("yes") },
     { id: 0, value: secondValueTitle ?? t("no") },
   ];
 

package/src/styles/resources-blocking/_index.scss

@@ -106,6 +106,12 @@
     align-items: center;
     gap: 0.25rem;
     margin-bottom: 0.5rem;
+
+    @include media-breakpoint-down(sm) {
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
   }
 
   .text-input.form-group {

package/src/styles/sales/BookingFilter.scss

@@ -157,6 +157,19 @@
         margin-bottom: 0;
       }
     }
+
+    .apply-container{
+      display: flex;
+      justify-content: space-around;
+      column-gap: 2rem;
+      margin-left: 3rem;
+
+      @include media-breakpoint-down(sm) {
+        flex-direction: row;
+        margin-left: 0rem;
+        column-gap: 1rem;
+      }
+    }
   }
 
   .additional-filter-container {
@@ -175,8 +188,12 @@
       }
     }
 
-    @include media-breakpoint-between(md, lg) {
-      flex-wrap: nowrap;
+    @include media-breakpoint-down(xl) {
+      flex-wrap: wrap;
+
+      .apply-container {
+        margin-left: 4rem;
+      }
 
       .date-container {
         width: auto;
@@ -230,6 +247,11 @@
           transform: rotate(45deg);
         }
       }
+
+      @include media-breakpoint-down(sm) {
+        flex-direction: column;
+        justify-content: flex-start;
+      }
     }
   }
 }

package/src/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);