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

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -12,6 +12,8 @@ export const getDefaultValues = (
 ): ProductSetFormValues => ({
   id: productSet?.id ?? 0,
   name: productSet?.name ?? '',
+  description: productSet?.description ?? '',
+  image: productSet?.image,
   type: productSet?.type ?? DEFAULT_PRODUCT_SET_TYPE,
   termsAndConditions: productSet?.termsAndConditions ?? '',
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story<EditRecurrentEventModalProps> = (args) => {
       <button onClick={() => setIsOpen(!isOpen)}>Open Modal</button>
       <EditRecurrentEventModal
         {...(isEditRecurrentEventModal ? {} : args)}
-        title="EditRecurrentEventModal"
+        title='EditRecurrentEventModal'
         isOpen={isOpen}
         onHide={() => setIsOpen(false)}
       />

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.tsx

@@ -56,30 +56,30 @@ export const EditRecurrentEventModal = ({
       onHide={onHide}
       animation={false}
       centered
-      contentClassName="rounded"
+      contentClassName='rounded'
     >
       <Form onSubmit={handleSubmit(onSubmit)} noValidate>
-        <Modal.Header className="border-0">
-          <Modal.Title as="h6">{title}</Modal.Title>
-          <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
+        <Modal.Header className='border-0'>
+          <Modal.Title as='h6'>{title}</Modal.Title>
+          <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
             <FaTimes size={16} />
           </Button>
         </Modal.Header>
-        <Modal.Body className="p-0 ml-4">
-          <Form.Group className="m-0">
+        <Modal.Body className='p-0 ml-4'>
+          <Form.Group className='m-0'>
             <Controller
               render={({ field: { value, onChange } }) => (
                 <>
                   {Object.keys(RECURRENT_MODE_TYPES_LIST).map((option) => (
                     <Form.Check
-                      type="radio"
+                      type='radio'
                       id={option}
                       key={option}
                       custom
-                      className="mt-3"
+                      className='mt-3'
                     >
                       <Form.Check.Input
-                        type="radio"
+                        type='radio'
                         value={option}
                         checked={value === option}
                         onChange={() => onChange(option)}
@@ -91,23 +91,23 @@ export const EditRecurrentEventModal = ({
                 </>
               )}
               control={control}
-              name="mode"
+              name='mode'
             />
           </Form.Group>
         </Modal.Body>
-        <Modal.Footer className="border-0">
+        <Modal.Footer className='border-0'>
           <Button
-            variant="danger"
+            variant='danger'
             onClick={onHide}
-            className="text-decoration-none"
+            className='text-decoration-none'
             disabled={disabled}
           >
             {t('cancel')}
           </Button>
           <Button
-            variant="success"
-            type="submit"
-            className="text-decoration-none"
+            variant='success'
+            type='submit'
+            className='text-decoration-none'
             disabled={disabled}
           >
             {t('ok').toUpperCase()}

package/src/events/event-card/EventCard.stories.tsx

@@ -17,7 +17,7 @@ export const Default: Story<EventCardProps> = () => {
   return (
     <div style={{ maxWidth: '34rem' }}>
       <EventCard
-        name="Glitterbomb Cambridge / Cheryl Hole"
+        name='Glitterbomb Cambridge / Cheryl Hole'
         description={`Category: Essex, They call her <i>Cheryl Hole</i>. Any holes a
           goal with Cheryl Hole and she's coming from the runway of <b>Season 1</b> of
           RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
@@ -31,8 +31,8 @@ export const Default: Story<EventCardProps> = () => {
           goal with Cheryl Hole and she's coming from the runway of Season 1 of
           RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
           the...`}
-        date="2023-08-31T09:35:00.000+03:00"
-        productSetName="New product set"
+        date='2023-08-31T09:35:00.000+03:00'
+        productSetName='New product set'
         imageUrl={showImage ? `https://source.unsplash.com/random` : null}
         hasPermission={hasPermission}
         onPreview={() => undefined}
@@ -68,8 +68,8 @@ export const Default: Story<EventCardProps> = () => {
         onStatistic={() => {
           console.log('onStatistic')
         }}
-        titleId="titleId"
-        descriptionId="descriptionId"
+        titleId='titleId'
+        descriptionId='descriptionId'
       />
     </div>
   )

package/src/events/event-card/EventCard.tsx

@@ -71,16 +71,16 @@ export function EventCard({
   )
 
   return (
-    <Card className="d-flex flex-column event-card h-100">
+    <Card className='d-flex flex-column event-card h-100'>
       <div
         className={clsx('event-card-image-container', !imageUrl && 'no-image')}
       >
-        {imageUrl && <Card.Img variant="top" src={imageUrl} />}
+        {imageUrl && <Card.Img variant='top' src={imageUrl} />}
         <Badge
-          className="event-card-date"
-          as="time"
+          className='event-card-date'
+          as='time'
           dateTime={date}
-          variant="primary"
+          variant='primary'
         >
           {formatDate(new Date(date), {
             weekday: 'short',
@@ -94,7 +94,7 @@ export function EventCard({
       </div>
       <Card.Body>
         <Card.Title id={titleId}>{name}</Card.Title>
-        <div className="flex-grow-1">
+        <div className='flex-grow-1'>
           <TipTapEditor
             viewMode
             disabled
@@ -102,10 +102,10 @@ export function EventCard({
             content={memoedContent}
             id={descriptionId}
           />
-          <div className="mt-2 ml-2">
+          <div className='mt-2 ml-2'>
             {Object.keys(statistics).map((key) => (
-              <div className="event-card-sale" key={key}>
-                <span className="event-card-sale-name">
+              <div className='event-card-sale' key={key}>
+                <span className='event-card-sale-name'>
                   {t(key)}:{' '}
                   {key === 'totalAmount'
                     ? formatNumber(statistics[key], {
@@ -120,11 +120,11 @@ export function EventCard({
 
           {sales &&
             sales.map((sale) => (
-              <div className="event-card-sale" key={sale.id}>
+              <div className='event-card-sale' key={sale.id}>
                 {/* TODO: make it an i18n message instead */}
-                <div className="event-card-sale-text">
-                  <span className="event-card-sale-name">{sale.name}</span>{' '}
-                  <span className="event-card-sale-quantity">
+                <div className='event-card-sale-text'>
+                  <span className='event-card-sale-name'>{sale.name}</span>{' '}
+                  <span className='event-card-sale-quantity'>
                     {[sale.current, sale.max]
                       .map((value) => formatNumber(value))
                       .join(' / ')}
@@ -135,34 +135,34 @@ export function EventCard({
             ))}
         </div>
       </Card.Body>
-      <Card.Footer className="flex-column">
+      <Card.Footer className='flex-column'>
         {productSetName && (
           <OverlayTrigger
             // Workaround for bootstrap error with "hover trigger"
             trigger={['hover', 'hover']}
             overlay={
-              <Popover id="event-product-set-popover">
-                <Popover.Content className="event-product-set-card">
+              <Popover id='event-product-set-popover'>
+                <Popover.Content className='event-product-set-card'>
                   {productSetName}
                 </Popover.Content>
               </Popover>
             }
           >
-            <div className="pl-3 text-truncate">
+            <div className='pl-3 text-truncate'>
               {t('Design:productSet')}: {productSetName}
             </div>
           </OverlayTrigger>
         )}
-        <div className="d-flex w-100 justify-content-between">
-          <div className="d-flex">
+        <div className='d-flex w-100 justify-content-between'>
+          <div className='d-flex'>
             <button
-              type="button"
-              className="event-card-link-button ml-3 mr-4"
+              type='button'
+              className='event-card-link-button ml-3 mr-4'
               onClick={onStatistic}
             >
               <ChartBarIcon />
             </button>
-            <div className="event-card-views">
+            <div className='event-card-views'>
               <FaEye />
 
               <span>{formatNumber(totalViews)}</span>
@@ -170,8 +170,8 @@ export function EventCard({
           </div>
           <div>
             <button
-              type="button"
-              className="event-card-link-button"
+              type='button'
+              className='event-card-link-button'
               onClick={onPreview}
             >
               <FaExternalLinkAlt />
@@ -179,22 +179,22 @@ export function EventCard({
             {hasPermission && (
               <>
                 <button
-                  type="button"
-                  className="event-card-link-button"
+                  type='button'
+                  className='event-card-link-button'
                   onClick={onEdit}
                 >
                   <FaEdit />
                 </button>
                 <button
-                  type="button"
-                  className="event-card-link-button"
+                  type='button'
+                  className='event-card-link-button'
                   onClick={onCopy}
                 >
                   <FaCopy />
                 </button>
                 <button
-                  type="button"
-                  className="event-card-link-button"
+                  type='button'
+                  className='event-card-link-button'
                   onClick={onRemove}
                 >
                   <FaTrashAlt />

package/src/events/event-card/EventCardSkeleton.tsx

@@ -3,30 +3,30 @@ import { Card } from 'react-bootstrap'
 import Skeleton from 'react-loading-skeleton'
 
 export const EventCardSkeleton = memo(() => (
-  <Card className="d-flex flex-column event-card h-100">
-    <div className="event-card-image-container">
-      <Skeleton className="card-img-top" />
+  <Card className='d-flex flex-column event-card h-100'>
+    <div className='event-card-image-container'>
+      <Skeleton className='card-img-top' />
     </div>
     <Card.Body>
-      <Skeleton className="card-title h5" />
-      <div className="flex-grow-1">
-        <div className="editor-without-menu editor-disabled event-description">
+      <Skeleton className='card-title h5' />
+      <div className='flex-grow-1'>
+        <div className='editor-without-menu editor-disabled event-description'>
           <Skeleton />
           <Skeleton />
           <Skeleton />
         </div>
-        <div className="mt-2">
+        <div className='mt-2'>
           <Skeleton />
           <Skeleton />
         </div>
       </div>
     </Card.Body>
     <Card.Footer>
-      <div className="d-flex w-100 justify-content-between">
-        <div className="skeleton-w4">
+      <div className='d-flex w-100 justify-content-between'>
+        <div className='skeleton-w4'>
           <Skeleton />
         </div>
-        <div className="skeleton-w6">
+        <div className='skeleton-w6'>
           <Skeleton />
         </div>
       </div>

package/src/events/event-statistic-modal/EventStatisticModal.stories.tsx

@@ -17,7 +17,7 @@ export const Default: Story<EventStatisticModalProps> = (args) => {
 
   return (
     <div>
-      <button type="button" onClick={() => setIsOpen(!isOpen)}>
+      <button type='button' onClick={() => setIsOpen(!isOpen)}>
         Open Modal
       </button>
       <EventStatisticModal

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -34,14 +34,14 @@ export const EventStatisticModal = ({
       onHide={handleClose}
       animation={false}
       centered
-      contentClassName="rounded"
-      className="event-statistic-modal"
+      contentClassName='rounded'
+      className='event-statistic-modal'
     >
       <Modal.Header>
-        <Modal.Title as="h6">{title ?? t('eventStatistic')}</Modal.Title>
+        <Modal.Title as='h6'>{title ?? t('eventStatistic')}</Modal.Title>
         <Button
-          variant="danger"
-          className="btn-sm rounded"
+          variant='danger'
+          className='btn-sm rounded'
           onClick={handleClose}
         >
           <FaTimes size={16} />
@@ -50,7 +50,7 @@ export const EventStatisticModal = ({
       <Modal.Body>
         {data.length ? (
           <>
-            <h5 className="mb-5">{t('statistics')}</h5>
+            <h5 className='mb-5'>{t('statistics')}</h5>
             <StaticTable
               columns={[
                 { key: 'name', label: '' },
@@ -58,11 +58,11 @@ export const EventStatisticModal = ({
                 { key: 'total', label: '' },
               ]}
               data={data}
-              className="striped-static-table"
+              className='striped-static-table'
             />
           </>
         ) : (
-          <div className="no-statistic">
+          <div className='no-statistic'>
             <h5>{t('noStatisticsForSelectedEvent')}</h5>
           </div>
         )}

package/src/events/event-venue-map/components/Dropdown/Dropdown.tsx

@@ -90,7 +90,7 @@ export const Dropdown = ({
 
   return (
     <div
-      className="canvas-dropdown"
+      className='canvas-dropdown'
       style={styles()}
       ref={dropdownContainerRef}
     >

package/src/events/event-venue-map/components/Dropdown/components/DropdownWrapper/DropdownWrapper.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react'
 
 export const DropdownWrapper: FC = ({ children }) => (
-  <div className="canvas-dropdown-wrapper">
-    <div className="arrow" />
-    <div className="children-container">{children}</div>
+  <div className='canvas-dropdown-wrapper'>
+    <div className='arrow' />
+    <div className='children-container'>{children}</div>
   </div>
 )

package/src/events/event-venue-map/components/Dropdown/components/ProductsControl/ProductsControl.tsx

@@ -14,21 +14,21 @@ export const ProductsControl = ({
   const { t } = useTranslation('Design')
 
   return (
-    <div className="products-control mb-3">
+    <div className='products-control mb-3'>
       {products.map(({ id, name, uuid }) => {
         const onClick = () => {
           onChange(uuid)
         }
 
         return (
-          <div className="product" key={id}>
+          <div className='product' key={id}>
             <div>
-              <p className="m-0">{name}</p>
+              <p className='m-0'>{name}</p>
             </div>
             <div>
               <Button
-                size="sm"
-                className="ml-3 select-product-button"
+                size='sm'
+                className='ml-3 select-product-button'
                 onClick={onClick}
               >
                 {t('add')}

package/src/events/event-venue-map/components/Dropdown/components/SelectControl/SelectControl.tsx

@@ -97,16 +97,16 @@ export const SelectControl = ({ selectedPoint }: SelectControlProps) => {
   }, [activeElementKey, setShowProductSelect])
 
   return (
-    <div className="d-flex flex-column align-items-center">
+    <div className='d-flex flex-column align-items-center'>
       {!showProductSelect && (
         <>
           {selectedProduct && (
-            <p className="product-title m-0">{selectedProduct.name}</p>
+            <p className='product-title m-0'>{selectedProduct.name}</p>
           )}
           <Button
-            size="sm"
+            size='sm'
             onClick={onEditClick}
-            className="mt-3 dropdown-button"
+            className='mt-3 dropdown-button'
           >
             {t(selectedPointProduct ? 'edit' : 'addProduct')}
           </Button>
@@ -117,18 +117,18 @@ export const SelectControl = ({ selectedPoint }: SelectControlProps) => {
       )}
       {selectedPointProduct && !showProductSelect && (
         <Button
-          size="sm"
-          variant="link"
-          className="mt-3 delete-button dropdown-button"
+          size='sm'
+          variant='link'
+          className='mt-3 delete-button dropdown-button'
           onClick={onRemove}
         >
           {t('remove')}
         </Button>
       )}
       <Button
-        variant="link"
-        size="sm"
-        className="mt-3 dropdown-button"
+        variant='link'
+        size='sm'
+        className='mt-3 dropdown-button'
         onClick={onClose}
       >
         {t('close')}

package/src/events/event-venue-map/components/MapPoint/components/DeleteIcon/DeleteIcon.tsx

@@ -41,7 +41,7 @@ export const DeleteIcon = ({ onClick, x, y }: DeleteIconProps) => (
       x={ACTION_ICON_MARGIN}
       y={0}
       data={ICON_DATA}
-      fill="white"
+      fill='white'
       width={ICON_WIDTH}
       height={ICON_HEIGHT}
       scaleX={0.03}

package/src/events/event-venue-map/components/MapPoint/components/EditIcon/EditIcon.tsx

@@ -41,7 +41,7 @@ export const EditIcon = ({ onClick, x, y }: EditIconProps) => (
       x={ACTION_ICON_MARGIN}
       y={ACTION_ICON_MARGIN}
       data={ICON_DATA}
-      fill="white"
+      fill='white'
       width={ICON_WIDTH}
       height={ICON_HEIGHT}
     />

package/src/events/event-venue-map/components/MapPoint/components/PointIcon/PointIcon.tsx

@@ -100,8 +100,8 @@ export const PointIcon = ({
         text={String(pointNumber)}
         strokeWidth={TEXT_STROKE_WIDTH}
         width={ICON_WIDTH - TEXT_STROKE_WIDTH}
-        align="center"
-        verticalAlign="center"
+        align='center'
+        verticalAlign='center'
         {...textColors()}
       />
     </Group>

package/src/events/event-venue-map/components/MapPoint/components/ProductIcon/ProductIcon.tsx

@@ -137,7 +137,7 @@ export const ProductIcon = ({
         {...circleColors()}
       />
       {hovered && isSoldOut && (
-        <ProductTooltip x={defaultX} y={defaultY} text="Sold out" />
+        <ProductTooltip x={defaultX} y={defaultY} text='Sold out' />
       )}
       {isProductChoosed ? (
         <Path

package/src/events/event-venue-map/components/Scrollbars/Scrollbars.tsx

@@ -103,20 +103,20 @@ export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
   }
 
   return (
-    <div className="canvas-scrollbars">
-      <div className="scrollbar-wrapper scrollbar-wrapper-horizontal">
+    <div className='canvas-scrollbars'>
+      <div className='scrollbar-wrapper scrollbar-wrapper-horizontal'>
         {isMobileView && (
           <div
-            className="scroll-element horizontal-scroll"
+            className='scroll-element horizontal-scroll'
             onPointerDown={onDragX}
             style={horizontalScrollbarStyles()}
           />
         )}
       </div>
-      <div className="scrollbar-wrapper scrollbar-wrapper-vertical">
+      <div className='scrollbar-wrapper scrollbar-wrapper-vertical'>
         {isMobileView && (
           <div
-            className="scroll-element vertical-scroll"
+            className='scroll-element vertical-scroll'
             onPointerDown={onDragY}
             style={verticalScrollbarStyles()}
           />

package/src/events/event-venue-map/components/VenueMap/VenueMap.tsx

@@ -126,8 +126,8 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       )
     }
     return (
-      <div className="venue-map" style={{ width, height }}>
-        <div className="zone-name">
+      <div className='venue-map' style={{ width, height }}>
+        <div className='zone-name'>
           <h6>{name}</h6>
         </div>
         <ZoomButtons stageRef={stageRef.current} imageRef={imageRef.current} />
@@ -141,7 +141,7 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
             <Stage
               width={width}
               height={height}
-              className="canvas-map"
+              className='canvas-map'
               onClick={onClick}
               onTap={onClick}
               ref={stageRef}

package/src/events/event-venue-map/components/ZoomButtons/ZoomButtons.tsx

@@ -10,12 +10,12 @@ export const ZoomButtons = ({
   const { onZoomIn, onZoomOut } = useZoom({ stageRef, imageRef })
 
   return (
-    <div className="zoom-buttons">
-      <div className="buttons-wrapper">
-        <div className="icon-wrapper mb-1">
+    <div className='zoom-buttons'>
+      <div className='buttons-wrapper'>
+        <div className='icon-wrapper mb-1'>
           <FaSearch size={16} />
         </div>
-        <Button onClick={onZoomOut} className="mb-1">
+        <Button onClick={onZoomOut} className='mb-1'>
           -
         </Button>
         <Button onClick={onZoomIn}>+</Button>

package/src/file-upload/FilePreview.tsx

@@ -35,7 +35,7 @@ export function FilePreview({
   isLoading = false,
 }: FilePreviewProps) {
   return (
-    <div className="d-flex flex-row flex-wrap justify-content-center">
+    <div className='d-flex flex-row flex-wrap justify-content-center'>
       {!isLoading &&
         files.map((file) => (
           <PreviewItem
@@ -51,10 +51,10 @@ export function FilePreview({
 
 export function PreviewItem({ disabled, item, onRemove }: PreviewItemProps) {
   return (
-    <div className="preview-item" data-testid="preview-image">
+    <div className='preview-item' data-testid='preview-image'>
       <button
-        type="button"
-        className="preview-item__remove-btn"
+        type='button'
+        className='preview-item__remove-btn'
         onClick={(e) => {
           e.preventDefault()
           if (item instanceof File) {
@@ -81,7 +81,7 @@ const renderPendingFilePreview = (item) => {
     return (
       <ImageComponent
         src={item instanceof File ? URL.createObjectURL(item) : item.url}
-        className="preview-item__image"
+        className='preview-item__image'
         fluid
         rounded
       />
@@ -97,7 +97,7 @@ const renderUploadedFilePreview = (item) => {
     return (
       <ImageComponent
         src={item instanceof File ? URL.createObjectURL(item) : item.url}
-        className="preview-item__image"
+        className='preview-item__image'
         fluid
         rounded
       />
@@ -111,7 +111,7 @@ const renderUploadedFilePreview = (item) => {
     return (
       <ImageComponent
         src={item instanceof File ? URL.createObjectURL(item) : item.url}
-        className="preview-item__image"
+        className='preview-item__image'
         fluid
         rounded
       />
@@ -125,7 +125,7 @@ const renderFileTypeIcon = (itemName?: string) => {
   const isPdfFile = itemName?.includes('pdf')
 
   return (
-    <div className="preview-item__file">
+    <div className='preview-item__file'>
       {isPdfFile ? <FaFilePdf size={80} /> : <FaFile size={80} />}
     </div>
   )