@licklist/design 0.44.485-dev.1 → 0.44.485-dev.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.485-dev.1",
+  "version": "0.44.485-dev.100",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -53,10 +53,11 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.9",
-    "@licklist/core": "0.15.x",
+    "@licklist/core": ">=0.15.28-dev.0 < 0.15.28",
     "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": "0.20.x",
+    "@licklist/plugins": ">=0.20.133-dev.5 < 0.20.133",
     "@mdx-js/react": "1.6.22",
+    "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
     "@rollup/plugin-image": "2.0.6",
     "@rollup/plugin-json": "4.1.0",
@@ -187,7 +188,7 @@
     "style-loader": "2.0.0",
     "ts-jest": "26.5.2",
     "twemoji-parser": "14.0.0",
-    "typescript": "4.5.5",
+    "typescript": "4.9.5",
     "url-loader": "4.1.1",
     "use-debounce": "7.0.1"
   },

package/src/assets/iframe/backButton.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="15.5" fill="#F3F3F3" stroke="#F0F0F0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.293 15.2929C9.90252 15.6834 9.90252 16.3166 10.293 16.7071L16.657 23.0711C17.0475 23.4616 17.6807 23.4616 18.0712 23.0711C18.4617 22.6805 18.4617 22.0474 18.0712 21.6569L12.4144 16L18.0712 10.3431C18.4617 9.95262 18.4617 9.31946 18.0712 8.92893C17.6807 8.53841 17.0475 8.53841 16.657 8.92893L10.293 15.2929Z" fill="#1A182B"/>
+</svg>

package/src/assets/iframe/dateInfo/available.svg

@@ -0,0 +1,5 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.943939" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<rect x="0.943939" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<rect x="0.943939" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+</svg>

package/src/assets/iframe/dateInfo/limited.svg

@@ -0,0 +1,5 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.2406" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="1.2406" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
+<rect x="1.2406" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
+</svg>

package/src/assets/iframe/dateInfo/soldOut.svg

@@ -0,0 +1,6 @@
+<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="5.94013" height="10" transform="translate(0.497131)" fill="white"/>
+<rect x="0.591156" y="0.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="0.591156" y="3.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="0.591156" y="6.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+</svg>

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

@@ -9,8 +9,7 @@ export default {
 
 export const Default: Story<CustomerFilterProps> = () => {
   const [values, setValues] = useState({
-    first_name: "",
-    last_name: "",
+    name: "",
     email: "",
     phone: "",
   });

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

@@ -4,15 +4,13 @@ import clsx from "clsx";
 import { TextField } from "../../../static/TextField";
 
 type CustomerFilterValues = {
-  first_name: string;
-  last_name: string;
+  name: string;
   email: string;
   phone: string;
 };
 
 const FILTER_FIELDS = {
-  first_name: "firstName",
-  last_name: "lastName",
+  name: "name",
   email: "email",
   phone: "phone",
 };
@@ -34,7 +32,7 @@ export const CustomerFilter = ({ values, onChange }: CustomerFilterProps) => {
           return (
             <TextField
               key={filterKeyName}
-              className={clsx("mb-0")}
+              className={clsx("mb-0", "col-4", "customer-filter")}
               type="text"
               label={label}
               value={values[filterKeyName]}

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 && <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

@@ -55,7 +55,7 @@ export const EventStatisticModal = ({
                 { key: "total", label: "" },
               ]}
               data={data}
-              className="event-statistic-table"
+              className="striped-static-table"
             />
           </>
         ) : (

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}

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

@@ -1,6 +1,7 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { Path, KonvaNodeEvents, Group, Circle } from "react-konva";
 import Konva from "konva";
+import { ProductTooltip } from "../ProductTooltip";
 
 const ICON_DATA =
   "M14 0C9.3569 0.6633 4.6431 0.6633 0 0L6 7V13H3V14H11V13H8V7L14 0Z";
@@ -22,6 +23,7 @@ const BACKGROUND_COLOR = "#FFFFFF";
 const BACKGROUND_COLOR_TRANSPARENT = "#FFFFFF80";
 const FILL_COLOR = "#0E8CE2";
 const ERROR_COLOR_TRANSPARENT = "#ff000080";
+const NO_PRODUCT_ON_POINT = "#878787";
 const SNIPPET_TEMPLATE_ID = "snippet-template-context";
 
 export type ProductIconProps = KonvaNodeEvents &
@@ -29,6 +31,7 @@ export type ProductIconProps = KonvaNodeEvents &
     x: number;
     y: number;
     isActive?: boolean;
+    isSoldOut?: boolean;
     isErrorOnChoosedProduct: boolean;
     isProductChoosed: boolean;
   };
@@ -53,12 +56,15 @@ export const ProductIcon = ({
   x,
   y,
   isActive,
+  isSoldOut,
   isErrorOnChoosedProduct,
   isProductChoosed,
 }: ProductIconProps) => {
   const defaultX = -X_OFFSET;
   const defaultY = -Y_OFFSET;
 
+  const [hovered, setHovered] = useState<boolean>(false);
+
   const cssVariableValues = useMemo(() => {
     return {
       pointBackgroundColor:
@@ -107,11 +113,21 @@ export const ProductIcon = ({
       stroke = ERROR_COLOR_TRANSPARENT;
     }
 
+    if (isSoldOut) {
+      stroke = NO_PRODUCT_ON_POINT;
+      fill = NO_PRODUCT_ON_POINT;
+    }
+
     return { fill, stroke };
   };
 
   return (
-    <Group x={x} y={y}>
+    <Group
+      x={x}
+      y={y}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
       <Circle
         radius={CIRCLE_RADIUS}
         strokeWidth={POINT_STROKE_WIDTH}
@@ -119,6 +135,9 @@ export const ProductIcon = ({
         y={defaultY * 0.75}
         {...circleColors()}
       />
+      {hovered && isSoldOut && (
+        <ProductTooltip x={defaultX} y={defaultY} text="Sold out" />
+      )}
       {isProductChoosed ? (
         <Path
           x={defaultX}