@licklist/design 0.71.18-dev.5 → 0.71.18-dev.7

package/src/iframe/ProductWithModifierModal/ModifierSetModal/controll/ModifierSetControll.tsx

@@ -36,6 +36,8 @@ export const ModifiersSetControl = ({
 
   const orderModifiersSets = watch(`${productId}.orderProductModifiers`)
 
+  console.log(orderModifiersSets, 'orderModifiersSets')
+
   const { formatNumber } = useIntl()
   const formatToCurrency = (value: number) =>
     formatNumber(value, { style: 'currency', currency: Currency.GBP })
@@ -62,7 +64,7 @@ export const ModifiersSetControl = ({
       orderModifiersSets?.find(
         (modifier) => modifier?.modifierId === selectedModifier?.id,
       )?.quantity === 1
-
+    console.log(orderModifiersSets, 'orderModifiersSets -1')
     if (selectedModifier && type === 'radio') {
       modifiers.forEach((modifier) => {
         const isSelected = modifier.id === selectedModifier.id
@@ -74,8 +76,11 @@ export const ModifiersSetControl = ({
           quantity: isSelected ? 1 : 0,
           modifierSetId: modifierSet.id,
         }
+
+        console.log(orderModifiers, 'orderModifiers')
+
         setValue(
-          `${productId}.orderProductModifiers.${modifierSet.id}`,
+          `${productId}.orderProductModifiers.${modifierSet.id}.${orderModifiers.modifierId}`,
           orderModifiers,
         )
       })
@@ -124,14 +129,19 @@ export const ModifiersSetControl = ({
     )
   }, [isEditMode])
 
+  const radioButtonDefaultModifier = currentOrderModifiersSets.find((modifier) => 
+    modifierSet.modifiers.some((rl) => rl.id === modifier.modifierId)
+)?.modifierId.toString();
+
+
+
   return (
     <>
       {modifierSet?.maxItems === 1 &&
-      modifiers.every((modifier) => modifier.maxItems === 1) &&
-      !currentOrderModifiersSets?.find((modifier) => !!modifier?.quantity) ? (
+      modifiers.every((modifier) => modifier.maxItems === 1) ? (
         <>
           <Controller
-            name={`${productId}.orderProductModifiers.${modifierSet.id}`}
+            name={`${productId}.modifier`}
             control={control}
             rules={{
               required: {
@@ -162,7 +172,7 @@ export const ModifiersSetControl = ({
                             inline
                             id={modifier.id.toString()}
                             defaultChecked={!!selectedOrderModifierId}
-                            defaultValue={modifier.id.toString()}
+                            defaultValue={selectedOrderModifierId || modifier.id.toString()}
                             checked={field.value === modifier.id.toString()}
                             onChange={onChange}
                             type='radio'
@@ -171,7 +181,7 @@ export const ModifiersSetControl = ({
                           />
                           <div className='mt-3 w-100 pl-2'>
                             <p>{modifier.description}</p>
-                            <div className='price'>
+                            <div className='modifier-price'>
                               + {formatToCurrency(modifier.price)}
                             </div>
                           </div>
@@ -187,6 +197,7 @@ export const ModifiersSetControl = ({
                 </>
               )
             }}
+            defaultValue={radioButtonDefaultModifier}
           />
         </>
       ) : (
@@ -248,7 +259,7 @@ export const ModifiersSetControl = ({
                             </div>
                             <div className='mt-3 w-100 pl-2'>
                               <p>{modifier.description}</p>
-                              <div className='price'>
+                              <div className='modifier-price'>
                                 + {formatToCurrency(modifier.price)}
                               </div>
                             </div>
@@ -332,7 +343,7 @@ export const ModifiersSetControl = ({
                             </div>
                             <div className='p-2 mt-3 w-100 pl-4'>
                               <p className='pl-2'>{modifier.description}</p>
-                              <div className='pl-2 price'>
+                              <div className='pl-2 modifier-price'>
                                 + {formatToCurrency(modifier.price)}
                               </div>
                               {error?.message && (

package/src/iframe/ProductWithModifierModal/ModifierSetModal/controll/ProductControll.tsx

@@ -25,7 +25,7 @@ export const ProductControl = ({
     clearErrors,
   } = useFormContext()
   const modifiersSet = product?.modifiersSet || []
-  const orderModifiersSets = watch(`${product.id}.orderProductModifiers`)
+  const orderModifiersSets = watch(`${product.id}.orderProductModifier`)
 
   useEffect(() => {
     if (!isValid) return

package/src/iframe/ProductWithModifierModal/utils.ts

@@ -8,8 +8,8 @@ export const filteredOrderModifierSets = (
   ): OrderModifier[] => {
     if (!modifiersSet) return []
     const orderModifier = modifiersSet
-      .flat()
-      .filter((modifier) => !!modifier?.quantity)
+      ?.flat()
+      ?.filter((modifier) => !!modifier?.quantity)
 
     return uniqBy(
       orderModifier,
@@ -21,6 +21,7 @@ export const filteredOrderModifierSets = (
     orderModifiersSets: OrderModifier[],
     modifierSet,
   ) => {
+    if (!orderModifiersSets?.length) return 0
     const filteredOrderModifier = filteredOrderModifierSets(orderModifiersSets)
     return filteredOrderModifier.filter(
       (item) => item?.modifierSetId === modifierSet.id,

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl'
 import * as Config from '@licklist/core/dist/Config'
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
 import { calculateTotalModifiersPrice } from '../../utils'
+import { ProductWithModifier } from '../../../CategoryProduct/components/ProductWithModifier/ProductWithModifier'
 
 type ProductSummaryProps = {
   name?: string
@@ -29,22 +30,6 @@ export const ProductSummary = ({
     currency: Config.Currency.GBP,
   })
 
-  const modifiersName = `${orderProduct.orderModifiersSets
-    ?.map((modifierProduct) =>
-      modifierProduct?.modifiers
-        .map((item) =>
-          item?.quantity > 1
-            ? `${item?.quantity}x - ${item?.name}`
-            : item?.name,
-        )
-        .join(', '),
-    )
-    .join(', ')}`
-
-  const fullModifiersPrice = formatNumber(modifierSetsPrice, {
-    style: 'currency',
-    currency: Config.Currency.GBP,
-  })
 
   return (
     <div className='product'>
@@ -57,12 +42,16 @@ export const ProductSummary = ({
         {modifierSetsPrice && <p className='price'>{fullPrice}</p>}
       </div>
 
-      {fullModifiersPrice && (
+      {!!orderProduct?.orderModifiersSets?.length && (
         <>
-          <p className='mt-2'>{modifiersName}</p>
-          <div className='d-flex justify-content-end'>
-            <p className='price'>{fullModifiersPrice}</p>
-          </div>
+          {orderProduct.orderModifiersSets.map((modifier, index) => (
+            <ProductWithModifier
+              key={modifier.productQuantity.toString()}
+              modifier={modifier}
+              modifierKey={index}
+              isSummary
+            />
+          ))}
         </>
       )}
 

package/src/iframe/order-process/components/BookingSummary/utils/index.ts

@@ -17,7 +17,6 @@ export const cartSumByOrderProducts = ({
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
     if (!product) return 0
-
     const modifiersPrice = calculateTotalModifiersPrice(
       product?.orderModifiersSets,
     )
@@ -37,7 +36,7 @@ export const getModifierName = (
   isManualBooking: boolean,
 ) => {
   const modifierName = (orderModifier: OrderModifier) =>
-    !isManualBooking ? orderModifier?.name : orderModifier.modifier.name
+    isManualBooking ?  orderModifier.modifier.name : orderModifier?.name
   return `${modifier.modifiers.map((item) => (
     item?.quantity > 1 ? `${item?.quantity}x - ${modifierName(item)}` : modifierName(item))).join(', ')}`
 }

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -92,7 +92,7 @@ export const ProductQuantityInput = ({
     )
   }
 
-  if (product.modifiersSet.length) {
+  if ((product as Product).modifiersSet.length) {
     return (
       <>
         <Button

package/src/iframe/order-process/components/CategoryProduct/components/ProductWithModifier/ProductWithModifier.tsx

@@ -25,6 +25,7 @@ interface ProductQuantityInputProps {
   modifier: OrderModifierByProduct
   modifierKey: number
   isManualBooking?: boolean
+  isSummary? :boolean
   deleteOrderModifier?: (order: number) => void
   editOrderModifierSet?: (order: number) => void
 }
@@ -33,6 +34,7 @@ export const ProductWithModifier = ({
   modifier,
   modifierKey,
   isManualBooking = false,
+  isSummary = false,
   deleteOrderModifier,
   editOrderModifierSet,
 }: ProductQuantityInputProps) => {
@@ -55,10 +57,10 @@ export const ProductWithModifier = ({
       className='d-flex p-2 justify-content-between align-items-center'
     >
       <div className='d-flex'>
-        <p className='font-weight-bold pr-4'>{`${orderModifierDescription} x`}</p>
+        <p className='font-weight-bold w-25 pr-4'>{`${orderModifierDescription} x`}</p>
         <p>{modifierName ? ` ${modifierName}` : t('withoutModifier')}</p>
       </div>
-      {isManualBooking ? (
+      {isManualBooking || isSummary ? (
         <p className='price'>{fullModifiersPrice}</p>
       ) : (
         <div>

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

@@ -141,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
@@ -200,9 +210,8 @@ export function ProductsControl({
             ? !!product.id
             : isOverrides && !!product.originalProductId
 
-          const modifierSets = product?.modifiersSet.length || 0
-
           const isNewProductOverrides = isCreateNewOverrides && !!product.id
+          const modifiersSets = modifierSets[index]?.length || 0
 
           return (
             <Controller
@@ -247,8 +256,8 @@ export function ProductsControl({
                           } `}
                         </span>
                       </div>
-                      {!!modifierSets && (
-                        <Badge className='modifier-badge'>{`${modifierSets} ${t('modifiersSets')}`}</Badge>
+                      {!!modifiersSets && (
+                        <Badge className='modifier-badge'>{`${modifiersSets} ${t('modifiersSets')}`}</Badge>
                       )}
                     </div>
                   }

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

@@ -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/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

@@ -90,6 +90,7 @@
   .modifier-badge {
     background-color: #e9f5ea;
     color: #269b36;
+    height: 1rem;
   }
 }