@licklist/design 0.63.0 → 0.63.1-dev.0

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

@@ -7,14 +7,17 @@ import {
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { ProductType } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import {
+  ProductType,
+  PRODUCT_DEfAULT_COLORS,
+} 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,
@@ -36,7 +39,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,
@@ -86,6 +89,7 @@ export interface ProductControlValues
   totalQuantity: number;
   isAvailable: boolean;
   isSoldOut: boolean;
+  originalProductId: number | null;
   isUnlimited: boolean;
   isRequired: boolean;
   quantitySelector: number;
@@ -146,7 +150,7 @@ export function ProductControl<T extends FormValues>({
     clearErrors,
   } = useFormContext<T>();
 
-  const { setLoading } = useContext(ProductSetLoadingContext);
+  const { setLoading, productGroupList } = useContext(ProductSetLoadingContext);
   const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
@@ -156,11 +160,10 @@ export function ProductControl<T extends FormValues>({
   );
   const capacity = watch(`${fieldNamePrefix}.capacity` as Path<T>);
   const disabledDuration = capacity === "0" || !capacity;
-
   const advancedId = useId();
   const nameId = useId();
-  // @TODO: no need for v1 release
-  // const productGroupId = useId();
+
+  const productGroupId = useId();
   const descriptionId = useId();
   const termsAndConditionsId = useId();
   const isAvailableId = useId();
@@ -400,6 +403,35 @@ 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 || isOverrides}
+              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>
 
@@ -672,38 +704,6 @@ 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,8 +5,6 @@ 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/step/StepControl.tsx

@@ -26,6 +26,7 @@ export interface StepControlProps extends IsDeletableEvent {
   stepIndex: number;
   stepName: string;
   onStepNameChange: (args: any) => void;
+  isOverrides?: boolean;
 }
 
 export function StepControl({
@@ -33,6 +34,7 @@ export function StepControl({
   stepIndex,
   stepName,
   onStepNameChange,
+  isOverrides = false,
 }: StepControlProps) {
   const { providerHasMap } = useContext(ProductSetLoadingContext);
   const {
@@ -42,7 +44,6 @@ export function StepControl({
     watch,
   } = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
-
   const fieldName = `steps.${stepIndex}.name` as const;
   const productCategoriesFieldName =
     `steps.${stepIndex}.productCategories` as const;
@@ -71,7 +72,7 @@ export function StepControl({
                     fieldName,
                     errors
                   )}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               )}
               control={control}
@@ -114,7 +115,7 @@ export function StepControl({
                           name={name}
                           value={Boolean(value)}
                           onChange={onChange}
-                          disabled={isLoading}
+                          disabled={isLoading || isOverrides}
                         />
                       )}
                       control={control}

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

@@ -1,9 +1,7 @@
-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";
 
@@ -25,22 +23,10 @@ export function WorkingHoursInputDescription() {
             <Row key={i}>
               <Col xs="auto">{weekdays[i]}:</Col>
               <Col>
-                {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}
+                {t("timeInterval", {
+                  start: weekday.start,
+                  end: weekday.end,
+                })}
               </Col>
             </Row>
           );

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

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

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

@@ -1,22 +1,19 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { Card } from "react-bootstrap";
+import { DateTime } from "luxon";
+import { DATE_FORMAT, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import {
   RecurringDatePickerInput,
   RecurringDatePickerInputProps,
 } from "./RecurringDatePickerInput";
-import { DateTime } from "luxon";
-import { DATE_FORMAT, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 
 export default {
   title: "RecurringDatePickerInput",
   component: RecurringDatePickerInput,
 } as Meta;
 
-interface DefaultRecurringDatePickerInputProps
-  extends RecurringDatePickerInputProps {}
-
-export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
+export const Default: Story<RecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -25,7 +22,7 @@ export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
     </Card>
   );
 };
-export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
+export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -36,6 +33,15 @@ export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
 };
 Default.args = {
   onChange: (data) => console.log("onSubmit", data),
+  workHours: [
+    { start: "20:00", end: "04:00", day: 0, description: "" },
+    { start: "20:00", end: "04:00", day: 1, description: "" },
+    { start: "20:00", end: "04:00", day: 2, description: "" },
+    { start: "20:00", end: "12:00", day: 3, description: "" },
+    { start: "20:00", end: "23:00", day: 4, description: "" },
+    { start: "08:00", end: "12:00", day: 5, description: "" },
+    { start: "10:00", end: "16:00", day: 6, description: "" },
+  ],
 };
 Valid.args = {
   onChange: (data) => console.log("onSubmit", data),

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,
+  useWorkHoursValidation,
+} 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 validator = useWorkHoursValidation(byWeekDay, workHours);
+
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -188,6 +197,8 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
+          startTimeRules={validator}
+          endTimeRules={validator}
         />
 
         {children}

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

@@ -1,4 +1,8 @@
-import { DateTime } from "luxon";
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { fromFormat } from "@licklist/plugins/dist/utils/dateTime";
+import { DateTime, Interval } 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,79 @@ export const parseAndValidateRRule = ({
     until: options.until,
   } as ParsedRRuleOptions;
 };
+
+export const useWorkHoursValidation = (
+  byWeekDay: Weekday[] = [],
+  workHours: WorkHour[] | undefined
+) => {
+  const { t } = useTranslation("Validation");
+  if (!workHours) return {};
+
+  const fromTimeFormat = fromFormat(TIME_FORMAT);
+
+  // map every day to array of intervals describing workhours for that day
+  let intervalsByDay = workHours.map((workhour, index, self) => {
+    const res: Interval[] = [];
+
+    const startTime = fromTimeFormat(workhour.start);
+    const endTime = fromTimeFormat(workhour.end);
+
+    if (endTime > startTime) {
+      res.push(Interval.fromDateTimes(startTime, endTime));
+    } else {
+      // if end is before start, then it means that end is on the next day
+      // so count only to the end of current day
+      res.push(Interval.fromDateTimes(startTime, startTime.endOf("day")));
+    }
+
+    const prevIndex = index === 0 ? self.length - 1 : index - 1;
+
+    const prevStartTime = fromTimeFormat(self[prevIndex].start);
+    const prevEndTime = fromTimeFormat(self[prevIndex].end);
+
+    // if prevStartTime > prevEndTime then it means that prevEndTime is on the current day
+    // so we need to add interval from start of current day to prevEndTime
+    if (prevStartTime > prevEndTime) {
+      res.push(Interval.fromDateTimes(prevEndTime.startOf("day"), prevEndTime));
+    }
+
+    return res;
+  });
+
+  // if length === 0 or length === 7 then all workhours are selected, no need to filter
+  if (![0, 7].includes(byWeekDay.length)) {
+    intervalsByDay = intervalsByDay.filter((_, index) =>
+      byWeekDay.find(({ weekday }) => weekday === index)
+    );
+  }
+
+  return {
+    validate: (_time: string) => {
+      const time = fromTimeFormat(_time);
+
+      const notFittingIntervalsByDay = intervalsByDay.reduce<Interval[][]>(
+        (acc, intervalsByDay) => {
+          if (!intervalsByDay.some((interval) => interval.contains(time))) {
+            acc.push(intervalsByDay);
+          }
+          return acc;
+        },
+        []
+      );
+
+      const notFittingIntervals = notFittingIntervalsByDay
+        .flat()
+        .filter((interval) => !interval.contains(time));
+
+      if (notFittingIntervalsByDay.length !== 0) {
+        return t("outsideWorkingHours", {
+          attribute: notFittingIntervals
+            .map((interval) => interval.toFormat("HH:mm"))
+            .join(", "),
+        });
+      }
+
+      return true;
+    },
+  };
+};

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;
   };
 }