@licklist/design 0.71.23 → 0.72.0-dev.0

package/dist/styles/date-time-button/DateTimeButton.scss

@@ -105,3 +105,10 @@
   font-weight: 300;
   color: $snippet-calendar-button-font-color;
 }
+
+.modifier-price {
+  font-size: 1rem;
+  line-height: 1.03rem;
+  font-weight: 500;
+  color: $snippet-calendar-button-font-color;
+}

package/dist/styles/events/EditEventModal.scss

@@ -37,6 +37,8 @@
   .edit-step-dialog {
     .custom-checkbox {
       align-items: unset;
+      position: relative;
+      z-index: 0;
       .form-check-label {
         margin-top: 1rem;
       }

package/dist/styles/iframe-events/Calendar.scss

@@ -74,7 +74,7 @@
     .calendar-dates-wrapper {
       .calendar-dates {
         display: grid;
-        grid-template-columns: repeat(7, 1fr);
+        grid-template-columns: repeat(7, auto);
         grid-gap: 0.5rem 1rem;
         overflow-x: auto;
       }

package/dist/styles/iframe-external-modal/IframeExternalModal.scss

@@ -15,7 +15,7 @@ body[bkdt-scrollable='false'] .bkdt-mask {
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1000000;
+  z-index: 2147483646;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
 }
@@ -24,7 +24,7 @@ body[bkdt-scrollable='false'] .bkdt-mask {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1000001;
+  z-index: 2147483647;
   display: none;
   width: 100%;
   height: 100%;

package/dist/styles/iframe-page/Page.scss

@@ -24,6 +24,22 @@
     min-width: auto;
   }
 
+  .manual-booking-form-modal {
+    width: 40vw !important;
+    left: 60vh;
+  
+    .modal-content {
+      height: 96vh;
+      margin-left: auto;
+    }
+  
+    @include media-breakpoint-down(sm) {
+      width: 100vw !important;
+      left: 0;
+      top: 10% !important;
+    }
+  }
+
   .header-block {
     margin-bottom: 1rem;
   }

package/dist/styles/iframe-page/PageBody.scss

@@ -10,6 +10,8 @@
     height: calc(100svh - 5.5rem);
   }
 
+
+
   .left-block {
     flex: 1;
     align-items: stretch;
@@ -25,6 +27,8 @@
       min-height: calc(100svh - 6.5rem);
     }
 
+
+
     .navigation {
       font-size: 1.125rem;
       font-weight: 500;

package/dist/styles/modals/Modals.scss

@@ -6,6 +6,22 @@
   z-index: 1080;
 }
 
+.manual-booking-form-modal {
+  width: 40vw !important;
+  left: 66vw;
+
+  .modal-content {
+    min-height: 95vh;
+    margin-left: auto;
+  }
+
+  @include media-breakpoint-down(sm) {
+    width: 100vw !important;
+    left: 0;
+    top: 10% !important;
+  }
+}
+
 .confirm-modal {
   z-index: 1081;
 }

package/dist/styles/product-set/EditProductSetElement.scss

@@ -90,6 +90,7 @@
     }
     label.btn-link {
       width: 4.5rem;
+      z-index: 0;
       display: flex;
       justify-content: center;
       span {

package/dist/styles/product-set/ProductSetForm.scss

@@ -1,5 +1,4 @@
 .product-set-form {
-
   input,
   textarea,
   select,
@@ -59,6 +58,11 @@
     font-weight: 600;
   }
 
+  .modifier-badge {
+    font-size: 0.5rem;
+    font-weight: 400;
+  }
+
   .step-badge {
     background-color: #ffdbdb;
     color: #d52902;
@@ -82,6 +86,12 @@
     background-color: #e9f5ea;
     color: #269b36;
   }
+
+  .modifier-badge {
+    background-color: #e9f5ea;
+    color: #269b36;
+    height: 1rem;
+  }
 }
 
 .product-set-mobile-footer {
@@ -200,8 +210,8 @@
 
 .sortable-tree-item-toggle {
   .product-zone-badge {
-    background-color: #EFE9F5;
-    color: #84269B;
+    background-color: #efe9f5;
+    color: #84269b;
     font-size: 0.875rem;
     font-weight: 600;
   }

package/dist/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -102,7 +102,6 @@
 }
 
 .ryft-payment-form {
-
   .form-disable-box {
     display: none;
     position: absolute;
@@ -180,11 +179,10 @@
     .form-disable-box {
       top: 20rem;
     }
-}
+  }
 }
 
 @include media-breakpoint-up(md) {
-
   .ryft-payment-form,
   .form-disable-box {
     height: 50%;
@@ -213,4 +211,4 @@
   .divider {
     display: none !important;
   }
-}
+}

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/dist/styles/sales/ManualBooking.scss

@@ -234,6 +234,12 @@
     margin-bottom: 2rem;
   }
 
+  .quantity-container-product {
+    display: flex;
+    justify-content: center;
+    margin: 1rem;
+  }
+
   .save-btn:disabled {
     background-color: #fafafa;
     border: none;

package/dist/styles/static/Loader.scss

@@ -27,6 +27,15 @@
   }
 }
 
+.fullscreen-loader {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 5000;
+  top: 0;
+  left: 0;
+}
+
 .payment-loader {
   position: absolute;
   top: 50%;

package/dist/styles/themes/bookedit/index.scss

@@ -51,6 +51,25 @@
   border-bottom: 1px solid #f0f0f0;
 }
 
+ .modifier-header {
+  background-color: color('white');
+  padding: 0 2.5rem;
+  z-index: 2;
+  margin-top: 1rem;
+  min-height: 2rem;
+}
+
+.modifier-container {
+  background-color: color('white');
+  padding-bottom: 1rem;
+}
+
+.modifier-set-container {
+  background-color: color('white');
+  border-bottom: 2px solid #f0f0f0;
+  padding-bottom: 1rem;
+}
+
 .header-user-image {
   width: 3rem;
   height: 3rem;

package/dist/zone/form/components/GameDurationControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CA+B1B,CAAA"}
+{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CAgC1B,CAAA"}

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

@@ -77,6 +77,9 @@ var GameDurationControl = function(param) {
                 required: false,
                 min: 1
             })), {
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 placeholder: t('Design:duration'),
                 isInvalid: Boolean(errors.defaultDuration),
                 disabled: isLoading

package/dist/zone/form/components/SortControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAmC1D,CAAA"}
+{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAoC1D,CAAA"}

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

@@ -77,6 +77,9 @@ var SortControl = function(param) {
                 required: false,
                 min: 1
             })), {
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 placeholder: t('Design:ordering'),
                 isInvalid: Boolean(errors.sort),
                 disabled: isLoading

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.23",
+  "version": "0.72.0-dev.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.32.7",
+    "@licklist/core": "0.31.2-dev.14",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.7",
+    "@licklist/plugins": "0.35.1-dev.8",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.32.7",
+    "@licklist/core": "0.31.2-dev.14",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.7",
+    "@licklist/plugins": "0.35.1-dev.8",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -202,8 +202,10 @@
       "yarn tsc"
     ]
   },
+  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
-  }
+  },
+  "stableVersion": "0.71.4-dev.1"
 }

package/src/affiliate/form/AffiliateForm.tsx

@@ -76,6 +76,7 @@ export const AffiliateForm = ({
   const copyToClipboard = () =>
     // eslint-disable-next-line consistent-return
     window.navigator.clipboard.writeText(formValues.link)
+
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(handleSubmit)}>

package/src/auth/Layout/AuthNavComponent.tsx

@@ -8,11 +8,15 @@ function AuthNavComponent() {
 
   return (
     <Router>
+      {/* TODO fix issue react router types
+        @ts-expect-error */}
       <Link to='/login'>
         <StyledButton size='sm' className='rounded-pill mr-2'>
           {t('login')}
         </StyledButton>
       </Link>
+      {/* TODO fix issue react router types
+        @ts-expect-error */}
       <Link to='/register'>
         <StyledButton
           size='sm'

package/src/auth/Login/LoginComponent.tsx

@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: 'Error',
-      message: error.message,
+      message: error?.response?.data?.message || error.message,
     })
   }
 
@@ -112,6 +112,8 @@ const LoginComponent = ({
             {!hideSignUpLink && (
               <h6 className='text-center'>
                 <Trans t={t} i18nKey='loginPromo'>
+                  {/* TODO fix issue react router types
+        @ts-expect-error */}
                   Don&apos;t have account? <Link to='/register'>Sign up</Link>.
                 </Trans>
               </h6>

package/src/auth/Login/LoginFormComponent.tsx

@@ -147,6 +147,8 @@ function LoginFormComponent(props: LoginFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:resetPromo'>
             Forgot your password?{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link
               to='/forgot-password'
               className={[isLoading && 'disabled'].join(' ')}

package/src/auth/Register/RegisterComponent.tsx

@@ -105,6 +105,8 @@ function RegisterComponent({
             <h6 className='text-center'>
               <Trans t={t} i18nKey='registerPromo'>
                 Fill out the form below to sign up for {{ name: t('bookedit') }}
+                {/* TODO fix issue react router types
+        @ts-expect-error */}
                 . Already signed up? Then just <Link to='/login'>Log in</Link>.
               </Trans>
             </h6>

package/src/auth/Register/RegisterFormComponent.tsx

@@ -400,10 +400,14 @@ function RegisterFormComponent({
           <Trans t={t} i18nKey='User:agreementsPromo'>
             By creating an account, I agree to {{ name: t('User:bookedit') }}
             &apos;s{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link to='/terms' className={[isLoading && 'disabled'].join(' ')}>
               terms of service
             </Link>{' '}
             and{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link to='/privacy' className={[isLoading && 'disabled'].join(' ')}>
               privacy policy
             </Link>

package/src/auth/ResetPassword/ResetPasswordFormComponent.tsx

@@ -97,6 +97,8 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:signinPromo'>
             Already a user?{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link to='/login' className={[isLoading && 'disabled'].join(' ')}>
               Sign in
             </Link>
@@ -106,6 +108,8 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:loginPromo'>
             Don&apos;t have an account?{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link
               to='/register'
               className={[isLoading && 'disabled'].join(' ')}

package/src/auth/Router.tsx

@@ -29,6 +29,8 @@ function Router(props: RouterProps) {
     }
   }, [])
 
+  // TODO fix issue react router types
+  // @ts-expect-error
   return <BrowserRouter history={history}>{children}</BrowserRouter>
 }
 

package/src/calendar/Calendar.stories.tsx

@@ -28,7 +28,7 @@ Default.args = {
   fromPrice: 'from £10',
   selectedDate: null,
   setSelectedDate: () => null,
-  calendarDates: getMonthCalendarDates(now),
+  calendarDates: getMonthCalendarDates({ initialDate: now }),
   currentDate: now,
   getDateTimeButtonProps: () => ({
     resources: [],
@@ -50,7 +50,7 @@ Loading.args = {
   fromPrice: 'from £10',
   selectedDate: null,
   setSelectedDate: () => null,
-  calendarDates: getMonthCalendarDates(now),
+  calendarDates: getMonthCalendarDates({ initialDate: now }),
   currentDate: now,
   getDateTimeButtonProps: () => ({
     resources: [],

package/src/calendar/utils/index.ts

@@ -3,7 +3,7 @@ import { DateTime, Interval } from 'luxon'
 
 type Builder = (args: {
   initialDate?: DateTime
-  timeZone: TimeZone['name']
+  timeZone?: TimeZone['name']
 }) => DateTime[]
 
 export const getMonthCalendarDates: Builder = ({

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

@@ -17,6 +17,8 @@ interface IntervalInputProps {
   productSets?: ProductSet[]
   productSetId?: number
   disabled?: boolean
+  disabledRecurrent?: boolean
+  isCopyCreate?: boolean
 }
 
 export interface IntervalInputValues {
@@ -30,6 +32,8 @@ export function IntervalInput({
   editedProductSet,
   productSetId,
   productSets,
+  disabledRecurrent = false,
+  isCopyCreate = false
 }: IntervalInputProps) {
   const { t } = useTranslation(['Design', 'Validation'])
   const {
@@ -54,7 +58,6 @@ export function IntervalInput({
   const endDateInput = useRef<HTMLInputDateElement | null>(null)
 
   const updateEndDate = ({ target: { value: nextStartDate } }) => {
-    setRecurrent(false)
     setValue('start', nextStartDate)
 
     if (
@@ -72,6 +75,13 @@ export function IntervalInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editedProductSet])
 
+  useEffect(() => {
+    if (!isCopyCreate) return
+    setRecurrent(false)
+    setValue('rrule', null)
+     // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCopyCreate])
+
   useEffect(() => {
     if (!productSets) return
 
@@ -153,7 +163,7 @@ export function IntervalInput({
             onChange={({ target: { checked } }) => {
               onChangeRecurrent(checked)
             }}
-            disabled={disabled || Boolean(editedProductSet)}
+            disabled={disabled || Boolean(editedProductSet) || disabledRecurrent}
           />
           {!recurrent && (
             <Form.Text muted>
@@ -178,7 +188,7 @@ export function IntervalInput({
                 minDate={DateTime.fromISO(start)
                   .plus({ day: 1 })
                   .toFormat('yyyy-MM-dd')}
-                disabled={disabled}
+                disabled={disabled || disabledRecurrent}
               />
             )}
           />

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

@@ -8,6 +8,7 @@ import {
 } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { useId } from '@react-aria/utils'
 import { Accordion, Button, Form, Modal } from 'react-bootstrap'
+import { isEqual } from 'lodash'
 import { FormProvider, useForm, Controller } from 'react-hook-form'
 import { DateTime } from 'luxon'
 import { useTranslation } from 'react-i18next'
@@ -65,6 +66,8 @@ export interface EditEventFormProps extends HasPermissionProp {
   timeZone: string
   eventProductSet?: ProductSet
   overrideNameError?: string
+  disabledRecurrent?: boolean
+  isCopyCreate?: boolean
 }
 
 const eventImageTypes = {
@@ -87,6 +90,8 @@ export const EditEventForm = ({
   timeZone,
   eventProductSet,
   overrideNameError,
+  disabledRecurrent = false,
+  isCopyCreate = false,
 }: EditEventFormProps) => {
   const { t } = useTranslation(['Design', 'Validation'])
 
@@ -126,7 +131,7 @@ export const EditEventForm = ({
   const visible = watch('visible')
   const editedProductSet = watch('editedProductSet')
   const productSetId = watch('productSetId')
-
+  const rrule = watch('rrule')
   const {
     images,
     handleImageRemove,
@@ -135,6 +140,8 @@ export const EditEventForm = ({
     isCoverImagesLoading,
   } = useMultipleImages(initialImages)
 
+  const watchedValues = watch()
+
   const onErrorSubmit = (submitErrors) => {
     scrollToError(getFirstErrorKey(submitErrors))
   }
@@ -179,6 +186,18 @@ export const EditEventForm = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const defaultExDate = defaultEventValues?.rrule?.includes('EXDATE')
+    ? defaultEventValues?.rrule?.split(';EXDATE=')[1]
+    : ''
+
+  useEffect(() => {
+    if (!defaultExDate || rrule?.includes('EXDATE')) return
+    rrule && setValue('rrule', rrule?.concat(`;EXDATE=${defaultExDate}`))
+  }, [defaultExDate, rrule])
+
+
+  const isChanged = !isEqual(watchedValues, sanitizeDefaultValues(defaultEventValues));
+
   return (
     <>
       <Dialog
@@ -273,7 +292,9 @@ export const EditEventForm = ({
             disabled={disabled}
             productSetId={productSetId}
             productSets={productSets}
+            disabledRecurrent={disabledRecurrent}
             editedProductSet={editedProductSet}
+            isCopyCreate={isCopyCreate}
           />
           {categories.length !== 0 && (
             <Form.Group>
@@ -416,6 +437,7 @@ export const EditEventForm = ({
               disabled={
                 disabled ||
                 formState.isSubmitting ||
+                !isChanged ||
                 isImagesLoading ||
                 isCoverImagesLoading
               }
@@ -462,7 +484,7 @@ const sanitizeDefaultValues = (
     visible: values?.visible ?? '',
     externalPaymentLink: values?.externalPaymentLink ?? '',
     productSetId: values?.productSetId,
-    images: values?.images,
+    images: values?.images ?? [],
     saleDeadline: values?.saleDeadline,
     integrationUrl: values?.integrationUrl ?? '',
     recurrenceEndAt: values?.recurrenceEndAt ?? undefined,

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

@@ -28,11 +28,13 @@ export const DEADLINE_NAME = [
 
 export type DeadLineNameType = (typeof DEADLINE_NAME)[number]
 
-type SaleDeadlineType = {
-  saleDeadline: null | number
-} | {
-  [key: string] : null | number
-}
+type SaleDeadlineType =
+  | {
+      saleDeadline: null | number
+    }
+  | {
+      [key: string]: null | number
+    }
 
 export const SaleDeadline = ({
   disabled = false,
@@ -52,8 +54,8 @@ export const SaleDeadline = ({
   const [deadlineType, setDeadlineType] = useState<DeadlineType>(
     SALE_DEADLINE_BEFORE_TYPE,
   )
-  
-  const saleDeadline = watch(deadLineCategory || SALE_DEADLINE_NAME) 
+
+  const saleDeadline = watch(deadLineCategory || SALE_DEADLINE_NAME)
 
   useEffect(() => {
     if (onlyBefore) return

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

@@ -40,7 +40,6 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
-                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,