@licklist/design 0.44.526 → 0.44.528

package/src/widgets/CheckboxGroup/CheckboxGroup.tsx

@@ -1,64 +0,0 @@
-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

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

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

@@ -1,18 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-/* 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

@@ -1,27 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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/tests/Snippets/Snippets.test.tsx

@@ -1,77 +0,0 @@
-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();
-  });
-});