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

package/src/notification/hooks/useTranslatedParameters.ts

@@ -1,27 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-type UseTranslatedParametersProps = {
-  isDefault: boolean;
-  isActive: boolean;
-};
-
-export const useTranslatedParameters = ({
-  isActive,
-  isDefault,
-}: UseTranslatedParametersProps) => {
-  const { t } = useTranslation(["Design"]);
-
-  const translatedParameters = () => {
-    const texts: string[] = [];
-    if (isDefault) {
-      texts.push(t("Design:default"));
-    }
-    if (isActive) {
-      texts.push(t("Design:active"));
-    }
-
-    return texts.join(", ");
-  };
-
-  return translatedParameters();
-};

package/src/product-set/hooks/useSortableTreeFunctions.ts

@@ -1,37 +0,0 @@
-import { useState } from "react";
-import { useFormContext } from "react-hook-form";
-
-interface useSortableTreeFunctionsProps {
-  fieldName: string;
-  remove: (index?: number | number[]) => void;
-}
-export const useSortableTreeFunctions = ({
-  fieldName,
-  remove,
-}: useSortableTreeFunctionsProps) => {
-  const { getValues, setValue } = useFormContext();
-  const [previousValue, setEditValue] = useState(null);
-
-  const edit = (index: number) => {
-    const currentCategoryProduct = getValues(`${fieldName}.${index}` as const);
-    const cloneCategoryProduct = structuredClone(currentCategoryProduct);
-    setEditValue(cloneCategoryProduct);
-  };
-
-  const cancelChanges = (index: number) => {
-    if (!previousValue) {
-      return remove(index);
-    }
-    return setValue(`${fieldName}.${index}` as const, previousValue);
-  };
-
-  const saveValidField = () => {
-    setEditValue(null);
-  };
-
-  return {
-    edit,
-    cancelChanges,
-    saveValidField,
-  };
-};

package/src/provider/constants.ts

@@ -1 +0,0 @@
-export const MAX_DESCRIPTION_CHARACTERS_LENGTH = 25500;

package/src/radio-card/RadioCard.stories.tsx

@@ -1,48 +0,0 @@
-import React, { useEffect } from "react";
-import { Meta, Story } from "@storybook/react";
-import { FormProvider, useForm } from "react-hook-form";
-import { RadioCard, RadioCardProps } from "./RadioCard";
-
-export default {
-  title: "Widgets / Widget Type Radio Card",
-  component: RadioCard,
-} as Meta;
-
-type FormModel = {
-  name: string;
-};
-
-export const Default: Story<RadioCardProps<FormModel>> = (args) => {
-  const form = useForm<FormModel>();
-
-  return (
-    <FormProvider {...form}>
-      <RadioCard {...args} />
-    </FormProvider>
-  );
-};
-
-Default.args = {
-  label: "Venue Map",
-  description: "Date > Floor",
-  name: "name",
-};
-
-export const Invalid: Story<RadioCardProps<FormModel>> = (args) => {
-  const form = useForm<FormModel>();
-
-  return (
-    <FormProvider {...form}>
-      <RadioCard {...args} />
-    </FormProvider>
-  );
-};
-
-Invalid.args = {
-  label: "Venue Map",
-  description: "Date > Floor",
-  name: "name",
-  inputProps: {
-    isInvalid: true,
-  },
-};

package/src/radio-card/RadioCard.tsx

@@ -1,49 +0,0 @@
-import clsx from "clsx";
-import React, { ReactNode } from "react";
-import { Form } from "react-bootstrap";
-import { FormCheckInputProps } from "react-bootstrap/esm/FormCheckInput";
-import { Path, RegisterOptions, useFormContext } from "react-hook-form";
-
-export type RadioCardProps<FormModel> = {
-  label: string;
-  description: ReactNode;
-  name: Path<FormModel>;
-  value: string;
-  rules: RegisterOptions<FormModel>;
-  inputProps?: FormCheckInputProps;
-};
-
-export const RadioCard = <FormModel,>({
-  label,
-  description,
-  name,
-  value,
-  rules,
-  inputProps,
-}: RadioCardProps<FormModel>) => {
-  const {
-    register,
-    formState: { errors },
-  } = useFormContext<FormModel>();
-
-  const isInvalid = !!errors[name as string] || inputProps?.isInvalid;
-
-  return (
-    <Form.Check className={clsx("radio-card", isInvalid && "invalid")}>
-      <Form.Check.Label>
-        <div className="radio-card-controls">
-          <Form.Check.Input
-            type="radio"
-            isInvalid={isInvalid}
-            value={value}
-            {...register(name, rules)}
-            {...inputProps}
-          />
-          <span>{label}</span>
-        </div>
-
-        <p className="radio-card-description">{description}</p>
-      </Form.Check.Label>
-    </Form.Check>
-  );
-};

package/src/radio-card/index.ts

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

package/src/sales/booking/filter/AdditionalFilterSection.tsx

@@ -1,148 +0,0 @@
-import React, { useContext, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { Form, Button, Row, Col } from "react-bootstrap";
-import { Controller, useForm } from "react-hook-form";
-import {
-  ORDER_STATUS_PENDING,
-  ORDER_STATUS_CANCELLED,
-  ORDER_STATUS_COMPLETED,
-  ORDER_STATUS_ACTION_REQUIRED,
-} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import {
-  BookingContext,
-  BookingFilters,
-} from "@licklist/plugins/dist/context/booking/BookingContext";
-import { DateRangeInput } from "../../../static/date-range-input/DateRangeInput";
-import { FilterSectionProps } from "./SearchingForSection";
-
-const ORDER_STATUSES_FOR_UPDATE = [
-  ORDER_STATUS_PENDING,
-  ORDER_STATUS_CANCELLED,
-  ORDER_STATUS_COMPLETED,
-  ORDER_STATUS_ACTION_REQUIRED,
-];
-
-// @TODO fix issue with import DateRangeInput and move component to dashboard
-export type AdditionalFilterSectionProps = {
-  onAddFiltersClick?: () => void;
-  onCancelFilterClick?: () => void;
-  onRefreshClick?: () => void;
-  onFullscreenButtonClick?: () => void;
-  isFilterOpen?: boolean;
-};
-
-export const AdditionalFilterSection = ({
-  staffMembers,
-  isLoading,
-}: FilterSectionProps) => {
-  const { t } = useTranslation("Design");
-  const { filters, setFilters } = useContext(BookingContext);
-
-  const { handleSubmit, register, setValue, reset, watch, control } = useForm<
-    Partial<BookingFilters>
-  >({
-    defaultValues: filters,
-  });
-
-  const startDate = watch("order_date_from");
-  const endDate = watch("order_date_to");
-
-  const onFormSubmit = (values: Partial<BookingFilters>) => {
-    setFilters(values);
-  };
-
-  useEffect(() => {
-    reset(filters);
-  }, [filters, reset]);
-
-  return (
-    <div className="additional-filter-section">
-      <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <Row className="additional-filter-container">
-          <Col md="3">
-            <Form.Group>
-              <Form.Label>{t("createdBy")}</Form.Label>
-              <Controller
-                control={control}
-                name="created_by"
-                render={({ field }) => {
-                  const filedValue = String(field?.value);
-                  return (
-                    <Form.Control
-                      as="select"
-                      value={filedValue}
-                      disabled={isLoading}
-                      onChange={field?.onChange}
-                    >
-                      <option value="" selected={filedValue === ""}>
-                        {t("Design:choose")}
-                      </option>
-                      {staffMembers?.map((member) => (
-                        <option
-                          value={member?.id}
-                          key={member?.id}
-                          selected={filedValue === String(member?.id)}
-                        >
-                          {member?.firstName} {member?.lastName}
-                        </option>
-                      ))}
-                    </Form.Control>
-                  );
-                }}
-              />
-            </Form.Group>
-          </Col>
-
-          <Col md="3">
-            <Form.Group>
-              <Form.Label>{t("bookingStatus")}</Form.Label>
-              <Form.Control
-                disabled={isLoading}
-                {...register("status")}
-                as="select"
-              >
-                <option value="">{t("Design:choose")}</option>
-                {Object.keys(ORDER_STATUSES_FOR_UPDATE).map((key: string) => (
-                  <option
-                    key={ORDER_STATUSES_FOR_UPDATE[key]}
-                    value={ORDER_STATUSES_FOR_UPDATE[key]}
-                  >
-                    {t(`Design:${ORDER_STATUSES_FOR_UPDATE[key]}`)}
-                  </option>
-                ))}
-              </Form.Control>
-            </Form.Group>
-          </Col>
-
-          <Col className="date-container">
-            <Form.Group>
-              <Form.Label>{t("date")}</Form.Label>
-              <DateRangeInput
-                disabled={isLoading}
-                placeholder={t("date")}
-                startDate={startDate}
-                endDate={endDate}
-                onDateChange={({ startDate, endDate }) => {
-                  setValue("order_date_from", startDate);
-                  setValue("order_date_to", endDate);
-                }}
-              />
-            </Form.Group>
-          </Col>
-
-          <Col md="3" className="d-flex align-items-end">
-            <Form.Group>
-              <Button
-                disabled={isLoading}
-                type="submit"
-                className="shadow-none"
-              >
-                {t("apply")}
-              </Button>
-            </Form.Group>
-          </Col>
-        </Row>
-      </Form>
-    </div>
-  );
-};

package/src/sales/booking/filter/types.tsx

@@ -1,14 +0,0 @@
-import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
-import { PropsWithChildren } from "react";
-
-export type BookingFilterProps = PropsWithChildren<{
-  onAddFiltersClick?: () => void;
-  onCancelFilterClick?: () => void;
-  onRefreshClick?: () => void;
-  onFullscreenButtonClick?: () => void;
-  isFilterOpen?: boolean;
-  autoFocusOnMount?: boolean;
-  isFullscreenMode?: boolean;
-  staffMembers?: User[] | null;
-  isLoading: boolean;
-}>;

package/src/sorting-select/SortingSelect.stories.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { SortingSelect, SortingSelectProps } from "./SortingSelect";
-
-export default {
-  title: "SortingSelect",
-} as Meta;
-
-export const Default: Story<SortingSelectProps> = (props) => {
-  return <SortingSelect {...props} />;
-};
-
-Default.args = {
-  onSortingChange: () => null,
-};

package/src/sorting-select/SortingSelect.tsx

@@ -1,79 +0,0 @@
-import React, { useEffect, useState } from "react";
-import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
-import { Form, FormGroupProps } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import {
-  SORT_DIRECTION_ASC,
-  SORT_DIRECTION_NEWEST,
-  SORT_DIRECTION_DESC,
-  SORT_KEY_NAME,
-  SORT_KEY_CREATED_AT,
-} from "@licklist/core/dist/Config";
-
-export type SortingSelectProps = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  formGroupProps?: FormGroupProps & Record<string, any>;
-  defaultSortKey?: string;
-  defaultSortDirection?: string;
-  onSortingChange?: (url: URLSearchParams) => void;
-};
-
-export const SortingSelect = ({
-  formGroupProps,
-  defaultSortKey = SORT_KEY_NAME,
-  defaultSortDirection = SORT_DIRECTION_ASC,
-  onSortingChange,
-}: SortingSelectProps) => {
-  const { t } = useTranslation("Design");
-  const [controlValue, setControlValue] = useState(SORT_DIRECTION_ASC);
-  const searchParams = useQuery();
-
-  const { sortKey = defaultSortKey, sortDirection = defaultSortDirection } =
-    Object.fromEntries(searchParams);
-
-  const onSortingValueChange = ({ target: { value } }) => {
-    setControlValue(value);
-
-    const nextSortDirection =
-      value === SORT_DIRECTION_NEWEST ? SORT_DIRECTION_DESC : value;
-
-    const nextSortKey =
-      value === SORT_DIRECTION_NEWEST ? SORT_KEY_CREATED_AT : sortKey;
-
-    const nextSearchParams = new URLSearchParams(searchParams);
-
-    nextSearchParams.set("sortDirection", nextSortDirection);
-    nextSearchParams.set("sortKey", nextSortKey);
-
-    onSortingChange(nextSearchParams);
-  };
-
-  useEffect(() => {
-    if (sortKey === SORT_KEY_CREATED_AT) {
-      setControlValue(SORT_DIRECTION_NEWEST);
-      return;
-    }
-
-    setControlValue(sortDirection);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sortKey, sortDirection]);
-
-  return (
-    <Form.Group className="d-flex align-items-center p-0" {...formGroupProps}>
-      <Form.Label className="text-nowrap mr-4 mb-0">
-        {t("App:sortBy")}:
-      </Form.Label>
-      <Form.Control
-        as="select"
-        data-testid="sorting-select"
-        onChange={onSortingValueChange}
-        custom
-        value={controlValue}
-      >
-        <option value={SORT_DIRECTION_ASC}>A-Z</option>
-        <option value={SORT_DIRECTION_DESC}>Z-A</option>
-        <option value={SORT_DIRECTION_NEWEST}>{t("newestOnTop")}</option>
-      </Form.Control>
-    </Form.Group>
-  );
-};

package/src/sorting-select/index.ts

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

package/src/striped-static-table/StripedStaticTable.stories.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import {
-  StripedStaticTable,
-  StripedStaticTableProps,
-} from "./StripedStaticTable";
-
-export default {
-  title: "StripedStaticTable",
-  component: StripedStaticTable,
-} as Meta;
-
-export const Default: Story<StripedStaticTableProps> = (args) => {
-  return <StripedStaticTable {...args} />;
-};
-
-Default.args = {
-  columns: [
-    { key: "name", label: "" },
-    { key: "quantity", label: "" },
-    { key: "total", label: "" },
-  ],
-  data: [
-    [
-      {
-        key: 1,
-        name: "test category",
-        quantity: "Qty",
-        total: "Total",
-      },
-      {
-        key: 2,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 4,
-        name: "total per category",
-        quantity: "2/16",
-        total: "160",
-      },
-    ],
-    [
-      {
-        key: 1,
-        name: "test category",
-        quantity: "Qty",
-        total: "Total",
-      },
-      {
-        key: 2,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 5,
-        name: "product",
-        quantity: "2/16",
-        total: "160",
-      },
-      {
-        key: 4,
-        name: "total per category",
-        quantity: "2/16",
-        total: "160",
-      },
-    ],
-  ],
-};

package/src/striped-static-table/StripedStaticTable.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-
-import { StaticTableProps, StaticTable, StaticTableData } from "../table";
-
-export type StripedStaticTableProps = Omit<StaticTableProps, "data"> & {
-  data: StaticTableData[][];
-};
-
-export const StripedStaticTable = ({
-  columns,
-  className = "",
-  data,
-  ...props
-}: StripedStaticTableProps) => {
-  const styledData = data
-    .map(
-      (section) =>
-        section.map((row, rowIndex, array) => {
-          const { length } = array;
-
-          return Object.fromEntries(
-            Object.entries(row).map(([key, value]) => {
-              if (key === "key") {
-                return [key, value];
-              }
-
-              // make first row blue and bold
-              if (rowIndex === 0) {
-                return [
-                  key,
-                  <div key={key} className="bold header-row">
-                    {value}
-                  </div>,
-                ];
-              }
-
-              // make last row bold
-              if (rowIndex === length - 1) {
-                return [
-                  key,
-                  <div key={key} className="bold">
-                    {value}
-                  </div>,
-                ];
-              }
-
-              return [key, value];
-            })
-          );
-        }) as StaticTableData[]
-    )
-    .flat();
-
-  return (
-    <StaticTable
-      columns={columns}
-      data={styledData}
-      className={`striped-static-table ${className}`}
-      displayHeader={false}
-      {...props}
-    />
-  );
-};

package/src/striped-static-table/index.ts

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

package/src/styles/iframe-events/ActivitiesCard.scss

@@ -1,55 +0,0 @@
-@import "../snippet-templates/snippetVariables";
-
-.iframe-activities-card {
-  position: relative;
-  border: 2px solid transparent;
-  transition: $color-transition;
-  color: $snippet-elements-body-color;
-  border-radius: 0.3rem;
-  padding: .375rem;
-  min-height: 12.5rem;
-  width: 12.375rem;
-  flex-direction: column;
-  word-wrap: break-word;
-  background-color: #fff;
-  background-clip: border-box;
-
-  &.active {
-    border: 2px solid #0E8BE1;
-  }
-
-  .card-image {
-    width: 100%;
-    height: 6.3rem;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    cursor: pointer;
-    border: 1px solid transparent;
-    margin-bottom: .5rem;
-    border-radius: .3rem;
-  }
-
-
-  .title {
-    transition: $color-transition;
-    color: $snippet-elements-body-color;
-    font-weight: 600;
-    line-height: 1.25rem;
-    cursor: pointer;
-    font-size: .875rem;
-  }
-
-  .cost {
-    transition: $color-transition;
-    color: $snippet-elements-body-color;
-    font-size: 0.8rem;
-  }
-
-  .label {
-    text-transform: lowercase;
-    transition: $color-transition;
-    color: $snippet-elements-body-color;
-    font-size: 0.8rem;
-  }
-}

package/src/styles/iframe-events/ActivitiesSelectedCard.scss

@@ -1,52 +0,0 @@
-@import "../snippet-templates/snippetVariables";
-
-.selected-activities-card {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    height: 5rem;
-    border: 1px solid $snippet-product-set-border-color;
-    background-color: $snippet-product-set-background-color;
-    color: $snippet-product-set-font-color;
-    transition: $color-transition;
-
-    p {
-        margin-bottom: 0;
-    }
-
-    .description {
-        width: 70%;
-        font-size: .81rem;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .title {
-        font-weight: 600;
-        font-size: 0.875rem;
-        line-height: 1.5rem;
-    }
-
-    .image-container {
-        display: flex;
-        justify-content: start;
-        height: 100%;
-
-        .image {
-            display: flex;
-            align-items: start;
-            width: 7rem;
-            height: 4rem;
-            margin-left: 3rem;
-            background-repeat: no-repeat;
-            background-size: cover;
-            background-position: center;
-            border-radius: 0.5rem;
-        }
-    }
-}
-
-.selected-activities-card-hr {
-    margin-top: 0;
-}