@licklist/design 0.58.6-dev.9 → 0.58.6

package/src/product-set/control/DateInput.tsx

@@ -1,313 +0,0 @@
-import React, { useRef, useState } from "react";
-import { Modifier } from "@popperjs/core";
-import { useId } from "@react-aria/utils";
-import { Form, OverlayTrigger, Popover } from "react-bootstrap";
-import { useFieldArray, useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { useClickAway } from "react-use";
-import { TIMEZONE, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
-import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
-import { DateTime } from "luxon";
-import RRule, { Frequency } from "rrule";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-
-import { DatePickerInput } from "../../recurring-date-picker-input/DatePickerInput";
-import { CONFIRM_MODAL_ACTIONS } from "../../modals/confirmation/ConfirmModal";
-import { Icon } from "../../static";
-
-import {
-  AvailableTimesControl,
-  AvailableTimesControlRef,
-} from "../../zone/form/components/AvailableTimesControl";
-import {
-  RecurringDatePickerInputValues,
-  getDateTimeObject,
-} from "../../recurring-date-picker-input/RecurringDatePickerInput";
-import { ProductSetRecurrenceOverridesControl } from "./ProductSetRecurrenceOverridesControl";
-
-export interface DateAndRecurrenceInputValues {
-  menuRecurrences?: Partial<ProductSetRecurrence>[];
-}
-
-interface DateAndRecurrenceInputProps {
-  isEventEditProductSet?: boolean;
-  workHours?: WorkHour[];
-  providerHasBookingManagement: boolean;
-  isLoading?: boolean;
-}
-
-export const DateInput = ({
-  isEventEditProductSet,
-  isLoading,
-  workHours,
-  providerHasBookingManagement,
-}: DateAndRecurrenceInputProps) => {
-  const {
-    control,
-    register,
-    formState: { errors },
-    getValues,
-    setValue,
-    clearErrors,
-  } = useFormContext<DateAndRecurrenceInputValues>();
-
-  const { fields, append, update } = useFieldArray({
-    name: "menuRecurrences",
-    control,
-    keyName: "_id",
-  });
-
-  const [isDatePopoverVisible, setIsDatePopoverVisible] = useState(false);
-  const availableTimesFormRef = useRef<AvailableTimesControlRef>();
-  const [editState, setEditState] = useState<{
-    index: number;
-    values: Partial<ProductSetRecurrence>;
-  }>({
-    index: null,
-    values: null,
-  });
-  const clearEditState = () => setEditState({ index: null, values: null });
-
-  const popoverRef = useRef<HTMLDivElement>();
-
-  useClickAway(popoverRef, (event) => {
-    const isModal = CONFIRM_MODAL_ACTIONS.includes(
-      (event.target as HTMLElement)?.attributes?.getNamedItem("data-id")?.value
-    );
-
-    if (isModal) {
-      return;
-    }
-
-    setIsDatePopoverVisible(false);
-    clearEditState();
-  });
-
-  const popoverId = useId()!;
-
-  const handleOnEdit = (next: Partial<ProductSetRecurrence>, index) => {
-    clearEditState();
-
-    // Hotfix for an issue with Popover close & open actions
-    setTimeout(() => {
-      setEditState({ index, values: next });
-      setIsDatePopoverVisible(() => true);
-    }, 100);
-  };
-
-  const { t } = useTranslation("Design");
-
-  // in this method we should fulfill the form with a proper data
-  const handleRecurringDateChange = async (
-    next: RecurringDatePickerInputValues
-  ) => {
-    const isAvailableTimesFormValid =
-      await availableTimesFormRef.current?.trigger();
-
-    if (next?.startTime && next?.endTime && isAvailableTimesFormValid) {
-      const startTime = DateTime.fromISO(next.startTime);
-      const endTime = DateTime.fromISO(next.endTime);
-      const { availableTimes } = availableTimesFormRef.current.getValues();
-      const validAvalilableTimes = availableTimes.every((time) => {
-        const currentAvailableTime = DateTime.fromFormat(time, TIME_FORMAT);
-
-        return (
-          currentAvailableTime.diff(startTime, "minutes").minutes >= 0 &&
-          currentAvailableTime.diff(endTime, "minutes").minutes <= 0
-        );
-      });
-      if (!validAvalilableTimes) {
-        availableTimesFormRef.current.setError("availableTimes", {
-          message: t("Validation:fieldTimeBetween", {
-            attribute: t("Design:startTimesSmall"),
-            min: startTime.toFormat(TIME_FORMAT),
-            max: endTime.toFormat(TIME_FORMAT),
-          }),
-        });
-
-        return;
-      }
-    }
-    const start = getDateTimeObject(next.startDate, next.endTime || "23:59:59");
-
-    const rrule = RRule.optionsToString({
-      until: (start as DateTime).toJSDate(),
-      byweekday: [],
-      freq: Frequency.DAILY,
-      tzid: TIMEZONE,
-      interval: 1,
-    }).replace("RRULE:", "");
-
-    const availableTime =
-      availableTimesFormRef?.current?.getValues()?.availableTimes || null;
-    const values = {
-      rrule,
-      startDate: next.startDate,
-      endDate: next.startDate,
-      startTime: next.startTime,
-      endTime: next.endTime,
-      availableTimes: availableTime,
-    } as Partial<ProductSetRecurrence>;
-
-    if (editState.values?.id) {
-      values.id = editState.values?.id;
-    }
-
-    if (editState.index !== null) {
-      update(editState.index, values);
-    } else {
-      append(values);
-    }
-
-    setIsDatePopoverVisible(() => false);
-    clearEditState();
-  };
-
-  const handleOnAdd = () => {
-    if (fields.length >= 1) return;
-    clearEditState();
-    setIsDatePopoverVisible((prevValue) => !prevValue);
-  };
-
-  const handleDelete = () => {
-    const removeIndex = editState.index;
-
-    setIsDatePopoverVisible(false);
-    clearEditState();
-
-    setTimeout(() => {
-      const { menuRecurrences = [] } = getValues();
-
-      // @TODO looks like workaround
-      // Need recheck other places with remove method.
-      // or update react-hook-form version.
-      // Remove method from useFormFieldArray throw
-      // errors while try to remove element by index.
-      // So we remove them manually
-      setValue(
-        "menuRecurrences",
-        menuRecurrences.filter(
-          (_currentMenuRecurrence, index) => index !== removeIndex
-        )
-      );
-    }, 100);
-  };
-
-  return (
-    <Form.Group>
-      <Form.Label>
-        {t(
-          isEventEditProductSet
-            ? "whenOverridesAvailable"
-            : "productSetAvailable"
-        )}
-      </Form.Label>
-
-      <OverlayTrigger
-        show={isDatePopoverVisible}
-        overlay={
-          <Popover id={popoverId} className="rounded">
-            <Popover.Content className="shadow-lg rounded" ref={popoverRef}>
-              <DatePickerInput
-                defaultValues={editState.values}
-                onChange={handleRecurringDateChange}
-                onDelete={handleDelete}
-              >
-                {providerHasBookingManagement && (
-                  <AvailableTimesControl
-                    workHours={workHours}
-                    isLoading={isLoading}
-                    ref={availableTimesFormRef}
-                    defaultValues={[]}
-                    errorMessage={
-                      errors?.menuRecurrences?.[`${editState?.index}`]
-                        ?.availableTimes?.message
-                    }
-                    clearErrorMessage={() =>
-                      clearErrors(
-                        `menuRecurrences.${editState?.index}.availableTimes`
-                      )
-                    }
-                  />
-                )}
-              </DatePickerInput>
-            </Popover.Content>
-          </Popover>
-        }
-        trigger="click"
-        placement="bottom"
-        popperConfig={{ modifiers: [sameWidthPopperModifier] }}
-      >
-        <div className="product-set-recurrences">
-          {fields.map((menuRecurrence, index) => (
-            <ProductSetRecurrenceOverridesControl
-              key={menuRecurrence._id}
-              menuRecurrence={menuRecurrence}
-              onEdit={() => handleOnEdit(menuRecurrence, index)}
-              errorMessage={
-                errors?.menuRecurrences?.[`${index}`]?.availableTimes?.message
-              }
-            />
-          ))}
-          <div
-            className="product-set-recurrence-icon-wrapper"
-            role="button"
-            tabIndex={0}
-            onClick={handleOnAdd}
-            onKeyDown={handleOnAdd}
-          >
-            <Icon
-              type="plus-circle"
-              height="1rem"
-              className="product-set-recurrence-icon-add mr-2"
-            />
-            {t("addDates")}
-          </div>
-
-          <Form.Control
-            type="hidden"
-            {...register("menuRecurrences", {
-              required: {
-                value: true,
-                message: t("Validation:fieldMinNumber", {
-                  attribute: t("dates"),
-                  min: 1,
-                }),
-              },
-            })}
-          />
-
-          <div className="manual-form-error">
-            {errors.menuRecurrences?.message}
-          </div>
-        </div>
-      </OverlayTrigger>
-    </Form.Group>
-  );
-};
-
-export const sameWidthPopperModifier: Modifier<
-  "sameWidth",
-  Record<string, unknown>
-> = {
-  name: "sameWidth",
-  enabled: true,
-  phase: "beforeWrite",
-  requires: ["computeStyles"],
-  fn({ state }) {
-    const style = {
-      width: `${state.rects.reference.width + 4}px`,
-      marginLeft: "-2px",
-      maxWidth: "unset",
-    };
-    Object.assign(state.styles.popper, style);
-  },
-  effect({ state }) {
-    const { width } = state.elements.reference.getBoundingClientRect();
-    const style = {
-      width: `${width}px`,
-      maxWidth: "unset",
-    };
-    Object.assign(state.elements.popper.style, style);
-  },
-};

package/src/product-set/control/ProductSetRecurrenceOverridesControl.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { useIntl } from "react-intl";
-import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
-
-import { Icon } from "../../static";
-
-export interface ProductSetRecurrenceControlProps {
-  menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
-  onEdit?: (onEdit: Partial<ProductSetRecurrence>) => void;
-  errorMessage?: string;
-}
-
-export const ProductSetRecurrenceOverridesControl = ({
-  menuRecurrence,
-  onEdit,
-  errorMessage,
-}: ProductSetRecurrenceControlProps) => {
-  const { formatDate } = useIntl();
-
-  return (
-    <div className="sortable-tree-root flex-column" role="button" tabIndex={0}>
-      <div
-        key={menuRecurrence.rrule}
-        className="product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
-      >
-        <span className="d-flex flex-row align-items-center">
-          <Icon
-            type="calendar"
-            height="1rem"
-            className="product-set-recurrence-icon-calendar"
-          />
-          <span className="product-set-recurrence-title d-flex flex-grow-1">
-            {formatDate(menuRecurrence.startDate, {
-              dateStyle: "medium",
-            })}{" "}
-          </span>
-
-          <div
-            className="d-inline-flex"
-            role="button"
-            tabIndex={0}
-            onClick={() => onEdit(menuRecurrence)}
-            onKeyDown={() => onEdit(menuRecurrence)}
-          >
-            <Icon
-              type="ellipsis-h"
-              height="1rem"
-              className="product-set-recurrence-icon-more"
-            />
-          </div>
-        </span>
-        <span className="product-set-recurrence-description">
-          {formatDate(menuRecurrence.startDate, {
-            dateStyle: "medium",
-          })}{" "}
-        </span>
-      </div>
-      <div className={`manual-form-error ${!errorMessage && "d-none"}`}>
-        {errorMessage}
-      </div>
-    </div>
-  );
-};

package/src/recurring-date-picker-input/DatePickerInput.tsx

@@ -1,93 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { Frequency } from "rrule";
-import { useTranslation } from "react-i18next";
-import Button from "react-bootstrap/Button";
-import { DateTime } from "luxon";
-import { TIME_FULL_FORMAT } from "@licklist/core/dist/Config/Date";
-import { FormProvider, useForm } from "react-hook-form";
-import { Form } from "react-bootstrap";
-import { ConfirmModal } from "../modals";
-import { DeleteFieldButton } from "../product-set/elements";
-import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
-import RecurrenceAndFrequencyInput from "./RecurrenceAndFrequencyInput";
-
-export interface RecurringDatePickerInputProps {
-  disabled?: boolean;
-  defaultValues?: Partial<RecurringDatePickerInputValues>;
-  onChange: (state: RecurringDatePickerInputValues) => void;
-  onDelete: () => void;
-  initialFrequency?: Frequency;
-  setInitialStartDateAfterSelect?: boolean;
-  minDate?: string;
-}
-
-export interface DatePickerInputValues {
-  startDate: string;
-  startTime: string;
-  endTime: string;
-}
-
-export function DatePickerInput({
-  disabled = false,
-  onChange,
-  onDelete,
-  defaultValues,
-  children,
-  minDate,
-}: PropsWithChildren<RecurringDatePickerInputProps>) {
-  const { t } = useTranslation(["Design"]);
-
-  const form = useForm<DatePickerInputValues>({
-    defaultValues: {
-      startDate: defaultValues?.startDate ?? "",
-      startTime: defaultValues?.startTime ?? "",
-      endTime: defaultValues?.endTime ?? "",
-    },
-    mode: "onChange",
-  });
-
-  const { handleSubmit } = form;
-
-  const onSubmit = (nextState: RecurringDatePickerInputValues) => {
-    const endTimeNextState = nextState?.endTime
-      ? DateTime.fromISO(nextState?.endTime).toFormat(TIME_FULL_FORMAT)
-      : "";
-
-    onChange({
-      ...nextState,
-      endTime: endTimeNextState,
-    });
-  };
-
-  return (
-    <FormProvider {...form}>
-      <Form
-        noValidate
-        onSubmit={(event) => {
-          // prevents parent form submitting
-          event.preventDefault();
-          event.stopPropagation();
-          return handleSubmit(onSubmit)(event);
-        }}
-      >
-        <RecurrenceAndFrequencyInput disabled={disabled} minDate={minDate} />
-
-        {children}
-
-        <div className="d-inline-flex align-items-center w-100">
-          <Button type="submit">{t("Design:apply")}</Button>
-
-          {defaultValues && (
-            <div className="d-flex justify-content-end delete-btn">
-              <ConfirmModal>
-                {(confirm) => (
-                  <DeleteFieldButton onDelete={() => confirm(onDelete)} />
-                )}
-              </ConfirmModal>
-            </div>
-          )}
-        </div>
-      </Form>
-    </FormProvider>
-  );
-}

package/src/recurring-date-picker-input/RecurrenceAndFrequencyInput.tsx

@@ -1,136 +0,0 @@
-import React, { useEffect } from "react";
-import { DateTime } from "luxon";
-import { Col, Form, Row } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { RegisterOptions, useFormContext } from "react-hook-form";
-import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
-
-interface RecurrenceIntervalAndFrequencyInputProps {
-  disabled?: boolean;
-  minDate?: string;
-  startDateLabel?: string;
-  startTimeLabel?: string;
-  endDateLabel?: string;
-  endTimeLabel?: string;
-  startTimeRules?: Pick<
-    RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
-  endTimeRules?: Pick<
-    RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
-}
-
-function RecurrenceAndFrequencyInput({
-  disabled = false,
-  minDate,
-  startDateLabel,
-  startTimeLabel,
-  endTimeLabel,
-  startTimeRules,
-  endTimeRules,
-}: RecurrenceIntervalAndFrequencyInputProps) {
-  const { t } = useTranslation(["Design", "Notification", "App"]);
-
-  const {
-    getValues,
-    formState: { errors },
-    register,
-    trigger,
-  } = useFormContext<RecurringDatePickerInputValues>();
-
-  const startDate = getValues("startDate");
-  const startTime = getValues("startTime");
-  const endTime = getValues("endTime");
-
-  useEffect(() => {
-    if (!startTime || !endTime) {
-      return;
-    }
-    trigger("endTime");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [startTime]);
-
-  return (
-    <>
-      <Row>
-        <Col xs={12} sm={6}>
-          <Form.Group>
-            <Form.Label>{startDateLabel ?? t("Design:date")}</Form.Label>
-            <Form.Control
-              type="date"
-              {...register("startDate", { required: true })}
-              defaultValue={startDate}
-              className={startDate && "date-input-with-value"}
-              disabled={disabled}
-              min={minDate}
-              isInvalid={Boolean(errors.startDate)}
-            />
-            <Form.Control.Feedback type="invalid">
-              {errors.startDate?.message}
-            </Form.Control.Feedback>
-          </Form.Group>
-        </Col>
-      </Row>
-
-      <Row>
-        <Col xs={12} sm={6}>
-          <Form.Group>
-            <Form.Label>
-              {startTimeLabel ?? t("Design:availableFrom")}
-            </Form.Label>
-            <Form.Control
-              type="time"
-              {...register("startTime", { required: false, ...startTimeRules })}
-              placeholder="hh:mm"
-              defaultValue={startTime}
-              disabled={disabled}
-              isInvalid={Boolean(errors.startTime)}
-            />
-            <Form.Control.Feedback type="invalid">
-              {errors.startTime?.message}
-            </Form.Control.Feedback>
-          </Form.Group>
-        </Col>
-
-        <Col xs={12} sm={6}>
-          <Form.Group>
-            <Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
-            <Form.Control
-              type="time"
-              {...register("endTime", {
-                required: false,
-                validate: (time) => {
-                  if (!startTime || !time) {
-                    return true;
-                  }
-                  const currentStartTime = DateTime.fromISO(startTime);
-                  const currentEndTime = DateTime.fromISO(time);
-
-                  return currentEndTime?.diff(currentStartTime, ["minutes"])
-                    ?.minutes >= 0
-                    ? true
-                    : `${t(`Validation:fieldLaterDate`, {
-                        attribute: t("Design:endTimeSmall"),
-                        min: t("Design:startTimeSmall"),
-                      })}`;
-                },
-                ...endTimeRules,
-              })}
-              placeholder="hh:mm"
-              defaultValue={endTime}
-              disabled={disabled}
-              isInvalid={Boolean(errors.endTime)}
-            />
-            <Form.Control.Feedback type="invalid">
-              {errors.endTime?.message}
-            </Form.Control.Feedback>
-          </Form.Group>
-        </Col>
-      </Row>
-    </>
-  );
-}
-
-export default RecurrenceAndFrequencyInput;