@licklist/design 0.44.486-dev.83 → 0.44.486

package/src/widgets/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,64 @@
+import { useId } from "@react-aria/utils";
+import React from "react";
+import { Form } from "react-bootstrap";
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { WidgetBuilderFormModel } from "../WidgetBuilderForm/WidgetBuilderForm";
+
+export type CheckboxGroupProps = {
+  heading: string;
+  name: keyof Partial<
+    Pick<WidgetBuilderFormModel, "includeFromPrice" | "includeAvailability">
+  >;
+};
+
+export const CheckboxGroup = ({ heading, name }: CheckboxGroupProps) => {
+  const { t } = useTranslation();
+
+  const { register } = useFormContext<WidgetBuilderFormModel>();
+
+  const onTimeSlotsCheckboxIt = useId();
+  const onCalendarCheckboxId = useId();
+  const onProductSetsCheckboxId = useId();
+
+  return (
+    <div className="widgets-checkbox-group">
+      <h3>{heading}</h3>
+
+      <Form.Group className="custom-checkbox">
+        <Form.Check custom type="checkbox" id={onTimeSlotsCheckboxIt}>
+          <Form.Check.Input
+            type="checkbox"
+            value="onTimeSlots"
+            {...register(name)}
+          />
+          <Form.Check.Label>{t("onTimeSLots")}</Form.Check.Label>
+        </Form.Check>
+      </Form.Group>
+
+      <Form.Group className="custom-checkbox">
+        <Form.Check custom type="checkbox" id={onCalendarCheckboxId}>
+          <Form.Check.Input
+            type="checkbox"
+            value="onCalendar"
+            {...register(name)}
+          />
+          <Form.Check.Label>{t("onCalendar")}</Form.Check.Label>
+        </Form.Check>
+      </Form.Group>
+
+      <Form.Group className="custom-checkbox">
+        <Form.Check custom type="checkbox" id={onProductSetsCheckboxId}>
+          <Form.Check.Input
+            type="checkbox"
+            value="onProductSets"
+            {...register(name)}
+          />
+          <Form.Check.Label>{t("onProductSets")}</Form.Check.Label>
+        </Form.Check>
+      </Form.Group>
+
+      <div className="divider" />
+    </div>
+  );
+};

package/src/widgets/CheckboxGroup/index.ts

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

package/src/widgets/ImageRadioInput/ImageRadioInput.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ImageRadioInput, ImageRadioInputProps } from "./ImageRadioInput";
+import { ReactComponent as MonthIcon } from "../../assets/widgets/monthCalendar.svg";
+
+export default {
+  title: "Widgets / Image Radio Input",
+  component: ImageRadioInput,
+} as Meta;
+
+export const Default: Story<ImageRadioInputProps> = (args) => {
+  return <ImageRadioInput {...args} />;
+};
+
+Default.args = {
+  img: <MonthIcon />,
+  label: "Month",
+};

package/src/widgets/ImageRadioInput/ImageRadioInput.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode } from "react";
+import { Form } from "react-bootstrap";
+import { useFormContext } from "react-hook-form";
+import { WidgetBuilderFormModel } from "../WidgetBuilderForm/WidgetBuilderForm";
+
+export type ImageRadioInputProps = {
+  img: ReactNode;
+  label: string;
+  name: keyof Partial<
+    Pick<WidgetBuilderFormModel, "calendarStyle" | "bookingWidgetStyle">
+  >;
+};
+
+export const ImageRadioInput = ({ img, label, name }: ImageRadioInputProps) => {
+  const { register } = useFormContext<WidgetBuilderFormModel>();
+
+  return (
+    <Form.Check className="image-radio-input">
+      <Form.Check.Label className="image-radio-input-wrapper">
+        {img}
+
+        <div className="image-radio-input-label">
+          <Form.Check.Input type="radio" value={label} {...register(name)} />
+          <span>{label}</span>
+        </div>
+      </Form.Check.Label>
+    </Form.Check>
+  );
+};

package/src/widgets/ProductSetSelector/ProductSetSelector.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ProductSetSelector } from "./ProductSetSelector";
+
+export default {
+  title: "Widgets / Product Set Selector",
+  component: ProductSetSelector,
+} as Meta;
+
+export const Default: Story = (args) => {
+  return <ProductSetSelector {...args} />;
+};

package/src/widgets/ProductSetSelector/ProductSetSelector.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Button, Form } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { ReactComponent as Icon } from "../../assets/widgets/circlePlus.svg";
+
+export const ProductSetSelector = () => {
+  const { t } = useTranslation("Design");
+
+  return (
+    <div className="widget-builder-product-set-selector">
+      <h4>{t("productSet")}</h4>
+      <p>{t("widgetBuilderProductSetDescription")}</p>
+
+      <Form.Group>
+        <Form.Control as="select">
+          <option>{1}</option>
+          <option>{2}</option>
+        </Form.Control>
+      </Form.Group>
+
+      <Button className="">
+        <Icon type="circle-plus" />
+        {t("addProductSets")}
+      </Button>
+    </div>
+  );
+};

package/src/widgets/ProductSetSelector/index.ts

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

package/src/widgets/SnippetCode/SnippetCode.stories.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable max-len */
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { SnippetCode, SnippetCodeProps } from "./SnippetCode";
+
+export default {
+  title: "Widgets / Snippet Code",
+  component: SnippetCode,
+} as Meta;
+
+export const Default: Story<SnippetCodeProps> = (args) => {
+  return <SnippetCode {...args} />;
+};
+
+Default.args = {
+  code: '<iframe width="1238" height="696" src="https://www.youtube.com/embed/Kddw5pV7RZ0" title="Short Booked it software overview." frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen />',
+};

package/src/widgets/SnippetCode/SnippetCode.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { ReactComponent as CopyIcon } from "../../assets/widgets/copy.svg";
+
+export type SnippetCodeProps = {
+  code: string;
+};
+
+const copyCode = (code: string) => window.navigator.clipboard.writeText(code);
+
+export const SnippetCode = ({ code }: SnippetCodeProps) => {
+  const { t } = useTranslation("Design");
+
+  return (
+    <div className="widget-designer-snippet-code">
+      <h4>{t("codeSnippet")}</h4>
+
+      <p className="code-container">{code}</p>
+
+      <Button onClick={() => copyCode(code)}>
+        {t("copyCode")}
+        <CopyIcon />
+      </Button>
+    </div>
+  );
+};

package/src/widgets/SnippetCode/index.ts

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

package/src/widgets/WidgetBuilderForm/WidgetBuilderForm.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { WidgetBuilderForm } from "./WidgetBuilderForm";
+
+export default {
+  title: "Widgets / Widget Builder Form",
+  component: WidgetBuilderForm,
+} as Meta;
+
+export const Default: Story = (args) => {
+  return <WidgetBuilderForm {...args} />;
+};

package/src/widgets/WidgetBuilderForm/WidgetBuilderForm.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { Button, Col, Form, Row } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { useForm, FormProvider } from "react-hook-form";
+import { WidgetTypeSelector } from "../WidgetTypeSelector/WidgetTypeSelector";
+import { CheckboxGroup } from "../CheckboxGroup";
+import { CalendarStyleSelector } from "../CalendarStyleSelector";
+import { BookingStyleSelector } from "../BookingStyleSelector";
+import { ProductSetSelector } from "../ProductSetSelector";
+import { SnippetCode } from "../SnippetCode";
+
+export type WidgetBuilderFormModel = {
+  name: string;
+  widgetType: string;
+  calendarStyle: string;
+  includeFromPrice: string[];
+  includeAvailability: string[];
+  productSets: string[];
+  bookingWidgetStyle: string;
+};
+
+export const WidgetBuilderForm = () => {
+  const { t } = useTranslation("Design");
+
+  const form = useForm<WidgetBuilderFormModel>({ mode: "onChange" });
+
+  const onSubmit = () => null;
+
+  return (
+    <FormProvider {...form}>
+      <Row
+        as="form"
+        className="widget-builder-form"
+        onSubmit={form.handleSubmit(onSubmit)}
+      >
+        <Col lg={6} md={6}>
+          <h2>{t("eventPageOverlay")}</h2>
+
+          <Form.Group>
+            <Form.Label>{t("name")}</Form.Label>
+            <Form.Control type="text" {...form.register("name")} />
+          </Form.Group>
+
+          <WidgetTypeSelector />
+
+          <h3 className="widget-builder-form-customizations">
+            {t("customizations")}
+          </h3>
+
+          <CalendarStyleSelector />
+
+          <CheckboxGroup
+            heading={t("includeFromPrice")}
+            name="includeFromPrice"
+          />
+          <CheckboxGroup
+            heading={t("includeAvailability")}
+            name="includeAvailability"
+          />
+
+          <ProductSetSelector />
+        </Col>
+
+        <Col lg={5} md={5} className="widget-builder-right-column">
+          <div className="widget-builder-form-grey">
+            <BookingStyleSelector />
+
+            <div>
+              <h4>{t("stylingTemplate")}</h4>
+
+              <Form.Group>
+                <Form.Control as="select" />
+              </Form.Group>
+            </div>
+
+            <SnippetCode code="" />
+          </div>
+
+          <Button type="submit">{t("saveAndClose")}</Button>
+        </Col>
+      </Row>
+    </FormProvider>
+  );
+};

package/src/widgets/WidgetTypeRadio/WidgetTypeRadio.stories.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { WidgetTypeRadio, WidgetTypeRadioProps } from "./WidgetTypeRadio";
+
+export default {
+  title: "Widgets / Type Radio Selector",
+  component: WidgetTypeRadio,
+} as Meta;
+
+export const Default: Story<WidgetTypeRadioProps> = (args) => {
+  return <WidgetTypeRadio {...args} />;
+};
+
+Default.args = {
+  label: "Venue Map",
+  description: ["Date", "Floor", "Table", "Product Sets", "Checkout"],
+};

package/src/widgets/WidgetTypeRadio/WidgetTypeRadio.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+import { useFormContext } from "react-hook-form";
+import { WidgetBuilderFormModel } from "../WidgetBuilderForm/WidgetBuilderForm";
+
+export type WidgetTypeRadioProps = {
+  label: string;
+  description: string[];
+};
+
+const prepareDescription = (description: string[]) =>
+  description.map((item, index) => {
+    if (index === 0) return item;
+    return `> ${item}`;
+  });
+
+export const WidgetTypeRadio = ({
+  label,
+  description,
+}: WidgetTypeRadioProps) => {
+  const { register } = useFormContext<WidgetBuilderFormModel>();
+
+  return (
+    <Form.Check className="widget-type-radio">
+      <Form.Check.Label>
+        <div className="widget-type-radio-controls">
+          <Form.Check.Input
+            type="radio"
+            value={label}
+            {...register("widgetType")}
+          />
+          <span>{label}</span>
+        </div>
+
+        <p className="widget-type-radio-description">
+          {prepareDescription(description).map((item) => (
+            <span key={item}> {item}</span>
+          ))}
+        </p>
+      </Form.Check.Label>
+    </Form.Check>
+  );
+};

package/src/widgets/WidgetTypeRadio/index.ts

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

package/src/widgets/WidgetTypeSelector/WidgetTypeSelector.stories.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { WidgetTypeSelector } from "./WidgetTypeSelector";
+
+export default {
+  title: "Widgets / Widget Type Selector",
+  component: WidgetTypeSelector,
+} as Meta;
+
+export const Default: Story = (args) => {
+  return <WidgetTypeSelector {...args} />;
+};

package/src/widgets/WidgetTypeSelector/WidgetTypeSelector.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Form } from "react-bootstrap";
+import { WidgetTypeRadio } from "../WidgetTypeRadio";
+
+const venueMapDescription = [
+  "date",
+  "floor",
+  "table",
+  "productSets",
+  "checkout",
+];
+
+export const WidgetTypeSelector = () => {
+  const { t } = useTranslation("Design");
+
+  return (
+    <div className="widget-type-selector">
+      <Form.Label>{t("selectBookingType")}</Form.Label>
+
+      <WidgetTypeRadio
+        label={t("eventList")}
+        description={[t("eventListing")]}
+      />
+
+      <WidgetTypeRadio
+        label={t("venueMap")}
+        description={venueMapDescription.map((item) => t(item))}
+      />
+    </div>
+  );
+};

package/src/zone/form/ZoneForm.tsx

@@ -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/AvailableTimesControl.tsx

@@ -6,7 +6,7 @@ import React, {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
-import { UseFormSetError, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { useId } from "@react-aria/utils";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { getCheckboxesByWorkHours } from "../utils/dates";
@@ -14,17 +14,12 @@ import { getCheckboxesByWorkHours } from "../utils/dates";
 export type AvailableTimesControlRef = {
   trigger: () => Promise<boolean>;
   getValues: () => { availableTimes: string[] };
-  setError: UseFormSetError<AvailableTimesForm>;
 };
 
 type AvailableTimesControlProps = {
   isLoading: boolean;
   workHours?: WorkHour[];
   defaultValues?: string[];
-  startTime?: string;
-  endTime?: string;
-  errorMessage?: string;
-  clearErrorMessage: () => void;
 };
 
 type AvailableTimesForm = { availableTimes: string[] };
@@ -32,95 +27,89 @@ type AvailableTimesForm = { availableTimes: string[] };
 export const AvailableTimesControl = forwardRef<
   AvailableTimesControlRef,
   AvailableTimesControlProps
->(
-  (
-    {
-      isLoading,
-      workHours,
-      defaultValues = [],
-      errorMessage,
-      clearErrorMessage,
-    },
-    ref
-  ) => {
-    const nameId = useId();
-    const { t } = useTranslation(["Design", "Validation"]);
-
-    const {
-      register,
-      formState: { errors },
-      reset,
+>(({ isLoading, workHours, defaultValues = [] }, ref) => {
+  const nameId = useId();
+  const { t } = useTranslation(["Design", "Validation"]);
+
+  const {
+    register,
+    formState: { errors },
+    reset,
+    trigger,
+    getValues,
+    setValue,
+    watch,
+  } = useForm<AvailableTimesForm>({ mode: "onChange" });
+
+  const availableTimes = watch("availableTimes") || [];
+
+  const checkboxes = useMemo(
+    () => getCheckboxesByWorkHours(workHours),
+    [workHours]
+  );
+
+  useImperativeHandle(ref, () => {
+    return {
       trigger,
       getValues,
-      setValue,
-      watch,
-      setError,
-    } = useForm<AvailableTimesForm>({ mode: "onChange" });
-
-    const availableTimes = watch("availableTimes") || [];
-
-    const checkboxes = useMemo(
-      () => getCheckboxesByWorkHours(workHours),
-      [workHours]
-    );
-
-    useImperativeHandle(ref, () => {
-      return {
-        trigger,
-        getValues,
-        setError,
-      };
-    });
-
-    const onChange = (option: string) => {
-      const isAlreadyChecked = availableTimes.includes(option);
-      if (errorMessage) {
-        clearErrorMessage();
-      }
-      if (isAlreadyChecked) {
-        setValue(
-          "availableTimes",
-          availableTimes.filter((value) => value !== option)
-        );
-
-        return;
-      }
-
-      setValue("availableTimes", [...availableTimes, option]);
     };
+  });
+
+  const onChange = (option: string) => {
+    const isAlreadyChecked = availableTimes.includes(option);
+
+    if (isAlreadyChecked) {
+      setValue(
+        "availableTimes",
+        availableTimes.filter((value) => value !== option)
+      );
+
+      return;
+    }
+
+    setValue("availableTimes", [...availableTimes, option]);
+  };
+
+  useEffect(() => {
+    if (!defaultValues) return;
+
+    reset({ availableTimes: defaultValues });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValues]);
+
+  return (
+    <Form.Group controlId={nameId}>
+      <Form.Label>{t("Design:startTimes")}</Form.Label>
+      <div className="zone-available-times">
+        {checkboxes.map((option) => {
+          return (
+            <Form.Check key={option} inline custom id={option}>
+              <Form.Check.Input
+                type="checkbox"
+                value={option}
+                checked={availableTimes.includes(option)}
+                onChange={() => onChange(option)}
+                disabled={isLoading}
+              />
+              <Form.Check.Label>{option}</Form.Check.Label>
+            </Form.Check>
+          );
+        })}
+      </div>
 
-    useEffect(() => {
-      if (!defaultValues) return;
-
-      reset({ availableTimes: defaultValues });
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultValues]);
-
-    return (
-      <Form.Group controlId={nameId}>
-        <Form.Label>{t("Design:startTimes")}</Form.Label>
-        <div className="zone-available-times">
-          {checkboxes.map((option) => {
-            return (
-              <Form.Check key={option} inline custom id={option}>
-                <Form.Check.Input
-                  type="checkbox"
-                  value={option}
-                  checked={availableTimes.includes(option)}
-                  onChange={() => onChange(option)}
-                  disabled={isLoading}
-                />
-                <Form.Check.Label>{option}</Form.Check.Label>
-              </Form.Check>
-            );
-          })}
-        </div>
-
-        <Form.Control type="hidden" {...register("availableTimes")} />
-        <div className="manual-form-error">
-          {errors.availableTimes?.message || errorMessage}
-        </div>
-      </Form.Group>
-    );
-  }
-);
+      <Form.Control
+        type="hidden"
+        {...register("availableTimes", {
+          required: {
+            value: true,
+            message: t("Validation:fieldMinNumber", {
+              attribute: t("startTimes"),
+              min: 1,
+            }),
+          },
+        })}
+      />
+      <div className="manual-form-error">{errors.availableTimes?.message}</div>
+    </Form.Group>
+  );
+});

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

@@ -7,25 +7,26 @@ import { SortControl } from "./SortControl";
 import { ZoneRecurrencesControl } from "./ZoneRecurrencesControl";
 import { DescriptionControl } from "./DescriptionControl";
 import { ZoneImageControl } from "./ZoneImageControl";
-import { GameDurationControl } from "./GameDurationControl";
 
 export type ZoneControlProps = {
   isLoading: boolean;
   workHours?: WorkHour[];
 };
 
-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} isLoading={isLoading} />
         <hr />
         <Row>
           <Col md={6} sm={6}>
             <ZoneTypeControl isLoading={isLoading} />
             <SortControl isLoading={isLoading} />
-            <GameDurationControl isLoading={isLoading} />
           </Col>
           <Col md={6} sm={6}>
             <ZoneImageControl isLoading={isLoading} />