@licklist/design 0.69.1 → 0.69.3-dev.0

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -217,8 +217,8 @@ export const DateAndRecurrenceInput = ({
       <OverlayTrigger
         show={isDatePopoverVisible}
         overlay={
-          <Popover id={popoverId} className="rounded">
-            <Popover.Content className="shadow-lg rounded" ref={popoverRef}>
+          <Popover id={popoverId} className='rounded'>
+            <Popover.Content className='shadow-lg rounded' ref={popoverRef}>
               <RecurringDatePickerInput
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
@@ -247,11 +247,11 @@ export const DateAndRecurrenceInput = ({
             </Popover.Content>
           </Popover>
         }
-        trigger="click"
-        placement="bottom"
+        trigger='click'
+        placement='bottom'
         popperConfig={{ modifiers: [sameWidthPopperModifier] }}
       >
-        <div className="product-set-recurrences">
+        <div className='product-set-recurrences'>
           <DndContext
             onDragEnd={handleOnDragEnd}
             modifiers={[restrictToVerticalAxis]}
@@ -279,22 +279,22 @@ export const DateAndRecurrenceInput = ({
 
           {(!isEventEditProductSet || fields?.length < 1) && (
             <div
-              className="product-set-recurrence-icon-wrapper"
-              role="button"
+              className='product-set-recurrence-icon-wrapper'
+              role='button'
               tabIndex={0}
               onClick={handleOnAdd}
               onKeyDown={handleOnAdd}
             >
               <FaPlusCircle
                 size={16}
-                className="product-set-recurrence-icon-add mr-2"
+                className='product-set-recurrence-icon-add mr-2'
               />
               {t('addDates')}
             </div>
           )}
 
           <Form.Control
-            type="hidden"
+            type='hidden'
             {...register('menuRecurrences', {
               required: {
                 value: true,
@@ -306,7 +306,7 @@ export const DateAndRecurrenceInput = ({
             })}
           />
 
-          <div className="manual-form-error">
+          <div className='manual-form-error'>
             {errors.menuRecurrences?.message}
           </div>
         </div>

package/src/product-set/control/DateInput.tsx

@@ -208,8 +208,8 @@ export const DateInput = ({
       <OverlayTrigger
         show={isDatePopoverVisible}
         overlay={
-          <Popover id={popoverId} className="rounded">
-            <Popover.Content className="shadow-lg rounded" ref={popoverRef}>
+          <Popover id={popoverId} className='rounded'>
+            <Popover.Content className='shadow-lg rounded' ref={popoverRef}>
               <DatePickerInput
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
@@ -236,32 +236,33 @@ export const DateInput = ({
             </Popover.Content>
           </Popover>
         }
-        trigger="click"
-        placement="bottom"
+        trigger='click'
+        placement='bottom'
         popperConfig={{ modifiers: [sameWidthPopperModifier] }}
       >
-        <div className="product-set-recurrences">
+        <div className='product-set-recurrences'>
           {fields.map((menuRecurrence, index) => (
             <ProductSetRecurrenceOverridesControl
               key={menuRecurrence._id}
               menuRecurrence={menuRecurrence}
               onEdit={() => handleOnEdit(menuRecurrence, index)}
               errorMessage={
-                errors?.menuRecurrences?.[`${index}`]?.availableTimes?.message
+                errors?.menuRecurrences?.[`${index}`]?.availableTimes
+                  ?.message || errors?.menuRecurrences?.[`${index}`]?.message
               }
             />
           ))}
           {fields.length < MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE && (
             <div
-              className="product-set-recurrence-icon-wrapper"
-              role="button"
+              className='product-set-recurrence-icon-wrapper'
+              role='button'
               tabIndex={0}
               onClick={handleOnAdd}
               onKeyDown={handleOnAdd}
             >
               <FaPlusCircle
                 size={16}
-                className="product-set-recurrence-icon-add mr-2"
+                className='product-set-recurrence-icon-add mr-2'
               />
 
               {t('addDates')}
@@ -269,7 +270,7 @@ export const DateInput = ({
           )}
 
           <Form.Control
-            type="hidden"
+            type='hidden'
             {...register('menuRecurrences', {
               required: {
                 value: true,
@@ -281,7 +282,7 @@ export const DateInput = ({
             })}
           />
 
-          <div className="manual-form-error">
+          <div className='manual-form-error'>
             {errors.menuRecurrences?.message}
           </div>
         </div>

package/src/product-set/control/ProductSetControl.stories.tsx

@@ -28,7 +28,7 @@ export const Default: Story<DefaultProductSetControl> = (args) => {
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >
@@ -49,7 +49,7 @@ export const Empty: Story<DefaultProductSetControl> = (args) => {
   return (
     <FormProvider {...form}>
       <Form
-        className="d-flex flex-column"
+        className='d-flex flex-column'
         noValidate
         onSubmit={form.handleSubmit(onSubmit)}
       >

package/src/product-set/control/ProductSetControl.tsx

@@ -22,12 +22,11 @@ import HookFormService from '@licklist/plugins/dist/services/Form/HookFormServic
 import { ruleForUrlWithProtocol } from '@licklist/plugins/dist/validation/Rules/urlRule'
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
 import { checkIfZoneCategory } from '@licklist/plugins'
+import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { WarningMessage } from '../../static'
 import { SelectItem } from '../../types/generic/SelectItem'
 import {
   DateAndRecurrenceInput,
-  // TODO: Show Date Component, when reccurent date bugs are fixed
-  // DateAndRecurrenceInput,
   DateAndRecurrenceInputValues,
 } from './DateAndRecurrenceInput'
 import TutorialGifCard from './TutorialGifCard'
@@ -35,6 +34,7 @@ import { Step } from '../types'
 import { StepsControl } from '../form/StepsControl'
 import { Typeahead } from '../../typeahead'
 import { DateInput } from './DateInput'
+import { ProductSetImageControl } from './ProductSetImageControl'
 
 const OPERATIONAL_COST_TITLES = {
   [OPERATIONAL_COST_PROVIDER]: 'operationalCostProvider',
@@ -47,6 +47,8 @@ const RELY_ON_PEOPLE_TYPE_TITLES = {
   [RELY_ON_PEOPLE_QUANTITY]: 'peopleQuantity',
 }
 
+const MAX_DESCRIPTION_LENGTH = 500
+
 export interface TemplateItem {
   id: string
   value: EmailTemplate | SmsTemplate
@@ -55,6 +57,8 @@ export interface TemplateItem {
 
 export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   name: string
+  description?: string
+  image?: Image
   type: ProductSetType
   termsAndConditions: string
   thankYouPageUrl: string
@@ -65,6 +69,7 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   steps: Step[]
   emailTemplates?: TemplateItem[]
   smsTemplates?: TemplateItem[]
+  localImageBlobURL?: string
 }
 
 export interface ProductSetControlShared {
@@ -122,6 +127,7 @@ export function ProductSetControl({
   const steps = watch('steps')
 
   const nameId = useId()
+  const descriptionId = useId()
   const termsAndConditionsId = useId()
   const relyOnPeopleTypeId = useId()
 
@@ -139,7 +145,7 @@ export function ProductSetControl({
         isEventEditProductSet && 'event-edit-product-set'
       }`}
     >
-      <Col md={6} sm={12} className="pr-5">
+      <Col md={6} sm={12} className='pr-5'>
         <Form.Group controlId={nameId}>
           <Form.Label>{t('Design:name')}*</Form.Label>
           <Form.Control
@@ -169,11 +175,27 @@ export function ProductSetControl({
             placeholder={t('Design:placeholderProductSetName')}
             isInvalid={Boolean(errors.name)}
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors.name?.message}
           </Form.Control.Feedback>
         </Form.Group>
 
+        <Form.Group controlId={descriptionId}>
+          <Form.Label>{t('Design:description')}</Form.Label>
+          <Form.Control
+            {...register('description', {
+              maxLength: MAX_DESCRIPTION_LENGTH,
+            })}
+            as='textarea'
+            isInvalid={Boolean(errors.description)}
+          />
+          <Form.Control.Feedback type='invalid'>
+            {errors.description?.message}
+          </Form.Control.Feedback>
+        </Form.Group>
+
+        <ProductSetImageControl />
+
         {showDateSelector ? (
           <DateInput
             workHours={isZoneAdded ? workHours : undefined}
@@ -194,7 +216,7 @@ export function ProductSetControl({
           </>
         )}
 
-        <div className="divider" />
+        <div className='divider' />
 
         <TutorialGifCard isOverrides={isOverrides} />
 
@@ -206,34 +228,13 @@ export function ProductSetControl({
         />
       </Col>
       <Col md={6} sm={12}>
-        <div className="second-column">
-          {/* <Controller
-              control={control}
-              name="type"
-              render={({ field }) => (
-                <Form.Group className="d-flex flex-column flex-grow-1 align-items-start">
-                  <Form.Label>{t("Design:checkoutType")}</Form.Label>
-                  <Switch
-                    name={field.name}
-                    options={PRODUCT_SET_TYPES.map((type) => ({
-                      key: type,
-                      id: type,
-                      value: t(type),
-                    }))}
-                    value={field.value}
-                    onChange={field.onChange}
-                    disabled={isLoading}
-                  />
-                </Form.Group>
-              )}
-            /> */}
-
+        <div className='second-column'>
           <Form.Group>
-            <Form.Label className="mb-0">
+            <Form.Label className='mb-0'>
               {t('Design:operationalCost')}
             </Form.Label>
-            <div className="d-flex">
-              <span className="booking-fee-text">
+            <div className='d-flex'>
+              <span className='booking-fee-text'>
                 {t('bookingFeePaid', {
                   fee,
                 })}
@@ -241,7 +242,7 @@ export function ProductSetControl({
             </div>
             <Form.Control
               {...register('operationalCost', { required: true })}
-              as="select"
+              as='select'
               defaultValue={OPERATIONAL_COST_PROVIDER}
               disabled={isOverrides}
               isInvalid={HookFormService.isInvalid('operationalCost', errors)}
@@ -262,7 +263,7 @@ export function ProductSetControl({
                 </option>
               ))}
             </Form.Control>
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors('operationalCost', errors)}
             </Form.Control.Feedback>
           </Form.Group>
@@ -271,12 +272,12 @@ export function ProductSetControl({
             <Form.Label>{t('peopleQuantityType')}</Form.Label>
             <Form.Control
               {...register('relyOnPeopleType')}
-              as="select"
+              as='select'
               defaultValue={null}
               disabled={isOverrides}
               isInvalid={HookFormService.isInvalid('relyOnPeopleType', errors)}
             >
-              <option value="">{t('notRequired')} </option>
+              <option value=''>{t('notRequired')} </option>
               {Object.keys(RELY_ON_PEOPLE_TYPES).map((relyOnPeopleType) => (
                 <option
                   value={RELY_ON_PEOPLE_TYPES[relyOnPeopleType]}
@@ -290,7 +291,7 @@ export function ProductSetControl({
                 </option>
               ))}
             </Form.Control>
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors('relyOnPeopleType', errors)}
             </Form.Control.Feedback>
           </Form.Group>
@@ -299,7 +300,7 @@ export function ProductSetControl({
             <Form.Label>{t('Design:termsAndConditions')}</Form.Label>
             <Form.Control
               {...register('termsAndConditions')}
-              as="textarea"
+              as='textarea'
               rows={2}
               disabled={isLoading || isOverrides}
               isInvalid={HookFormService.isInvalid(
@@ -307,19 +308,19 @@ export function ProductSetControl({
                 errors,
               )}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors('termsAndConditions', errors)}
             </Form.Control.Feedback>
           </Form.Group>
 
           <Form.Group>
-            <Form.Label className="mt-4">
+            <Form.Label className='mt-4'>
               {t('Design:emailTemplate')}
             </Form.Label>
             <>
               {showEmailTemplateSelector ? (
                 <Typeahead
-                  name="emailTemplates"
+                  name='emailTemplates'
                   options={emailTemplates}
                   isMultipleChoise
                   placeholder={t('Design:choose')}
@@ -343,7 +344,7 @@ export function ProductSetControl({
             </Form.Label>
             {showSmsTemplateSelector ? (
               <Typeahead
-                name="smsTemplates"
+                name='smsTemplates'
                 options={smsTemplates}
                 isMultipleChoise
                 placeholder={t('Design:choose')}
@@ -363,40 +364,33 @@ export function ProductSetControl({
           <Form.Group>
             <Controller
               control={control}
-              name="fieldSetId"
-              render={({ field }) => {
-                const fieldValue = Number(field.value)
-
-                return (
-                  <>
-                    <Form.Label>{t('Design:customFields')}</Form.Label>
-                    <Form.Control
-                      onChange={field.onChange}
-                      value={fieldValue}
-                      as="select"
-                      disabled={isOverrides}
-                      isInvalid={HookFormService.isInvalid(
-                        'fieldSetId',
-                        errors,
-                      )}
-                    >
-                      <option value="">{t('Design:choose')}</option>
-                      {fieldSets?.map((fieldSet) => (
-                        <option value={fieldSet.id} key={fieldSet.id}>
-                          {fieldSet.name}
-                        </option>
-                      ))}
-                    </Form.Control>
-                    <Form.Control.Feedback type="invalid">
-                      {HookFormService.getErrors('fieldSetId', errors)}
-                    </Form.Control.Feedback>
-                  </>
-                )
-              }}
+              name='fieldSetId'
+              render={({ field }) => (
+                <>
+                  <Form.Label>{t('Design:customFields')}</Form.Label>
+                  <Form.Control
+                    onChange={field.onChange}
+                    value={Number(field.value)}
+                    as='select'
+                    disabled={isOverrides}
+                    isInvalid={HookFormService.isInvalid('fieldSetId', errors)}
+                  >
+                    <option value=''>{t('Design:choose')}</option>
+                    {fieldSets?.map((fieldSet) => (
+                      <option value={fieldSet.id} key={fieldSet.id}>
+                        {fieldSet.name}
+                      </option>
+                    ))}
+                  </Form.Control>
+                  <Form.Control.Feedback type='invalid'>
+                    {HookFormService.getErrors('fieldSetId', errors)}
+                  </Form.Control.Feedback>
+                </>
+              )}
             />
           </Form.Group>
 
-          <Form.Group controlId="thankYouPageUrlId">
+          <Form.Group controlId='thankYouPageUrlId'>
             <Form.Label>{t('thankYouPageUrl')}</Form.Label>
 
             <Form.Control
@@ -413,7 +407,7 @@ export function ProductSetControl({
               isInvalid={HookFormService.isInvalid('thankYouPageUrl', errors)}
             />
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {HookFormService.getErrors('thankYouPageUrl', errors)}
             </Form.Control.Feedback>
           </Form.Group>

package/src/product-set/control/ProductSetImageControl.tsx

@@ -0,0 +1,97 @@
+import { useFormContext } from 'react-hook-form'
+import { HookFormService, useImages } from '@licklist/plugins'
+import { IMAGE_TYPE_IMAGE } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
+import { useCallback, useEffect } from 'react'
+import { Form } from 'react-bootstrap'
+import { FileUpload } from 'src/file-upload'
+import { useTranslation } from 'react-i18next'
+import { isEqual } from 'lodash'
+import { ProductSetControlValues } from '..'
+
+export const ProductSetImageControl = () => {
+  const { t } = useTranslation('Design')
+
+  const {
+    formState: { errors },
+    setValue,
+    watch,
+    clearErrors,
+  } = useFormContext<ProductSetControlValues>()
+  const currentProductSet: ProductSetControlValues = watch()
+
+  const {
+    images,
+    handleImageRemove,
+    handleImageUploading,
+    isLoading: isImageUploading,
+    setImages,
+  } = useImages(null)
+
+  const onFilesChange = useCallback(
+    async (files: File[]) => {
+      const uploadedFiles = await handleImageUploading(files, IMAGE_TYPE_IMAGE)
+
+      if (!uploadedFiles) return
+
+      setValue('localImageBlobURL', URL.createObjectURL(files[0]) as never)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleImageUploading],
+  )
+
+  const onImageRemove = useCallback(
+    (id, path) => {
+      handleImageRemove(id, path)
+      setValue('localImageBlobURL', undefined as never)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleImageRemove],
+  )
+
+  useEffect(() => {
+    if (!currentProductSet || !currentProductSet.image) return
+
+    setImages([
+      {
+        ...currentProductSet.image,
+        url:
+          currentProductSet.image.url || currentProductSet?.localImageBlobURL,
+      },
+    ])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentProductSet?.image])
+
+  useEffect(() => {
+    if (isEqual(images[0], currentProductSet?.image)) return
+
+    setValue('image', (images[0] || null) as never)
+
+    if (images[0]) {
+      clearErrors('image')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [images])
+
+  return (
+    <Form.Group controlId='name'>
+      <Form.Control
+        isInvalid={HookFormService.isInvalid('image', errors)}
+        hidden
+      />
+      <FileUpload
+        onFilesChange={onFilesChange}
+        allowedExtensions={['jpeg', 'jpg', 'png']}
+        subTitle='.jpeg    .jpg    .png'
+        enablePreview
+        onFileRemove={onImageRemove}
+        defaultFiles={images}
+        isLoading={isImageUploading}
+        withIcon
+        title={t('Design:addImage')}
+      />
+      <Form.Control.Feedback type='invalid'>
+        {HookFormService.getErrors('image', errors)}
+      </Form.Control.Feedback>
+    </Form.Group>
+  )
+}

package/src/product-set/control/ProductSetRecurrenceControl.stories.tsx

@@ -38,7 +38,7 @@ export const Default: Story<ProductSetRecurrences> = (args) => {
   }
 
   return (
-    <div className="product-set-recurrences">
+    <div className='product-set-recurrences'>
       <DndContext onDragEnd={onDragEnd}>
         <SortableContext
           items={items.map((menuRecurrence) => ({

package/src/product-set/control/ProductSetRecurrenceControl.tsx

@@ -30,7 +30,7 @@ export const ProductSetRecurrenceControl = ({
 
   return (
     <div
-      className="sortable-tree-root flex-column"
+      className='sortable-tree-root flex-column'
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
@@ -38,20 +38,20 @@ export const ProductSetRecurrenceControl = ({
       {...attributes}
       {...listeners}
       ref={setNodeRef}
-      role="button"
+      role='button'
       tabIndex={0}
     >
       <div
         key={menuRecurrence.rrule}
-        className="product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
+        className='product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1'
       >
-        <span className="d-flex flex-row align-items-center">
+        <span className='d-flex flex-row align-items-center'>
           <FaCalendar
             size={16}
-            className="product-set-recurrence-icon-calendar"
+            className='product-set-recurrence-icon-calendar'
           />
 
-          <span className="product-set-recurrence-title d-flex flex-grow-1">
+          <span className='product-set-recurrence-title d-flex flex-grow-1'>
             {t('from')}{' '}
             {formatDate(menuRecurrence.startDate, {
               dateStyle: 'medium',
@@ -67,19 +67,19 @@ export const ProductSetRecurrenceControl = ({
           </span>
 
           <div
-            className="d-inline-flex"
-            role="button"
+            className='d-inline-flex'
+            role='button'
             tabIndex={0}
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
             <FaEllipsisH
               size={16}
-              className="product-set-recurrence-icon-more"
+              className='product-set-recurrence-icon-more'
             />
           </div>
         </span>
-        <span className="product-set-recurrence-description">
+        <span className='product-set-recurrence-description'>
           {getHumanReadableDate(menuRecurrence)}
         </span>
       </div>

package/src/product-set/control/ProductSetRecurrenceOverridesControl.tsx

@@ -16,36 +16,36 @@ export const ProductSetRecurrenceOverridesControl = ({
   const { formatDate } = useIntl()
 
   return (
-    <div className="sortable-tree-root flex-column" role="button" tabIndex={0}>
+    <div className='sortable-tree-root flex-column' role='button' tabIndex={0}>
       <div
         key={menuRecurrence.rrule}
-        className="product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1"
+        className='product-set-recurrence d-flex flex-column mr-0 mb-3 p-3 px-4 flex-grow-1'
       >
-        <span className="d-flex flex-row align-items-center">
+        <span className='d-flex flex-row align-items-center'>
           <FaCalendar
             size={16}
-            className="product-set-recurrence-icon-calendar"
+            className='product-set-recurrence-icon-calendar'
           />
-          <span className="product-set-recurrence-title d-flex flex-grow-1">
+          <span className='product-set-recurrence-title d-flex flex-grow-1'>
             {formatDate(menuRecurrence.startDate, {
               dateStyle: 'medium',
             })}{' '}
           </span>
 
           <div
-            className="d-inline-flex"
-            role="button"
+            className='d-inline-flex'
+            role='button'
             tabIndex={0}
             onClick={() => onEdit(menuRecurrence)}
             onKeyDown={() => onEdit(menuRecurrence)}
           >
             <FaEllipsisH
               size={16}
-              className="product-set-recurrence-icon-more"
+              className='product-set-recurrence-icon-more'
             />
           </div>
         </span>
-        <span className="product-set-recurrence-description">
+        <span className='product-set-recurrence-description'>
           {formatDate(menuRecurrence.startDate, {
             dateStyle: 'medium',
           })}{' '}