@licklist/design 0.44.485 → 0.44.486-dev.10

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/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useIntl } from "react-intl";
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -12,7 +12,9 @@ export function WorkingHoursInputDescription() {
   const values = watch("workingHours");
   const weekdays = useWeekdays("short");
   const { t } = useTranslation("Design");
-  const { formatTime } = useIntl();
+
+  if (!values) return null;
+
   return (
     <>
       {Array.from({ length: weekdays.length }, (_, i) => i)
@@ -26,16 +28,16 @@ export function WorkingHoursInputDescription() {
                 {weekday?.end
                   ? weekday.start
                     ? t("timeInterval", {
-                        start: formatTime(
-                          DateTime.fromISO(weekday.start).toJSDate()
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
                         ),
-                        end: formatTime(
-                          DateTime.fromISO(weekday.end).toJSDate()
+                        end: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
                         ),
                       })
                     : t("timeFrom", {
-                        start: formatTime(
-                          DateTime.fromISO(weekday.start).toJSDate()
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
                         ),
                       })
                   : null}

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/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx

@@ -1,25 +1,36 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
+import { DATE_FORMAT } from "@licklist/core/dist/Config";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
 interface RecurrenceIntervalAndFrequencyInputProps {
   disabled?: boolean;
   minDate?: string;
+  startDateLabel?: string;
+  startTimeLabel?: string;
+  endDateLabel?: string;
+  endTimeLabel?: string;
 }
 
 function RecurrenceIntervalAndFrequencyInput({
   disabled = false,
   minDate,
+  startDateLabel,
+  startTimeLabel,
+  endDateLabel,
+  endTimeLabel,
 }: RecurrenceIntervalAndFrequencyInputProps) {
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
   const {
     getValues,
-    setValue,
     formState: { errors },
     register,
+    trigger,
+    setValue,
   } = useFormContext<RecurringDatePickerInputValues>();
 
   const startDate = getValues("startDate");
@@ -27,21 +38,31 @@ function RecurrenceIntervalAndFrequencyInput({
   const startTime = getValues("startTime");
   const endTime = getValues("endTime");
 
+  useEffect(() => {
+    if (!startDate || !endDate) {
+      return;
+    }
+    trigger(`endDate`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startDate]);
+
+  useEffect(() => {
+    trigger("endTime");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startTime]);
+
   return (
     <>
-      <Row className="align-items-center">
+      <Row>
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:fromDate")}</Form.Label>
+            <Form.Label>{startDateLabel ?? t("Design:fromDate")}</Form.Label>
             <Form.Control
               type="date"
               {...register("startDate", { required: true })}
               defaultValue={startDate}
               className={startDate && "date-input-with-value"}
               disabled={disabled}
-              onChange={({ target: { value } }) => {
-                setValue("startDate", value);
-              }}
               min={minDate}
               isInvalid={Boolean(errors.startDate)}
             />
@@ -53,16 +74,32 @@ function RecurrenceIntervalAndFrequencyInput({
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:toDate")}</Form.Label>
+            <Form.Label>{endDateLabel ?? t("Design:toDate")}</Form.Label>
             <Form.Control
               type="date"
-              {...register("endDate", { required: true })}
+              {...register("endDate", {
+                required: true,
+                validate: (date) => {
+                  if (!startDate || !date) {
+                    return true;
+                  }
+                  const currentStartDate = DateTime.fromFormat(
+                    startDate,
+                    DATE_FORMAT
+                  );
+                  const currentEndDate = DateTime.fromFormat(date, DATE_FORMAT);
+                  return currentEndDate.diff(currentStartDate, ["days"]).days >=
+                    0
+                    ? true
+                    : `${t(`Validation:fieldLaterDate`, {
+                        attribute: t("Design:endDateSmall"),
+                        min: t("Design:startDateSmall"),
+                      })}`;
+                },
+              })}
               defaultValue={endDate}
               className={endDate && "date-input-with-value"}
               disabled={disabled}
-              onChange={({ target: { value } }) => {
-                setValue("endDate", value);
-              }}
               min={startDate || undefined}
               isInvalid={Boolean(errors.endDate)}
             />
@@ -73,19 +110,21 @@ function RecurrenceIntervalAndFrequencyInput({
         </Col>
       </Row>
 
-      <Row className="align-items-center">
+      <Row>
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:availableFrom")}</Form.Label>
+            <Form.Label>
+              {startTimeLabel ?? t("Design:availableFrom")}
+            </Form.Label>
             <Form.Control
               type="time"
               {...register("startTime", { required: false })}
-              placeholder="hh:mm"
-              defaultValue={startTime}
-              disabled={disabled}
               onChange={({ target: { value } }) => {
                 setValue("startTime", `${value}:00`);
               }}
+              placeholder="hh:mm"
+              defaultValue={startTime}
+              disabled={disabled}
               isInvalid={Boolean(errors.startTime)}
             />
           </Form.Group>
@@ -93,18 +132,38 @@ function RecurrenceIntervalAndFrequencyInput({
 
         <Col xs={12} sm={6}>
           <Form.Group>
-            <Form.Label>{t("Design:availableTo")}</Form.Label>
+            <Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
             <Form.Control
               type="time"
-              {...register("endTime", { required: false })}
+              {...register("endTime", {
+                required: false,
+                validate: (time) => {
+                  if (!startTime || !time) {
+                    return true;
+                  }
+                  const currentStartTime = DateTime.fromISO(startTime);
+                  const currentEndTime = DateTime.fromISO(time);
+
+                  return currentEndTime?.diff(currentStartTime, ["seconds"])
+                    ?.seconds > 0
+                    ? true
+                    : `${t(`Validation:fieldLaterDate`, {
+                        attribute: t("Design:endTimeSmall"),
+                        min: t("Design:startTimeSmall"),
+                      })}`;
+                },
+              })}
+              onChange={({ target: { value } }) => {
+                setValue("endTime", `${value}:59`, { shouldValidate: true });
+              }}
               placeholder="hh:mm"
               defaultValue={endTime}
               disabled={disabled}
-              onChange={({ target: { value } }) => {
-                setValue("endTime", `${value}:59`);
-              }}
               isInvalid={Boolean(errors.endTime)}
             />
+            <Form.Control.Feedback type="invalid">
+              {errors.endTime?.message}
+            </Form.Control.Feedback>
           </Form.Group>
         </Col>
       </Row>

package/src/recurring-date-picker-input/RecurringDatePickerInput.tsx

@@ -166,6 +166,7 @@ export function RecurringDatePickerInput({
   return (
     <FormProvider {...form}>
       <Form
+        noValidate
         onSubmit={(event) => {
           // prevents parent form submitting
           event.preventDefault();

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/guest-profile/previous-bookings/PreviousBookings.stories.tsx

@@ -1,5 +1,6 @@
 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";
@@ -10,11 +11,26 @@ export default {
   title: "Sales/Guest Profile/Previous Bookings",
 } as Meta;
 
-export const Default = (args) => (
-  <div>
-    <PreviousBookings {...args} />
-  </div>
-);
+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>
+  );
+};
 
 Default.args = {
   orders: [
@@ -43,6 +59,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 1,
       event: {
         id: 1,
         name: "testEvent1",
@@ -79,6 +97,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 2,
       event: {
         id: 2,
         name: "testEvent2",
@@ -128,6 +148,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -156,6 +178,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -184,6 +208,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -212,6 +238,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -239,6 +267,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Button } from "react-bootstrap";
@@ -8,9 +8,13 @@ const MAX_ORDERS_COUNT = 6;
 
 export type PreviousBookingsProps = {
   orders: Order[];
+  renderOrderTitleLinkByProvider?: (order: Order) => ReactNode;
 };
 
-export const PreviousBookings = ({ orders }: PreviousBookingsProps) => {
+export const PreviousBookings = ({
+  orders,
+  renderOrderTitleLinkByProvider,
+}: PreviousBookingsProps) => {
   const { t } = useTranslation("Design");
   const [showOlderBookings, setShowOlderBookings] = useState(false);
 
@@ -36,13 +40,17 @@ export const PreviousBookings = ({ orders }: PreviousBookingsProps) => {
       {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">{order.event?.name}</p>
+                  <p className="label">{eventName}</p>
                   {order.createdAt && (
                     <p className="event-date">{formatDate(order.createdAt)}</p>
                   )}