@licklist/design 0.68.7 → 0.69.1-dev.0

package/src/events/edit-event-modal/component/SelectEventProductSet/SelectEventProductSet.tsx

@@ -5,9 +5,11 @@ import { useId } from '@react-aria/utils'
 import { Controller, useFormContext } from 'react-hook-form'
 import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
 import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
+import { getTypeHeadItemsFromMenus } from '../../../../product-set/utils'
 import { ConfirmModal } from '../../../../modals/confirmation/ConfirmModal'
 import { EditEventFormValues } from '../EditEventForm/EditEventForm'
 import { EditEventProductSet } from './component/EditEventProductSet'
+import { Typeahead } from '../../../../typeahead'
 
 interface SelectEventProductSetProps extends HasPermissionProp {
   productSets?: ProductSet[]
@@ -42,6 +44,21 @@ export const SelectEventProductSet = ({
   const productSetId = watch('productSetId')
   const editedProductSet = watch('editedProductSet')
 
+  const typeheadValues = getTypeHeadItemsFromMenus(
+    editedProductSet
+      ? productSets.map((productSet) => {
+          if (productSet.id === editedProductSet.id) {
+            return editedProductSet
+          }
+
+          return productSet
+        })
+      : productSets,
+  )
+  const selectedProductSetTypeheadValue = productSetId
+    ? typeheadValues?.find((typeheadValue) => typeheadValue.id === productSetId)
+    : undefined
+
   const onEditProductSet = useCallback(
     () => {
       setEditProductSetId(String(productSetId))
@@ -95,108 +112,88 @@ export const SelectEventProductSet = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onSubmit = (value: EditEventFormValues['editedProductSet']) => {
     setShowEditProductSet(false)
+    setValue('productSetId', value.id)
     setValue('editedProductSet', value)
   }
 
   return (
     <>
-      <div className="d-flex mt-5 mb-5 align-items-end">
+      <div className='d-flex mt-5 mb-5 align-items-end'>
         <Form.Group
           controlId={productSetsId}
-          className="d-flex flex-column  w-100 choose-product-set-container "
+          className='d-flex flex-column w-100 choose-product-set-container'
         >
           <Form.Label>{t('Design:selectProductSet')}</Form.Label>
 
           <Controller
             control={control}
-            name="productSetId"
-            render={({ field }) => {
-              const fieldValue = String(field.value)
-              return (
-                <>
-                  <div className="d-flex align-items-center flex-row w-100">
-                    <ConfirmModal>
-                      {(confirm) => (
-                        <Form.Control
-                          as="select"
-                          onChange={(e) =>
-                            onChangeProductSet(Number(e.target.value), confirm)
-                          }
-                          isInvalid={Boolean(errors.productSetId)}
-                          value={fieldValue}
-                        >
-                          <option value="" hidden>
-                            {t('Design:chooseProductSet')}
-                          </option>
-                          {productSets?.map((productSet) => {
-                            const isCurrentEditedProductSet =
-                              editedProductSet &&
-                              editedProductSet?.id === productSet?.id
-                            return (
-                              <option key={productSet.id} value={productSet.id}>
-                                {isCurrentEditedProductSet ||
-                                productSet.isOverride
-                                  ? `[${t('edited')}] ${
-                                      isCurrentEditedProductSet
-                                        ? editedProductSet?.name
-                                        : productSet.name
-                                    }`
-                                  : productSet.name}
-                              </option>
-                            )
-                          })}
-                        </Form.Control>
-                      )}
-                    </ConfirmModal>
-
-                    <div className="buttons-container">
-                      {!showEditProductSet && !editedProductSet && (
-                        <Button
-                          variant=""
-                          className="btn product-set-button mr-4"
-                          onClick={handleCreateProductSet}
-                        >
-                          {t('addNewProductSet')}
-                        </Button>
-                      )}
-                      {showOverrideProductSet && (
-                        <Button
-                          variant=""
-                          className="btn product-set-button "
-                          onClick={onEditProductSet}
-                        >
-                          {isOverrideProductSet
-                            ? t('editOverrides')
-                            : t('editProductSet')}
-                        </Button>
-                      )}
-                      {showEditProductSet && (
-                        <Button
-                          variant=""
-                          className="btn product-set-button"
-                          onClick={revertEditProductSet}
-                        >
-                          {t('cancelAndRevert')}
-                        </Button>
-                      )}
-                      {!showEditProductSet && editedProductSet && (
-                        <Button
-                          variant=""
-                          className="btn product-set-button ml-4 text-danger"
-                          onClick={revertEditProductSet}
-                        >
-                          {t('undoChanges')}
-                        </Button>
-                      )}
-                    </div>
+            name='productSetId'
+            render={() => (
+              <>
+                <div className='d-flex align-items-center flex-row w-100'>
+                  <ConfirmModal>
+                    {(confirm) => (
+                      <Typeahead
+                        name='productSetId'
+                        value={selectedProductSetTypeheadValue}
+                        containerStyles={{ width: '100%' }}
+                        onChangeValue={(typeheadValue) => {
+                          onChangeProductSet(Number(typeheadValue.id), confirm)
+                        }}
+                        options={typeheadValues}
+                        placeholder={t('Design:choose')}
+                        noOptionsMessage={t('Design:noAvailableProductSets')}
+                      />
+                    )}
+                  </ConfirmModal>
+
+                  <div className='buttons-container'>
+                    {!showEditProductSet && !editedProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button mr-4'
+                        onClick={handleCreateProductSet}
+                      >
+                        {t('addNewProductSet')}
+                      </Button>
+                    )}
+                    {showOverrideProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button'
+                        onClick={onEditProductSet}
+                      >
+                        {isOverrideProductSet
+                          ? t('editOverrides')
+                          : t('editProductSet')}
+                      </Button>
+                    )}
+                    {showEditProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button'
+                        onClick={revertEditProductSet}
+                      >
+                        {t('cancelAndRevert')}
+                      </Button>
+                    )}
+                    {!showEditProductSet && editedProductSet && (
+                      <Button
+                        variant=''
+                        className='btn product-set-button ml-4 text-danger'
+                        onClick={revertEditProductSet}
+                      >
+                        {t('undoChanges')}
+                      </Button>
+                    )}
                   </div>
+                </div>
 
-                  <Form.Control.Feedback type="invalid">
-                    {errors?.productSetId?.message}
-                  </Form.Control.Feedback>
-                </>
-              )
-            }}
+                <Form.Control.Feedback type='invalid'>
+                  {errors?.productSetId?.message}
+                </Form.Control.Feedback>
+              </>
+            )}
           />
         </Form.Group>
       </div>

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -102,14 +102,14 @@ export const EditEventProductSet = ({
       providerHasMap={settings?.providerHasMap}
       venueMapSets={venueMapSets}
     >
-      <div className="edit-product-set-warning">
+      <div className='edit-product-set-warning'>
         {t('editProductSetWarning', {
           attribute: productSetData?.name,
         })}
       </div>
-      <div className="product-set-border" />
+      <div className='product-set-border' />
       <FormProvider {...form}>
-        <Form className="mt-6">
+        <Form className='mt-6'>
           <ProductSetControl
             smsTemplates={getFilteredTemplates(
               smsTemplates,
@@ -132,12 +132,12 @@ export const EditEventProductSet = ({
           />
           <Button
             disabled={isLoading}
-            className="save-event mt-4"
+            className='save-event mt-4'
             onClick={handleSubmit(onSubmit)}
           >
             {t('update')}
           </Button>
-          <div className="edit-product-set-warning mt-4">
+          <div className='edit-product-set-warning mt-4'>
             {t('recurrentOverridesWarining')}
           </div>
         </Form>

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,
@@ -37,7 +39,6 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
-                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

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>
 )