@licklist/design 0.71.18-dev.0 → 0.71.18-dev.10

package/src/iframe/payment/order-items-table/hooks/useTableData.tsx

@@ -1,8 +1,9 @@
 import { useMemo } from 'react'
-import { uniqueId } from 'lodash'
+import { uniqueId, flatMap, flatten, map } from 'lodash'
 import { useIntl } from 'react-intl'
 import { useTranslation } from 'react-i18next'
 import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
+import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
 import {
   PAYMENT_TYPE_VAT,
   PAYMENT_TYPE_FEE,
@@ -12,6 +13,10 @@ import { StaticTableData } from '../../../../table'
 import { getProductQuantityAndPrice, getTotalSumByCategory } from '../utils'
 import { OrderItemsTableProps, SummaryItem } from '../types'
 import { getOrderSummaryItems } from '../utils/paymentSummary'
+import { Order } from '@licklist/core/dist/DataMapper'
+import { OrderPayment } from '@licklist/core/dist/DataMapper/Order/OrderPaymentDataMapper'
+import { OrderProduct } from '@licklist/core/dist/DataMapper/Order/OrderProductDataMapper'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
 
 const CURRENCY_DEFAULT = 'GBP'
 export const PAYMENT_TYPE_TRANSLATE_KEYS = {
@@ -50,19 +55,67 @@ export const useTableData = ({
     ),
   })
 
-  const renderProductItem = (product: Product) => {
-    const { quantity, price } = getProductQuantityAndPrice(
-      order.orderProducts,
-      product,
-    )
+  const reworkProductStructure = (order: OrderProduct) =>
+    order
+      ? flatMap(order, (item) => {
+          if (!item || !Array.isArray(item)) return []
+          return item.map((modGroup, idx) => ({
+            deletedAt: order.deletedAt ?? null,
+            id: `${order.id}-${idx + 1}`, // Ensuring uniqueness with string concatenation
+            orderId: order.orderId ?? null,
+            price: order.price ?? 0,
+            productId: order.productId ?? '',
+            quantity: modGroup.productQuantity ?? 1,
+            deposit: order.deposit ?? 0,
+            orderProductModifiers: modGroup.modifiers.map((mod) => ({
+              modifierId: mod.modifierId ?? '',
+              price: mod.price ?? 0,
+              productId: mod.productId ?? '',
+              quantity: mod.quantity ?? 1,
+              modifierSetId: mod.modifierSetId ?? '',
+              modifier: mod.modifier ?? null,
+            })),
+          }))
+        })
+      : []
+
+  const renderProductItem = ({
+    product,
+    productsForCategory,
+  }: {
+    product: OrderProduct
+    productsForCategory: Product[]
+  }) => {
+    if (product.quantity === 0) {
+      return null
+    }
+ 
+    const name =
+      productsForCategory.find((item) => item.id === product.productId)?.name || ''
 
+    return {
+      key: product.id,
+      name,
+      quantity: (
+        <div className='quantity'>
+          <div className='multiplier'>x</div>
+          {product.quantity}
+        </div>
+      ),
+      price: formatPrice(product.price),
+      modifier: product?.orderProductModifiers?.map(renderModifierItem) || [],
+    }
+  }
+
+  const renderModifierItem = (orderModifier: OrderModifier) => {
+    const { quantity, modifier, modifierId, price } = orderModifier
     if (quantity === 0) {
       return null
     }
 
     return {
-      key: product.id,
-      name: product.name,
+      key: modifierId,
+      name: ` - ${modifier?.name || ''}`,
       quantity: (
         <div className='quantity'>
           <div className='multiplier'>x</div>
@@ -80,15 +133,33 @@ export const useTableData = ({
 
     return productCategories.reduce(
       (previousValues: StaticTableData[], categoryId) => {
-        const products = order.products.filter(
+        const productsForCategory = order?.products.filter(
           (product) => product.productCategoryId === categoryId,
         )
 
+        const products = order.orderProducts.filter((el) =>
+          productsForCategory
+            .map((product) => product.id)
+            .includes(el.productId),
+        )
+
         if (!products.length) {
           return previousValues
         }
-
-        const filteredProducts = products.map(renderProductItem).filter(Boolean)
+        const productsWithReworkedModifier = products.map((product) => {
+          if (!product.orderProductModifiers.length) return product
+          return reworkProductStructure(product)
+        })
+
+        const filteredProducts =  flatten(productsWithReworkedModifier).map(
+          (product) =>
+            renderProductItem({ product , productsForCategory }),
+        )
+ 
+        const productWithModifier = flatMap(filteredProducts, (item) => [
+          item,
+          ...item.modifier,
+        ])
 
         if (!filteredProducts.length) {
           return previousValues
@@ -96,8 +167,8 @@ export const useTableData = ({
 
         return [
           ...previousValues,
-          renderCategoryItem(products),
-          ...filteredProducts,
+          renderCategoryItem(productsForCategory),
+          ...productWithModifier,
         ]
       },
       [],
@@ -133,6 +204,5 @@ export const useTableData = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [order, externalDiscount, isPaymentProcessed],
   )
-
   return data
 }

package/src/iframe/payment/order-items-table/utils/index.ts

@@ -6,6 +6,7 @@ import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMappe
 import { PAYMENT_TYPE_DISCOUNT } from '@licklist/core/dist/DataMapper/Order/PaymentDataMapper'
 import { PaymentDetail } from '@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper'
 import { PAYMENT_TYPE_TRANSLATE_KEYS } from '../hooks/useTableData'
+import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
 
 const TRANSLATE_KEYS = {
   totalAmount: 'totalPaid',
@@ -28,6 +29,7 @@ export const calculateTotalPrice = (
   order: Order,
   externalPaymentDetails?: ExternalPaymnetDetail[],
 ) => {
+
   const totalPrice =
     order?.orderProducts?.reduce(
       (total: number, product) =>
@@ -125,5 +127,26 @@ export const getTotalSumByCategory = (
       product,
     )
 
+    const modifierFromProduct = orderProducts.find(
+      (orderProduct) => orderProduct.productId === product.id,
+    )?.orderProductModifiers
+    if (modifierFromProduct) {
+      const modifierPrice = modifierFromProduct.reduce(
+        (prevSum: number, { modifiers }) => {
+          const modifiersPrices = modifiers.reduce(
+            (prevSumModifier: number, modifier: OrderModifier) =>
+              prevSumModifier + modifier.price * modifier.quantity,
+            0,
+          )
+
+          return prevSum + modifiersPrices
+        },
+        0,
+      )
+      const priceWithModifier = price + modifierPrice
+
+      return prevSum + priceWithModifier * quantity
+    }
+
     return prevSum + price * quantity
   }, 0)

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -23,7 +23,7 @@ const paymentNotProcessedSummary = ({
     ? getExternalPaymentDetail(paymentDetail)
     : undefined
 
-  const total = calculateTotalPrice(order, externalPaymentDetail)
+  const total = order?.fullAmount || calculateTotalPrice(order, externalPaymentDetail)
 
   const summaryItems: SummaryItem[] = [
     {
@@ -58,7 +58,7 @@ const processedPaymentSummary = ({
           price: getPaymentValueByType(order.payments, key),
         }))
 
-  const total = calculateTotalPrice(order, externalPaymentDetail)
+  const total = order.fullAmount || calculateTotalPrice(order, externalPaymentDetail)
 
   const totalDiscount = calculateTotalDiscount(order.payments)
 

package/src/product-set/form/ProductSetForm.tsx

@@ -6,6 +6,7 @@ import { TFunction, useTranslation } from 'react-i18next'
 import { VenueMapSet } from '@licklist/core/dist/DataMapper/Product/VenueMapSetDataMapper'
 import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
+import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
 
 import { isEqual } from 'lodash'
 // eslint-disable-next-line max-len
@@ -22,7 +23,11 @@ import {
 import { Step } from '../types'
 import { ProductSetContextProvider, ProductSetLoadingContext } from './context'
 import { SelectItem } from '../../types/generic/SelectItem'
-import { checkAvailableTimesErrors, getFilteredTemplates } from '../utils'
+import {
+  checkAvailableTimesErrors,
+  updateModifiersSetAtProductSetForm,
+  getFilteredTemplates,
+} from '../utils'
 import { ErrorModal } from '../../iframe/order-process/components/ErrorModal'
 
 export interface WithIsLoading {
@@ -62,6 +67,7 @@ export interface ProductSetFormProps
   saleDeadline?: number
   isCreateNewOverrides?: boolean
   timeZone: string
+  modifiersSetList?: ModifierSet[]
 }
 
 export function ProductSetForm({
@@ -71,6 +77,7 @@ export function ProductSetForm({
   onSubmitAndRedirect,
   onSubmitNoRedirect,
   productGroupList,
+  modifiersSetList,
   serverErrors,
   providerHasMap = false,
   venueMapSets = [],
@@ -95,7 +102,7 @@ export function ProductSetForm({
   const [errorMessage, setErrorMessage] = useState('')
 
   const form = useForm<ProductSetFormValues>({
-    defaultValues,
+    defaultValues: updateModifiersSetAtProductSetForm(defaultValues),
     mode: 'onChange',
   })
 
@@ -122,7 +129,7 @@ export function ProductSetForm({
     if (!defaultValues || isEqual(defaultValues, formValues)) {
       return
     }
-    reset(defaultValues)
+    reset(updateModifiersSetAtProductSetForm(defaultValues))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultValues])
 
@@ -162,6 +169,7 @@ export function ProductSetForm({
     <ProductSetContextProvider
       productGroupList={productGroupList}
       providerHasMap={providerHasMap}
+      modifiersSetList={modifiersSetList}
       venueMapSets={venueMapSets}
       providerHasBookingManagement={providerHasBookingManagement}
       zones={zones}

package/src/product-set/form/ProductsControl.tsx

@@ -49,6 +49,8 @@ const getDefaultProductValue = (sort: number): Product => ({
   maxQuantity: null,
   totalQuantity: 0,
   isAvailable: true,
+  modifiersSet: [],
+  modifiersSetsId: [],
   isSoldOut: false,
   isRequired: false,
   isUnlimited: false,
@@ -139,6 +141,16 @@ export function ProductsControl({
     ],
   })
 
+  const modifierSets = useWatch({
+    control,
+    name: [
+      ...fields.map(
+        (_, index) =>
+          `${productControlFieldName}.${index}.modifiersSet` as const,
+      ),
+    ],
+  })
+
   const categoryProductErrors =
     errors?.steps?.[stepIndex]?.productCategories?.[productCategoryIndex]
       ?.products
@@ -199,6 +211,7 @@ export function ProductsControl({
             : isOverrides && !!product.originalProductId
 
           const isNewProductOverrides = isCreateNewOverrides && !!product.id
+          const modifiersSets = modifierSets[index]?.length || 0
 
           return (
             <Controller
@@ -226,21 +239,26 @@ export function ProductsControl({
                   edit={() => edit(index)}
                   secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
                   subTitle={
-                    <div className='product-set-badges-container'>
-                      <div className='product-set-subtitle-dot product-set-subtitle-product-dot' />
-                      <span>
-                        {`£${prices[index]} ${t('each')} - ${t('qty')}:${
-                          !isUnlimitedQuantities[index]
-                            ? ` ${quantities[index]}`
-                            : t(' unlimited')
-                        } ${
-                          !isUnlimitedQuantities[index]
-                            ? ` - ${t('possibleRevenue')} £${
-                                prices[index] * quantities[index]
-                              }`
-                            : ''
-                        } `}
-                      </span>
+                    <div className='d-flex justify-content-between'>
+                      <div className='product-set-badges-container'>
+                        <div className='product-set-subtitle-dot product-set-subtitle-product-dot' />
+                        <span>
+                          {`£${prices[index]} ${t('each')} - ${t('qty')}:${
+                            !isUnlimitedQuantities[index]
+                              ? ` ${quantities[index]}`
+                              : t(' unlimited')
+                          } ${
+                            !isUnlimitedQuantities[index]
+                              ? ` - ${t('possibleRevenue')} £${
+                                  prices[index] * quantities[index]
+                                }`
+                              : ''
+                          } `}
+                        </span>
+                      </div>
+                      {!!modifiersSets && (
+                        <Badge className='modifier-badge'>{`${modifiersSets} ${t('modifiersSets')}`}</Badge>
+                      )}
                     </div>
                   }
                   modalLabel={t('addNewProduct')}

package/src/product-set/form/context.tsx

@@ -7,15 +7,18 @@ import {
   Dispatch,
 } from 'react'
 import { VenueMapSet } from '@licklist/core/dist/DataMapper/Product/VenueMapSetDataMapper'
+import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
 // eslint-disable-next-line max-len
 import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { SelectItem } from '../../types/generic/SelectItem'
 
+
 interface LoadingContext {
   isLoading: boolean
   setLoading: (loading: boolean) => void
   productGroupList?: SelectItem[]
+  modifiersSetList?: ModifierSet[] | null
   providerHasMap?: boolean | null
   venueMapSets?: VenueMapSet[]
   providerHasBookingManagement?: ProviderBookingManagementSetting['hasBookingManagement']
@@ -43,6 +46,7 @@ type ProductSetContextProviderProps = PropsWithChildren<
 export function ProductSetContextProvider({
   children,
   productGroupList = [],
+  modifiersSetList =[],
   providerHasMap = false,
   venueMapSets = [],
   providerHasBookingManagement,
@@ -62,6 +66,7 @@ export function ProductSetContextProvider({
         isLoading: loading,
         setLoading,
         productGroupList,
+        modifiersSetList,
         providerHasMap,
         venueMapSets,
         providerHasBookingManagement,

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

@@ -33,6 +33,7 @@ export type ReportRunnerModalProps = {
   onHide: () => void
   onEdit: () => void
   reports?: Report[] | null
+  providerId?: number
 }
 
 type FormValues = Pick<GenerateReportBody, 'dateFrom' | 'dateTo' | 'periodBy'>
@@ -51,6 +52,7 @@ export const ReportRunnerModal = ({
   generate,
   download,
   onEdit,
+  providerId,
 }: ReportRunnerModalProps) => {
   const { t } = useTranslation(['App', 'Design'])
   const report = reports?.find((report) => report.id === reportId)
@@ -83,6 +85,7 @@ export const ReportRunnerModal = ({
       dateFrom: values.dateFrom,
       dateTo: values.dateTo,
       data,
+      providerId,
     })
   })
 

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;
       }