@licklist/design 0.68.1 → 0.68.2-dev.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'