@licklist/design 0.44.485-dev.99 → 0.44.485

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

@@ -9,7 +9,6 @@ import { Form } from "react-bootstrap";
 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 = {
@@ -57,20 +56,18 @@ export const AvailableTimesControl = forwardRef<
   });
 
   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(() => {
@@ -90,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}
               />

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import type Popper from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFieldArray, useFormContext } from "react-hook-form";
@@ -22,7 +23,6 @@ import {
   AvailableTimesControl,
   AvailableTimesControlRef,
 } from "./AvailableTimesControl";
-import { sameWidthPopperModifier } from "../../../product-set/control/DateAndRecurrenceInput";
 
 export interface DateAndRecurrenceInputValues {
   zoneRecurrences?: Partial<ZoneRecurrence>[];
@@ -211,7 +211,7 @@ export const ZoneRecurrencesControl = ({
               }
               strategy={verticalListSortingStrategy}
             >
-              {fields?.map((zoneRecurrence, index) => (
+              {fields.map((zoneRecurrence, index) => (
                 <ZoneRecurrenceControl
                   key={zoneRecurrence._id}
                   zoneRecurrence={zoneRecurrence}
@@ -257,3 +257,29 @@ export const ZoneRecurrencesControl = ({
     </Form.Group>
   );
 };
+
+const sameWidthPopperModifier: Popper.Modifier<
+  "sameWidth",
+  Record<string, unknown>
+> = {
+  name: "sameWidth",
+  enabled: true,
+  phase: "beforeWrite",
+  requires: ["computeStyles"],
+  fn({ state }) {
+    const style = {
+      width: `${state.rects.reference.width + 4}px`,
+      marginLeft: "-2px",
+      maxWidth: "unset",
+    };
+    Object.assign(state.styles.popper, style);
+  },
+  effect({ state }) {
+    const { width } = state.elements.reference.getBoundingClientRect();
+    const style = {
+      width: `${width}px`,
+      maxWidth: "unset",
+    };
+    Object.assign(state.elements.popper.style, style);
+  },
+};

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

@@ -29,15 +29,13 @@ export const getTimeCheckboxRanges = (
     Number(endMinutes)
   );
 
-  const dateSlices: { [key: string]: Date } = {
-    0: startDate,
-  };
+  const dateSlices: { [key: string]: Date } = {};
   let count = 0;
 
   while (endDate >= startDate) {
     startDate = new Date(startDate.getTime() + range * 60 * 1000);
-    count += 1;
     dateSlices[count] = startDate;
+    count += 1;
   }
 
   const checkboxes = Object.keys(dateSlices)

package/tests/Snippets/Snippets.test.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { shallow, mount } from "enzyme";
+import { createMemoryHistory } from "history";
+import { Router } from "react-router-dom";
+import { SnippetCard } from "../../src/setting/dashboard/snippets/card/SnippetCard";
+import { SnippetForm } from "../../src/setting/dashboard/snippets/form";
+import useTranslationMock from "../__mock__/hooks/useTranslationMock";
+
+const history = createMemoryHistory();
+
+jest.mock("react-i18next", () => ({
+  Trans: jest.fn().mockReturnValue("test"),
+  useTranslation: jest.fn(),
+}));
+
+beforeEach(() => {
+  useTranslationMock();
+});
+
+afterAll(() => {
+  jest.resetAllMocks();
+});
+
+describe("Snippets", () => {
+  it("SnippetCard should be rendered without issues", () => {
+    const component = shallow(
+      <SnippetCard hasPermission href="" name="test" onRemove={() => {}} />
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("SnippetForm should be rendered without issues", () => {
+    const component = shallow(
+      <SnippetForm
+        isLoading={false}
+        onSubmit={() => {}}
+        templates={[{ id: "1", name: "test", colors: [], type: "event" }]}
+      />
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("SnippetCard should be mount without issues", () => {
+    const component = mount(
+      <Router history={history as any}>
+        <SnippetCard hasPermission href="" name="test" onRemove={() => {}} />
+      </Router>
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+
+  it("SnippetForm should be mount without issues", () => {
+    const component = mount(
+      <SnippetForm
+        isLoading={false}
+        onSubmit={() => {}}
+        templates={[{ id: "1", name: "test", colors: [], type: "event" }]}
+        defaultValues={{
+          name: "",
+          type: "event",
+          templateId: "",
+          snippetSetting: {
+            displayDescription: false,
+            displayCost: true,
+            displayType: true,
+          },
+          viewType: "grid",
+        }}
+      />
+    );
+
+    expect(component.exists()).toBeTruthy();
+  });
+});

package/tsconfig.json

@@ -8,7 +8,7 @@
     "tests",
     "**/*.test*",
     "**/*.spec*",
-    "src/**/*.stories.*"
+    "src/**/*.stories.*",
   ],
   "compilerOptions": {
     "skipLibCheck": false,
@@ -40,6 +40,6 @@
     "composite": true,
     "declaration": true,
     "declarationMap": true,
-    "sourceMap": false
+    "sourceMap": false,
   }
 }

package/dist/assets/iframe/backButton.svg

@@ -1,4 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="16" cy="16" r="15.5" fill="#F3F3F3" stroke="#F0F0F0"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.293 15.2929C9.90252 15.6834 9.90252 16.3166 10.293 16.7071L16.657 23.0711C17.0475 23.4616 17.6807 23.4616 18.0712 23.0711C18.4617 22.6805 18.4617 22.0474 18.0712 21.6569L12.4144 16L18.0712 10.3431C18.4617 9.95262 18.4617 9.31946 18.0712 8.92893C17.6807 8.53841 17.0475 8.53841 16.657 8.92893L10.293 15.2929Z" fill="#1A182B"/>
-</svg>

package/dist/assets/iframe/dateInfo/available.svg

@@ -1,5 +0,0 @@
-<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.943939" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-</svg>

package/dist/assets/iframe/dateInfo/limited.svg

@@ -1,5 +0,0 @@
-<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.2406" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#E4E4E4" stroke="white"/>
-<rect x="1.2406" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
-<rect x="1.2406" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
-</svg>

package/dist/assets/iframe/dateInfo/soldOut.svg

@@ -1,6 +0,0 @@
-<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="5.94013" height="10" transform="translate(0.497131)" fill="white"/>
-<rect x="0.591156" y="0.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
-<rect x="0.591156" y="3.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
-<rect x="0.591156" y="6.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
-</svg>