@licklist/design 0.69.1-dev.4 → 0.69.1

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

@@ -5,11 +5,9 @@ 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[]
@@ -18,22 +16,16 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   createProductSet: (props: EditEventFormValues) => void
   setEditProductSetId: (value: string) => void
   timeZone: string
-  eventProductSet?: ProductSet
 }
 
 export const SelectEventProductSet = ({
-  productSets: _productSets,
+  productSets,
   createProductSet,
   setEditProductSetId,
   showEditProductSet,
   setShowEditProductSet,
   timeZone,
-  eventProductSet,
 }: SelectEventProductSetProps) => {
-  const productSets = eventProductSet
-    ? [..._productSets, eventProductSet]
-    : _productSets
-
   const { t } = useTranslation(['Design'])
   const form = useFormContext<EditEventFormValues>()
 
@@ -50,17 +42,6 @@ export const SelectEventProductSet = ({
   const productSetId = watch('productSetId')
   const editedProductSet = watch('editedProductSet')
 
-  const typeheadValues = getTypeHeadItemsFromMenus(
-    editedProductSet
-      ? productSets.map((productSet) =>
-          productSet.id === editedProductSet.id ? editedProductSet : productSet,
-        )
-      : productSets,
-  )
-  const selectedProductSetTypeheadValue = productSetId
-    ? typeheadValues?.find((typeheadValue) => typeheadValue.id === productSetId)
-    : undefined
-
   const onEditProductSet = useCallback(
     () => {
       setEditProductSetId(String(productSetId))
@@ -114,88 +95,108 @@ 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={() => (
-              <>
-                <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>
-                    )}
+            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>
                   </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,8 +12,6 @@ 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,
@@ -39,6 +37,7 @@ 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}
     >