@licklist/design 0.44.526 → 0.44.528

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -100,18 +100,18 @@ export const PaymentPage = ({
     );
   }
 
-  const orderTotalAmounByFormValues = cartSumByOrderProducts(
+  const orderTotalAmountByFormValues = cartSumByOrderProducts(
     bookingSummaryProps && bookingSummaryProps?.formValues
       ? Object.values(bookingSummaryProps?.formValues)
       : undefined
   );
 
-  // User can fill promocode only in iframe appcliation.
+  // User can fill promo code only in iframe application.
   // It didn't possible via payment link. This check will
   // be applied when there are no metadata and in case when
   // orderValues sum is greater than amount in order.
   const isCalculatedAmountGreaterThanOrderAmount =
-    orderTotalAmounByFormValues > data?.amount;
+    orderTotalAmountByFormValues > data?.amount;
 
   return (
     <Page
@@ -124,7 +124,6 @@ export const PaymentPage = ({
           onCloseButtonClick={isIframePayment ? onGoBack : undefined}
         >
           <PaymentTimer />
-
           <div className="d-flex align-items-center justify-content-center w-100">
             {t("paymentDetails")}
           </div>
@@ -165,7 +164,7 @@ export const PaymentPage = ({
                         <SummaryTotalBlock
                           label={t("total")}
                           amount={
-                            orderTotalAmounByFormValues +
+                            orderTotalAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
                           }
                         />

package/src/image-radio-input/ImageRadioInput.stories.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { ImageRadioInput, ImageRadioInputProps } from "./ImageRadioInput";
+import { ReactComponent as MonthIcon } from "../assets/widgets/monthCalendar.svg";
+import Icon from "../static/Icon";
+
+export default {
+  title: "ImageRadioInput",
+  component: ImageRadioInput,
+} as Meta;
+
+type FormModel = {
+  test: string;
+};
+
+export const Default: Story<ImageRadioInputProps<FormModel>> = (args) => {
+  const form = useForm();
+
+  return (
+    <FormProvider {...form}>
+      <ImageRadioInput {...args} />
+    </FormProvider>
+  );
+};
+
+Default.args = {
+  img: <MonthIcon />,
+  label: "Month",
+  name: "test",
+};
+
+export const WithFontAwesomeIcon: Story<ImageRadioInputProps<FormModel>> = (
+  args
+) => {
+  const form = useForm();
+
+  return (
+    <FormProvider {...form}>
+      <ImageRadioInput {...args} />
+    </FormProvider>
+  );
+};
+
+WithFontAwesomeIcon.args = {
+  img: <Icon type="bars" />,
+  label: "List",
+  name: "test",
+};
+
+export const Disabled: Story<ImageRadioInputProps<FormModel>> = (args) => {
+  const form = useForm();
+
+  return (
+    <FormProvider {...form}>
+      <ImageRadioInput {...args} />
+    </FormProvider>
+  );
+};
+
+Disabled.args = {
+  img: <MonthIcon />,
+  label: "Month",
+  name: "test",
+  disabled: true,
+  disabledMessage: "Coming soon",
+};

package/src/image-radio-input/ImageRadioInput.tsx

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import React, { ReactNode } from "react";
+import { Form } from "react-bootstrap";
+import { FormCheckInputProps } from "react-bootstrap/esm/FormCheckInput";
+import { Path, RegisterOptions, useFormContext } from "react-hook-form";
+
+export type ImageRadioInputProps<FormModel> = {
+  img: ReactNode;
+  label: string;
+  value: string | number;
+  name: Path<FormModel>;
+  disabled?: boolean;
+  disabledMessage?: string;
+  rules?: RegisterOptions<FormModel>;
+  inputProps?: FormCheckInputProps;
+};
+
+export const ImageRadioInput = <FormModel,>({
+  img,
+  label,
+  value,
+  name,
+  disabled,
+  disabledMessage,
+  rules,
+  inputProps,
+}: ImageRadioInputProps<FormModel>) => {
+  const { register } = useFormContext<FormModel>();
+
+  return (
+    <Form.Check className="image-radio-input">
+      <Form.Check.Label
+        className={clsx("image-radio-input-wrapper", disabled && "disabled")}
+      >
+        <div className="image-radio-input-image-wrapper">{img}</div>
+
+        <div className="image-radio-input-label">
+          <Form.Check.Input
+            type="radio"
+            value={value}
+            disabled={disabled}
+            {...register(name, rules)}
+            {...inputProps}
+          />
+          <span>{label}</span>
+        </div>
+      </Form.Check.Label>
+      <Form.Control.Feedback type="valid" className="d-block text-center">
+        {disabledMessage}
+      </Form.Control.Feedback>
+    </Form.Check>
+  );
+};

package/src/index.ts

@@ -18,6 +18,7 @@ export * from "./sales";
 export * from "./setting";
 export * from "./sidebar";
 export * from "./snippet";
+export * from "./sortable-fields";
 export * from "./sortable-list";
 export * from "./sortable-tree";
 export * from "./static";
@@ -34,3 +35,9 @@ export * from "./resource";
 export * from "./virtualized";
 export * from "./customers";
 export * from "./striped-static-table";
+export * from "./radio-card";
+export * from "./image-radio-input";
+export * from "./sorting-select";
+export * from "./date-time-button";
+export * from "./calendar";
+export * from "./availability-indicator";

package/src/logo/Logo.tsx

@@ -3,7 +3,7 @@ import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
-  logo: ReactNode;
+  logo: ReactNode | null;
   logoSm?: ReactNode;
 }
 

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import type Popper from "@popperjs/core";
+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";
@@ -245,7 +245,7 @@ export const DateAndRecurrenceInput = ({
   );
 };
 
-const sameWidthPopperModifier: Popper.Modifier<
+export const sameWidthPopperModifier: Modifier<
   "sameWidth",
   Record<string, unknown>
 > = {

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

@@ -281,24 +281,20 @@ export function ProductSetControl({
               control={control}
               name="fieldSetId"
               render={({ field }) => {
-                const fieldSetValue = String(field.value);
+                const fieldValue = Number(field.value);
 
                 return (
                   <>
                     <Form.Label>{t("Design:customFields")}</Form.Label>
-                    <Form.Control onChange={field.onChange} as="select">
-                      <option value="" selected={fieldSetValue === ""}>
-                        {t("Design:choose")}
-                      </option>
+                    <Form.Control
+                      onChange={field.onChange}
+                      value={fieldValue}
+                      as="select"
+                    >
+                      <option value="">{t("Design:choose")}</option>
                       {fieldSets?.map((fieldSet) => {
-                        const fieldSetOptionValue = String(fieldSet.id);
-
                         return (
-                          <option
-                            value={fieldSet.id}
-                            key={fieldSet.id}
-                            selected={fieldSetValue === fieldSetOptionValue}
-                          >
+                          <option value={fieldSet.id} key={fieldSet.id}>
                             {fieldSet.name}
                           </option>
                         );

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

@@ -56,10 +56,14 @@ export const ProductSetRecurrenceControl = ({
             {formatDate(menuRecurrence.startDate, {
               dateStyle: "medium",
             })}{" "}
-            -{" "}
-            {formatDate(menuRecurrence.endDate, {
-              dateStyle: "medium",
-            })}
+            {menuRecurrence.endDate && (
+              <>
+                {"- "}
+                {formatDate(menuRecurrence.endDate, {
+                  dateStyle: "medium",
+                })}
+              </>
+            )}
           </span>
 
           <div

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

@@ -72,6 +72,7 @@ export function ProductCategoriesControl({
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
+    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -100,7 +101,7 @@ export function ProductCategoriesControl({
   });
   const [productCategoryState, setProductCategoryState] = useState<
     Record<number, { price: number; quantity: number }>
-  >([]);
+  >({});
 
   const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
     fieldName: productCategoriesFieldName,
@@ -287,6 +288,7 @@ export function ProductCategoriesControl({
                     quantityType={productCategory.quantityType}
                     hasTicket={productCategory?.hasTicket}
                     stepIndex={stepIndex}
+                    zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                   />

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

@@ -74,6 +74,7 @@ Default.args = {
     {
       createdAt: "2023-05-08T15:55:28.000+03:00",
       deletedAt: null,
+      defaultDuration: 30,
       description: "Zone description 2",
       id: 2,
       image: null,

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

@@ -14,6 +14,7 @@ import { generateUuid } from "@licklist/core/dist/Services";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 
 import { CategoryType } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { ProductControl, ProductControlProps, ProductSetFormValues } from "..";
 import { SortableTree } from "../../sortable-tree";
 import { CreateProductSetItem } from "../item/CreateProductSetItem";
@@ -32,6 +33,7 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
+  zones?: Zone[];
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -74,6 +76,7 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
+  zones,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -89,6 +92,12 @@ export function ProductsControl({
     getValues,
   } = form;
 
+  const zoneId = watch(
+    `steps.${stepIndex}.productCategories.${productCategoryIndex}.zoneId`
+  );
+
+  const catergoryZone = zones?.find((zone) => zone.id === Number(zoneId));
+
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
@@ -245,6 +254,7 @@ export function ProductsControl({
                     onProductNameChange={onChange}
                     hasTicket={hasTicket}
                     categoryType={categoryType}
+                    zoneDuration={catergoryZone?.defaultDuration}
                   />
                 }
                 onDelete={() => onProductRemove(index)}

package/src/product-set/hooks/{useSortableTreeFunctions.tsx → useSortableTreeFunctions.ts}

@@ -22,9 +22,7 @@ export const useSortableTreeFunctions = ({
     if (!previousValue) {
       return remove(index);
     }
-
-    setValue(`${fieldName}.${index}` as const, previousValue);
-    return setEditValue(null);
+    return setValue(`${fieldName}.${index}` as const, previousValue);
   };
 
   const saveValidField = () => {

package/src/product-set/product/ProductControl.tsx

@@ -113,6 +113,7 @@ export interface ProductControlProps<T>
   productName: string;
   hasTicket?: boolean;
   categoryType?: CategoryType;
+  zoneDuration?: number;
 }
 
 export function ProductControl<T extends FormValues>({
@@ -126,6 +127,7 @@ export function ProductControl<T extends FormValues>({
   productName,
   hasTicket,
   categoryType,
+  zoneDuration,
 }: ProductControlProps<T>) {
   const {
     register,
@@ -190,6 +192,16 @@ export function ProductControl<T extends FormValues>({
     [handleImageUploading]
   );
 
+  const onChangeGameCapacity = (value: number) => {
+    if (!zoneDuration) {
+      return;
+    }
+    setValue(
+      `${fieldNamePrefix}.duration` as Path<T>,
+      (value * zoneDuration) as UnpackNestedValue<PathValue<T, Path<T>>>
+    );
+  };
+
   const onImageRemove = useCallback(
     (id, path) => {
       handleImageRemove(String(id), path);
@@ -372,6 +384,14 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
+              rules={{
+                min: {
+                  value: 1,
+                  message: t("Validation:fieldRequired", {
+                    attribute: t("capacity"),
+                  }) as string,
+                },
+              }}
             />
           </Col>
         </Row>
@@ -383,7 +403,11 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
+              onChange={onChangeGameCapacity}
               rules={{
+                required: t("Validation:fieldRequired", {
+                  attribute: t("capacity"),
+                }) as string,
                 min: {
                   value: 1,
                   message: t("Validation:fieldRequired", {
@@ -398,10 +422,13 @@ export function ProductControl<T extends FormValues>({
               fieldName={`${fieldNamePrefix}.duration`}
               label={t("durationMinutes")}
               rules={{
+                required: t("Validation:fieldRequired", {
+                  attribute: t("capacity"),
+                }) as string,
                 min: {
                   value: 1,
                   message: t("Validation:fieldRequired", {
-                    attribute: t("duration"),
+                    attribute: t("capacity"),
                   }) as string,
                 },
               }}

package/src/product-set/product/constants.ts

@@ -1 +1 @@
-export const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000;
+export const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000;

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -66,7 +66,7 @@ export const ProductDurationControl = <T,>({
         },
         min: {
           value: 1,
-          message: t("Validation:fieldMin", {
+          message: t("Validation:fieldMinNumber", {
             attribute: t("duration"),
           }),
         },

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -40,7 +40,6 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
-
   const totalQuantityId = useId();
 
   const maxQuantityValue = watch(`${fieldNamePrefix}.maxQuantity` as Path<T>);
@@ -109,18 +108,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                     required: false,
                     min: 0,
                   }
-                : {
-                    required: t("Validation:fieldRequired", {
-                      attribute: t("totalQuantity"),
-                    }) as string,
-                    min: {
-                      value: 1,
-                      message: t("Validation:fieldMinNumber", {
-                        attribute: t("totalQuantity"),
-                        min: 1,
-                      }) as string,
-                    },
-                  }
+                : {}
             }
           />
 

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -105,7 +105,7 @@ export function ProductCategoryControl({
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
-  const { providerHasBookingManagement, zones } = useContext(
+  const { providerHasBookingManagement, zones = [] } = useContext(
     ProductSetLoadingContext
   );
 
@@ -332,7 +332,7 @@ export function ProductCategoryControl({
           <Row>
             <Col>
               <Form.Group controlId={zoneId}>
-                <Form.Label>Zone</Form.Label>
+                <Form.Label>{t("Design:zone")}</Form.Label>
                 <Controller
                   control={control}
                   name={`${fieldNamePrefix}.zoneId`}
@@ -360,12 +360,6 @@ export function ProductCategoryControl({
                         attribute: t("zone"),
                       }),
                     },
-                    validate: (value) => {
-                      if (value) return true;
-                      return t("Validation:fieldRequired", {
-                        attribute: t("zone"),
-                      }) as string;
-                    },
                   }}
                 />
                 <Form.Control.Feedback type="invalid">

package/src/provider/location-input/LocationInputDescription.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { useFormContext } from "react-hook-form";
 import en from "react-phone-number-input/locale/en.json";
 import { LocationInputValues } from ".";
@@ -13,7 +13,7 @@ export function LocationInputDescription() {
     "postcode",
     "country",
   ] as const;
-  const fields = fieldNames.reduce<JSX.Element[]>((acc, field) => {
+  const fields = fieldNames.reduce<ReactElement[]>((acc, field) => {
     const value = values?.[field];
     if (!value) return acc;
 

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -28,14 +28,17 @@ export function WorkingHoursInputDescription() {
                 {weekday?.end
                   ? weekday.start
                     ? t("timeInterval", {
-                        start: 
-                          DateTime.fromISO(weekday.start).toFormat(TIME_FORMAT),
-                        end: 
-                        DateTime.fromISO(weekday.start).toFormat(TIME_FORMAT),
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
+                        end: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
                       })
                     : t("timeFrom", {
-                        start:
-                        DateTime.fromISO(weekday.start).toFormat(TIME_FORMAT),
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
                       })
                   : null}
               </Col>

package/src/radio-card/RadioCard.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import { Meta, Story } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
+import { RadioCard, RadioCardProps } from "./RadioCard";
+
+export default {
+  title: "Widgets / Widget Type Radio Card",
+  component: RadioCard,
+} as Meta;
+
+type FormModel = {
+  name: string;
+};
+
+export const Default: Story<RadioCardProps<FormModel>> = (args) => {
+  const form = useForm<FormModel>();
+
+  return (
+    <FormProvider {...form}>
+      <RadioCard {...args} />
+    </FormProvider>
+  );
+};
+
+Default.args = {
+  label: "Venue Map",
+  description: "Date > Floor",
+  name: "name",
+};
+
+export const Invalid: Story<RadioCardProps<FormModel>> = (args) => {
+  const form = useForm<FormModel>();
+
+  return (
+    <FormProvider {...form}>
+      <RadioCard {...args} />
+    </FormProvider>
+  );
+};
+
+Invalid.args = {
+  label: "Venue Map",
+  description: "Date > Floor",
+  name: "name",
+  inputProps: {
+    isInvalid: true,
+  },
+};

package/src/radio-card/RadioCard.tsx

@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import React, { ReactNode } from "react";
+import { Form } from "react-bootstrap";
+import { FormCheckInputProps } from "react-bootstrap/esm/FormCheckInput";
+import { Path, RegisterOptions, useFormContext } from "react-hook-form";
+
+export type RadioCardProps<FormModel> = {
+  label: string;
+  description: ReactNode;
+  name: Path<FormModel>;
+  value: string;
+  rules: RegisterOptions<FormModel>;
+  inputProps?: FormCheckInputProps;
+};
+
+export const RadioCard = <FormModel,>({
+  label,
+  description,
+  name,
+  value,
+  rules,
+  inputProps,
+}: RadioCardProps<FormModel>) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<FormModel>();
+
+  const isInvalid = !!errors[name as string] || inputProps?.isInvalid;
+
+  return (
+    <Form.Check className={clsx("radio-card", isInvalid && "invalid")}>
+      <Form.Check.Label>
+        <div className="radio-card-controls">
+          <Form.Check.Input
+            type="radio"
+            isInvalid={isInvalid}
+            value={value}
+            {...register(name, rules)}
+            {...inputProps}
+          />
+          <span>{label}</span>
+        </div>
+
+        <p className="radio-card-description">{description}</p>
+      </Form.Check.Label>
+    </Form.Check>
+  );
+};

package/src/radio-card/index.ts

@@ -0,0 +1 @@
+export { RadioCard } from "./RadioCard";

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -127,7 +127,7 @@ function RecurrenceEndInput({
   );
 }
 
-const defaultOccurrences = {
+export const defaultOccurrences = {
   [RRule.DAILY]: 30,
   [RRule.WEEKLY]: 13,
   [RRule.MONTHLY]: 12,

package/src/recurrence-input/RecurrenceInput.tsx

@@ -3,7 +3,7 @@
 import { DateTime } from "luxon";
 import React, { useEffect, useReducer } from "react";
 import RRule, { Frequency, Weekday } from "rrule";
-import RecurrenceEndInput from "./RecurrenceEndInput";
+import RecurrenceEndInput, { defaultOccurrences } from "./RecurrenceEndInput";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceMonthlyRepeatByInput from "./RecurrenceMonthlyRepeatByInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
@@ -133,5 +133,12 @@ const getInitialState = ({
     byweekday = options.byweekday[0];
   }
 
-  return { ...options, byweekday };
+  return {
+    ...options,
+    count:
+      options?.count || options.until
+        ? options.count
+        : defaultOccurrences[options.freq],
+    byweekday,
+  };
 };