@licklist/design 0.58.5 → 0.58.6-dev.1

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

@@ -29,6 +29,7 @@ interface IframeEventCardProps {
   titleId?: string;
   descriptionId?: string;
   imageClassName?: string;
+  showMoreInfo?: boolean;
 }
 
 export function IframeEventCard({
@@ -46,6 +47,7 @@ export function IframeEventCard({
   titleId,
   descriptionId,
   imageClassName,
+  showMoreInfo,
 }: IframeEventCardProps) {
   const { formatNumber } = useIntl();
   const { t } = useTranslation("Design");
@@ -70,6 +72,7 @@ export function IframeEventCard({
       )}
       onClick={goToDetails ? onClick : undefined}
     >
+      {showMoreInfo && <div className="iframe-event-card__info-icon">i</div>}
       {imageSrc && (
         <Card.Img
           className={imageClassName ?? "card-image"}
@@ -91,12 +94,8 @@ export function IframeEventCard({
               <div className="icon-wrapper">
                 <CalendarSvg />
               </div>
-              <p className="iframe-event-card__bold m-0 list-view-hided">
-                {date}
-              </p>
-              <p className="iframe-event-card__bold m-0 grid-view-hided">
-                {shortDate}
-              </p>
+              <p className="m-0 list-view-hided">{date}</p>
+              <p className="m-0 grid-view-hided">{shortDate}</p>
             </div>
           </Card.Text>
 
@@ -106,7 +105,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <ClockSvg />
                 </div>
-                <p className="iframe-event-card__bold m-0">{type}</p>
+                <p className="m-0">{type}</p>
               </div>
             </Card.Text>
           )}
@@ -117,7 +116,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <TicketSvg />
                 </div>
-                <p className="iframe-event-card__bold m-0">
+                <p className="m-0">
                   {t("from")}{" "}
                   {formatNumber(cost, { style: "currency", currency: "GBP" })}
                 </p>

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

@@ -90,7 +90,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           type="number"
           onChange={(e) => handleChangeValue(Number(e.target.value))}
           value={value}
-          min={min}
+          min={0}
           max={max}
           defaultValue={defaultValue}
           placeholder={placeholder}

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -28,7 +28,9 @@ export const LeftBlock = ({
         {pageTitle && (
           <>
             {typeof pageTitle === "string" ? (
-              <div className="title">{pageTitle}</div>
+              <div className="title" id="navigation-title">
+                {pageTitle}
+              </div>
             ) : (
               pageTitle
             )}

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -63,7 +63,7 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail);
 
   const totalDiscount = calculateTotalDiscount(order.payments);
-  const totalWithDiscount = total - Number(totalDiscount);
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,
@@ -74,7 +74,7 @@ const processedPaymentSummary = ({
   if (totalDiscount) {
     summaryItems.push({
       translateKey: AMOUNT_WITH_DISCOUNT,
-      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
+      price: order.totalToPayAmount,
     });
   }
 
@@ -84,17 +84,17 @@ const processedPaymentSummary = ({
 
   summaryItems.push({
     translateKey: TOTAL_PAID,
-    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
+    price: order.paidAmount,
   });
-  if (totalWithDiscount <= 0) {
+  if (order.totalToPayAmount <= 0) {
     return summaryItems;
   }
   summaryItems = [...summaryItems, ...externalPaymentDetail];
 
-  if (totalWithDiscount > order.totalAmount) {
+  if (order.remainingToPay) {
     summaryItems.push({
       translateKey: REMAINING_TO_PAY,
-      price: totalWithDiscount - order.totalAmount,
+      price: order.remainingToPay,
     });
   }
   return summaryItems;

package/src/product-set/card/ProductSetCard.tsx

@@ -18,6 +18,7 @@ export interface ProductSetCardProps extends HasPermissionProp {
   onCopy: () => void;
   onRemove: () => void;
   className?: string;
+  override?: number;
 }
 
 export function ProductSetCard({
@@ -28,6 +29,7 @@ export function ProductSetCard({
   onRemove,
   className = "",
   hasPermission = true,
+  override = 0,
 }: ProductSetCardProps) {
   const { t } = useTranslation("Design");
   const popoverId = useId();
@@ -44,7 +46,14 @@ export function ProductSetCard({
     >
       <div className={productSetCardClasses}>
         <div className="product-set-card-link">
-          {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
+          <div className="d-flex flex-column">
+            <div>
+              {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
+            </div>
+            <div className="h6 bold ml-1">
+              {!!override && t("overridesAmount", { amount: override })}
+            </div>
+          </div>
         </div>
         <div className="d-flex">
           <div className="product-set-card-menu-eye-container">

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

@@ -0,0 +1,309 @@
+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 } 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 rrule = RRule.optionsToString({
+      dtstart: DateTime.fromISO(next.startDate).toJSDate(),
+      until: DateTime.fromISO(next.startDate).toJSDate(),
+      byweekday: [],
+      freq: Frequency.DAILY,
+      tzid: TIMEZONE,
+    }).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/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>
+  );
+};