@licklist/design 0.68.7-dev.1 → 0.69.0

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

@@ -186,16 +186,16 @@ export const EditEventForm = ({
         onApprove={onApproveDialog}
         onDecline={onDeclineDialog}
       />
-      <h5 className='edit-event-modal-title highlited-primary-title'>
+      <h5 className="edit-event-modal-title highlited-primary-title">
         {title}
       </h5>
       <FormProvider {...form}>
         <Modal.Body
-          as='form'
+          as="form"
           noValidate
           onSubmit={handleSubmit(onSaveEvent, onErrorSubmit)}
         >
-          <Form.Group controlId='name'>
+          <Form.Group controlId="name">
             <Form.Label>{t('nameOfEvent')}</Form.Label>
             <Form.Control
               {...register('name', {
@@ -210,12 +210,12 @@ export const EditEventForm = ({
                   }),
                 },
               })}
-              name='name'
+              name="name"
               required
               isInvalid={Boolean(errors.name)}
               disabled={disabled}
             />
-            <Form.Control.Feedback type='invalid'>
+            <Form.Control.Feedback type="invalid">
               {errors.name?.message}
             </Form.Control.Feedback>
           </Form.Group>
@@ -262,7 +262,7 @@ export const EditEventForm = ({
                   disabled={disabled}
                 />
               )}
-              name='description'
+              name="description"
             />
           </Form.Group>
           {/* key is used as a hack to make sure rrule is rendered correctly */}
@@ -277,7 +277,7 @@ export const EditEventForm = ({
             <Form.Group>
               <Accordion>
                 <CollapsibleInputGroup
-                  eventKey='categories'
+                  eventKey="categories"
                   label={t('categories')}
                   description={
                     <CategoriesInputDescription categories={categories} />
@@ -303,7 +303,7 @@ export const EditEventForm = ({
                   disabled={disabled}
                 />
               )}
-              name='termsAndConditions'
+              name="termsAndConditions"
             />
           </Form.Group>
 
@@ -319,25 +319,25 @@ export const EditEventForm = ({
                     return validateURL(url, t('Design:externalPaymentLink'))
                   },
                 })}
-                name='externalPaymentLink'
-                type='url'
-                inputMode='url'
+                name="externalPaymentLink"
+                type="url"
+                inputMode="url"
                 disabled={disabled}
                 isInvalid={Boolean(errors.externalPaymentLink)}
               />
-              <Form.Control.Feedback type='invalid'>
+              <Form.Control.Feedback type="invalid">
                 {errors.externalPaymentLink?.message}
               </Form.Control.Feedback>
             </Form.Group>
           )}
 
-          <Form.Group controlId={visibilityId} className='mt-5'>
+          <Form.Group controlId={visibilityId} className="mt-5">
             <Form.Label>
               {t('public')} / {t('private')}
             </Form.Label>
             <Controller
               control={control}
-              name='visible'
+              name="visible"
               rules={{
                 validate: (value) => {
                   if (typeof value !== 'boolean') {
@@ -355,20 +355,20 @@ export const EditEventForm = ({
                 return (
                   <>
                     <Form.Control
-                      as='select'
+                      as="select"
                       onChange={({ target: { value } }) => {
                         field.onChange(!value ? value : value === 'true')
                       }}
                       isInvalid={invalid}
-                      defaultValue=''
+                      defaultValue=""
                       value={fieldValue}
                       disabled={disabled}
                     >
-                      <option value=''>{t('Design:pleaseChooseOne')}</option>
-                      <option value='false'>{t('Design:private')}</option>
-                      <option value='true'>{t('Design:public')}</option>
+                      <option value="">{t('Design:pleaseChooseOne')}</option>
+                      <option value="false">{t('Design:private')}</option>
+                      <option value="true">{t('Design:public')}</option>
                     </Form.Control>
-                    <Form.Control.Feedback type='invalid'>
+                    <Form.Control.Feedback type="invalid">
                       {error?.message}
                     </Form.Control.Feedback>
                   </>
@@ -387,12 +387,12 @@ export const EditEventForm = ({
                   validate: (url) =>
                     validateURL(url, t('Design:integrationUrl')),
                 })}
-                name='integrationUrl'
+                name="integrationUrl"
                 isInvalid={Boolean(errors.integrationUrl)}
                 placeholder={t('Design:integrationUrl')}
                 disabled={disabled}
               />
-              <Form.Control.Feedback type='invalid'>
+              <Form.Control.Feedback type="invalid">
                 {errors.integrationUrl?.message}
               </Form.Control.Feedback>
             </Form.Group>
@@ -415,8 +415,8 @@ export const EditEventForm = ({
                 isImagesLoading ||
                 isCoverImagesLoading
               }
-              className='save-event'
-              type='submit'
+              className="save-event"
+              type="submit"
             >
               {formState.isSubmitting
                 ? `${t('saveAndAdd')}...`

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

@@ -37,7 +37,7 @@ export const ProductSetShortForm = ({
   const nameId = useId()
 
   return (
-    <Col md={12} sm={12} className='p-0 mt-5'>
+    <Col md={12} sm={12} className="p-0 mt-5">
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(onSubmit)}>
           <Form.Group controlId={nameId}>
@@ -49,7 +49,7 @@ export const ProductSetShortForm = ({
               placeholder={t('Design:placeholderProductSetName')}
               isInvalid={!!errors.name}
             />
-            <Form.Control.Feedback type='invalid'>
+            <Form.Control.Feedback type="invalid">
               {HookFormService.hasError(errors.name, 'required') &&
                 t('Validation:fieldRequired', {
                   attribute: t('Design:name'),
@@ -61,7 +61,7 @@ export const ProductSetShortForm = ({
           {/* <DateAndRecurrenceInput /> */}
 
           {hasPermission && (
-            <Button disabled={formState.isSubmitting} type='submit'>
+            <Button disabled={formState.isSubmitting} type="submit">
               {formState.isSubmitting ? `${t('save')}...` : t('save')}
             </Button>
           )}

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

@@ -42,14 +42,14 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
   }, [saleDeadline])
 
   return (
-    <Form.Group className='sales-deadline'>
+    <Form.Group className="sales-deadline">
       <Form.Label>{t('Design:salesDeadline')}</Form.Label>
-      <Form.Control.Feedback type='invalid'>
+      <Form.Control.Feedback type="invalid">
         {errors.saleDeadline?.message}
       </Form.Control.Feedback>
       <Controller
         control={control}
-        name='saleDeadline'
+        name="saleDeadline"
         render={({
           field: { value, onChange },
           fieldState: { invalid, error },
@@ -111,9 +111,9 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
 
           return (
             <>
-              <Form.Group className='d-flex flex-column flex-grow-1 align-items-start'>
+              <Form.Group className="d-flex flex-column flex-grow-1 align-items-start">
                 <Switch
-                  name='sale-deadline'
+                  name="sale-deadline"
                   options={SALE_DEADLINES_EVENT_START_TYPES.map(({ type }) => ({
                     id: type,
                     value: t(`Design:${type}`),
@@ -123,8 +123,8 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                   disabled={disabled}
                 />
               </Form.Group>
-              <div className='d-flex'>
-                <Form.Group className='d-flex flex-column col-4 pl-0'>
+              <div className="d-flex">
+                <Form.Group className="d-flex flex-column col-4 pl-0">
                   <Form.Label>{t('Design:saleDays')}</Form.Label>
                   <NumberInput
                     value={days}
@@ -135,7 +135,7 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                     disabled={disabled}
                   />
                 </Form.Group>
-                <Form.Group className='d-flex flex-column col-4 pl-0'>
+                <Form.Group className="d-flex flex-column col-4 pl-0">
                   <Form.Label>{t('Design:saleHours')}</Form.Label>
                   <NumberInput
                     value={hours}
@@ -147,7 +147,7 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                     disabled={disabled}
                   />
                 </Form.Group>
-                <Form.Group className='d-flex flex-column col-4 pl-0'>
+                <Form.Group className="d-flex flex-column col-4 pl-0">
                   <Form.Label>{t('Design:saleMinutes')}</Form.Label>
                   <NumberInput
                     value={minutes}
@@ -161,8 +161,8 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                 </Form.Group>
               </div>
               {invalid && (
-                <div className='d-flex w-100'>
-                  <span className='invalid-feedback-message'>
+                <div className="d-flex w-100">
+                  <span className="invalid-feedback-message">
                     {error?.message}
                   </span>
                 </div>

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[]
@@ -44,21 +42,6 @@ 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))
@@ -112,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>
   )