@licklist/design 0.59.0-dev.9 → 0.59.0

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/product-set/product-category/ProductCategoryControl.tsx

@@ -26,7 +26,6 @@ export interface ProductCategoryControlValues extends FormValues {
   name: string;
   minSubItems: number | null;
   maxSubItems: number | null;
-  overallQuantity?: number | null;
   quantityType: QuantityType;
   type: CategoryType;
   isTimeRelated: boolean;
@@ -103,7 +102,6 @@ export function ProductCategoryControl({
   const collectUserInfoId = useId();
   const hasTicketId = useId();
   const zoneId = useId();
-  const overallQuantityId = useId();
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
@@ -129,7 +127,7 @@ export function ProductCategoryControl({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxSubItems, fieldNamePrefix]);
 
-  const isZoneCategory =
+  const shouldShowZoneSelect =
     category.type === CATEGORY_TYPE_FIXED_DURATION ||
     category.type === CATEGORY_TYPE_GAME;
 
@@ -329,111 +327,51 @@ export function ProductCategoryControl({
             </Form.Group>
           </Col>
         </Row>
-        <Row>
-          <Col md={6} sm={6} xs={6}>
-            <Form.Group controlId={overallQuantityId}>
-              <Form.Label>{t("Design:overallQuantity")}</Form.Label>
-              <InputGroup hasValidation>
-                <InputGroup.Prepend
-                  className="arrow-up-btn"
-                  onClick={() => {
-                    const currentOverallCapacity = Number(
-                      getValues(`${fieldNamePrefix}.overallQuantity`) || 0
-                    );
-                    setValue(
-                      `${fieldNamePrefix}.overallQuantity`,
-                      currentOverallCapacity + 1,
-                      { shouldValidate: true }
-                    );
-                  }}
-                >
-                  <InputGroup.Text className="py-0 px-3">
-                    <IncrementIcon />
-                  </InputGroup.Text>
-                </InputGroup.Prepend>
+
+        {shouldShowZoneSelect && (
+          <Row>
+            <Col>
+              <Form.Group controlId={zoneId}>
+                <Form.Label>{t("Design:zone")}</Form.Label>
                 <Controller
                   control={control}
-                  name={`${fieldNamePrefix}.overallQuantity`}
+                  name={`${fieldNamePrefix}.zoneId`}
                   render={({ field }) => (
                     <Form.Control
-                      min={0}
-                      step={1}
-                      type="number"
+                      as="select"
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
-                        `${fieldNamePrefix}.overallQuantity`,
+                        `${fieldNamePrefix}.zoneId`,
                         errors
                       )}
                       {...field}
-                    />
+                    >
+                      <option value={null}>{t("Design:choose")}</option>
+                      {zones.map((zone) => (
+                        <option key={zone.id} value={zone.id}>
+                          {zone.name}
+                        </option>
+                      ))}
+                    </Form.Control>
                   )}
                   rules={{
-                    min: {
-                      value: 0,
-                      message: t("Validation:fieldMinNumber", {
-                        attribute: t("overallQuantity"),
-                        min: 0,
-                      }) as string,
+                    required: {
+                      value: providerHasBookingManagement,
+                      message: t("Validation:fieldRequired", {
+                        attribute: t("zone"),
+                      }),
                     },
                   }}
                 />
                 <Form.Control.Feedback type="invalid">
                   {HookFormService.getErrors<ProductSetFormValues>(
-                    `${fieldNamePrefix}.overallQuantity`,
+                    `${fieldNamePrefix}.zoneId`,
                     errors
                   )}
                 </Form.Control.Feedback>
-              </InputGroup>
-            </Form.Group>
-          </Col>
-        </Row>
-
-        {isZoneCategory && (
-          <>
-            <Row>
-              <Col>
-                <Form.Group controlId={zoneId}>
-                  <Form.Label>{t("Design:zone")}</Form.Label>
-                  <Controller
-                    control={control}
-                    name={`${fieldNamePrefix}.zoneId`}
-                    render={({ field }) => (
-                      <Form.Control
-                        as="select"
-                        disabled={isOverride}
-                        isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
-                          `${fieldNamePrefix}.zoneId`,
-                          errors
-                        )}
-                        {...field}
-                      >
-                        <option value={null}>{t("Design:choose")}</option>
-                        {zones.map((zone) => (
-                          <option key={zone.id} value={zone.id}>
-                            {zone.name}
-                          </option>
-                        ))}
-                      </Form.Control>
-                    )}
-                    rules={{
-                      required: {
-                        value: providerHasBookingManagement,
-                        message: t("Validation:fieldRequired", {
-                          attribute: t("zone"),
-                        }),
-                      },
-                    }}
-                  />
-                  <Form.Control.Feedback type="invalid">
-                    {HookFormService.getErrors<ProductSetFormValues>(
-                      `${fieldNamePrefix}.zoneId`,
-                      errors
-                    )}
-                  </Form.Control.Feedback>
-                </Form.Group>
-              </Col>
-            </Row>
-          </>
+              </Form.Group>
+            </Col>
+          </Row>
         )}
       </Col>
 

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,23 +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:noActiveTemplates", {
-                  notification: t("Design:email"),
+        {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.Group>
-          </Col>
-        </Row>
+                <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/manual-date-picker/ManualDatePicker.tsx

@@ -61,9 +61,9 @@ export const ManualDatePicker = ({
             disabled={isDisabled}
           >
             <option value="">{t("Design:monthShort")}</option>
-            {MONTHS_ARRAY.map((object) => (
-              <option key={object.key} value={object.value}>
-                {object.key}
+            {MONTHS_ARRAY.map((key) => (
+              <option key={key} value={key}>
+                {key}
               </option>
             ))}
           </Form.Control>

package/src/static/manual-date-picker/constants/index.ts

@@ -1,9 +1,5 @@
-import {
-  generateDatesArray,
-  generateMonthsOptionsArray,
-  generateYearsArray,
-} from "../utils";
+import { generateDatesArray, generateYearsArray } from "../utils";
 
 export const DAYS_ARRAY = generateDatesArray(1, 31, 1);
-export const MONTHS_ARRAY = generateMonthsOptionsArray();
+export const MONTHS_ARRAY = generateDatesArray(1, 12, 1);
 export const YEARS_ARRAY = generateYearsArray();