@licklist/design 0.44.485-dev.8 → 0.44.485-dev.81

package/src/setting/dashboard/snippets/form/SnippetForm.tsx

@@ -1,94 +0,0 @@
-import React, { useEffect } from "react";
-import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
-import { Button, Form } from "react-bootstrap";
-import { FormProvider, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
-import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
-import {
-  SnippetViewType,
-  SnippetType,
-} from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
-import { SnippetTemplateType } from "@licklist/core/dist/DataMapper/Provider/SnippetTemplateDataMapper";
-import { SnippetControl } from "../control";
-import { SnippetContextProvider, SnippetLoadingContext } from "./context";
-
-export interface SnippetFormValues extends FormValues {
-  name: string;
-  type: SnippetType;
-  templateId: string;
-  snippetSetting?: {
-    displayDescription: boolean;
-    displayCost: boolean;
-    displayType: boolean;
-  };
-  viewType: SnippetViewType;
-}
-
-export interface ShortSnippetTemplate {
-  id: string;
-  name: string;
-  colors: Array<string>;
-  type: SnippetTemplateType;
-}
-
-export interface SnippetFormProps extends HasPermissionProp {
-  isLoading: boolean;
-  onSubmit: (values: SnippetFormValues) => void;
-  templates: Array<ShortSnippetTemplate>;
-  defaultValues?: SnippetFormValues;
-  serverErrors?: ServerError;
-  providerHasMap?: boolean | null;
-}
-
-export function SnippetForm({
-  isLoading,
-  defaultValues,
-  onSubmit,
-  templates,
-  hasPermission = true,
-  serverErrors,
-  providerHasMap = false,
-}: SnippetFormProps) {
-  const { t } = useTranslation("Design");
-
-  const form = useForm<SnippetFormValues>({ defaultValues });
-
-  const { setError } = form;
-
-  useEffect(() => {
-    FormErrorService.handleServerErrors(serverErrors, setError);
-  }, [serverErrors, setError]);
-
-  return (
-    <SnippetContextProvider>
-      <FormProvider {...form}>
-        <Form onSubmit={form.handleSubmit(onSubmit)}>
-          <SnippetLoadingContext.Consumer>
-            {({ isLoading: contextIsLoading }) => {
-              return (
-                <>
-                  <SnippetControl
-                    templates={templates}
-                    isLoading={isLoading}
-                    providerHasMap={providerHasMap}
-                  />
-                  {hasPermission && (
-                    <Button
-                      className="mt-5 d-no dne d-md-block"
-                      type="submit"
-                      disabled={contextIsLoading}
-                    >
-                      {t("save")}
-                    </Button>
-                  )}
-                </>
-              );
-            }}
-          </SnippetLoadingContext.Consumer>
-        </Form>
-      </FormProvider>
-    </SnippetContextProvider>
-  );
-}

package/src/setting/dashboard/snippets/form/context.tsx

@@ -1,18 +0,0 @@
-import React, { createContext, useState } from "react";
-
-interface LoadingContext {
-  isLoading: boolean;
-  setLoading: (loading: boolean) => void;
-}
-
-export const SnippetLoadingContext = createContext<LoadingContext | null>(null);
-
-export function SnippetContextProvider({ children }) {
-  const [loading, setLoading] = useState(false);
-
-  return (
-    <SnippetLoadingContext.Provider value={{ isLoading: loading, setLoading }}>
-      {children}
-    </SnippetLoadingContext.Provider>
-  );
-}

package/src/setting/dashboard/snippets/form/index.ts

@@ -1 +0,0 @@
-export * from "./SnippetForm";

package/src/setting/dashboard/snippets/modal/SnippetViewTypeModal.stories.tsx

@@ -1,28 +0,0 @@
-import React, { useState } from "react";
-import { Button } from "react-bootstrap";
-import { Meta, Story } from "@storybook/react";
-
-import {
-  SnippetViewTypeModal,
-  SnippetViewTypeModalProps,
-} from "./SnippetViewTypeModal";
-
-export default {
-  title: "Snippets / SnippetViewTypeModal",
-} as Meta;
-
-export const Default: Story<SnippetViewTypeModalProps> = () => {
-  const [isVisible, setIsVisible] = useState(false);
-  return (
-    <div>
-      <Button onClick={() => setIsVisible(true)}>Open modal</Button>
-      <SnippetViewTypeModal
-        isVisible={isVisible}
-        onSubmit={(value) => console.log(value)}
-        onHide={() => setIsVisible(false)}
-      />
-    </div>
-  );
-};
-
-Default.args = {};

package/src/setting/dashboard/snippets/modal/SnippetViewTypeModal.tsx

@@ -1,104 +0,0 @@
-import React, { useState } from "react";
-import { Button, Modal } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import clsx from "clsx";
-
-import ModalHeader from "react-bootstrap/ModalHeader";
-import ModalTitle from "react-bootstrap/ModalTitle";
-import Col from "react-bootstrap/Col";
-import {
-  SNIPPET_VIEW_TYPE_GRID,
-  SNIPPET_VIEW_TYPE_LIST,
-  SnippetViewType,
-} from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
-import Icon from "../../../../static/Icon";
-
-export const SNIPPET_VIEW_TYPES: {
-  [SNIPPET_VIEW_TYPE_GRID]: { label: string; icon: string };
-  [SNIPPET_VIEW_TYPE_LIST]: { label: string; icon: string };
-} = {
-  [SNIPPET_VIEW_TYPE_GRID]: {
-    label: SNIPPET_VIEW_TYPE_GRID,
-    icon: "th",
-  },
-  [SNIPPET_VIEW_TYPE_LIST]: {
-    label: SNIPPET_VIEW_TYPE_LIST,
-    icon: "bars",
-  },
-};
-
-export interface SnippetViewTypeModalProps {
-  isVisible: boolean;
-  onHide: () => void;
-  onSubmit: (value: SnippetViewType) => void;
-}
-
-export const SnippetViewTypeModal = ({
-  isVisible,
-  onHide,
-  onSubmit,
-}: SnippetViewTypeModalProps) => {
-  const { t } = useTranslation(["Design"]);
-  const allViewTypes = Object.keys(SNIPPET_VIEW_TYPES);
-  const [viewType, setViewType] = useState<SnippetViewType>("grid");
-
-  const onModalSubmit = () => {
-    onSubmit(viewType);
-    onHide();
-  };
-
-  return (
-    <Modal
-      size="lg"
-      centered
-      show={isVisible}
-      onHide={onHide}
-      className="p-3 border-0"
-      animation={false}
-      contentClassName="rounded"
-    >
-      <ModalHeader className="align-items-center border-0">
-        <ModalTitle as="h5">{t("Design:selectSnippetViewType")}</ModalTitle>
-
-        <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-          <Icon type="times" height="1.2rem" />
-        </Button>
-      </ModalHeader>
-
-      <Modal.Body>
-        <div className="d-flex flex-row flex-wrap p-4 justify-content-between">
-          {allViewTypes.map((currentViewType) => {
-            const { label, icon } = SNIPPET_VIEW_TYPES[currentViewType];
-            return (
-              <Col key={label}>
-                <Button
-                  variant="outline-light"
-                  className={clsx(
-                    "d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded",
-                    viewType === currentViewType && "selected-snippet-type"
-                  )}
-                  role="button"
-                  tabIndex={0}
-                  onClick={() =>
-                    setViewType(currentViewType as SnippetViewType)
-                  }
-                >
-                  <Icon type={icon} color="#0e8ce2" height="4rem" />
-                  <h6 className="text-dark mt-3">{t(label)}</h6>
-                </Button>
-              </Col>
-            );
-          })}
-        </div>
-      </Modal.Body>
-      <Modal.Footer className="border-0">
-        <Button variant="secondary" onClick={onHide}>
-          {t("cancel")}
-        </Button>
-        <Button variant="primary" onClick={onModalSubmit}>
-          {t("confirm")}
-        </Button>
-      </Modal.Footer>
-    </Modal>
-  );
-};

package/src/setting/dashboard/snippets/modal/index.ts

@@ -1,2 +0,0 @@
-export { SnippetViewTypeModal } from "./SnippetViewTypeModal";
-export type { SnippetViewTypeModalProps } from "./SnippetViewTypeModal";

package/src/styles/widgets/BookingStyleSelector.scss

@@ -1,14 +0,0 @@
-.widget-booking-style-selector {
-  margin-bottom: 2rem;
-
-  h4 {
-    margin-bottom: 1.5rem;
-  }
-
-  .wrapper {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 1rem;
-  }
-}

package/src/styles/widgets/CalendarStyleSelector.scss

@@ -1,17 +0,0 @@
-.widget-calendar-style-selector {
-  margin-bottom: 2rem;
-
-  p {
-    font-size: 0.8125rem;
-  }
-
-  .controls {
-    display: flex;
-    gap: 2rem;
-    margin-top: 0.75rem;
-
-    .form-check {
-      padding-left: 0;
-    }
-  }
-}

package/src/styles/widgets/CheckboxGroup.scss

@@ -1,15 +0,0 @@
-.widgets-checkbox-group {
-  h3 {
-    margin-bottom: 0.75rem;
-  }
-
-  .custom-checkbox {
-    margin-top: 0;
-  }
-
-  .divider {
-    height: 2px;
-    margin-bottom: 1.5rem;
-    background-color: #e7e7e7;
-  }
-}

package/src/styles/widgets/ProductSetSelector.scss

@@ -1,19 +0,0 @@
-.widget-builder-product-set-selector {
-  button {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    height: 1.5rem;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    color: #000;
-
-    &:hover,
-    &:focus,
-    &:active {
-      background-color: transparent !important;
-      color: #0e8ce2 !important;
-    }
-  }
-}

package/src/styles/widgets/SnippetCode.scss

@@ -1,18 +0,0 @@
-.widget-designer-snippet-code {
-  .code-container {
-    padding: 1rem;
-    background: #fff;
-    border: 2px solid #dcdcdc;
-    border-radius: 0.5rem;
-    word-break: break-all;
-  }
-
-  button {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    border: 2px solid #0e8ce2;
-    background: #fff;
-    color: #0e8ce2;
-  }
-}

package/src/styles/widgets/WidgetBuilderForm.scss

@@ -1,51 +0,0 @@
-.widget-builder-form {
-  justify-content: space-between;
-
-  h2 {
-    font-size: 1.5rem;
-  }
-
-  h3 {
-    font-size: 1rem;
-    font-weight: 600;
-  }
-
-  h4 {
-    font-size: 0.875rem;
-    font-weight: 400;
-  }
-
-  p {
-    font-size: 0.8125rem;
-  }
-
-  input[type="text"],
-  select {
-    height: 2.5rem;
-    border-radius: 0.5rem;
-  }
-
-  button {
-    border-radius: 0.75rem;
-  }
-
-  .form-label {
-    font-size: 0.875rem;
-  }
-
-  &-customizations {
-    margin-bottom: 1rem;
-  }
-
-  &-right-column {
-    padding: 0;
-  }
-
-  &-grey {
-    height: fit-content;
-    margin-bottom: 2rem;
-    padding: 1.5rem;
-    background-color: #fafafa;
-    border-radius: 0.75rem;
-  }
-}

package/src/styles/widgets/WidgetTypeSelector.scss

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

package/src/styles/widgets/_index.scss

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

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

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

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

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

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

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

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

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

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

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

@@ -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} />;
-};