@licklist/design 0.71.18-dev.1 → 0.71.18-dev.11

package/src/product-set/product/ProductControl.tsx

@@ -39,6 +39,8 @@ import {
   IMAGE_TYPE_IMAGE,
 } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { FaClipboard } from 'react-icons/fa'
+import { Typeahead } from 'src/typeahead'
+import { convertToTypeaheadOptions } from 'src/sales/coupon/utils'
 import { checkIfZoneCategory } from '@licklist/plugins'
 import { FileUpload } from '../../file-upload'
 import { BooleanSwitch } from '../../static'
@@ -65,6 +67,14 @@ import { ProductZoneControlValues } from '../product-zone'
 import { AdvancedOptions } from './advanced-options'
 import { ProductZonesControl } from '../form/ProductZonesControl'
 
+
+export interface ModifiersSet {
+  id: number
+  value?: string
+  name?: string
+  label?: string
+}
+
 // TO DO refactor this file
 // and add correct types
 export interface ProductControlValues
@@ -88,6 +98,8 @@ export interface ProductControlValues
   hasSpecialNotes: boolean
   minSpend?: number | null
   type?: ProductType
+  modifiersSetsId?: Array<ModifiersSet>
+  modifiersSet?: Array<ModifiersSet>
   weight?: number
   tierId?: number
   images: Image[] | null
@@ -111,6 +123,7 @@ export interface ProductControlProps<T>
   hasTicket?: boolean
   categoryType?: CategoryType
   isOverrides?: boolean
+
 }
 
 export function ProductControl<T extends FormValues>({
@@ -126,6 +139,7 @@ export function ProductControl<T extends FormValues>({
   categoryType,
   isOverrides = false,
 }: ProductControlProps<T>) {
+
   const {
     register,
     control,
@@ -135,14 +149,16 @@ export function ProductControl<T extends FormValues>({
     watch,
   } = useFormContext<T>()
 
-  const { setLoading } = useContext(ProductSetLoadingContext)
+  const { setLoading, modifiersSetList } = useContext(ProductSetLoadingContext)
   const { t } = useTranslation(['Design', 'Validation', 'ProductSet'])
   const [expanded, setExpanded] = useState(false)
+
   const [initialImages, setInitialImages] = useState<Image[] | null>(null)
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
   const isUnlimited = Boolean(
     watch(`${fieldNamePrefix}.isUnlimited` as Path<T>),
   )
+
   const advancedId = useId()
   const nameId = useId()
 
@@ -200,6 +216,7 @@ export function ProductControl<T extends FormValues>({
     setInitialImages(formImages as Image[])
   }, [getValues, setInitialImages, fieldNamePrefix])
 
+
   useEffect(() => {
     if (Array.isArray(images)) {
       setValue(
@@ -212,6 +229,9 @@ export function ProductControl<T extends FormValues>({
 
   const quantitySelector = quantityValue ?? '1'
   const quantity = QUANTITY_TYPE_LIST_DTO[quantitySelector as string]
+
+  const modifierList = convertToTypeaheadOptions(modifiersSetList)
+
   return (
     <>
       <Row>
@@ -354,6 +374,22 @@ export function ProductControl<T extends FormValues>({
           </Form.Group>
         </Col>
       </Row>
+      <Row>
+        <Col>
+          <Form.Group className='mb-3'>
+            <Form.Label>{t('Design:addModifierSet')}</Form.Label>
+            <Typeahead
+              name='modifierList'
+              options={modifierList}
+              {...register(`${fieldNamePrefix}.modifiersSet` as Path<T>)}
+              isMultipleChoise
+              isCouponForm
+              placeholder={t('Design:choose')}
+              noOptionsMessage={t('Design:noSelectedModifier')}
+            />
+          </Form.Group>
+        </Col>
+      </Row>
 
       <Row className='my-4 mx-0 d-flex flex-column'>
         {isZoneCategory && (

package/src/product-set/utils/index.ts

@@ -1,5 +1,7 @@
 import { EmailTemplate } from '@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper'
 import { SmsTemplate } from '@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper'
+import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
+import { convertToTypeaheadOptions } from 'src/sales/coupon/utils'
 import { TFunction } from 'react-i18next'
 import { UseFormSetError } from 'react-hook-form'
 import { checkIfZoneCategory } from '@licklist/plugins'
@@ -7,6 +9,7 @@ import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDat
 import { TemplateItem } from '../control/ProductSetControl'
 import { ProductSetFormValues } from '../form/ProductSetForm'
 
+
 interface CheckAvailableTimesErrors {
   values: ProductSetFormValues
   setError: UseFormSetError<ProductSetFormValues>
@@ -58,6 +61,22 @@ export const getFilteredTemplates = (
     }))
 }
 
+export  const updateModifiersSetAtProductSetForm = (data: ProductSetFormValues) => ({
+  ...data,
+  steps: data.steps.map(step => ({
+      ...step,
+      productCategories: step.productCategories.map(category => ({
+          ...category,
+          products: category.products.map(product => ({
+              ...product,
+              modifiersSet: product?.modifiersSet
+                  ? convertToTypeaheadOptions(product.modifiersSet as ModifierSet[])
+                  : [],
+          })),
+      })),
+  })),
+});
+
 export const checkAvailableTimesErrors = ({
   values,
   setError,

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -52,13 +52,13 @@ export const ReportRunnerModal = ({
   generate,
   download,
   onEdit,
-  providerId
+  providerId,
 }: ReportRunnerModalProps) => {
   const { t } = useTranslation(['App', 'Design'])
   const report = reports?.find((report) => report.id === reportId)
 
   const { data: reportFields = [], isLoading: isLoadingReportFields } =
-    useShowReportFields(report?.type, )
+    useShowReportFields(report?.type)
 
   const {
     handleSubmit,

package/src/sales/coupon/utils/index.ts

@@ -1,13 +1,15 @@
+
+import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
 import { ProductGroup } from '@licklist/core/dist/DataMapper/Product/ProductGroupDataMapper'
 
-export const convertToTypeaheadOptions = (productGroups?: ProductGroup[]) => {
+export const convertToTypeaheadOptions = (productGroups?: ProductGroup[] | ModifierSet[]) => {
   if (!productGroups || !productGroups.length) {
     return []
   }
 
-  return productGroups.map(({ id, name }: ProductGroup) => ({
+  return productGroups.map(({ id, name }: ProductGroup | ModifierSet ) => ({
     id: Number(id),
     value: name,
-    label: name,
+    label: name ,
   }))
 }

package/src/sales/modals/refund-modal/RefundModal.tsx

@@ -9,9 +9,18 @@ import { FaTimes } from 'react-icons/fa'
 import { EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS } from '../../constants'
 import { CurrencyNumberInput } from '../../../static/CurrencyNumberInput'
 
+export const FULL_REFUND_TYPE = 'fullRefund'
+export const PARTIAL_REFUND_TYPE = 'partialRefund'
+export const NET_REFUND_TYPE = 'netRefund'
+
+export type RefundType =
+  | typeof FULL_REFUND_TYPE
+  | typeof PARTIAL_REFUND_TYPE
+  | typeof NET_REFUND_TYPE
+
 export interface RefundModalProps {
   isVisible: boolean
-  isFullRefund?: boolean
+  refundType?: RefundType
   onHide: () => void
   onSubmit: (amount?: number) => void
   isLoading?: boolean
@@ -29,12 +38,14 @@ export const RefundModal = ({
   onHide,
   onSubmit,
   isLoading = false,
-  isFullRefund = false,
+  refundType = PARTIAL_REFUND_TYPE,
   paymentType,
   defaultValue = 0,
   maxValue,
 }: RefundModalProps) => {
   const { t } = useTranslation(['Design', 'Validation'])
+  const isInputDisabled =
+    isLoading || refundType === 'fullRefund' || refundType === 'netRefund'
 
   const {
     handleSubmit,
@@ -64,9 +75,7 @@ export const RefundModal = ({
     >
       <Form onSubmit={handleSubmit(onModalSubmit)}>
         <ModalHeader className='align-items-center border-0'>
-          <ModalTitle as='h5'>
-            {t(isFullRefund ? 'Design:fullRefund' : 'Design:partialRefund')}
-          </ModalTitle>
+          <ModalTitle as='h5'>{t(`Design:${refundType}`)}</ModalTitle>
 
           <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
             <FaTimes size={20} />
@@ -111,7 +120,7 @@ export const RefundModal = ({
                     },
                   })}
                   step={0.01}
-                  disabled={isLoading || isFullRefund}
+                  disabled={isInputDisabled}
                   isInvalid={!!errors.amount}
                   min={0}
                 />

package/src/sales/modals/refund-modal/index.ts

@@ -1,2 +1,7 @@
-export { RefundModal } from './RefundModal'
-export type { RefundModalProps } from './RefundModal'
+export {
+  RefundModal,
+  FULL_REFUND_TYPE,
+  NET_REFUND_TYPE,
+  PARTIAL_REFUND_TYPE,
+} from './RefundModal'
+export type { RefundModalProps, RefundType } from './RefundModal'

package/src/styles/date-time-button/DateTimeButton.scss

@@ -33,7 +33,7 @@
 
   &.disabled {
     border: 2px solid $snippet-calendar-disabled-button-border-color;
-    background-color:transparent;
+    background-color: transparent;
     border: none;
     color: $snippet-calendar-disabled-button-font-color;
     cursor: not-allowed;
@@ -105,3 +105,10 @@
   font-weight: 300;
   color: $snippet-calendar-button-font-color;
 }
+
+.modifier-price {
+  font-size: 1rem;
+  line-height: 1.03rem;
+  font-weight: 500;
+  color: $snippet-calendar-button-font-color;
+}

package/src/styles/events/EditEventModal.scss

@@ -37,6 +37,8 @@
   .edit-step-dialog {
     .custom-checkbox {
       align-items: unset;
+      position: relative;
+      z-index: 0;
       .form-check-label {
         margin-top: 1rem;
       }

package/src/styles/iframe-page/Page.scss

@@ -24,6 +24,22 @@
     min-width: auto;
   }
 
+  .manual-booking-form-modal {
+    width: 40vw !important;
+    left: 60vh;
+  
+    .modal-content {
+      height: 96vh;
+      margin-left: auto;
+    }
+  
+    @include media-breakpoint-down(sm) {
+      width: 100vw !important;
+      left: 0;
+      top: 10% !important;
+    }
+  }
+
   .header-block {
     margin-bottom: 1rem;
   }

package/src/styles/iframe-page/PageBody.scss

@@ -10,6 +10,8 @@
     height: calc(100svh - 5.5rem);
   }
 
+
+
   .left-block {
     flex: 1;
     align-items: stretch;
@@ -25,6 +27,8 @@
       min-height: calc(100svh - 6.5rem);
     }
 
+
+
     .navigation {
       font-size: 1.125rem;
       font-weight: 500;

package/src/styles/modals/Modals.scss

@@ -6,6 +6,22 @@
   z-index: 1080;
 }
 
+.manual-booking-form-modal {
+  width: 40vw !important;
+  left: 66vw;
+
+  .modal-content {
+    min-height: 95vh;
+    margin-left: auto;
+  }
+
+  @include media-breakpoint-down(sm) {
+    width: 100vw !important;
+    left: 0;
+    top: 10% !important;
+  }
+}
+
 .confirm-modal {
   z-index: 1081;
 }

package/src/styles/product-set/EditProductSetElement.scss

@@ -90,6 +90,7 @@
     }
     label.btn-link {
       width: 4.5rem;
+      z-index: 0;
       display: flex;
       justify-content: center;
       span {

package/src/styles/product-set/ProductSetForm.scss

@@ -58,6 +58,11 @@
     font-weight: 600;
   }
 
+  .modifier-badge {
+    font-size: 0.5rem;
+    font-weight: 400;
+  }
+
   .step-badge {
     background-color: #ffdbdb;
     color: #d52902;
@@ -81,6 +86,12 @@
     background-color: #e9f5ea;
     color: #269b36;
   }
+
+  .modifier-badge {
+    background-color: #e9f5ea;
+    color: #269b36;
+    height: 1rem;
+  }
 }
 
 .product-set-mobile-footer {

package/src/styles/sales/ManualBooking.scss

@@ -234,6 +234,12 @@
     margin-bottom: 2rem;
   }
 
+  .quantity-container-product {
+    display: flex;
+    justify-content: center;
+    margin: 1rem;
+  }
+
   .save-btn:disabled {
     background-color: #fafafa;
     border: none;

package/src/styles/themes/bookedit/index.scss

@@ -51,6 +51,25 @@
   border-bottom: 1px solid #f0f0f0;
 }
 
+ .modifier-header {
+  background-color: color('white');
+  padding: 0 2.5rem;
+  z-index: 2;
+  margin-top: 1rem;
+  min-height: 2rem;
+}
+
+.modifier-container {
+  background-color: color('white');
+  padding-bottom: 1rem;
+}
+
+.modifier-set-container {
+  background-color: color('white');
+  border-bottom: 2px solid #f0f0f0;
+  padding-bottom: 1rem;
+}
+
 .header-user-image {
   width: 3rem;
   height: 3rem;