@licklist/design 0.44.486-dev.68 → 0.44.486-dev.7

package/src/iframe/payment/order-items-table/hooks/useTableData.tsx

@@ -9,9 +9,15 @@ import {
   PAYMENT_TYPE_NET_PROFIT,
 } from "@licklist/core/dist/DataMapper/Order/PaymentDataMapper";
 import { StaticTableData } from "../../../../table";
-import { getProductQuantityAndPrice, getTotalSumByCategory } from "../utils";
+import {
+  getProductQuantityAndPrice,
+  calculateTotalDiscount,
+  calculateTotalPrice,
+  getPaymentValueByType,
+  getExternalPaymentDetail,
+  getTotalSumByCategory,
+} from "../utils";
 import { OrderItemsTableProps, SummaryItem } from "../types";
-import { getOrderSummaryItems } from "../utils/paymentSummary";
 
 const CURRENCY_DEFAULT = "GBP";
 export const PAYMENT_TYPE_TRANSLATE_KEYS = {
@@ -108,7 +114,9 @@ export const useTableData = ({
     );
   };
 
-  const renderSummaryItems = (summaryItems: SummaryItem[]) => {
+  const renderSummaryItems = (
+    summaryItems: { translateKey: string; price: number }[]
+  ) => {
     return summaryItems.map(({ translateKey, price }) => {
       return {
         key: uniqueId(`summary-info-${translateKey}`),
@@ -119,6 +127,93 @@ export const useTableData = ({
     });
   };
 
+  const paymentNotProcessedSummary = () => {
+    const externalPaymentDetail = paymentDetail
+      ? getExternalPaymentDetail(paymentDetail)
+      : undefined;
+
+    const total = calculateTotalPrice(order, externalPaymentDetail);
+
+    const summaryItems: SummaryItem[] = [
+      {
+        translateKey: "amountTotal",
+        price: total,
+      },
+    ];
+
+    if (externalDiscount) {
+      summaryItems.push({
+        price: externalDiscount,
+        translateKey: "amountWithDiscount",
+      });
+    }
+
+    if (externalPaymentDetail) {
+      return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
+    }
+
+    return summaryItems;
+  };
+
+  const processedPaymentSummary = () => {
+    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: "amountTotal",
+        price: total,
+      },
+    ];
+
+    if (totalDiscount) {
+      summaryItems.push({
+        translateKey: "amountWithDiscount",
+        price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
+      });
+    }
+
+    if (paymentDetail && !order.payments.length) {
+      return [...summaryItems, ...externalPaymentDetail];
+    }
+
+    summaryItems.push({
+      translateKey: "totalPaid",
+      price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
+    });
+    if (totalWithDiscount <= 0) {
+      return summaryItems;
+    }
+    summaryItems = [...summaryItems, ...externalPaymentDetail];
+
+    if (totalWithDiscount > order.totalAmount) {
+      summaryItems.push({
+        translateKey: "remainingToPay",
+        price: totalWithDiscount - order.totalAmount,
+      });
+    }
+    return summaryItems;
+  };
+
+  const getOrderSummaryItems = () => {
+    if (!isPaymentProcessed) {
+      return paymentNotProcessedSummary();
+    }
+
+    return processedPaymentSummary();
+  };
+
   const data = useMemo(
     () => {
       if (!order) {
@@ -127,14 +222,7 @@ export const useTableData = ({
 
       return [
         ...renderProductsContent(),
-        ...renderSummaryItems(
-          getOrderSummaryItems({
-            order,
-            paymentDetail,
-            isPaymentProcessed,
-            externalDiscount,
-          })
-        ),
+        ...renderSummaryItems(getOrderSummaryItems()),
       ];
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/iframe/payment/order-items-table/types/index.ts

@@ -1,24 +1,7 @@
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
 
-export const AMOUNT_TOTAL = "amountTotal";
-export const AMOUNT_WITH_DISCOUNT = "amountWithDiscount";
-export const TOTAL_PAID = "totalPaid";
-export const REMAINING_TO_PAY = "remainingToPay";
-
-export const SUMMARY_TRANSLATE_KEYS = [
-  AMOUNT_TOTAL,
-  AMOUNT_WITH_DISCOUNT,
-  TOTAL_PAID,
-  REMAINING_TO_PAY,
-];
-
-export type SUMMARY_TRANSLATE_KEY = typeof SUMMARY_TRANSLATE_KEYS[number];
-
-export type SummaryItem = {
-  translateKey: SUMMARY_TRANSLATE_KEY;
-  price: number;
-};
+export type SummaryItem = { translateKey: string; price: number };
 
 export type OrderItemsTableProps = {
   order?: Order;

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

@@ -38,7 +38,7 @@ Default.args = {
       },
       numberOfPeople: 1,
     },
-    shouldHidePeopleAmount: true,
+    isNotShownPeopleAmount: true,
     menuSteps: [],
   },
 };

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

@@ -100,18 +100,18 @@ export const PaymentPage = ({
     );
   }
 
-  const orderTotalAmountByFormValues = cartSumByOrderProducts(
+  const orderTotalAmounByFormValues = cartSumByOrderProducts(
     bookingSummaryProps && bookingSummaryProps?.formValues
       ? Object.values(bookingSummaryProps?.formValues)
       : undefined
   );
 
-  // User can fill promo code only in iframe application.
+  // User can fill promocode only in iframe appcliation.
   // 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 =
-    orderTotalAmountByFormValues > data?.amount;
+    orderTotalAmounByFormValues > data?.amount;
 
   return (
     <Page
@@ -164,7 +164,7 @@ export const PaymentPage = ({
                         <SummaryTotalBlock
                           label={t("total")}
                           amount={
-                            orderTotalAmountByFormValues +
+                            orderTotalAmounByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
                           }
                         />

package/src/index.ts

@@ -39,6 +39,3 @@ export * from "./radio-card";
 export * from "./image-radio-input";
 export * from "./sorting-select";
 export * from "./date-time-button";
-export * from "./calendar";
-export * from "./availability-indicator";
-export * from "./number-of-people-input";

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

@@ -314,38 +314,13 @@ export const EmailTemplateControl = React.forwardRef(
         <Row className="mb-4">
           <Form.Group as={Col}>
             <Form.Label>{t("Design:emailBody")}</Form.Label>
-
-            <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"}`}>
+            <div className="email-editor">
               <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/control/DateAndRecurrenceInput.tsx

@@ -5,11 +5,8 @@ import { Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useClickAway } from "react-use";
-import { DateTime } from "luxon";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
 import { DndContext } from "@dnd-kit/core";
-import { TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import {
   SortableContext,
   verticalListSortingStrategy,
@@ -23,11 +20,6 @@ import {
   RecurringDatePickerInputValues,
 } from "../../recurring-date-picker-input/RecurringDatePickerInput";
 import { ProductSetRecurrenceControl } from "./ProductSetRecurrenceControl";
-import {
-  AvailableTimesControl,
-  AvailableTimesControlRef,
-} from "../../zone/form/components/AvailableTimesControl";
-
 // eslint-disable-next-line max-len
 
 export interface DateAndRecurrenceInputValues {
@@ -36,16 +28,10 @@ export interface DateAndRecurrenceInputValues {
 
 interface DateAndRecurrenceInputProps {
   isEventEditProductSet?: boolean;
-  workHours?: WorkHour[];
-  providerHasBookingManagement: boolean;
-  isLoading?: boolean;
 }
 
 export const DateAndRecurrenceInput = ({
   isEventEditProductSet,
-  providerHasBookingManagement,
-  workHours,
-  isLoading,
 }: DateAndRecurrenceInputProps) => {
   const {
     control,
@@ -56,9 +42,6 @@ export const DateAndRecurrenceInput = ({
     clearErrors,
   } = useFormContext<DateAndRecurrenceInputValues>();
 
-  const [availableTimes, setAvailableTimes] = useState<string[]>([]);
-  const availableTimesFormRef = useRef<AvailableTimesControlRef>();
-
   const { fields, append, update, move } = useFieldArray({
     name: "menuRecurrences",
     control,
@@ -95,46 +78,13 @@ export const DateAndRecurrenceInput = ({
   const { t } = useTranslation("Design");
 
   // in this method we should fulfill the form with a proper data
-  const handleRecurringDateChange = async (
-    next: RecurringDatePickerInputValues
-  ) => {
-    const isAvailableTimesFormValid =
-      await availableTimesFormRef.current?.trigger();
-    if (!isAvailableTimesFormValid) {
-      return;
-    }
-    if (next?.startTime && next?.endTime) {
-      const startTime = DateTime.fromISO(next.startTime);
-      const endTime = DateTime.fromISO(next.endTime);
-      const { availableTimes } = availableTimesFormRef.current.getValues();
-      const validAvalilableTimes = availableTimes.every((time) => {
-        const currentAvailableTime = DateTime.fromFormat(time, TIME_FORMAT);
-
-        return (
-          currentAvailableTime.diff(startTime, "minutes").minutes >= 0 &&
-          currentAvailableTime.diff(endTime, "minutes").minutes <= 0
-        );
-      });
-      if (!validAvalilableTimes) {
-        availableTimesFormRef.current.setError("availableTimes", {
-          message: t("Validation:fieldTimeBetween", {
-            attribute: t("Design:startTimesSmall"),
-            min: startTime.toFormat(TIME_FORMAT),
-            max: endTime.toFormat(TIME_FORMAT),
-          }),
-        });
-
-        return;
-      }
-    }
-
+  const handleRecurringDateChange = (next: RecurringDatePickerInputValues) => {
     const values = {
       rrule: next.rrule,
       startDate: next.startDate,
       endDate: next.endDate,
       startTime: next.startTime,
       endTime: next.endTime,
-      ...availableTimesFormRef.current.getValues(),
     } as Partial<ProductSetRecurrence>;
 
     if (editState.values?.id) {
@@ -157,7 +107,6 @@ export const DateAndRecurrenceInput = ({
     // Hotfix for an issue with Popover close & open actions
     setTimeout(() => {
       setEditState({ index, values: next });
-      setAvailableTimes(next.availableTimes || []);
       setIsDatePopoverVisible(() => true);
     }, 100);
   };
@@ -227,25 +176,7 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
-              >
-                {providerHasBookingManagement && (
-                  <AvailableTimesControl
-                    workHours={workHours}
-                    isLoading={isLoading}
-                    defaultValues={availableTimes}
-                    ref={availableTimesFormRef}
-                    errorMessage={
-                      errors?.menuRecurrences?.[`${editState?.index}`]
-                        ?.availableTimes?.message
-                    }
-                    clearErrorMessage={() =>
-                      clearErrors(
-                        `menuRecurrences.${editState?.index}.availableTimes`
-                      )
-                    }
-                  />
-                )}
-              </RecurringDatePickerInput>
+              />
             </Popover.Content>
           </Popover>
         }
@@ -270,10 +201,6 @@ export const DateAndRecurrenceInput = ({
                   key={menuRecurrence._id}
                   menuRecurrence={menuRecurrence}
                   onEdit={() => handleOnEdit(menuRecurrence, index)}
-                  errorMessage={
-                    errors?.menuRecurrences?.[`${index}`]?.availableTimes
-                      ?.message
-                  }
                 />
               ))}
             </SortableContext>

package/src/product-set/control/ProductSetControl.stories.tsx

@@ -67,6 +67,7 @@ Empty.args = {
     type: "sale",
     termsAndConditions: "",
     operationalCost: OPERATIONAL_COST_CUSTOMER,
+    isDefault: false,
     menuRecurrence: {
       id: 38,
       menuId: 257,
@@ -86,6 +87,7 @@ Default.args = {
     type: "sale",
     termsAndConditions: "",
     operationalCost: OPERATIONAL_COST_CUSTOMER,
+    isDefault: true,
     menuRecurrence: {
       id: 38,
       menuId: 257,

package/src/product-set/control/ProductSetControl.tsx

@@ -7,13 +7,8 @@ import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
   OPERATIONAL_COST_TYPES,
-  RELY_ON_PEOPLE_QUANTITY,
-  RELY_ON_PEOPLE_PRODUCT_CAPACITY_QUANTITY,
-  RELY_ON_PEOPLE_PRODUCT_QUANTITY,
   OperationalCostType,
   ProductSetType,
-  RELY_ON_PEOPLE_TYPES,
-  RelyOnPeopleType,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { useId } from "@react-aria/utils";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
@@ -21,7 +16,6 @@ import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/Email
 import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { ruleForUrlWithProtocol } from "@licklist/plugins/dist/validation/Rules/urlRule";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { WarningMessage } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
 import {
@@ -40,12 +34,6 @@ const OPERATIONAL_COST_TITLES = {
   [OPERATIONAL_COST_CUSTOMER]: "operationalCostCustomer",
 } as const;
 
-const RELY_ON_PEOPLE_TYPE_TITLES = {
-  [RELY_ON_PEOPLE_PRODUCT_CAPACITY_QUANTITY]: "peopleProductCapacityQuantity",
-  [RELY_ON_PEOPLE_PRODUCT_QUANTITY]: "peopleProductQuantity",
-  [RELY_ON_PEOPLE_QUANTITY]: "peopleQuantity",
-};
-
 export interface TemplateItem {
   id: string;
   value: EmailTemplate | SmsTemplate;
@@ -57,9 +45,9 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   type: ProductSetType;
   termsAndConditions: string;
   thankYouPageUrl: string;
+  isDefault: boolean;
   operationalCost: OperationalCostType;
   productGroups?: SelectItem[];
-  relyOnPeopleType?: RelyOnPeopleType | null;
   fieldSetId?: number;
   steps?: Step[];
   emailTemplates?: TemplateItem[];
@@ -84,8 +72,6 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
-  workHours?: WorkHour[];
-  providerHasBookingManagement?: boolean;
 }
 
 export function ProductSetControl({
@@ -99,8 +85,6 @@ export function ProductSetControl({
   isCreateAction,
   showEmailTemplate,
   showSmsTemplate,
-  workHours,
-  providerHasBookingManagement = false,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -116,7 +100,6 @@ export function ProductSetControl({
 
   const nameId = useId();
   const termsAndConditionsId = useId();
-  const relyOnPeopleTypeId = useId();
 
   return (
     <Row
@@ -162,9 +145,6 @@ export function ProductSetControl({
         {isCreateAction && (
           <DateAndRecurrenceInput
             isEventEditProductSet={isEventEditProductSet}
-            workHours={workHours}
-            isLoading={isLoading}
-            providerHasBookingManagement={providerHasBookingManagement}
           />
         )}
 
@@ -196,6 +176,15 @@ export function ProductSetControl({
                 </Form.Group>
               )}
             /> */}
+          {/* <Form.Check
+              {...register("isDefault")}
+              id="isDefaultId"
+              name="isDefault"
+              label={t("Design:setAsDraft")}
+              custom
+              className="is-default-checkbox"
+              disabled={isLoading}
+            /> */}
 
           <Form.Group>
             <Form.Label className="mb-0">
@@ -231,29 +220,6 @@ export function ProductSetControl({
             </Form.Control>
           </Form.Group>
 
-          <Form.Group controlId={relyOnPeopleTypeId}>
-            <Form.Label>{t("peopleQuantityType")}</Form.Label>
-            <Form.Control
-              {...register("relyOnPeopleType")}
-              as="select"
-              defaultValue={null}
-            >
-              <option value="">{t("notRequired")}</option>
-              {Object.keys(RELY_ON_PEOPLE_TYPES).map((relyOnPeopleType) => (
-                <option
-                  value={RELY_ON_PEOPLE_TYPES[relyOnPeopleType]}
-                  key={RELY_ON_PEOPLE_TYPES[relyOnPeopleType]}
-                >
-                  {t(
-                    RELY_ON_PEOPLE_TYPE_TITLES[
-                      RELY_ON_PEOPLE_TYPES[relyOnPeopleType]
-                    ]
-                  )}
-                </option>
-              ))}
-            </Form.Control>
-          </Form.Group>
-
           <Form.Group controlId={termsAndConditionsId}>
             <Form.Label>{t("Design:termsAndConditions")}</Form.Label>
             <Form.Control

package/src/product-set/control/ProductSetRecurrenceControl.tsx

@@ -11,13 +11,11 @@ import { Icon } from "../../static";
 export interface ProductSetRecurrenceControlProps {
   menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
   onEdit?: (onEdit: Partial<ProductSetRecurrence>) => void;
-  errorMessage?: string;
 }
 
 export const ProductSetRecurrenceControl = ({
   menuRecurrence,
   onEdit,
-  errorMessage,
 }: ProductSetRecurrenceControlProps) => {
   const { formatDate } = useIntl();
   const { t } = useTranslation("Design");
@@ -32,7 +30,7 @@ export const ProductSetRecurrenceControl = ({
 
   return (
     <div
-      className="sortable-tree-root flex-column"
+      className="sortable-tree-root"
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
@@ -58,14 +56,10 @@ export const ProductSetRecurrenceControl = ({
             {formatDate(menuRecurrence.startDate, {
               dateStyle: "medium",
             })}{" "}
-            {menuRecurrence.endDate && (
-              <>
-                {"- "}
-                {formatDate(menuRecurrence.endDate, {
-                  dateStyle: "medium",
-                })}
-              </>
-            )}
+            -{" "}
+            {formatDate(menuRecurrence.endDate, {
+              dateStyle: "medium",
+            })}
           </span>
 
           <div
@@ -86,9 +80,6 @@ export const ProductSetRecurrenceControl = ({
           {getHumanReadableDate(menuRecurrence)}
         </span>
       </div>
-      <div className={`manual-form-error ${!errorMessage && "d-none"}`}>
-        {errorMessage}
-      </div>
     </div>
   );
 };

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

@@ -48,6 +48,7 @@ const getCategoryDefaultValue = (
   maxSubItems: null,
   quantityType: QUANTITY_TYPE_STANDARD,
   type: categoryType,
+  isRelyOnPeople: categoryType === CATEGORY_TYPE_TICKETS,
   isTimeRelated: false,
   collectUserInfo: false,
   hasTicket: categoryType === CATEGORY_TYPE_TICKETS,
@@ -71,7 +72,6 @@ export function ProductCategoriesControl({
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
-    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -287,7 +287,6 @@ export function ProductCategoriesControl({
                     quantityType={productCategory.quantityType}
                     hasTicket={productCategory?.hasTicket}
                     stepIndex={stepIndex}
-                    zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                   />