@licklist/design 0.78.1 → 0.78.3

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/events/event-card/EventCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventCard.d.ts","sourceRoot":"","sources":["../../../src/events/event-card/EventCard.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAA;AASjG,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAS3C,MAAM,WAAW,cAAe,SAAQ,iBAAiB;IACvD,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAA;IACd,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IACtC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,aAAoB,EACpB,cAAc,EACd,WAAW,EACX,cAAc,EACd,OAAO,EACP,aAAa,EACb,OAAO,GACR,EAAE,cAAc,2CAiKhB"}
+{"version":3,"file":"EventCard.d.ts","sourceRoot":"","sources":["../../../src/events/event-card/EventCard.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAA;AASjG,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAQ3C,MAAM,WAAW,cAAe,SAAQ,iBAAiB;IACvD,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAA;IACd,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IACtC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,aAAoB,EACpB,cAAc,EACd,WAAW,EACX,cAAc,EACd,OAAO,EACP,aAAa,EACb,OAAO,GACR,EAAE,cAAc,2CA0JhB"}

package/dist/events/event-card/EventCard.js

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import * as Config from '@licklist/core/dist/Config';
 import { FaEye, FaQrcode, FaExternalLinkAlt, FaEdit, FaCopy, FaTrashAlt } from 'react-icons/fa';
-import { TipTapEditor } from '../../tiptap-editor/TipTapEditor.js';
 import { getStatisticInfo, formatContent, EVENT_DESCRIPTION_SIZE } from './utils.js';
 import { ReactComponent as SvgChartBar } from '../../assets/dashboard/chartBar.svg.js';
 
@@ -38,13 +37,13 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 function EventCard(param) {
-    var name = param.name, description = param.description, date = param.date, imageUrl = param.imageUrl, sales = param.sales, onPreview = param.onPreview, onEdit = param.onEdit, onCopy = param.onCopy, onRemove = param.onRemove, onOpenQrCode = param.onOpenQrCode, _param_hasPermission = param.hasPermission, hasPermission = _param_hasPermission === void 0 ? true : _param_hasPermission, productSetName = param.productSetName, onStatistic = param.onStatistic, eventStatistic = param.eventStatistic, titleId = param.titleId, descriptionId = param.descriptionId, eventID = param.eventID;
+    var name = param.name, description = param.description, date = param.date, imageUrl = param.imageUrl, sales = param.sales, onPreview = param.onPreview, onEdit = param.onEdit, onCopy = param.onCopy, onRemove = param.onRemove, onOpenQrCode = param.onOpenQrCode, _param_hasPermission = param.hasPermission, hasPermission = _param_hasPermission === void 0 ? true : _param_hasPermission, productSetName = param.productSetName, onStatistic = param.onStatistic, eventStatistic = param.eventStatistic, titleId = param.titleId; param.descriptionId; var eventID = param.eventID;
     var t = useTranslation('Design').t;
     var _useIntl = useIntl(), formatNumber = _useIntl.formatNumber, formatDate = _useIntl.formatDate;
     var _getStatisticInfo = getStatisticInfo(eventStatistic, date), totalViews = _getStatisticInfo.totalViews, statistics = _object_without_properties(_getStatisticInfo, [
         "totalViews"
     ]);
-    var memoedContent = useMemo(function() {
+    useMemo(function() {
         return formatContent(description, EVENT_DESCRIPTION_SIZE);
     }, [
         description
@@ -93,13 +92,6 @@ function EventCard(param) {
                     /*#__PURE__*/ jsxs("div", {
                         className: "flex-grow-1",
                         children: [
-                            /*#__PURE__*/ jsx(TipTapEditor, {
-                                viewMode: true,
-                                disabled: true,
-                                className: clsx('event-description', !imageUrl && 'no-image'),
-                                content: memoedContent,
-                                id: descriptionId
-                            }),
                             /*#__PURE__*/ jsx("div", {
                                 className: "mt-2 ml-2",
                                 children: Object.keys(statistics).map(function(key) {
@@ -171,7 +163,7 @@ function EventCard(param) {
                             })
                         }),
                         children: /*#__PURE__*/ jsxs("div", {
-                            className: "pl-3 text-truncate",
+                            className: "pl-3 mt-2 text-truncate",
                             children: [
                                 t('Design:productSet'),
                                 ": ",

package/dist/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.js

@@ -36,7 +36,7 @@ var NumberInput = /*#__PURE__*/ forwardRef(function(param, ref) {
             onArrowDown(0);
             return;
         }
-        onArrowUp(value - 1);
+        onArrowDown(value - 1);
     };
     var inputWrapperClasses = clsx('payment-number-input', className);
     return /*#__PURE__*/ jsxs("div", {

package/dist/styles/events/EventCard.scss

@@ -38,10 +38,9 @@ $event-card-views-gutter: sp(3) !default;
 
   .card-body {
     padding: 0 0 3rem 0;
+    margin-bottom: $event-card-contents-gutter;
 
     .event-description {
-      min-height: 8rem;
-      max-height: 21rem;
       overflow: hidden;
 
       &:last-child {
@@ -50,7 +49,6 @@ $event-card-views-gutter: sp(3) !default;
 
       &.no-image {
         min-height: 13.75rem;
-        max-height: 22rem;
       }
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.1",
+  "version": "0.78.3",
   "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/events/event-card/EventCard.tsx

@@ -21,7 +21,6 @@ import {
   FaQrcode,
 } from 'react-icons/fa'
 import { Sale } from '../../types/bookings'
-import { TipTapEditor } from '../../tiptap-editor/TipTapEditor'
 import {
   EVENT_DESCRIPTION_SIZE,
   formatContent,
@@ -109,13 +108,6 @@ export function EventCard({
           )}
         </Card.Title>
         <div className='flex-grow-1'>
-          <TipTapEditor
-            viewMode
-            disabled
-            className={clsx('event-description', !imageUrl && 'no-image')}
-            content={memoedContent}
-            id={descriptionId}
-          />
           <div className='mt-2 ml-2'>
             {Object.keys(statistics).map((key) => (
               <div className='event-card-sale' key={key}>
@@ -162,7 +154,7 @@ export function EventCard({
               </Popover>
             }
           >
-            <div className='pl-3 text-truncate'>
+            <div className='pl-3 mt-2 text-truncate'>
               {t('Design:productSet')}: {productSetName}
             </div>
           </OverlayTrigger>

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -69,7 +69,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         return
       }
 
-      onArrowUp(value - 1)
+      onArrowDown(value - 1)
     }
 
     const inputWrapperClasses = clsx('payment-number-input', className)

package/src/styles/events/EventCard.scss

@@ -38,10 +38,9 @@ $event-card-views-gutter: sp(3) !default;
 
   .card-body {
     padding: 0 0 3rem 0;
+    margin-bottom: $event-card-contents-gutter;
 
     .event-description {
-      min-height: 8rem;
-      max-height: 21rem;
       overflow: hidden;
 
       &:last-child {
@@ -50,7 +49,6 @@ $event-card-views-gutter: sp(3) !default;
 
       &.no-image {
         min-height: 13.75rem;
-        max-height: 22rem;
       }
     }
   }