@licklist/design 0.58.9 → 0.58.11-dev.0

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
-import Form from "react-bootstrap/Form";
 
 import Button from "react-bootstrap/Button";
 import { useHistory } from "react-router-dom";
@@ -14,6 +13,7 @@ import {
   AttemptPaymentResponse,
 } from "@licklist/plugins/dist/hooks/Ryft/useRyftPayment";
 import { BlockLoader, ButtonLoader } from "../../static";
+import { injectComponentsInRyftForm } from "./utils/ryft-form";
 
 export const ryftErrorMap: Record<string, string> = {
   insufficient_funds: "insufficientFunds",
@@ -50,6 +50,7 @@ export const RyftPaymentForm = ({
   onSubmit,
 }: RyftPaymentFormProps) => {
   const { t } = useTranslation(["Design", "Validation", "Ryft"]);
+  const formRef = useRef<HTMLFormElement | null>(null);
   const history = useHistory();
 
   const [isValid, setIsValid] = useState(false);
@@ -117,6 +118,12 @@ export const RyftPaymentForm = ({
     }
   };
 
+  useEffect(
+    () => injectComponentsInRyftForm({ t }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [formRef.current?.childNodes?.length]
+  );
+
   useEffect(() => {
     if (!accountId.data || accountId.isError) return;
 
@@ -175,15 +182,14 @@ export const RyftPaymentForm = ({
 
   return (
     <>
-      <Form.Label>{t("Design:paymentDetails")}</Form.Label>
-      {/* For unknown reasons ryft doesn't work with bootstrap form */}
       <form
+        ref={formRef}
         id="ryft-pay-form"
         noValidate
         onSubmit={methods.handleSubmit(handleSubmit)}
         className="ryft-payment-form"
       >
-        <div className="submit-button-wrapper mt-3 p-1">
+        <div className="submit-button-wrapper mt-4 p-1">
           <Button type="submit" disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
             {t("Design:buyNow")}

package/src/iframe/ryft/utils/ryft-form.ts

@@ -0,0 +1,47 @@
+import { TFunction } from "react-i18next";
+
+export const injectComponentsInRyftForm = ({
+  t,
+}: {
+  t: TFunction<string[]>;
+}) => {
+  const cardContainer = document.getElementById("ryft-pay-iframe");
+  const oldCardDividerContainer = document.getElementById(
+    "card-title-container"
+  );
+
+  if (!cardContainer || oldCardDividerContainer) {
+    return;
+  }
+
+  const cardTitle = document.createElement("div");
+  const cardText = document.createElement("div");
+  const cardTitleContainer = document.createElement("div");
+  cardTitleContainer.id = "card-title-container";
+  cardTitle.textContent = t("Design:enterCardDetails");
+  cardText.className = "bold-text form-label";
+  cardText.innerText = t("Design:paymentDetails");
+  cardTitleContainer.append(cardTitle, cardText);
+  cardContainer?.before(cardTitleContainer);
+
+  const payGrid = document.getElementById("ryft-pay-grid");
+
+  if (!payGrid) {
+    return;
+  }
+
+  // Adding title and divider for apple and google pay button
+  const mobilePayTitle = document.createElement("div");
+  const dividerText = document.createElement("div");
+  const divider = document.createElement("div");
+  const container = document.createElement("div");
+  mobilePayTitle.className = "mobile-pay-title";
+  mobilePayTitle.innerText = t("Design:expressCheckoutWith");
+  dividerText.id = "mobile-pay-divider-text";
+  dividerText.innerText = "or";
+  divider.id = "mobile-pay-divider";
+  container.id = "mobile-pay-divider-container";
+  container.append(dividerText, divider);
+  payGrid.before(mobilePayTitle);
+  payGrid.after(container);
+};

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,16 @@ 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>
+            {!!override && (
+              <div className="h6 bold ml-1">
+                {`${override} ${t(override > 1 ? "overrides" : "override")}`}
+              </div>
+            )}
+          </div>
         </div>
         <div className="d-flex">
           <div className="product-set-card-menu-eye-container">

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

@@ -90,7 +90,7 @@ export const DateAndRecurrenceInput = ({
     clearEditState();
   });
 
-  const popoverId = useId()!;
+  const popoverId = useId();
 
   const { t } = useTranslation("Design");
 
@@ -228,6 +228,7 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
+                workHours={workHours}
               >
                 {providerHasBookingManagement && (
                   <AvailableTimesControl

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

@@ -0,0 +1,316 @@
+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";
+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>
+  );
+};