@licklist/design 0.76.0-stage.3 → 0.76.0-stage.5

package/dist/events/edit-event-modal/IntervalInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntervalInput.d.ts","sourceRoot":"","sources":["../../../src/events/edit-event-modal/IntervalInput.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,6DAA6D,CAAA;AAIxF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAG7D,UAAU,kBAAkB;IAC1B,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,WAAW,CAAC,EAAE,UAAU,EAAE,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,iBAAyB,EACzB,YAAoB,EACrB,EAAE,kBAAkB,2CAkKpB"}
+{"version":3,"file":"IntervalInput.d.ts","sourceRoot":"","sources":["../../../src/events/edit-event-modal/IntervalInput.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,6DAA6D,CAAA;AAIxF,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAG7D,UAAU,kBAAkB;IAC1B,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;IACvC,WAAW,CAAC,EAAE,UAAU,EAAE,CAAA;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,iBAAyB,EACzB,YAAoB,EACrB,EAAE,kBAAkB,2CAwKpB"}

package/dist/events/edit-event-modal/IntervalInput.js

@@ -118,7 +118,7 @@ function IntervalInput(param) {
     ]).t;
     var _useFormContext = useFormContext(), register = _useFormContext.register, errors = _useFormContext.formState.errors, control = _useFormContext.control, trigger = _useFormContext.trigger, setValue = _useFormContext.setValue;
     var formattedDuration = useFormattedDuration();
-    var validationOptions = useValidationOptions();
+    var validationOptions = useValidationOptions({});
     var rrule = useWatch({
         control: control,
         name: 'rrule'
@@ -182,6 +182,12 @@ function IntervalInput(param) {
             setValue('rrule', null);
         }
     };
+    useEffect(function() {
+        if (!start) return;
+        trigger('end');
+    }, [
+        start
+    ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs(Form.Row, {

package/dist/events/edit-event-modal/hooks/useValidationOptions.d.ts

@@ -1,10 +1,14 @@
-export declare const useValidationOptions: () => {
+interface useValidationOptionsProps {
+    maxDurationExceeded?: number;
+}
+export declare const useValidationOptions: ({ maxDurationExceeded }: useValidationOptionsProps) => {
     start: {
         required: string;
     };
     end: {
         required: string;
-        validate: (value: any) => string | true;
+        validate: (value: string) => string | true;
     };
 };
+export {};
 //# sourceMappingURL=useValidationOptions.d.ts.map

package/dist/events/edit-event-modal/hooks/useValidationOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useValidationOptions.d.ts","sourceRoot":"","sources":["../../../../src/events/edit-event-modal/hooks/useValidationOptions.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB;;kBASrB,MAAM;;;kBAMN,MAAM;;;CAWjB,CAAA"}
+{"version":3,"file":"useValidationOptions.d.ts","sourceRoot":"","sources":["../../../../src/events/edit-event-modal/hooks/useValidationOptions.tsx"],"names":[],"mappings":"AAIA,UAAU,yBAAyB;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B;AAED,eAAO,MAAM,oBAAoB,4BAAkC,yBAAyB;;kBAUhF,MAAM;;;kBAMN,MAAM;0BACM,MAAM;;CAsB7B,CAAA"}

package/dist/events/edit-event-modal/hooks/useValidationOptions.js

@@ -2,7 +2,8 @@ import { DateTime } from 'luxon';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-var useValidationOptions = function() {
+var useValidationOptions = function(param) {
+    var _param_maxDurationExceeded = param.maxDurationExceeded, maxDurationExceeded = _param_maxDurationExceeded === void 0 ? 24 : _param_maxDurationExceeded;
     var control = useFormContext().control;
     var t = useTranslation([
         'Design',
@@ -22,11 +23,21 @@ var useValidationOptions = function() {
             required: t('Validation:fieldRequired', {
                 attribute: t('end')
             }),
-            // TODO: uncomment when event splitting is implemented
-            // and extract into plugins
             validate: function(value) {
-                return(// endAt not required
-                value ? DateTime.fromISO(value).diff(DateTime.fromISO(start)).toMillis() > 0 || t('Validation:fieldValidEventEnd') : true);
+                if (!value || !start) return true;
+                var startDt = DateTime.fromISO(start);
+                var endDt = DateTime.fromISO(value);
+                var diffMillis = endDt.diff(startDt).toMillis();
+                if (diffMillis <= 0) {
+                    return t('Validation:fieldValidEventEnd');
+                }
+                var maxDurationExceededHours = maxDurationExceeded * 60 * 60 * 1000;
+                if (diffMillis > maxDurationExceededHours) {
+                    return t('Design:eventMaxDurationExceeded', {
+                        maxHours: maxDurationExceeded
+                    });
+                }
+                return true;
             }
         }
     };

package/dist/recurring-date-picker-input/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/recurring-date-picker-input/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAA;AAGrF,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAE1C,OAAc,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEjD,eAAO,MAAM,sBAAsB,yBAGhC;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,SAAS,CAAA;CACrB,KAAG,OAWH,CAAA;AAED,MAAM,MAAM,kBAAkB,GAC1B,SAAS,CAAC,KAAK,GACf,SAAS,CAAC,MAAM,GAChB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,MAAM,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,kBAAkB,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,EAAE,CAAA;IACrB,KAAK,CAAC,EAAE,IAAI,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,qBAAqB,qBAG/B;IACD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,KAoEM,kBACN,CAAA;AAED,eAAO,MAAM,sBAAsB,cACtB,OAAO,EAAE,cACR,QAAQ,EAAE,GAAG,SAAS,YACxB,MAAM,KACf;IAED,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAmFjC,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/recurring-date-picker-input/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAA;AAGrF,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAE1C,OAAc,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEjD,eAAO,MAAM,sBAAsB,yBAGhC;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,SAAS,CAAA;CACrB,KAAG,OAWH,CAAA;AAED,MAAM,MAAM,kBAAkB,GAC1B,SAAS,CAAC,KAAK,GACf,SAAS,CAAC,MAAM,GAChB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,MAAM,CAAA;AAEpB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,kBAAkB,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,EAAE,CAAA;IACrB,KAAK,CAAC,EAAE,IAAI,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,qBAAqB,qBAG/B;IACD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,KAoEM,kBACN,CAAA;AAED,eAAO,MAAM,sBAAsB,cACtB,OAAO,EAAE,cACR,QAAQ,EAAE,GAAG,SAAS,YACxB,MAAM,KACf;IAED,QAAQ,CAAC,EAAE,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAsFjC,CAAA"}

package/dist/recurring-date-picker-input/utils.js

@@ -95,7 +95,9 @@ var useWorkHoursValidation = function() {
     var intervalsByDay = workHours.map(function(workhour, index, self) {
         var res = [];
         var startTime = fromIso(workhour.start, timeZone);
-        var endTime = fromIso(workhour.end, timeZone);
+        var endTime = fromIso(workhour.end, timeZone).plus({
+            minute: 1
+        });
         if (endTime > startTime) {
             res.push(Interval.fromDateTimes(startTime, endTime));
         } else {
@@ -140,7 +142,9 @@ var useWorkHoursValidation = function() {
                 return !interval.contains(time);
             });
             var attribute = notFittingIntervals.map(function(interval) {
-                return interval.toFormat('HH:mm');
+                return "".concat(interval.start.toFormat('HH:mm'), " - ").concat(interval.end.minus({
+                    minutes: 1
+                }).toFormat('HH:mm'));
             }).join(', ');
             if (notFittingIntervalsByDay.length !== 0) {
                 return t('outsideWorkingHours', {

package/dist/zone/form/components/DescriptionControl.js

@@ -37,7 +37,7 @@ var DescriptionControl = function(param) {
                     });
                 },
                 rules: {
-                    required: true
+                    required: false
                 },
                 control: control,
                 name: "description"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.76.0-stage.3",
+  "version": "0.76.0-stage.5",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -45,7 +45,7 @@ export function IntervalInput({
   } = useFormContext<IntervalInputValues>()
 
   const formattedDuration = useFormattedDuration()
-  const validationOptions = useValidationOptions()
+  const validationOptions = useValidationOptions({})
 
   const rrule = useWatch({ control, name: 'rrule' })
   const start = useWatch({ control, name: 'start' })
@@ -106,6 +106,12 @@ export function IntervalInput({
     }
   }
 
+  useEffect(() => {
+  if (!start) return
+
+  trigger('end')
+  },[start])
+
   return (
     <>
       <Form.Row className='interval-container'>

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

@@ -2,9 +2,14 @@ import { DateTime } from 'luxon'
 import { useFormContext, useWatch } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 
-export const useValidationOptions = () => {
+interface useValidationOptionsProps {
+  maxDurationExceeded?: number
+}
+
+export const useValidationOptions = ({ maxDurationExceeded = 24 }: useValidationOptionsProps) => {
   const { control } = useFormContext()
   const { t } = useTranslation(['Design', 'Validation'])
+
   const start = useWatch({ control, name: 'start' })
 
   return {
@@ -18,14 +23,26 @@ export const useValidationOptions = () => {
       required: t('Validation:fieldRequired', {
         attribute: t('end'),
       }) as string,
-      // TODO: uncomment when event splitting is implemented
-      // and extract into plugins
-      validate: (value) =>
-        // endAt not required
-        value
-          ? DateTime.fromISO(value).diff(DateTime.fromISO(start)).toMillis() >
-              0 || (t('Validation:fieldValidEventEnd') as string)
-          : true,
+      validate: (value: string) => {
+        if (!value || !start) return true
+
+        const startDt = DateTime.fromISO(start)
+        const endDt = DateTime.fromISO(value)
+        const diffMillis = endDt.diff(startDt).toMillis()
+
+        if (diffMillis <= 0) {
+          return t('Validation:fieldValidEventEnd') as string
+        }
+
+        const maxDurationExceededHours = maxDurationExceeded * 60 * 60 * 1000
+        if (diffMillis > maxDurationExceededHours) {
+          return t('Design:eventMaxDurationExceeded', {
+            maxHours: maxDurationExceeded,
+          }) as string
+        }
+
+        return true
+      },
     },
   }
 }

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

@@ -144,7 +144,7 @@ export const useWorkHoursValidation = (
     const res: Interval[] = []
 
     const startTime = fromIso(workhour.start, timeZone)
-    const endTime = fromIso(workhour.end, timeZone)
+    const endTime = fromIso(workhour.end, timeZone).plus({ minute: 1 })
 
     if (endTime > startTime) {
       res.push(Interval.fromDateTimes(startTime, endTime))
@@ -194,7 +194,10 @@ export const useWorkHoursValidation = (
         .filter((interval) => !interval.contains(time))
 
       const attribute = notFittingIntervals
-        .map((interval) => interval.toFormat('HH:mm'))
+        .map(
+          (interval) =>
+            `${interval.start.toFormat('HH:mm')} - ${interval.end.minus({ minutes: 1 }).toFormat('HH:mm')}`,
+        )
         .join(', ')
 
       if (notFittingIntervalsByDay.length !== 0) {

package/src/zone/form/components/DescriptionControl.tsx

@@ -35,7 +35,7 @@ export const DescriptionControl = ({ isLoading }: DescriptionControlProps) => {
             className={clsx(errors.description && 'is-invalid')}
           />
         )}
-        rules={{ required: true }}
+        rules={{ required: false }}
         control={control}
         name='description'
       />