@licklist/design 0.68.0-dev.1 → 0.68.1-dev.0

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -1,28 +1,28 @@
-import { useEffect, useMemo } from "react";
-import { Button, Form } from "react-bootstrap";
-import { FormProvider, useForm } from "react-hook-form";
-import { isEqual } from "lodash";
-import { useParams } from "react-router-dom";
-import { useEventEditProductSetContext } from "@licklist/plugins/dist/context/event/EventEditProductSetContext";
-import { useTranslation } from "react-i18next";
-import { BlockLoader } from "../../../../../static/loader/BlockLoader";
-import { ProductSetControl } from "../../../../../product-set";
-import { ProductSetContextProvider } from "../../../../../product-set/form/context";
-import { getDefaultValues } from "../../../utils/getDefaultProductSet";
-import { EditEventFormValues } from "../../EditEventForm";
-import { getFilteredTemplates } from "../../../../../product-set/utils/index";
+import { useEffect, useMemo } from 'react'
+import { Button, Form } from 'react-bootstrap'
+import { FormProvider, useForm } from 'react-hook-form'
+import { isEqual } from 'lodash'
+import { useParams } from 'react-router-dom'
+import { useEventEditProductSetContext } from '@licklist/plugins/dist/context/event/EventEditProductSetContext'
+import { useTranslation } from 'react-i18next'
+import { BlockLoader } from '../../../../../static/loader/BlockLoader'
+import { ProductSetControl } from '../../../../../product-set'
+import { ProductSetContextProvider } from '../../../../../product-set/form/context'
+import { getDefaultValues } from '../../../utils/getDefaultProductSet'
+import { EditEventFormValues } from '../../EditEventForm'
+import { getFilteredTemplates } from '../../../../../product-set/utils/index'
 
-export const DEFAULT_FEE = 5;
+export const DEFAULT_FEE = 5
 
 export interface EventDates {
-  startDate: string;
-  endDate?: string;
-  rrule?: string;
+  startDate: string
+  endDate?: string
+  rrule?: string
 }
 interface EditEventProductSetProps {
-  onSubmit: (value: EditEventFormValues["editedProductSet"]) => void;
-  defaultValues?: EditEventFormValues["editedProductSet"];
-  timeZone: string;
+  onSubmit: (value: EditEventFormValues['editedProductSet']) => void
+  defaultValues?: EditEventFormValues['editedProductSet']
+  timeZone: string
 }
 
 export const EditEventProductSet = ({
@@ -31,8 +31,8 @@ export const EditEventProductSet = ({
   timeZone,
 }: EditEventProductSetProps) => {
   const { companyId } = useParams<{
-    companyId: string;
-  }>();
+    companyId: string
+  }>()
 
   const {
     companies,
@@ -45,55 +45,55 @@ export const EditEventProductSet = ({
     venueMapSets,
     emailTemplates,
     fieldSetsData,
-  } = useEventEditProductSetContext();
+  } = useEventEditProductSetContext()
 
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
   const defaultFormValues = useMemo(() => {
     if (defaultValues) {
-      return defaultValues;
+      return defaultValues
     }
     if (!productSetData) {
-      return undefined;
+      return undefined
     }
-    return getDefaultValues(productSetData, true);
-  }, [productSetData, defaultValues]);
+    return getDefaultValues(productSetData, true)
+  }, [productSetData, defaultValues])
 
-  const form = useForm<EditEventFormValues["editedProductSet"]>({
+  const form = useForm<EditEventFormValues['editedProductSet']>({
     defaultValues,
-    mode: "onChange",
-  });
+    mode: 'onChange',
+  })
 
-  const { reset, handleSubmit, watch } = form;
+  const { reset, handleSubmit, watch } = form
 
-  const formValues = watch();
+  const formValues = watch()
 
   useEffect(() => {
     if (!defaultFormValues || isEqual(defaultFormValues, formValues)) {
-      return;
+      return
     }
-    reset(defaultFormValues);
+    reset(defaultFormValues)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultFormValues]);
+  }, [defaultFormValues])
 
-  const feeInPercent = String(systemSettings?.feeInPercent || DEFAULT_FEE);
+  const feeInPercent = String(systemSettings?.feeInPercent || DEFAULT_FEE)
   const selectedCompany = companies?.find(
     (company) => String(company?.id) === companyId,
-  );
+  )
 
   const productGroupList = useMemo(() => {
     if (!productGroupsData) {
-      return [];
+      return []
     }
 
     return productGroupsData.map(({ id, name }) => ({
       id: Number(id),
       value: name,
-    }));
-  }, [productGroupsData]);
+    }))
+  }, [productGroupsData])
 
   if (isLoading) {
-    return <BlockLoader />;
+    return <BlockLoader />
   }
 
   return (
@@ -103,7 +103,7 @@ export const EditEventProductSet = ({
       venueMapSets={venueMapSets}
     >
       <div className="edit-product-set-warning">
-        {t("editProductSetWarning", {
+        {t('editProductSetWarning', {
           attribute: productSetData?.name,
         })}
       </div>
@@ -135,13 +135,13 @@ export const EditEventProductSet = ({
             className="save-event mt-4"
             onClick={handleSubmit(onSubmit)}
           >
-            {t("update")}
+            {t('update')}
           </Button>
           <div className="edit-product-set-warning mt-4">
-            {t("recurrentOverridesWarining")}
+            {t('recurrentOverridesWarining')}
           </div>
         </Form>
       </FormProvider>
     </ProductSetContextProvider>
-  );
-};
+  )
+}

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

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

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

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

package/src/events/edit-event-modal/hooks/index.ts

@@ -1,2 +1,2 @@
-export * from "./useFormattedDuration";
-export * from "./useValidationOptions";
+export * from './useFormattedDuration'
+export * from './useValidationOptions'

package/src/events/edit-event-modal/hooks/useFormattedDuration.tsx

@@ -1,40 +1,40 @@
-import { useMemo } from "react";
-import { useFormContext, useWatch } from "react-hook-form";
-import { useIntl } from "react-intl";
-import { DateTime, Interval } from "luxon";
-import { IntervalInputValues } from "../IntervalInput";
+import { useMemo } from 'react'
+import { useFormContext, useWatch } from 'react-hook-form'
+import { useIntl } from 'react-intl'
+import { DateTime, Interval } from 'luxon'
+import { IntervalInputValues } from '../IntervalInput'
 
 export const useFormattedDuration = () => {
-  const { control } = useFormContext<IntervalInputValues>();
-  const start = useWatch({ control, name: "start" });
-  const end = useWatch({ control, name: "end" });
-  const { formatList, formatNumber } = useIntl();
+  const { control } = useFormContext<IntervalInputValues>()
+  const start = useWatch({ control, name: 'start' })
+  const end = useWatch({ control, name: 'end' })
+  const { formatList, formatNumber } = useIntl()
 
   const duration = useMemo(() => {
     const interval = Interval.fromDateTimes(
       DateTime.fromISO(start),
       DateTime.fromISO(end),
-    ).toDuration(["days", "hours", "minutes"]);
+    ).toDuration(['days', 'hours', 'minutes'])
 
-    if (!interval.isValid) return undefined;
+    if (!interval.isValid) return undefined
 
     const formatUnit = (value: number, unit: string) =>
-      formatNumber(value, { style: "unit", unit, unitDisplay: "long" });
+      formatNumber(value, { style: 'unit', unit, unitDisplay: 'long' })
 
     const units = (
       [
-        [interval.days, "day"],
-        [interval.hours, "hour"],
-        [interval.minutes, "minute"],
+        [interval.days, 'day'],
+        [interval.hours, 'hour'],
+        [interval.minutes, 'minute'],
       ] as Parameters<typeof formatUnit>[]
-    ).filter(([value]) => value);
+    ).filter(([value]) => value)
 
     return formatList(
       units.map((args) => formatUnit(...args)),
-      { style: "long", type: "unit" },
-    );
+      { style: 'long', type: 'unit' },
+    )
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [start, end]);
+  }, [start, end])
 
-  return duration;
-};
+  return duration
+}

package/src/events/edit-event-modal/hooks/useValidationOptions.tsx

@@ -1,27 +1,27 @@
-import { DateTime } from "luxon";
-import { useFormContext, useWatch } from "react-hook-form";
-import { useTranslation } from "react-i18next";
+import { DateTime } from 'luxon'
+import { useFormContext, useWatch } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
 
 export const useValidationOptions = () => {
-  const { control } = useFormContext();
-  const { t } = useTranslation(["Design", "Validation"]);
-  const start = useWatch({ control, name: "start" });
+  const { control } = useFormContext()
+  const { t } = useTranslation(['Design', 'Validation'])
+  const start = useWatch({ control, name: 'start' })
 
   return {
     start: {
-      required: t("Validation:fieldRequired", {
-        attribute: t("start"),
+      required: t('Validation:fieldRequired', {
+        attribute: t('start'),
       }) as string,
       // TODO: uncomment when event splitting is implemented
       // and extract into plugins
       validate: (value) =>
         DateTime.fromISO(value).diffNow().toMillis() > 0 ||
-        (t("Validation:fieldValidEventStart") as string),
+        (t('Validation:fieldValidEventStart') as string),
     },
 
     end: {
-      required: t("Validation:fieldRequired", {
-        attribute: t("end"),
+      required: t('Validation:fieldRequired', {
+        attribute: t('end'),
       }) as string,
       // TODO: uncomment when event splitting is implemented
       // and extract into plugins
@@ -29,8 +29,8 @@ export const useValidationOptions = () => {
         // endAt not required
         value
           ? DateTime.fromISO(value).diff(DateTime.fromISO(start)).toMillis() >
-              0 || (t("Validation:fieldValidEventEnd") as string)
+              0 || (t('Validation:fieldValidEventEnd') as string)
           : true,
     },
-  };
-};
+  }
+}

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

@@ -1,3 +1,3 @@
-export * from "./component/ProductSetShortForm";
-export * from "./component/SelectEventProductSet";
-export * from "./component/EditEventForm";
+export * from './component/ProductSetShortForm'
+export * from './component/SelectEventProductSet'
+export * from './component/EditEventForm'

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -2,21 +2,21 @@ import {
   DEFAULT_OPERATIONAL_COST_TYPE,
   DEFAULT_PRODUCT_SET_TYPE,
   ProductSet,
-} from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { getFilteredTemplates } from "../../../product-set/utils/index";
-import { ProductSetFormValues } from "../../../product-set/form/ProductSetForm";
+} from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
+import { getFilteredTemplates } from '../../../product-set/utils/index'
+import { ProductSetFormValues } from '../../../product-set/form/ProductSetForm'
 
 export const getDefaultValues = (
   productSet?: ProductSet | null,
   hasNoRecurrences?: boolean,
 ): ProductSetFormValues => ({
   id: productSet?.id ?? 0,
-  name: productSet?.name ?? "",
+  name: productSet?.name ?? '',
   type: productSet?.type ?? DEFAULT_PRODUCT_SET_TYPE,
-  termsAndConditions: productSet?.termsAndConditions ?? "",
+  termsAndConditions: productSet?.termsAndConditions ?? '',
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,
   relyOnPeopleType: productSet?.relyOnPeopleType ?? null,
-  thankYouPageUrl: productSet?.thankYouPageUrl ?? "",
+  thankYouPageUrl: productSet?.thankYouPageUrl ?? '',
   fieldSetId: productSet?.fieldSetId,
   emailTemplates:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
@@ -45,4 +45,4 @@ export const getDefaultValues = (
       venueMapSetId: step?.venueMapSet ? step?.venueMapSet?.id : null,
     })) ?? [],
   menuRecurrences: hasNoRecurrences ? [] : (productSet?.menuRecurrences ?? []),
-});
+})

package/src/events/edit-event-modal/utils/isUrlValid.ts

@@ -1,7 +1,7 @@
-import { ruleForUrlWithProtocol } from "@licklist/plugins/dist/validation/Rules/urlRule";
+import { ruleForUrlWithProtocol } from '@licklist/plugins/dist/validation/Rules/urlRule'
 
 export const isUrlValid = (url: string) => {
-  if (ruleForUrlWithProtocol.test(url)) return true;
+  if (ruleForUrlWithProtocol.test(url)) return true
 
-  return false;
-};
+  return false
+}

package/src/events/edit-event-modal/utils/removeRruleCount.ts

@@ -1,12 +1,12 @@
-import RRule from "rrule";
+import RRule from 'rrule'
 
 export const removeRruleCount = (rrule: string) => {
   const options = RRule.parseString(
-    rrule.includes("EXDATE") ? rrule.split(";EXDATE=")[0] : rrule,
-  );
+    rrule.includes('EXDATE') ? rrule.split(';EXDATE=')[0] : rrule,
+  )
 
   if (options.count) {
-    options.count = undefined;
+    options.count = undefined
   }
-  return new RRule(options).toString();
-};
+  return new RRule(options).toString()
+}

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.stories.tsx

@@ -1,20 +1,20 @@
-import { useState } from "react";
-import { Meta, Story } from "@storybook/react";
-import { boolean } from "@storybook/addon-knobs";
+import { useState } from 'react'
+import { Meta, Story } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
 
 import {
   EditRecurrentEventModal,
   EditRecurrentEventModalProps,
-} from "./EditRecurrentEventModal";
+} from './EditRecurrentEventModal'
 
 export default {
-  title: "Events/EditRecurrentEventModal",
+  title: 'Events/EditRecurrentEventModal',
   component: EditRecurrentEventModal,
-} as Meta;
+} as Meta
 
 export const Default: Story<EditRecurrentEventModalProps> = (args) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const isEditRecurrentEventModal = boolean("isEditRecurrentEventModal", false);
+  const [isOpen, setIsOpen] = useState(false)
+  const isEditRecurrentEventModal = boolean('isEditRecurrentEventModal', false)
 
   return (
     <div>
@@ -26,12 +26,12 @@ export const Default: Story<EditRecurrentEventModalProps> = (args) => {
         onHide={() => setIsOpen(false)}
       />
     </div>
-  );
-};
+  )
+}
 
 Default.args = {
   isOpen: false,
   onHide: () => {},
-  title: "Some title",
+  title: 'Some title',
   onSubmit: (data) => console.log(data),
-};
+}

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.tsx

@@ -1,39 +1,39 @@
-import { Form, Modal, Button } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { Controller, useForm } from "react-hook-form";
-import { FaTimes } from "react-icons/fa";
+import { Form, Modal, Button } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { Controller, useForm } from 'react-hook-form'
+import { FaTimes } from 'react-icons/fa'
 
-export const MODE_THIS_EVENT = "thisEvent";
-export const MODE_THIS_AND_FOLLOWING_EVENTS = "thisAndFollowingEvents";
-export const MODE_ALL_EVENTS = "allEvents";
+export const MODE_THIS_EVENT = 'thisEvent'
+export const MODE_THIS_AND_FOLLOWING_EVENTS = 'thisAndFollowingEvents'
+export const MODE_ALL_EVENTS = 'allEvents'
 
 const MODES = [
   MODE_THIS_EVENT,
   MODE_THIS_AND_FOLLOWING_EVENTS,
   MODE_ALL_EVENTS,
-] as const;
+] as const
 
-export const DEFAULT_RECURRENT_MODE_TYPE = MODE_THIS_EVENT;
+export const DEFAULT_RECURRENT_MODE_TYPE = MODE_THIS_EVENT
 
 export const RECURRENT_MODE_TYPES_LIST = {
   [MODE_THIS_EVENT]: 1,
   [MODE_THIS_AND_FOLLOWING_EVENTS]: 2,
   [MODE_ALL_EVENTS]: 3,
-};
+}
 
-export type RecurrentEventMode = (typeof MODES)[number];
+export type RecurrentEventMode = (typeof MODES)[number]
 
 export type EditRecurrentEventModalValues = {
-  mode: RecurrentEventMode;
-};
+  mode: RecurrentEventMode
+}
 
 export type EditRecurrentEventModalProps = {
-  disabled?: boolean;
-  isOpen: boolean;
-  onHide: () => void;
-  title: string;
-  onSubmit: (values: EditRecurrentEventModalValues) => void;
-};
+  disabled?: boolean
+  isOpen: boolean
+  onHide: () => void
+  title: string
+  onSubmit: (values: EditRecurrentEventModalValues) => void
+}
 
 export const EditRecurrentEventModal = ({
   disabled,
@@ -42,13 +42,13 @@ export const EditRecurrentEventModal = ({
   title,
   onSubmit,
 }: EditRecurrentEventModalProps) => {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
   const { control, handleSubmit } = useForm<EditRecurrentEventModalValues>({
     defaultValues: {
       mode: DEFAULT_RECURRENT_MODE_TYPE,
     },
-  });
+  })
 
   return (
     <Modal
@@ -102,7 +102,7 @@ export const EditRecurrentEventModal = ({
             className="text-decoration-none"
             disabled={disabled}
           >
-            {t("cancel")}
+            {t('cancel')}
           </Button>
           <Button
             variant="success"
@@ -110,10 +110,10 @@ export const EditRecurrentEventModal = ({
             className="text-decoration-none"
             disabled={disabled}
           >
-            {t("ok").toUpperCase()}
+            {t('ok').toUpperCase()}
           </Button>
         </Modal.Footer>
       </Form>
     </Modal>
-  );
-};
+  )
+}

package/src/events/edit-recurrent-event-modal/index.ts

@@ -1 +1 @@
-export * from "./EditRecurrentEventModal";
+export * from './EditRecurrentEventModal'

package/src/events/event-card/EventCard.stories.tsx

@@ -1,21 +1,21 @@
 /* eslint-disable no-console */
-import { Meta, Story } from "@storybook/react";
-import { boolean } from "@storybook/addon-knobs";
-import { EventCard, EventCardProps } from "./EventCard";
-import { EventCardSkeleton } from "./EventCardSkeleton";
+import { Meta, Story } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
+import { EventCard, EventCardProps } from './EventCard'
+import { EventCardSkeleton } from './EventCardSkeleton'
 
 export default {
-  title: "Events/EventCard",
+  title: 'Events/EventCard',
   component: EventCard,
-} as Meta;
+} as Meta
 
 export const Default: Story<EventCardProps> = () => {
-  const showImage = boolean("showImage", true);
+  const showImage = boolean('showImage', true)
   // @todo: rewrite story to use actions instead of addon-knobs
-  const hasPermission = boolean("hasPermission", true);
+  const hasPermission = boolean('hasPermission', true)
 
   return (
-    <div style={{ maxWidth: "34rem" }}>
+    <div style={{ maxWidth: '34rem' }}>
       <EventCard
         name="Glitterbomb Cambridge / Cheryl Hole"
         description={`Category: Essex, They call her <i>Cheryl Hole</i>. Any holes a
@@ -41,21 +41,21 @@ export const Default: Story<EventCardProps> = () => {
         onCopy={() => undefined}
         eventStatistic={{
           views: {
-            "2023-08-31": {
+            '2023-08-31': {
               visitors: 10,
               pageViews: 50,
             },
           },
           productCategorySummary: {
-            "2023-08-31 09:35:00": [
+            '2023-08-31 09:35:00': [
               {
-                categoryName: "ticket",
+                categoryName: 'ticket',
                 eventId: 1236,
                 totalPerCategory: 1300,
                 productsSummary: [
                   {
                     id: 221,
-                    name: "VIP",
+                    name: 'VIP',
                     productsSold: 13,
                     totalQuantity: 25,
                     total: 1300,
@@ -66,19 +66,19 @@ export const Default: Story<EventCardProps> = () => {
           },
         }}
         onStatistic={() => {
-          console.log("onStatistic");
+          console.log('onStatistic')
         }}
         titleId="titleId"
         descriptionId="descriptionId"
       />
     </div>
-  );
-};
+  )
+}
 
 export const Skeleton: Story<EventCardProps> = () => {
   return (
-    <div style={{ maxWidth: "34rem" }}>
+    <div style={{ maxWidth: '34rem' }}>
       <EventCardSkeleton />
     </div>
-  );
-};
+  )
+}