@licklist/design 0.69.0 → 0.69.1-dev.0

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -59,23 +59,23 @@ export function Preview({
   const calendarDates = getMonthCalendarDates(currentDate)
 
   return (
-    <div className="w-100 h-100 snippet-template-preview">
+    <div className='w-100 h-100 snippet-template-preview'>
       <Page
         headerBlock={
-          <div className="d-flex mt-5 pt-5 p-5 iframe-page snippet-template-additional-header">
+          <div className='d-flex mt-5 pt-5 p-5 iframe-page snippet-template-additional-header'>
             <SettingButton
-              view="pageHeaderSteps"
+              view='pageHeaderSteps'
               onClick={handleOnClick}
-              className="m-0"
+              className='m-0'
             >
               <SettingButton
-                view="pageHeader"
+                view='pageHeader'
                 onClick={handleOnClick}
-                className="m-0 snippet-template-button-left"
-                containerClassName="mr-5 asd"
+                className='m-0 snippet-template-button-left'
+                containerClassName='mr-5 asd'
               />
-              <div className="header-block mt-5 pt-5">
-                <div className="mt-5 pt-5 external-header">
+              <div className='header-block mt-5 pt-5'>
+                <div className='mt-5 pt-5 external-header'>
                   <PageHeader showCloseButton showBackButton>
                     <Timer timer={600} />
                     <MemoryRouter initialEntries={['/step1', '/step2']}>
@@ -93,54 +93,54 @@ export function Preview({
           </div>
         }
       >
-        <div className="page-body pb-5 mb-5 pt-3 mt-3">
+        <div className='page-body pb-5 mb-5 pt-3 mt-3'>
           <SettingButton
-            view="page"
+            view='page'
             onClick={handleOnClick}
-            className="snippet-template-body-button"
+            className='snippet-template-body-button'
           />
         </div>
         <PageBody
-          className="snippet-template"
+          className='snippet-template'
           leftBlock={
             <SettingButton
-              view="pageBodyLeftBlock"
+              view='pageBodyLeftBlock'
               onClick={handleOnClick}
-              className="mr-4"
+              className='mr-4'
             >
-              <PageBody.LeftBlock title="About this event">
+              <PageBody.LeftBlock title='About this event'>
                 <SettingButton
-                  view="elements"
+                  view='elements'
                   onClick={handleOnClick}
-                  className="mt-5 m-0"
-                  containerClassName="mt-5 pt-5"
+                  className='mt-5 m-0'
+                  containerClassName='mt-5 pt-5'
                 >
-                  <div className="mt-3">
+                  <div className='mt-3'>
                     <h3>{t('elements')}</h3>
                   </div>
-                  <div className="mt-5">
+                  <div className='mt-5'>
                     <h4>{t('Texts')}</h4>
                     <p>XXXX</p>
                   </div>
 
-                  <div className="mt-5">
+                  <div className='mt-5'>
                     <h4>{t('form')}</h4>
-                    <div className="d-flex flex-column w-100">
-                      <div className="w-100">
-                        <div className="form-row">
-                          <div className="form-group col-12">
-                            <label className="form-label">
+                    <div className='d-flex flex-column w-100'>
+                      <div className='w-100'>
+                        <div className='form-row'>
+                          <div className='form-group col-12'>
+                            <label className='form-label'>
                               {t('firstName')}
                             </label>
                             <input
-                              type="text"
-                              className="form-control"
+                              type='text'
+                              className='form-control'
                               placeholder={t('firstName')}
                             />
                           </div>
                         </div>
-                        <div className="form-row">
-                          <button type="button" className="btn btn-link">
+                        <div className='form-row'>
+                          <button type='button' className='btn btn-link'>
                             {t('iHaveAccount')}
                           </button>
                         </div>
@@ -148,9 +148,9 @@ export function Preview({
                     </div>
                   </div>
 
-                  <div className="mt-5">
+                  <div className='mt-5'>
                     <h4>{t('Number input')}</h4>
-                    <div className="d-flex flex-column w-100">
+                    <div className='d-flex flex-column w-100'>
                       <NumberInput
                         value={value}
                         onChange={(nextValue) => setValue(nextValue)}
@@ -162,17 +162,17 @@ export function Preview({
                     </div>
                   </div>
 
-                  <div className="mt-5">
+                  <div className='mt-5'>
                     <h4>{t('Dropdown')}</h4>
-                    <div className="d-flex flex-column w-100">
-                      <div className="w-100">
-                        <div className="form-row">
-                          <div className="form-group col-12">
-                            <label className="form-label">
+                    <div className='d-flex flex-column w-100'>
+                      <div className='w-100'>
+                        <div className='form-row'>
+                          <div className='form-group col-12'>
+                            <label className='form-label'>
                               {t('dayOfBirthShort')}
                             </label>
                             <select
-                              className="form-control"
+                              className='form-control'
                               placeholder={t('firstName')}
                             >
                               <option>2022</option>
@@ -184,23 +184,23 @@ export function Preview({
                     </div>
                   </div>
 
-                  <div className="mt-5 snippet-template__form">
+                  <div className='mt-5 snippet-template__form'>
                     <h4>{t('Button')}</h4>
-                    <div className="d-flex flex-column w-100">
-                      <Button size="sm">Submit</Button>
+                    <div className='d-flex flex-column w-100'>
+                      <Button size='sm'>Submit</Button>
                     </div>
                   </div>
                 </SettingButton>
 
                 {providerHasMap && type === SNIPPET_TYPE_VENUE_MAP && (
                   <>
-                    <div className="pt-4">
+                    <div className='pt-4'>
                       <h4>{t('Calendar')}</h4>
                       <SettingButton
-                        view="calendar"
+                        view='calendar'
                         onClick={handleOnClick}
-                        className="mt-3 m-0"
-                        containerClassName="mt-5 pt-5"
+                        className='mt-3 m-0'
+                        containerClassName='mt-5 pt-5'
                       >
                         <Calendar
                           currentDate={currentDate}
@@ -218,15 +218,15 @@ export function Preview({
                         />
                       </SettingButton>
                     </div>
-                    <div className="pt-4">
+                    <div className='pt-4'>
                       <SettingButton
-                        view="productSet"
+                        view='productSet'
                         onClick={handleOnClick}
-                        className="mt-3 m-0"
-                        containerClassName="mt-5 pt-5"
+                        className='mt-3 m-0'
+                        containerClassName='mt-5 pt-5'
                       >
                         <h4>{t('Product Sets')}</h4>
-                        <div className="pt-5 mt-5">
+                        <div className='pt-5 mt-5'>
                           <EventProductSets
                             productSets={[
                               {
@@ -248,19 +248,19 @@ export function Preview({
                         </div>
                       </SettingButton>
                     </div>
-                    <div className="pt-4">
-                      <form className="category-steps-form pt-4 mt-4">
+                    <div className='pt-4'>
+                      <form className='category-steps-form pt-4 mt-4'>
                         <h4>{t('Venue Map')}</h4>
-                        <div className="position-relative pt-4 mt-4">
+                        <div className='position-relative pt-4 mt-4'>
                           <SettingButton
-                            view="venueMap"
+                            view='venueMap'
                             onClick={handleOnClick}
-                            className="mt-n6 m-0"
-                            containerClassName="mt-5 pt-5"
+                            className='mt-n6 m-0'
+                            containerClassName='mt-5 pt-5'
                           >
                             <IframeEventVenueMap
                               // eslint-disable-next-line max-len
-                              url="https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s"
+                              url='https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s'
                               usedInIframe
                               pointProducts={[
                                 {
@@ -307,6 +307,7 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
+                                  zoneId: null,
                                   name: 'Cofee',
                                   description: '',
                                   price: 15,
@@ -315,6 +316,8 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
+                                  capacity: 0,
+                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -333,6 +336,7 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
+                                  zoneId: null,
                                   name: 'Cofee 2',
                                   description: '',
                                   price: 15,
@@ -341,6 +345,8 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
+                                  capacity: 0,
+                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -368,21 +374,21 @@ export function Preview({
           rightBlock={
             <PageBody.RightBlock bottomBlock={<BookingSummaryFooter />}>
               <SettingButton
-                view="pageBodyRightBlock"
+                view='pageBodyRightBlock'
                 onClick={handleOnClick}
-                containerClassName="snippet-template-button-fixed-height"
-                className="m-0"
+                containerClassName='snippet-template-button-fixed-height'
+                className='m-0'
               />
 
               <BookingSummary.Accordion showTitleOnlyOnMobile>
                 <IframeEventCard
                   imageSrc={DEFAULT_IMAGE}
-                  title="XXXX"
-                  type="Party Doors 22:00 - 03:00"
+                  title='XXXX'
+                  type='Party Doors 22:00 - 03:00'
                   cost={6}
-                  date="Sat 2nd May"
+                  date='Sat 2nd May'
                   goToDetails={() => null}
-                  shortDate="07/03/2023"
+                  shortDate='07/03/2023'
                 />
               </BookingSummary.Accordion>
             </PageBody.RightBlock>

package/src/snippet/snippet-template/settings/SettingButton.tsx

@@ -21,8 +21,8 @@ export const SettingButton = ({
     {children}
 
     <Button
-      type="button"
-      variant="primary"
+      type='button'
+      variant='primary'
       className={clsx('snippet-template__setting d-inline', className)}
       onClick={() => onClick(view as keyof typeof snippetTemplateViews)}
     >

package/src/sortable-fields/SortableFieldItem.tsx

@@ -38,7 +38,7 @@ export function SortableFieldItem({ children, id }: PropsWithChildren<Props>) {
 
   return (
     <SortableItemContext.Provider value={context}>
-      <div ref={setNodeRef} className="sortable-field-list" style={style}>
+      <div ref={setNodeRef} className='sortable-field-list' style={style}>
         {children}
       </div>
     </SortableItemContext.Provider>
@@ -50,7 +50,7 @@ export function DragHandle() {
 
   return (
     <div {...listeners} ref={ref}>
-      <div className="icon-container">
+      <div className='icon-container'>
         <div />
         <div />
         <div />

package/src/sortable-list/CreateSortableListItem.tsx

@@ -11,12 +11,12 @@ export function CreateSortableListItem({
 }: CreateSortableListItemProps) {
   return (
     <button
-      className="rounded sortable-list-item-wrapper mb-5 mt-2"
+      className='rounded sortable-list-item-wrapper mb-5 mt-2'
       onClick={onClick}
-      type="button"
+      type='button'
     >
       <span>{title}</span>
-      <FaPlus size={32} className="rounded sortable-list-item-icon p-2" />
+      <FaPlus size={32} className='rounded sortable-list-item-icon p-2' />
     </button>
   )
 }

package/src/sortable-tree/SortableTreeItem.stories.tsx

@@ -29,9 +29,9 @@ Default.args = {
   title: 'Step 1',
   subTitle: 'price: $20, quantity: 100',
   body: (
-    <Form.Group controlId="name">
+    <Form.Group controlId='name'>
       <Form.Label>Step name</Form.Label>
-      <Form.Control value="Step 1" />
+      <Form.Control value='Step 1' />
     </Form.Group>
   ),
 }

package/src/sortable-tree/SortableTreeItem.tsx

@@ -33,6 +33,7 @@ export interface SortableTreeItemProps {
   body: ReactNode
   children?: ReactNode
   preItem?: ReactNode
+  itemButton?: ReactNode
   postItem?: ReactNode
   sortableItems?: string[]
   isExpanded?: boolean
@@ -82,6 +83,7 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
+  itemButton,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded)
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded)
@@ -172,7 +174,7 @@ export function SortableTreeItem({
 
   return (
     <div
-      className="sortable-tree-root"
+      className='sortable-tree-root'
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
@@ -182,7 +184,7 @@ export function SortableTreeItem({
       ref={setNodeRef}
     >
       <div
-        className="sortable-tree-wrapper"
+        className='sortable-tree-wrapper'
         ref={setDragNodeRef}
         {...dragAttributes}
         {...dragListeners}
@@ -197,7 +199,7 @@ export function SortableTreeItem({
             e.stopPropagation()
           }
         }}
-        role="button"
+        role='button'
         tabIndex={0}
         style={
           modalClass === ProductSetModalClasses.step
@@ -209,17 +211,17 @@ export function SortableTreeItem({
         }
       >
         {shouldExpand && (
-          <div className="sortable-tree-line">
+          <div className='sortable-tree-line'>
             <Button
-              variant="link"
-              size="sm"
+              variant='link'
+              size='sm'
               onMouseDown={onButtonMouseDown}
               onMouseUp={onHandleExpand}
             >
               {expanded ? (
                 <FaMinus size={10} />
               ) : (
-                <div className="expand-icon-container">
+                <div className='expand-icon-container'>
                   <div />
                   <div />
                   <div />
@@ -229,13 +231,13 @@ export function SortableTreeItem({
 
             {expanded && (
               <svg
-                className="sortable-tree-line-icon"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                width="100%"
-                height="100%"
-                viewBox="0 0 100 100"
-                preserveAspectRatio="none"
+                className='sortable-tree-line-icon'
+                version='1.1'
+                xmlns='http://www.w3.org/2000/svg'
+                width='100%'
+                height='100%'
+                viewBox='0 0 100 100'
+                preserveAspectRatio='none'
               >
                 <g>
                   <path
@@ -244,7 +246,7 @@ export function SortableTreeItem({
                       treeLineIconColor && 'sortable-tree-line-product-element',
                     )}
                     style={{ stroke: treeLineIconColor }}
-                    d="M 50 0 V 100"
+                    d='M 50 0 V 100'
                   />
                 </g>
               </svg>
@@ -252,15 +254,15 @@ export function SortableTreeItem({
           </div>
         )}
 
-        <div className="sortable-tree-item-wrapper">
+        <div className='sortable-tree-item-wrapper'>
           <div
             className={clsx('sortable-tree-item', isInvalid ? 'invalid' : '')}
           >
-            <div className="sortable-tree-item-header">
+            <div className='sortable-tree-item-header'>
               {isIconInHeader && (
                 <Button
-                  variant="link"
-                  className="sortable-tree-item-handle"
+                  variant='link'
+                  className='sortable-tree-item-handle'
                   {...attributes}
                   {...listeners}
                 >
@@ -268,13 +270,13 @@ export function SortableTreeItem({
                 </Button>
               )}
               <Button
-                className="sortable-tree-item-toggle"
-                variant="link"
+                className='sortable-tree-item-toggle'
+                variant='link'
                 onMouseDown={onButtonMouseDown}
                 onMouseUp={onHandleExpand}
               >
                 {badge && (
-                  <span className="sortable-tree-item-badge">{badge}</span>
+                  <span className='sortable-tree-item-badge'>{badge}</span>
                 )}
                 <div
                   className={clsx(
@@ -287,24 +289,28 @@ export function SortableTreeItem({
                     className={clsx(
                       'sortable-tree-item-title',
                       modalLabel && 'sortable-tree-product-set-element-title',
+                      'd-flex justify-content-between',
                     )}
                   >
                     {title}
+                    <div className='sortable-tree-item-subtitle'>
+                      {itemButton}
+                    </div>
                   </span>
                   {!expanded && (
-                    <span className="sortable-tree-item-subtitle">
+                    <span className='sortable-tree-item-subtitle'>
                       {subTitle}
                     </span>
                   )}
                 </div>
                 <div
-                  className="border-0 open-edit-right-modal-button"
-                  role="button"
+                  className='border-0 open-edit-right-modal-button'
+                  role='button'
                   tabIndex={0}
                   onClick={(e) => onEdit(e)}
                   onKeyDown={(e) => e.stopPropagation()}
                 >
-                  <FaEllipsisH color="#0E8CE2" size={16} />
+                  <FaEllipsisH color='#0E8CE2' size={16} />
                 </div>
               </Button>
             </div>
@@ -312,25 +318,25 @@ export function SortableTreeItem({
             {isIconInHeader ? (
               <Collapse in={expanded}>
                 <div>
-                  <div className="sortable-tree-item-body">{body}</div>
+                  <div className='sortable-tree-item-body'>{body}</div>
                 </div>
               </Collapse>
             ) : (
               <Modal
-                size="lg"
+                size='lg'
                 show={isModalVisible}
                 // unique class
                 className={clsx(
                   'm-0 edit-product-set-element-modal edit-right-form-modal h-100',
                   modalClass,
                 )}
-                dialogClassName="edit-event-dialog edit-step-dialog"
+                dialogClassName='edit-event-dialog edit-step-dialog'
                 onHide={onHide}
               >
-                <div className="edit-step-modal-header">
+                <div className='edit-step-modal-header'>
                   <button
-                    className="p-0 cancel-add-step-btn border-0"
-                    type="button"
+                    className='p-0 cancel-add-step-btn border-0'
+                    type='button'
                     onClick={onCancel}
                   >
                     <span>{t('Design:cancel')}</span>
@@ -344,22 +350,22 @@ export function SortableTreeItem({
                     </div>
                   )}
                 </div>
-                <Modal.Body as="form" noValidate>
-                  <div className="top-label-container">
+                <Modal.Body as='form' noValidate>
+                  <div className='top-label-container'>
                     <span>{modalLabel}</span>
                   </div>
                   {body}
 
-                  <div className="d-flex product-set-element-control-btns justify-content-between">
+                  <div className='d-flex product-set-element-control-btns justify-content-between'>
                     <Button
-                      className="step-save-btn mt-4"
-                      type="button"
+                      className='step-save-btn mt-4'
+                      type='button'
                       onClick={onHide}
                     >
                       {t('saveAndAdd')}
                     </Button>
                     {isVisibleDeleteButton && (
-                      <div className="d-flex justify-content-end mt-4 delete-btn">
+                      <div className='d-flex justify-content-end mt-4 delete-btn'>
                         <ConfirmModal>
                           {(confirm) => (
                             <DeleteFieldButton
@@ -376,7 +382,7 @@ export function SortableTreeItem({
           </div>
 
           {sortableItems && (
-            <div className="sortable-tree-subitems">
+            <div className='sortable-tree-subitems'>
               {preItem}
 
               <DndContext>
@@ -385,7 +391,7 @@ export function SortableTreeItem({
                   strategy={verticalListSortingStrategy}
                 >
                   <Collapse in={expanded}>
-                    <div className="ml-0">{children}</div>
+                    <div className='ml-0'>{children}</div>
                   </Collapse>
                 </SortableContext>
               </DndContext>

package/src/sorting-select/SortingSelect.tsx

@@ -59,13 +59,13 @@ export const SortingSelect = ({
   }, [sortKey, sortDirection])
 
   return (
-    <Form.Group className="d-flex align-items-center p-0" {...formGroupProps}>
-      <Form.Label className="text-nowrap mr-4 mb-0">
+    <Form.Group className='d-flex align-items-center p-0' {...formGroupProps}>
+      <Form.Label className='text-nowrap mr-4 mb-0'>
         {t('App:sortBy')}:
       </Form.Label>
       <Form.Control
-        as="select"
-        data-testid="sorting-select"
+        as='select'
+        data-testid='sorting-select'
         onChange={onSortingValueChange}
         custom
         value={controlValue}

package/src/static/CountryCodeSelect.tsx

@@ -40,14 +40,14 @@ function CountryCodeSelect({
         {...register(fieldName, {
           required: errorMessage,
         })}
-        as="select"
+        as='select'
         className={className}
         custom
         disabled={disabled}
-        defaultValue=""
+        defaultValue=''
         isInvalid={Boolean(error)}
       >
-        <option key="" value="" disabled>
+        <option key='' value='' disabled>
           {t('chooseCountry')}
         </option>
         {sortedCountries.map((key: keyof typeof en) => (
@@ -56,7 +56,7 @@ function CountryCodeSelect({
           </option>
         ))}
       </Form.Control>
-      <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
+      <Form.Control.Feedback type='invalid'>{error}</Form.Control.Feedback>
     </>
   )
 }