@licklist/design 0.59.0-dev.8 → 0.59.0

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/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();

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

@@ -4,17 +4,6 @@ export const generateDatesArray = (start: number, end: number, step: number) =>
     (_, index) => 1 + index * step
   );
 
-export const generateMonthsOptionsArray = () =>
-  Array.from({ length: 12 }, (_, index) => {
-    const value = index + 1;
-    let key = String(value);
-    if (value < 10) {
-      key = `0${key}`;
-    }
-
-    return { key, value };
-  });
-
 export const generateYearsArray = () => {
   const currentYear = new Date().getFullYear();
   const ageBackYear = currentYear - 100;

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/activity-card/ListActivitiesCard.scss

@@ -5,7 +5,7 @@
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  height: 6rem;
+  height: 5rem;
   padding: 0.375rem;
   border: 2px solid transparent;
   border-radius: 0.5rem;

package/src/styles/iframe-events/Card.scss

@@ -1,5 +1,4 @@
 @import "../snippet-templates/snippetVariables";
-@import "../themes//bookedit/variables";
 
 .iframe-event-card {
   position: relative;
@@ -19,27 +18,12 @@
     background-size: cover;
     background-position: center;
     cursor: pointer;
+    border: 1px solid transparent;
     border-radius: 0.5rem;
   }
 
   .card-body {
-    padding: 0.5rem 0 0.875rem 0;
-
-    @include media-breakpoint-down(sm) {
-      padding: 1rem 0;
-    }
-  }
-
-  &__info-icon {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-    background-color: "#ffffff";
-    border-radius: 1.5rem;
-    padding: 0 0.5rem;
-    font-size: 0.75rem;
-    font-weight: $white;
-    border: 1px solid $black;
+    padding: 0.5rem 0 0.875rem;
   }
 
   &__title {
@@ -49,7 +33,7 @@
     line-height: 1.25rem;
     cursor: pointer;
     margin-bottom: 0.5rem;
-    font-size: 0.95rem;
+    font-size: 1.125rem;
   }
 
   &__label {
@@ -98,8 +82,7 @@
         color: $snippet-elements-button-color;
         border: none;
         background-color: $snippet-elements-button-background-color;
-        box-shadow: 0 0 0 $input-btn-focus-width
-          $snippet-elements-button-background-color;
+        box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
       }
 
       &:disabled {
@@ -112,14 +95,14 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: 0.7;
+        opacity: .7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: 0.8;
+        opacity: .8;
       }
     }
   }
@@ -140,7 +123,7 @@
   }
 
   .card-text {
-    font-size: 0.82rem;
+    font-size: 0.875rem;
   }
 
   &.event-info {
@@ -219,6 +202,7 @@
 
   @media (max-width: 576px) {
     &.list-view {
+
       .card-image {
         margin-right: 0.5rem;
       }

package/src/styles/iframe-events/PoweredBy.scss

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 0.75rem 0 2rem;
+    padding: 0 0.75rem;
     height: 2rem;
     width: 100%;
     font-size: 0.75rem;
@@ -27,4 +27,4 @@
       color: $blue;
     }
   }
-}
+}

package/src/styles/iframe-external-modal/IframeExternalModal.scss

@@ -4,8 +4,7 @@ html[bkdt-scrollable="false"] {
   overflow: hidden !important;
 }
 
-body[bkdt-scrollable="false"] .bkdt-modal,
-body[bkdt-scrollable="false"] .bkdt-mask {
+body[bkdt-scrollable="false"] .bkdt-modal, body[bkdt-scrollable="false"] .bkdt-mask {
   display: block;
 }
 
@@ -16,7 +15,7 @@ body[bkdt-scrollable="false"] .bkdt-mask {
   width: 100%;
   height: 100%;
   z-index: 1000000;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0,0,0,0.5);
   display: none;
 }
 
@@ -83,7 +82,6 @@ body[bkdt-scrollable="false"] .bkdt-mask {
           width: 100%;
           height: 100%;
           max-width: 800px;
-          min-height: unset;
         }
       }
     }
@@ -100,7 +98,6 @@ body[bkdt-scrollable="false"] .bkdt-mask {
       .bkdt-modal-content {
         .bkdt-modal-body {
           height: 35rem;
-          max-height: 85vh;
         }
       }
     }

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -57,6 +57,8 @@
 
 .payment-booking-summary {
   transition: $color-transition;
+  background-color: transparent;
+  border: 1px solid transparent;
   border-radius: $iframe-border-radius;
   font-weight: 400;
   font-size: 0.875rem;

package/src/styles/iframe-page/Page.scss

@@ -21,7 +21,6 @@
 
   @include media-breakpoint-down(sm) {
     height: 100svh;
-    min-width: auto;
   }
 
   .header-block {