@licklist/design 0.44.486-dev.9 → 0.44.487

package/src/types/iframe.ts

@@ -1,5 +1,4 @@
 import { Product as CoreProduct } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 
 export interface Product {
   id: number;
@@ -7,10 +6,8 @@ export interface Product {
   description: string;
   deposit: number;
   price: number;
-  minSub?: number;
   minAmount?: number;
   maxAmount?: number;
-  minSpend?: number | null;
   isSoldOut?: boolean;
   isRequired?: boolean;
   isUnlimited?: boolean;
@@ -26,13 +23,12 @@ export interface ProductCategory {
   minSubItems: number | null;
   maxSubItems: number | null;
   products?: Product[];
-  zone?: Zone | null;
 }
 
 export interface MenuStep {
   id: number;
   name: string;
-  productCategories?: ProductCategory[];
+  productCategories: ProductCategory[];
 }
 
 export interface Menu {
@@ -40,8 +36,6 @@ export interface Menu {
   menuSteps: MenuStep[];
 }
 
-// TODO similar type exists in iframe app
-// remove this when components are moved to iframe
 export interface Order {
   id: number;
   quantity: number;

package/src/widgets/BookingStyleSelector/BookingStyleSelector.stories.tsx

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

package/src/widgets/BookingStyleSelector/BookingStyleSelector.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ImageRadioInput } from "../ImageRadioInput";
+import { ReactComponent as Overlay } from "../../assets/widgets/overlay.svg";
+import { ReactComponent as InPage } from "../../assets/widgets/inPage.svg";
+import { ReactComponent as Sidebar } from "../../assets/widgets/sidebar.svg";
+
+export const BookingStyleSelector = () => {
+  const { t } = useTranslation("Design");
+
+  return (
+    <div className="widget-booking-style-selector">
+      <h4>{t("selectBookingStyle")}</h4>
+
+      <div className="wrapper">
+        <ImageRadioInput
+          img={<Overlay />}
+          label={t("overlay")}
+          name="bookingWidgetStyle"
+        />
+        <ImageRadioInput
+          img={<InPage />}
+          label={t("inPage")}
+          name="bookingWidgetStyle"
+        />
+        <ImageRadioInput
+          img={<Sidebar />}
+          label={t("sidebar")}
+          name="bookingWidgetStyle"
+        />
+      </div>
+    </div>
+  );
+};

package/src/widgets/BookingStyleSelector/index.ts

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

package/src/widgets/CalendarStyleSelector/CalendarStyleSelector.stories.tsx

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

package/src/widgets/CalendarStyleSelector/CalendarStyleSelector.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ReactComponent as MonthIcon } from "../../assets/widgets/monthCalendar.svg";
+import { ReactComponent as WeekIcon } from "../../assets/widgets/weekCalendar.svg";
+import { ImageRadioInput } from "../ImageRadioInput/ImageRadioInput";
+
+export const CalendarStyleSelector = () => {
+  const { t } = useTranslation("Design");
+
+  return (
+    <div className="widget-calendar-style-selector">
+      <h4>{t("calendarStyle")}</h4>
+      <p>{t("calendarStyleDescription")}</p>
+
+      <div className="controls">
+        <ImageRadioInput
+          label={t("month")}
+          img={<MonthIcon />}
+          name="calendarStyle"
+        />
+        <ImageRadioInput
+          label={t("week")}
+          img={<WeekIcon />}
+          name="calendarStyle"
+        />
+      </div>
+    </div>
+  );
+};

package/src/widgets/CalendarStyleSelector/index.ts

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

package/src/widgets/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { CheckboxGroup, CheckboxGroupProps } from "./CheckboxGroup";
+
+export default {
+  title: "Widgets / Checkbox Group",
+  component: CheckboxGroup,
+} as Meta;
+
+export const Default: Story<CheckboxGroupProps> = (args) => {
+  return <CheckboxGroup {...args} />;
+};
+
+Default.args = {
+  heading: "Include from price",
+};

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

@@ -6,24 +6,20 @@ 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 { calculateTimeWithOffset } from "@licklist/plugins/dist/utils/time";
 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;
 };
 
 type AvailableTimesForm = { availableTimes: string[] };
@@ -43,7 +39,6 @@ export const AvailableTimesControl = forwardRef<
     getValues,
     setValue,
     watch,
-    setError,
   } = useForm<AvailableTimesForm>({ mode: "onChange" });
 
   const availableTimes = watch("availableTimes") || [];
@@ -57,25 +52,22 @@ export const AvailableTimesControl = forwardRef<
     return {
       trigger,
       getValues,
-      setError,
     };
   });
 
   const onChange = (option: string) => {
-    const timeWithOffset = calculateTimeWithOffset(option);
-
-    const isAlreadyChecked = availableTimes.includes(timeWithOffset);
+    const isAlreadyChecked = availableTimes.includes(option);
 
     if (isAlreadyChecked) {
       setValue(
         "availableTimes",
-        availableTimes.filter((value) => value !== timeWithOffset)
+        availableTimes.filter((value) => value !== option)
       );
 
       return;
     }
 
-    setValue("availableTimes", [...availableTimes, timeWithOffset]);
+    setValue("availableTimes", [...availableTimes, option]);
   };
 
   useEffect(() => {
@@ -95,9 +87,7 @@ export const AvailableTimesControl = forwardRef<
               <Form.Check.Input
                 type="checkbox"
                 value={option}
-                checked={availableTimes.includes(
-                  calculateTimeWithOffset(option)
-                )}
+                checked={availableTimes.includes(option)}
                 onChange={() => onChange(option)}
                 disabled={isLoading}
               />