@licklist/design 0.71.18-dev.9 → 0.71.18

package/dist/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -102,6 +102,7 @@
 }
 
 .ryft-payment-form {
+
   .form-disable-box {
     display: none;
     position: absolute;
@@ -179,10 +180,11 @@
     .form-disable-box {
       top: 20rem;
     }
-  }
+}
 }
 
 @include media-breakpoint-up(md) {
+
   .ryft-payment-form,
   .form-disable-box {
     height: 50%;
@@ -211,4 +213,4 @@
   .divider {
     display: none !important;
   }
-}
+}

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14rem;
+      height: 14.25rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/dist/styles/sales/ManualBooking.scss

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

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

@@ -51,25 +51,6 @@
   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;

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.18-dev.9",
+  "version": "0.71.18",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.31.2-dev.11",
+    "@licklist/core": "0.32.7",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1-dev.8",
+    "@licklist/plugins": "0.35.6",
     "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.11",
+    "@licklist/core": "0.32.7",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1-dev.8",
+    "@licklist/plugins": "0.35.6",
     "@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

@@ -28,13 +28,11 @@ export const DEADLINE_NAME = [
 
 export type DeadLineNameType = (typeof DEADLINE_NAME)[number]
 
-type SaleDeadlineType =
-  | {
-      saleDeadline: null | number
-    }
-  | {
-      [key: string]: null | number
-    }
+type SaleDeadlineType = {
+  saleDeadline: null | number
+} | {
+  [key: string] : null | number
+}
 
 export const SaleDeadline = ({
   disabled = false,
@@ -54,8 +52,8 @@ export const SaleDeadline = ({
   const [deadlineType, setDeadlineType] = useState<DeadlineType>(
     SALE_DEADLINE_BEFORE_TYPE,
   )
-
-  const saleDeadline = watch(deadLineCategory || SALE_DEADLINE_NAME)
+  
+  const saleDeadline = watch(deadLineCategory || SALE_DEADLINE_NAME) 
 
   useEffect(() => {
     if (onlyBefore) return

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

@@ -40,6 +40,7 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
+                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

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

@@ -33,15 +33,15 @@ export const convertEventStatisticToTableData = (
     return []
   }
 
-  const summaryFormattedDate = DateTime.fromISO(date).toFormat(
-    DATE_TIME_FULL_FORMAT,
-  )
+  const summaryFormattedDate = DateTime.fromISO(date)
+    .toUTC()
+    .toFormat(DATE_FORMAT)
 
   const summaryDays =
     Object.keys(eventStatistic?.productCategorySummary)?.filter(
       (date) =>
         DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(
-          DATE_TIME_FULL_FORMAT,
+          DATE_FORMAT,
         ) === summaryFormattedDate,
     ) ?? []
 
@@ -100,8 +100,7 @@ export const convertEventStatisticToTableData = (
 
           const maxTotalQuantity = maxBy(overrides, 'id')?.totalQuantity
 
-          const totalQuantity =
-            maxTotalQuantity || productSummary?.totalQuantity
+          const totalQuantity = maxTotalQuantity || productSummary?.totalQuantity
 
           summaryMap.set(`${categoryName}.${productSummary.name}`, {
             name: productSummary.name,

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/activity-card/ActivityCard.stories.tsx

@@ -27,6 +27,7 @@ export const GridView: Story<ActivityCardProps> = (props) => {
 GridView.args = {
   layout: LAYOUT_GRID,
   title: 'Clay Pigeons & Axe Thowing',
+  duration: '60 mins',
   price: 'from £20',
 }
 
@@ -45,5 +46,6 @@ export const ListView: Story<ActivityCardProps> = (props) => {
 ListView.args = {
   layout: LAYOUT_LIST,
   title: 'Clay Pigeons & Axe Thowing',
+  duration: '60 mins',
   price: 'from £20',
 }

package/src/iframe/activity-card/ActivityCard.tsx

@@ -10,6 +10,7 @@ export const LAYOUT_LIST = 'list'
 
 export type ActivityCardProps = {
   title: ReactNode
+  duration: ReactNode
   price: ReactNode
   description?: ReactNode
   onSelect: () => void
@@ -23,6 +24,7 @@ export type ActivityCardProps = {
 
 export const ActivityCard = ({
   title,
+  duration,
   price,
   description,
   availableTimes,
@@ -46,6 +48,7 @@ export const ActivityCard = ({
 
         <div>
           <div className='activity-card-title'>{title}</div>
+          {duration && <div>{duration}</div>}
           {price && <div>{price}</div>}
           {description && (
             <div className='mt-2 activity-card-description'>{description}</div>
@@ -76,6 +79,7 @@ export const ActivityCard = ({
       <div className='activity-card-info'>
         <div className='activity-card-title mb-2'>{title}</div>
         {availableTimes && <div>{availableTimes}</div>}
+        {duration && <div>{duration}</div>}
         {price && <div>{price}</div>}
         {description && (
           <div className='mt-2 activity-card-description'>{description}</div>

package/src/iframe/event/ticket-description/TicketDescription.tsx

@@ -12,7 +12,6 @@ interface TicketDescriptionProps {
   title: string
   description: string
   className?: string
-  classNameProductModal?: string
   images: Image[] | null
   price?: ReactNode
   isRequired?: boolean
@@ -25,7 +24,6 @@ export function TicketDescription({
   title,
   description,
   className = '',
-  classNameProductModal = '',
   images,
   price,
   isRequired = false,
@@ -49,10 +47,10 @@ export function TicketDescription({
         className='ticket-description__wrapper'
         style={descriptionWrapperStyle}
       >
-        <div className={clsx('ticket-description__wrapper-children', classNameProductModal)}>
+        <div className='ticket-description__wrapper-children'>
           {imageSrc && (
-            <div className={clsx('image-wrapper', classNameProductModal && 'w-100 h-25')}>
-              <img className={clsx(classNameProductModal && 'w-100')} src={imageSrc} alt={title} />
+            <div className='image-wrapper'>
+              <img src={imageSrc} alt={title} />
             </div>
           )}
           {canExpand && description.length > DESCRIPTION_MAX_LENGTH ? (

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

@@ -2,8 +2,6 @@ import { useTranslation } from 'react-i18next'
 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
@@ -21,16 +19,11 @@ export const ProductSummary = ({
 
   const priceForOneProduct = orderProduct?.price
 
-  const modifierSetsPrice = calculateTotalModifiersPrice(
-    orderProduct?.orderModifiersSets,
-  )
-
   const fullPrice = formatNumber(priceForOneProduct * orderProduct?.quantity, {
     style: 'currency',
     currency: Config.Currency.GBP,
   })
 
-
   return (
     <div className='product'>
       <p className='m-0 name'>{name ?? orderProduct?.name}</p>
@@ -39,22 +32,9 @@ export const ProductSummary = ({
           {t('shortQuantity')}:&nbsp;{orderProduct?.quantity}
         </p>
 
-        {modifierSetsPrice && <p className='price'>{fullPrice}</p>}
+        <p className='price'>{fullPrice}</p>
       </div>
 
-      {!!orderProduct?.orderModifiersSets?.length && (
-        <>
-          {orderProduct.orderModifiersSets.map((modifier, index) => (
-            <ProductWithModifier
-              key={modifier.productQuantity.toString()}
-              modifier={modifier}
-              modifierKey={index}
-              isSummary
-            />
-          ))}
-        </>
-      )}
-
       {productQuantityError && (
         <p className='iframe-event__message-error'>{productQuantityError}</p>
       )}

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

@@ -22,23 +22,24 @@ export const SummaryTotal = ({
 
   const cartSum = isFreePayment
     ? 0
-    : cartSumByOrderProducts({ orderProducts }) + transactionFee
+    : cartSumByOrderProducts({orderProducts}) + transactionFee
 
-  const totalSum = isFreePayment
-    ? 0
-    : cartSumByOrderProducts({ orderProducts, isTotalSum: true }) +
-      transactionFee
 
-  const hasRemaingToPay = totalSum > cartSum
+    const totalSum = isFreePayment
+    ? 0
+    : cartSumByOrderProducts({orderProducts, isTotalSum: true}) +
+      transactionFee;
+      
+    const hasRemaingToPay = totalSum > cartSum;
 
   if (!orderProducts.length) {
     return null
   }
 
   return (
-    <div className='d-flex flex-column justify-content-between'>
+    <div className="d-flex flex-column justify-content-between">
       <SummaryTotalBlock
-        label={t(hasRemaingToPay ? 'payNow' : 'total')}
+        label={t(hasRemaingToPay ? "payNow" : "total")}
         amount={cartSum}
       />
       {!!totalWithDiscount && !isFreePayment && (
@@ -49,12 +50,9 @@ export const SummaryTotal = ({
       )}
       {hasRemaingToPay && (
         <>
-          <SummaryTotalBlock
-            label={t('remaining')}
-            amount={totalSum - cartSum}
-          />
+        <SummaryTotalBlock label={t("remaining")} amount={totalSum - cartSum} />
 
-          <SummaryTotalBlock label={t('total')} amount={totalSum} />
+        <SummaryTotalBlock label={t("total")} amount={totalSum} />
         </>
       )}
     </div>