@licklist/design 0.71.6-dev.8 → 0.71.6

package/dist/styles/static/Loader.scss

@@ -27,15 +27,6 @@
   }
 }
 
-.fullscreen-loader {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  z-index: 5000;
-  top: 0;
-  left: 0;
-}
-
 .payment-loader {
   position: absolute;
   top: 50%;

package/dist/zone/form/components/GameDurationControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CAgC1B,CAAA"}
+{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CA+B1B,CAAA"}

package/dist/zone/form/components/GameDurationControl.js

@@ -77,9 +77,6 @@ var GameDurationControl = function(param) {
                 required: false,
                 min: 1
             })), {
-                onWheel: function(event) {
-                    return event.currentTarget.blur();
-                },
                 placeholder: t('Design:duration'),
                 isInvalid: Boolean(errors.defaultDuration),
                 disabled: isLoading

package/dist/zone/form/components/SortControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAoC1D,CAAA"}
+{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAmC1D,CAAA"}

package/dist/zone/form/components/SortControl.js

@@ -77,9 +77,6 @@ var SortControl = function(param) {
                 required: false,
                 min: 1
             })), {
-                onWheel: function(event) {
-                    return event.currentTarget.blur();
-                },
                 placeholder: t('Design:ordering'),
                 isInvalid: Boolean(errors.sort),
                 disabled: isLoading

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.6-dev.8",
+  "version": "0.71.6",
   "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.32.2",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1-dev.5",
+    "@licklist/plugins": "0.35.1",
     "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.32.2",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1-dev.5",
+    "@licklist/plugins": "0.35.1",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -202,10 +202,8 @@
       "yarn tsc"
     ]
   },
-  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
-  },
-  "stableVersion": "0.71.4-dev.1"
+  }
 }

package/src/affiliate/form/AffiliateForm.tsx

@@ -76,7 +76,6 @@ export const AffiliateForm = ({
   const copyToClipboard = () =>
     // eslint-disable-next-line consistent-return
     window.navigator.clipboard.writeText(formValues.link)
-
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(handleSubmit)}>

package/src/auth/Layout/AuthNavComponent.tsx

@@ -8,15 +8,11 @@ function AuthNavComponent() {
 
   return (
     <Router>
-      {/* TODO fix issue react router types
-        @ts-expect-error */}
       <Link to='/login'>
         <StyledButton size='sm' className='rounded-pill mr-2'>
           {t('login')}
         </StyledButton>
       </Link>
-      {/* TODO fix issue react router types
-        @ts-expect-error */}
       <Link to='/register'>
         <StyledButton
           size='sm'

package/src/auth/Login/LoginComponent.tsx

@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: 'Error',
-      message: error?.response?.data?.message || error.message,
+      message: error.message,
     })
   }
 
@@ -112,8 +112,6 @@ const LoginComponent = ({
             {!hideSignUpLink && (
               <h6 className='text-center'>
                 <Trans t={t} i18nKey='loginPromo'>
-                  {/* TODO fix issue react router types
-        @ts-expect-error */}
                   Don&apos;t have account? <Link to='/register'>Sign up</Link>.
                 </Trans>
               </h6>

package/src/auth/Login/LoginFormComponent.tsx

@@ -147,8 +147,6 @@ function LoginFormComponent(props: LoginFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:resetPromo'>
             Forgot your password?{' '}
-            {/* TODO fix issue react router types
-        @ts-expect-error */}
             <Link
               to='/forgot-password'
               className={[isLoading && 'disabled'].join(' ')}

package/src/auth/Register/RegisterComponent.tsx

@@ -105,8 +105,6 @@ function RegisterComponent({
             <h6 className='text-center'>
               <Trans t={t} i18nKey='registerPromo'>
                 Fill out the form below to sign up for {{ name: t('bookedit') }}
-                {/* TODO fix issue react router types
-        @ts-expect-error */}
                 . Already signed up? Then just <Link to='/login'>Log in</Link>.
               </Trans>
             </h6>

package/src/auth/Register/RegisterFormComponent.tsx

@@ -400,14 +400,10 @@ function RegisterFormComponent({
           <Trans t={t} i18nKey='User:agreementsPromo'>
             By creating an account, I agree to {{ name: t('User:bookedit') }}
             &apos;s{' '}
-            {/* TODO fix issue react router types
-        @ts-expect-error */}
             <Link to='/terms' className={[isLoading && 'disabled'].join(' ')}>
               terms of service
             </Link>{' '}
             and{' '}
-            {/* TODO fix issue react router types
-        @ts-expect-error */}
             <Link to='/privacy' className={[isLoading && 'disabled'].join(' ')}>
               privacy policy
             </Link>

package/src/auth/ResetPassword/ResetPasswordFormComponent.tsx

@@ -97,8 +97,6 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:signinPromo'>
             Already a user?{' '}
-            {/* TODO fix issue react router types
-        @ts-expect-error */}
             <Link to='/login' className={[isLoading && 'disabled'].join(' ')}>
               Sign in
             </Link>
@@ -108,8 +106,6 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:loginPromo'>
             Don&apos;t have an account?{' '}
-            {/* TODO fix issue react router types
-        @ts-expect-error */}
             <Link
               to='/register'
               className={[isLoading && 'disabled'].join(' ')}

package/src/auth/Router.tsx

@@ -29,8 +29,6 @@ function Router(props: RouterProps) {
     }
   }, [])
 
-  // TODO fix issue react router types
-  // @ts-expect-error
   return <BrowserRouter history={history}>{children}</BrowserRouter>
 }
 

package/src/calendar/Calendar.stories.tsx

@@ -28,7 +28,7 @@ Default.args = {
   fromPrice: 'from £10',
   selectedDate: null,
   setSelectedDate: () => null,
-  calendarDates: getMonthCalendarDates({ initialDate: now }),
+  calendarDates: getMonthCalendarDates(now),
   currentDate: now,
   getDateTimeButtonProps: () => ({
     resources: [],
@@ -50,7 +50,7 @@ Loading.args = {
   fromPrice: 'from £10',
   selectedDate: null,
   setSelectedDate: () => null,
-  calendarDates: getMonthCalendarDates({ initialDate: now }),
+  calendarDates: getMonthCalendarDates(now),
   currentDate: now,
   getDateTimeButtonProps: () => ({
     resources: [],

package/src/calendar/utils/index.ts

@@ -3,7 +3,7 @@ import { DateTime, Interval } from 'luxon'
 
 type Builder = (args: {
   initialDate?: DateTime
-  timeZone?: TimeZone['name']
+  timeZone: TimeZone['name']
 }) => DateTime[]
 
 export const getMonthCalendarDates: Builder = ({

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

@@ -9,9 +9,6 @@ import { Switch, NumberInput } from '../../../../static'
 const SALE_DEADLINE_BEFORE_TYPE = 'before'
 const SALE_DEADLINE_AFTER_TYPE = 'after'
 
-export const SALE_DEADLINE_NAME_CATEGORY = 'saleDeadlineCategory'
-export const SALE_DEADLINE_NAME = 'saleDeadline'
-
 const SALE_DEADLINES_EVENT_START_TYPES = [
   { type: SALE_DEADLINE_BEFORE_TYPE },
   { type: SALE_DEADLINE_AFTER_TYPE },
@@ -21,30 +18,11 @@ type DeadlineType =
   | typeof SALE_DEADLINE_BEFORE_TYPE
   | typeof SALE_DEADLINE_AFTER_TYPE
 
-export const DEADLINE_NAME = [
-  SALE_DEADLINE_NAME_CATEGORY,
-  SALE_DEADLINE_NAME,
-] as const
-
-export type DeadLineNameType = (typeof DEADLINE_NAME)[number]
-
-type SaleDeadlineType =
-  | {
-      saleDeadline: null | number
-    }
-  | {
-      [key: string]: null | number
-    }
+type SaleDeadlineType = {
+  saleDeadline: null | number
+}
 
-export const SaleDeadline = ({
-  disabled = false,
-  onlyBefore = false,
-  deadLineCategory,
-}: {
-  disabled?: boolean
-  onlyBefore?: boolean
-  deadLineCategory?: string
-}) => {
+export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
   const { t } = useTranslation(['Design'])
   const {
     control,
@@ -54,11 +32,9 @@ export const SaleDeadline = ({
   const [deadlineType, setDeadlineType] = useState<DeadlineType>(
     SALE_DEADLINE_BEFORE_TYPE,
   )
-
-  const saleDeadline = watch(deadLineCategory || SALE_DEADLINE_NAME)
+  const saleDeadline = watch('saleDeadline')
 
   useEffect(() => {
-    if (onlyBefore) return
     if (saleDeadline > 0) {
       setDeadlineType(SALE_DEADLINE_AFTER_TYPE)
     }
@@ -69,11 +45,11 @@ export const SaleDeadline = ({
     <Form.Group className='sales-deadline'>
       <Form.Label>{t('Design:salesDeadline')}</Form.Label>
       <Form.Control.Feedback type='invalid'>
-        {errors.root?.message}
+        {errors.saleDeadline?.message}
       </Form.Control.Feedback>
       <Controller
         control={control}
-        name={deadLineCategory || SALE_DEADLINE_NAME}
+        name='saleDeadline'
         render={({
           field: { value, onChange },
           fieldState: { invalid, error },
@@ -135,22 +111,18 @@ export const SaleDeadline = ({
 
           return (
             <>
-              {!onlyBefore && (
-                <Form.Group className='d-flex flex-column flex-grow-1 align-items-start'>
-                  <Switch
-                    name='sale-deadline'
-                    options={SALE_DEADLINES_EVENT_START_TYPES.map(
-                      ({ type }) => ({
-                        id: type,
-                        value: t(`Design:${type}`),
-                      }),
-                    )}
-                    value={deadlineType}
-                    onChange={changeValueByType}
-                    disabled={disabled}
-                  />
-                </Form.Group>
-              )}
+              <Form.Group className='d-flex flex-column flex-grow-1 align-items-start'>
+                <Switch
+                  name='sale-deadline'
+                  options={SALE_DEADLINES_EVENT_START_TYPES.map(({ type }) => ({
+                    id: type,
+                    value: t(`Design:${type}`),
+                  }))}
+                  value={deadlineType}
+                  onChange={changeValueByType}
+                  disabled={disabled}
+                />
+              </Form.Group>
               <div className='d-flex'>
                 <Form.Group className='d-flex flex-column col-4 pl-0'>
                   <Form.Label>{t('Design:saleDays')}</Form.Label>

package/src/events/edit-event-modal/hooks/useValidationOptions.tsx

@@ -12,6 +12,11 @@ export const useValidationOptions = () => {
       required: t('Validation:fieldRequired', {
         attribute: t('start'),
       }) as string,
+      // TODO: uncomment when event splitting is implemented
+      // and extract into plugins
+      validate: (value) =>
+        DateTime.fromISO(value).diffNow().toMillis() > 0 ||
+        (t('Validation:fieldValidEventStart') as string),
     },
 
     end: {

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -20,7 +20,6 @@ export const getDefaultValues = (
   relyOnPeopleType: productSet?.relyOnPeopleType ?? null,
   thankYouPageUrl: productSet?.thankYouPageUrl ?? '',
   fieldSetId: productSet?.fieldSetId,
-  saleDeadline: productSet?.saleDeadline,
   emailTemplates:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
       ? getFilteredTemplates(productSet?.mailTemplates)
@@ -40,6 +39,7 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
+                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.tsx

@@ -61,12 +61,7 @@ export const EditRecurrentEventModal = ({
       <Form onSubmit={handleSubmit(onSubmit)} noValidate>
         <Modal.Header className='border-0'>
           <Modal.Title as='h6'>{title}</Modal.Title>
-          <Button
-            variant='danger'
-            className='btn-sm rounded'
-            disabled={disabled}
-            onClick={onHide}
-          >
+          <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
             <FaTimes size={16} />
           </Button>
         </Modal.Header>

package/src/events/event-card/utils.ts

@@ -2,25 +2,24 @@ import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from '@licklist/core/dist/Config'
 import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
 import { DateTime } from 'luxon'
 
-export const MIN_EVENT_DESCRIPTION_SIZE = 150
-export const EVENT_DESCRIPTION_SIZE = 350
-export const EMOJI_REGEX =
-  /<span data-emoji-replacer=""><img[^>]*alt="([^"]+)"[^>]*><\/span>/g
+export const MIN_EVENT_DESCRIPTION_SIZE = 150;
+export const EVENT_DESCRIPTION_SIZE = 350;
+export const EMOJI_REGEX = /<span data-emoji-replacer=""><img[^>]*alt="([^"]+)"[^>]*><\/span>/g;
 
 export const formatContent = (content, maxLength = EVENT_DESCRIPTION_SIZE) => {
-  if (!content) return ''
+  if (!content) return '';
 
-  const replacedContent = replaceEmojiImagesWithText(content)
+  const replacedContent = replaceEmojiImagesWithText(content);
 
   if (replacedContent.length <= maxLength) {
-    return replacedContent
+    return replacedContent;
   }
 
-  return replacedContent.slice(0, maxLength).concat('...')
-}
+  return replacedContent.slice(0, maxLength).concat('...');
+};
 
 function replaceEmojiImagesWithText(text) {
-  return text.replace(EMOJI_REGEX, (_, emojiText) => emojiText)
+  return text.replace(EMOJI_REGEX, (_, emojiText) => emojiText);
 }
 
 /**

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -12,7 +12,6 @@ export type EventStatisticModalProps = {
   date?: Event['startAt'] | null
   eventStatistic?: EventStatistic | null
   title?: string
-  eventId?: string
 }
 
 export const EventStatisticModal = ({
@@ -21,11 +20,10 @@ export const EventStatisticModal = ({
   date,
   eventStatistic,
   title,
-  eventId,
 }: EventStatisticModalProps) => {
   const { t } = useTranslation('Design')
 
-  const data = useTableData(date, eventStatistic, eventId)
+  const data = useTableData(date, eventStatistic)
   const handleClose = () => {
     setIsOpen(false)
   }

package/src/events/event-statistic-modal/hooks/useTableData.tsx

@@ -11,7 +11,6 @@ import { StaticTableData } from '../../../table'
 export const useTableData = (
   date: Event['startAt'] | null,
   eventStatistic: EventStatistic | null,
-  eventId: string,
 ) => {
   const { t } = useTranslation('Design')
   const { formatNumber } = useIntl()
@@ -85,7 +84,7 @@ export const useTableData = (
   useEffect(() => {
     setTableRows(transformStatisticToTableRows(date, eventStatistic))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [date, eventId, eventStatistic])
+  }, [date, eventStatistic])
 
   return tableRows
 }

package/src/events/event-statistic-modal/utils/index.ts

@@ -1,7 +1,6 @@
 import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
 import { DateTime } from 'luxon'
 import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from '@licklist/core/dist/Config'
-import { maxBy } from 'lodash'
 
 export const TRANSLATION_KEYS = {
   shortQuantity: 'shortQuantity',
@@ -58,18 +57,10 @@ export const convertEventStatisticToTableData = (
           : -1,
     )
     .forEach(
-      (
-        { totalPerCategory, productsSummary = [], categoryName, eventId },
-        _,
-        // all category at summaryDays
-        selfCategory,
-      ) => {
+      ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
         let quantity = 0
-        totalAmount += totalPerCategory || 0
 
-        const allProductSummaryAtCategory = selfCategory
-          .filter((category) => category.categoryName === categoryName)
-          .flatMap((categorySummary) => categorySummary.productsSummary)
+        totalAmount += totalPerCategory || 0
 
         if (!summaryMap.has(`${categoryName}`)) {
           summaryMap.set(`${categoryName}`, {
@@ -82,50 +73,36 @@ export const convertEventStatisticToTableData = (
           })
         }
 
-        productsSummary?.forEach((productSummary, productIndex) => {
-          quantity += productSummary.productsSold
-
-          const existingProduct = summaryMap.get(
-            `${categoryName}.${productSummary.name}`,
-          ) ?? {
-            metadata: {
-              _productsSold: 0,
-              _total: 0,
-            },
-          }
-
-          const overrides = allProductSummaryAtCategory.filter(
-            (summary) => summary.originalProductId === productSummary.id,
-          )
-
-          const maxTotalQuantity = maxBy(overrides, 'id')?.totalQuantity
-
-          const totalQuantity =
-            maxTotalQuantity || productSummary?.totalQuantity
-
-          summaryMap.set(`${categoryName}.${productSummary.name}`, {
-            name: productSummary.name,
-            key: `${eventId}.${categoryName}${productIndex}${productSummary.name}`,
-            quantity: totalQuantity
-              ? `${
-                  existingProduct.metadata._productsSold +
-                  productSummary.productsSold
-                } / ${totalQuantity}`
-              : String(
-                  existingProduct.metadata._productsSold +
-                    productSummary.productsSold,
-                ),
-            total: String(
-              existingProduct.metadata._total + productSummary.total,
-            ),
-            metadata: {
-              _productsSold:
-                existingProduct.metadata._productsSold +
-                productSummary.productsSold,
-              _total: existingProduct.metadata._total + productSummary.total,
-            },
-          })
-        })
+        productsSummary?.forEach(
+          ({ productsSold, name, totalQuantity, total }) => {
+            quantity += productsSold
+
+            const existingProduct = summaryMap.get(
+              `${categoryName}.${name}`,
+            ) ?? {
+              metadata: {
+                _productsSold: 0,
+                _total: 0,
+              },
+            }
+
+            summaryMap.set(`${categoryName}.${name}`, {
+              name,
+              key: `${eventId}.${categoryName}.${name}`,
+              quantity: totalQuantity
+                ? `${
+                    existingProduct.metadata._productsSold + productsSold
+                  } / ${totalQuantity}`
+                : String(existingProduct.metadata._productsSold + productsSold),
+              total: String(existingProduct.metadata._total + total),
+              metadata: {
+                _productsSold:
+                  existingProduct.metadata._productsSold + productsSold,
+                _total: existingProduct.metadata._total + total,
+              },
+            })
+          },
+        )
 
         const prevTotalPerCategory = summaryMap.get(
           `${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -49,7 +49,6 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
     },
     ref,
   ) => {
-    // TODO fix often updating of canvasSizes, which leads to flashing poingts
     const canvasSizes = useCanvasSize({ width, height })
 
     return (

package/src/events/event-venue-map/hooks/useCanvasSize.ts

@@ -10,17 +10,13 @@ export const useCanvasSize = ({
   width: componentWidth,
   height: componentHeight,
 }: CanvasSizeProps) => {
-  // TODO Fix often updating of width and height
   const { width, height } = useWindowDimensions()
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const memoizedDimensions = useMemo(() => ({ width, height }), [width])
-
   const memoedComponentParameters = useMemo(() => {
     if (!componentWidth && !componentHeight) return null
 
     return { width: componentWidth, height: componentHeight }
   }, [componentWidth, componentHeight])
 
-  return memoedComponentParameters || memoizedDimensions
+  return memoedComponentParameters || { width, height }
 }

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

@@ -21,6 +21,7 @@ export const BookingSummary = ({
   productsWithErrors = [],
   isLoading,
   hasPeopleInput,
+  isPaymentLink,
   peopleAmount,
   footer,
   headerComponent,
@@ -61,6 +62,7 @@ export const BookingSummary = ({
               <div className='products-by-menu-step'>
                 {menuSteps.map((menuStep) => (
                   <ProductsByMenuStep
+                    isPaymentLink={isPaymentLink}
                     key={menuStep.id}
                     orderItems={formValues}
                     step={menuStep}

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

@@ -7,17 +7,22 @@ type ProductSummaryProps = {
   name?: string
   productQuantityError?: string
   orderProduct: OrderItem
+  isPaymentLink?: boolean
 }
 
 export const ProductSummary = ({
   name,
   productQuantityError,
   orderProduct,
+  isPaymentLink,
 }: ProductSummaryProps) => {
   const { t } = useTranslation('Design')
   const { formatNumber } = useIntl()
 
-  const priceForOneProduct = orderProduct?.price
+  const priceForOneProduct =
+    !isPaymentLink && orderProduct?.hasDeposit
+      ? orderProduct?.deposit
+      : orderProduct?.price
 
   const fullPrice = formatNumber(priceForOneProduct * orderProduct?.quantity, {
     style: 'currency',