@licklist/design 0.44.485-dev.9 → 0.44.485-dev.90

package/src/product-set/product/constants.ts

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

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -1,9 +1,6 @@
 import React from "react";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import {
-  FieldNamePrefixPath,
-  FormValues,
-} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useId } from "@react-aria/utils";
 import { Form } from "react-bootstrap";
 import Col from "react-bootstrap/Col";
@@ -16,10 +13,13 @@ export interface ProductPriceControlValues extends FormValues {
   price: number;
 }
 
-export interface ProductPriceControlProps<T> extends FieldNamePrefixPath<T> {
+export interface ProductPriceControlProps<T> {
   isLoading: boolean;
   title?: string;
   allowDeposits?: boolean;
+  fieldNamePrefix: Path<T>;
+  isRequired?: boolean;
+  isMoreThanZero?: boolean;
 }
 
 export function ProductPriceControl<T extends FormValues>({
@@ -27,13 +27,15 @@ export function ProductPriceControl<T extends FormValues>({
   fieldNamePrefix,
   title,
   allowDeposits,
+  isRequired = true,
+  isMoreThanZero,
 }: ProductPriceControlProps<T>) {
   const {
     control,
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
-
+  const productTitle = title ?? t("price");
   const priceId = useId();
 
   return (
@@ -43,7 +45,7 @@ export function ProductPriceControl<T extends FormValues>({
       className={!allowDeposits && "p-0"}
     >
       <Form.Group controlId={priceId}>
-        <Form.Label>{title ?? t("price")}</Form.Label>
+        <Form.Label>{productTitle}</Form.Label>
 
         <InputGroup hasValidation>
           <InputGroup.Prepend>
@@ -64,38 +66,58 @@ export function ProductPriceControl<T extends FormValues>({
                 name={name}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
-                  `${fieldNamePrefix}.price` as Path<T>,
+                  `${fieldNamePrefix}` as Path<T>,
                   errors
                 )}
                 disabled={isLoading}
               />
             )}
             control={control}
-            name={`${fieldNamePrefix}.price` as Path<T>}
+            name={`${fieldNamePrefix}` as Path<T>}
             rules={{
-              required: t("Validation:fieldRequired", {
-                attribute: t("price"),
-              }) as string,
-              min: {
-                value: 0,
-                message: t("Validation:fieldMinNumber", {
-                  attribute: t("price"),
-                  min: 0,
-                }) as string,
-              },
+              required: isRequired
+                ? (t("Validation:fieldRequired", {
+                    attribute: productTitle,
+                  }) as string)
+                : false,
+              min: !isMoreThanZero
+                ? {
+                    value: 0,
+                    message: t("Validation:fieldMinNumber", {
+                      attribute: productTitle,
+                      min: 0,
+                    }) as string,
+                  }
+                : undefined,
               max: {
                 value: 999999.99,
                 message: t("Validation:fieldMaxNumber", {
-                  attribute: t("price"),
+                  attribute: productTitle,
                   max: 999999.99,
                 }) as string,
               },
+
+              validate: (value) => {
+                if (
+                  !isMoreThanZero ||
+                  (isMoreThanZero &&
+                    (value === undefined || value === null || value === "")) ||
+                  (isMoreThanZero && Number(value) > 0)
+                ) {
+                  return true;
+                }
+
+                return t("Validation:fieldGreaterMinNumber", {
+                  attribute: productTitle,
+                  min: 0,
+                }) as string;
+              },
             }}
           />
 
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
-              `${fieldNamePrefix}.price` as Path<T>,
+              `${fieldNamePrefix}` as Path<T>,
               errors
             )}
           </Form.Control.Feedback>

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -33,18 +33,22 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
     onFocus,
   } = props;
   const {
-    trigger,
     control,
+    trigger,
+    watch,
+    register,
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
-
   const totalQuantityId = useId();
 
-  // trigger total quantity field's validation if disabled state was changed
+  const maxQuantityValue = watch(`${fieldNamePrefix}.maxQuantity` as Path<T>);
+  const unlimited = watch(`${fieldNamePrefix}.isUnlimited` as Path<T>);
+
   useEffect(() => {
     trigger(`${fieldNamePrefix}.totalQuantity` as Path<T>);
-  }, [disabled, fieldNamePrefix, trigger]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [maxQuantityValue, unlimited]);
 
   return (
     <>
@@ -65,6 +69,27 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type="number"
                 min={0}
                 step={1}
+                {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
+                  validate: (value) => {
+                    if (unlimited) return true;
+                    const min = 1;
+                    const maxQuantity = Number(maxQuantityValue);
+                    const totalQuantity = Number(value);
+                    if (totalQuantity < min) {
+                      return t("Validation:fieldMinNumber", {
+                        attribute: t("totalQuantity"),
+                        min: 1,
+                      }) as string;
+                    }
+                    if (totalQuantity < maxQuantity) {
+                      return t("Validation:fieldTotalNumber", {
+                        attribute: t("totalQuantity"),
+                        max: t("maxOrderQuantity"),
+                      }) as string;
+                    }
+                    return true;
+                  },
+                })}
                 value={value as string}
                 onFocus={onFocus}
                 onChange={onChange}
@@ -83,18 +108,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                     required: false,
                     min: 0,
                   }
-                : {
-                    required: t("Validation:fieldRequired", {
-                      attribute: t("totalQuantity"),
-                    }) as string,
-                    min: {
-                      value: 1,
-                      message: t("Validation:fieldMinNumber", {
-                        attribute: t("totalQuantity"),
-                        min: 1,
-                      }) as string,
-                    },
-                  }
+                : {}
             }
           />
 

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -105,7 +105,7 @@ export function ProductCategoryControl({
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
-  const { providerHasBookingManagement, zones } = useContext(
+  const { providerHasBookingManagement, zones = [] } = useContext(
     ProductSetLoadingContext
   );
 

package/src/product-set/utils/index.ts

@@ -1,3 +1,7 @@
+import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
+import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
+import { TemplateItem } from "../control/ProductSetControl";
+
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -14,3 +18,27 @@ export const moveArrayElements = <T>(
 export const sortArrayByIndex = <T>(array: T[]) => {
   return array.map((element: T, index) => ({ ...element, sort: index }));
 };
+
+export const getFilteredTemplates = (
+  templates?: EmailTemplate[] | SmsTemplate[],
+  formTemplates?: TemplateItem[]
+): TemplateItem[] | undefined => {
+  if (!templates) {
+    return undefined;
+  }
+
+  return templates
+    ?.filter(
+      (template) =>
+        template.notification.isActive &&
+        !formTemplates?.find(
+          (formTemplate) =>
+            formTemplate.value.notification.type === template.notification.type
+        )
+    )
+    ?.map((template) => ({
+      id: template?.id,
+      value: template,
+      label: template?.notification?.name,
+    }));
+};

package/src/provider/constants.ts

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

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -6,6 +6,7 @@ import { useId } from "@react-aria/utils";
 import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { Typeahead, TypeaheadOptions } from "../../typeahead";
+import { MAX_DESCRIPTION_CHARACTERS_LENGTH } from "../constants";
 import {
   ProviderLinksInput,
   ProviderLinksInputProps,
@@ -33,8 +34,9 @@ export function ProviderDetailsInput({
 }: ProviderDetailsInputProps) {
   const {
     register,
+    watch,
+    trigger,
     formState: { errors },
-    setValue,
   } = useFormContext<ProviderDetailsInputValues>();
   const { t } = useTranslation(["App", "Design", "Validation"]);
 
@@ -45,6 +47,14 @@ export function ProviderDetailsInput({
   const websiteId = useId();
   const companyId = useId();
 
+  const description = watch("description");
+
+  useEffect(() => {
+    if (MAX_DESCRIPTION_CHARACTERS_LENGTH > description.length) return;
+    trigger("description");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [description.length]);
+
   return (
     <>
       <Form.Group controlId={nameId}>
@@ -68,11 +78,26 @@ export function ProviderDetailsInput({
       <Form.Group controlId={descriptionId}>
         <Form.Label>{t("Design:description")}</Form.Label>
         <Form.Control
-          {...register("description")}
+          {...register("description", {
+            validate: (value) => {
+              const descriptionLength = value.length;
+              if (descriptionLength > MAX_DESCRIPTION_CHARACTERS_LENGTH) {
+                return t("Validation:descriptionTooManyCharactersMessage", {
+                  max: MAX_DESCRIPTION_CHARACTERS_LENGTH,
+                }) as string;
+              }
+              return true;
+            },
+          })}
           as="textarea"
           name="description"
           rows={6}
+          isInvalid={Boolean(errors.description)}
         />
+        <Form.Control.Feedback type="invalid">
+          {HookFormService.hasError(errors.description, "validate") &&
+            errors.description?.message}
+        </Form.Control.Feedback>
       </Form.Group>
 
       <Form.Group controlId={emailId}>
@@ -149,7 +174,6 @@ export function ProviderDetailsInput({
           <Typeahead
             name="company"
             options={companiesOptions}
-            setValue={setValue}
             placeholder={t("App:select")}
             noOptionsMessage={t("App:noMatchesFound")}
           />

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

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

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

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

package/src/sales/booking/index.ts

@@ -1,3 +1 @@
-export * from "./tabs";
-export * from "./filter";
 export * from "./results";

package/src/sales/booking/results/components/ResultCard.tsx

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { formatDateStringToOrdinalFormatWithPrefix } from "@licklist/core/dist/Services/Date";
+import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -55,7 +55,7 @@ export const ResultCard = ({
             {t("status")}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringToOrdinalFormatWithPrefix(startDate)}
+            {t("date")}: {formatDateStringForEvent(startDate)}
           </p>
           <p>
             {t("time")}: {DateTime.fromISO(startDate).toFormat("hh:MM")}

package/src/sales/booking/results/constants.ts

@@ -3,4 +3,5 @@ export const BACKGROUND_COLOR_CLASSNAMES = [
   "random-color-yellow",
   "random-color-green",
   "random-color-pink",
+  "random-color-violet",
 ];

package/src/sales/booking/results/index.ts

@@ -1,2 +1,3 @@
 export { BookingResults } from "./BookingResults";
+export * from "./constants";
 export type { BookingResultsProps } from "./BookingResults";

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

@@ -233,6 +233,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type="date"
                 {...register("validTill")}
+                value={validTillValue}
                 onChange={(e) => {
                   const date = DateTime.fromSQL(e.target.value).toISODate();
                   setValue("validTill", date);
@@ -331,6 +332,7 @@ 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_pending: false,
+    is_in_cart: 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";
 
-interface Filters {
+export interface Filters {
   id: string;
   name: string;
   email: string;
@@ -12,7 +12,7 @@ interface Filters {
   order_date_to: string;
   orderable_date_from: string;
   orderable_date_to: string;
-  is_pending: boolean;
+  is_in_cart: boolean;
 }
 
 export interface SaleFiltersProps {

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

@@ -5,8 +5,8 @@ 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 { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { NumberInputHorizontal } from "../number-input-horizontal";
 import { Product } from "../../../types";
 import { TipTapEditor } from "../../../tiptap-editor";
@@ -14,7 +14,7 @@ import { TipTapEditor } from "../../../tiptap-editor";
 interface CategoryProductProps {
   product: Product;
   fieldIndex: `steps.${number}.productCategories.${number}.products.${number}`;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  productsWithErrors?: QuantityCheckProductInfo[];
   isLoading?: boolean;
   isEditMode?: boolean;
   isProductSetAvailable?: boolean;

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

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Accordion } from "react-bootstrap";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } 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";
@@ -11,7 +11,7 @@ interface CategoryProductsProps {
   stepIndex: number;
   categoryIndex: number;
   products?: Product[];
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  productsWithErrors?: QuantityCheckProductInfo[];
   isLoading?: boolean;
   isEditMode?: boolean;
   isProductSetAvailable?: boolean;

package/src/sales/manual-booking/controll/ManualBookingStepsControll.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
 import { Accordion } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
-import { ErrorModal } from "../../../iframe/order-process/components/CalendarStepsForm/components/ErrorModal";
+import { ErrorModal } from "../../../iframe/order-process/components/ErrorModal/ErrorModal";
 import { MenuStep } from "../../../types";
 import { CollapsibleInputGroup } from "../../../collapsible-input-group";
 import { CategoryProducts } from "../category-products/CategoryProducts";
@@ -12,7 +12,7 @@ import { CategoryProducts } from "../category-products/CategoryProducts";
 export interface ManualBookingStepsControllProps {
   step: MenuStep;
   stepIndex: number;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  productsWithErrors?: QuantityCheckProductInfo[];
   isLoading?: boolean;
   isEditMode?: boolean;
   isProductSetAvailable?: boolean;

package/src/sales/manual-booking/select-menu/SelectMenu.tsx

@@ -39,7 +39,9 @@ export const SelectMenu = ({
       ) : (
         <>
           {!isLoading && (
-            <Form.Label className="bold-text">{t("App:menus")}</Form.Label>
+            <Form.Label className="bold-text">
+              {t("Design:productSets")}
+            </Form.Label>
           )}
 
           <div className="menu-list-manual-booking">

package/src/setting/dashboard/index.ts

@@ -1,7 +1,5 @@
 export * from "./DashboardSettingForm";
-export * from "./snippets/form";
 export * from "./snippets/card";
 export * from "./snippet-templates/card";
 export * from "./payments/payments-form/PaymentsForm";
 export * from "./payments/payments-modal/PaymentsModal";
-export * from "./snippets/modal";

package/src/snippet/snippet-template/SnippetTemplate.tsx

@@ -44,7 +44,7 @@ export function SnippetTemplate({
         <SnippetTemplateViewContextProvider>
           <div
             ref={containerRef}
-            className="d-flex flex-column-reverse flex-sm-row"
+            className="d-flex flex-column-reverse flex-sm-row overflow-auto"
           >
             <div className="d-flex flex-grow-1">
               <Preview

package/src/snippet/snippet-template/form/SnippetTemplateForm.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from "react-i18next";
 import { isEqual } from "lodash";
 import {
   SnippetTemplateValues,
-  SNIPPET_TEMPLATE_TYPE_EVENT,
-  SNIPPET_TEMPLATE_TYPE_CALENDAR,
+  SNIPPET_TEMPLATE_TYPE_EVENT_LIST,
+  SNIPPET_TEMPLATE_TYPE_VENUE_MAP,
 } from "@licklist/core/dist/DataMapper/Provider/SnippetTemplateDataMapper";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import Row from "react-bootstrap/Row";
@@ -80,7 +80,7 @@ export function SnippetTemplateForm({
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(onSubmit)}>
         <h2 className="mb-2 pb-1 border-bottom border-secondary">
-          {t("templateSettings")}
+          {t("designSettings")}
         </h2>
 
         <Row>
@@ -113,21 +113,21 @@ export function SnippetTemplateForm({
         {providerHasMap && (
           <Row>
             <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
-              <Form.Label>{t("snippetType")}</Form.Label>
+              <Form.Label>{t("widgetType")}</Form.Label>
               <Form.Control
                 as="select"
                 {...register("type", {
                   required: t("Validation:fieldRequired", {
-                    attribute: t("snippetType"),
+                    attribute: t("widgetType"),
                   }) as string,
                 })}
-                placeholder={t("snippetType")}
+                placeholder={t("widgetType")}
               >
-                <option value={SNIPPET_TEMPLATE_TYPE_EVENT}>
-                  {t("snippetTypeEventList")}
+                <option value={SNIPPET_TEMPLATE_TYPE_EVENT_LIST}>
+                  {t("widgetTypeEventList")}
                 </option>
-                <option value={SNIPPET_TEMPLATE_TYPE_CALENDAR}>
-                  {t("snippetTypeVenueMaps")}
+                <option value={SNIPPET_TEMPLATE_TYPE_VENUE_MAP}>
+                  {t("widgetTypeVenueMaps")}
                 </option>
               </Form.Control>
             </Form.Group>