@licklist/design 0.44.486-dev.3 → 0.44.486-dev.30

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -0,0 +1,118 @@
+import { PAYMENT_TYPE_TRANSLATE_KEYS } from "../hooks/useTableData";
+import {
+  AMOUNT_TOTAL,
+  AMOUNT_WITH_DISCOUNT,
+  OrderItemsTableProps,
+  REMAINING_TO_PAY,
+  SummaryItem,
+  TOTAL_PAID,
+} from "../types";
+import {
+  calculateTotalDiscount,
+  calculateTotalPrice,
+  getExternalPaymentDetail,
+  getPaymentValueByType,
+} from "./index";
+
+const paymentNotProcessedSummary = ({
+  order,
+  externalDiscount,
+  paymentDetail,
+}: OrderItemsTableProps) => {
+  const externalPaymentDetail = paymentDetail
+    ? getExternalPaymentDetail(paymentDetail)
+    : undefined;
+
+  const total = calculateTotalPrice(order, externalPaymentDetail);
+
+  const summaryItems: SummaryItem[] = [
+    {
+      translateKey: AMOUNT_TOTAL,
+      price: total,
+    },
+  ];
+
+  if (externalDiscount) {
+    summaryItems.push({
+      price: externalDiscount,
+      translateKey: AMOUNT_WITH_DISCOUNT,
+    });
+  }
+
+  if (externalPaymentDetail) {
+    return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
+  }
+
+  return summaryItems;
+};
+
+const processedPaymentSummary = ({
+  order,
+  paymentDetail,
+}: OrderItemsTableProps) => {
+  const externalPaymentDetail =
+    paymentDetail && !order.payments.length
+      ? getExternalPaymentDetail(paymentDetail)
+      : Object.keys(PAYMENT_TYPE_TRANSLATE_KEYS).map((key) => {
+          return {
+            translateKey: PAYMENT_TYPE_TRANSLATE_KEYS[key],
+            price: getPaymentValueByType(order.payments, key),
+          };
+        });
+
+  const total = calculateTotalPrice(order, externalPaymentDetail);
+
+  const totalDiscount = calculateTotalDiscount(order.payments);
+  const totalWithDiscount = total - Number(totalDiscount);
+  let summaryItems: SummaryItem[] = [
+    {
+      translateKey: AMOUNT_TOTAL,
+      price: total,
+    },
+  ];
+
+  if (totalDiscount) {
+    summaryItems.push({
+      translateKey: AMOUNT_WITH_DISCOUNT,
+      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
+    });
+  }
+
+  if (paymentDetail && !order.payments.length) {
+    return [...summaryItems, ...externalPaymentDetail];
+  }
+
+  summaryItems.push({
+    translateKey: TOTAL_PAID,
+    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
+  });
+  if (totalWithDiscount <= 0) {
+    return summaryItems;
+  }
+  summaryItems = [...summaryItems, ...externalPaymentDetail];
+
+  if (totalWithDiscount > order.totalAmount) {
+    summaryItems.push({
+      translateKey: REMAINING_TO_PAY,
+      price: totalWithDiscount - order.totalAmount,
+    });
+  }
+  return summaryItems;
+};
+
+export const getOrderSummaryItems = ({
+  order,
+  externalDiscount,
+  paymentDetail,
+  isPaymentProcessed,
+}: OrderItemsTableProps): SummaryItem[] => {
+  if (!isPaymentProcessed) {
+    return paymentNotProcessedSummary({
+      order,
+      externalDiscount,
+      paymentDetail,
+    });
+  }
+
+  return processedPaymentSummary({ order, paymentDetail });
+};

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -100,18 +100,18 @@ export const PaymentPage = ({
     );
   }
 
-  const orderTotalAmounByFormValues = cartSumByOrderProducts(
+  const orderTotalAmountByFormValues = cartSumByOrderProducts(
     bookingSummaryProps && bookingSummaryProps?.formValues
       ? Object.values(bookingSummaryProps?.formValues)
       : undefined
   );
 
-  // User can fill promocode only in iframe appcliation.
+  // User can fill promo code only in iframe application.
   // It didn't possible via payment link. This check will
   // be applied when there are no metadata and in case when
   // orderValues sum is greater than amount in order.
   const isCalculatedAmountGreaterThanOrderAmount =
-    orderTotalAmounByFormValues > data?.amount;
+    orderTotalAmountByFormValues > data?.amount;
 
   return (
     <Page
@@ -164,7 +164,7 @@ export const PaymentPage = ({
                         <SummaryTotalBlock
                           label={t("total")}
                           amount={
-                            orderTotalAmounByFormValues +
+                            orderTotalAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
                           }
                         />

package/src/index.ts

@@ -39,3 +39,4 @@ export * from "./radio-card";
 export * from "./image-radio-input";
 export * from "./sorting-select";
 export * from "./date-time-button";
+export * from "./calendar";

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -314,13 +314,38 @@ export const EmailTemplateControl = React.forwardRef(
         <Row className="mb-4">
           <Form.Group as={Col}>
             <Form.Label>{t("Design:emailBody")}</Form.Label>
-            <div className="email-editor">
+
+            <div className="alert alert-warning" role="alert">
+              Due to the mail services limitations on the length of the email
+              body that can be sent or received - maximum length is set to
+              65,535 characters.
+            </div>
+
+            <div className={`email-editor ${errors.body && "is-invalid"}`}>
               <EmailEditor
                 ref={ref}
                 onReady={onReadyEditor}
                 style={{ height: "50rem" }}
               />
+
+              <input
+                type="hidden"
+                name="body"
+                {...register("body", {
+                  maxLength: {
+                    value: 65535,
+                    message: t("Validation:fieldMaxLength", {
+                      attribute: t("body"),
+                      max: 65535,
+                    }) as string,
+                  },
+                })}
+              />
             </div>
+
+            <Form.Control.Feedback type="invalid">
+              {errors.body?.message}
+            </Form.Control.Feedback>
           </Form.Group>
         </Row>
         <Row>

package/src/product-set/form/ProductCategoriesControl.tsx

@@ -72,6 +72,7 @@ export function ProductCategoriesControl({
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
+    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -287,6 +288,7 @@ export function ProductCategoriesControl({
                     quantityType={productCategory.quantityType}
                     hasTicket={productCategory?.hasTicket}
                     stepIndex={stepIndex}
+                    zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                   />

package/src/product-set/form/ProductSetForm.stories.tsx

@@ -74,6 +74,7 @@ Default.args = {
     {
       createdAt: "2023-05-08T15:55:28.000+03:00",
       deletedAt: null,
+      defaultDuration: 30,
       description: "Zone description 2",
       id: 2,
       image: null,

package/src/product-set/form/ProductsControl.tsx

@@ -14,6 +14,7 @@ import { generateUuid } from "@licklist/core/dist/Services";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 
 import { CategoryType } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { ProductControl, ProductControlProps, ProductSetFormValues } from "..";
 import { SortableTree } from "../../sortable-tree";
 import { CreateProductSetItem } from "../item/CreateProductSetItem";
@@ -32,6 +33,7 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
+  zones?: Zone[];
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -74,6 +76,7 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
+  zones,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -89,6 +92,12 @@ export function ProductsControl({
     getValues,
   } = form;
 
+  const zoneId = watch(
+    `steps.${stepIndex}.productCategories.${productCategoryIndex}.zoneId`
+  );
+
+  const catergoryZone = zones?.find((zone) => zone.id === Number(zoneId));
+
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
@@ -245,6 +254,7 @@ export function ProductsControl({
                     onProductNameChange={onChange}
                     hasTicket={hasTicket}
                     categoryType={categoryType}
+                    zoneDuration={catergoryZone?.defaultDuration}
                   />
                 }
                 onDelete={() => onProductRemove(index)}

package/src/product-set/product/ProductControl.tsx

@@ -113,6 +113,7 @@ export interface ProductControlProps<T>
   productName: string;
   hasTicket?: boolean;
   categoryType?: CategoryType;
+  zoneDuration?: number;
 }
 
 export function ProductControl<T extends FormValues>({
@@ -126,6 +127,7 @@ export function ProductControl<T extends FormValues>({
   productName,
   hasTicket,
   categoryType,
+  zoneDuration,
 }: ProductControlProps<T>) {
   const {
     register,
@@ -133,6 +135,7 @@ export function ProductControl<T extends FormValues>({
     formState: { errors },
     setValue,
     getValues,
+    setError,
     watch,
   } = useFormContext<T>();
 
@@ -190,6 +193,13 @@ export function ProductControl<T extends FormValues>({
     [handleImageUploading]
   );
 
+  const onChangeGameCapacity = (value: number) => {
+    setValue(
+      `${fieldNamePrefix}.duration` as Path<T>,
+      (value * zoneDuration) as UnpackNestedValue<PathValue<T, Path<T>>>
+    );
+  };
+
   const onImageRemove = useCallback(
     (id, path) => {
       handleImageRemove(String(id), path);
@@ -217,6 +227,17 @@ export function ProductControl<T extends FormValues>({
     }
   }, [images, fieldNamePrefix, setValue]);
 
+  useEffect(() => {
+    if (categoryType !== CATEGORY_TYPE_GAME || zoneDuration) {
+      return;
+    }
+
+    setError(`${fieldNamePrefix}.duration` as Path<T>, {
+      message: t("Validation:categoryZoneDoesntHaveDefaultDuration"),
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [categoryType, zoneDuration, fieldNamePrefix]);
+
   const quantitySelector = quantityValue ?? "1";
   const quantity = QUANTITY_TYPE_LIST_DTO[quantitySelector as string];
   return (
@@ -372,6 +393,14 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
+              rules={{
+                min: {
+                  value: 1,
+                  message: t("Validation:fieldRequired", {
+                    attribute: t("capacity"),
+                  }) as string,
+                },
+              }}
             />
           </Col>
         </Row>
@@ -383,6 +412,7 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
+              onChange={onChangeGameCapacity}
               rules={{
                 min: {
                   value: 1,
@@ -397,14 +427,6 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.duration`}
               label={t("durationMinutes")}
-              rules={{
-                min: {
-                  value: 1,
-                  message: t("Validation:fieldRequired", {
-                    attribute: t("duration"),
-                  }) as string,
-                },
-              }}
             />
           </Col>
         </Row>

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -66,7 +66,7 @@ export const ProductDurationControl = <T,>({
         },
         min: {
           value: 1,
-          message: t("Validation:fieldMin", {
+          message: t("Validation:fieldMinNumber", {
             attribute: t("duration"),
           }),
         },

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

@@ -332,7 +332,7 @@ export function ProductCategoryControl({
           <Row>
             <Col>
               <Form.Group controlId={zoneId}>
-                <Form.Label>Zone</Form.Label>
+                <Form.Label>{t("Design:zone")}</Form.Label>
                 <Controller
                   control={control}
                   name={`${fieldNamePrefix}.zoneId`}
@@ -361,10 +361,20 @@ export function ProductCategoryControl({
                       }),
                     },
                     validate: (value) => {
-                      if (value) return true;
-                      return t("Validation:fieldRequired", {
-                        attribute: t("zone"),
-                      }) as string;
+                      if (category.type !== CATEGORY_TYPE_GAME) {
+                        return true;
+                      }
+                      const selelctedZone = zones?.find(
+                        (zone) => zone?.id === Number(value)
+                      );
+
+                      if (!selelctedZone?.defaultDuration) {
+                        return t(
+                          "Validation:zoneDoesntHaveDefaultDuration"
+                        ) as string;
+                      }
+
+                      return true;
                     },
                   }}
                 />

package/src/provider/location-input/LocationInputDescription.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { useFormContext } from "react-hook-form";
 import en from "react-phone-number-input/locale/en.json";
 import { LocationInputValues } from ".";
@@ -13,7 +13,7 @@ export function LocationInputDescription() {
     "postcode",
     "country",
   ] as const;
-  const fields = fieldNames.reduce<JSX.Element[]>((acc, field) => {
+  const fields = fieldNames.reduce<ReactElement[]>((acc, field) => {
     const value = values?.[field];
     if (!value) return acc;
 

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/recurrence-input/RecurrenceEndInput.tsx

@@ -1,17 +1,19 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useId } from "@react-aria/utils";
 import { DateTime, DurationUnit } from "luxon";
 import { Col, Form, InputGroup, Row } from "react-bootstrap";
 import RRule from "rrule";
-
+import { DATE_FORMAT } from "@licklist/core/dist/Config";
+import { useTranslation } from "react-i18next";
 import { SupportedFrequency } from "./utils";
 import HTMLInputDateElement from "../types/static/HTMLInputDateElement";
 
 interface Props {
   disabled?: boolean;
-  date: string;
+  date: string; // yyyy-mm-ddThh:mm
+  minDate?: string; // should be in yyyy-mm-dd format
   frequency: SupportedFrequency;
-  until?: string;
+  until?: string; // yyyy-mm-dd
   count?: number;
   onChange: (values: { until?: string; count?: number }) => void;
 }
@@ -23,16 +25,31 @@ function RecurrenceEndInput({
   until,
   count,
   onChange,
+  minDate,
 }: Props) {
+  const { t } = useTranslation("Design");
   // unique ids for radios
   const neverId = useId();
   const onId = useId();
   const afterId = useId();
   const dateInput = useRef<HTMLInputDateElement | null>(null);
 
+  useEffect(() => {
+    const untilDatetime = DateTime.fromFormat(
+      until ?? getUntil({ date, frequency }),
+      DATE_FORMAT
+    );
+
+    const minDatetime = DateTime.fromFormat(minDate, DATE_FORMAT);
+
+    if (minDatetime > untilDatetime) {
+      onChange({ until: minDate });
+    }
+  }, [minDate, onChange, until, date, frequency]);
+
   return (
     <Form.Group>
-      <Form.Label>Ends</Form.Label>
+      <Form.Label>{t("ends")}</Form.Label>
 
       <Form.Check type="radio" id={neverId} custom className="mt-3">
         <Form.Check.Input
@@ -41,7 +58,7 @@ function RecurrenceEndInput({
           onChange={() => onChange({ count: 500 })}
           disabled={disabled}
         />
-        <Form.Check.Label>Never</Form.Check.Label>
+        <Form.Check.Label>{t("never")}</Form.Check.Label>
       </Form.Check>
 
       <Form.Check type="radio" id={onId} custom className="mt-3">
@@ -55,11 +72,12 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>On</Form.Check.Label>
+            <Form.Check.Label>{t("on")}</Form.Check.Label>
           </Col>
           <Col>
             <Form.Control
               type="date"
+              min={minDate}
               disabled={disabled || !until}
               aria-label="Date on which the recurrence ends"
               value={until ?? getUntil({ date, frequency })}
@@ -83,7 +101,7 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>After</Form.Check.Label>
+            <Form.Check.Label>{t("after")}</Form.Check.Label>
           </Col>
           <Col>
             <InputGroup>
@@ -99,7 +117,7 @@ function RecurrenceEndInput({
                 }
               />
               <InputGroup.Append>
-                <InputGroup.Text>occurrences</InputGroup.Text>
+                <InputGroup.Text>{t("occurences")}</InputGroup.Text>
               </InputGroup.Append>
             </InputGroup>
           </Col>
@@ -109,7 +127,7 @@ function RecurrenceEndInput({
   );
 }
 
-const defaultOccurrences = {
+export const defaultOccurrences = {
   [RRule.DAILY]: 30,
   [RRule.WEEKLY]: 13,
   [RRule.MONTHLY]: 12,

package/src/recurrence-input/RecurrenceInput.tsx

@@ -3,7 +3,7 @@
 import { DateTime } from "luxon";
 import React, { useEffect, useReducer } from "react";
 import RRule, { Frequency, Weekday } from "rrule";
-import RecurrenceEndInput from "./RecurrenceEndInput";
+import RecurrenceEndInput, { defaultOccurrences } from "./RecurrenceEndInput";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceMonthlyRepeatByInput from "./RecurrenceMonthlyRepeatByInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
@@ -16,6 +16,7 @@ import {
 export interface RecurrenceInputProps {
   disabled?: boolean;
   date: string;
+  minDate?: string;
   value?: string;
   onChange: (value: string) => void;
   initialFrequency?: Frequency;
@@ -24,6 +25,7 @@ export interface RecurrenceInputProps {
 export function RecurrenceInput({
   disabled = false,
   date,
+  minDate,
   value,
   onChange,
   initialFrequency = Frequency.WEEKLY,
@@ -82,6 +84,7 @@ export function RecurrenceInput({
       )}
       <RecurrenceEndInput
         date={date}
+        minDate={minDate}
         frequency={state.freq}
         until={state.until && DateTime.fromJSDate(state.until).toISODate()}
         count={state.count}
@@ -130,5 +133,12 @@ const getInitialState = ({
     byweekday = options.byweekday[0];
   }
 
-  return { ...options, byweekday };
+  return {
+    ...options,
+    count:
+      options?.count || options.until
+        ? options.count
+        : defaultOccurrences[options.freq],
+    byweekday,
+  };
 };