@licklist/design 0.44.486-dev.9 → 0.44.487

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -1,118 +0,0 @@
-import { PAYMENT_TYPE_TRANSLATE_KEYS } from "../hooks/useTableData";
-import {
-  AMOUNT_TOTAL,
-  AMOUNT_WITH_DISCOUNT,
-  OrderItemsTableProps,
-  REMAINING_TO_PAY,
-  SummaryItem,
-  TOTAL_PAID,
-} from "../types";
-import {
-  calculateTotalDiscount,
-  calculateTotalPrice,
-  getExternalPaymentDetail,
-  getPaymentValueByType,
-} from "./index";
-
-const paymentNotProcessedSummary = ({
-  order,
-  externalDiscount,
-  paymentDetail,
-}: OrderItemsTableProps) => {
-  const externalPaymentDetail = paymentDetail
-    ? getExternalPaymentDetail(paymentDetail)
-    : undefined;
-
-  const total = calculateTotalPrice(order, externalPaymentDetail);
-
-  const summaryItems: SummaryItem[] = [
-    {
-      translateKey: AMOUNT_TOTAL,
-      price: total,
-    },
-  ];
-
-  if (externalDiscount) {
-    summaryItems.push({
-      price: externalDiscount,
-      translateKey: AMOUNT_WITH_DISCOUNT,
-    });
-  }
-
-  if (externalPaymentDetail) {
-    return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
-  }
-
-  return summaryItems;
-};
-
-const processedPaymentSummary = ({
-  order,
-  paymentDetail,
-}: OrderItemsTableProps) => {
-  const externalPaymentDetail =
-    paymentDetail && !order.payments.length
-      ? getExternalPaymentDetail(paymentDetail)
-      : Object.keys(PAYMENT_TYPE_TRANSLATE_KEYS).map((key) => {
-          return {
-            translateKey: PAYMENT_TYPE_TRANSLATE_KEYS[key],
-            price: getPaymentValueByType(order.payments, key),
-          };
-        });
-
-  const total = calculateTotalPrice(order, externalPaymentDetail);
-
-  const totalDiscount = calculateTotalDiscount(order.payments);
-  const totalWithDiscount = total - Number(totalDiscount);
-  let summaryItems: SummaryItem[] = [
-    {
-      translateKey: AMOUNT_TOTAL,
-      price: total,
-    },
-  ];
-
-  if (totalDiscount) {
-    summaryItems.push({
-      translateKey: AMOUNT_WITH_DISCOUNT,
-      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
-    });
-  }
-
-  if (paymentDetail && !order.payments.length) {
-    return [...summaryItems, ...externalPaymentDetail];
-  }
-
-  summaryItems.push({
-    translateKey: TOTAL_PAID,
-    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
-  });
-  if (totalWithDiscount <= 0) {
-    return summaryItems;
-  }
-  summaryItems = [...summaryItems, ...externalPaymentDetail];
-
-  if (totalWithDiscount > order.totalAmount) {
-    summaryItems.push({
-      translateKey: REMAINING_TO_PAY,
-      price: totalWithDiscount - order.totalAmount,
-    });
-  }
-  return summaryItems;
-};
-
-export const getOrderSummaryItems = ({
-  order,
-  externalDiscount,
-  paymentDetail,
-  isPaymentProcessed,
-}: OrderItemsTableProps): SummaryItem[] => {
-  if (!isPaymentProcessed) {
-    return paymentNotProcessedSummary({
-      order,
-      externalDiscount,
-      paymentDetail,
-    });
-  }
-
-  return processedPaymentSummary({ order, paymentDetail });
-};

package/src/image-radio-input/ImageRadioInput.stories.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { FormProvider, useForm } from "react-hook-form";
-import { ImageRadioInput, ImageRadioInputProps } from "./ImageRadioInput";
-import { ReactComponent as MonthIcon } from "../assets/widgets/monthCalendar.svg";
-import Icon from "../static/Icon";
-
-export default {
-  title: "ImageRadioInput",
-  component: ImageRadioInput,
-} as Meta;
-
-type FormModel = {
-  test: string;
-};
-
-export const Default: Story<ImageRadioInputProps<FormModel>> = (args) => {
-  const form = useForm();
-
-  return (
-    <FormProvider {...form}>
-      <ImageRadioInput {...args} />
-    </FormProvider>
-  );
-};
-
-Default.args = {
-  img: <MonthIcon />,
-  label: "Month",
-  name: "test",
-};
-
-export const WithFontAwesomeIcon: Story<ImageRadioInputProps<FormModel>> = (
-  args
-) => {
-  const form = useForm();
-
-  return (
-    <FormProvider {...form}>
-      <ImageRadioInput {...args} />
-    </FormProvider>
-  );
-};
-
-WithFontAwesomeIcon.args = {
-  img: <Icon type="bars" />,
-  label: "List",
-  name: "test",
-};
-
-export const Disabled: Story<ImageRadioInputProps<FormModel>> = (args) => {
-  const form = useForm();
-
-  return (
-    <FormProvider {...form}>
-      <ImageRadioInput {...args} />
-    </FormProvider>
-  );
-};
-
-Disabled.args = {
-  img: <MonthIcon />,
-  label: "Month",
-  name: "test",
-  disabled: true,
-  disabledMessage: "Coming soon",
-};

package/src/image-radio-input/ImageRadioInput.tsx

@@ -1,53 +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 ImageRadioInputProps<FormModel> = {
-  img: ReactNode;
-  label: string;
-  value: string | number;
-  name: Path<FormModel>;
-  disabled?: boolean;
-  disabledMessage?: string;
-  rules?: RegisterOptions<FormModel>;
-  inputProps?: FormCheckInputProps;
-};
-
-export const ImageRadioInput = <FormModel,>({
-  img,
-  label,
-  value,
-  name,
-  disabled,
-  disabledMessage,
-  rules,
-  inputProps,
-}: ImageRadioInputProps<FormModel>) => {
-  const { register } = useFormContext<FormModel>();
-
-  return (
-    <Form.Check className="image-radio-input">
-      <Form.Check.Label
-        className={clsx("image-radio-input-wrapper", disabled && "disabled")}
-      >
-        <div className="image-radio-input-image-wrapper">{img}</div>
-
-        <div className="image-radio-input-label">
-          <Form.Check.Input
-            type="radio"
-            value={value}
-            disabled={disabled}
-            {...register(name, rules)}
-            {...inputProps}
-          />
-          <span>{label}</span>
-        </div>
-      </Form.Check.Label>
-      <Form.Control.Feedback type="valid" className="d-block text-center">
-        {disabledMessage}
-      </Form.Control.Feedback>
-    </Form.Check>
-  );
-};

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/product-set/product/constants.ts

@@ -1 +0,0 @@
-export const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000;

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/sortable-fields/SortableFieldItem.tsx

@@ -1,60 +0,0 @@
-import React, { createContext, useContext, useMemo } from "react";
-import type { CSSProperties, PropsWithChildren } from "react";
-import type {
-  DraggableSyntheticListeners,
-  UniqueIdentifier,
-} from "@dnd-kit/core";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-
-interface Props {
-  id: UniqueIdentifier;
-}
-
-interface Context {
-  listeners: DraggableSyntheticListeners;
-  ref(node: HTMLElement | null): void;
-}
-
-const SortableItemContext = createContext<Context>({
-  listeners: undefined,
-  ref: () => {},
-});
-
-export function SortableFieldItem({ children, id }: PropsWithChildren<Props>) {
-  const { isDragging, listeners, setNodeRef, setDraggableNodeRef, transform } =
-    useSortable({ id });
-  const context = useMemo(
-    () => ({
-      listeners,
-      ref: setDraggableNodeRef,
-    }),
-    [listeners, setDraggableNodeRef]
-  );
-  const style: CSSProperties = {
-    opacity: isDragging ? 0.4 : undefined,
-    transform: CSS.Translate.toString(transform),
-  };
-
-  return (
-    <SortableItemContext.Provider value={context}>
-      <div ref={setNodeRef} className="sortable-field-list" style={style}>
-        {children}
-      </div>
-    </SortableItemContext.Provider>
-  );
-}
-
-export function DragHandle() {
-  const { listeners, ref } = useContext(SortableItemContext);
-
-  return (
-    <div {...listeners} ref={ref}>
-      <div className="icon-container">
-        <div />
-        <div />
-        <div />
-      </div>
-    </div>
-  );
-}

package/src/sortable-fields/SortableFieldList.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import type { ReactNode } from "react";
-import {
-  DndContext,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from "@dnd-kit/core";
-import type { UniqueIdentifier } from "@dnd-kit/core";
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-} from "@dnd-kit/sortable";
-
-import { DragHandle, SortableFieldItem } from "./SortableFieldItem";
-
-interface BaseItem {
-  id: UniqueIdentifier;
-}
-
-export interface SortableFieldListProps<T extends BaseItem> {
-  items: T[];
-  onChange(activeIndex: number, overIndex: number): void;
-  renderItem(item: T, index: number): ReactNode;
-}
-
-export function SortableFieldList<T extends BaseItem>({
-  items,
-  onChange,
-  renderItem,
-}: SortableFieldListProps<T>) {
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, {
-      coordinateGetter: sortableKeyboardCoordinates,
-    })
-  );
-
-  return (
-    <DndContext
-      sensors={sensors}
-      onDragEnd={({ active, over }) => {
-        if (over && active.id !== over?.id) {
-          const activeIndex = items.findIndex(({ id }) => id === active.id);
-          const overIndex = items.findIndex(({ id }) => id === over.id);
-
-          onChange(activeIndex, overIndex);
-        }
-      }}
-    >
-      <SortableContext items={items}>
-        {items.map((item, index) => (
-          <div key={item.id}>{renderItem(item, index)}</div>
-        ))}
-      </SortableContext>
-    </DndContext>
-  );
-}
-
-SortableFieldList.Item = SortableFieldItem;
-SortableFieldList.DragHandle = DragHandle;

package/src/sortable-fields/index.ts

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

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