@licklist/design 0.69.1 → 0.69.3-dev.0

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,15 @@ 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'
+                        onWheel={(event) => event.currentTarget.blur()}
                         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',

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

@@ -9,15 +9,20 @@ import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { FaEllipsisH, FaEye, FaTrashAlt } from 'react-icons/fa'
 import { ConfirmModal } from '../../modals'
 import { MenuButton } from '../../table/MenuButton'
+import { ProductSetNameControl } from '../form/ProductSetNameControl'
 
 export interface ProductSetCardProps extends HasPermissionProp {
   name: string
   rrule?: string
   href: string
-  onCopy: () => void
+  duplicateProductSetName: string
+  onChangeDuplicateProductSetName: (value: string) => void
+  onCopy: () => Promise<boolean | undefined>
   onRemove: () => void
+  isLoading?: boolean
   className?: string
   override?: number
+  duplicateProductSetError?: string
 }
 
 export function ProductSetCard({
@@ -26,6 +31,10 @@ export function ProductSetCard({
   href,
   onCopy,
   onRemove,
+  onChangeDuplicateProductSetName,
+  duplicateProductSetName,
+  duplicateProductSetError,
+  isLoading,
   className = '',
   hasPermission = true,
   override = 0,
@@ -35,34 +44,38 @@ export function ProductSetCard({
   const productSetCardClasses = `product-set-card ${className}`
   const [isOverlayVisibile, setIsOverlayVisible] = useState(false)
 
+  const onCardClick = () => {
+    RouteService.redirectTo(href)
+  }
   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"
-      onClick={() => RouteService.redirectTo(href)}
-      onKeyUp={() => RouteService.redirectTo(href)}
+      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()})`}
+              {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,28 +87,54 @@ 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'
+                        role='button'
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onCopy) && (
-                          <ConfirmModal>
+                          <ConfirmModal
+                            // confirm function  memoize the callback function and it leads to bugs
+                            confirmationHandler={onCopy}
+                            disabledButtons={isLoading}
+                            content={
+                              <ProductSetNameControl
+                                value={duplicateProductSetName}
+                                onChange={onChangeDuplicateProductSetName}
+                                error={duplicateProductSetError}
+                              />
+                            }
+                          >
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
                                   setIsOverlayVisible(false)
-                                  confirm(onCopy)
+                                  onChangeDuplicateProductSetName(name)
+                                  // confirm function  memoize the callback function and it leads to bugs
+                                  confirm(() => {})
                                 }}
                                 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'
+                        role='button'
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (
@@ -106,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
                               />
                             )}
@@ -120,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)