@licklist/design 0.58.10 → 0.58.11-dev.0

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useForm } from "react-hook-form";
-import Form from "react-bootstrap/Form";
 
 import Button from "react-bootstrap/Button";
 import { useHistory } from "react-router-dom";
@@ -14,6 +13,7 @@ import {
   AttemptPaymentResponse,
 } from "@licklist/plugins/dist/hooks/Ryft/useRyftPayment";
 import { BlockLoader, ButtonLoader } from "../../static";
+import { injectComponentsInRyftForm } from "./utils/ryft-form";
 
 export const ryftErrorMap: Record<string, string> = {
   insufficient_funds: "insufficientFunds",
@@ -50,6 +50,7 @@ export const RyftPaymentForm = ({
   onSubmit,
 }: RyftPaymentFormProps) => {
   const { t } = useTranslation(["Design", "Validation", "Ryft"]);
+  const formRef = useRef<HTMLFormElement | null>(null);
   const history = useHistory();
 
   const [isValid, setIsValid] = useState(false);
@@ -117,6 +118,12 @@ export const RyftPaymentForm = ({
     }
   };
 
+  useEffect(
+    () => injectComponentsInRyftForm({ t }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [formRef.current?.childNodes?.length]
+  );
+
   useEffect(() => {
     if (!accountId.data || accountId.isError) return;
 
@@ -175,15 +182,14 @@ export const RyftPaymentForm = ({
 
   return (
     <>
-      <Form.Label>{t("Design:paymentDetails")}</Form.Label>
-      {/* For unknown reasons ryft doesn't work with bootstrap form */}
       <form
+        ref={formRef}
         id="ryft-pay-form"
         noValidate
         onSubmit={methods.handleSubmit(handleSubmit)}
         className="ryft-payment-form"
       >
-        <div className="submit-button-wrapper mt-3 p-1">
+        <div className="submit-button-wrapper mt-4 p-1">
           <Button type="submit" disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}
             {t("Design:buyNow")}

package/src/iframe/ryft/utils/ryft-form.ts

@@ -0,0 +1,47 @@
+import { TFunction } from "react-i18next";
+
+export const injectComponentsInRyftForm = ({
+  t,
+}: {
+  t: TFunction<string[]>;
+}) => {
+  const cardContainer = document.getElementById("ryft-pay-iframe");
+  const oldCardDividerContainer = document.getElementById(
+    "card-title-container"
+  );
+
+  if (!cardContainer || oldCardDividerContainer) {
+    return;
+  }
+
+  const cardTitle = document.createElement("div");
+  const cardText = document.createElement("div");
+  const cardTitleContainer = document.createElement("div");
+  cardTitleContainer.id = "card-title-container";
+  cardTitle.textContent = t("Design:enterCardDetails");
+  cardText.className = "bold-text form-label";
+  cardText.innerText = t("Design:paymentDetails");
+  cardTitleContainer.append(cardTitle, cardText);
+  cardContainer?.before(cardTitleContainer);
+
+  const payGrid = document.getElementById("ryft-pay-grid");
+
+  if (!payGrid) {
+    return;
+  }
+
+  // Adding title and divider for apple and google pay button
+  const mobilePayTitle = document.createElement("div");
+  const dividerText = document.createElement("div");
+  const divider = document.createElement("div");
+  const container = document.createElement("div");
+  mobilePayTitle.className = "mobile-pay-title";
+  mobilePayTitle.innerText = t("Design:expressCheckoutWith");
+  dividerText.id = "mobile-pay-divider-text";
+  dividerText.innerText = "or";
+  divider.id = "mobile-pay-divider";
+  container.id = "mobile-pay-divider-container";
+  container.append(dividerText, divider);
+  payGrid.before(mobilePayTitle);
+  payGrid.after(container);
+};

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

@@ -90,7 +90,7 @@ export const DateAndRecurrenceInput = ({
     clearEditState();
   });
 
-  const popoverId = useId()!;
+  const popoverId = useId();
 
   const { t } = useTranslation("Design");
 
@@ -228,6 +228,7 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
+                workHours={workHours}
               >
                 {providerHasBookingManagement && (
                   <AvailableTimesControl

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

@@ -5,9 +5,8 @@ import { Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useClickAway } from "react-use";
-import { TIMEZONE } from "@licklist/core/dist/Config/Date";
+import { TIMEZONE, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
-import { TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import { DateTime } from "luxon";
 import RRule, { Frequency } from "rrule";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
@@ -27,7 +26,6 @@ import {
 import { ProductSetRecurrenceOverridesControl } from "./ProductSetRecurrenceOverridesControl";
 import { MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE } from "../product/constants";
 
-
 export interface DateAndRecurrenceInputValues {
   menuRecurrences?: Partial<ProductSetRecurrence>[];
 }

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

@@ -307,7 +307,7 @@ export function ProductCategoriesControl({
         title={t("addCategory")}
         isOverride={isOverrides}
         onClick={() => {
-           if (isOverrides) return;
+          if (isOverrides) return;
           setIsSelectCategoryVisible(true);
         }}
       />

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

@@ -26,12 +26,16 @@ import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
 export interface WithIsLoading {
   isLoading: boolean;
 }
+export interface WithIdOptional {
+  id?: number;
+}
+
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[];
   isOverrides?: boolean;

package/src/product-set/hooks/useSortableTreeFunctions.ts

@@ -24,8 +24,10 @@ export const useSortableTreeFunctions = ({
   const cancelChanges = (index: number) => {
     if (isOverrides) return;
     if (!previousValue) {
+      // eslint-disable-next-line consistent-return
       return remove(index);
     }
+    // eslint-disable-next-line consistent-return
     return setValue(`${fieldName}.${index}` as const, previousValue);
   };
 

package/src/product-set/product/ProductControl.tsx

@@ -7,14 +7,17 @@ import {
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { ProductType } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import {
+  ProductType,
+  PRODUCT_DEfAULT_COLORS,
+} from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import clsx from "clsx";
 import {
   FieldNamePrefixPath,
   FormValues,
 } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useId } from "@react-aria/utils";
-import clsx from "clsx";
 import React, {
   ChangeEvent,
   useCallback,
@@ -36,6 +39,7 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
+
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -60,6 +64,7 @@ import {
   ProductQuantityControl,
   ProductQuantityRechargingControl,
 } from "./quantity";
+import { PropertyControl } from "../../snippet";
 import { TipTapEditor } from "../../tiptap-editor";
 import { IsDeletableEvent } from "../types";
 import { FixedDurationOptions } from "./fixed-duration-fields";
@@ -99,6 +104,7 @@ export interface ProductControlValues
   offset: number;
   serviceTime: number;
   sort: number | null;
+  color?: string;
 }
 
 export interface ProductControlProps<T>
@@ -144,7 +150,7 @@ export function ProductControl<T extends FormValues>({
   } = useFormContext<T>();
 
   const { setLoading } = useContext(ProductSetLoadingContext);
-  const { t } = useTranslation(["Design", "Validation"]);
+  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
@@ -389,6 +395,14 @@ export function ProductControl<T extends FormValues>({
               )}
             </Form.Control.Feedback>
           </Form.Group>
+
+          <PropertyControl<T>
+            item={`${fieldNamePrefix}.color` as Path<T>}
+            label={t("ProductSet:selectColor")}
+            isDisabled={isOverrides}
+            isRequired={false}
+            defaultColors={PRODUCT_DEfAULT_COLORS}
+          />
         </Col>
       </Row>
 

package/src/product-set/product/fixed-duration-fields/FixedDurationOptions.tsx

@@ -5,8 +5,6 @@ import { FieldNamePrefixPath } from "@licklist/plugins/dist/types/services/Form/
 import { useWatch } from "react-hook-form";
 import { FormNumberInput } from "../../../static";
 
-
-
 interface FixedDurationOptionsProps<T> extends FieldNamePrefixPath<T> {
   isOverrides?: boolean;
 }

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -26,6 +26,7 @@ export interface ProductCategoryControlValues extends FormValues {
   name: string;
   minSubItems: number | null;
   maxSubItems: number | null;
+  overallQuantity?: number | null;
   quantityType: QuantityType;
   type: CategoryType;
   isTimeRelated: boolean;
@@ -102,6 +103,7 @@ export function ProductCategoryControl({
   const collectUserInfoId = useId();
   const hasTicketId = useId();
   const zoneId = useId();
+  const overallCapacityId = useId();
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
@@ -127,7 +129,7 @@ export function ProductCategoryControl({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxSubItems, fieldNamePrefix]);
 
-  const shouldShowZoneSelect =
+  const isZoneCategory =
     category.type === CATEGORY_TYPE_FIXED_DURATION ||
     category.type === CATEGORY_TYPE_GAME;
 
@@ -328,50 +330,110 @@ export function ProductCategoryControl({
           </Col>
         </Row>
 
-        {shouldShowZoneSelect && (
-          <Row>
-            <Col>
-              <Form.Group controlId={zoneId}>
-                <Form.Label>{t("Design:zone")}</Form.Label>
-                <Controller
-                  control={control}
-                  name={`${fieldNamePrefix}.zoneId`}
-                  render={({ field }) => (
-                    <Form.Control
-                      as="select"
-                      disabled={isOverride}
-                      isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
-                        `${fieldNamePrefix}.zoneId`,
+        {isZoneCategory && (
+          <>
+            <Row>
+              <Col md={6} sm={6} xs={6}>
+                <Form.Group controlId={overallCapacityId}>
+                  <Form.Label>{t("Design:overallQuantity")}</Form.Label>
+                  <InputGroup hasValidation>
+                    <InputGroup.Prepend
+                      className="arrow-up-btn"
+                      onClick={() => {
+                        const currentOverallCapacity = Number(
+                          getValues(`${fieldNamePrefix}.overallQuantity`) || 0
+                        );
+                        setValue(
+                          `${fieldNamePrefix}.overallQuantity`,
+                          currentOverallCapacity + 1,
+                          { shouldValidate: true }
+                        );
+                      }}
+                    >
+                      <InputGroup.Text className="py-0 px-3">
+                        <IncrementIcon />
+                      </InputGroup.Text>
+                    </InputGroup.Prepend>
+                    <Controller
+                      control={control}
+                      name={`${fieldNamePrefix}.overallQuantity`}
+                      render={({ field }) => (
+                        <Form.Control
+                          min={0}
+                          step={1}
+                          type="number"
+                          disabled={isOverride}
+                          isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
+                            `${fieldNamePrefix}.overallQuantity`,
+                            errors
+                          )}
+                          {...field}
+                        />
+                      )}
+                      rules={{
+                        min: {
+                          value: 0,
+                          message: t("Validation:fieldMinNumber", {
+                            attribute: t("overallQuantity"),
+                            min: 0,
+                          }) as string,
+                        },
+                      }}
+                    />
+                    <Form.Control.Feedback type="invalid">
+                      {HookFormService.getErrors<ProductSetFormValues>(
+                        `${fieldNamePrefix}.overallQuantity`,
                         errors
                       )}
-                      {...field}
-                    >
-                      <option value={null}>{t("Design:choose")}</option>
-                      {zones.map((zone) => (
-                        <option key={zone.id} value={zone.id}>
-                          {zone.name}
-                        </option>
-                      ))}
-                    </Form.Control>
-                  )}
-                  rules={{
-                    required: {
-                      value: providerHasBookingManagement,
-                      message: t("Validation:fieldRequired", {
-                        attribute: t("zone"),
-                      }),
-                    },
-                  }}
-                />
-                <Form.Control.Feedback type="invalid">
-                  {HookFormService.getErrors<ProductSetFormValues>(
-                    `${fieldNamePrefix}.zoneId`,
-                    errors
-                  )}
-                </Form.Control.Feedback>
-              </Form.Group>
-            </Col>
-          </Row>
+                    </Form.Control.Feedback>
+                  </InputGroup>
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                <Form.Group controlId={zoneId}>
+                  <Form.Label>{t("Design:zone")}</Form.Label>
+                  <Controller
+                    control={control}
+                    name={`${fieldNamePrefix}.zoneId`}
+                    render={({ field }) => (
+                      <Form.Control
+                        as="select"
+                        disabled={isOverride}
+                        isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
+                          `${fieldNamePrefix}.zoneId`,
+                          errors
+                        )}
+                        {...field}
+                      >
+                        <option value={null}>{t("Design:choose")}</option>
+                        {zones.map((zone) => (
+                          <option key={zone.id} value={zone.id}>
+                            {zone.name}
+                          </option>
+                        ))}
+                      </Form.Control>
+                    )}
+                    rules={{
+                      required: {
+                        value: providerHasBookingManagement,
+                        message: t("Validation:fieldRequired", {
+                          attribute: t("zone"),
+                        }),
+                      },
+                    }}
+                  />
+                  <Form.Control.Feedback type="invalid">
+                    {HookFormService.getErrors<ProductSetFormValues>(
+                      `${fieldNamePrefix}.zoneId`,
+                      errors
+                    )}
+                  </Form.Control.Feedback>
+                </Form.Group>
+              </Col>
+            </Row>
+          </>
         )}
       </Col>
 

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -1,9 +1,7 @@
-import { DateTime } from "luxon";
 import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -25,22 +23,10 @@ export function WorkingHoursInputDescription() {
             <Row key={i}>
               <Col xs="auto">{weekdays[i]}:</Col>
               <Col>
-                {weekday?.end
-                  ? weekday.start
-                    ? t("timeInterval", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
-                        ),
-                        end: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
-                        ),
-                      })
-                    : t("timeFrom", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT
-                        ),
-                      })
-                  : null}
+                {t("timeInterval", {
+                  start: weekday.start,
+                  end: weekday.end,
+                })}
               </Col>
             </Row>
           );

package/src/recurring-date-picker-input/RecurrenceAndFrequencyInput.tsx

@@ -72,7 +72,6 @@ function RecurrenceAndFrequencyInput({
             </Form.Control.Feedback>
           </Form.Group>
         </Col>
-
       </Row>
 
       <Row>

package/src/recurring-date-picker-input/RecurringDatePickerInput.tsx

@@ -12,9 +12,14 @@ import {
 import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
 import { FormProvider, useForm } from "react-hook-form";
 import { Form } from "react-bootstrap";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
-import { parseAndValidateRRule, SupportedFrequency } from "./utils";
+import {
+  parseAndValidateRRule,
+  SupportedFrequency,
+  useWorkHoursValidationRules,
+} from "./utils";
 import { ConfirmModal } from "../modals";
 import { DeleteFieldButton } from "../product-set/elements";
 
@@ -26,6 +31,7 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
+  workHours?: WorkHour[];
 }
 
 export interface RecurringDatePickerInputValues {
@@ -51,6 +57,7 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
+  workHours,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -84,6 +91,8 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
+  const validationRules = useWorkHoursValidationRules(byWeekDay, workHours);
+
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -188,6 +197,7 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
+          {...validationRules}
         />
 
         {children}

package/src/recurring-date-picker-input/utils.ts

@@ -1,4 +1,8 @@
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { dateTimesSortFn } from "@licklist/plugins/dist/utils/dateTime";
 import { DateTime } from "luxon";
+import { useTranslation } from "react-i18next";
 import RRule, { Frequency, Weekday } from "rrule";
 
 export const getWeekdayForFrequency = ({
@@ -11,6 +15,7 @@ export const getWeekdayForFrequency = ({
   const parsedDate = DateTime.fromISO(date);
   return new Weekday(
     parsedDate.weekday - 1,
+    // eslint-disable-next-line no-nested-ternary
     frequency !== Frequency.MONTHLY
       ? undefined
       : parsedDate.day + 7 > parsedDate.daysInMonth
@@ -109,3 +114,73 @@ export const parseAndValidateRRule = ({
     until: options.until,
   } as ParsedRRuleOptions;
 };
+
+export const useWorkHoursValidationRules = (
+  byWeekDay: Weekday[] = [],
+  workHours: WorkHour[]
+) => {
+  const { t } = useTranslation("Validation");
+  // workhours of selected days, all if no days selected
+  const selectedWorkHours = byWeekDay.length
+    ? byWeekDay.map(({ weekday }) =>
+        workHours.find(({ day }) => day === weekday)
+      )
+    : workHours;
+
+  /**
+   * start time
+   */
+  const startTimes = selectedWorkHours
+    .map((workhour) => DateTime.fromFormat(workhour.start, TIME_FORMAT))
+    .sort(dateTimesSortFn("desc"));
+
+  const latestStartTime = startTimes[0];
+
+  const startTimeRules = {
+    validate: (date: string) => {
+      const selectedDate = DateTime.fromFormat(date, TIME_FORMAT);
+      if (selectedDate >= latestStartTime) return true;
+
+      return t("fieldTimeBefore", {
+        attribute: t("Design:startTimeSmall"),
+        time: latestStartTime.toFormat(TIME_FORMAT),
+      });
+    },
+  };
+
+  /**
+   * end time
+   */
+  const endTimes = selectedWorkHours
+    .map<string>(({ start, end }) => {
+      const startDateTime = DateTime.fromFormat(start, TIME_FORMAT);
+      const endDateTime = DateTime.fromFormat(end, TIME_FORMAT);
+
+      if (startDateTime <= endDateTime) return end;
+
+      // if end is before start, then it means that end is on the next day
+      // so count only to the end of current day
+      return "23:59";
+    })
+    .map((workhour) => DateTime.fromFormat(workhour, TIME_FORMAT))
+    .sort(dateTimesSortFn("asc"));
+
+  const earliestEndTime = endTimes[0];
+
+  const endTimeRules = {
+    validate: (date: string) => {
+      const selectedDate = DateTime.fromFormat(date, TIME_FORMAT);
+      if (selectedDate <= earliestEndTime) return true;
+
+      return t("fieldTimeAfter", {
+        attribute: t("Design:endTimeSmall"),
+        time: earliestEndTime.toFormat(TIME_FORMAT),
+      });
+    },
+  };
+
+  return {
+    startTimeRules,
+    endTimeRules,
+  };
+};

package/src/sales/booking/results/BookingResults.stories.tsx

@@ -3,11 +3,12 @@ import { Meta } from "@storybook/react";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import {
+  Order,
   ORDER_SOURCE_IFRAME,
   ORDER_SOURCE_MANUAL,
-} from "@licklist/core/src/DataMapper/Order/OrderDataMapper";
+} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+
 import { BookingResults } from "./BookingResults";
 
 export default {

package/src/sales/booking/results/components/ResultCard.tsx

@@ -12,7 +12,6 @@ import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import * as Config from "@licklist/core/dist/Config";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
-
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -22,8 +21,6 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
-// @TODO integrate when API will be available
-// activity and staff keys
 export const ResultCard = ({
   order,
   className,
@@ -41,10 +38,10 @@ export const ResultCard = ({
     startDate,
     products,
     source,
-    totalAmount,
     event,
     menu,
     remainingToPay,
+    paidAmount,
   } = order;
 
   const productList = products.map((product) => product.name)?.join(", ") || "";
@@ -108,7 +105,7 @@ export const ResultCard = ({
           )}
           <p>
             {t("paidAmount")}:{" "}
-            {formatNumber(totalAmount, {
+            {formatNumber(paidAmount, {
               style: "currency",
               currency: Config.Currency.GBP,
             })}