@licklist/design 0.44.485-dev.88 → 0.44.485-dev.9

package/src/styles/widgets/WidgetTypeSelector.scss

@@ -0,0 +1,6 @@
+.widget-type-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+}

package/src/styles/widgets/_index.scss

@@ -0,0 +1,9 @@
+@import "./WidgetTypeRadioButton";
+@import "./CalendarStyleSelector";
+@import "./CheckboxGroup";
+@import "./ImageRadioInput";
+@import "./BookingStyleSelector";
+@import "./WidgetTypeSelector";
+@import "./WidgetBuilderForm";
+@import "./SnippetCode";
+@import "./ProductSetSelector";

package/src/table/FilterHelperComponent.tsx

@@ -33,7 +33,6 @@ function FilterHelperComponent({
     if (onClickFn) {
       onClickFn("");
     }
-    setItem("");
   };
 
   const onSearch = () => {

package/src/table/StaticTable.tsx

@@ -11,17 +11,14 @@ export interface StaticTableData {
   [key: string]: ReactNode;
 }
 
-export interface StaticTableProps {
+interface StaticTableProps {
   className?: string;
   columns: StaticTableColumn[];
-  data: StaticTableData[] | any[];
+  data: StaticTableData[];
   striped?: boolean;
   bordered?: boolean;
   hover?: boolean;
   size?: string;
-  displayHeader?: boolean;
-  renderItemFn?: (data?: any) => ReactNode;
-  isSingleRowForKey?: boolean;
 }
 
 export function StaticTable({
@@ -32,9 +29,6 @@ export function StaticTable({
   bordered = false,
   hover = false,
   size,
-  displayHeader = true,
-  isSingleRowForKey = false,
-  renderItemFn,
 }: StaticTableProps) {
   return (
     <Table
@@ -44,38 +38,18 @@ export function StaticTable({
       hover={hover}
       size={size}
     >
-      {displayHeader && <TableHead columns={columns} />}
-      {isSingleRowForKey ? (
-        <tbody>
-          {data.map((row) => (
-            <>
-              {renderItemFn
-                ? renderItemFn(row)
-                : columns.map((column) => (
-                    <tr key={row.key}>
-                      <td key={`${column.key}-${row[column.key]}`}>
-                        {row[column.key]}
-                      </td>
-                    </tr>
-                  ))}
-            </>
-          ))}
-        </tbody>
-      ) : (
-        <tbody>
-          {data.map((row) => (
-            <tr key={row.key}>
-              {renderItemFn
-                ? renderItemFn(row)
-                : columns.map((column) => (
-                    <td key={`${column.key}-${row[column.key]}`}>
-                      {row[column.key]}
-                    </td>
-                  ))}
-            </tr>
-          ))}
-        </tbody>
-      )}
+      <TableHead columns={columns} />
+      <tbody>
+        {data.map((row) => (
+          <tr key={row.key}>
+            {columns.map((column) => (
+              <td key={`${column.key}-${row[column.key]}`}>
+                {row[column.key]}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
     </Table>
   );
 }

package/src/typeahead/Typeahead.stories.tsx

@@ -1,23 +1,20 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import { FormProvider, useForm } from "react-hook-form";
 import { Typeahead } from "./Typeahead";
 
-storiesOf("Typeahead", module).add("Typeahead", () => {
-  const form = useForm();
-  return (
-    <FormProvider {...form}>
+storiesOf("Typeahead", module)
+  .add("Typeahead", () => (
+    <>
       <Typeahead
         name="user"
-        isMultipleChoise
         options={[
           { id: 1, value: "user1", label: "User1" },
           { id: 2, value: "user2", label: "User2" },
           { id: 3, value: "user3", label: "User3" },
         ]}
+        setValue={() => {}}
         placeholder="Select"
         noOptionsMessage="No Options Found"
       />
-    </FormProvider>
-  );
-});
+    </>
+  ));

package/src/typeahead/Typeahead.tsx

@@ -1,55 +1,47 @@
 import React from "react";
-import Select, { CSSObjectWithLabel } from "react-select";
-import { Controller, useFormContext } from "react-hook-form";
+import Select from "react-select";
+import { useForm, Controller } from "react-hook-form";
 
 export type TypeaheadOptions = {
-  id: number | string;
-  value: any;
+  id: number;
+  value: string;
   label: string;
 };
 
 export interface TypeaheadProps {
   options: TypeaheadOptions[];
+  setValue: (value: string | any) => void;
   placeholder: string;
   isRequired?: boolean;
   name: string;
-  isMultipleChoise?: boolean;
   noOptionsMessage: string;
-  isInvalid?: boolean;
 }
 
 function Typeahead({
   options,
+  setValue,
   placeholder,
   isRequired = false,
-  isMultipleChoise,
   name = "",
   noOptionsMessage = "",
-  isInvalid,
-}: TypeaheadProps) {
-  const { control } = useFormContext();
-
-  const getErrorStyle = (): CSSObjectWithLabel =>
-    isInvalid ? { borderColor: "red" } : {};
+}) {
+  const { control } = useForm({
+    mode: "onChange",
+  });
+  const prefix = "id";
 
   return (
     <>
       <Controller
-        name={name}
+        name={`${name}.${prefix as string}` as const}
         control={control}
         rules={{ required: isRequired }}
         render={({ field }) => (
           <Select
             placeholder={placeholder}
             value={field.value}
-            isMulti={isMultipleChoise}
-            styles={{
-              control: (base) => ({
-                ...base,
-                ...getErrorStyle(),
-              }),
-            }}
             onChange={(value) => {
+              setValue(`${name}.${prefix}`, value.id);
               field.onChange(value);
             }}
             options={options}

package/src/types/iframe.ts

@@ -6,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;
@@ -30,7 +28,7 @@ export interface ProductCategory {
 export interface MenuStep {
   id: number;
   name: string;
-  productCategories?: ProductCategory[];
+  productCategories: ProductCategory[];
 }
 
 export interface Menu {
@@ -38,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>
+  );
+};