@licklist/design 0.63.0-dev.0 → 0.63.0

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

@@ -7,17 +7,14 @@ import {
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import {
-  ProductType,
-  PRODUCT_DEfAULT_COLORS,
-} from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { ProductType } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import clsx from "clsx";
 import {
   FieldNamePrefixPath,
   FormValues,
 } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useId } from "@react-aria/utils";
+import clsx from "clsx";
 import React, {
   ChangeEvent,
   useCallback,
@@ -39,7 +36,7 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
-
+import { PRODUCT_DEfAULT_COLORS } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -149,7 +146,7 @@ export function ProductControl<T extends FormValues>({
     clearErrors,
   } = useFormContext<T>();
 
-  const { setLoading, productGroupList } = useContext(ProductSetLoadingContext);
+  const { setLoading } = useContext(ProductSetLoadingContext);
   const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
@@ -162,8 +159,8 @@ export function ProductControl<T extends FormValues>({
 
   const advancedId = useId();
   const nameId = useId();
-
-  const productGroupId = useId();
+  // @TODO: no need for v1 release
+  // const productGroupId = useId();
   const descriptionId = useId();
   const termsAndConditionsId = useId();
   const isAvailableId = useId();
@@ -403,35 +400,6 @@ export function ProductControl<T extends FormValues>({
             isRequired={false}
             defaultColors={PRODUCT_DEfAULT_COLORS}
           />
-
-          <Form.Group controlId={productGroupId}>
-            <Form.Label>{t("productGroup")}</Form.Label>
-            <Form.Control
-              as="select"
-              {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
-              isInvalid={HookFormService.isInvalid<T>(
-                `${fieldNamePrefix}.productGroupId` as Path<T>,
-                errors
-              )}
-              disabled={isLoading}
-              defaultValue=""
-            >
-              <option value="">{t("Design:selectProductGroup")}</option>
-              {productGroupList.map((productGroup) => {
-                return (
-                  <option value={productGroup.id} key={productGroup.id}>
-                    {productGroup.value}
-                  </option>
-                );
-              })}
-            </Form.Control>
-            <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors<T>(
-                `${fieldNamePrefix}.productGroupId` as Path<T>,
-                errors
-              )}
-            </Form.Control.Feedback>
-          </Form.Group>
         </Col>
       </Row>
 
@@ -704,6 +672,38 @@ export function ProductControl<T extends FormValues>({
         </Collapse>
 
         <Row>
+          {/* @TODO: no need for v1 release
+            <Col xs={12} sm={6}>
+              <Form.Group controlId={productGroupId}>
+                <Form.Label>{t("productGroup")}</Form.Label>
+                <Form.Control
+                  as="select"
+                  {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
+                  isInvalid={HookFormService.isInvalid<T>(
+                    `${fieldNamePrefix}.productGroupId` as Path<T>,
+                    errors
+                  )}
+                  disabled={isLoading}
+                  defaultValue=""
+                >
+                  <option value="">{t("Design:selectProductGroup")}</option>
+                  {productGroupList.map((productGroup) => {
+                    return (
+                      <option value={productGroup.id} key={productGroup.id}>
+                        {productGroup.value}
+                      </option>
+                    );
+                  })}
+                </Form.Control>
+                <Form.Control.Feedback type="invalid">
+                  {HookFormService.getErrors<T>(
+                    `${fieldNamePrefix}.productGroupId` as Path<T>,
+                    errors
+                  )}
+                </Form.Control.Feedback>
+              </Form.Group>
+            </Col> */}
+
           <Col xs={12}>
             {hasBookingManagement && (
               <ProductBookingManagementControl<T>

package/src/product-set/product/fixed-duration-fields/FixedDurationOptions.tsx

@@ -5,6 +5,8 @@ import { FieldNamePrefixPath } from "@licklist/plugins/dist/types/services/Form/
 import { useWatch } from "react-hook-form";
 import { FormNumberInput } from "../../../static";
 
+
+
 interface FixedDurationOptionsProps<T> extends FieldNamePrefixPath<T> {
   isOverrides?: boolean;
 }

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -1,7 +1,9 @@
+import { DateTime } from "luxon";
 import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -23,10 +25,22 @@ export function WorkingHoursInputDescription() {
             <Row key={i}>
               <Col xs="auto">{weekdays[i]}:</Col>
               <Col>
-                {t("timeInterval", {
-                  start: weekday.start,
-                  end: weekday.end,
-                })}
+                {weekday?.end
+                  ? weekday.start
+                    ? t("timeInterval", {
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
+                        end: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
+                      })
+                    : t("timeFrom", {
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
+                        ),
+                      })
+                  : null}
               </Col>
             </Row>
           );

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

@@ -72,6 +72,7 @@ function RecurrenceAndFrequencyInput({
             </Form.Control.Feedback>
           </Form.Group>
         </Col>
+
       </Row>
 
       <Row>

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

@@ -12,14 +12,9 @@ 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,
-  useWorkHoursValidationRules,
-} from "./utils";
+import { parseAndValidateRRule, SupportedFrequency } from "./utils";
 import { ConfirmModal } from "../modals";
 import { DeleteFieldButton } from "../product-set/elements";
 
@@ -31,7 +26,6 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
-  workHours: WorkHour[] | undefined;
 }
 
 export interface RecurringDatePickerInputValues {
@@ -57,7 +51,6 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
-  workHours,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -91,8 +84,6 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
-  const validationRules = useWorkHoursValidationRules(byWeekDay, workHours);
-
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -197,7 +188,6 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
-          {...validationRules}
         />
 
         {children}

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

@@ -1,8 +1,4 @@
-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 = ({
@@ -15,7 +11,6 @@ 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
@@ -114,75 +109,3 @@ 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,12 +3,11 @@ 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/dist/DataMapper/Order/OrderDataMapper";
-
+} from "@licklist/core/src/DataMapper/Order/OrderDataMapper";
 import { BookingResults } from "./BookingResults";
 
 export default {

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

@@ -12,6 +12,7 @@ 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 = {
@@ -21,6 +22,8 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
+// @TODO integrate when API will be available
+// activity and staff keys
 export const ResultCard = ({
   order,
   className,
@@ -38,10 +41,10 @@ export const ResultCard = ({
     startDate,
     products,
     source,
+    totalAmount,
     event,
     menu,
     remainingToPay,
-    paidAmount,
   } = order;
 
   const productList = products.map((product) => product.name)?.join(", ") || "";
@@ -105,7 +108,7 @@ export const ResultCard = ({
           )}
           <p>
             {t("paidAmount")}:{" "}
-            {formatNumber(paidAmount, {
+            {formatNumber(totalAmount, {
               style: "currency",
               currency: Config.Currency.GBP,
             })}

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

@@ -21,14 +21,12 @@ 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: Array<TypeaheadOptions | ProductGroup>;
+  productGroupIds: string[];
   discount: number;
   totalType: CouponTotalType;
   startFrom: string;
@@ -60,9 +58,9 @@ export const CouponFormControl = ({
     watch,
   } = useFormContext<CouponFormValues>();
   const { t } = useTranslation(["Design", "Notification", "App"]);
-  const [selectedProductGroups, setSelectedProductGroups] = useState<
-    TypeaheadOptions[]
-  >([]);
+  const [selectedProductGroups, setSelectedProductGroups] = useState<string[]>(
+    []
+  );
   /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
   // const rrule = watch("rrule");
   // const [recurrent, setRecurrent] = useState(Boolean(rrule));
@@ -87,20 +85,15 @@ export const CouponFormControl = ({
     [COUPON_TOTAL_TYPE_TOTAL]: t("Design:depositTotal"),
   };
 
+  // Set pre-selected Product Groups
   useEffect(() => {
-    const defaultProductGroup = getValues("productGroupIds");
-
-    setSelectedProductGroups(
-      convertToTypeaheadOptions(defaultProductGroup as ProductGroup[])
-    );
+    setSelectedProductGroups(getValues("productGroupIds"));
   }, [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) {
@@ -258,21 +251,51 @@ export const CouponFormControl = ({
             </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>
+        {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>
+        )}
 
         {/* TODO: Show Recurrent date, when reccurent date bugs are fixed */}
         {/* {startFromValue && (

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

@@ -1,8 +1,5 @@
 import React, { useEffect } from "react";
-import {
-  ProductGroup,
-  ProductGroupDTO,
-} from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
+import { ProductGroup } from "@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper";
 import {
   CouponTotalType,
   CouponType,
@@ -19,7 +16,7 @@ export interface CouponFormValues {
   name?: string;
   code: string;
   discountType: CouponType;
-  productGroupIds: ProductGroupDTO[];
+  productGroupIds: string[];
   discount: number;
   totalType: CouponTotalType;
   startFrom: string;
@@ -57,6 +54,19 @@ 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/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 { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
+import { ProviderType } 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?: ProvidableType;
+    providerType?: ProviderType;
   };
 }
 

package/src/setting/dashboard/DashboardSettingForm.tsx

@@ -31,7 +31,6 @@ export type DashboardSettingFormFieldValues = {
   isEnquiryOnly: boolean;
   hasUserVerification: boolean;
   metaPixelId?: number;
-  eventDeadlineErrorMessage?: string;
 } & EventSettingFormFieldValues &
   ProviderSettingFormFieldValues;
 
@@ -82,7 +81,6 @@ export const DashboardSettingForm = ({
   const orderReportFormatId = useId();
   const userVerificationId = useId();
   const metaPixelId = useId();
-  const eventDeadlineErrorMessageId = useId();
 
   const orderReportFormatList: SelectItem[] = [
     { id: 1, value: t("groupItemsByOrder") },
@@ -236,17 +234,6 @@ 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/sales/BookingResults.scss

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

package/src/typeahead/Typeahead.tsx

@@ -16,7 +16,6 @@ export interface TypeaheadProps {
   isMultipleChoise?: boolean;
   noOptionsMessage: string;
   isInvalid?: boolean;
-  isCouponForm?: boolean;
 }
 
 function Typeahead({
@@ -25,25 +24,13 @@ function Typeahead({
   isRequired = false,
   isMultipleChoise,
   name = "",
-  isCouponForm = false,
   noOptionsMessage = "",
   isInvalid,
 }: TypeaheadProps) {
   const { control } = useFormContext();
 
-  const getStyle = (): CSSObjectWithLabel => {
-    const couponFormStyle = isCouponForm
-      ? {
-          borderRadius: "1rem",
-          minHeight: "3rem",
-        }
-      : {};
-    return isInvalid
-      ? { borderColor: "red", ...couponFormStyle }
-      : {
-          ...couponFormStyle,
-        };
-  };
+  const getErrorStyle = (): CSSObjectWithLabel =>
+    isInvalid ? { borderColor: "red" } : {};
 
   return (
     <>
@@ -59,7 +46,7 @@ function Typeahead({
             styles={{
               control: (base) => ({
                 ...base,
-                ...getStyle(),
+                ...getErrorStyle(),
               }),
             }}
             onChange={(value) => {