@qite/tide-booking-component 1.4.123 → 1.4.124

package/src/shared/booking/summary.tsx

@@ -1,382 +1,382 @@
-import { compact, findIndex, isEmpty, isNil, uniqBy } from 'lodash';
-import React, { ReactNode, useEffect, useState } from 'react';
-import { SummaryCheckbox, TravelersFormValues } from '../../booking-wizard/types';
-import { buildClassName } from '../utils/class-util';
-import Icon from '../components/icon';
-import Spinner from '../../search-results/components/spinner/spinner';
-
-export interface SummaryNotification {
-  id: number;
-  title?: string | null;
-  description?: string | null;
-  hasToBeConfirmed?: boolean;
-  isConfirmed?: boolean;
-}
-
-export interface SummaryVoucherState {
-  code?: string;
-  isValidated?: boolean;
-  isValid?: boolean;
-}
-
-export interface SharedSummaryProps {
-  translations: any;
-  travelerFormValues: TravelersFormValues;
-  checkboxes?: SummaryCheckbox[] | null;
-  notifications?: SummaryNotification[] | null;
-  remarks?: string;
-  voucher?: SummaryVoucherState;
-  voucherCodes?: string[];
-  enableVoucher?: boolean;
-  allowOption?: boolean;
-  isOffer?: boolean;
-  customValidateText?: string;
-  isSubmitting?: boolean;
-  skipPayment?: boolean;
-  userValidated?: boolean;
-  renderOptions: () => ReactNode;
-  renderPreviousButton: () => ReactNode;
-  renderLoader?: () => ReactNode;
-  onSubmit: React.FormEventHandler<HTMLFormElement>;
-  onRemarksChange?: (text: string) => void;
-  onCheckboxesChange?: (checkboxes: SummaryCheckbox[]) => void;
-  onNotificationsChange?: (notifications: SummaryNotification[]) => void;
-  onVoucherChange?: (voucher: SummaryVoucherState) => void;
-  onValidateVoucher?: () => void;
-  onAddVoucher?: React.MouseEventHandler<HTMLButtonElement>;
-  onRemoveVoucher?: (code: string) => void;
-  onUserValidatedChange?: (isValid: boolean) => void;
-}
-
-const formatBirthDate = (birthDate?: string | null) => {
-  if (!birthDate) return '';
-
-  return birthDate.split('T')[0].split('-').reverse().join('/');
-};
-
-const SharedSummary: React.FC<SharedSummaryProps> = ({
-  translations,
-  travelerFormValues,
-  checkboxes,
-  notifications,
-  remarks = '',
-  voucher = {},
-  voucherCodes = [],
-  enableVoucher = false,
-  allowOption = false,
-  isOffer = false,
-  customValidateText,
-  isSubmitting = false,
-  skipPayment = false,
-  userValidated = true,
-  renderOptions,
-  renderPreviousButton,
-  renderLoader,
-  onSubmit,
-  onRemarksChange,
-  onCheckboxesChange,
-  onNotificationsChange,
-  onVoucherChange,
-  onValidateVoucher,
-  onAddVoucher,
-  onRemoveVoucher,
-  onUserValidatedChange
-}) => {
-  const [localCheckboxes, setLocalCheckboxes] = useState<SummaryCheckbox[] | undefined | null>(checkboxes);
-
-  useEffect(() => {
-    setLocalCheckboxes(checkboxes);
-  }, [checkboxes]);
-
-  useEffect(() => {
-    const checkboxesValidated = !isNil(localCheckboxes) ? localCheckboxes.every((checkbox) => checkbox.isSelected) : true;
-    const notificationsValidated = !isNil(notifications)
-      ? notifications.filter((notification) => notification.hasToBeConfirmed).every((notification) => notification.isConfirmed)
-      : true;
-
-    onUserValidatedChange?.(checkboxesValidated && notificationsValidated);
-  }, [localCheckboxes, notifications, onUserValidatedChange]);
-
-  const handleNotificationChange = (id: number, checked: boolean) => {
-    const updatedNotifications = (notifications ?? []).map((notification) =>
-      notification.id === id ? { ...notification, isConfirmed: checked } : notification
-    );
-
-    onNotificationsChange?.(updatedNotifications);
-  };
-
-  const handleCheckboxChange = (id: string) => {
-    if (isNil(localCheckboxes)) return;
-
-    const newCheckboxes = [...localCheckboxes];
-    const index = findIndex(localCheckboxes, (checkbox) => checkbox.id === id);
-
-    if (index < 0) return;
-
-    newCheckboxes[index] = {
-      ...newCheckboxes[index],
-      isSelected: !newCheckboxes[index].isSelected
-    };
-
-    setLocalCheckboxes(newCheckboxes);
-    onCheckboxesChange?.(newCheckboxes);
-  };
-
-  return (
-    <>
-      {isSubmitting && <Spinner label={skipPayment ? translations.SUMMARY.PROCESS_BOOKING : translations.SUMMARY.REDIRECT} />}
-      {!isSubmitting && (
-        <form className="form" name="booking--summary" id="booking--summary" onSubmit={onSubmit}>
-          <div className="form__booking--summary">
-            <div className="form__region">
-              <div className="form__row">
-                <div className="form__group">
-                  <div className="form__region-header">
-                    <h5 className="form__region-heading">{translations.SUMMARY.PERSONAL_DETAILS}</h5>
-                  </div>
-                </div>
-              </div>
-
-              {travelerFormValues.rooms.map((room, roomIndex) => (
-                <div className="form__row" key={roomIndex}>
-                  <div className="form__group">
-                    <div className="form__region-header">
-                      <h5 className="form__region-heading">
-                        {travelerFormValues.rooms.length > 1 ? `${translations.SHARED.ROOM} ${roomIndex + 1}` : translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP}
-                      </h5>
-                      <p className="form__region-label">
-                        {`${room.adults.length + room.children.length} ${
-                          room.adults.length + room.children.length === 1 ? translations.SUMMARY.TRAVELER : translations.SUMMARY.TRAVELERS
-                        }: ${compact([
-                          room.adults.length,
-                          room.adults.length === 1 && ` ${translations.SUMMARY.ADULT}`,
-                          room.adults.length > 1 && ` ${translations.SUMMARY.ADULTS}`,
-                          room.adults?.length && room.children?.length && ', ',
-                          room.children.length,
-                          room.children.length === 1 && ` ${translations.SUMMARY.CHILD}`,
-                          room.children.length > 1 && ` ${translations.SUMMARY.CHILDREN}`
-                        ]).join('')}`}
-                      </p>
-                    </div>
-                  </div>
-
-                  {[...room.adults, ...room.children].map((traveler) => {
-                    const isMainBooker = traveler.id === travelerFormValues.mainBookerId;
-
-                    return (
-                      <div className="form__group form__group--sm-50" key={traveler.id}>
-                        <ul className="list list--plain">
-                          <li className="list__item">
-                            <strong>
-                              {traveler.firstName} {traveler.lastName}
-                            </strong>{' '}
-                            {isMainBooker && <em>({translations.SUMMARY.MAIN_BOOKER})</em>}
-                          </li>
-                          <li className="list__item">{formatBirthDate(traveler.birthDate)}</li>
-                          {isMainBooker && (
-                            <>
-                              {travelerFormValues.street && (
-                                <li className="list__item">{`${travelerFormValues.street} ${compact([
-                                  travelerFormValues.houseNumber,
-                                  travelerFormValues.box
-                                ]).join(' ')}, ${travelerFormValues.zipCode} ${travelerFormValues.place}`}</li>
-                              )}
-                              {travelerFormValues.phone && <li className="list__item">{travelerFormValues.phone}</li>}
-                              {travelerFormValues.email && <li className="list__item">{travelerFormValues.email}</li>}
-                            </>
-                          )}
-                        </ul>
-                      </div>
-                    );
-                  })}
-                </div>
-              ))}
-            </div>
-
-            <div className="form__region">
-              <div className="form__row">
-                <div className="form__group">
-                  <div className="form__region-header">
-                    <h5 className="form__region-heading">{translations.SUMMARY.OPTIONS}</h5>
-                  </div>
-                </div>
-              </div>
-              <div className="form__row">
-                <div className="form__group">
-                  <ul className="list list--booking-summary">{renderOptions()}</ul>
-                </div>
-              </div>
-            </div>
-
-            {enableVoucher && (
-              <div className="form__region">
-                <div className="form__row">
-                  <div className="form__group">
-                    <div className="form__region-header">
-                      <h5 className="form__region-heading">{translations.SUMMARY.VOUCHERS}</h5>
-                    </div>
-                  </div>
-                </div>
-                <div className="form__row">
-                  <div className="form__group">
-                    <input
-                      type="text"
-                      className="form__input info-message__voucher__input"
-                      value={voucher.code ?? ''}
-                      onChange={(event) => onVoucherChange?.({ code: event.target.value })}
-                    />
-                    <button type="button" className={buildClassName(['cta', !voucher.code && 'cta--disabled'])} onClick={onValidateVoucher}>
-                      {translations.SUMMARY.VOUCHER_VALIDATE}
-                    </button>
-                  </div>
-                </div>
-                <div className="form__row">
-                  <div className="form__group info-message__voucher">
-                    {voucher.isValid && voucher.isValidated && (
-                      <div className="info-message info-message__voucher__valid">
-                        <span>{translations.SUMMARY.VOUCHER_VALID}</span>
-                        <button type="button" className="cta cta--secondary" onClick={onAddVoucher}>
-                          {translations.SUMMARY.ADD_VOUCHER}
-                        </button>
-                      </div>
-                    )}
-                    {!voucher.isValid && voucher.isValidated && <div className="info-message--error">{translations.SUMMARY.VOUCHER_INVALID}</div>}
-                  </div>
-                </div>
-                <div className="form__row">
-                  <ul className="info-message__voucher">
-                    {!isEmpty(voucherCodes) &&
-                      voucherCodes.map((code, index) => (
-                        <li key={`${code}-${index}`}>
-                          <div className="info-message__voucher__list">
-                            {code}{' '}
-                            <button type="button" className="cta--add-remove" onClick={() => onRemoveVoucher?.(code)}>
-                              <Icon height={16} name="ui-trashcan" />
-                            </button>
-                          </div>
-                        </li>
-                      ))}
-                  </ul>
-                </div>
-              </div>
-            )}
-
-            {!isEmpty(notifications) && (
-              <div className="form__region">
-                <div className="form__row">
-                  <div className="form__group">
-                    <div className="info-message">
-                      <Icon name="ui-tooltip" className="icon--secondary-color" />
-                      <div className="info-message__copy">
-                        <h5>{translations.SUMMARY.NOTIFICATIONS_TITLE}</h5>
-                        {uniqBy(
-                          (notifications ?? []).filter((notification) => !notification.hasToBeConfirmed),
-                          'id'
-                        ).map((notification) => (
-                          <span key={notification.id} className="checkbox__label-text">
-                            <strong className="checkbox__label-text--title">{notification.title}</strong>
-                            <span className="checkbox__label-text--description">{notification.description}</span>
-                          </span>
-                        ))}
-                        {uniqBy(
-                          (notifications ?? []).filter((notification) => notification.hasToBeConfirmed),
-                          'id'
-                        ).map((notification) => (
-                          <div className="checkbox" key={notification.id}>
-                            <label className="checkbox__label">
-                              <input
-                                type="checkbox"
-                                className="checkbox__input"
-                                checked={notification.isConfirmed}
-                                onChange={(event) => handleNotificationChange(notification.id, event.target.checked)}
-                              />
-                              <span className="checkbox__label-text">
-                                <strong className="checkbox__label-text--title">{notification.title}</strong>
-                                <span className="checkbox__label-text--description">{notification.description}</span>
-                              </span>
-                            </label>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-
-            <div className="form__region">
-              <div className="form__row">
-                <div className="form__group">
-                  <div className="form__region-header">
-                    <h5 className="form__region-heading">{translations.SUMMARY.REMARKS}</h5>
-                  </div>
-                </div>
-              </div>
-              <div className="form__row">
-                <div className="form__group">
-                  <textarea className="form__input" value={remarks} onChange={(event) => onRemarksChange?.(event.target.value)} />
-                </div>
-              </div>
-            </div>
-
-            <div className="form__region">
-              <div className="form__row">
-                <div className="form__group">
-                  <div className="info-message">
-                    <Icon name="ui-tooltip" className="icon--secondary-color" />
-                    <div className="info-message__copy">
-                      <h5>{translations.SUMMARY.VALIDATE_TITLE}</h5>
-                      {customValidateText ? (
-                        <div dangerouslySetInnerHTML={{ __html: customValidateText }} />
-                      ) : (
-                        <>
-                          <p>{isOffer ? translations.SUMMARY.VALIDATE_TEXT_OFFER : translations.SUMMARY.VALIDATE_TEXT_BOOKING}</p>
-                          {allowOption && <p>{translations.SUMMARY.VALIDATE_TEXT_OPTION}</p>}
-                        </>
-                      )}
-                      {localCheckboxes?.map((checkbox) => (
-                        <div className="checkbox" key={checkbox.id}>
-                          <label className="checkbox__label">
-                            <input
-                              type="checkbox"
-                              className="checkbox__input"
-                              checked={checkbox.isSelected}
-                              onChange={() => handleCheckboxChange(checkbox.id)}
-                            />
-                            <span className="checkbox__label-text" dangerouslySetInnerHTML={{ __html: checkbox.text }} />
-                          </label>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="booking__navigator">
-            {renderPreviousButton()}
-            {allowOption && (
-              <button
-                title={translations.STEPS.SUBMIT_OPTION}
-                className={buildClassName(['cta', !userValidated && 'cta--disabled'])}
-                disabled={!userValidated}
-                name="option">
-                {translations.STEPS.SUBMIT_OPTION}
-              </button>
-            )}
-            <button
-              title={isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING}
-              className={buildClassName(['cta', !userValidated && 'cta--disabled'])}
-              disabled={!userValidated}
-              name="default">
-              {isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING}
-            </button>
-          </div>
-        </form>
-      )}
-    </>
-  );
-};
-
-export default SharedSummary;
+import { compact, findIndex, isEmpty, isNil, uniqBy } from 'lodash';
+import React, { ReactNode, useEffect, useState } from 'react';
+import { SummaryCheckbox, TravelersFormValues } from '../../booking-wizard/types';
+import { buildClassName } from '../utils/class-util';
+import Icon from '../components/icon';
+import Spinner from '../../search-results/components/spinner/spinner';
+
+export interface SummaryNotification {
+  id: number;
+  title?: string | null;
+  description?: string | null;
+  hasToBeConfirmed?: boolean;
+  isConfirmed?: boolean;
+}
+
+export interface SummaryVoucherState {
+  code?: string;
+  isValidated?: boolean;
+  isValid?: boolean;
+}
+
+export interface SharedSummaryProps {
+  translations: any;
+  travelerFormValues: TravelersFormValues;
+  checkboxes?: SummaryCheckbox[] | null;
+  notifications?: SummaryNotification[] | null;
+  remarks?: string;
+  voucher?: SummaryVoucherState;
+  voucherCodes?: string[];
+  enableVoucher?: boolean;
+  allowOption?: boolean;
+  isOffer?: boolean;
+  customValidateText?: string;
+  isSubmitting?: boolean;
+  skipPayment?: boolean;
+  userValidated?: boolean;
+  renderOptions: () => ReactNode;
+  renderPreviousButton: () => ReactNode;
+  renderLoader?: () => ReactNode;
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+  onRemarksChange?: (text: string) => void;
+  onCheckboxesChange?: (checkboxes: SummaryCheckbox[]) => void;
+  onNotificationsChange?: (notifications: SummaryNotification[]) => void;
+  onVoucherChange?: (voucher: SummaryVoucherState) => void;
+  onValidateVoucher?: () => void;
+  onAddVoucher?: React.MouseEventHandler<HTMLButtonElement>;
+  onRemoveVoucher?: (code: string) => void;
+  onUserValidatedChange?: (isValid: boolean) => void;
+}
+
+const formatBirthDate = (birthDate?: string | null) => {
+  if (!birthDate) return '';
+
+  return birthDate.split('T')[0].split('-').reverse().join('/');
+};
+
+const SharedSummary: React.FC<SharedSummaryProps> = ({
+  translations,
+  travelerFormValues,
+  checkboxes,
+  notifications,
+  remarks = '',
+  voucher = {},
+  voucherCodes = [],
+  enableVoucher = false,
+  allowOption = false,
+  isOffer = false,
+  customValidateText,
+  isSubmitting = false,
+  skipPayment = false,
+  userValidated = true,
+  renderOptions,
+  renderPreviousButton,
+  renderLoader,
+  onSubmit,
+  onRemarksChange,
+  onCheckboxesChange,
+  onNotificationsChange,
+  onVoucherChange,
+  onValidateVoucher,
+  onAddVoucher,
+  onRemoveVoucher,
+  onUserValidatedChange
+}) => {
+  const [localCheckboxes, setLocalCheckboxes] = useState<SummaryCheckbox[] | undefined | null>(checkboxes);
+
+  useEffect(() => {
+    setLocalCheckboxes(checkboxes);
+  }, [checkboxes]);
+
+  useEffect(() => {
+    const checkboxesValidated = !isNil(localCheckboxes) ? localCheckboxes.every((checkbox) => checkbox.isSelected) : true;
+    const notificationsValidated = !isNil(notifications)
+      ? notifications.filter((notification) => notification.hasToBeConfirmed).every((notification) => notification.isConfirmed)
+      : true;
+
+    onUserValidatedChange?.(checkboxesValidated && notificationsValidated);
+  }, [localCheckboxes, notifications, onUserValidatedChange]);
+
+  const handleNotificationChange = (id: number, checked: boolean) => {
+    const updatedNotifications = (notifications ?? []).map((notification) =>
+      notification.id === id ? { ...notification, isConfirmed: checked } : notification
+    );
+
+    onNotificationsChange?.(updatedNotifications);
+  };
+
+  const handleCheckboxChange = (id: string) => {
+    if (isNil(localCheckboxes)) return;
+
+    const newCheckboxes = [...localCheckboxes];
+    const index = findIndex(localCheckboxes, (checkbox) => checkbox.id === id);
+
+    if (index < 0) return;
+
+    newCheckboxes[index] = {
+      ...newCheckboxes[index],
+      isSelected: !newCheckboxes[index].isSelected
+    };
+
+    setLocalCheckboxes(newCheckboxes);
+    onCheckboxesChange?.(newCheckboxes);
+  };
+
+  return (
+    <>
+      {isSubmitting && <Spinner label={skipPayment ? translations.SUMMARY.PROCESS_BOOKING : translations.SUMMARY.REDIRECT} />}
+      {!isSubmitting && (
+        <form className="form" name="booking--summary" id="booking--summary" onSubmit={onSubmit}>
+          <div className="form__booking--summary">
+            <div className="form__region">
+              <div className="form__row">
+                <div className="form__group">
+                  <div className="form__region-header">
+                    <h5 className="form__region-heading">{translations.SUMMARY.PERSONAL_DETAILS}</h5>
+                  </div>
+                </div>
+              </div>
+
+              {travelerFormValues.rooms.map((room, roomIndex) => (
+                <div className="form__row" key={roomIndex}>
+                  <div className="form__group">
+                    <div className="form__region-header">
+                      <h5 className="form__region-heading">
+                        {travelerFormValues.rooms.length > 1 ? `${translations.SHARED.ROOM} ${roomIndex + 1}` : translations.ROOM_OPTIONS_FORM.TRAVELER_GROUP}
+                      </h5>
+                      <p className="form__region-label">
+                        {`${room.adults.length + room.children.length} ${
+                          room.adults.length + room.children.length === 1 ? translations.SUMMARY.TRAVELER : translations.SUMMARY.TRAVELERS
+                        }: ${compact([
+                          room.adults.length,
+                          room.adults.length === 1 && ` ${translations.SUMMARY.ADULT}`,
+                          room.adults.length > 1 && ` ${translations.SUMMARY.ADULTS}`,
+                          room.adults?.length && room.children?.length && ', ',
+                          room.children.length,
+                          room.children.length === 1 && ` ${translations.SUMMARY.CHILD}`,
+                          room.children.length > 1 && ` ${translations.SUMMARY.CHILDREN}`
+                        ]).join('')}`}
+                      </p>
+                    </div>
+                  </div>
+
+                  {[...room.adults, ...room.children].map((traveler) => {
+                    const isMainBooker = traveler.id === travelerFormValues.mainBookerId;
+
+                    return (
+                      <div className="form__group form__group--sm-50" key={traveler.id}>
+                        <ul className="list list--plain">
+                          <li className="list__item">
+                            <strong>
+                              {traveler.firstName} {traveler.lastName}
+                            </strong>{' '}
+                            {isMainBooker && <em>({translations.SUMMARY.MAIN_BOOKER})</em>}
+                          </li>
+                          <li className="list__item">{formatBirthDate(traveler.birthDate)}</li>
+                          {isMainBooker && (
+                            <>
+                              {travelerFormValues.street && (
+                                <li className="list__item">{`${travelerFormValues.street} ${compact([
+                                  travelerFormValues.houseNumber,
+                                  travelerFormValues.box
+                                ]).join(' ')}, ${travelerFormValues.zipCode} ${travelerFormValues.place}`}</li>
+                              )}
+                              {travelerFormValues.phone && <li className="list__item">{travelerFormValues.phone}</li>}
+                              {travelerFormValues.email && <li className="list__item">{travelerFormValues.email}</li>}
+                            </>
+                          )}
+                        </ul>
+                      </div>
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+
+            <div className="form__region">
+              <div className="form__row">
+                <div className="form__group">
+                  <div className="form__region-header">
+                    <h5 className="form__region-heading">{translations.SUMMARY.OPTIONS}</h5>
+                  </div>
+                </div>
+              </div>
+              <div className="form__row">
+                <div className="form__group">
+                  <ul className="list list--booking-summary">{renderOptions()}</ul>
+                </div>
+              </div>
+            </div>
+
+            {enableVoucher && (
+              <div className="form__region">
+                <div className="form__row">
+                  <div className="form__group">
+                    <div className="form__region-header">
+                      <h5 className="form__region-heading">{translations.SUMMARY.VOUCHERS}</h5>
+                    </div>
+                  </div>
+                </div>
+                <div className="form__row">
+                  <div className="form__group">
+                    <input
+                      type="text"
+                      className="form__input info-message__voucher__input"
+                      value={voucher.code ?? ''}
+                      onChange={(event) => onVoucherChange?.({ code: event.target.value })}
+                    />
+                    <button type="button" className={buildClassName(['cta', !voucher.code && 'cta--disabled'])} onClick={onValidateVoucher}>
+                      {translations.SUMMARY.VOUCHER_VALIDATE}
+                    </button>
+                  </div>
+                </div>
+                <div className="form__row">
+                  <div className="form__group info-message__voucher">
+                    {voucher.isValid && voucher.isValidated && (
+                      <div className="info-message info-message__voucher__valid">
+                        <span>{translations.SUMMARY.VOUCHER_VALID}</span>
+                        <button type="button" className="cta cta--secondary" onClick={onAddVoucher}>
+                          {translations.SUMMARY.ADD_VOUCHER}
+                        </button>
+                      </div>
+                    )}
+                    {!voucher.isValid && voucher.isValidated && <div className="info-message--error">{translations.SUMMARY.VOUCHER_INVALID}</div>}
+                  </div>
+                </div>
+                <div className="form__row">
+                  <ul className="info-message__voucher">
+                    {!isEmpty(voucherCodes) &&
+                      voucherCodes.map((code, index) => (
+                        <li key={`${code}-${index}`}>
+                          <div className="info-message__voucher__list">
+                            {code}{' '}
+                            <button type="button" className="cta--add-remove" onClick={() => onRemoveVoucher?.(code)}>
+                              <Icon height={16} name="ui-trashcan" />
+                            </button>
+                          </div>
+                        </li>
+                      ))}
+                  </ul>
+                </div>
+              </div>
+            )}
+
+            {!isEmpty(notifications) && (
+              <div className="form__region">
+                <div className="form__row">
+                  <div className="form__group">
+                    <div className="info-message">
+                      <Icon name="ui-tooltip" className="icon--secondary-color" />
+                      <div className="info-message__copy">
+                        <h5>{translations.SUMMARY.NOTIFICATIONS_TITLE}</h5>
+                        {uniqBy(
+                          (notifications ?? []).filter((notification) => !notification.hasToBeConfirmed),
+                          'id'
+                        ).map((notification) => (
+                          <span key={notification.id} className="checkbox__label-text">
+                            <strong className="checkbox__label-text--title">{notification.title}</strong>
+                            <span className="checkbox__label-text--description">{notification.description}</span>
+                          </span>
+                        ))}
+                        {uniqBy(
+                          (notifications ?? []).filter((notification) => notification.hasToBeConfirmed),
+                          'id'
+                        ).map((notification) => (
+                          <div className="checkbox" key={notification.id}>
+                            <label className="checkbox__label">
+                              <input
+                                type="checkbox"
+                                className="checkbox__input"
+                                checked={notification.isConfirmed}
+                                onChange={(event) => handleNotificationChange(notification.id, event.target.checked)}
+                              />
+                              <span className="checkbox__label-text">
+                                <strong className="checkbox__label-text--title">{notification.title}</strong>
+                                <span className="checkbox__label-text--description">{notification.description}</span>
+                              </span>
+                            </label>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            <div className="form__region">
+              <div className="form__row">
+                <div className="form__group">
+                  <div className="form__region-header">
+                    <h5 className="form__region-heading">{translations.SUMMARY.REMARKS}</h5>
+                  </div>
+                </div>
+              </div>
+              <div className="form__row">
+                <div className="form__group">
+                  <textarea className="form__input" value={remarks} onChange={(event) => onRemarksChange?.(event.target.value)} />
+                </div>
+              </div>
+            </div>
+
+            <div className="form__region">
+              <div className="form__row">
+                <div className="form__group">
+                  <div className="info-message">
+                    <Icon name="ui-tooltip" className="icon--secondary-color" />
+                    <div className="info-message__copy">
+                      <h5>{translations.SUMMARY.VALIDATE_TITLE}</h5>
+                      {customValidateText ? (
+                        <div dangerouslySetInnerHTML={{ __html: customValidateText }} />
+                      ) : (
+                        <>
+                          <p>{isOffer ? translations.SUMMARY.VALIDATE_TEXT_OFFER : translations.SUMMARY.VALIDATE_TEXT_BOOKING}</p>
+                          {allowOption && <p>{translations.SUMMARY.VALIDATE_TEXT_OPTION}</p>}
+                        </>
+                      )}
+                      {localCheckboxes?.map((checkbox) => (
+                        <div className="checkbox" key={checkbox.id}>
+                          <label className="checkbox__label">
+                            <input
+                              type="checkbox"
+                              className="checkbox__input"
+                              checked={checkbox.isSelected}
+                              onChange={() => handleCheckboxChange(checkbox.id)}
+                            />
+                            <span className="checkbox__label-text" dangerouslySetInnerHTML={{ __html: checkbox.text }} />
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="booking__navigator">
+            {renderPreviousButton()}
+            {allowOption && (
+              <button
+                title={translations.STEPS.SUBMIT_OPTION}
+                className={buildClassName(['cta', !userValidated && 'cta--disabled'])}
+                disabled={!userValidated}
+                name="option">
+                {translations.STEPS.SUBMIT_OPTION}
+              </button>
+            )}
+            <button
+              title={isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING}
+              className={buildClassName(['cta', !userValidated && 'cta--disabled'])}
+              disabled={!userValidated}
+              name="default">
+              {isOffer ? translations.STEPS.SUBMIT_OFFER : translations.STEPS.SUBMIT_BOOKING}
+            </button>
+          </div>
+        </form>
+      )}
+    </>
+  );
+};
+
+export default SharedSummary;