@licklist/design 0.63.1-dev.6 → 0.63.1

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

@@ -1,8 +1,4 @@
-import { TIME_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 { useTranslation } from "react-i18next";
+import { DateTime } from "luxon";
 import RRule, { Frequency, Weekday } from "rrule";
 
 export const getWeekdayForFrequency = ({
@@ -15,7 +11,6 @@ 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
@@ -114,79 +109,3 @@ export const parseAndValidateRRule = ({
     until: options.until,
   } as ParsedRRuleOptions;
 };
-
-export const useWorkHoursValidation = (
-  byWeekDay: Weekday[] = [],
-  workHours: WorkHour[] | undefined
-) => {
-  const { t } = useTranslation("Validation");
-  if (!workHours) return {};
-
-  const fromTimeFormat = fromFormat(TIME_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) => {
-      const time = fromTimeFormat(_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));
-
-      if (notFittingIntervalsByDay.length !== 0) {
-        return t("outsideWorkingHours", {
-          attribute: notFittingIntervals
-            .map((interval) => interval.toFormat("HH:mm"))
-            .join(", "),
-        });
-      }
-
-      return true;
-    },
-  };
-};

package/src/sales/booking/results/components/ResultCard.tsx

@@ -12,6 +12,7 @@ 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 = {
@@ -21,6 +22,8 @@ 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/sales/coupon/control/CouponFormControl.tsx

@@ -21,14 +21,12 @@ import couponCodeRules from "@licklist/plugins/dist/validation/Rules/couponCodeR
 // import { useId } from "@react-aria/utils";
 
 import HTMLInputDateElement from "../../../types/static/HTMLInputDateElement";
-import { Typeahead, TypeaheadOptions } from "../../../typeahead";
-import { convertToTypeaheadOptions } from "../utils";
 
 export interface CouponFormValues {
   name?: string;
   code: string;
   discountType: CouponType;
-  productGroupIds: Array<TypeaheadOptions | ProductGroup>;
+  productGroupIds: string[];
   discount: number;
   totalType: CouponTotalType;
   startFrom: string;
@@ -60,9 +58,9 @@ export const CouponFormControl = ({
     watch,
   } = useFormContext<CouponFormValues>();
   const { t } = useTranslation(["Design", "Notification", "App"]);
-  const [selectedProductGroups, setSelectedProductGroups] = useState<
-    TypeaheadOptions[]
-  >([]);
+  const [selectedProductGroups, setSelectedProductGroups] = useState<string[]>(
+    []
+  );
   /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
   // const rrule = watch("rrule");
   // const [recurrent, setRecurrent] = useState(Boolean(rrule));
@@ -87,20 +85,15 @@ export const CouponFormControl = ({
     [COUPON_TOTAL_TYPE_TOTAL]: t("Design:depositTotal"),
   };
 
+  // Set pre-selected Product Groups
   useEffect(() => {
-    const defaultProductGroup = getValues("productGroupIds");
-
-    setSelectedProductGroups(
-      convertToTypeaheadOptions(defaultProductGroup as ProductGroup[])
-    );
+    setSelectedProductGroups(getValues("productGroupIds"));
   }, [getValues]);
 
   useEffect(() => {
     setValue("productGroupIds", selectedProductGroups);
   }, [getValues, setValue, selectedProductGroups]);
 
-  const productGroupList = convertToTypeaheadOptions(productGroups);
-
   /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
   // useEffect(() => {
   //   if (!recurrent && rrule) {
@@ -258,21 +251,51 @@ export const CouponFormControl = ({
             </Form.Group>
           </Col>
         </Row>
-        <Row>
-          <Col>
-            <Form.Group className="mb-3">
-              <Form.Label>{t("Design:productGroups")}</Form.Label>
-              <Typeahead
-                name="productGroupIds"
-                options={productGroupList}
-                isMultipleChoise
-                isCouponForm
-                placeholder={t("Design:choose")}
-                noOptionsMessage={t("Design:noSelectedProductGroups")}
-              />
-            </Form.Group>
-          </Col>
-        </Row>
+        {productGroups && productGroups?.length > 0 && (
+          <Row>
+            <Col md={12}>
+              <h5 className="mt-4">{t("Design:productGroups")}</h5>
+              <Form.Group className="d-flex flex-wrap justify-content-between mt-4 mb-5">
+                {productGroups?.map((productGroup) => {
+                  const isGroupSelected =
+                    getValues("productGroupIds")?.includes(
+                      String(productGroup.id)
+                    ) ?? false;
+
+                  return (
+                    <Form.Check
+                      key={productGroup.id}
+                      label={productGroup.name}
+                      defaultChecked={isGroupSelected}
+                      disabled={isLoading}
+                      onChange={(e) => {
+                        if (e.target.checked) {
+                          setSelectedProductGroups((prevGroups) =>
+                            Array.from(
+                              new Set([...prevGroups, String(productGroup.id)])
+                            )
+                          );
+                        } else {
+                          setSelectedProductGroups((prevGroups) => {
+                            return prevGroups.filter(
+                              (id) => String(productGroup.id) !== id
+                            );
+                          });
+                        }
+                      }}
+                    />
+                  );
+                })}
+                <Form.Control
+                  {...register("productGroupIds")}
+                  hidden
+                  value={selectedProductGroups}
+                  disabled={isLoading}
+                />
+              </Form.Group>
+            </Col>
+          </Row>
+        )}
 
         {/* TODO: Show Recurrent date, when reccurent date bugs are fixed */}
         {/* {startFromValue && (

package/src/sales/coupon/form/CouponFrom.tsx

@@ -1,8 +1,5 @@
 import React, { useEffect } from "react";
-import {
-  ProductGroup,
-  ProductGroupDTO,
-} from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
+import { ProductGroup } from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
 import {
   CouponTotalType,
   CouponType,
@@ -19,7 +16,7 @@ export interface CouponFormValues {
   name?: string;
   code: string;
   discountType: CouponType;
-  productGroupIds: ProductGroupDTO[];
+  productGroupIds: string[];
   discount: number;
   totalType: CouponTotalType;
   startFrom: string;
@@ -57,6 +54,19 @@ export const CouponForm = ({
   const { setError } = form;
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
+  // @TODO: dont need for v1 release
+  // const [selectedProductGroups, setSelectedProductGroups] = useState<string[]>(
+  //   []
+  // );
+  // Set pre-selected Product Groups
+  // useEffect(() => {
+  //   setSelectedProductGroups(getValues("productGroupIds"));
+  // }, [getValues]);
+
+  // useEffect(() => {
+  //   setValue("productGroupIds", selectedProductGroups);
+  // }, [getValues, setValue, selectedProductGroups]);
+
   useEffect(() => {
     FormErrorService.handleServerErrors(serverErrors, setError);
   }, [serverErrors, setError]);

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 { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
+import { ProviderType } 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?: ProvidableType;
+    providerType?: ProviderType;
   };
 }
 

package/src/setting/dashboard/DashboardSettingForm.tsx

@@ -31,7 +31,6 @@ export type DashboardSettingFormFieldValues = {
   isEnquiryOnly: boolean;
   hasUserVerification: boolean;
   metaPixelId?: number;
-  eventDeadlineErrorMessage?: string;
 } & EventSettingFormFieldValues &
   ProviderSettingFormFieldValues;
 
@@ -82,7 +81,6 @@ export const DashboardSettingForm = ({
   const orderReportFormatId = useId();
   const userVerificationId = useId();
   const metaPixelId = useId();
-  const eventDeadlineErrorMessageId = useId();
 
   const orderReportFormatList: SelectItem[] = [
     { id: 1, value: t("groupItemsByOrder") },
@@ -236,17 +234,6 @@ export const DashboardSettingForm = ({
         <EventSettingForm isLoading={isLoading} />
 
         <ProviderSettingForm isLoading={isLoading} />
-        <Form.Group controlId={eventDeadlineErrorMessageId}>
-          <Form.Label>{t("eventDeadlineErrorMessage")}</Form.Label>
-          <Form.Control
-            {...register("eventDeadlineErrorMessage")}
-            isInvalid={Boolean(errors.eventDeadlineErrorMessage)}
-            disabled={isLoading}
-          />
-          <Form.Control.Feedback type="invalid">
-            {errors.eventDeadlineErrorMessage?.message}
-          </Form.Control.Feedback>
-        </Form.Group>
       </FormProvider>
       {hasPermission && (
         <Button

package/src/sortable-tree/SortableTreeItem.tsx

@@ -53,6 +53,7 @@ export interface SortableTreeItemProps {
   };
   setIsExpanded?: () => void;
   isOverride?: boolean;
+  isProduct?: boolean;
 }
 
 export function SortableTreeItem({
@@ -80,6 +81,7 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
+  isProduct = false,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded);
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded);
@@ -150,6 +152,7 @@ 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/iframe-page/PageBody.scss

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

package/src/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14rem;
+      height: 14.25rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/src/typeahead/Typeahead.tsx

@@ -16,7 +16,6 @@ export interface TypeaheadProps {
   isMultipleChoise?: boolean;
   noOptionsMessage: string;
   isInvalid?: boolean;
-  isCouponForm?: boolean;
 }
 
 function Typeahead({
@@ -25,25 +24,13 @@ function Typeahead({
   isRequired = false,
   isMultipleChoise,
   name = "",
-  isCouponForm = false,
   noOptionsMessage = "",
   isInvalid,
 }: TypeaheadProps) {
   const { control } = useFormContext();
 
-  const getStyle = (): CSSObjectWithLabel => {
-    const couponFormStyle = isCouponForm
-      ? {
-          borderRadius: "1rem",
-          minHeight: "3rem",
-        }
-      : {};
-    return isInvalid
-      ? { borderColor: "red", ...couponFormStyle }
-      : {
-          ...couponFormStyle,
-        };
-  };
+  const getErrorStyle = (): CSSObjectWithLabel =>
+    isInvalid ? { borderColor: "red" } : {};
 
   return (
     <>
@@ -59,7 +46,7 @@ function Typeahead({
             styles={{
               control: (base) => ({
                 ...base,
-                ...getStyle(),
+                ...getErrorStyle(),
               }),
             }}
             onChange={(value) => {

package/src/zone/form/ZoneForm.tsx

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

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

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

package/src/zone/form/utils/dates.ts

@@ -53,17 +53,18 @@ export const getCheckboxesByWorkHours = (workHours?: WorkHour[]) => {
   if (!workHours || !workHours.length)
     return getTimeCheckboxRanges(DEFAULT_START_DAY_TIME, DEFAULT_END_DAY_TIME);
 
-  const providerWorkHoursByWeek = workHours.reduce<
-    { start: string; end: string }[]
-  >((workHoursNextArray, currentWorkHour) => {
-    const { start, end } = currentWorkHour;
+  const providerWorkHoursByWeek = workHours.reduce(
+    (workHoursNextArray: { start: string; end: string }[], currentWorkHour) => {
+      const { start, end } = currentWorkHour;
 
-    if (start && end) {
-      return [...workHoursNextArray, { start, end }];
-    }
+      if (start && end) {
+        return [...workHoursNextArray, { start, end }];
+      }
 
-    return workHoursNextArray;
-  }, []);
+      return workHoursNextArray;
+    },
+    []
+  );
 
   // If venue has filled only 1 work day from wee
   // For another days we use default 00:00 and 23:59