@licklist/design 0.58.8 → 0.58.10

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

@@ -0,0 +1,318 @@
+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 } from "@licklist/core/dist/Config/Date";
+import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
+import { TIME_FORMAT } from "@licklist/core/dist/Config/Date";
+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";
+import { MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE } from "../product/constants";
+
+
+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
+              }
+            />
+          ))}
+          {fields.length < MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE && (
+            <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/ProductSetControl.tsx

@@ -34,6 +34,7 @@ import TutorialGifCard from "./TutorialGifCard";
 import { Step } from "../types";
 import { StepsControl } from "../form/StepsControl";
 import { Typeahead } from "../../typeahead";
+import { DateInput } from "./DateInput";
 
 const OPERATIONAL_COST_TITLES = {
   [OPERATIONAL_COST_PROVIDER]: "operationalCostProvider",
@@ -86,6 +87,7 @@ export interface ProductSetControlProps {
   showSmsTemplate?: boolean;
   workHours?: WorkHour[];
   providerHasBookingManagement?: boolean;
+  isOverrides?: boolean;
 }
 
 export function ProductSetControl({
@@ -101,6 +103,7 @@ export function ProductSetControl({
   showSmsTemplate,
   workHours,
   providerHasBookingManagement = false,
+  isOverrides = false,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -118,6 +121,9 @@ export function ProductSetControl({
   const termsAndConditionsId = useId();
   const relyOnPeopleTypeId = useId();
 
+  const showSmsTemplateSelector = showSmsTemplate && !isOverrides;
+  const showEmailTemplateSelector = showEmailTemplate && !isOverrides;
+
   return (
     <Row
       className={`product-set-form ${
@@ -159,20 +165,30 @@ export function ProductSetControl({
           </Form.Control.Feedback>
         </Form.Group>
 
-        {isCreateAction && (
-          <DateAndRecurrenceInput
-            isEventEditProductSet={isEventEditProductSet}
+        {isOverrides ? (
+          <DateInput
             workHours={workHours}
             isLoading={isLoading}
             providerHasBookingManagement={providerHasBookingManagement}
           />
+        ) : (
+          <>
+            {isCreateAction && (
+              <DateAndRecurrenceInput
+                isEventEditProductSet={isEventEditProductSet}
+                workHours={workHours}
+                isLoading={isLoading}
+                providerHasBookingManagement={providerHasBookingManagement}
+              />
+            )}
+          </>
         )}
 
         <div className="divider" />
 
-        <TutorialGifCard />
+        <TutorialGifCard isOverrides={isOverrides} />
 
-        <StepsControl isLoading={isLoading} />
+        <StepsControl isLoading={isLoading} isOverrides={isOverrides} />
       </Col>
       <Col md={6} sm={12}>
         <div className="second-column">
@@ -212,6 +228,7 @@ export function ProductSetControl({
               {...register("operationalCost", { required: true })}
               as="select"
               defaultValue={OPERATIONAL_COST_PROVIDER}
+              disabled={isOverrides}
               isInvalid={HookFormService.isInvalid("operationalCost", errors)}
             >
               {Object.keys(OPERATIONAL_COST_TYPES).map((operationalCost) => (
@@ -241,6 +258,7 @@ export function ProductSetControl({
               {...register("relyOnPeopleType")}
               as="select"
               defaultValue={null}
+              disabled={isOverrides}
               isInvalid={HookFormService.isInvalid("relyOnPeopleType", errors)}
             >
               <option value="">{t("notRequired")} </option>
@@ -268,7 +286,7 @@ export function ProductSetControl({
               {...register("termsAndConditions")}
               as="textarea"
               rows={2}
-              disabled={isLoading}
+              disabled={isLoading || isOverrides}
               isInvalid={HookFormService.isInvalid(
                 "termsAndConditions",
                 errors
@@ -283,30 +301,32 @@ export function ProductSetControl({
             <Form.Label className="mt-4">
               {t("Design:emailTemplate")}
             </Form.Label>
-            {showEmailTemplate ? (
-              <Typeahead
-                name="emailTemplates"
-                options={emailTemplates}
-                isMultipleChoise
-                placeholder={t("Design:choose")}
-                noOptionsMessage={t("Design:noActiveTemplates", {
-                  notification: t("Design:email"),
-                })}
-              />
-            ) : (
-              <WarningMessage
-                message={t("Design:noActiveTemplates", {
-                  notification: t("Design:email"),
-                })}
-              />
-            )}
+            <>
+              {showEmailTemplateSelector ? (
+                <Typeahead
+                  name="emailTemplates"
+                  options={emailTemplates}
+                  isMultipleChoise
+                  placeholder={t("Design:choose")}
+                  noOptionsMessage={t("Design:noActiveTemplates", {
+                    notification: t("Design:email"),
+                  })}
+                />
+              ) : (
+                <WarningMessage
+                  message={t("Design:noActiveTemplates", {
+                    notification: t("Design:email"),
+                  })}
+                />
+              )}
+            </>
 
             <Form.Label
               className={clsx(emailTemplates.length > 0 ? "mt-4" : "mt-1")}
             >
               {t("Design:smsTemplate")}
             </Form.Label>
-            {showSmsTemplate ? (
+            {showSmsTemplateSelector ? (
               <Typeahead
                 name="smsTemplates"
                 options={smsTemplates}
@@ -339,6 +359,7 @@ export function ProductSetControl({
                       onChange={field.onChange}
                       value={fieldValue}
                       as="select"
+                      disabled={isOverrides}
                       isInvalid={HookFormService.isInvalid(
                         "fieldSetId",
                         errors
@@ -375,6 +396,7 @@ export function ProductSetControl({
                   }) as string;
                 },
               })}
+              disabled={isOverrides}
               isInvalid={HookFormService.isInvalid("thankYouPageUrl", errors)}
             />
 

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

@@ -0,0 +1,63 @@
+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/product-set/control/TutorialGifCard.tsx

@@ -9,10 +9,14 @@ import { Icon, Image } from "../../static";
 
 export interface TutorialGifCardProps {
   tutorialAsset?: string;
+  isOverrides?: boolean;
 }
 
 // @TODO: Tutorial GIF asset should be passed as context, which is better
-const TutorialGifCard = ({ tutorialAsset }: TutorialGifCardProps) => {
+const TutorialGifCard = ({
+  tutorialAsset,
+  isOverrides,
+}: TutorialGifCardProps) => {
   const { pathname } = useLocation();
   const [isVisible, setIsVisible] = useState(pathname?.includes("/create"));
   const { t } = useTranslation(["Design"]);
@@ -46,8 +50,12 @@ const TutorialGifCard = ({ tutorialAsset }: TutorialGifCardProps) => {
           </button>
         </Card.Header>
         <Card.Body className="tutorial-card-body">
-          <p>{t("buildProductSet")}</p>
-          <span>{t("buildProductSetDesc")}</span>
+          <p>
+            {t(isOverrides ? "buildOverrideProductSet" : "buildProductSet")}
+          </p>
+          <span>
+            {t(isOverrides ? "buildOverrideRules" : "buildProductSetDesc")}
+          </span>
           {tutorialAsset && <Image src={tutorialAsset} alt="Tutorial Gif" />}
         </Card.Body>
       </Card>

package/src/product-set/form/ProductCategoriesControl.tsx

@@ -35,6 +35,7 @@ import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number;
+  isOverrides?: boolean;
 }
 
 const getCategoryDefaultValue = (
@@ -65,6 +66,7 @@ const getCategoryDefaultValue = (
 export function ProductCategoriesControl({
   isLoading,
   stepIndex,
+  isOverrides,
 }: ProductCategoriesControlProps) {
   const { t } = useTranslation("Design");
   const {
@@ -105,6 +107,7 @@ export function ProductCategoriesControl({
   const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
     fieldName: productCategoriesFieldName,
     remove,
+    isOverrides,
   });
 
   const productCategories: ProductCategory[] = useWatch({
@@ -129,7 +132,7 @@ export function ProductCategoriesControl({
   });
 
   const handleDragEnd = (event) => {
-    // @TODO uncomment when will be fix for change sort index
+    if (isOverrides) return;
     const { active, over } = event;
 
     if (!active || !over || !active?.id || !over?.id) return;
@@ -266,8 +269,10 @@ export function ProductCategoriesControl({
                       categoryName={value}
                       stepIndex={stepIndex}
                       productCategoryIndex={index}
+                      isOverride={isOverrides}
                     />
                   }
+                  isOverride={isOverrides}
                   onDelete={() => remove(index)}
                   validate={() =>
                     trigger(`steps.${stepIndex}.productCategories.${index}`)
@@ -290,6 +295,7 @@ export function ProductCategoriesControl({
                     zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
+                    isOverrides={isOverrides}
                   />
                 </SortableTree.Item>
               )}
@@ -299,7 +305,9 @@ export function ProductCategoriesControl({
       </SortableTree>
       <CreateProductSetItem
         title={t("addCategory")}
+        isOverride={isOverrides}
         onClick={() => {
+           if (isOverrides) return;
           setIsSelectCategoryVisible(true);
         }}
       />
@@ -308,6 +316,7 @@ export function ProductCategoriesControl({
         isVisible={isSelectCategoryVisible}
         onHide={() => setIsSelectCategoryVisible(false)}
         onCategorySelect={(categoryType) => {
+          if (isOverrides) return;
           append(getCategoryDefaultValue(categoryType, fields.length));
           setShowCategoryModal(true);
           if (
@@ -321,7 +330,9 @@ export function ProductCategoriesControl({
         <>
           <CreateProductSetItem
             title={t("editMap")}
+            isOverride={isOverrides}
             onClick={() => {
+              if (isOverrides) return;
               setIsVenueMapSetModalVisible(true);
             }}
             className={clsx(

package/src/product-set/form/ProductSetForm.tsx

@@ -34,6 +34,7 @@ export interface ProductSetFormValues
     WithId,
     ProductSetControlValues {
   steps: Step[];
+  isOverrides?: boolean;
 }
 
 export interface ProductSetFormProps
@@ -50,6 +51,7 @@ export interface ProductSetFormProps
   providerHasBookingManagement?: ProviderBookingManagementSetting["hasBookingManagement"];
   zones?: Zone[] | null;
   isCreateAction?: boolean;
+  isOverrides?: boolean;
   workHours?: WorkHour[];
 }
 
@@ -67,6 +69,7 @@ export function ProductSetForm({
   zones,
   isCreateAction,
   workHours,
+  isOverrides,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -84,6 +87,7 @@ export function ProductSetForm({
   });
 
   const { setError, reset } = form;
+
   const formValues = form.watch();
 
   const submitHandler = (onSubmit: (values: ProductSetFormValues) => void) => {
@@ -161,6 +165,7 @@ export function ProductSetForm({
                     companyName={companyName}
                     workHours={workHours}
                     providerHasBookingManagement={providerHasBookingManagement}
+                    isOverrides={isOverrides}
                   />
                   <Row>
                     <Col md={6} sm={12} />