@licklist/design 0.69.1-dev.3 → 0.69.1

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,33 +236,32 @@ 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}`]?.message
+                errors?.menuRecurrences?.[`${index}`]?.availableTimes?.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')}
@@ -270,7 +269,7 @@ export const DateInput = ({
           )}
 
           <Form.Control
-            type='hidden'
+            type="hidden"
             {...register('menuRecurrences', {
               required: {
                 value: true,
@@ -282,7 +281,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,11 +22,12 @@ 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'
@@ -34,7 +35,6 @@ 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,8 +47,6 @@ const RELY_ON_PEOPLE_TYPE_TITLES = {
   [RELY_ON_PEOPLE_QUANTITY]: 'peopleQuantity',
 }
 
-const MAX_DESCRIPTION_LENGTH = 500
-
 export interface TemplateItem {
   id: string
   value: EmailTemplate | SmsTemplate
@@ -57,8 +55,6 @@ export interface TemplateItem {
 
 export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   name: string
-  description?: string
-  image?: Image
   type: ProductSetType
   termsAndConditions: string
   thankYouPageUrl: string
@@ -69,7 +65,6 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   steps: Step[]
   emailTemplates?: TemplateItem[]
   smsTemplates?: TemplateItem[]
-  localImageBlobURL?: string
 }
 
 export interface ProductSetControlShared {
@@ -127,7 +122,6 @@ export function ProductSetControl({
   const steps = watch('steps')
 
   const nameId = useId()
-  const descriptionId = useId()
   const termsAndConditionsId = useId()
   const relyOnPeopleTypeId = useId()
 
@@ -145,7 +139,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
@@ -175,27 +169,11 @@ 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}
@@ -216,7 +194,7 @@ export function ProductSetControl({
           </>
         )}
 
-        <div className='divider' />
+        <div className="divider" />
 
         <TutorialGifCard isOverrides={isOverrides} />
 
@@ -228,13 +206,34 @@ export function ProductSetControl({
         />
       </Col>
       <Col md={6} sm={12}>
-        <div className='second-column'>
+        <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'>
+            <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,
                 })}
@@ -242,7 +241,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)}
@@ -263,7 +262,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>
@@ -272,12 +271,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]}
@@ -291,7 +290,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>
@@ -300,7 +299,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(
@@ -308,19 +307,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')}
@@ -344,7 +343,7 @@ export function ProductSetControl({
             </Form.Label>
             {showSmsTemplateSelector ? (
               <Typeahead
-                name='smsTemplates'
+                name="smsTemplates"
                 options={smsTemplates}
                 isMultipleChoise
                 placeholder={t('Design:choose')}
@@ -364,33 +363,40 @@ export function ProductSetControl({
           <Form.Group>
             <Controller
               control={control}
-              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>
-                </>
-              )}
+              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>
+                  </>
+                )
+              }}
             />
           </Form.Group>
 
-          <Form.Group controlId='thankYouPageUrlId'>
+          <Form.Group controlId="thankYouPageUrlId">
             <Form.Label>{t('thankYouPageUrl')}</Form.Label>
 
             <Form.Control
@@ -407,7 +413,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/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',
           })}{' '}

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

@@ -24,38 +24,38 @@ const TutorialGifCard = ({
   return (
     <>
       <Card className={`tutorial-card ${!isVisible && 'hidden'}`}>
-        <Card.Header className='tutorial-card-header'>
+        <Card.Header className="tutorial-card-header">
           <div>
             <FaCheck
-              color='white'
-              className='rounded product-set-item-icon'
+              color="white"
+              className="rounded product-set-item-icon"
               size={14}
             />
             <span>{t('bookedTopTip')}</span>
           </div>
           <button
-            className='border-0'
+            className="border-0"
             onClick={() => setIsVisible(false)}
-            type='button'
+            type="button"
           >
             <span>{t('gotIt')}</span>
-            <FaTimes size={18} className='rounded tutorial-close-icon p-1' />
+            <FaTimes size={18} className="rounded tutorial-close-icon p-1" />
           </button>
         </Card.Header>
-        <Card.Body className='tutorial-card-body'>
+        <Card.Body className="tutorial-card-body">
           <p>
             {t(isOverrides ? 'buildOverrideProductSet' : 'buildProductSet')}
           </p>
           <span>
             {t(isOverrides ? 'buildOverrideRules' : 'buildProductSetDesc')}
           </span>
-          {tutorialAsset && <Image src={tutorialAsset} alt='Tutorial Gif' />}
+          {tutorialAsset && <Image src={tutorialAsset} alt="Tutorial Gif" />}
         </Card.Body>
       </Card>
       <Button
-        type='button'
+        type="button"
         onClick={() => setIsVisible(true)}
-        className='mb-4'
+        className="mb-4"
         style={{ display: !isVisible ? 'block' : 'none' }}
       >
         <span>{t('hint')}</span>

package/src/product-set/deposit-paid/ProductSetDepositPaid.stories.tsx

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