@licklist/design 0.68.1-dev.0 → 0.68.1

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -1,76 +1,76 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback } from "react";
 import {
   IMAGE_TYPE_IMAGE,
   IMAGE_TYPE_COVER,
   IMAGE_TYPE_MAP,
   Image,
-} from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
-import { useId } from '@react-aria/utils'
-import { Accordion, Button, Form, Modal } from 'react-bootstrap'
-import { FormProvider, useForm, Controller } from 'react-hook-form'
-import { DateTime } from 'luxon'
-import { useTranslation } from 'react-i18next'
-import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
-import { useMultipleImages } from '@licklist/plugins/dist/hooks/Media/useMultipleImages'
-import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
-import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
-import { scrollToError } from '@licklist/plugins/dist/utils/ScrollUtils'
-import { getFirstErrorKey } from '@licklist/plugins/dist/utils/FormValues'
-
-import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
-import { CategoryGroup } from '../../../../types/categories'
-import { SaleDeadline } from '../SaleDeadline/SaleDeadline'
+} from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+import { useId } from "@react-aria/utils";
+import { Accordion, Button, Form, Modal } from "react-bootstrap";
+import { FormProvider, useForm, Controller } from "react-hook-form";
+import { DateTime } from "luxon";
+import { useTranslation } from "react-i18next";
+import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import { useMultipleImages } from "@licklist/plugins/dist/hooks/Media/useMultipleImages";
+import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
+import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
+import { scrollToError } from "@licklist/plugins/dist/utils/ScrollUtils";
+import { getFirstErrorKey } from "@licklist/plugins/dist/utils/FormValues";
+
+import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
+import { CategoryGroup } from "../../../../types/categories";
+import { SaleDeadline } from "../SaleDeadline/SaleDeadline";
 import {
   CategoriesInput,
   CategoriesInputDescription,
-} from '../../../../provider'
-import { CollapsibleInputGroup } from '../../../../collapsible-input-group'
-import { TipTapEditor } from '../../../../tiptap-editor'
-import { FileUpload } from '../../../../file-upload'
-import { IntervalInput, IntervalInputValues } from '../../IntervalInput'
-import { SelectEventProductSet } from '../SelectEventProductSet'
-import { Dialog, useDialogContext } from '../../../../modals/dialog'
+} from "../../../../provider";
+import { CollapsibleInputGroup } from "../../../../collapsible-input-group";
+import { TipTapEditor } from "../../../../tiptap-editor";
+import { FileUpload } from "../../../../file-upload";
+import { IntervalInput, IntervalInputValues } from "../../IntervalInput";
+import { SelectEventProductSet } from "../SelectEventProductSet";
+import { Dialog, useDialogContext } from "../../../../modals/dialog";
 
-import { ProductSetFormValues } from '../../../../product-set/form/ProductSetForm'
-import { isUrlValid } from '../../utils/isUrlValid'
+import { ProductSetFormValues } from "../../../../product-set/form/ProductSetForm";
+import { isUrlValid } from "../../utils/isUrlValid";
 
 export interface EditEventFormValues extends IntervalInputValues {
-  name: string
-  startAt: string
-  endAt: string
-  description: string | null
-  categories: string[]
-  productSetId?: number
-  termsAndConditions: string | null
-  visible: boolean | string
-  externalPaymentLink: string | null
-  images: Image[] | null
-  saleDeadline: number | null
-  integrationUrl: string | null
-  recurrenceEndAt?: string
-  editedProductSet?: ProductSetFormValues
+  name: string;
+  startAt: string;
+  endAt: string;
+  description: string | null;
+  categories: string[];
+  productSetId?: number;
+  termsAndConditions: string | null;
+  visible: boolean | string;
+  externalPaymentLink: string | null;
+  images: Image[] | null;
+  saleDeadline: number | null;
+  integrationUrl: string | null;
+  recurrenceEndAt?: string;
+  editedProductSet?: ProductSetFormValues;
 }
 
 export interface EditEventFormProps extends HasPermissionProp {
-  disabled?: boolean
-  categories: CategoryGroup[]
-  title: string
-  defaultEventValues?: Partial<EditEventFormValues>
-  serverErrors?: ServerError
-  onSaveEvent: (values: EditEventFormValues) => void
-  productSets?: ProductSet[] | null
-  hasPermission?: boolean
-  createProductSet: (props: EditEventFormValues) => void
-  setEditProductSetId: (value: string) => void
-  isExternalPaymentLinkEnabled?: boolean
-  timeZone: string
+  disabled?: boolean;
+  categories: CategoryGroup[];
+  title: string;
+  defaultEventValues?: Partial<EditEventFormValues>;
+  serverErrors?: ServerError;
+  onSaveEvent: (values: EditEventFormValues) => void;
+  productSets?: ProductSet[] | null;
+  hasPermission?: boolean;
+  createProductSet: (props: EditEventFormValues) => void;
+  setEditProductSetId: (value: string) => void;
+  isExternalPaymentLinkEnabled?: boolean;
+  timeZone: string;
 }
 
 const eventImageTypes = {
   uploadImage: IMAGE_TYPE_MAP[IMAGE_TYPE_IMAGE],
   uploadCover: IMAGE_TYPE_MAP[IMAGE_TYPE_COVER],
-}
+};
 
 export const EditEventForm = ({
   disabled = false,
@@ -86,27 +86,27 @@ export const EditEventForm = ({
   isExternalPaymentLinkEnabled,
   timeZone,
 }: EditEventFormProps) => {
-  const { t } = useTranslation(['Design', 'Validation'])
+  const { t } = useTranslation(["Design", "Validation"]);
 
-  const descriptionId = useId()
-  const termsAndConditionsId = useId()
-  const visibilityId = useId()
-  const integrationUrlId = useId()
-  const externalPaymentLinkId = useId()
+  const descriptionId = useId();
+  const termsAndConditionsId = useId();
+  const visibilityId = useId();
+  const integrationUrlId = useId();
+  const externalPaymentLinkId = useId();
 
-  const [initialImages, setInitialImages] = useState<Image[] | null>(null)
-  const [showEditProductSet, setShowEditProductSet] = useState(false)
+  const [initialImages, setInitialImages] = useState<Image[] | null>(null);
+  const [showEditProductSet, setShowEditProductSet] = useState(false);
   const {
     isShownDialog,
     onBeforeUnload,
     onPopState,
     onApproveDialog,
     onDeclineDialog,
-  } = useDialogContext()
+  } = useDialogContext();
 
   const form = useForm<EditEventFormValues>({
     defaultValues: sanitizeDefaultValues(defaultEventValues),
-  })
+  });
 
   const {
     register,
@@ -119,11 +119,11 @@ export const EditEventForm = ({
     setError,
     getValues,
     control,
-  } = form
+  } = form;
 
-  const visible = watch('visible')
-  const editedProductSet = watch('editedProductSet')
-  const productSetId = watch('productSetId')
+  const visible = watch("visible");
+  const editedProductSet = watch("editedProductSet");
+  const productSetId = watch("productSetId");
 
   const {
     images,
@@ -131,58 +131,58 @@ export const EditEventForm = ({
     handleImageUploading,
     isImagesLoading,
     isCoverImagesLoading,
-  } = useMultipleImages(initialImages)
+  } = useMultipleImages(initialImages);
 
   const onErrorSubmit = (submitErrors) => {
-    scrollToError(getFirstErrorKey(submitErrors))
-  }
+    scrollToError(getFirstErrorKey(submitErrors));
+  };
 
   const validateURL = useCallback((url: string, attribute: string) => {
-    if (isUrlValid(url)) return true
-    return t('Validation:fieldValidWebURL', { attribute })
-  }, [])
+    if (isUrlValid(url)) return true;
+    return t("Validation:fieldValidWebURL", { attribute });
+  }, []);
 
   useEffect(() => {
-    reset(sanitizeDefaultValues(defaultEventValues))
-  }, [defaultEventValues])
+    reset(sanitizeDefaultValues(defaultEventValues));
+  }, [defaultEventValues]);
 
   useEffect(() => {
     if (defaultEventValues.images && defaultEventValues.images.length > 0) {
-      const formImages = getValues('images')
-      setInitialImages(formImages)
+      const formImages = getValues("images");
+      setInitialImages(formImages);
     } else {
-      setInitialImages([])
+      setInitialImages([]);
     }
-  }, [setInitialImages, getValues, defaultEventValues])
+  }, [setInitialImages, getValues, defaultEventValues]);
 
   useEffect(() => {
     if (Array.isArray(images)) {
-      setValue('images', images)
+      setValue("images", images);
     }
-  }, [images])
+  }, [images]);
 
   useEffect(() => {
-    FormErrorService.handleServerErrors(serverErrors, setError)
-  }, [serverErrors])
+    FormErrorService.handleServerErrors(serverErrors, setError);
+  }, [serverErrors]);
 
   useEffect(() => {
-    window.history.pushState(null, '', window.location.pathname)
-    window.addEventListener('beforeunload', onBeforeUnload)
-    window.addEventListener('popstate', onPopState)
+    window.history.pushState(null, "", window.location.pathname);
+    window.addEventListener("beforeunload", onBeforeUnload);
+    window.addEventListener("popstate", onPopState);
 
     return () => {
-      window.removeEventListener('beforeunload', onBeforeUnload)
-      window.removeEventListener('popstate', onPopState)
-    }
+      window.removeEventListener("beforeunload", onBeforeUnload);
+      window.removeEventListener("popstate", onPopState);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 
   return (
     <>
       <Dialog
         isActive={isShownDialog}
-        title={t('Design:leavePage')}
-        content={t('Design:changesNotBeSaved')}
+        title={t("Design:leavePage")}
+        content={t("Design:changesNotBeSaved")}
         onApprove={onApproveDialog}
         onDecline={onDeclineDialog}
       />
@@ -196,16 +196,16 @@ export const EditEventForm = ({
           onSubmit={handleSubmit(onSaveEvent, onErrorSubmit)}
         >
           <Form.Group controlId="name">
-            <Form.Label>{t('nameOfEvent')}</Form.Label>
+            <Form.Label>{t("nameOfEvent")}</Form.Label>
             <Form.Control
-              {...register('name', {
-                required: t('Validation:fieldRequired', {
-                  attribute: t('name'),
+              {...register("name", {
+                required: t("Validation:fieldRequired", {
+                  attribute: t("name"),
                 }) as string,
                 maxLength: {
                   value: 255,
-                  message: t('Validation:fieldMaxLength', {
-                    attribute: t('name'),
+                  message: t("Validation:fieldMaxLength", {
+                    attribute: t("name"),
                     max: 255,
                   }),
                 },
@@ -220,22 +220,22 @@ export const EditEventForm = ({
             </Form.Control.Feedback>
           </Form.Group>
           {Object.keys(eventImageTypes).map((keyTitle) => {
-            const imageType = eventImageTypes[keyTitle]
+            const imageType = eventImageTypes[keyTitle];
 
             return (
               <FileUpload
                 key={keyTitle}
-                allowedExtensions={['jpg', 'jpeg', 'png']}
+                allowedExtensions={["jpg", "jpeg", "png"]}
                 enablePreview
                 defaultFiles={images?.filter(
                   (image) => IMAGE_TYPE_MAP[image.imageType] === imageType,
                 )}
                 onFilesChange={(files) => {
-                  handleImageUploading(files, imageType)
+                  handleImageUploading(files, imageType);
                 }}
                 secondSubtitle={
                   imageType === IMAGE_TYPE_MAP[IMAGE_TYPE_IMAGE]
-                    ? '1200x600'
+                    ? "1200x600"
                     : undefined
                 }
                 title={t(`Design:${keyTitle}`)}
@@ -249,10 +249,10 @@ export const EditEventForm = ({
                 }
                 disabled={disabled}
               />
-            )
+            );
           })}
           <Form.Group controlId={descriptionId}>
-            <Form.Label>{t('description')}</Form.Label>
+            <Form.Label>{t("description")}</Form.Label>
             <Controller
               render={({ field }) => (
                 <TipTapEditor
@@ -268,7 +268,7 @@ export const EditEventForm = ({
           </Form.Group>
           {/* key is used as a hack to make sure rrule is rendered correctly */}
           <IntervalInput
-            key={watch('name')}
+            key={watch("name")}
             disabled={disabled}
             productSetId={productSetId}
             productSets={productSets}
@@ -279,7 +279,7 @@ export const EditEventForm = ({
               <Accordion>
                 <CollapsibleInputGroup
                   eventKey="categories"
-                  label={t('categories')}
+                  label={t("categories")}
                   description={
                     <CategoriesInputDescription categories={categories} />
                   }
@@ -293,7 +293,7 @@ export const EditEventForm = ({
           <SaleDeadline disabled={disabled} />
 
           <Form.Group controlId={termsAndConditionsId}>
-            <Form.Label>{t('termsAndConditions')}</Form.Label>
+            <Form.Label>{t("termsAndConditions")}</Form.Label>
             <Controller
               render={({ field }) => (
                 <TipTapEditor
@@ -310,14 +310,14 @@ export const EditEventForm = ({
 
           {isExternalPaymentLinkEnabled && (
             <Form.Group controlId={externalPaymentLinkId}>
-              <Form.Label>{t('externalPaymentLink')}</Form.Label>
+              <Form.Label>{t("externalPaymentLink")}</Form.Label>
               <Form.Control
-                {...register('externalPaymentLink', {
+                {...register("externalPaymentLink", {
                   validate: (url) => {
                     if (!url) {
-                      return true
+                      return true;
                     }
-                    return validateURL(url, t('Design:externalPaymentLink'))
+                    return validateURL(url, t("Design:externalPaymentLink"));
                   },
                 })}
                 name="externalPaymentLink"
@@ -334,63 +334,63 @@ export const EditEventForm = ({
 
           <Form.Group controlId={visibilityId} className="mt-5">
             <Form.Label>
-              {t('public')} / {t('private')}
+              {t("public")} / {t("private")}
             </Form.Label>
             <Controller
               control={control}
               name="visible"
               rules={{
                 validate: (value) => {
-                  if (typeof value !== 'boolean') {
-                    return t('Validation:fieldRequired', {
-                      attribute: t('visible'),
-                    }) as string
+                  if (typeof value !== "boolean") {
+                    return t("Validation:fieldRequired", {
+                      attribute: t("visible"),
+                    }) as string;
                   }
 
-                  return true
+                  return true;
                 },
               }}
               render={({ field, fieldState: { invalid, error } }) => {
-                const fieldValue = String(field.value)
+                const fieldValue = String(field.value);
 
                 return (
                   <>
                     <Form.Control
                       as="select"
                       onChange={({ target: { value } }) => {
-                        field.onChange(!value ? value : value === 'true')
+                        field.onChange(!value ? value : value === "true");
                       }}
                       isInvalid={invalid}
                       defaultValue=""
                       value={fieldValue}
                       disabled={disabled}
                     >
-                      <option value="">{t('Design:pleaseChooseOne')}</option>
-                      <option value="false">{t('Design:private')}</option>
-                      <option value="true">{t('Design:public')}</option>
+                      <option value="">{t("Design:pleaseChooseOne")}</option>
+                      <option value="false">{t("Design:private")}</option>
+                      <option value="true">{t("Design:public")}</option>
                     </Form.Control>
                     <Form.Control.Feedback type="invalid">
                       {error?.message}
                     </Form.Control.Feedback>
                   </>
-                )
+                );
               }}
             />
           </Form.Group>
-          {typeof visible === 'boolean' && !visible ? (
+          {typeof visible === "boolean" && !visible ? (
             <Form.Group controlId={integrationUrlId}>
-              <Form.Label>{t('Design:integrationUrl')}</Form.Label>
+              <Form.Label>{t("Design:integrationUrl")}</Form.Label>
               <Form.Control
-                {...register('integrationUrl', {
-                  required: t('Validation:fieldRequired', {
-                    attribute: t('Design:integrationUrl'),
+                {...register("integrationUrl", {
+                  required: t("Validation:fieldRequired", {
+                    attribute: t("Design:integrationUrl"),
                   }) as string,
                   validate: (url) =>
-                    validateURL(url, t('Design:integrationUrl')),
+                    validateURL(url, t("Design:integrationUrl")),
                 })}
                 name="integrationUrl"
                 isInvalid={Boolean(errors.integrationUrl)}
-                placeholder={t('Design:integrationUrl')}
+                placeholder={t("Design:integrationUrl")}
                 disabled={disabled}
               />
               <Form.Control.Feedback type="invalid">
@@ -420,15 +420,15 @@ export const EditEventForm = ({
               type="submit"
             >
               {formState.isSubmitting
-                ? `${t('saveAndAdd')}...`
-                : t('saveAndAdd')}
+                ? `${t("saveAndAdd")}...`
+                : t("saveAndAdd")}
             </Button>
           )}
         </Modal.Body>
       </FormProvider>
     </>
-  )
-}
+  );
+};
 
 const sanitizeDefaultValues = (
   values?: Partial<EditEventFormValues>,
@@ -446,22 +446,22 @@ const sanitizeDefaultValues = (
       includeOffset: false,
       suppressMilliseconds: true,
       suppressSeconds: true,
-    })
+    });
 
   return {
-    name: values?.name ?? '',
-    description: values?.description ?? '',
-    start: toSimpleDateTime(values?.startAt ?? ''),
-    end: toSimpleDateTime(values?.endAt ?? ''),
+    name: values?.name ?? "",
+    description: values?.description ?? "",
+    start: toSimpleDateTime(values?.startAt ?? ""),
+    end: toSimpleDateTime(values?.endAt ?? ""),
     rrule: values?.rrule ?? undefined,
     categories: values?.categories ?? [],
-    termsAndConditions: values?.termsAndConditions ?? '',
-    visible: values?.visible ?? '',
-    externalPaymentLink: values?.externalPaymentLink ?? '',
+    termsAndConditions: values?.termsAndConditions ?? "",
+    visible: values?.visible ?? "",
+    externalPaymentLink: values?.externalPaymentLink ?? "",
     productSetId: values?.productSetId,
     images: values?.images,
     saleDeadline: values?.saleDeadline,
-    integrationUrl: values?.integrationUrl ?? '',
+    integrationUrl: values?.integrationUrl ?? "",
     recurrenceEndAt: values?.recurrenceEndAt ?? undefined,
-  }
-}
+  };
+};

package/src/events/edit-event-modal/component/EditEventForm/index.ts

@@ -1,2 +1,2 @@
-export { EditEventForm } from './EditEventForm'
-export type { EditEventFormProps, EditEventFormValues } from './EditEventForm'
+export { EditEventForm } from "./EditEventForm";
+export type { EditEventFormProps, EditEventFormValues } from "./EditEventForm";

package/src/events/edit-event-modal/component/ProductSetShortForm/ProductSetShortForm.tsx

@@ -1,19 +1,19 @@
-import { Form, Col, Button } from 'react-bootstrap'
-import { useTranslation } from 'react-i18next'
-import { useId } from '@react-aria/utils'
-import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
-import { FormProvider, useForm } from 'react-hook-form'
-import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
-import { Event } from '@licklist/core/dist/DataMapper/Provider/EventDataMapper'
+import { Form, Col, Button } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { useId } from "@react-aria/utils";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { FormProvider, useForm } from "react-hook-form";
+import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 
-import { ProductSetFormValues } from '../../../../product-set'
+import { ProductSetFormValues } from "../../../../product-set";
 // @TODO: resolve business purpose of having this in the event form
 // import { DateAndRecurrenceInput } from "../../../../product-set/control/DateAndRecurrenceInput";
 
 export interface ProductSetShortFormProps extends HasPermissionProp {
-  defaultValues: Partial<ProductSetFormValues>
-  onSubmit: (values: ProductSetFormValues) => void
-  eventValues?: Partial<Event>
+  defaultValues: Partial<ProductSetFormValues>;
+  onSubmit: (values: ProductSetFormValues) => void;
+  eventValues?: Partial<Event>;
 }
 
 export const ProductSetShortForm = ({
@@ -21,38 +21,38 @@ export const ProductSetShortForm = ({
   onSubmit,
   hasPermission = true,
 }: ProductSetShortFormProps) => {
-  const { t } = useTranslation(['Design'])
+  const { t } = useTranslation(["Design"]);
 
   const form = useForm<ProductSetFormValues>({
     defaultValues: { ...defaultValues },
-    mode: 'onChange',
-  })
+    mode: "onChange",
+  });
 
   const {
     register,
     formState,
     formState: { errors },
-  } = form
+  } = form;
 
-  const nameId = useId()
+  const nameId = useId();
 
   return (
     <Col md={12} sm={12} className="p-0 mt-5">
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(onSubmit)}>
           <Form.Group controlId={nameId}>
-            <Form.Label>{t('Design:name')}*</Form.Label>
+            <Form.Label>{t("Design:name")}*</Form.Label>
             <Form.Control
-              {...register('name', {
+              {...register("name", {
                 required: true,
               })}
-              placeholder={t('Design:placeholderProductSetName')}
+              placeholder={t("Design:placeholderProductSetName")}
               isInvalid={!!errors.name}
             />
             <Form.Control.Feedback type="invalid">
-              {HookFormService.hasError(errors.name, 'required') &&
-                t('Validation:fieldRequired', {
-                  attribute: t('Design:name'),
+              {HookFormService.hasError(errors.name, "required") &&
+                t("Validation:fieldRequired", {
+                  attribute: t("Design:name"),
                 })}
             </Form.Control.Feedback>
           </Form.Group>
@@ -62,11 +62,11 @@ export const ProductSetShortForm = ({
 
           {hasPermission && (
             <Button disabled={formState.isSubmitting} type="submit">
-              {formState.isSubmitting ? `${t('save')}...` : t('save')}
+              {formState.isSubmitting ? `${t("save")}...` : t("save")}
             </Button>
           )}
         </Form>
       </FormProvider>
     </Col>
-  )
-}
+  );
+};

package/src/events/edit-event-modal/component/ProductSetShortForm/index.ts

@@ -1 +1 @@
-export { ProductSetShortForm } from './ProductSetShortForm'
+export { ProductSetShortForm } from "./ProductSetShortForm";