@licklist/design 0.68.5-dev.0 → 0.68.6-dev.0

package/src/product-set/card/ProductSetCard.tsx

@@ -50,32 +50,32 @@ export function ProductSetCard({
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
-      role="button"
+      role='button'
       tabIndex={0}
-      className="border-0 product-set-card-wrapper w-100 pb-0"
+      className='border-0 product-set-card-wrapper w-100 pb-0'
       onClick={onCardClick}
     >
       <div className={productSetCardClasses}>
-        <div className="product-set-card-link">
-          <div className="d-flex flex-column">
+        <div className='product-set-card-link'>
+          <div className='d-flex flex-column'>
             <div>
               {name}
               {rrule && `(${RRule.fromString(rrule).toText()})`}
             </div>
             {!!override && (
-              <div className="h6 bold ml-1">
+              <div className='h6 bold ml-1'>
                 {`${override} ${t(override > 1 ? 'overrides' : 'override')}`}
               </div>
             )}
           </div>
         </div>
-        <div className="d-flex">
-          <div className="product-set-card-menu-eye-container">
-            <FaEye color="#0E8CE2" size={20} />
+        <div className='d-flex'>
+          <div className='product-set-card-menu-eye-container'>
+            <FaEye color='#0E8CE2' size={20} />
           </div>
           <OverlayTrigger
-            trigger="click"
-            placement="bottom"
+            trigger='click'
+            placement='bottom'
             rootClose
             overlay={
               <Popover
@@ -87,15 +87,15 @@ export function ProductSetCard({
               >
                 <Popover.Content
                   as={ListGroup}
-                  className="product-set-card-menu"
-                  variant="flush"
+                  className='product-set-card-menu'
+                  variant='flush'
                 >
                   {hasPermission && (
                     <>
                       <ListGroup.Item
                         action
-                        as="div"
-                        role="button"
+                        as='div'
+                        role='button'
                         tabIndex={0}
                         onClick={(e) => e.stopPropagation()}
                       >
@@ -121,7 +121,7 @@ export function ProductSetCard({
                                   confirm(() => {})
                                 }}
                                 name={t('duplicate')}
-                                className="product-set-card-menu-item-text"
+                                className='product-set-card-menu-item-text'
                               />
                             )}
                           </ConfirmModal>
@@ -129,9 +129,9 @@ export function ProductSetCard({
                       </ListGroup.Item>
                       <ListGroup.Item
                         action
-                        className="text-danger"
-                        as="div"
-                        role="button"
+                        className='text-danger'
+                        as='div'
+                        role='button'
                         tabIndex={0}
                         onClick={(e) => e.stopPropagation()}
                       >
@@ -145,7 +145,7 @@ export function ProductSetCard({
                                 }}
                                 name={t('remove')}
                                 icon={<FaTrashAlt size={12} />}
-                                className="product-set-card-menu-item-text d-flex w-100 align-items-center"
+                                className='product-set-card-menu-item-text d-flex w-100 align-items-center'
                                 rightIcon
                               />
                             )}
@@ -159,8 +159,8 @@ export function ProductSetCard({
             }
           >
             <button
-              type="button"
-              className="product-set-card-menu-button"
+              type='button'
+              className='product-set-card-menu-button'
               onClick={(e) => {
                 e.stopPropagation()
                 setIsOverlayVisible(true)

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,11 +236,11 @@ 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}
@@ -254,15 +254,15 @@ export const DateInput = ({
           ))}
           {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')}
@@ -270,7 +270,7 @@ export const DateInput = ({
           )}
 
           <Form.Control
-            type="hidden"
+            type='hidden'
             {...register('menuRecurrences', {
               required: {
                 value: true,
@@ -282,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',
@@ -55,6 +55,8 @@ export interface TemplateItem {
 
 export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   name: string
+  description?: string
+  image?: Image
   type: ProductSetType
   termsAndConditions: string
   thankYouPageUrl: string
@@ -65,6 +67,7 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   steps: Step[]
   emailTemplates?: TemplateItem[]
   smsTemplates?: TemplateItem[]
+  localImageBlobURL?: string
 }
 
 export interface ProductSetControlShared {
@@ -122,6 +125,7 @@ export function ProductSetControl({
   const steps = watch('steps')
 
   const nameId = useId()
+  const descriptionId = useId()
   const termsAndConditionsId = useId()
   const relyOnPeopleTypeId = useId()
 
@@ -139,7 +143,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 +173,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: 25_000,
+            })}
+            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 +214,7 @@ export function ProductSetControl({
           </>
         )}
 
-        <div className="divider" />
+        <div className='divider' />
 
         <TutorialGifCard isOverrides={isOverrides} />
 
@@ -206,34 +226,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 +240,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 +261,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 +270,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 +289,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 +298,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 +306,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 +342,7 @@ export function ProductSetControl({
             </Form.Label>
             {showSmsTemplateSelector ? (
               <Typeahead
-                name="smsTemplates"
+                name='smsTemplates'
                 options={smsTemplates}
                 isMultipleChoise
                 placeholder={t('Design:choose')}
@@ -363,40 +362,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 +405,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) => ({