@licklist/design 0.44.485 → 0.44.486-dev.10

package/src/customers/components/filter/CustomerFilter.stories.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import { CustomerFilter, CustomerFilterProps } from "./CustomerFilter";
+
+export default {
+  title: "Customers/Filter",
+  component: CustomerFilter,
+} as Meta;
+
+export const Default: Story<CustomerFilterProps> = () => {
+  const [values, setValues] = useState({
+    name: "",
+    email: "",
+    phone: "",
+  });
+
+  return <CustomerFilter values={values} onChange={setValues} />;
+};

package/src/customers/components/filter/CustomerFilter.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { TextField } from "../../../static/TextField";
+
+type CustomerFilterValues = {
+  name: string;
+  email: string;
+  phone: string;
+};
+
+const FILTER_FIELDS = {
+  name: "name",
+  email: "email",
+  phone: "phone",
+};
+
+export interface CustomerFilterProps {
+  values: CustomerFilterValues;
+  onChange: (values: CustomerFilterValues) => void;
+}
+
+export const CustomerFilter = ({ values, onChange }: CustomerFilterProps) => {
+  const { t } = useTranslation(["Design"]);
+
+  return (
+    <div className="customers-filter d-flex">
+      <div className="d-flex customers-filter-items">
+        {Object.keys(FILTER_FIELDS).map((filterKeyName) => {
+          const label = t(FILTER_FIELDS[filterKeyName]);
+
+          return (
+            <TextField
+              key={filterKeyName}
+              className={clsx("mb-0", "col-4", "customer-filter")}
+              type="text"
+              label={label}
+              value={values[filterKeyName]}
+              onChange={(event) =>
+                onChange({ ...values, [filterKeyName]: event.target.value })
+              }
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/customers/components/filter/index.ts

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

package/src/customers/components/index.ts

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

package/src/customers/index.ts

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

package/src/date-time-button/DateContent.tsx

@@ -0,0 +1,46 @@
+import { DAY_OF_WEEK, DAY_NUMBER_WITH_MONTH } from "@licklist/core/dist/Config";
+import { getDayWithOrdinal } from "@licklist/plugins/dist/utils/formatDate";
+import clsx from "clsx";
+import { isToday, isTomorrow } from "date-fns";
+import { DateTime } from "luxon";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { DateTimeButtonProps } from "./DateTimeButton";
+
+type DateContentProps = Pick<
+  DateTimeButtonProps,
+  "isDisabled" | "isSelected"
+> & {
+  date: DateTime;
+};
+
+export const DateContent = ({
+  date,
+  isDisabled,
+  isSelected,
+}: DateContentProps) => {
+  const { t } = useTranslation("Design");
+
+  const getDate = () => {
+    if (isToday(date.toJSDate())) return t("today");
+    if (isTomorrow(date.toJSDate())) return t("tomorrow");
+    return date.toFormat(DAY_OF_WEEK);
+  };
+
+  const [day, month] = date.toFormat(DAY_NUMBER_WITH_MONTH).split(" ");
+
+  return (
+    <div className="weekday-info">
+      <div>{getDate()}</div>
+      <div
+        className={clsx(
+          "descriptions",
+          isSelected && "selected",
+          isDisabled && "disabled"
+        )}
+      >
+        {`${getDayWithOrdinal(+day)} ${month}`}
+      </div>
+    </div>
+  );
+};

package/src/date-time-button/DateTimeButton.stories.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { DateTime } from "luxon";
+import { DateTimeButton, DateTimeButtonProps } from "./DateTimeButton";
+
+export default {
+  title: "DateTimeButton",
+  component: DateTimeButton,
+} as Meta;
+
+const date = DateTime.fromISO("2023-12-28T10:10:10.000Z");
+
+export const Default: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Default.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+};
+
+export const Selected: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Selected.args = {
+  date,
+  isSelected: true,
+  isDisabled: false,
+  onSelect: () => null,
+};
+
+export const Disabled: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Disabled.args = {
+  date,
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+};
+
+export const Time: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Time.args = {
+  date: "10:10",
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+};
+
+export const OnlyTime: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+OnlyTime.args = {
+  date: "10:10",
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+  isOnlyTimeContainer: true,
+};
+
+export const WithPrice: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+WithPrice.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+  isOnlyTimeContainer: false,
+  price: "from $8000",
+};

package/src/date-time-button/DateTimeButton.tsx

@@ -0,0 +1,73 @@
+import React, { ReactElement } from "react";
+import clsx from "clsx";
+import { DateTime } from "luxon";
+import { DateContent } from "./DateContent";
+
+export type DateTimeButtonProps<T = DateTime | string> = {
+  date: T;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  onSelect: (date: T) => void;
+  isOnlyTimeContainer?: boolean;
+  price?: string | number | ReactElement | null;
+};
+
+export const DateTimeButton = <T extends DateTime | string>({
+  date,
+  isDisabled,
+  isSelected,
+  onSelect,
+  isOnlyTimeContainer,
+  price,
+}: DateTimeButtonProps<T>) => {
+  // const infoLogo = useMemo(() => {
+  //   if (info?.logo === infoLogoType.LIMIT) {
+  //     return <LimitedSvg />;
+  //   }
+  //   if (info?.logo === infoLogoType.AVAILABLE) {
+  //     return <AvailableSvg />;
+  //   }
+  //   if (info?.logo === infoLogoType.SOLD_OUT) {
+  //     return <SoldOutSvg />;
+  //   }
+  //   return null;
+  // }, [info]);
+
+  const isTimeVariant = typeof date === "string";
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(date)}
+      disabled={isDisabled}
+      className={clsx(
+        "date-time-button",
+        isDisabled && "disabled",
+        isSelected && "selected",
+        isTimeVariant && "time-button",
+        isOnlyTimeContainer && "only-time-container",
+        !isTimeVariant && "today"
+      )}
+    >
+      {isTimeVariant ? (
+        date
+      ) : (
+        <DateContent
+          date={date}
+          isDisabled={isDisabled}
+          isSelected={isSelected}
+        />
+      )}
+
+      {price && !isDisabled && <div className="price">{price}</div>}
+
+      {/* TODO uncomment when adding availability */}
+      {/* {info && (
+        <div className="info">
+          {info.logo && <Logo className="logo" logo={infoLogo} />}
+          <div>{info.description}</div>
+        </div>
+      )} */}
+    </button>
+  );
+};

package/src/date-time-button/index.ts

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

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 
 import { useId } from "@react-aria/utils";
+import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import HTMLInputDateElement from "../../types/static/HTMLInputDateElement";
 import { RecurrenceInput } from "../../recurrence-input";
 import { WarningMessage } from "../../static";
@@ -13,6 +14,8 @@ import { ProductSetFormValues } from "../../product-set/form";
 
 interface IntervalInputProps {
   editedProductSet?: ProductSetFormValues;
+  productSets?: ProductSet[];
+  productSetId?: number;
   disabled?: boolean;
 }
 
@@ -25,6 +28,8 @@ export interface IntervalInputValues {
 export function IntervalInput({
   disabled = false,
   editedProductSet,
+  productSetId,
+  productSets,
 }: IntervalInputProps) {
   const { t } = useTranslation(["Design", "Validation"]);
   const {
@@ -32,6 +37,7 @@ export function IntervalInput({
     formState: { errors },
     watch,
     control,
+    trigger,
     setValue,
   } = useFormContext<IntervalInputValues>();
 
@@ -42,6 +48,7 @@ export function IntervalInput({
   const start = watch("start");
   const end = watch("end");
   const [recurrent, setRecurrent] = useState(Boolean(rrule));
+  const [isOverriden, setIsOverriden] = useState(false);
   const recurrentId = useId();
 
   const startDateInput = useRef<HTMLInputDateElement | null>(null);
@@ -66,6 +73,23 @@ export function IntervalInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editedProductSet]);
 
+  useEffect(() => {
+    if (!productSets) return;
+
+    const isOverridenProductSet = productSets.find(
+      (productSet) =>
+        (editedProductSet && productSet?.id === editedProductSet?.id) ||
+        (Boolean(productSet?.parentMenuId) && productSet?.id === productSetId)
+    );
+
+    setIsOverriden(Boolean(isOverridenProductSet));
+  }, [productSets, productSetId, setIsOverriden, editedProductSet]);
+
+  const onChangeEndDate = (nextEndtDate: string) => {
+    setValue("end", nextEndtDate);
+    trigger("end");
+  };
+
   return (
     <>
       <Form.Row className="interval-container">
@@ -96,7 +120,7 @@ export function IntervalInput({
             value={end}
             name="end"
             onChange={({ target: { value: nextEndtDate } }) =>
-              setValue("end", nextEndtDate)
+              onChangeEndDate(nextEndtDate)
             }
             min={start}
             isInvalid={Boolean(errors.end)}
@@ -129,9 +153,11 @@ export function IntervalInput({
               {t("reccurentDescription", { item: t("event") })}
             </Form.Text>
           )}
-          <WarningMessage message={t("recurrentOverridesWarining")} />
         </Form.Group>
       )}
+      {isOverriden && (
+        <WarningMessage message={t("recurrentOverridesWarining")} />
+      )}
       {recurrent && start && (
         <Form.Group>
           <Controller

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -121,6 +121,7 @@ export const EditEventForm = ({
 
   const visible = watch("visible");
   const editedProductSet = watch("editedProductSet");
+  const productSetId = watch("productSetId");
 
   const {
     images,
@@ -267,6 +268,8 @@ export const EditEventForm = ({
           <IntervalInput
             key={watch("rrule")}
             disabled={disabled}
+            productSetId={productSetId}
+            productSets={productSets}
             editedProductSet={editedProductSet}
           />
           {categories.length !== 0 && (

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -11,6 +11,7 @@ import { ProductSetControl } from "../../../../../product-set";
 import { ProductSetContextProvider } from "../../../../../product-set/form/context";
 import { getDefaultValues } from "../../../utils/getDefaultProductSet";
 import { EditEventFormValues } from "../../EditEventForm";
+import { getFilteredTemplates } from "../../../../../product-set/utils/index";
 
 export const DEFAULT_FEE = 5;
 
@@ -109,8 +110,16 @@ export const EditEventProductSet = ({
       <FormProvider {...form}>
         <Form className="mt-6">
           <ProductSetControl
-            emailTemplates={emailTemplates}
-            smsTemplates={smsTemplates}
+            smsTemplates={getFilteredTemplates(
+              smsTemplates,
+              formValues?.smsTemplates
+            )}
+            emailTemplates={getFilteredTemplates(
+              emailTemplates,
+              formValues?.emailTemplates
+            )}
+            showEmailTemplate={!!emailTemplates}
+            showSmsTemplate={!!smsTemplates}
             fieldSets={fieldSetsData}
             isLoading={isLoading}
             companyName={selectedCompany?.title}

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -3,6 +3,7 @@ import {
   DEFAULT_PRODUCT_SET_TYPE,
   ProductSet,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
+import { getFilteredTemplates } from "../../../product-set/utils/index";
 import { ProductSetFormValues } from "../../../product-set/form/ProductSetForm";
 
 export const getDefaultValues = (
@@ -14,15 +15,16 @@ export const getDefaultValues = (
   type: productSet?.type ?? DEFAULT_PRODUCT_SET_TYPE,
   termsAndConditions: productSet?.termsAndConditions ?? "",
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,
+  thankYouPageUrl: productSet?.thankYouPageUrl ?? "",
   isDefault: productSet?.isDefault ?? false,
   fieldSetId: productSet?.fieldSetId,
-  emailTemplateId:
+  emailTemplates:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
-      ? productSet?.mailTemplates[0].notification.id
+      ? getFilteredTemplates(productSet?.mailTemplates)
       : undefined,
-  smsTemplateId:
+  smsTemplates:
     productSet?.smsTemplates && productSet?.smsTemplates?.length > 0
-      ? productSet?.smsTemplates[0].notification.id
+      ? getFilteredTemplates(productSet?.mailTemplates)
       : undefined,
   steps:
     productSet?.steps?.map(({ productCategories, ...step }) => ({

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -11,7 +11,6 @@ export type EventStatisticModalProps = {
   setIsOpen: (value: boolean) => void;
   eventStatistic?: EventStatistic | null;
   title?: string;
-  date?: string;
 };
 
 export const EventStatisticModal = ({
@@ -19,11 +18,9 @@ export const EventStatisticModal = ({
   setIsOpen,
   eventStatistic,
   title,
-  date,
 }: EventStatisticModalProps) => {
   const { t } = useTranslation("Design");
-  const data = useTableData(eventStatistic, date);
-
+  const data = useTableData(eventStatistic);
   const handleClose = () => {
     setIsOpen(false);
   };
@@ -58,7 +55,7 @@ export const EventStatisticModal = ({
                 { key: "total", label: "" },
               ]}
               data={data}
-              className="event-statistic-table"
+              className="striped-static-table"
             />
           </>
         ) : (

package/src/events/event-statistic-modal/hooks/useTableData.tsx

@@ -7,10 +7,7 @@ import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventSta
 import { convertEventStatisticToTableData, TRANSLATION_KEYS } from "../utils";
 import { StaticTableData } from "../../../table";
 
-export const useTableData = (
-  eventStatistic: EventStatistic | null,
-  date: string
-) => {
+export const useTableData = (eventStatistic: EventStatistic | null) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
   const [tableRows, setTableRows] = useState<StaticTableData[]>([]);
@@ -31,17 +28,14 @@ export const useTableData = (
     return t(key);
   };
 
-  const transformStatisticToTableRows = (
-    statistic: EventStatistic | null,
-    date: string
-  ) => {
+  const transformStatisticToTableRows = (statistic: EventStatistic | null) => {
     if (!statistic) {
       return [];
     }
 
     const tableDataRows: StaticTableData[] = [];
 
-    convertEventStatisticToTableData(statistic, date).forEach(
+    convertEventStatisticToTableData(statistic).forEach(
       ({ name, quantity, total, isBold, isHeader, key }) => {
         const formattedTotal = !Object.keys(TRANSLATION_KEYS).includes(
           String(total)
@@ -83,7 +77,7 @@ export const useTableData = (
   };
 
   useEffect(() => {
-    setTableRows(transformStatisticToTableRows(eventStatistic, date));
+    setTableRows(transformStatisticToTableRows(eventStatistic));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [eventStatistic]);
 

package/src/events/event-statistic-modal/utils/index.ts

@@ -1,6 +1,4 @@
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
-import { DateTime } from "luxon";
-import { DATE_TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
 
 export const TRANSLATION_KEYS = {
   shortQuantity: "shortQuantity",
@@ -9,8 +7,7 @@ export const TRANSLATION_KEYS = {
 };
 
 export const convertEventStatisticToTableData = (
-  eventStatistic: EventStatistic,
-  date: string
+  eventStatistic: EventStatistic
 ) => {
   let totalAmount = 0;
   let totalQuantity = 0;
@@ -28,49 +25,49 @@ export const convertEventStatisticToTableData = (
     total: string | number;
   }[] = [];
 
-  const formattedDate = DateTime.fromISO(date)
-    .toUTC()
-    .toFormat(DATE_TIME_FULL_FORMAT);
+  Object.values(eventStatistic?.productCategorySummary)?.forEach(
+    (categories) => {
+      categories?.forEach(
+        ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
+          let quantity = 0;
 
-  eventStatistic?.productCategorySummary?.[formattedDate]?.forEach(
-    ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
-      let quantity = 0;
+          totalAmount += totalPerCategory || 0;
 
-      totalAmount += totalPerCategory || 0;
+          tableDataArray.push({
+            name: categoryName,
+            key: `${eventId}.${categoryName}`,
+            isBold: true,
+            isHeader: true,
+            quantity: TRANSLATION_KEYS.shortQuantity,
+            total: TRANSLATION_KEYS.total,
+          });
 
-      tableDataArray.push({
-        name: categoryName,
-        key: `${eventId}.${categoryName}`,
-        isBold: true,
-        isHeader: true,
-        quantity: TRANSLATION_KEYS.shortQuantity,
-        total: TRANSLATION_KEYS.total,
-      });
+          productsSummary?.forEach(
+            ({ productsSold, name, totalQuantity, total }) => {
+              quantity += productsSold;
 
-      productsSummary?.forEach(
-        ({ productsSold, name, totalQuantity, total }) => {
-          quantity += productsSold;
+              tableDataArray.push({
+                name,
+                key: `${eventId}.${categoryName}.${name}`,
+                quantity: totalQuantity
+                  ? `${productsSold} / ${totalQuantity}`
+                  : String(productsSold),
+                total: String(total),
+              });
+            }
+          );
 
           tableDataArray.push({
-            name,
-            key: `${eventId}.${categoryName}.${name}`,
-            quantity: totalQuantity
-              ? `${productsSold} / ${totalQuantity}`
-              : String(productsSold),
-            total: String(total),
+            name: TRANSLATION_KEYS.totalPerCategory,
+            key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
+            quantity,
+            total: totalPerCategory,
+            isBold: true,
           });
+
+          totalQuantity += quantity;
         }
       );
-
-      tableDataArray.push({
-        name: TRANSLATION_KEYS.totalPerCategory,
-        key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
-        quantity,
-        total: totalPerCategory,
-        isBold: true,
-      });
-
-      totalQuantity += quantity;
     }
   );
 

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -3,6 +3,7 @@ import { EventVenueMapProvider } from "@licklist/plugins/dist/context/event/Even
 import { Point } from "@licklist/plugins/dist/types/context/event/point";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { VenueMap, VenueMapRef } from "./components/VenueMap";
 import { useCanvasSize } from "./hooks/useCanvasSize";
 
@@ -24,6 +25,7 @@ export type EventVenueMapProps = {
   products?: Partial<Product>[];
   pointProducts?: Partial<PointProduct>[];
   onPointProductsChange?: (values: Partial<PointProduct>[]) => void;
+  soldOutProducts?: QuantityCheckProductInfo[];
 } & EventVenueMapIframeProps;
 
 export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
@@ -43,6 +45,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
       usedInIframe = false,
       choosedProductUuids = [],
       errorOnChoosedProductUuids = [],
+      soldOutProducts,
     },
     ref
   ) => {
@@ -66,6 +69,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
           ref={ref}
           choosedProductUuids={choosedProductUuids}
           errorOnChoosedProductUuids={errorOnChoosedProductUuids}
+          soldOutProducts={soldOutProducts}
         />
       </EventVenueMapProvider>
     );

package/src/events/event-venue-map/components/MapPoint/MapPoint.tsx

@@ -78,7 +78,8 @@ export const MapPoint = ({
       // have 2 points near one by one
       const nextPoints = prevPoints.slice();
       const currentPoint = nextPoints.find(
-        (i) => i.id === id || i?.localId === localId
+        (point) =>
+          (id && point.id === id) || (localId && point.localId === localId)
       );
       const currentPointIndex = nextPoints.indexOf(currentPoint);
 
@@ -98,7 +99,7 @@ export const MapPoint = ({
     // eslint-disable-next-line no-param-reassign
     event.cancelBubble = true;
 
-    if (isActive || isSoldOut) return;
+    if (isActive || (isSoldOut && usedInIframe)) return;
 
     setActiveElementKey(pointKey);
 
@@ -106,6 +107,7 @@ export const MapPoint = ({
   };
 
   const onMouseEnter = () => {
+    changePointPosition();
     changeCursorType("pointer");
   };
 
@@ -132,7 +134,7 @@ export const MapPoint = ({
         <ProductIcon
           x={pointX}
           y={pointY}
-          hasProduct={Boolean(pointProduct)}
+          isSoldOut={isSoldOut}
           isActive={isActive}
           isProductChoosed={isProductChoosed}
           isErrorOnChoosedProduct={isErrorOnChoosedProduct}