@licklist/design 0.71.6-dev.1 → 0.71.6-dev.10

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

@@ -1,13 +1,25 @@
 import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock'
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
 
-export const cartSumByOrderProducts = (orderProducts?: OrderItem[]) => {
+export const cartSumByOrderProducts = ({
+  orderProducts,
+  isTotalSum,
+}: {
+  orderProducts?: OrderItem[]
+  isTotalSum?: boolean
+}) => {
   if (!orderProducts || !orderProducts.length) {
     return 0
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
     if (!product) return 0
-    const price = product?.hasDeposit ? product?.deposit : product?.price
+
+    const price = isTotalSum
+      ? product?.price
+      : product.hasDeposit
+        ? product?.deposit
+        : product?.price
+
     return prevSumValue + price * product.quantity
   }, 0)
 }

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

@@ -132,13 +132,10 @@ export const CategoryProduct = ({
           </div>
           <div className='iframe-event__product-price-wrapper'>
             <span className='product-price'>
-              {formatNumber(
-                category.allowDeposits ? product?.deposit : product.price,
-                {
-                  style: 'currency',
-                  currency: Config.Currency.GBP,
-                },
-              )}
+              {formatNumber(product.price, {
+                style: 'currency',
+                currency: Config.Currency.GBP,
+              })}
             </span>
             <ProductQuantityInput
               onChange={onChange}

package/src/iframe/page/components/PageBody/hooks/useResizePageBody.ts

@@ -69,8 +69,7 @@ export const useResizePageBody = () => {
           rightBlockHeight -
           CALENDAR_WRAPPER_HEIGHT,
       }
-  
-    }  
+    }
     return {
       maxHeight:
         height -

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -28,7 +28,7 @@ interface PaymentProps extends RyftPaymentFormProps {
   onFailIframePayment?: () => void
   data?: PaymentLinkResponse | null
   isLoading: boolean
-  bookingSummaryProps: Omit<BookingSummaryProps, 'totallWithDiscount'>
+  bookingSummaryProps: BookingSummaryProps
   paymentMetadata?: PaymentMetadata
 }
 
@@ -103,17 +103,33 @@ export const PaymentPage = ({
     )
   }
 
-  const orderTotalAmountByFormValues = cartSumByOrderProducts(
-    bookingSummaryProps?.formValues &&
+  const orderCartAmountByFormValues = cartSumByOrderProducts({
+    orderProducts:
+      bookingSummaryProps?.formValues &&
       Object.values(bookingSummaryProps?.formValues),
-  )
+  })
+
+  const orderTotalAmountByFormValues = cartSumByOrderProducts({
+    orderProducts:
+      bookingSummaryProps?.formValues &&
+      Object.values(bookingSummaryProps?.formValues),
+    isTotalSum: true,
+  })
+
+  const hasRemaingToPay =
+    orderTotalAmountByFormValues > orderCartAmountByFormValues
 
   // User can fill promo code only in iframe application.
   // It isn't possible via payment link. This check will
   // be applied when there is no metadata and in case when
   // orderValues sum is greater than amount in order.
   const isCalculatedAmountGreaterThanOrderAmount =
-    orderTotalAmountByFormValues > data?.amount
+    !hasRemaingToPay && orderCartAmountByFormValues > data?.amount
+
+  const isPaymentLinkWithRemainingToPay =
+    data?.remaining_to_pay && !!Number(data?.remaining_to_pay)
+  const totalPaidWithRemainingToPay =
+    data?.amount_to_pay && !!Number(data?.amount_to_pay)
 
   return (
     <Page className='payment_link'>
@@ -173,25 +189,56 @@ export const PaymentPage = ({
                     <>
                       {isCalculatedAmountGreaterThanOrderAmount && (
                         <SummaryTotalBlock
-                          label={t('total')}
+                          label={t(hasRemaingToPay ? 'payNow' : 'total')}
                           amount={
-                            orderTotalAmountByFormValues +
+                            orderCartAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
                           }
                         />
                       )}
 
-                      <SummaryTotalBlock
-                        label={t(
-                          isCalculatedAmountGreaterThanOrderAmount
-                            ? 'totalWithDiscount'
-                            : 'total',
-                        )}
-                        amount={
-                          data?.amount +
-                          (bookingSummaryProps?.transactionFee || 0)
-                        }
-                      />
+                      {hasRemaingToPay && (
+                        <SummaryTotalBlock
+                          label={t('remaining')}
+                          amount={
+                            orderTotalAmountByFormValues -
+                            orderCartAmountByFormValues
+                          }
+                        />
+                      )}
+
+                      {isPaymentLinkWithRemainingToPay && (
+                        <SummaryTotalBlock
+                          label={t('remaningToPay')}
+                          amount={Number(data?.remaining_to_pay)}
+                        />
+                      )}
+
+                      {totalPaidWithRemainingToPay && (
+                        <SummaryTotalBlock
+                          label={t('totalAmount')}
+                          amount={Number(data?.amount_to_pay)}
+                        />
+                      )}
+                      {isPaymentLinkWithRemainingToPay &&
+                      totalPaidWithRemainingToPay ? (
+                        <SummaryTotalBlock
+                          label={t('payNow')}
+                          amount={data?.amount}
+                        />
+                      ) : (
+                        <SummaryTotalBlock
+                          label={t(
+                            isCalculatedAmountGreaterThanOrderAmount
+                              ? 'totalWithDiscount'
+                              : 'total',
+                          )}
+                          amount={
+                            data?.amount +
+                            (bookingSummaryProps?.transactionFee || 0)
+                          }
+                        />
+                      )}
                     </>
                   )}
                 </div>

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -59,9 +59,19 @@ export const PaymentStatusPage = ({
 
   if (isLoading) return <LoaderIndicator isLoaded={false} />
 
-  const orderTotalAmounByFormValues = cartSumByOrderProducts(
-    Object.values(bookingSummaryProps?.formValues ?? {}),
-  )
+  const orderCartAmountByFormValues = cartSumByOrderProducts({
+    orderProducts:
+      bookingSummaryProps?.formValues &&
+      Object.values(bookingSummaryProps?.formValues),
+  })
+  const orderTotalAmountByFormValues = cartSumByOrderProducts({
+    orderProducts:
+      bookingSummaryProps?.formValues &&
+      Object.values(bookingSummaryProps?.formValues),
+    isTotalSum: true,
+  })
+  const hasRemaingToPay =
+    orderTotalAmountByFormValues > orderCartAmountByFormValues
 
   // User can fill promocode only in iframe appcliation.
   // It didn't possible via payment link. This check will
@@ -70,7 +80,9 @@ export const PaymentStatusPage = ({
   // For payment status page booking summary props can be empty
   // so we should also check for them
   const isCalculatedAmountGreaterThanOrderAmount =
-    bookingSummaryProps && orderTotalAmounByFormValues > totalAmount
+    !hasRemaingToPay &&
+    bookingSummaryProps &&
+    orderCartAmountByFormValues > totalAmount
 
   return (
     <Page
@@ -127,9 +139,9 @@ export const PaymentStatusPage = ({
                     <>
                       {isCalculatedAmountGreaterThanOrderAmount && (
                         <SummaryTotalBlock
-                          label={t('total')}
+                          label={t(hasRemaingToPay ? 'payNow' : 'total')}
                           amount={
-                            orderTotalAmounByFormValues +
+                            orderCartAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
                           }
                         />
@@ -146,6 +158,15 @@ export const PaymentStatusPage = ({
                           (bookingSummaryProps?.transactionFee || 0)
                         }
                       />
+                      {hasRemaingToPay && (
+                        <SummaryTotalBlock
+                          label={t('remaining')}
+                          amount={
+                            orderTotalAmountByFormValues -
+                            orderCartAmountByFormValues
+                          }
+                        />
+                      )}
                     </>
                   )}
                 </div>

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -35,6 +35,8 @@ export function EmailTemplateCard({
   return (
     <div className='snippet-template-card'>
       <div className='snippet-template-card-header'>
+        {/* TODO fix issue react router types
+      @ts-expect-error */}
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -33,6 +33,8 @@ export function SmsTemplateCard({
   return (
     <div className='snippet-template-card'>
       <div className='snippet-template-card-header'>
+        {/* TODO fix issue react router types
+      @ts-expect-error */}
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal

package/src/product-set/card/ProductSetCard.tsx

@@ -136,7 +136,13 @@ export function ProductSetCard({
                         onClick={(e) => e.stopPropagation()}
                       >
                         {Boolean(onRemove) && (
-                          <ConfirmModal>
+                          <ConfirmModal
+                            content={t(
+                              override
+                                ? 'confirmRemoveProductSetWithOverrides'
+                                : 'areUSureYouWantToPerformThisAction',
+                            )}
+                          >
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -198,7 +198,8 @@ export const DateAndRecurrenceInput = ({
     move(prevIndex, nextIndex)
   }
 
-  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
+  const errorMessage =
+    errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message
 
   useEffect(() => {
     if (fields.length) {
@@ -308,9 +309,7 @@ export const DateAndRecurrenceInput = ({
             })}
           />
 
-          <div className='manual-form-error'>
-            {errorMessage}
-          </div>
+          <div className='manual-form-error'>{errorMessage}</div>
         </div>
       </OverlayTrigger>
     </Form.Group>

package/src/product-set/control/DateInput.tsx

@@ -195,7 +195,8 @@ export const DateInput = ({
     }, 100)
   }
 
-  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
+  const errorMessage =
+    errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message
 
   return (
     <Form.Group>
@@ -284,9 +285,7 @@ export const DateInput = ({
             })}
           />
 
-          <div className='manual-form-error'>
-            {errorMessage}
-          </div>
+          <div className='manual-form-error'>{errorMessage}</div>
         </div>
       </OverlayTrigger>
     </Form.Group>

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

@@ -3,9 +3,9 @@ import { Button } from 'react-bootstrap'
 import { VenueMap } from '@licklist/core/dist/DataMapper/Product/VenueMapDataMapper'
 import MediaService from '@licklist/plugins/dist/services/Media/MediaService'
 import { PointProduct } from '@licklist/core/dist/DataMapper/Product/PointProductDataMapper'
+import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
 import { FullscreenModal } from '../../modals/fullscreen'
 import { EventVenueMap } from '../../events/event-venue-map'
-import { Product } from '../types'
 
 type VenueMapsControlProps = {
   venueMaps?: VenueMap[]

package/src/sales/modals/refund-modal/RefundModal.tsx

@@ -110,6 +110,7 @@ export const RefundModal = ({
                       }) as string
                     },
                   })}
+                  step={0.01}
                   disabled={isLoading || isFullRefund}
                   isInvalid={!!errors.amount}
                   min={0}

package/src/setting/admin/AdminSettingForm.tsx

@@ -145,10 +145,14 @@ export const AdminSettingForm = ({
                       ) && (
                         <>
                           {t('noCountryIsProvided')}
+                          {/* TODO fix issue react router types
+      @ts-expect-error */}
                           <Link
                             role='button'
                             to={`/provider/${providerMetadata?.providerType}/${providerMetadata?.providableId}/update`}
                           >
+                            {/* TODO fix issue react router types
+      @ts-expect-error */}
                             {t('here')}
                           </Link>
                         </>

package/src/setting/dashboard/snippet-templates/card/SnippetTemplateCard.tsx

@@ -24,6 +24,8 @@ export function SnippetTemplateCard({
   return (
     <div className='snippet-template-card'>
       <div className='snippet-template-card-header'>
+        {/* TODO fix issue react router types
+      @ts-expect-error */}
         <Link to={href}>{name}</Link>
         {hasPermission && !isDefault && (
           <button

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -29,7 +29,6 @@ import {
 import { NumberInput } from '../../../iframe/order-process/components/CategoryProduct/components/NumberInput'
 import { SnippetTemplateContext } from '../context/snippetTemplate'
 
-
 const DEFAULT_IMAGE =
   'https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80'
 
@@ -58,7 +57,7 @@ export function Preview({
 
   const [currentDate, setCurrentDate] = useState<DateTime>(defaultStartDay)
   const [selectedDate, setSelectedDate] = useState<DateTime | null>(null)
-  const calendarDates = getMonthCalendarDates(currentDate)
+  const calendarDates = getMonthCalendarDates({ initialDate: currentDate })
 
   return (
     <div className='w-100 h-100 snippet-template-preview'>
@@ -309,7 +308,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: 'Cofee',
                                   description: '',
                                   price: 15,
@@ -318,8 +316,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -338,7 +334,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: 'Cofee 2',
                                   description: '',
                                   price: 15,
@@ -347,8 +342,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,

package/src/static/date-range-input/utils/index.ts

@@ -58,7 +58,7 @@ export const stringDatesToInputValue = ({
   )} - ${DateTime.fromJSDate(nextEndDate).toFormat(INPUT_DATE_FORMAT)}`
 }
 
-export const getDateParams = (date: Date) => {
+export const getDateParams = (date: Date): [number, number, number] => {
   const year = date.getFullYear()
   const month = date.getMonth() + 1
   const monthDate = date.getDate()

package/src/static/loader/FullScreenLoader.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx'
+import { LoaderIndicator, LoaderIndicatorProps } from './LoaderIndicator'
+
+interface FullScreenLoaderProps {
+  containerClassName?: string
+  indicatorProps?: LoaderIndicatorProps
+}
+
+export const FullScreenLoader = ({
+  containerClassName,
+  indicatorProps,
+}: FullScreenLoaderProps) => (
+  <div className={clsx('fullscreen-loader', containerClassName)}>
+    <LoaderIndicator {...indicatorProps} />
+  </div>
+)

package/src/static/loader/LoaderIndicator.tsx

@@ -1,16 +1,17 @@
 /* eslint-disable react/jsx-pascal-case */
-import { ReactNode } from 'react'
+import { PropsWithChildren } from 'react'
 import * as ReactLoader from 'react-loader'
 import ILoaderOptions from '../../types/static/ILoaderOptions'
 
 export interface LoaderIndicatorProps {
-  children?: ReactNode | ReactNode[]
   isLoaded?: boolean
   options?: ILoaderOptions
   className?: string
 }
 
-export function LoaderIndicator(props: LoaderIndicatorProps) {
+export function LoaderIndicator(
+  props: PropsWithChildren<LoaderIndicatorProps>,
+) {
   const { children, isLoaded, options, className = '' } = props
 
   const defaultOptions: ILoaderOptions = {
@@ -37,6 +38,8 @@ export function LoaderIndicator(props: LoaderIndicatorProps) {
   } as ILoaderOptions
 
   return (
+    // TODO Remove this library, it's deprecated and even removed from npm packages
+    // @ts-expect-error
     <ReactLoader.default
       loaded={isLoaded!}
       options={mergedOptions}

package/src/static/loader/index.ts

@@ -5,3 +5,4 @@ export { ButtonLoader } from './ButtonLoader'
 export { SnippetLoader } from './SnippetLoader'
 export { PaymentLoader } from './PaymentLoader'
 export type { PaymentLoaderProps } from './PaymentLoader'
+export { FullScreenLoader } from './FullScreenLoader'

package/src/styles/availability-indicator/AvailabilityIndicator.scss

@@ -6,7 +6,6 @@
   font-weight: 300;
   width: 100%;
 
-
   .indicator-label {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -25,8 +24,6 @@
   }
 }
 
-
-
 .activity-card {
   .availability-indicator {
     margin-top: 0.5rem;

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

@@ -179,7 +179,7 @@
     .form-disable-box {
       top: 20rem;
     }
-}
+  }
 }
 
 @include media-breakpoint-up(md) {

package/src/styles/static/Loader.scss

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