@licklist/design 0.69.1 → 0.69.2

package/src/notification/sms-template/control/SmsTemplateControl.tsx

@@ -30,30 +30,30 @@ export const SmsTemplateControl = ({
   return (
     <>
       <Row>
-        <Form.Group as={Col} controlId="type" xs sm={12} md={8} lg={10} xl={12}>
+        <Form.Group as={Col} controlId='type' xs sm={12} md={8} lg={10} xl={12}>
           <Form.Label>{t('type')}</Form.Label>
 
           <Form.Control
-            as="select"
+            as='select'
             {...register('type', {
               required: t('Validation:fieldRequired', {
                 attribute: t('type'),
               }) as string,
             })}
-            name="type"
+            name='type'
             required
             isInvalid={Boolean(errors.type)}
             placeholder={t('Design:type')}
             disabled={!!id}
           >
-            <option value="">{t('Design:choose')}</option>
+            <option value=''>{t('Design:choose')}</option>
             {notificationTypes.map((key) => (
               <option key={key} value={key}>
                 {t(`Design:${key}`)}
               </option>
             ))}
           </Form.Control>
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors.type?.message}
           </Form.Control.Feedback>
         </Form.Group>
@@ -61,7 +61,7 @@ export const SmsTemplateControl = ({
       <Row>
         <Form.Group
           as={Col}
-          controlId="formGroupName"
+          controlId='formGroupName'
           xs
           sm={12}
           md={8}
@@ -79,7 +79,7 @@ export const SmsTemplateControl = ({
             placeholder={t('Design:templateName')}
             isInvalid={Boolean(errors?.name)}
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {errors.name?.message}
           </Form.Control.Feedback>
         </Form.Group>
@@ -92,12 +92,12 @@ export const SmsTemplateControl = ({
           md={8}
           lg={10}
           xl={12}
-          controlId="formGroupBdoy"
+          controlId='formGroupBdoy'
         >
           <Form.Label>{t('Design:smsBody')}</Form.Label>
           <Form.Control
             isInvalid={Boolean(errors.body)}
-            as="textarea"
+            as='textarea'
             rows={3}
             {...register('body', {
               required: true,
@@ -122,14 +122,14 @@ export const SmsTemplateControl = ({
           />
           {smsBody?.length
             ? !HookFormService.hasError(errors.body, 'maxLength') && (
-                <span className="sms-template-body-left-symbols">
+                <span className='sms-template-body-left-symbols'>
                   {t('Design:symbolsLeft')} {MAX_SMS_LENGTH - smsBody?.length} (
                   {t('Design:max')}: {MAX_SMS_LENGTH})
                 </span>
               )
             : null}
 
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.hasError(errors.body, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('Design:smsBody'),
@@ -147,16 +147,16 @@ export const SmsTemplateControl = ({
         <Form.Group as={Col}>
           <Form.Check
             {...register('isActive')}
-            name="isActive"
+            name='isActive'
             label={t('Design:active')}
-            id="formGroupIsActive"
+            id='formGroupIsActive'
             custom
           />
           <Form.Check
             {...register('isDefault')}
-            name="isDefault"
+            name='isDefault'
             label={t('Design:defaultTemplateForTheType')}
-            id="formGroupIsDefault"
+            id='formGroupIsDefault'
             custom
           />
         </Form.Group>

package/src/notification/sms-template/form/SmsTemplateForm.tsx

@@ -55,7 +55,7 @@ export function SmsTemplateForm({
         <NotificationPlaceholders placeholders={placeholders} />
 
         {hasPermission && (
-          <Button className="mt-5 d-no dne d-md-block" type="submit">
+          <Button className='mt-5 d-no dne d-md-block' type='submit'>
             {t('save')}
           </Button>
         )}

package/src/number-of-people-input/components/RenderNumberOfPeopleInputComponent.tsx

@@ -18,9 +18,9 @@ export const RenderNumberOfPeopleInputComponent = ({
   const { t } = useTranslation('Design')
 
   return (
-    <div id={NUMBER_OF_PEOPLE} className="people-input">
-      <div className="d-flex align-items-center input-wrapper">
-        <h3 className="iframe-event__name">{t('people')}</h3>
+    <div id={NUMBER_OF_PEOPLE} className='people-input'>
+      <div className='d-flex align-items-center input-wrapper'>
+        <h3 className='iframe-event__name'>{t('people')}</h3>
 
         <NumberInput
           onChange={onChangePeopleAmount}
@@ -31,13 +31,13 @@ export const RenderNumberOfPeopleInputComponent = ({
           className={clsx('iframe-event__product-count')}
         />
       </div>
-      <div className="iframe-event__message-error">
+      <div className='iframe-event__message-error'>
         {peopleAmountError && (
-          <div className="mt-3">
+          <div className='mt-3'>
             <p>
               <Trans
                 t={t}
-                i18nKey="pleaseSelectAtLeastFrom"
+                i18nKey='pleaseSelectAtLeastFrom'
                 values={{
                   min: 1,
                   type: 'item',

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

@@ -37,32 +37,32 @@ export function ProductSetCard({
 
   return (
     <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={() => RouteService.redirectTo(href)}
       onKeyUp={() => RouteService.redirectTo(href)}
     >
       <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
@@ -74,12 +74,12 @@ 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">
+                      <ListGroup.Item action as='div'>
                         {Boolean(onCopy) && (
                           <ConfirmModal>
                             {(confirm) => (
@@ -89,13 +89,13 @@ export function ProductSetCard({
                                   confirm(onCopy)
                                 }}
                                 name={t('duplicate')}
-                                className="product-set-card-menu-item-text"
+                                className='product-set-card-menu-item-text'
                               />
                             )}
                           </ConfirmModal>
                         )}
                       </ListGroup.Item>
-                      <ListGroup.Item action className="text-danger" as="div">
+                      <ListGroup.Item action className='text-danger' as='div'>
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (
@@ -106,7 +106,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
                               />
                             )}
@@ -120,8 +120,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}
@@ -253,15 +253,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')}
@@ -269,7 +269,7 @@ export const DateInput = ({
           )}
 
           <Form.Control
-            type="hidden"
+            type='hidden'
             {...register('menuRecurrences', {
               required: {
                 value: true,
@@ -281,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

@@ -139,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
@@ -169,7 +169,7 @@ 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>
@@ -194,7 +194,7 @@ export function ProductSetControl({
           </>
         )}
 
-        <div className="divider" />
+        <div className='divider' />
 
         <TutorialGifCard isOverrides={isOverrides} />
 
@@ -206,7 +206,7 @@ export function ProductSetControl({
         />
       </Col>
       <Col md={6} sm={12}>
-        <div className="second-column">
+        <div className='second-column'>
           {/* <Controller
               control={control}
               name="type"
@@ -229,11 +229,11 @@ export function ProductSetControl({
             /> */}
 
           <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 +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)}
@@ -262,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>
@@ -271,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]}
@@ -290,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>
@@ -299,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(
@@ -307,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')}
@@ -343,7 +343,7 @@ export function ProductSetControl({
             </Form.Label>
             {showSmsTemplateSelector ? (
               <Typeahead
-                name="smsTemplates"
+                name='smsTemplates'
                 options={smsTemplates}
                 isMultipleChoise
                 placeholder={t('Design:choose')}
@@ -363,7 +363,7 @@ export function ProductSetControl({
           <Form.Group>
             <Controller
               control={control}
-              name="fieldSetId"
+              name='fieldSetId'
               render={({ field }) => {
                 const fieldValue = Number(field.value)
 
@@ -373,21 +373,21 @@ export function ProductSetControl({
                     <Form.Control
                       onChange={field.onChange}
                       value={fieldValue}
-                      as="select"
+                      as='select'
                       disabled={isOverrides}
                       isInvalid={HookFormService.isInvalid(
                         'fieldSetId',
                         errors,
                       )}
                     >
-                      <option value="">{t('Design:choose')}</option>
+                      <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">
+                    <Form.Control.Feedback type='invalid'>
                       {HookFormService.getErrors('fieldSetId', errors)}
                     </Form.Control.Feedback>
                   </>
@@ -396,7 +396,7 @@ export function ProductSetControl({
             />
           </Form.Group>
 
-          <Form.Group controlId="thankYouPageUrlId">
+          <Form.Group controlId='thankYouPageUrlId'>
             <Form.Label>{t('thankYouPageUrl')}</Form.Label>
 
             <Form.Control
@@ -413,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>