@licklist/design 0.62.3 → 0.63.0-dev.0

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

@@ -12,9 +12,14 @@ import {
 import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
 import { FormProvider, useForm } from "react-hook-form";
 import { Form } from "react-bootstrap";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
-import { parseAndValidateRRule, SupportedFrequency } from "./utils";
+import {
+  parseAndValidateRRule,
+  SupportedFrequency,
+  useWorkHoursValidationRules,
+} from "./utils";
 import { ConfirmModal } from "../modals";
 import { DeleteFieldButton } from "../product-set/elements";
 
@@ -26,6 +31,7 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
+  workHours: WorkHour[] | undefined;
 }
 
 export interface RecurringDatePickerInputValues {
@@ -51,6 +57,7 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
+  workHours,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -84,6 +91,8 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
+  const validationRules = useWorkHoursValidationRules(byWeekDay, workHours);
+
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -188,6 +197,7 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
+          {...validationRules}
         />
 
         {children}

package/src/recurring-date-picker-input/utils.ts

@@ -1,4 +1,8 @@
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { dateTimesSortFn } from "@licklist/plugins/dist/utils/dateTime";
 import { DateTime } from "luxon";
+import { useTranslation } from "react-i18next";
 import RRule, { Frequency, Weekday } from "rrule";
 
 export const getWeekdayForFrequency = ({
@@ -11,6 +15,7 @@ export const getWeekdayForFrequency = ({
   const parsedDate = DateTime.fromISO(date);
   return new Weekday(
     parsedDate.weekday - 1,
+    // eslint-disable-next-line no-nested-ternary
     frequency !== Frequency.MONTHLY
       ? undefined
       : parsedDate.day + 7 > parsedDate.daysInMonth
@@ -109,3 +114,75 @@ export const parseAndValidateRRule = ({
     until: options.until,
   } as ParsedRRuleOptions;
 };
+
+export const useWorkHoursValidationRules = (
+  byWeekDay: Weekday[] = [],
+  workHours: WorkHour[] | undefined
+) => {
+  const { t } = useTranslation("Validation");
+  if (!workHours) return {};
+
+  // workhours of selected days, all if no days selected
+  const selectedWorkHours = byWeekDay.length
+    ? byWeekDay.map(({ weekday }) =>
+        workHours.find(({ day }) => day === weekday)
+      )
+    : workHours;
+
+  /**
+   * start time
+   */
+  const startTimes = selectedWorkHours
+    .map((workhour) => DateTime.fromFormat(workhour.start, TIME_FORMAT))
+    .sort(dateTimesSortFn("desc"));
+
+  const latestStartTime = startTimes[0];
+
+  const startTimeRules = {
+    validate: (date: string) => {
+      const selectedDate = DateTime.fromFormat(date, TIME_FORMAT);
+      if (selectedDate >= latestStartTime) return true;
+
+      return t("fieldTimeAfter", {
+        attribute: t("Design:startTimeSmall"),
+        time: latestStartTime.toFormat(TIME_FORMAT),
+      });
+    },
+  };
+
+  /**
+   * end time
+   */
+  const endTimes = selectedWorkHours
+    .map<string>(({ start, end }) => {
+      const startDateTime = DateTime.fromFormat(start, TIME_FORMAT);
+      const endDateTime = DateTime.fromFormat(end, TIME_FORMAT);
+
+      if (startDateTime <= endDateTime) return end;
+
+      // if end is before start, then it means that end is on the next day
+      // so count only to the end of current day
+      return "23:59";
+    })
+    .map((workhour) => DateTime.fromFormat(workhour, TIME_FORMAT))
+    .sort(dateTimesSortFn("asc"));
+
+  const earliestEndTime = endTimes[0];
+
+  const endTimeRules = {
+    validate: (date: string) => {
+      const selectedDate = DateTime.fromFormat(date, TIME_FORMAT);
+      if (selectedDate <= earliestEndTime) return true;
+
+      return t("fieldTimeBefore", {
+        attribute: t("Design:endTimeSmall"),
+        time: earliestEndTime.toFormat(TIME_FORMAT),
+      });
+    },
+  };
+
+  return {
+    startTimeRules,
+    endTimeRules,
+  };
+};

package/src/sales/booking/results/BookingResults.stories.tsx

@@ -3,11 +3,12 @@ import { Meta } from "@storybook/react";
 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";
-import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import {
+  Order,
   ORDER_SOURCE_IFRAME,
   ORDER_SOURCE_MANUAL,
-} from "@licklist/core/src/DataMapper/Order/OrderDataMapper";
+} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+
 import { BookingResults } from "./BookingResults";
 
 export default {

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

@@ -12,7 +12,6 @@ import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import * as Config from "@licklist/core/dist/Config";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
-
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -22,8 +21,6 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
-// @TODO integrate when API will be available
-// activity and staff keys
 export const ResultCard = ({
   order,
   className,
@@ -41,10 +38,10 @@ export const ResultCard = ({
     startDate,
     products,
     source,
-    totalAmount,
     event,
     menu,
     remainingToPay,
+    paidAmount,
   } = order;
 
   const productList = products.map((product) => product.name)?.join(", ") || "";
@@ -108,7 +105,7 @@ export const ResultCard = ({
           )}
           <p>
             {t("paidAmount")}:{" "}
-            {formatNumber(totalAmount, {
+            {formatNumber(paidAmount, {
               style: "currency",
               currency: Config.Currency.GBP,
             })}

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

@@ -21,12 +21,14 @@ import couponCodeRules from "@licklist/plugins/dist/validation/Rules/couponCodeR
 // import { useId } from "@react-aria/utils";
 
 import HTMLInputDateElement from "../../../types/static/HTMLInputDateElement";
+import { Typeahead, TypeaheadOptions } from "../../../typeahead";
+import { convertToTypeaheadOptions } from "../utils";
 
 export interface CouponFormValues {
   name?: string;
   code: string;
   discountType: CouponType;
-  productGroupIds: string[];
+  productGroupIds: Array<TypeaheadOptions | ProductGroup>;
   discount: number;
   totalType: CouponTotalType;
   startFrom: string;
@@ -58,9 +60,9 @@ export const CouponFormControl = ({
     watch,
   } = useFormContext<CouponFormValues>();
   const { t } = useTranslation(["Design", "Notification", "App"]);
-  const [selectedProductGroups, setSelectedProductGroups] = useState<string[]>(
-    []
-  );
+  const [selectedProductGroups, setSelectedProductGroups] = useState<
+    TypeaheadOptions[]
+  >([]);
   /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
   // const rrule = watch("rrule");
   // const [recurrent, setRecurrent] = useState(Boolean(rrule));
@@ -85,15 +87,20 @@ export const CouponFormControl = ({
     [COUPON_TOTAL_TYPE_TOTAL]: t("Design:depositTotal"),
   };
 
-  // Set pre-selected Product Groups
   useEffect(() => {
-    setSelectedProductGroups(getValues("productGroupIds"));
+    const defaultProductGroup = getValues("productGroupIds");
+
+    setSelectedProductGroups(
+      convertToTypeaheadOptions(defaultProductGroup as ProductGroup[])
+    );
   }, [getValues]);
 
   useEffect(() => {
     setValue("productGroupIds", selectedProductGroups);
   }, [getValues, setValue, selectedProductGroups]);
 
+  const productGroupList = convertToTypeaheadOptions(productGroups);
+
   /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
   // useEffect(() => {
   //   if (!recurrent && rrule) {
@@ -251,51 +258,21 @@ export const CouponFormControl = ({
             </Form.Group>
           </Col>
         </Row>
-        {productGroups && productGroups?.length > 0 && (
-          <Row>
-            <Col md={12}>
-              <h5 className="mt-4">{t("Design:productGroups")}</h5>
-              <Form.Group className="d-flex flex-wrap justify-content-between mt-4 mb-5">
-                {productGroups?.map((productGroup) => {
-                  const isGroupSelected =
-                    getValues("productGroupIds")?.includes(
-                      String(productGroup.id)
-                    ) ?? false;
-
-                  return (
-                    <Form.Check
-                      key={productGroup.id}
-                      label={productGroup.name}
-                      defaultChecked={isGroupSelected}
-                      disabled={isLoading}
-                      onChange={(e) => {
-                        if (e.target.checked) {
-                          setSelectedProductGroups((prevGroups) =>
-                            Array.from(
-                              new Set([...prevGroups, String(productGroup.id)])
-                            )
-                          );
-                        } else {
-                          setSelectedProductGroups((prevGroups) => {
-                            return prevGroups.filter(
-                              (id) => String(productGroup.id) !== id
-                            );
-                          });
-                        }
-                      }}
-                    />
-                  );
-                })}
-                <Form.Control
-                  {...register("productGroupIds")}
-                  hidden
-                  value={selectedProductGroups}
-                  disabled={isLoading}
-                />
-              </Form.Group>
-            </Col>
-          </Row>
-        )}
+        <Row>
+          <Col>
+            <Form.Group className="mb-3">
+              <Form.Label>{t("Design:productGroups")}</Form.Label>
+              <Typeahead
+                name="productGroupIds"
+                options={productGroupList}
+                isMultipleChoise
+                isCouponForm
+                placeholder={t("Design:choose")}
+                noOptionsMessage={t("Design:noSelectedProductGroups")}
+              />
+            </Form.Group>
+          </Col>
+        </Row>
 
         {/* TODO: Show Recurrent date, when reccurent date bugs are fixed */}
         {/* {startFromValue && (

package/src/sales/coupon/form/CouponFrom.tsx

@@ -1,5 +1,8 @@
 import React, { useEffect } from "react";
-import { ProductGroup } from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
+import {
+  ProductGroup,
+  ProductGroupDTO,
+} from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
 import {
   CouponTotalType,
   CouponType,
@@ -16,7 +19,7 @@ export interface CouponFormValues {
   name?: string;
   code: string;
   discountType: CouponType;
-  productGroupIds: string[];
+  productGroupIds: ProductGroupDTO[];
   discount: number;
   totalType: CouponTotalType;
   startFrom: string;
@@ -54,19 +57,6 @@ export const CouponForm = ({
   const { setError } = form;
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
-  // @TODO: dont need for v1 release
-  // const [selectedProductGroups, setSelectedProductGroups] = useState<string[]>(
-  //   []
-  // );
-  // Set pre-selected Product Groups
-  // useEffect(() => {
-  //   setSelectedProductGroups(getValues("productGroupIds"));
-  // }, [getValues]);
-
-  // useEffect(() => {
-  //   setValue("productGroupIds", selectedProductGroups);
-  // }, [getValues, setValue, selectedProductGroups]);
-
   useEffect(() => {
     FormErrorService.handleServerErrors(serverErrors, setError);
   }, [serverErrors, setError]);

package/src/sales/coupon/utils/index.ts

@@ -0,0 +1,13 @@
+import { ProductGroup } from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
+
+export const convertToTypeaheadOptions = (productGroups?: ProductGroup[]) => {
+  if (!productGroups || !productGroups.length) {
+    return [];
+  }
+
+  return productGroups.map(({ id, name }: ProductGroup) => ({
+    id: Number(id),
+    value: name,
+    label: name,
+  }));
+};

package/src/setting/admin/AdminSettingForm.tsx

@@ -11,7 +11,7 @@ import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { Link } from "react-router-dom";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { ProviderType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
+import { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
 import Icon from "../../static/Icon";
 import { PaymentFeeForm, PaymentFeeFormFieldValues } from "./PaymentFeeForm";
 import { Currency } from "../../types/currency";
@@ -33,7 +33,7 @@ export interface AdminSettingFormProps extends HasPermissionProp {
   providerMetadata: {
     country?: string;
     providableId?: number;
-    providerType?: ProviderType;
+    providerType?: ProvidableType;
   };
 }
 

package/src/setting/dashboard/DashboardSettingForm.tsx

@@ -31,6 +31,7 @@ export type DashboardSettingFormFieldValues = {
   isEnquiryOnly: boolean;
   hasUserVerification: boolean;
   metaPixelId?: number;
+  eventDeadlineErrorMessage?: string;
 } & EventSettingFormFieldValues &
   ProviderSettingFormFieldValues;
 
@@ -81,6 +82,7 @@ export const DashboardSettingForm = ({
   const orderReportFormatId = useId();
   const userVerificationId = useId();
   const metaPixelId = useId();
+  const eventDeadlineErrorMessageId = useId();
 
   const orderReportFormatList: SelectItem[] = [
     { id: 1, value: t("groupItemsByOrder") },
@@ -234,6 +236,17 @@ export const DashboardSettingForm = ({
         <EventSettingForm isLoading={isLoading} />
 
         <ProviderSettingForm isLoading={isLoading} />
+        <Form.Group controlId={eventDeadlineErrorMessageId}>
+          <Form.Label>{t("eventDeadlineErrorMessage")}</Form.Label>
+          <Form.Control
+            {...register("eventDeadlineErrorMessage")}
+            isInvalid={Boolean(errors.eventDeadlineErrorMessage)}
+            disabled={isLoading}
+          />
+          <Form.Control.Feedback type="invalid">
+            {errors.eventDeadlineErrorMessage?.message}
+          </Form.Control.Feedback>
+        </Form.Group>
       </FormProvider>
       {hasPermission && (
         <Button

package/src/sortable-tree/SortableTreeItem.tsx

@@ -374,7 +374,7 @@ export function SortableTreeItem({
                   items={sortableItems}
                   strategy={verticalListSortingStrategy}
                 >
-                  <Collapse  in={expanded}>
+                  <Collapse in={expanded}>
                     <div className="ml-0">{children}</div>
                   </Collapse>
                 </SortableContext>

package/src/static/switch/BooleanSwitch.tsx

@@ -23,7 +23,7 @@ export function BooleanSwitch({
   const { t } = useTranslation("Design");
 
   const options: SelectItem[] = [
-    { id: 1, value: firstValueTitle ??  t("yes") },
+    { id: 1, value: firstValueTitle ?? t("yes") },
     { id: 0, value: secondValueTitle ?? t("no") },
   ];
 

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -47,141 +47,127 @@
           margin-left: 0.5rem;
         }
 
-        .ryft-payment-form {
-          .submit-button-wrapper {
-            margin: -1rem 0 1rem;
-
-            button {
-              width: 100%;
-            }
-          }
-          #mobile-pay-divider-container {
-            display: flex;
-            position: relative;
-            margin-bottom: 1rem;
-            #mobile-pay-divider-text {
-              margin-right: 1rem;
-              font-size: 0.875rem;
-              font-weight: 600;
-            }
-            #mobile-pay-divider {
-              width: 100%;
-              border-bottom: 1px #dfdfdf solid;
-              margin-bottom: 0.6rem;
-            }
-          }
-
-          #card-title-container {
-            height: auto;
-            border: none;
-            margin-bottom: 0.5rem;
-            text-align: left;
-            :first-child {
-              font-size: 1rem;
-              font-weight: 600;
-              margin-bottom: 1rem;
-            }
-
-            .form-label {
-              margin-bottom: 0.5rem;
-            }
-          }
-          .mobile-pay-title {
-            display: block;
-            font-weight: 600;
-            font-size: 1rem;
-            color: black;
-            padding: 0;
-            font-style: normal;
-            font-family: inherit;
-            margin-bottom: 1rem;
-          }
-        }
         .form {
           .input {
             border: 2px solid #525252 !important;
           }
         }
 
-        .ryft-payment-form {
-          @include media-breakpoint-up(md) {
-            .submit-button-wrapper {
-              max-width: 15.5rem;
-            }
-          }
-
-          // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
-          .ryft-pay-grid {
-            width: 100%;
-            max-width: 15.5rem;
-            margin-bottom: 1rem;
+        @include media-breakpoint-down(sm) {
+          .left-block-container {
+            max-height: 100%;
+            overflow: visible;
           }
-          .ryft-pay-apple-pay-button {
-            border-radius: 0.25rem;
-          }
-        }
-
-        .divider {
-          display: none !important;
-        }
-      }
-      @include media-breakpoint-down(sm) {
-        .left-block-container {
-          max-height: 100%;
-          overflow: visible;
         }
       }
-    }
-
-    @include media-breakpoint-down(sm) {
-      flex-direction: column-reverse;
-      overflow: scroll;
 
       @include media-breakpoint-down(sm) {
-        .left-block {
-          min-height: 100%;
-        }
-        .right-block {
-          margin: 0 auto;
-          width: 100%;
-          .children-wrapper {
-            .accordion {
-              .collapse {
-                overflow: visible;
-                overflow-x: unset;
-                scrollbar-width: unset;
+        flex-direction: column-reverse;
+        overflow: scroll;
+
+        @include media-breakpoint-down(sm) {
+          .left-block {
+            min-height: 100%;
+          }
+          .right-block {
+            margin: 0 auto;
+            width: 100%;
+            .children-wrapper {
+              .accordion {
+                .collapse {
+                  overflow: visible;
+                  overflow-x: unset;
+                  scrollbar-width: unset;
+                }
               }
             }
           }
         }
       }
     }
-  }
-  ::-webkit-scrollbar {
-    display: none;
-    scrollbar-width: none;
+    ::-webkit-scrollbar {
+      display: none;
+      scrollbar-width: none;
+    }
   }
 }
 
-@include media-breakpoint-down(md) {
-  .payment_link {
-    .page-body {
-      .left-block {
-        .left-block-container {
-          .ryft-payment-form {
-            position: relative;
-            max-height: 300px !important;
-            .ryft-pay-grid {
-              width: 100%;
-              max-width: 100%;
-            }
-          }
-        }
-      }
+#ryft-threeDSMethodIframe {
+  display: none;
+}
+
+.ryft-payment-form {
+  .submit-button-wrapper {
+    margin: -1rem 0 1rem;
+
+    button {
+      width: 100%;
     }
   }
+  #mobile-pay-divider-container {
+    display: flex;
+    position: relative;
+    margin-bottom: 1rem;
+    #mobile-pay-divider-text {
+      margin-right: 1rem;
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+    #mobile-pay-divider {
+      width: 100%;
+      border-bottom: 1px #dfdfdf solid;
+      margin-bottom: 0.6rem;
+    }
+  }
+
+  #card-title-container {
+    height: auto;
+    border: none;
+    margin-bottom: 0.5rem;
+    text-align: left;
+    :first-child {
+      font-size: 1rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+    }
+
+    .form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+  .mobile-pay-title {
+    display: block;
+    font-weight: 600;
+    font-size: 1rem;
+    color: black;
+    padding: 0;
+    font-style: normal;
+    font-family: inherit;
+    margin-bottom: 1rem;
+  }
 }
 
-#ryft-threeDSMethodIframe {
-  display: none;
+@include media-breakpoint-up(md) {
+  .ryft-payment-form,
+  .iframe-payment-form {
+    position: relative;
+    max-height: 300px !important;
+    .submit-button-wrapper {
+      max-width: 15.5rem;
+    }
+  }
+
+  // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
+  .ryft-pay-grid {
+    width: 100%;
+    max-width: 15.5rem;
+    margin-bottom: 1rem;
+  }
+  .ryft-pay-apple-pay-button {
+    border-radius: 0.25rem;
+  }
+
+  .divider {
+    display: none !important;
+  }
 }

package/src/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);