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

package/src/setting/dashboard/snippets/control/SnippetControl.tsx

@@ -1,237 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Col, Row, Form } from "react-bootstrap";
-import { useFormContext, Controller } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { useId } from "@react-aria/utils";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { SNIPPET_TYPES } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
-import { Switch } from "../../../../static";
-import { ShortSnippetTemplate, SnippetFormValues } from "../form/SnippetForm";
-
-export interface SnippetControlProps {
-  isLoading: boolean;
-  templates: Array<ShortSnippetTemplate>;
-  providerHasMap?: boolean | null;
-}
-
-export function SnippetControl({
-  isLoading,
-  templates,
-  providerHasMap,
-}: SnippetControlProps) {
-  const { t } = useTranslation(["Design", "Validation", "User"]);
-  const [isValid, setIsValid] = useState(true);
-  const nameId = useId();
-  const displayDescriptionId = useId();
-  const displayCostId = useId();
-  const displayTypeId = useId();
-
-  const {
-    register,
-    watch,
-    control,
-    formState: { errors },
-    setValue,
-  } = useFormContext<SnippetFormValues>();
-  const type = watch("type");
-  const isEvent = type === "event";
-
-  const { displayCost, displayDescription, displayType } =
-    watch("snippetSetting");
-  const templateId = watch("templateId") || "";
-
-  useEffect(() => {
-    if (isEvent) {
-      setIsValid(displayDescription || displayCost || displayType);
-    }
-  }, [isEvent, displayDescription, displayCost, displayType]);
-
-  useEffect(() => {
-    if (!templateId) return;
-
-    const selectedTemplate = templates.find(
-      (template) =>
-        template.type === type && String(templateId) === String(template.id)
-    );
-
-    if (selectedTemplate) return;
-
-    setValue("templateId" as const, "");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [templateId, type, templates]);
-
-  return (
-    <>
-      <Row>
-        <Form.Group
-          as={Col}
-          controlId={nameId}
-          xs
-          sm={12}
-          md={8}
-          lg={10}
-          xl={12}
-        >
-          <Form.Label>{t("name")}</Form.Label>
-          <Form.Control
-            {...register("name", {
-              maxLength: 255,
-              required: t("Validation:fieldRequired", {
-                attribute: t("name"),
-              }) as string,
-            })}
-            placeholder={t("Design:snippetName")}
-            isInvalid={Boolean(errors.name)}
-          />
-          <Form.Control.Feedback type="invalid">
-            {errors.name?.message}
-          </Form.Control.Feedback>
-        </Form.Group>
-      </Row>
-      {providerHasMap && (
-        <Row>
-          <Controller
-            control={control}
-            name="type"
-            render={({ field: { name, value, onChange } }) => (
-              <Form.Group as={Col}>
-                <Form.Label>{t("type")}</Form.Label>
-                <Switch
-                  name={name}
-                  options={SNIPPET_TYPES.map((type) => ({
-                    id: type,
-                    value: t(type),
-                  }))}
-                  value={value}
-                  onChange={onChange}
-                  disabled={isLoading}
-                />
-              </Form.Group>
-            )}
-          />
-        </Row>
-      )}
-
-      <Row>
-        {isEvent && (
-          <Form.Group
-            as={Col}
-            className="mt-4"
-            xs
-            sm={12}
-            md={8}
-            lg={10}
-            xl={12}
-          >
-            <Form.Label className="mb-3">{t("Options")}</Form.Label>
-            <Form.Check
-              {...register("snippetSetting.displayDescription")}
-              id={displayDescriptionId}
-              isInvalid={!isValid}
-              name="snippetSetting.displayDescription"
-              label={t("Design:shouldShowDesc")}
-              custom
-              className="mb-3"
-              disabled={isLoading}
-            />
-            <Form.Check
-              {...register("snippetSetting.displayCost")}
-              id={displayCostId}
-              isInvalid={!isValid}
-              name="snippetSetting.displayCost"
-              label={t("Design:shouldShowCost")}
-              custom
-              className="mb-3"
-              disabled={isLoading}
-            />
-            <Form.Check
-              {...register("snippetSetting.displayType")}
-              id={displayTypeId}
-              isInvalid={!isValid}
-              name="snippetSetting.displayType"
-              label={t("Design:shouldShowType")}
-              custom
-              disabled={isLoading}
-            />
-            {!isValid && (
-              <div className="d-block invalid-feedback">
-                {t("Validation:fieldAtLeastSelected", {
-                  number: t("Design:one"),
-                  filedType: t("Design:checkbox"),
-                })}
-              </div>
-            )}
-          </Form.Group>
-        )}
-      </Row>
-      {isEvent && (
-        <Row>
-          <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
-            <Form.Label>{t("eventsView")}</Form.Label>
-            <Form.Control
-              as="select"
-              {...register("viewType", {
-                required: t("Validation:fieldRequired", {
-                  attribute: t("viewType"),
-                }) as string,
-              })}
-              placeholder={t("Design:eventsView")}
-              disabled={isLoading}
-            >
-              <option value="grid">{t("Design:grid")}</option>
-              <option value="list">{t("Design:list")}</option>
-            </Form.Control>
-          </Form.Group>
-        </Row>
-      )}
-      <Row>
-        <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
-          <Controller
-            control={control}
-            name="templateId"
-            rules={{ required: true }}
-            render={({
-              field: { value, onChange },
-              fieldState: { invalid, error },
-            }) => {
-              const fieldSetValue = value ? String(value) : "";
-              return (
-                <>
-                  <Form.Label className="mt-5">
-                    {t("snippetTemplate")}
-                  </Form.Label>
-                  <Form.Control
-                    as="select"
-                    disabled={isLoading}
-                    onChange={onChange}
-                    isInvalid={invalid}
-                    value={fieldSetValue}
-                  >
-                    <option value="">{t("Design:pleaseChooseOne")}</option>
-                    {templates?.map((template) => {
-                      if (template.type !== type) {
-                        return null;
-                      }
-
-                      return (
-                        <option value={template.id} key={template.id}>
-                          {template.name}
-                        </option>
-                      );
-                    })}
-                  </Form.Control>
-                  <Form.Control.Feedback type="invalid">
-                    {HookFormService.hasError(error, "required") &&
-                      t("Validation:fieldRequired", {
-                        attribute: t("Design:snippetTemplate"),
-                      })}
-                  </Form.Control.Feedback>
-                </>
-              );
-            }}
-          />
-        </Form.Group>
-      </Row>
-    </>
-  );
-}

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

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

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

@@ -1,104 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { boolean } from "@storybook/addon-knobs";
-import { SnippetForm, SnippetFormProps } from "./SnippetForm";
-
-export default {
-  title: "Snippets / Snippet Form",
-} as Meta;
-
-export const Default: Story<SnippetFormProps> = (args) => {
-  const providerHasMap = boolean("providerHasMap", true);
-
-  return <SnippetForm {...args} providerHasMap={providerHasMap} />;
-};
-
-export const Empty: Story<SnippetFormProps> = (args) => {
-  const providerHasMap = boolean("providerHasMap", true);
-
-  return <SnippetForm {...args} providerHasMap={providerHasMap} />;
-};
-
-export const ServerErrors: Story<SnippetFormProps> = (args) => {
-  const providerHasMap = boolean("providerHasMap", true);
-
-  return <SnippetForm {...args} providerHasMap={providerHasMap} />;
-};
-
-Default.args = {
-  onSubmit: (data) => console.log(data),
-  isLoading: false,
-  hasPermission: true,
-  defaultValues: {
-    name: "",
-    type: "event",
-    templateId: "62419ded59888e0e590a9182",
-    snippetSetting: {
-      displayDescription: false,
-      displayCost: true,
-      displayType: true,
-    },
-  },
-  templates: [
-    {
-      id: "62419ded59888e0e590a9182",
-      name: "Template21 (DFtest)",
-      colors: [],
-    },
-    {
-      id: "6241a12f5334b6556b0ffea2",
-      name: "Template12",
-      colors: [],
-    },
-  ],
-};
-
-Empty.args = {
-  onSubmit: (data) => console.log(data),
-  isLoading: true,
-  defaultValues: {
-    name: "",
-    type: "event",
-    templateId: "",
-    snippetSetting: {
-      displayDescription: true,
-      displayCost: true,
-      displayType: true,
-    },
-  },
-  templates: [
-    {
-      id: "62419ded59888e0e590a9182",
-      name: "Template21 (DFtest)",
-      colors: [],
-    },
-    {
-      id: "6241a12f5334b6556b0ffea2",
-      name: "Template12",
-      colors: [],
-    },
-  ],
-};
-
-ServerErrors.args = {
-  onSubmit: (data) => console.log(data),
-  isLoading: true,
-  serverErrors: { name: ["Name is required field"] },
-  defaultValues: {
-    name: "",
-    type: "event",
-    templateId: "",
-    snippetSetting: {
-      displayDescription: true,
-      displayCost: true,
-      displayType: true,
-    },
-  },
-  templates: [
-    {
-      id: "6241a12f5334b6556b0ffea2",
-      name: "Template12",
-      colors: [],
-    },
-  ],
-};

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