@licklist/design 0.71.18-dev.3 → 0.71.18-dev.4

package/dist/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/dist/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/dist/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/dist/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,11 @@
     background-color: #e9f5ea;
     color: #269b36;
   }
+
+  .modifier-badge {
+    background-color: #e9f5ea;
+    color: #269b36;
+  }
 }
 
 .product-set-mobile-footer {

package/dist/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/dist/styles/themes/bookedit/index.scss

@@ -51,6 +51,20 @@
   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');
+  border-bottom: 2px solid #f0f0f0;
+  padding-bottom: 1rem;
+}
+
 .header-user-image {
   width: 3rem;
   height: 3rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.18-dev.3",
+  "version": "0.71.18-dev.4",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.31.2-dev.5",
+    "@licklist/core": "0.31.2-dev.10",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1-dev.5",
+    "@licklist/plugins": "0.35.1-dev.8",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.31.2-dev.5",
+    "@licklist/core": "0.31.2-dev.10",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1-dev.5",
+    "@licklist/plugins": "0.35.1-dev.8",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -208,4 +208,4 @@
     "yarn": "4.4.0"
   },
   "stableVersion": "0.71.4-dev.1"
-}
+}

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetForm.tsx

@@ -0,0 +1,205 @@
+import { Controller, FormProvider, useForm } from 'react-hook-form'
+import { Button, Form } from 'react-bootstrap'
+import { isEmpty, uniqBy } from 'lodash'
+import { useTranslation } from 'react-i18next'
+import { useIntl } from 'react-intl'
+import { Currency } from '@licklist/core/dist/Config'
+import { MenuStep } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
+import { NumberInputHorizontal } from 'src/sales'
+import clsx from 'clsx'
+import { ProductCategory } from 'dist/product-set/types'
+import { MAX_PRODUCT_NUMBER } from '../../order-process/components/CategoryProduct/constants'
+import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
+import { getOrderProductModifiersPrice } from '../../order-process/components/BookingSummary/utils'
+import { ProductControl } from './controll/ProductControll'
+
+export interface ManualBookingFormValues {
+  steps: MenuStep[]
+}
+
+interface ProductWithModifierSetFormProps {
+  onHide: () => void
+  product: Product
+  category: ProductCategory
+  editOrderModifier?: OrderModifierByProduct
+  onChange: (product: FormOrderItem) => void
+}
+
+const filteredOrderModifierSets = (
+  modifiersSet: OrderModifier[],
+): OrderModifier[] => {
+  if (!modifiersSet) return []
+  const orderModifier = modifiersSet
+    ?.flat()
+    .filter((modifier) => !!modifier?.quantity)
+
+  const filteredOrderModifier = uniqBy(
+    orderModifier,
+    (item) => `${item.modifierId}-${item.modifierSetId}`,
+  )
+
+  return filteredOrderModifier || []
+}
+
+export const ProductWithModifierSetForm = ({
+  product,
+  category,
+  editOrderModifier,
+  onChange,
+}: ProductWithModifierSetFormProps) => {
+  const form = useForm({ mode: 'onChange' })
+  const { t } = useTranslation(['App', 'Sale', 'Validation'])
+
+  const {
+    formState: { errors, isSubmitting },
+    control,
+    trigger,
+    watch,
+  } = form
+  const defaultProductQuantity = editOrderModifier?.productQuantity ?? 0
+
+  const valuesOrder = watch()
+  const productQuantity = valuesOrder?.product?.quantity
+
+  const orderModifiersSets =
+    valuesOrder[`${product.id}`]?.orderProductModifiers || []
+
+  const filteredOrderModifiers = filteredOrderModifierSets(orderModifiersSets)
+
+  const orderModifierSets: OrderModifierByProduct[] = [
+    {
+      productQuantity: productQuantity ?? 1,
+      modifiers: filteredOrderModifiers,
+    },
+  ]
+
+  const onSubmit = (event) => {
+    event.preventDefault()
+    trigger()
+
+    const productOrder: FormOrderItem = {
+      id: product.id,
+      name: product.name,
+      deposit: product?.deposit,
+      hasDeposit: category.allowDeposits && product?.deposit < product.price,
+      price: product.price,
+      productCategoryId: category.id,
+      quantity: productQuantity,
+      capacity: product?.capacity,
+      orderModifiersSets: orderModifierSets,
+    }
+    if (productOrder) {
+      return onChange(productOrder)
+    }
+    return undefined
+  }
+
+  const handleProductQuantityChange = (
+    value: number,
+    onChange: (val: number) => void,
+  ) => {
+    if (value < 0) {
+      onChange(0)
+    } else if (value > MAX_PRODUCT_NUMBER) {
+      onChange(MAX_PRODUCT_NUMBER)
+    } else {
+      onChange(value)
+    }
+  }
+
+  const modifierPrice = getOrderProductModifiersPrice(orderModifierSets[0])
+  const productWithModifierPrice =
+    (product.price * productQuantity || 0) + modifierPrice
+  const { formatNumber } = useIntl()
+  const formatToCurrency = (value: number) =>
+    formatNumber(value, { style: 'currency', currency: Currency.GBP })
+
+  return (
+    <FormProvider {...form}>
+      <Form>
+        <div className='manual-booking-form'>
+          <ProductControl
+            product={product}
+            errors={errors}
+            editOrderModifier={editOrderModifier}
+          />
+          <div className='bg-light m-2 p-2 rounded'>
+            <Controller
+              control={control}
+              name='product.quantity'
+              rules={{
+                min: {
+                  value: 1,
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('minItems'),
+                    min: 1,
+                  }) as string,
+                },
+                max: {
+                  value: !product.isUnlimited
+                    ? product.maxQuantity
+                    : MAX_PRODUCT_NUMBER,
+                  message: t('Validation:fieldMaxNumber', {
+                    attribute: t('maxItems'),
+                    max: product.maxQuantity,
+                  }) as string,
+                },
+              }}
+              render={({
+                field: { onChange, value, ref },
+                fieldState: { invalid, error },
+              }) => (
+                <div className='mb-8 d-flex flex-column'>
+                  <div className='quantity-container-product w-100'>
+                    <NumberInputHorizontal
+                      ref={ref}
+                      size='big'
+                      onChange={(val) =>
+                        handleProductQuantityChange(val, onChange)
+                      }
+                      onMinusClick={(val) =>
+                        handleProductQuantityChange(val, onChange)
+                      }
+                      onPlusClick={(val) => {
+                        handleProductQuantityChange(val, onChange)
+                      }}
+                      min={0}
+                      max={100}
+                      value={value || defaultProductQuantity}
+                      className={clsx(invalid && 'error')}
+                      isLoading={isSubmitting}
+                    />
+                  </div>
+                  <div className=' d-flex justify-content-center'>
+                    <div className='price pl-5'>
+                      {formatToCurrency(product.price)}
+                    </div>
+                    {error?.message && (
+                      <div className='d-flex justify-content-center mt-3 w-100'>
+                        <p className='iframe-event__message-error'>
+                          {error.message}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            />
+            <Button
+              as='button'
+              variant='primary'
+              className='w-100'
+              disabled={!productQuantity || !isEmpty(errors)}
+              onClick={onSubmit}
+            >
+              {`${t('App:add')}${modifierPrice ? ` (${formatToCurrency(productWithModifierPrice)})` : ''}`}
+            </Button>
+          </div>
+        </div>
+      </Form>
+    </FormProvider>
+  )
+}

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal.tsx

@@ -0,0 +1,75 @@
+import { useDialogContext, DialogContextProvider } from 'src/modals'
+import { Modal } from 'react-bootstrap'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { TicketDescription } from 'src/iframe/event'
+import clsx from 'clsx'
+import { ProductCategory } from 'dist/product-set/types'
+import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
+import { useOnWindowUnmount } from '../../order-process/components/utils/useOnWindowUnmount'
+import { ProductWithModifierSetForm } from './ProductWithModifierSetForm'
+
+interface ProductWithModifierSetModalProps {
+  show: boolean
+  onHide: () => void
+  product: Product
+  category: ProductCategory
+  editOrderModifier?: OrderModifierByProduct
+  onChange: (product: FormOrderItem) => void
+}
+
+export const ProductWithModifierSetModal = ({
+  show,
+  onHide,
+  product,
+  category,
+  onChange,
+  editOrderModifier,
+}: ProductWithModifierSetModalProps) => {
+  const { onBeforeUnload, onPopState } = useDialogContext()
+  useOnWindowUnmount({ onBeforeUnload, onPopState })
+
+  return (
+    <DialogContextProvider>
+      <Modal
+        onHide={onHide}
+        show={show}
+        className='m-0 manual-booking-form-modal mt-0 h-100 p-0'
+        dialogClassName='manual-booking-dialog mt-0'
+      >
+        <div className='close-button'>
+          <button
+            type='button'
+            onClick={onHide}
+            onKeyPress={onHide}
+            className='btn btn-light rounded-circle position-absolute top-0 end-0 m-2'
+          >
+            &times;
+          </button>
+        </div>
+        <div className='right-block' id='select-event-container'>
+          <div className='manual-booking-container'>
+            <div className='manual-booking-header'>
+              <TicketDescription
+                title={product.name}
+                description={product.description}
+                className={clsx('iframe-event__product-description')}
+                classNameProductModal='d-block'
+                images={product.images}
+                isRequired={product.isRequired}
+                canExpand
+              />
+            </div>
+            <ProductWithModifierSetForm
+              product={product}
+              onHide={onHide}
+              editOrderModifier={editOrderModifier}
+              onChange={onChange}
+              category={category}
+            />
+          </div>
+        </div>
+      </Modal>
+    </DialogContextProvider>
+  )
+}