@licklist/design 0.44.486-dev.83 → 0.44.486

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

@@ -0,0 +1,88 @@
+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

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

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -14,7 +14,6 @@ import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import couponCodeRules from "@licklist/plugins/dist/validation/Rules/couponCodeRules";
 /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
 // import { Frequency } from "rrule";
 // import { RecurrenceInput } from "../../../recurrence-input";
@@ -133,10 +132,6 @@ export const CouponFormControl = ({
                   required: t("Validation:fieldRequired", {
                     attribute: t("Design:code"),
                   }) as string,
-                  pattern: {
-                    message: `${t("Validation:fieldCouponCode")}`,
-                    value: couponCodeRules,
-                  },
                 })}
                 disabled={isLoading}
               />
@@ -238,7 +233,6 @@ export const CouponFormControl = ({
               <Form.Control
                 type="date"
                 {...register("validTill")}
-                value={validTillValue}
                 onChange={(e) => {
                   const date = DateTime.fromSQL(e.target.value).toISODate();
                   setValue("validTill", date);
@@ -337,7 +331,6 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t("Design:totalCoupons")}</Form.Label>
               <Form.Control
-                {...register("totalCoupons")}
                 type="number"
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}

package/src/sales/filters/SaleFilter.stories.tsx

@@ -13,7 +13,7 @@ export const Default: Story<SaleFiltersProps> = () => {
     name: "",
     email: "",
     date: "",
-    is_in_cart: false,
+    is_pending: false,
   });
 
   return <SaleFilters values={values} onChange={setValues} />;

package/src/sales/filters/SaleFilters.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { TextField } from "../../static/TextField";
 import { DateRangeInput } from "../../static/date-range-input";
 
-export interface Filters {
+interface Filters {
   id: string;
   name: string;
   email: string;
@@ -12,8 +12,7 @@ export interface Filters {
   order_date_to: string;
   orderable_date_from: string;
   orderable_date_to: string;
-  is_in_cart: boolean;
-  isFilterOpen?: boolean;
+  is_pending: boolean;
 }
 
 export interface SaleFiltersProps {

package/src/sales/guest-profile/previous-bookings/PreviousBookings.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Meta } from "@storybook/react";
-import { boolean } from "@storybook/addon-knobs";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
@@ -11,26 +10,11 @@ export default {
   title: "Sales/Guest Profile/Previous Bookings",
 } as Meta;
 
-export const Default = (args) => {
-  const useProviderLink = boolean("useProviderLink", true);
-
-  const renderOrderTitleLinkByProvider = (order: Order) => {
-    return (
-      <a href={`/some_href/${order.id}`}>{order[order.orderableType]?.name}</a>
-    );
-  };
-
-  return (
-    <div>
-      <PreviousBookings
-        {...args}
-        renderOrderTitleLinkByProvider={
-          useProviderLink ? renderOrderTitleLinkByProvider : undefined
-        }
-      />
-    </div>
-  );
-};
+export const Default = (args) => (
+  <div>
+    <PreviousBookings {...args} />
+  </div>
+);
 
 Default.args = {
   orders: [
@@ -58,8 +42,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      orderableType: "event",
-      orderableId: 1,
+      tickets: [],
       event: {
         id: 1,
         name: "testEvent1",
@@ -95,8 +78,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      orderableType: "event",
-      orderableId: 2,
+      tickets: [],
       event: {
         id: 2,
         name: "testEvent2",
@@ -145,8 +127,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      orderableType: "event",
-      orderableId: 3,
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -174,8 +155,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      orderableType: "event",
-      orderableId: 3,
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -203,8 +183,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      orderableType: "event",
-      orderableId: 3,
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -232,8 +211,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      orderableType: "event",
-      orderableId: 3,
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -260,8 +238,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      orderableType: "event",
-      orderableId: 3,
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",

package/src/sales/guest-profile/previous-bookings/PreviousBookings.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactNode } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Button } from "react-bootstrap";
@@ -8,13 +8,9 @@ const MAX_ORDERS_COUNT = 6;
 
 export type PreviousBookingsProps = {
   orders: Order[];
-  renderOrderTitleLinkByProvider?: (order: Order) => ReactNode;
 };
 
-export const PreviousBookings = ({
-  orders,
-  renderOrderTitleLinkByProvider,
-}: PreviousBookingsProps) => {
+export const PreviousBookings = ({ orders }: PreviousBookingsProps) => {
   const { t } = useTranslation("Design");
   const [showOlderBookings, setShowOlderBookings] = useState(false);
 
@@ -40,17 +36,13 @@ export const PreviousBookings = ({
       {orders.length > 0 ? (
         <div className="events-wrapper">
           {orders.slice(0, endSlicedOrdersNumber).map((order) => {
-            const eventName = renderOrderTitleLinkByProvider
-              ? renderOrderTitleLinkByProvider(order)
-              : order[order.orderableType]?.name;
-
             return (
               <div
                 className="event-info col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"
                 key={order.id}
               >
                 <div className="info-wrapper">
-                  <p className="label">{eventName}</p>
+                  <p className="label">{order.event?.name}</p>
                   {order.createdAt && (
                     <p className="event-date">{formatDate(order.createdAt)}</p>
                   )}

package/src/sales/manual-booking/category-product/CategoryProduct.tsx

@@ -0,0 +1,285 @@
+import React, { useEffect, useMemo, useState } from "react";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { useFormContext, Controller } from "react-hook-form";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+import MediaService from "@licklist/plugins/dist/services/Media/MediaService";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
+import { NumberInputHorizontal } from "../number-input-horizontal";
+import { Product } from "../../../types";
+import { TipTapEditor } from "../../../tiptap-editor";
+
+interface CategoryProductProps {
+  product: Product;
+  fieldIndex: `steps.${number}.productCategories.${number}.products.${number}`;
+  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  isLoading?: boolean;
+  isEditMode?: boolean;
+  isProductSetAvailable?: boolean;
+  orderProducts?: OrderProduct[];
+}
+
+export const CategoryProduct = ({
+  product,
+  fieldIndex,
+  productsWithErrors,
+  isLoading = false,
+  isEditMode = false,
+  isProductSetAvailable = false,
+  orderProducts,
+}: CategoryProductProps) => {
+  const { t } = useTranslation(["Design", "Validation"]);
+  const { control, clearErrors, setError } = useFormContext();
+  const [isEditingPrice, setEditingPrice] = useState(false);
+  const imageSrc = product.images
+    ? MediaService.getImageSrc(product.images)
+    : null;
+
+  const currentProductMaxValue: number | undefined = useMemo(() => {
+    if (!orderProducts) return undefined;
+
+    const orderProduct = orderProducts.find(
+      (orderProduct) => orderProduct.productId === product.id
+    );
+
+    if (!orderProduct) return undefined;
+
+    return orderProduct.quantity;
+  }, [orderProducts, product.id]);
+
+  const onPriceClick = () => {
+    // disable change price when not edit mode
+    // and product isSoldOut or isLoading new data
+    if ((!isEditMode && product.isSoldOut) || isLoading) return;
+
+    setEditingPrice(true);
+  };
+
+  const productQuantityError = useMemo(() => {
+    if (!productsWithErrors) {
+      return undefined;
+    }
+
+    const error = productsWithErrors.find(
+      (productWithError) => productWithError.product_id === product.id
+    );
+
+    return error?.message;
+  }, [productsWithErrors, product.id]);
+
+  useEffect(() => {
+    if (!productQuantityError) {
+      return;
+    }
+
+    setError(`${fieldIndex}.quantity`, {
+      message: productQuantityError,
+      type: "validate",
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [productQuantityError]);
+
+  const PriceControl = ({ ref, onChange, value, invalid }) => (
+    <NumberInputHorizontal
+      ref={ref}
+      onChange={(val) => {
+        onChange(val);
+        // @TODO: change any to some type
+        clearErrors(`${fieldIndex}.price` as any);
+      }}
+      onMinusClick={() => {
+        onChange(value - 1 || 0);
+        // @TODO: change any to some type
+        clearErrors(`${fieldIndex}.price` as any);
+      }}
+      onPlusClick={() => {
+        onChange((value ?? 0) + 1);
+        // @TODO: change any to some type
+        clearErrors(`${fieldIndex}.price` as any);
+      }}
+      min={0}
+      disabled={
+        isLoading || (!isEditMode && product.isSoldOut) || !isEditingPrice
+      }
+      value={Number(value || 0)}
+      className={clsx(invalid && "error")}
+      isLoading={isLoading}
+    />
+  );
+
+  return (
+    <>
+      <Controller
+        // @TODO: change any to some type
+        name={`${fieldIndex}.price` as any}
+        control={control}
+        render={({
+          field: { onChange, value, ref },
+          fieldState: { invalid, error },
+        }) => {
+          return (
+            <>
+              <div className="medium-accordition-description-container">
+                <TipTapEditor
+                  viewMode
+                  disabled
+                  content={product.description}
+                  editorStyle={{ backgroundColor: "transparent" }}
+                />
+                {!product.isSoldOut ? (
+                  <OverlayTrigger
+                    key="status-tooltip"
+                    placement="top"
+                    overlay={
+                      <Tooltip id="tooltip-right">
+                        <span>{t("Sale:clickToEdit")}</span>
+                      </Tooltip>
+                    }
+                  >
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      onClick={onPriceClick}
+                      onKeyDown={onPriceClick}
+                    >
+                      <PriceControl
+                        ref={ref}
+                        onChange={onChange}
+                        value={value}
+                        invalid={invalid}
+                      />
+                    </div>
+                  </OverlayTrigger>
+                ) : (
+                  <PriceControl
+                    ref={ref}
+                    onChange={onChange}
+                    value={value}
+                    invalid={invalid}
+                  />
+                )}
+              </div>
+              {invalid && (
+                <div className="d-flex mt-3 w-100">
+                  <p className="iframe-event__message-error">
+                    {error &&
+                      HookFormService.hasError(error, "validate") &&
+                      error?.message}
+                  </p>
+                </div>
+              )}
+            </>
+          );
+        }}
+      />
+
+      <Controller
+        control={control}
+        name={`${fieldIndex}.quantity` as string}
+        rules={{
+          validate: (value) => {
+            if (!value) return true;
+
+            const { maxAmount = 0, isUnlimited = false } = product;
+
+            // In case when we edit order and product set not
+            // available by current date we should check on
+            // max amount which equals orderProduct.quantity
+            // We should check this before all next validations
+            if (currentProductMaxValue !== undefined && isEditMode) {
+              if (isUnlimited && isProductSetAvailable) {
+                return true;
+              }
+
+              if (!isProductSetAvailable && value > currentProductMaxValue) {
+                return t("Validation:quantityMaxNumber", {
+                  max: currentProductMaxValue,
+                }) as string;
+              }
+            }
+
+            if (isUnlimited) {
+              return true;
+            }
+
+            if (value > maxAmount) {
+              return t("Validation:quantityMaxNumber", {
+                max: product.maxAmount,
+              }) as string;
+            }
+
+            return true;
+          },
+        }}
+        render={({
+          field: { onChange, value, ref },
+          fieldState: { invalid, error },
+        }) => {
+          return (
+            <div className="mb-8">
+              <div className="quantity-container">
+                <div className="number-input-horizontal-wrapper">
+                  <NumberInputHorizontal
+                    ref={ref}
+                    size="big"
+                    onChange={(val) => {
+                      onChange(val);
+                    }}
+                    onMinusClick={() => {
+                      onChange(value - 1 || 0);
+                    }}
+                    onPlusClick={() => {
+                      onChange((value ?? 0) + 1);
+                    }}
+                    min={0}
+                    disabled={
+                      isLoading ||
+                      (!isEditMode && !isProductSetAvailable) ||
+                      (product.isSoldOut && !isEditMode) ||
+                      (isEditMode &&
+                        currentProductMaxValue === undefined &&
+                        !isProductSetAvailable)
+                    }
+                    value={value || 0}
+                    className={clsx(invalid && "error")}
+                    isLoading={isLoading}
+                  />
+                </div>
+                {imageSrc && (
+                  <div
+                    className={[
+                      "image-wrapper",
+                      product.isSoldOut && "opacity-50",
+                    ].join(" ")}
+                  >
+                    <img src={imageSrc} alt={product.name} />
+                  </div>
+                )}
+              </div>
+
+              {invalid && (
+                <div className="d-flex mt-3 w-100">
+                  <p className="iframe-event__message-error">
+                    {error &&
+                      HookFormService.hasError(error, "validate") &&
+                      error?.message}
+                  </p>
+                </div>
+              )}
+
+              {!isLoading && !isProductSetAvailable && (
+                <div className="d-flex mt-3 w-100">
+                  <p className="iframe-event__message-error">
+                    {t("Design:productIsNotAvailableForSelectedDate")}
+                  </p>
+                </div>
+              )}
+            </div>
+          );
+        }}
+      />
+    </>
+  );
+};

package/src/sales/manual-booking/category-product/index.ts

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

package/src/sales/manual-booking/category-products/CategoryProducts.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+
+import { Accordion } from "react-bootstrap";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
+import { CollapsibleInputGroup } from "../../../collapsible-input-group";
+import { Product } from "../../../types";
+import { CategoryProduct } from "../category-product/CategoryProduct";
+
+interface CategoryProductsProps {
+  stepIndex: number;
+  categoryIndex: number;
+  products?: Product[];
+  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  isLoading?: boolean;
+  isEditMode?: boolean;
+  isProductSetAvailable?: boolean;
+  orderProducts?: OrderProduct[];
+}
+
+export const CategoryProducts = ({
+  products,
+  stepIndex,
+  categoryIndex,
+  productsWithErrors,
+  isLoading = false,
+  isEditMode = false,
+  isProductSetAvailable = false,
+  orderProducts,
+}: CategoryProductsProps) => {
+  return (
+    <>
+      {products?.map((product, index) => {
+        const fieldIndex =
+          `steps.${stepIndex}.productCategories.${categoryIndex}.products.${index}` as const;
+        return (
+          <Accordion
+            defaultActiveKey="product"
+            key={product.id}
+            className="medium-accordition"
+          >
+            <CollapsibleInputGroup
+              description=""
+              alwaysOpen
+              eventKey="product"
+              label={
+                <div className="medium-accordition-header">
+                  <div className="medium-accordition-title">
+                    {product?.name}
+                  </div>
+                </div>
+              }
+            >
+              <CategoryProduct
+                fieldIndex={fieldIndex}
+                product={product}
+                productsWithErrors={productsWithErrors}
+                isLoading={isLoading}
+                isEditMode={isEditMode}
+                isProductSetAvailable={isProductSetAvailable}
+                orderProducts={orderProducts}
+              />
+            </CollapsibleInputGroup>
+          </Accordion>
+        );
+      })}
+    </>
+  );
+};

package/src/sales/manual-booking/category-products/index.ts

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