@licklist/design 0.65.0 → 0.66.0-dev.0

package/src/recurring-date-picker-input/utils.ts

@@ -1,4 +1,9 @@
-import { DateTime } from "luxon";
+import { TIME_FORMAT, TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { fromFormat } from "@licklist/plugins/dist/utils/dateTime";
+import { DateTime, Interval } from "luxon";
+import { Validate } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import RRule, { Frequency, Weekday } from "rrule";
 
 export const getWeekdayForFrequency = ({
@@ -11,6 +16,7 @@ export const getWeekdayForFrequency = ({
   const parsedDate = DateTime.fromISO(date);
   return new Weekday(
     parsedDate.weekday - 1,
+    // eslint-disable-next-line no-nested-ternary
     frequency !== Frequency.MONTHLY
       ? undefined
       : parsedDate.day + 7 > parsedDate.daysInMonth
@@ -109,3 +115,86 @@ export const parseAndValidateRRule = ({
     until: options.until,
   } as ParsedRRuleOptions;
 };
+
+export const useWorkHoursValidation = (
+  byWeekDay: Weekday[] = [],
+  workHours: WorkHour[] | undefined
+): {
+  validate?: Validate<string>;
+} => {
+  const { t } = useTranslation("Validation");
+  if (!workHours) return {};
+
+  const fromTimeFormat = fromFormat(TIME_FORMAT);
+  const fromTimeFullFormat = fromFormat(TIME_FULL_FORMAT);
+
+  // map every day to array of intervals describing workhours for that day
+  let intervalsByDay = workHours.map((workhour, index, self) => {
+    const res: Interval[] = [];
+
+    const startTime = fromTimeFormat(workhour.start);
+    const endTime = fromTimeFormat(workhour.end);
+
+    if (endTime > startTime) {
+      res.push(Interval.fromDateTimes(startTime, endTime));
+    } else {
+      // if end is before start, then it means that end is on the next day
+      // so count only to the end of current day
+      res.push(Interval.fromDateTimes(startTime, startTime.endOf("day")));
+    }
+
+    const prevIndex = index === 0 ? self.length - 1 : index - 1;
+
+    const prevStartTime = fromTimeFormat(self[prevIndex].start);
+    const prevEndTime = fromTimeFormat(self[prevIndex].end);
+
+    // if prevStartTime > prevEndTime then it means that prevEndTime is on the current day
+    // so we need to add interval from start of current day to prevEndTime
+    if (prevStartTime > prevEndTime) {
+      res.push(Interval.fromDateTimes(prevEndTime.startOf("day"), prevEndTime));
+    }
+
+    return res;
+  });
+
+  // if length === 0 or length === 7 then all workhours are selected, no need to filter
+  if (![0, 7].includes(byWeekDay.length)) {
+    intervalsByDay = intervalsByDay.filter((_, index) =>
+      byWeekDay.find(({ weekday }) => weekday === index)
+    );
+  }
+
+  return {
+    validate: (_time: string) => {
+      // workaround for issue with form values
+      // default values and entered values have different formats
+      const time = fromTimeFormat(_time).isValid
+        ? fromTimeFormat(_time)
+        : fromTimeFullFormat(_time);
+
+      const notFittingIntervalsByDay = intervalsByDay.reduce<Interval[][]>(
+        (acc, intervalsByDay) => {
+          if (!intervalsByDay.some((interval) => interval.contains(time))) {
+            acc.push(intervalsByDay);
+          }
+          return acc;
+        },
+        []
+      );
+
+      const notFittingIntervals = notFittingIntervalsByDay
+        .flat()
+        .filter((interval) => !interval.contains(time));
+
+      const attribute = notFittingIntervals
+        .map((interval) => interval.toFormat("HH:mm"))
+        .join(", ");
+
+      if (notFittingIntervalsByDay.length !== 0) {
+        return t("outsideWorkingHours", { attribute }) as string;
+      }
+
+      return true;
+    },
+  };
+};

package/src/report/ReportRunnerModal/ReportRunnerModal.stories.tsx

@@ -0,0 +1,307 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { Card } from "react-bootstrap";
+import { ReportRunnerModal, ReportRunnerModalProps } from "./ReportRunnerModal";
+
+export default {
+  title: "Report/ReportRunnerModal",
+  component: ReportRunnerModal,
+} as Meta;
+
+export const Default: Story<ReportRunnerModalProps> = (args) => (
+  <Card style={{ maxWidth: "max-content" }}>
+    <Card.Body>
+      <ReportRunnerModal {...args} />
+    </Card.Body>
+  </Card>
+);
+
+Default.args = {
+  reportId: 47,
+  show: true,
+  generate: { isLoading: false },
+  download: { isLoading: false },
+  useShowReportFields: (type) => ({ data: [], isLoading: false }),
+  onHide: () => {},
+  onEdit: () => {},
+  reports: [
+    {
+      id: 47,
+      providerId: null,
+      type: "payments",
+      name: "Test 1",
+      createdAt: "2024-04-26 08:16:59",
+      updatedAt: "2024-04-26 08:16:59",
+      deletedAt: null,
+      reportFieldValues: [
+        {
+          id: 580,
+          reportId: 47,
+          reportFieldId: 16,
+        },
+        {
+          id: 581,
+          reportId: 47,
+          reportFieldId: 17,
+        },
+        {
+          id: 582,
+          reportId: 47,
+          reportFieldId: 18,
+        },
+        {
+          id: 583,
+          reportId: 47,
+          reportFieldId: 19,
+        },
+        {
+          id: 584,
+          reportId: 47,
+          reportFieldId: 20,
+        },
+        {
+          id: 585,
+          reportId: 47,
+          reportFieldId: 21,
+        },
+        {
+          id: 586,
+          reportId: 47,
+          reportFieldId: 22,
+        },
+        {
+          id: 587,
+          reportId: 47,
+          reportFieldId: 23,
+        },
+        {
+          id: 588,
+          reportId: 47,
+          reportFieldId: 24,
+        },
+        {
+          id: 589,
+          reportId: 47,
+          reportFieldId: 26,
+        },
+        {
+          id: 590,
+          reportId: 47,
+          reportFieldId: 27,
+        },
+        {
+          id: 591,
+          reportId: 47,
+          reportFieldId: 28,
+        },
+        {
+          id: 592,
+          reportId: 47,
+          reportFieldId: 40,
+        },
+        {
+          id: 593,
+          reportId: 47,
+          reportFieldId: 41,
+        },
+        {
+          id: 594,
+          reportId: 47,
+          reportFieldId: 42,
+        },
+      ],
+    },
+    {
+      id: 52,
+      providerId: null,
+      type: "bookings",
+      name: "new report",
+      createdAt: "2024-04-29 16:05:51",
+      updatedAt: "2024-04-29 16:08:39",
+      deletedAt: null,
+      reportFieldValues: [
+        {
+          id: 635,
+          reportId: 52,
+          reportFieldId: 1,
+        },
+        {
+          id: 636,
+          reportId: 52,
+          reportFieldId: 2,
+        },
+        {
+          id: 637,
+          reportId: 52,
+          reportFieldId: 3,
+        },
+        {
+          id: 638,
+          reportId: 52,
+          reportFieldId: 4,
+        },
+        {
+          id: 639,
+          reportId: 52,
+          reportFieldId: 5,
+        },
+        {
+          id: 640,
+          reportId: 52,
+          reportFieldId: 6,
+        },
+        {
+          id: 641,
+          reportId: 52,
+          reportFieldId: 7,
+        },
+        {
+          id: 642,
+          reportId: 52,
+          reportFieldId: 8,
+        },
+        {
+          id: 643,
+          reportId: 52,
+          reportFieldId: 9,
+        },
+        {
+          id: 644,
+          reportId: 52,
+          reportFieldId: 10,
+        },
+        {
+          id: 645,
+          reportId: 52,
+          reportFieldId: 11,
+        },
+        {
+          id: 646,
+          reportId: 52,
+          reportFieldId: 12,
+        },
+        {
+          id: 647,
+          reportId: 52,
+          reportFieldId: 13,
+        },
+        {
+          id: 648,
+          reportId: 52,
+          reportFieldId: 14,
+        },
+        {
+          id: 649,
+          reportId: 52,
+          reportFieldId: 15,
+        },
+        {
+          id: 650,
+          reportId: 52,
+          reportFieldId: 36,
+        },
+        {
+          id: 651,
+          reportId: 52,
+          reportFieldId: 37,
+        },
+        {
+          id: 652,
+          reportId: 52,
+          reportFieldId: 38,
+        },
+        {
+          id: 653,
+          reportId: 52,
+          reportFieldId: 39,
+        },
+        {
+          id: 654,
+          reportId: 52,
+          reportFieldId: 47,
+        },
+        {
+          id: 655,
+          reportId: 52,
+          reportFieldId: 48,
+        },
+      ],
+    },
+    {
+      id: 53,
+      providerId: null,
+      type: "tickets",
+      name: "tickets",
+      createdAt: "2024-04-29 16:12:36",
+      updatedAt: "2024-04-29 16:12:36",
+      deletedAt: null,
+      reportFieldValues: [
+        {
+          id: 656,
+          reportId: 53,
+          reportFieldId: 29,
+        },
+        {
+          id: 657,
+          reportId: 53,
+          reportFieldId: 30,
+        },
+        {
+          id: 658,
+          reportId: 53,
+          reportFieldId: 31,
+        },
+        {
+          id: 659,
+          reportId: 53,
+          reportFieldId: 32,
+        },
+        {
+          id: 660,
+          reportId: 53,
+          reportFieldId: 33,
+        },
+        {
+          id: 661,
+          reportId: 53,
+          reportFieldId: 34,
+        },
+        {
+          id: 662,
+          reportId: 53,
+          reportFieldId: 35,
+        },
+        {
+          id: 663,
+          reportId: 53,
+          reportFieldId: 43,
+        },
+        {
+          id: 664,
+          reportId: 53,
+          reportFieldId: 44,
+        },
+        {
+          id: 665,
+          reportId: 53,
+          reportFieldId: 45,
+        },
+        {
+          id: 666,
+          reportId: 53,
+          reportFieldId: 46,
+        },
+        {
+          id: 667,
+          reportId: 53,
+          reportFieldId: 51,
+        },
+        {
+          id: 668,
+          reportId: 53,
+          reportFieldId: 52,
+        },
+      ],
+    },
+  ],
+};

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -23,7 +23,7 @@ interface ReportField {
   title: string;
 }
 
-type ReportRunnerModalProps = {
+export type ReportRunnerModalProps = {
   reportId: Report["id"] | null;
   show: boolean;
   useShowReportFields: (
@@ -136,28 +136,38 @@ export const ReportRunnerModal = ({
           </Button>
 
           <form noValidate>
-            <div className="period-by">
-              {PERIOD_BY_TYPES.map((type) => (
-                <div key={type}>
-                  <Form.Group>
+            <div
+              className={`pl-1 ${
+                errors.periodBy?.message && "border-danger border rounded"
+              }`}
+            >
+              <div className="period-by">
+                {PERIOD_BY_TYPES.map((type) => (
+                  <div key={type}>
                     <Form.Check
                       inline
-                      isInvalid={!!errors.periodBy}
                       label={t(labelByPeriodType[type])}
                       type="radio"
                       id={type}
+                      required
                       value={type}
-                      {...register("periodBy")}
+                      {...register("periodBy", {
+                        required: `${t("Validation:fieldRequired", {
+                          attribute: t("Design:period"),
+                        })}`,
+                      })}
                     />
-                    <Form.Control.Feedback type="invalid">
-                      {errors.periodBy?.message}
-                    </Form.Control.Feedback>
-                  </Form.Group>
+                  </div>
+                ))}
+              </div>
+              {errors.periodBy?.message && (
+                <div className="iframe-event__message-error justify-content-start mb-1">
+                  {errors.periodBy?.message}
                 </div>
-              ))}
+              )}
             </div>
 
-            <div className="controls">
+            <div className="controls mt-4">
               <Form.Group controlId="from-input">
                 <Form.Label>{t("Design:from")}</Form.Label>
                 <Form.Control
@@ -168,7 +178,7 @@ export const ReportRunnerModal = ({
                     required: {
                       value: true,
                       message: `${t("Validation:fieldRequired", {
-                        attribute: t("Design:to"),
+                        attribute: t("Design:from"),
                       })}`,
                     },
                   })}

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/setting/admin/AdminSettingForm.tsx

@@ -11,7 +11,7 @@ import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { Link } from "react-router-dom";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { ProviderType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
+import { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
 import Icon from "../../static/Icon";
 import { PaymentFeeForm, PaymentFeeFormFieldValues } from "./PaymentFeeForm";
 import { Currency } from "../../types/currency";
@@ -33,7 +33,7 @@ export interface AdminSettingFormProps extends HasPermissionProp {
   providerMetadata: {
     country?: string;
     providableId?: number;
-    providerType?: ProviderType;
+    providerType?: ProvidableType;
   };
 }
 

package/src/sortable-tree/SortableTreeItem.tsx

@@ -53,7 +53,6 @@ export interface SortableTreeItemProps {
   };
   setIsExpanded?: () => void;
   isOverride?: boolean;
-  isProduct?: boolean;
 }
 
 export function SortableTreeItem({
@@ -81,7 +80,6 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
-  isProduct = false,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded);
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded);
@@ -152,7 +150,6 @@ export function SortableTreeItem({
   };
 
   const onEdit = (e) => {
-    if (isOverride && !isProduct) return;
     e.stopPropagation();
     if (edit && !isModalVisible) edit();
     setIsModalVisible(true);

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/date-time-button/DateTimeButton.scss

@@ -81,6 +81,7 @@
     min-width: 5.3rem;
     max-width: 5.3rem;
     min-height: 2.75rem;
+    border: 2px solid $snippet-calendar-disabled-button-border-color;
   }
 
   &.calendar-view {

package/src/styles/iframe-page/PageBody.scss

@@ -65,7 +65,6 @@
       }
 
       @include media-breakpoint-down(sm) {
-        height: 100%;
         max-height: calc(100svh - 30rem);
       }
 

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -135,6 +135,14 @@
       margin-bottom: 0.5rem;
     }
   }
+  .ryft-pay-grid {
+    display: flex;
+    flex-direction: column;
+    .apple-pay-button {
+      height: 2.5rem;
+      margin-top: 1rem;
+    }
+  }
   .mobile-pay-title {
     display: block;
     font-weight: 600;

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);

package/src/styles/zones/ZoneForm.scss

@@ -1,4 +1,5 @@
 .zone-available-times {
+  overscroll-behavior: contain;
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
@@ -7,4 +8,4 @@
   justify-content: start;
   width: 95%;
   overflow: scroll;
-}
+}

package/src/zone/form/ZoneForm.tsx

@@ -13,7 +13,7 @@ export type ZoneFormProps = {
   onSubmit: (values: Partial<Zone>) => void;
   serverErrors?: ServerError;
   isLoading?: boolean;
-  workHours?: WorkHour[];
+  workHours: WorkHour[] | undefined;
 };
 
 export type ZoneFormValues = Partial<Zone> & {
@@ -25,6 +25,7 @@ export const ZoneForm = ({
   onSubmit,
   serverErrors,
   isLoading = false,
+  workHours,
 }: ZoneFormProps) => {
   const { t } = useTranslation("Design");
   const form = useForm<ZoneFormValues>({
@@ -54,7 +55,7 @@ export const ZoneForm = ({
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <ZoneControl isLoading={isLoading} />
+        <ZoneControl isLoading={isLoading} workHours={workHours} />
         <Row>
           <Col md={6} sm={12} />
           <Col

package/src/zone/form/components/ZoneControl.tsx

@@ -11,15 +11,15 @@ import { GameDurationControl } from "./GameDurationControl";
 
 export type ZoneControlProps = {
   isLoading: boolean;
-  workHours?: WorkHour[];
+  workHours: WorkHour[] | undefined;
 };
 
-export const ZoneControl = ({ isLoading }: ZoneControlProps) => {
+export const ZoneControl = ({ isLoading, workHours }: ZoneControlProps) => {
   return (
     <Row>
       <Col md={6} sm={12} className="pr-5">
         <NameControl isLoading={isLoading} />
-        <ZoneRecurrencesControl />
+        <ZoneRecurrencesControl workHours={workHours} />
         <hr />
         <Row>
           <Col md={6} sm={6}>

package/src/zone/form/components/ZoneRecurrencesControl.tsx

@@ -25,12 +25,13 @@ export interface DateAndRecurrenceInputValues {
   zoneRecurrences?: Partial<ZoneRecurrence>[];
 }
 
-export type ZoneRecurrenceControlProps = {
-  workHours?: WorkHour[];
-  isLoading?: boolean;
+type ZoneRecurrenceControlProps = {
+  workHours: WorkHour[] | undefined;
 };
 
-export const ZoneRecurrencesControl = () => {
+export const ZoneRecurrencesControl = ({
+  workHours,
+}: ZoneRecurrenceControlProps) => {
   const {
     control,
     register,
@@ -69,7 +70,7 @@ export const ZoneRecurrencesControl = () => {
     clearEditState();
   });
 
-  const popoverId = useId()!;
+  const popoverId = useId();
 
   const { t } = useTranslation(["Design", "Validation"]);
 
@@ -166,6 +167,7 @@ export const ZoneRecurrencesControl = () => {
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
                 setInitialStartDateAfterSelect
+                workHours={workHours}
               />
             </Popover.Content>
           </Popover>