@licklist/design 0.66.11 → 0.66.12-dev.0

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Form, OverlayTrigger, Popover } from "react-bootstrap";
@@ -11,9 +11,9 @@ import { DateTime } from "luxon";
 import RRule, { Frequency } from "rrule";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 
+import { FaPlusCircle } from "react-icons/fa";
 import { DatePickerInput } from "../../recurring-date-picker-input/DatePickerInput";
 import { CONFIRM_MODAL_ACTIONS } from "../../modals/confirmation/ConfirmModal";
-import { Icon } from "../../static";
 
 import {
   AvailableTimesControl,
@@ -73,7 +73,7 @@ export const DateInput = ({
 
   useClickAway(popoverRef, (event) => {
     const isModal = CONFIRM_MODAL_ACTIONS.includes(
-      (event.target as HTMLElement)?.attributes?.getNamedItem("data-id")?.value
+      (event.target as HTMLElement)?.attributes?.getNamedItem("data-id")?.value,
     );
 
     if (isModal) {
@@ -101,7 +101,7 @@ export const DateInput = ({
 
   // in this method we should fulfill the form with a proper data
   const handleRecurringDateChange = async (
-    next: RecurringDatePickerInputValues
+    next: RecurringDatePickerInputValues,
   ) => {
     const isAvailableTimesFormValid =
       await availableTimesFormRef.current?.trigger();
@@ -189,8 +189,8 @@ export const DateInput = ({
       setValue(
         "menuRecurrences",
         menuRecurrences.filter(
-          (_currentMenuRecurrence, index) => index !== removeIndex
-        )
+          (_currentMenuRecurrence, index) => index !== removeIndex,
+        ),
       );
     }, 100);
   };
@@ -201,7 +201,7 @@ export const DateInput = ({
         {t(
           isEventEditProductSet
             ? "whenOverridesAvailable"
-            : "productSetAvailable"
+            : "productSetAvailable",
         )}
       </Form.Label>
 
@@ -227,7 +227,7 @@ export const DateInput = ({
                     }
                     clearErrorMessage={() =>
                       clearErrors(
-                        `menuRecurrences.${editState?.index}.availableTimes`
+                        `menuRecurrences.${editState?.index}.availableTimes`,
                       )
                     }
                   />
@@ -247,7 +247,8 @@ export const DateInput = ({
               menuRecurrence={menuRecurrence}
               onEdit={() => handleOnEdit(menuRecurrence, index)}
               errorMessage={
-                errors?.menuRecurrences?.[`${index}`]?.availableTimes?.message
+                errors?.menuRecurrences?.[`${index}`]?.availableTimes
+                  ?.message || errors?.menuRecurrences?.[`${index}`]?.message
               }
             />
           ))}
@@ -259,11 +260,11 @@ export const DateInput = ({
               onClick={handleOnAdd}
               onKeyDown={handleOnAdd}
             >
-              <Icon
-                type="plus-circle"
-                height="1rem"
+              <FaPlusCircle
+                size={16}
                 className="product-set-recurrence-icon-add mr-2"
               />
+
               {t("addDates")}
             </div>
           )}

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

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import Form from "react-bootstrap/Form";
 import { FormProvider, useForm } from "react-hook-form";
 import {

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { Col, Form, Row } from "react-bootstrap";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -22,6 +21,7 @@ import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemp
 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 { checkIfZoneCategory } from "@licklist/plugins";
 import { WarningMessage } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
 import {
@@ -85,7 +85,7 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
-  workHours?: WorkHour[];
+  workHours: WorkHour[] | undefined;
   providerHasBookingManagement?: boolean;
   isOverrides?: boolean;
   isCreateNewOverrides?: boolean;
@@ -127,6 +127,10 @@ export function ProductSetControl({
   const showEmailTemplateSelector = showEmailTemplate && !isOverrides;
   const showDateSelector = !isEventEditProductSet && isOverrides;
 
+  const isZoneAdded = steps?.some(({ productCategories }) =>
+    productCategories?.some((category) => checkIfZoneCategory(category?.type)),
+  );
+
   return (
     <Row
       className={`product-set-form ${
@@ -170,7 +174,7 @@ export function ProductSetControl({
 
         {showDateSelector ? (
           <DateInput
-            workHours={workHours}
+            workHours={isZoneAdded ? workHours : undefined}
             isLoading={isLoading}
             providerHasBookingManagement={providerHasBookingManagement}
           />
@@ -179,7 +183,7 @@ export function ProductSetControl({
             {isCreateAction && (
               <DateAndRecurrenceInput
                 isEventEditProductSet={isEventEditProductSet}
-                workHours={workHours}
+                workHours={isZoneAdded ? workHours : undefined}
                 isLoading={isLoading}
                 providerHasBookingManagement={providerHasBookingManagement}
               />
@@ -250,7 +254,7 @@ export function ProductSetControl({
                     ],
                     {
                       companyName,
-                    }
+                    },
                   )}
                 </option>
               ))}
@@ -278,7 +282,7 @@ export function ProductSetControl({
                   {t(
                     RELY_ON_PEOPLE_TYPE_TITLES[
                       RELY_ON_PEOPLE_TYPES[relyOnPeopleType]
-                    ]
+                    ],
                   )}
                 </option>
               ))}
@@ -297,7 +301,7 @@ export function ProductSetControl({
               disabled={isLoading || isOverrides}
               isInvalid={HookFormService.isInvalid(
                 "termsAndConditions",
-                errors
+                errors,
               )}
             />
             <Form.Control.Feedback type="invalid">
@@ -370,7 +374,7 @@ export function ProductSetControl({
                       disabled={isOverrides}
                       isInvalid={HookFormService.isInvalid(
                         "fieldSetId",
-                        errors
+                        errors,
                       )}
                     >
                       <option value="">{t("Design:choose")}</option>

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

@@ -1,5 +1,5 @@
 import { Meta, Story } from "@storybook/react";
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   ProductSetRecurrenceControl,
   ProductSetRecurrenceControlProps,

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import RRule from "rrule";
@@ -6,7 +5,7 @@ import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/Pro
 
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { Icon } from "../../static";
+import { FaCalendar, FaEllipsisH } from "react-icons/fa";
 
 export interface ProductSetRecurrenceControlProps {
   menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
@@ -48,11 +47,11 @@ export const ProductSetRecurrenceControl = ({
         className="product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
       >
         <span className="d-flex flex-row align-items-center">
-          <Icon
-            type="calendar"
-            height="1rem"
+          <FaCalendar
+            size={16}
             className="product-set-recurrence-icon-calendar"
           />
+
           <span className="product-set-recurrence-title d-flex flex-grow-1">
             {t("from")}{" "}
             {formatDate(menuRecurrence.startDate, {
@@ -75,9 +74,8 @@ export const ProductSetRecurrenceControl = ({
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
-            <Icon
-              type="ellipsis-h"
-              height="1rem"
+            <FaEllipsisH
+              size={16}
               className="product-set-recurrence-icon-more"
             />
           </div>

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

@@ -1,8 +1,6 @@
-import React from "react";
 import { useIntl } from "react-intl";
 import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
-
-import { Icon } from "../../static";
+import { FaCalendar, FaEllipsisH } from "react-icons/fa";
 
 export interface ProductSetRecurrenceControlProps {
   menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
@@ -24,9 +22,8 @@ export const ProductSetRecurrenceOverridesControl = ({
         className="product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
       >
         <span className="d-flex flex-row align-items-center">
-          <Icon
-            type="calendar"
-            height="1rem"
+          <FaCalendar
+            size={16}
             className="product-set-recurrence-icon-calendar"
           />
           <span className="product-set-recurrence-title d-flex flex-grow-1">
@@ -42,9 +39,8 @@ export const ProductSetRecurrenceOverridesControl = ({
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
-            <Icon
-              type="ellipsis-h"
-              height="1rem"
+            <FaEllipsisH
+              size={16}
               className="product-set-recurrence-icon-more"
             />
           </div>

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

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import React, { useState } from "react";
+import { useState } from "react";
 import Card from "react-bootstrap/Card";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Button } from "react-bootstrap";
-
-import { Icon, Image } from "../../static";
+import { FaCheck, FaTimes } from "react-icons/fa";
+import { Image } from "../../static";
 
 export interface TutorialGifCardProps {
   tutorialAsset?: string;
@@ -26,12 +26,10 @@ const TutorialGifCard = ({
       <Card className={`tutorial-card ${!isVisible && "hidden"}`}>
         <Card.Header className="tutorial-card-header">
           <div>
-            <Icon
-              type="check"
+            <FaCheck
               color="white"
-              height="0.9rem"
-              width="0.9rem"
               className="rounded product-set-item-icon"
+              size={14}
             />
             <span>{t("bookedTopTip")}</span>
           </div>
@@ -41,12 +39,7 @@ const TutorialGifCard = ({
             type="button"
           >
             <span>{t("gotIt")}</span>
-            <Icon
-              type="times"
-              height="1.125rem"
-              width="1.125rem"
-              className="rounded tutorial-close-icon p-1"
-            />
+            <FaTimes size={18} className="rounded tutorial-close-icon p-1" />
           </button>
         </Card.Header>
         <Card.Body className="tutorial-card-body">

package/src/product-set/deposit-paid/ProductSetDepositPaid.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import Form from "react-bootstrap/Form";
 import { FormProvider, useForm } from "react-hook-form";
 import {

package/src/product-set/deposit-paid/ProductSetDepositPaidControl.tsx

@@ -1,5 +1,4 @@
 import { useId } from "@react-aria/utils";
-import React from "react";
 import { Form } from "react-bootstrap";
 import Col from "react-bootstrap/Col";
 import InputGroup from "react-bootstrap/InputGroup";
@@ -10,8 +9,8 @@ import { useTranslation } from "react-i18next";
 const depositPaidAmountTypes = ["%", "£"] as const;
 const depositPaidPeriodTypes = ["mins", "hours", "days"] as const;
 
-type DepositPaidAmountType = typeof depositPaidAmountTypes[number];
-type DepositPaidPeriodType = typeof depositPaidPeriodTypes[number];
+type DepositPaidAmountType = (typeof depositPaidAmountTypes)[number];
+type DepositPaidPeriodType = (typeof depositPaidPeriodTypes)[number];
 
 export type ProductSetDepositPaidControlValues = {
   depositPaidAmount: number;
@@ -25,7 +24,7 @@ export interface ProductSetDepositPaidControlProps {
 }
 
 export function ProductSetDepositPaidControl(
-  props: ProductSetDepositPaidControlProps
+  props: ProductSetDepositPaidControlProps,
 ) {
   const { isLoading = false } = props;
   const {

package/src/product-set/elements/DeleteFieldButton.tsx

@@ -1,8 +1,7 @@
-import React from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
+import { FaTrashAlt } from "react-icons/fa";
 import { IsDeletableEvent } from "../types";
-import Icon from "../../static/Icon";
 
 export type DeleteFieldButtonProps = IsDeletableEvent;
 
@@ -15,7 +14,7 @@ export function DeleteFieldButton({ onDelete }: DeleteFieldButtonProps) {
       variant="outline-danger"
       className="d-flex align-items-center"
     >
-      <Icon type="trash" height="1rem" />{" "}
+      <FaTrashAlt size={16} />{" "}
       <span className="d-none d-sm-inline ml-2">{t("delete")}</span>
     </Button>
   );

package/src/product-set/elements/Elements.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import { DeleteFieldButton, DeleteFieldButtonProps } from "./DeleteFieldButton";
 
 export default {

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

@@ -1,48 +1,17 @@
-import React from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
-// @TODO Modal hided for first release.
-
 export function MobileFooter() {
   const { t } = useTranslation("Design");
-  // const [isModalVisible, setIsModalVisible] = useState(false);
 
   return (
-    <>
-      <div className="container product-set-mobile-footer">
-        <div
-          className={`d-block d-sm-none bg-white border-top fixed-bottom
+    <div className="container product-set-mobile-footer">
+      <div
+        className={`d-block d-sm-none bg-white border-top fixed-bottom
          py-4 px-5 d-flex justify-content-between flex-row-reverse`}
-        >
-          {/* <Button
-            variant="outline-primary"
-            size="sm"
-            className="btn-icon-popover rounded-circle"
-            onClick={() => setIsModalVisible(true)}
-          >
-            <Icon type="plus" width=".9rem" />
-          </Button> */}
-          <Button type="submit">{t("save")}</Button>
-        </div>
-      </div>
-      {/* <Modal
-        show={isModalVisible}
-        onHide={() => setIsModalVisible(false)}
-        dialogClassName="product-set-mobile-modal fixed-bottom"
-        animation={false}
       >
-        <Modal.Body>
-          <Tabs>
-            <Tabs.Tab eventKey="reusableSubsets" title="Reusable subsets"> */}
-      {/* @TODO: Implement logic here */}
-      {/* <p>Substet 1</p>
-              <p>Subset 2</p>
-              <p className="mb-0">Subset 3</p>
-            </Tabs.Tab>
-          </Tabs>
-        </Modal.Body>
-      </Modal> */}
-    </>
+        <Button type="submit">{t("save")}</Button>
+      </div>
+    </div>
   );
 }

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from "react";
+import { useEffect, useState, useContext } from "react";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { uniqueId } from "lodash";
 import { Badge } from "react-bootstrap";
@@ -42,7 +42,7 @@ interface ProductCategoriesControlProps extends WithIsLoading {
 
 const getCategoryDefaultValue = (
   categoryType: CategoryType,
-  sort: number
+  sort: number,
 ): ProductCategory => ({
   id: null,
   uniqueId: uniqueId("product-category"),
@@ -61,7 +61,6 @@ const getCategoryDefaultValue = (
   isReusable: false,
   hasSubEvents: false,
   products: [],
-  zoneId: null,
   sort,
 });
 
@@ -77,7 +76,6 @@ export function ProductCategoriesControl({
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
-    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -154,8 +152,8 @@ export function ProductCategoriesControl({
       moveArrayElements<ProductCategory>(
         productCategories,
         prevIndex,
-        nextIndex
-      )
+        nextIndex,
+      ),
     );
 
     setValue(productCategoriesFieldName, nextProductCategories);
@@ -220,7 +218,9 @@ export function ProductCategoriesControl({
 
           const isOverridesCategory = productCategory.products?.some(
             (product) =>
-              isEventEditProductSet ? !!product.id : !!product.originalProductId
+              isEventEditProductSet
+                ? !!product.id
+                : !!product.originalProductId,
           );
           const isNewOverridesCategory =
             isCreateNewOverrides && !!productCategory.id;
@@ -268,7 +268,7 @@ export function ProductCategoriesControl({
                   modalLabel={t("addNewCategory")}
                   secondaryBadge={getBadgeConfig(
                     productCategory.type,
-                    t(productCategory.type)
+                    t(productCategory.type),
                   )}
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
@@ -305,7 +305,6 @@ export function ProductCategoriesControl({
                     quantityType={productCategory.quantityType}
                     hasTicket={productCategory?.hasTicket}
                     stepIndex={stepIndex}
-                    zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                     isOverrides={isOverrides}
@@ -350,7 +349,7 @@ export function ProductCategoriesControl({
             className={clsx(
               "mt-3",
               showVenueMapSetError && "mb-3",
-              showVenueMapSetError && "is-invalid"
+              showVenueMapSetError && "is-invalid",
             )}
           />
           {showVenueMapSetError && (
@@ -383,7 +382,7 @@ export function ProductCategoriesControl({
 
 export const getBadgeConfig = (
   categoryType: CategoryType,
-  label: string
+  label: string,
 ): { label: string; className: string } | null => {
   if (categoryType === CATEGORY_TYPE_GAME)
     return {

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

@@ -1,6 +1,5 @@
 /* eslint-disable max-len */
 /* eslint-disable no-console */
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import {

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

@@ -1,8 +1,8 @@
-import React, { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { Button, Form, Col, Row } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+import { TFunction, useTranslation } from "react-i18next";
 import { VenueMapSet } from "@licklist/core/dist/DataMapper/Product/VenueMapSetDataMapper";
 import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
 import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
@@ -22,16 +22,21 @@ import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
 import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
+import { ErrorModal } from "../../iframe/order-process/components/ErrorModal";
 
 export interface WithIsLoading {
   isLoading: boolean;
 }
+export interface WithIdOptional {
+  id?: number;
+}
+
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[];
   isOverrides?: boolean;
@@ -82,6 +87,7 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext();
+  const [errorMessage, setErrorMessage] = useState("");
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -94,7 +100,13 @@ export function ProductSetForm({
 
   const submitHandler = (onSubmit: (values: ProductSetFormValues) => void) => {
     return (values: ProductSetFormValues) => {
-      if (checkAvailableTimesErrors({ values, setError, t })) {
+      if (
+        checkAvailableTimesErrors({
+          values,
+          setError,
+          t: t as TFunction<string>,
+        })
+      ) {
         return;
       }
       onSubmit(values);
@@ -113,11 +125,18 @@ export function ProductSetForm({
     if (!serverErrors) {
       return;
     }
+    if (Array.isArray(serverErrors) && serverErrors[0]) {
+      setErrorMessage(serverErrors[0]);
+    }
     FormErrorService.handleServerErrors(serverErrors, setError);
   }, [serverErrors, setError]);
 
   useEffect(() => {
-    window.history.pushState(null, "", window.location.pathname);
+    window.history.pushState(
+      null,
+      "",
+      window.location.pathname + window.location.search,
+    );
     window.addEventListener("beforeunload", onBeforeUnload);
     window.addEventListener("popstate", onPopState);
 
@@ -144,6 +163,12 @@ export function ProductSetForm({
         onDecline={onDeclineDialog}
       />
 
+      <ErrorModal
+        message={errorMessage}
+        isOpen={!!errorMessage}
+        onClose={() => setErrorMessage("")}
+      />
+
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>
@@ -154,11 +179,11 @@ export function ProductSetForm({
                     {...shared}
                     smsTemplates={getFilteredTemplates(
                       shared?.smsTemplates,
-                      formValues?.smsTemplates
+                      formValues?.smsTemplates,
                     )}
                     emailTemplates={getFilteredTemplates(
                       shared?.emailTemplates,
-                      formValues?.emailTemplates
+                      formValues?.emailTemplates,
                     )}
                     showEmailTemplate={!!shared?.emailTemplates}
                     showSmsTemplate={!!shared?.smsTemplates}
@@ -181,7 +206,7 @@ export function ProductSetForm({
                         <Button
                           className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
                           onClick={form.handleSubmit(
-                            submitHandler(onSubmitNoRedirect)
+                            submitHandler(onSubmitNoRedirect),
                           )}
                           disabled={
                             isLoading || contextIsLoading || !formValues.name

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useClickAway } from "react-use";
 import { Tabs } from "../../static";
 import { ProductSetPopover } from "../popover";