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

package/src/modals/fullscreen/FullscreenModal.tsx

@@ -51,28 +51,28 @@ export const FullscreenModal = ({
         show={isOpen}
         onHide={handleClose}
         animation={false}
-        className="fullscreen-modal"
-        contentClassName="fullscreen-modal-content"
+        className='fullscreen-modal'
+        contentClassName='fullscreen-modal-content'
       >
         {showHeader && (
-          <ModalHeader className="align-items-center border-0">
-            {title && <ModalTitle as="h6">{title}</ModalTitle>}
+          <ModalHeader className='align-items-center border-0'>
+            {title && <ModalTitle as='h6'>{title}</ModalTitle>}
 
             <Button
-              variant="danger"
-              className="btn-sm rounded"
+              variant='danger'
+              className='btn-sm rounded'
               onClick={handleClose}
             >
               <FaTimes size={16} />
             </Button>
           </ModalHeader>
         )}
-        <ModalBody className="fullscreen-modal-body">
+        <ModalBody className='fullscreen-modal-body'>
           {!showHeader && (
             <Button
               onClick={handleClose}
-              variant="link"
-              className="body-close-button"
+              variant='link'
+              className='body-close-button'
             >
               {t('close')}
             </Button>
@@ -80,7 +80,7 @@ export const FullscreenModal = ({
           {content}
         </ModalBody>
         {showFooter && (
-          <ModalFooter className="border-0">{footerContent}</ModalFooter>
+          <ModalFooter className='border-0'>{footerContent}</ModalFooter>
         )}
       </Modal>
     </>

package/src/modals/fullscreen/FulscreenModal.stories.tsx

@@ -40,8 +40,8 @@ export const DefaultWithBodyContent: Story<FullscreenModalProps> = (args) => {
       content={
         <>
           <EventVenueMap
-            url="https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s"
-            name="Underground zone"
+            url='https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s'
+            name='Underground zone'
           />
         </>
       }

package/src/notification/components/NotificationPlaceholders.tsx

@@ -17,17 +17,17 @@ export const NotificationPlaceholders = ({
     <>
       <Row>
         <Col xs={12}>
-          <span className="mt-5">{t('Design:placeholdersDesc')}</span>
+          <span className='mt-5'>{t('Design:placeholdersDesc')}</span>
         </Col>
       </Row>
-      <Card className="mb-3 mt-3">
+      <Card className='mb-3 mt-3'>
         <Card.Body>
           <Row>
             <Col xs={12}>
               {placeholders.map((placeholder) => (
-                <div className="placeholder-row mb-3" key={placeholder.value}>
-                  <span className="placeholder-value">{`${placeholder.value} - `}</span>
-                  <span className="placeholder-desc">
+                <div className='placeholder-row mb-3' key={placeholder.value}>
+                  <span className='placeholder-value'>{`${placeholder.value} - `}</span>
+                  <span className='placeholder-desc'>
                     {placeholder.description}
                   </span>
                 </div>

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -33,8 +33,8 @@ export function EmailTemplateCard({
   const texts = useTranslatedParameters({ isDefault, isActive })
 
   return (
-    <div className="snippet-template-card">
-      <div className="snippet-template-card-header">
+    <div className='snippet-template-card'>
+      <div className='snippet-template-card-header'>
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal
@@ -46,8 +46,8 @@ export function EmailTemplateCard({
           >
             {(confirm) => (
               <button
-                type="button"
-                className="snippet-template-card-button"
+                type='button'
+                className='snippet-template-card-button'
                 onClick={(e) => {
                   e.stopPropagation()
                   confirm(onRemove)
@@ -59,18 +59,18 @@ export function EmailTemplateCard({
           </ConfirmModal>
         )}
         <button
-          type="button"
-          className="snippet-template-card-button"
+          type='button'
+          className='snippet-template-card-button'
           onClick={onDuplicate}
         >
           <FaCopy />
         </button>
       </div>
       <div className={`mt-${isDefault ? '3' : '4'}`}>
-        {!!texts.length && <p className="mb-1">{texts}</p>}
-        <div className="d-flex flex-column">
-          <span className="snippet-template-card-subject">{subject}</span>
-          <p className="mb-0">
+        {!!texts.length && <p className='mb-1'>{texts}</p>}
+        <div className='d-flex flex-column'>
+          <span className='snippet-template-card-subject'>{subject}</span>
+          <p className='mb-0'>
             {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
           </p>
         </div>

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -200,29 +200,29 @@ export const EmailTemplateControl = forwardRef(
     return (
       <>
         <Row>
-          <Form.Group as={Col} controlId="type" sm={12}>
+          <Form.Group as={Col} controlId='type' sm={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>
@@ -230,7 +230,7 @@ export const EmailTemplateControl = forwardRef(
         <Row>
           <Form.Group
             as={Col}
-            controlId="formGroupName"
+            controlId='formGroupName'
             xs
             sm={12}
             md={8}
@@ -245,12 +245,12 @@ export const EmailTemplateControl = forwardRef(
                   attribute: t('name'),
                 }) as string,
               })}
-              name="name"
+              name='name'
               required
               isInvalid={Boolean(errors.name)}
               placeholder={t('Design:templateName')}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.name?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -263,7 +263,7 @@ export const EmailTemplateControl = forwardRef(
             md={8}
             lg={10}
             xl={12}
-            controlId="formGroupSubject"
+            controlId='formGroupSubject'
           >
             <Form.Label>{t('subject')}</Form.Label>
             <Form.Control
@@ -273,12 +273,12 @@ export const EmailTemplateControl = forwardRef(
                   attribute: t('subject'),
                 }) as string,
               })}
-              name="subject"
+              name='subject'
               required
               isInvalid={Boolean(errors.subject)}
               placeholder={t('Design:subject')}
             />
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.subject?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -288,25 +288,25 @@ export const EmailTemplateControl = forwardRef(
           <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>
         </Row>
-        <Row className="mb-4">
+        <Row className='mb-4'>
           <Form.Group as={Col}>
             <Form.Label>{t('Design:emailBody')}</Form.Label>
 
-            <div className="alert alert-warning" role="alert">
+            <div className='alert alert-warning' role='alert'>
               Due to the mail services limitations on the length of the email
               body that can be sent or received - maximum length is set to
               65,535 characters.
@@ -320,8 +320,8 @@ export const EmailTemplateControl = forwardRef(
               />
 
               <input
-                type="hidden"
-                name="body"
+                type='hidden'
+                name='body'
                 {...register('body', {
                   maxLength: {
                     value: 65535,
@@ -334,14 +334,14 @@ export const EmailTemplateControl = forwardRef(
               />
             </div>
 
-            <Form.Control.Feedback type="invalid">
+            <Form.Control.Feedback type='invalid'>
               {errors.body?.message}
             </Form.Control.Feedback>
           </Form.Group>
         </Row>
         <Row>
           <FileUpload
-            className="ml-4 mr-4"
+            className='ml-4 mr-4'
             allowedExtensions={['jpg', 'jpeg', 'png', 'txt', 'pdf', 'doc']}
             enablePreview
             allowMultiple
@@ -364,7 +364,7 @@ export const EmailTemplateControl = forwardRef(
                   return (
                     <Form.Check
                       {...register(`templateOptionValues.${option?.id}.value`)}
-                      type="checkbox"
+                      type='checkbox'
                       label={t(`Design:${option.name}`)}
                       id={option.name + option.id}
                       defaultChecked={option.selectedValue === 'true'}
@@ -382,7 +382,7 @@ export const EmailTemplateControl = forwardRef(
                     <>
                       <Form.Check
                         checked={isIncludePDF}
-                        name="IsIncludePDF"
+                        name='IsIncludePDF'
                         onChange={() => {
                           setIsIncludePDF(!isIncludePDF)
                           setValue(
@@ -391,22 +391,22 @@ export const EmailTemplateControl = forwardRef(
                           )
                         }}
                         label={t('Design:includePDF')}
-                        id="formGroupIsIncludePdf"
+                        id='formGroupIsIncludePdf'
                         custom
                       />
                       {isIncludePDF && (
                         <>
-                          <Form.Label className="mt-4">
+                          <Form.Label className='mt-4'>
                             {t('Design:includeFile')}
                           </Form.Label>
                           <Form.Control
-                            as="select"
+                            as='select'
                             {...register(
                               `templateOptionValues.${option.id}.value`,
                             )}
                             defaultValue={option.selectedValue || ''}
                           >
-                            <option value="">{t('Design:choose')}</option>
+                            <option value=''>{t('Design:choose')}</option>
 
                             {fileKeys.map((fileType, index) => (
                               <option
@@ -426,14 +426,14 @@ export const EmailTemplateControl = forwardRef(
                 if (option.type === OPTION_TYPE.days_reminder) {
                   return (
                     <>
-                      <Form.Label className="mt-4">
+                      <Form.Label className='mt-4'>
                         {t(`Design:${option.name}`)}
                       </Form.Label>
                       <Form.Control
                         {...register(
                           `templateOptionValues.${option?.id}.value`,
                         )}
-                        type="number"
+                        type='number'
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}

package/src/notification/email-template/form/EmailTemplateForm.tsx

@@ -103,18 +103,18 @@ export const EmailTemplateForm = ({
         <NotificationPlaceholders placeholders={placeholders} />
         {/* update email template */}
         {hasPermission && !onSubmitSaveAndSend && (
-          <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>
         )}
         {/* create email template */}
         {hasPermission && onSubmitSaveAndSend && (
           <Col as={Row}>
-            <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>
             <Button
-              className="mt-5 ml-5 d-no dne d-md-block"
+              className='mt-5 ml-5 d-no dne d-md-block'
               onClick={form.handleSubmit(onSubmitSaveAndSend)}
             >
               {t('saveAndSendEmail')}

package/src/notification/send-email-template/SendEmailTemplateForm.tsx

@@ -44,8 +44,8 @@ export function SendEmailTemplateForm({
         <Col>
           <Form.Label>{t('User:emailAddress')}</Form.Label>
           <Form.Control
-            type="email"
-            name="email"
+            type='email'
+            name='email'
             isValid={isFieldValid('email')}
             {...register('email', {
               required: t('Validation:fieldRequired', {
@@ -55,10 +55,10 @@ export function SendEmailTemplateForm({
               maxLength: 100,
             })}
             disabled={isLoading}
-            placeholder="test@gmail.com"
+            placeholder='test@gmail.com'
             isInvalid={Boolean(errors?.email)}
           />
-          <Form.Control.Feedback type="invalid">
+          <Form.Control.Feedback type='invalid'>
             {HookFormService.hasError(errors.email, 'required') &&
               t('Validation:fieldRequired', {
                 attribute: t('User:email'),
@@ -76,11 +76,11 @@ export function SendEmailTemplateForm({
         </Col>
         {/* update email template */}
         {!onHide && (
-          <Col className="d-flex align-items-end">
+          <Col className='d-flex align-items-end'>
             {hasPermission && (
               <Button
-                className="d-no dne d-md-block"
-                type="submit"
+                className='d-no dne d-md-block'
+                type='submit'
                 disabled={isLoading}
               >
                 {t('sendTestEmail')}
@@ -91,13 +91,13 @@ export function SendEmailTemplateForm({
       </Row>
       {/* create new email template */}
       {hasPermission && onHide && (
-        <Modal.Footer className="border-0 p-0 mt-5">
-          <Button onClick={onHide} variant="danger">
+        <Modal.Footer className='border-0 p-0 mt-5'>
+          <Button onClick={onHide} variant='danger'>
             {t('Design:cancel')}
           </Button>
           <Button
-            className="d-no dne d-md-block"
-            type="submit"
+            className='d-no dne d-md-block'
+            type='submit'
             disabled={isLoading}
           >
             {t('send')}

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -31,8 +31,8 @@ export function SmsTemplateCard({
   const texts = useTranslatedParameters({ isActive, isDefault })
 
   return (
-    <div className="snippet-template-card">
-      <div className="snippet-template-card-header">
+    <div className='snippet-template-card'>
+      <div className='snippet-template-card-header'>
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal
@@ -44,8 +44,8 @@ export function SmsTemplateCard({
           >
             {(confirm) => (
               <button
-                type="button"
-                className="snippet-template-card-button"
+                type='button'
+                className='snippet-template-card-button'
                 onClick={(e) => {
                   e.stopPropagation()
                   confirm(onRemove)
@@ -57,16 +57,16 @@ export function SmsTemplateCard({
           </ConfirmModal>
         )}
         <button
-          type="button"
-          className="snippet-template-card-button"
+          type='button'
+          className='snippet-template-card-button'
           onClick={onDuplicate}
         >
           <FaCopy />
         </button>
       </div>
-      <div className="mt-2">
-        {!!texts.length && <p className="mb-1">{texts}</p>}
-        <p className="mb-0">
+      <div className='mt-2'>
+        {!!texts.length && <p className='mb-1'>{texts}</p>}
+        <p className='mb-0'>
           {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
         </p>
       </div>

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',