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

package/src/sales/booking/filter/components/MainFilterSection.tsx

@@ -1,131 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Form, Button } from "react-bootstrap";
-import clsx from "clsx";
-import useDebounce from "use-debounce/lib/useDebounce";
-import { BookingContext } from "@licklist/plugins/dist/context/booking/BookingContext";
-import Icon from "../../../../static/Icon";
-import { BookingFilterProps } from "../BookingFilter";
-import { ReactComponent as RefreshIcon } from "../../../../assets/dashboard/refresh.svg";
-import { ReactComponent as FullscreenIcon } from "../../../../assets/dashboard/fullscreen.svg";
-import { ReactComponent as MinimizeIcon } from "../../../../assets/dashboard/minimize.svg";
-
-export type MainFilterSectionProps = BookingFilterProps;
-
-const DEBOUNCE_QUERY_TIME = 300;
-
-export const MainFilterSection = ({
-  isFilterOpen,
-  onAddFiltersClick,
-  onCancelFilterClick,
-  onRefreshClick,
-  onFullscreenButtonClick,
-  autoFocusOnMount,
-  isFullscreenMode,
-}: MainFilterSectionProps) => {
-  const { t } = useTranslation("Design");
-  const { filters, onQueryChange } = useContext(BookingContext);
-  const { search = "" } = filters;
-
-  const [queryValue, setQueryValue] = useState<string>(search);
-  const [debouncedQueryValue] = useDebounce(queryValue, DEBOUNCE_QUERY_TIME);
-
-  const onSearchQueryChange = ({ target: { value } }) => {
-    setQueryValue(value);
-  };
-
-  const onSearchQueryBlur = ({ target: { value } }) => {
-    onQueryChange(value);
-  };
-
-  useEffect(() => {
-    onQueryChange(debouncedQueryValue);
-  }, [onQueryChange, debouncedQueryValue]);
-
-  useEffect(() => {
-    if (queryValue !== search) {
-      setQueryValue(search);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [search]);
-
-  return (
-    <div className="main-filter-section">
-      <div className="search">
-        <Form.Group>
-          <Form.Label>{t("searchBookings")}:</Form.Label>
-          <div className="control-with-icon">
-            <Icon
-              type="search"
-              width="1rem"
-              height="1rem"
-              className="search-icon"
-            />
-            <Form.Control
-              value={queryValue}
-              onChange={onSearchQueryChange}
-              onBlur={onSearchQueryBlur}
-              placeholder={t("searchBookingsPlaceholder")}
-              autoFocus={autoFocusOnMount}
-            />
-          </div>
-        </Form.Group>
-      </div>
-      <div className="buttons">
-        {isFilterOpen ? (
-          <Button
-            variant="link"
-            className="shadow-none cancel-button"
-            onClick={onCancelFilterClick}
-          >
-            <div className="icon">
-              <Icon type="plus" style={{ width: 10 }} />
-            </div>
-            {t("cancel")}
-          </Button>
-        ) : (
-          <Button
-            variant="link"
-            className="shadow-none add-filters-button"
-            onClick={onAddFiltersClick}
-          >
-            <div className="icon">
-              <Icon type="plus" style={{ width: 10 }} />
-            </div>
-            {t("addFilters")}
-          </Button>
-        )}
-
-        <div className="separator" />
-
-        <Button
-          variant="link"
-          className="shadow-none refresh-button"
-          onClick={onRefreshClick}
-        >
-          <div className="icon">
-            <RefreshIcon />
-          </div>
-          {t("refresh")}
-        </Button>
-
-        <div className="separator active" />
-
-        <Button
-          variant="link"
-          className={clsx(
-            "shadow-none",
-            !isFullscreenMode && "fullscreen-button",
-            isFullscreenMode && "minimize-button"
-          )}
-          onClick={onFullscreenButtonClick}
-        >
-          <div className="icon">
-            {isFullscreenMode ? <MinimizeIcon /> : <FullscreenIcon />}
-          </div>
-          {t(isFullscreenMode ? "minimize" : "fullScreen")}
-        </Button>
-      </div>
-    </div>
-  );
-};

package/src/sales/booking/filter/components/ResultTagButton.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import Icon from "../../../../static/Icon";
-
-export type ResultTagButtonProps = {
-  tagKey: string;
-  value: string;
-  onRemoveClick: (tagKey: string) => void;
-};
-
-export const ResultTagButton = ({
-  tagKey,
-  value,
-  onRemoveClick,
-}: ResultTagButtonProps) => {
-  const onButtonClick = () => {
-    onRemoveClick(tagKey);
-  };
-
-  return (
-    <div className="result-tag rounded-pill shadow-none">
-      {value}
-      <div
-        className="icon"
-        role="button"
-        tabIndex={0}
-        onClick={onButtonClick}
-        onKeyUp={onButtonClick}
-      >
-        <Icon type="plus" style={{ width: 10 }} color="#727272" />
-      </div>
-    </div>
-  );
-};

package/src/sales/booking/filter/components/SearchingForSection.tsx

@@ -1,68 +0,0 @@
-import React, { useContext, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { Button } from "react-bootstrap";
-import {
-  BookingContext,
-  BookingFilters,
-} from "@licklist/plugins/dist/context/booking/BookingContext";
-import { ResultTagButton } from "./ResultTagButton";
-
-const SEARCHING_FOR_FILTER_KEYS = ["q", "status", "date", "staffMember"];
-
-export const SearchingForSection = () => {
-  const { t } = useTranslation("Design");
-  const { filters, setFilters } = useContext(BookingContext);
-
-  const filteredFilters = useMemo(() => {
-    return SEARCHING_FOR_FILTER_KEYS.reduce(
-      (prevValues: Partial<BookingFilters>, currentKey: string) => {
-        if (filters[currentKey]) {
-          return { ...prevValues, [currentKey]: filters[currentKey] };
-        }
-
-        return prevValues;
-      },
-      {}
-    );
-  }, [filters]);
-
-  const resetAllFilters = () => {
-    setFilters({ isFilterOpen: true });
-  };
-
-  const onResetSelectedFilter = (key: string) => {
-    setFilters({ ...filters, [key]: "" });
-  };
-
-  if (!Object.keys(filteredFilters).length) {
-    return null;
-  }
-
-  const { search, ...allFilters } = filteredFilters;
-
-  return (
-    <div className="searching-for-section">
-      <div className="tags">
-        <p className="label">{t("Design:searchingFor")}:</p>
-        <p className="search-query-param">{search}</p>
-        {Object.keys(allFilters).map((key: string) => {
-          return (
-            <ResultTagButton
-              key={key}
-              tagKey={key}
-              value={allFilters[key]}
-              onRemoveClick={onResetSelectedFilter}
-            />
-          );
-        })}
-        <Button
-          variant="link"
-          className="shadow-none"
-          onClick={resetAllFilters}
-        >
-          {t("clear")}
-        </Button>
-      </div>
-    </div>
-  );
-};

package/src/sales/booking/filter/index.ts

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

package/src/sales/booking/tabs/BookingTabs.stories.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { BookingContextProvider } from "@licklist/plugins/dist/context/booking/BookingContext";
-import { BookingTabs, BookingTabsProps } from "./BookingTabs";
-
-export default {
-  title: "Sales/Booking/Tabs",
-  component: BookingTabs,
-} as Meta;
-
-export const Default: Story<BookingTabsProps> = () => {
-  return (
-    <BookingContextProvider>
-      <BookingTabs>Bookings</BookingTabs>
-    </BookingContextProvider>
-  );
-};

package/src/sales/booking/tabs/BookingTabs.tsx

@@ -1,88 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { Button } from "react-bootstrap";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import {
-  BOOKING_LIST_TYPE,
-  BOOKING_CALENDAR_TYPE,
-  BOOKING_TYPE,
-} from "@licklist/plugins/dist/context/booking/BookingContext";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import Icon from "../../../static/Icon";
-import { ReactComponent as BookingCalendar } from "../../../assets/dashboard/bookingCalendar.svg";
-import { ReactComponent as BookingList } from "../../../assets/dashboard/bookingList.svg";
-import { ReactComponent as BookingListSmall } from "../../../assets/dashboard/bookingListSmall.svg";
-
-const VIEW_TYPES: BOOKING_TYPE[] = [BOOKING_LIST_TYPE, BOOKING_CALENDAR_TYPE];
-
-export type BookingTabsProps = HasPermissionProp &
-  PropsWithChildren<{
-    onReportsClick?: () => void;
-    onAddButtonClick?: () => void;
-    viewType: BOOKING_TYPE;
-    onSetType: (value: BOOKING_TYPE) => void;
-  }>;
-
-export const BookingTabs = ({
-  children,
-  onReportsClick,
-  onAddButtonClick,
-  hasPermission = false,
-  viewType,
-  onSetType,
-}: BookingTabsProps) => {
-  const { t } = useTranslation("Design");
-
-  return (
-    <div className="booking-tabs-pane">
-      <div className="booking-tabs">
-        {VIEW_TYPES.map((tabType: BOOKING_TYPE) => {
-          return (
-            <Button
-              key={tabType}
-              variant="link"
-              size="sm"
-              className={clsx(
-                "p-0 m-0 pr-2 shadow-none",
-                viewType === tabType && "active"
-              )}
-              onClick={() => {
-                onSetType(tabType);
-              }}
-            >
-              {tabType === BOOKING_LIST_TYPE ? (
-                <BookingList />
-              ) : (
-                <BookingCalendar />
-              )}
-            </Button>
-          );
-        })}
-      </div>
-      <span className="separator" />
-      <div className="children">{children}</div>
-      {hasPermission && (
-        <div className="buttons">
-          <Button
-            variant="outline-primary"
-            className="shadow-none mr-4"
-            onClick={onReportsClick}
-          >
-            <BookingListSmall className="mr-2" />
-            {t("generateReports")}
-          </Button>
-          <Button
-            variant="primary"
-            className="shadow-none"
-            onClick={onAddButtonClick}
-          >
-            <div className="icon">
-              <Icon type="plus" style={{ width: 10 }} color="#0E8CE2" />
-            </div>
-            {t("newBooking")}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/sales/booking/tabs/index.ts

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

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: [],
-    },
-  ],
-};