@licklist/design 0.69.3 → 0.69.4

package/dist/styles/activity-card/ListActivitiesCard.scss

@@ -3,56 +3,26 @@
 .list-activity-card {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  height: 6rem;
-  padding: 0.375rem;
-  border: 2px solid transparent;
-  border-radius: 0.5rem;
-  background-color: $snippet-product-set-background-color;
-  color: $snippet-product-set-font-color;
-  transition: $color-transition;
+  gap: 0.5rem;
+  width: 100%;
 
-  &.active {
-    border: 2px solid #0e8be1;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-
-  .description {
+  &-info {
     width: 70%;
     font-size: 0.81rem;
     display: flex;
     flex-direction: column;
+    align-items: start;
   }
 
-  .title {
-    font-weight: 600;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-  }
-
-  .image-container {
-    display: flex;
-    justify-content: start;
+  img {
+    max-width: 120px;
     height: 100%;
-
-    .image {
-      display: flex;
-      align-items: start;
-      width: 7rem;
-      height: 4rem;
-      margin-left: 3rem;
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: center;
-      border-radius: 0.5rem;
-    }
+    object-fit: cover;
+    aspect-ratio: 1.2/1;
+    border-radius: 0.5rem;
   }
-}
 
-.list-activity-card-hr {
-  margin-top: 0;
+  &-hr {
+    margin-top: 0;
+  }
 }

package/dist/styles/activity-card/_index.scss

@@ -1,2 +1,2 @@
-@import './GridActivitiesCard.scss';
+@import './ActivitiesCard.scss';
 @import './ListActivitiesCard.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.69.3",
+  "version": "0.69.4",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -61,7 +61,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.30.1",
+    "@licklist/core": "0.30.3",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.33.1",
     "@mantine/core": "6.0.22",

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

@@ -12,6 +12,8 @@ export const getDefaultValues = (
 ): ProductSetFormValues => ({
   id: productSet?.id ?? 0,
   name: productSet?.name ?? '',
+  description: productSet?.description ?? '',
+  image: productSet?.image,
   type: productSet?.type ?? DEFAULT_PRODUCT_SET_TYPE,
   termsAndConditions: productSet?.termsAndConditions ?? '',
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,

package/src/iframe/activity-card/ActivityCard.tsx

@@ -1,27 +1,29 @@
 import { ReactNode } from 'react'
 import clsx from 'clsx'
+import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 
 export const LAYOUT_GRID = 'grid'
 export const LAYOUT_LIST = 'list'
 
-type Layout = typeof LAYOUT_GRID | typeof LAYOUT_LIST
-
 export type ActivityCardProps = {
   title: ReactNode
   duration: ReactNode
   price: ReactNode
+  description?: ReactNode
   onSelect: () => void
   isSelected: boolean
-  layout?: Layout
+  layout?: typeof LAYOUT_GRID | typeof LAYOUT_LIST
   availableTimes?: string | null
+  image?: Image | null
 }
 
 export const ActivityCard = ({
   title,
   duration,
   price,
+  description,
   availableTimes,
-  // image,
+  image,
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
@@ -30,39 +32,48 @@ export const ActivityCard = ({
     return (
       <button
         type='button'
-        className={clsx('activity-card', isSelected && 'active')}
+        className={clsx('activity-card', { active: isSelected })}
         onClick={onSelect}
       >
-        <div className={clsx('d-flex', 'flex-column')}>
+        {image && (
+          <img src={image.url} alt={typeof title === 'string' ? title : ''} />
+        )}
+
+        <div>
           <div className='activity-card-title'>{title}</div>
           {duration && <div>{duration}</div>}
-
           {price && <div>{price}</div>}
+          {description && (
+            <div className='mt-2 activity-card-description'>{description}</div>
+          )}
         </div>
       </button>
     )
   }
 
   return (
-    <div role='button' onClick={onSelect} onKeyPress={onSelect} tabIndex={0}>
-      <div
-        className={clsx('list-activity-card', {
-          active: isSelected,
-        })}
-      >
-        <div className='description'>
-          <div className='title mb-2'>{title}</div>
-          {availableTimes && <div>{availableTimes}</div>}
-          {duration && (
-            <div>
-              <p>{duration}</p>
-            </div>
-          )}
+    <button
+      type='button'
+      onClick={onSelect}
+      className={clsx('activity-card list-activity-card', {
+        active: isSelected,
+      })}
+    >
+      {image && (
+        <img src={image.url} alt={typeof title === 'string' ? title : ''} />
+      )}
 
-          {price && <div>{price}</div>}
-        </div>
+      <div className='activity-card-info'>
+        <div className='activity-card-title mb-2'>{title}</div>
+        {availableTimes && <div>{availableTimes}</div>}
+        {duration && <div>{duration}</div>}
+        {price && <div>{price}</div>}
+        {description && (
+          <div className='mt-2 activity-card-description'>{description}</div>
+        )}
       </div>
+
       <hr className='list-activity-card-hr' />
-    </div>
+    </button>
   )
 }

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

@@ -79,7 +79,13 @@ export function ProductSetCard({
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item action as='div'>
+                      <ListGroup.Item
+                        action
+                        as='div'
+                        role='button'
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onCopy) && (
                           <ConfirmModal>
                             {(confirm) => (
@@ -95,7 +101,14 @@ export function ProductSetCard({
                           </ConfirmModal>
                         )}
                       </ListGroup.Item>
-                      <ListGroup.Item action className='text-danger' as='div'>
+                      <ListGroup.Item
+                        action
+                        className='text-danger'
+                        as='div'
+                        role='button'
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (

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 = 100
+
 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()
 
@@ -174,6 +180,28 @@ export function ProductSetControl({
           </Form.Control.Feedback>
         </Form.Group>
 
+        <Form.Group controlId={descriptionId}>
+          <Form.Label>{t('Design:description')}</Form.Label>
+          <Form.Control
+            {...register('description', {
+              maxLength: {
+                value: MAX_DESCRIPTION_LENGTH,
+                message: t('Validation:fieldMaxLength', {
+                  attribute: t('description'),
+                  max: 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}
@@ -207,27 +235,6 @@ 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>
-              )}
-            /> */}
-
           <Form.Group>
             <Form.Label className='mb-0'>
               {t('Design:operationalCost')}
@@ -364,35 +371,28 @@ export function ProductSetControl({
             <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>
-                  </>
-                )
-              }}
+              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>
 

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/form/MobileFooter.tsx

@@ -6,9 +6,7 @@ export function MobileFooter() {
 
   return (
     <div className='container product-set-mobile-footer'>
-      <div
-        className={`d-block d-sm-none bg-white border-top fixed-bottom py-4 px-5 d-flex justify-content-between flex-row-reverse`}
-      >
+      <div className='d-block d-sm-none bg-white border-top fixed-bottom py-4 px-5 d-flex justify-content-between flex-row-reverse'>
         <Button type='submit'>{t('save')}</Button>
       </div>
     </div>

package/src/styles/activity-card/{GridActivitiesCard.scss → ActivitiesCard.scss}

@@ -11,10 +11,7 @@
   background-color: #fff;
   font-size: 0.8rem;
   background-color: $snippet-product-set-background-color;
-
-  div {
-    text-align: left;
-  }
+  text-align: left;
 
   &.active {
     border: 2px solid #0e8be1;
@@ -23,7 +20,24 @@
   &-title {
     font-weight: 600;
     line-height: 1.25rem;
-    cursor: pointer;
     font-size: 0.875rem;
   }
+
+  img {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: cover;
+    aspect-ratio: 1.2/1;
+    margin-bottom: 0.8rem;
+    border-radius: 0.5rem;
+  }
+
+  &-description {
+    line-clamp: 5;
+    -webkit-line-clamp: 5;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
 }

package/src/styles/activity-card/ListActivitiesCard.scss

@@ -3,56 +3,26 @@
 .list-activity-card {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  height: 6rem;
-  padding: 0.375rem;
-  border: 2px solid transparent;
-  border-radius: 0.5rem;
-  background-color: $snippet-product-set-background-color;
-  color: $snippet-product-set-font-color;
-  transition: $color-transition;
+  gap: 0.5rem;
+  width: 100%;
 
-  &.active {
-    border: 2px solid #0e8be1;
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-
-  .description {
+  &-info {
     width: 70%;
     font-size: 0.81rem;
     display: flex;
     flex-direction: column;
+    align-items: start;
   }
 
-  .title {
-    font-weight: 600;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-  }
-
-  .image-container {
-    display: flex;
-    justify-content: start;
+  img {
+    max-width: 120px;
     height: 100%;
-
-    .image {
-      display: flex;
-      align-items: start;
-      width: 7rem;
-      height: 4rem;
-      margin-left: 3rem;
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: center;
-      border-radius: 0.5rem;
-    }
+    object-fit: cover;
+    aspect-ratio: 1.2/1;
+    border-radius: 0.5rem;
   }
-}
 
-.list-activity-card-hr {
-  margin-top: 0;
+  &-hr {
+    margin-top: 0;
+  }
 }

package/src/styles/activity-card/_index.scss

@@ -1,2 +1,2 @@
-@import './GridActivitiesCard.scss';
+@import './ActivitiesCard.scss';
 @import './ListActivitiesCard.scss';