@qite/tide-booking-component 1.4.92 → 1.4.93

package/src/booking-wizard/features/price-details/selectors.ts

@@ -1,117 +1,117 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { RootState } from '../../store';
-import { selectRequestRooms } from '../booking/selectors';
-import { isEmpty, sum } from 'lodash';
-import { PriceDetailsPerPaxType, PricePerPaxType } from '../../types';
-import { BookingPackageRequestRoom, BookingPriceDetail } from '@qite/tide-client';
-
-export const selectPriceDetails = (state: RootState) => state.priceDetails.priceDetails;
-
-export const selectPackagePriceDetails = createSelector(selectPriceDetails, (priceDetails) => priceDetails.filter((priceDetail) => priceDetail.isInPackage));
-
-export const selectSeparatePackagePriceDetails = createSelector(selectPackagePriceDetails, (pricedetails) => {
-  const result: BookingPriceDetail[] = [];
-  const filteredPriceDetails = pricedetails.filter((priceDetail) => priceDetail.isSeparate);
-
-  filteredPriceDetails.forEach((priceDetail) => {
-    const priceDetailToMerge = result.find(
-      (x) => x.productCode === priceDetail.productCode && x.accommodationCode === priceDetail.accommodationCode && x.productType === priceDetail.productType
-    );
-    if (priceDetailToMerge) {
-      priceDetailToMerge.total += priceDetail.total;
-      priceDetailToMerge.price += priceDetail.price;
-    } else {
-      result.push(Object.assign({}, priceDetail));
-    }
-  });
-
-  return result;
-});
-
-export const selectBasePrice = createSelector(selectPackagePriceDetails, (priceDetails) =>
-  sum(priceDetails.map((priceDetail) => priceDetail.price * priceDetail.amount))
-);
-
-export const selectSeparateExtraPriceDetails = createSelector(selectPriceDetails, (priceDetails) =>
-  priceDetails.filter((priceDetail) => !priceDetail.isInPackage && priceDetail.isSeparate)
-);
-
-export const selectTotalPrice = createSelector(selectBasePrice, selectSeparateExtraPriceDetails, (basePrice, separatePriceDetails) =>
-  sum([basePrice, ...separatePriceDetails.map((priceDetail) => priceDetail.price * priceDetail.amount)])
-);
-
-// Shared function to aggregate price and details per paxType
-const aggregatePricePerPaxType = (priceDetails: BookingPriceDetail[], requestRooms: BookingPackageRequestRoom[] | undefined): PricePerPaxType[] => {
-  if (!requestRooms || isEmpty(requestRooms)) return [];
-  if (!priceDetails || isEmpty(priceDetails)) return [];
-
-  // Compute paxType by age: >=2 INFANT, >=11 CHILD, else ADULT
-  const paxTypeToPaxIds: Record<string, Set<number>> = {};
-  requestRooms.forEach((room) => {
-    room.pax.forEach((pax) => {
-      let paxType = 'ADULT';
-      if (typeof pax.age === 'number') {
-        if (pax.age <= 11 && pax.age > 2) {
-          paxType = 'CHILD';
-        } else if (pax.age <= 2) {
-          paxType = 'INFANT';
-        }
-      }
-      if (!paxTypeToPaxIds[paxType]) paxTypeToPaxIds[paxType] = new Set();
-      paxTypeToPaxIds[paxType].add(pax.id);
-    });
-  });
-
-  const result: PricePerPaxType[] = [];
-
-  Object.keys(paxTypeToPaxIds).forEach((paxType) => {
-    const paxIds = Array.from(paxTypeToPaxIds[paxType]);
-    let pricePerPaxType = 0;
-    const detailsMap: Record<string, PriceDetailsPerPaxType> = {};
-
-    priceDetails.forEach((detail) => {
-      if (!detail.showPrice || !detail.pricePerPax) return;
-      detail.pricePerPax.forEach((ppp) => {
-        if (paxIds.includes(ppp.paxId)) {
-          pricePerPaxType += ppp.price;
-          const descKey = detail.priceDescription || '';
-          if (!detailsMap[descKey]) {
-            detailsMap[descKey] = {
-              numberOfPax: 1,
-              description: detail.priceDescription || '',
-              price: ppp.price,
-              paxIds: [ppp.paxId]
-            } as PriceDetailsPerPaxType;
-          } else {
-            detailsMap[descKey].price += ppp.price;
-            if (!detailsMap[descKey].paxIds.includes(ppp.paxId)) {
-              detailsMap[descKey].paxIds.push(ppp.paxId);
-              detailsMap[descKey].numberOfPax += 1;
-            }
-          }
-        }
-      });
-    });
-
-    result.push({
-      paxType,
-      pricePerPaxType,
-      numberOfPax: paxIds.length,
-      details: Object.values(detailsMap)
-    });
-  });
-
-  return result;
-};
-
-export const selectBasePricePerPaxType = createSelector(selectPackagePriceDetails, selectRequestRooms, (priceDetails, requestRooms) =>
-  aggregatePricePerPaxType(priceDetails, requestRooms)
-);
-
-export const selectSeparateExtraPriceDetailsPerPaxType = createSelector(selectSeparateExtraPriceDetails, selectRequestRooms, (priceDetails, requestRooms) =>
-  aggregatePricePerPaxType(priceDetails, requestRooms)
-);
-
-export const selectDeposit = (state: RootState) => state.priceDetails.deposit;
-
-export const selectIsFetchingPriceDetails = (state: RootState) => state.priceDetails.isBusy;
+import { createSelector } from '@reduxjs/toolkit';
+import { RootState } from '../../store';
+import { selectRequestRooms } from '../booking/selectors';
+import { isEmpty, sum } from 'lodash';
+import { PriceDetailsPerPaxType, PricePerPaxType } from '../../types';
+import { BookingPackageRequestRoom, BookingPriceDetail } from '@qite/tide-client';
+
+export const selectPriceDetails = (state: RootState) => state.priceDetails.priceDetails;
+
+export const selectPackagePriceDetails = createSelector(selectPriceDetails, (priceDetails) => priceDetails.filter((priceDetail) => priceDetail.isInPackage));
+
+export const selectSeparatePackagePriceDetails = createSelector(selectPackagePriceDetails, (pricedetails) => {
+  const result: BookingPriceDetail[] = [];
+  const filteredPriceDetails = pricedetails.filter((priceDetail) => priceDetail.isSeparate);
+
+  filteredPriceDetails.forEach((priceDetail) => {
+    const priceDetailToMerge = result.find(
+      (x) => x.productCode === priceDetail.productCode && x.accommodationCode === priceDetail.accommodationCode && x.productType === priceDetail.productType
+    );
+    if (priceDetailToMerge) {
+      priceDetailToMerge.total += priceDetail.total;
+      priceDetailToMerge.price += priceDetail.price;
+    } else {
+      result.push(Object.assign({}, priceDetail));
+    }
+  });
+
+  return result;
+});
+
+export const selectBasePrice = createSelector(selectPackagePriceDetails, (priceDetails) =>
+  sum(priceDetails.map((priceDetail) => priceDetail.price * priceDetail.amount))
+);
+
+export const selectSeparateExtraPriceDetails = createSelector(selectPriceDetails, (priceDetails) =>
+  priceDetails.filter((priceDetail) => !priceDetail.isInPackage && priceDetail.isSeparate)
+);
+
+export const selectTotalPrice = createSelector(selectBasePrice, selectSeparateExtraPriceDetails, (basePrice, separatePriceDetails) =>
+  sum([basePrice, ...separatePriceDetails.map((priceDetail) => priceDetail.price * priceDetail.amount)])
+);
+
+// Shared function to aggregate price and details per paxType
+const aggregatePricePerPaxType = (priceDetails: BookingPriceDetail[], requestRooms: BookingPackageRequestRoom[] | undefined): PricePerPaxType[] => {
+  if (!requestRooms || isEmpty(requestRooms)) return [];
+  if (!priceDetails || isEmpty(priceDetails)) return [];
+
+  // Compute paxType by age: >=2 INFANT, >=11 CHILD, else ADULT
+  const paxTypeToPaxIds: Record<string, Set<number>> = {};
+  requestRooms.forEach((room) => {
+    room.pax.forEach((pax) => {
+      let paxType = 'ADULT';
+      if (typeof pax.age === 'number') {
+        if (pax.age <= 11 && pax.age > 2) {
+          paxType = 'CHILD';
+        } else if (pax.age <= 2) {
+          paxType = 'INFANT';
+        }
+      }
+      if (!paxTypeToPaxIds[paxType]) paxTypeToPaxIds[paxType] = new Set();
+      paxTypeToPaxIds[paxType].add(pax.id);
+    });
+  });
+
+  const result: PricePerPaxType[] = [];
+
+  Object.keys(paxTypeToPaxIds).forEach((paxType) => {
+    const paxIds = Array.from(paxTypeToPaxIds[paxType]);
+    let pricePerPaxType = 0;
+    const detailsMap: Record<string, PriceDetailsPerPaxType> = {};
+
+    priceDetails.forEach((detail) => {
+      if (!detail.showPrice || !detail.pricePerPax) return;
+      detail.pricePerPax.forEach((ppp) => {
+        if (paxIds.includes(ppp.paxId)) {
+          pricePerPaxType += ppp.price;
+          const descKey = detail.priceDescription || '';
+          if (!detailsMap[descKey]) {
+            detailsMap[descKey] = {
+              numberOfPax: 1,
+              description: detail.priceDescription || '',
+              price: ppp.price,
+              paxIds: [ppp.paxId]
+            } as PriceDetailsPerPaxType;
+          } else {
+            detailsMap[descKey].price += ppp.price;
+            if (!detailsMap[descKey].paxIds.includes(ppp.paxId)) {
+              detailsMap[descKey].paxIds.push(ppp.paxId);
+              detailsMap[descKey].numberOfPax += 1;
+            }
+          }
+        }
+      });
+    });
+
+    result.push({
+      paxType,
+      pricePerPaxType,
+      numberOfPax: paxIds.length,
+      details: Object.values(detailsMap)
+    });
+  });
+
+  return result;
+};
+
+export const selectBasePricePerPaxType = createSelector(selectPackagePriceDetails, selectRequestRooms, (priceDetails, requestRooms) =>
+  aggregatePricePerPaxType(priceDetails, requestRooms)
+);
+
+export const selectSeparateExtraPriceDetailsPerPaxType = createSelector(selectSeparateExtraPriceDetails, selectRequestRooms, (priceDetails, requestRooms) =>
+  aggregatePricePerPaxType(priceDetails, requestRooms)
+);
+
+export const selectDeposit = (state: RootState) => state.priceDetails.deposit;
+
+export const selectIsFetchingPriceDetails = (state: RootState) => state.priceDetails.isBusy;

package/src/booking-wizard/features/price-details/util.ts

@@ -1,115 +1,115 @@
-import {
-  BookingOptionGroup,
-  BookingOptionPax,
-  BookingOptionUnit,
-  BookingPackage,
-  BookingPackageOption,
-  BookingPackageRoom,
-  ChangedLine,
-  PerBookingPackageOption,
-  PerPaxPackageOption,
-  PerUnitPackageOption
-} from '@qite/tide-client/build/types';
-
-export const updatePackageDetails = (packageDetails: BookingPackage, changedLines: ChangedLine[]): BookingPackage => {
-  return {
-    ...packageDetails,
-    options: packageDetails.options.map((opt) => {
-      return {
-        ...opt,
-        rooms: opt.isSelected ? updateRooms(opt.rooms, changedLines) : opt.rooms,
-        groups: opt.isSelected ? updateBookingGroups(opt.groups, changedLines) : opt.groups,
-        optionUnits: opt.isSelected ? updateOptionUnits(opt.optionUnits, changedLines) : opt.optionUnits,
-        optionPax: opt.isSelected ? updateOptionPax(opt.optionPax, changedLines) : opt.optionPax
-      } as BookingPackageOption;
-    })
-  };
-};
-
-// ROOMS
-const updateRooms = (rooms: BookingPackageRoom[], changedLines: ChangedLine[]) => {
-  return rooms.map((room) => ({
-    ...room,
-    options: room.options.map((option) => ({
-      ...option,
-      price: changedLines.find((x) => x.entryLineGuid == option.entryLineGuid)?.price ?? option.price
-    }))
-  }));
-};
-
-// PAX
-const updateOptionPax = (pax: BookingOptionPax[], changedLines: ChangedLine[]): BookingOptionPax[] => {
-  return pax.map((p) => ({
-    ...p,
-    groups: updatePaxGroups(p.groups, changedLines)
-  }));
-};
-
-const updatePaxGroups = (groups: BookingOptionGroup<PerPaxPackageOption>[], changedLines: ChangedLine[]): BookingOptionGroup<PerPaxPackageOption>[] => {
-  return groups.map((g) => ({
-    ...g,
-    options: g.options.map((o) => ({
-      ...o,
-      groups: updatePaxGroups(o.groups, changedLines),
-      line: {
-        ...o.line,
-        price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
-      },
-      alternatives: o.alternatives.map((a) => ({
-        ...a,
-        price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
-      }))
-    }))
-  }));
-};
-
-// UNITS
-const updateOptionUnits = (units: BookingOptionUnit[], changedLines: ChangedLine[]): BookingOptionUnit[] => {
-  return units.map((u) => ({
-    ...u,
-    groups: updateUnitGroups(u.groups, changedLines)
-  }));
-};
-
-const updateUnitGroups = (groups: BookingOptionGroup<PerUnitPackageOption>[], changedLines: ChangedLine[]): BookingOptionGroup<PerUnitPackageOption>[] => {
-  return groups.map((g) => ({
-    ...g,
-    options: g.options.map((o) => ({
-      ...o,
-      groups: updateUnitGroups(o.groups, changedLines),
-      pax: updateOptionPax(o.pax, changedLines),
-      line: {
-        ...o.line,
-        price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
-      },
-      alternatives: o.alternatives.map((a) => ({
-        ...a,
-        price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
-      }))
-    }))
-  }));
-};
-
-// BOOKING
-const updateBookingGroups = (
-  groups: BookingOptionGroup<PerBookingPackageOption>[],
-  changedLines: ChangedLine[]
-): BookingOptionGroup<PerBookingPackageOption>[] => {
-  return groups.map((g) => ({
-    ...g,
-    options: g.options.map((o) => ({
-      ...o,
-      groups: updateBookingGroups(o.groups, changedLines),
-      units: updateOptionUnits(o.units, changedLines),
-      pax: updateOptionPax(o.pax, changedLines),
-      line: {
-        ...o.line,
-        price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
-      },
-      alternatives: o.alternatives.map((a) => ({
-        ...a,
-        price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
-      }))
-    }))
-  }));
-};
+import {
+  BookingOptionGroup,
+  BookingOptionPax,
+  BookingOptionUnit,
+  BookingPackage,
+  BookingPackageOption,
+  BookingPackageRoom,
+  ChangedLine,
+  PerBookingPackageOption,
+  PerPaxPackageOption,
+  PerUnitPackageOption
+} from '@qite/tide-client/build/types';
+
+export const updatePackageDetails = (packageDetails: BookingPackage, changedLines: ChangedLine[]): BookingPackage => {
+  return {
+    ...packageDetails,
+    options: packageDetails.options.map((opt) => {
+      return {
+        ...opt,
+        rooms: opt.isSelected ? updateRooms(opt.rooms, changedLines) : opt.rooms,
+        groups: opt.isSelected ? updateBookingGroups(opt.groups, changedLines) : opt.groups,
+        optionUnits: opt.isSelected ? updateOptionUnits(opt.optionUnits, changedLines) : opt.optionUnits,
+        optionPax: opt.isSelected ? updateOptionPax(opt.optionPax, changedLines) : opt.optionPax
+      } as BookingPackageOption;
+    })
+  };
+};
+
+// ROOMS
+const updateRooms = (rooms: BookingPackageRoom[], changedLines: ChangedLine[]) => {
+  return rooms.map((room) => ({
+    ...room,
+    options: room.options.map((option) => ({
+      ...option,
+      price: changedLines.find((x) => x.entryLineGuid == option.entryLineGuid)?.price ?? option.price
+    }))
+  }));
+};
+
+// PAX
+const updateOptionPax = (pax: BookingOptionPax[], changedLines: ChangedLine[]): BookingOptionPax[] => {
+  return pax.map((p) => ({
+    ...p,
+    groups: updatePaxGroups(p.groups, changedLines)
+  }));
+};
+
+const updatePaxGroups = (groups: BookingOptionGroup<PerPaxPackageOption>[], changedLines: ChangedLine[]): BookingOptionGroup<PerPaxPackageOption>[] => {
+  return groups.map((g) => ({
+    ...g,
+    options: g.options.map((o) => ({
+      ...o,
+      groups: updatePaxGroups(o.groups, changedLines),
+      line: {
+        ...o.line,
+        price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
+      },
+      alternatives: o.alternatives.map((a) => ({
+        ...a,
+        price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
+      }))
+    }))
+  }));
+};
+
+// UNITS
+const updateOptionUnits = (units: BookingOptionUnit[], changedLines: ChangedLine[]): BookingOptionUnit[] => {
+  return units.map((u) => ({
+    ...u,
+    groups: updateUnitGroups(u.groups, changedLines)
+  }));
+};
+
+const updateUnitGroups = (groups: BookingOptionGroup<PerUnitPackageOption>[], changedLines: ChangedLine[]): BookingOptionGroup<PerUnitPackageOption>[] => {
+  return groups.map((g) => ({
+    ...g,
+    options: g.options.map((o) => ({
+      ...o,
+      groups: updateUnitGroups(o.groups, changedLines),
+      pax: updateOptionPax(o.pax, changedLines),
+      line: {
+        ...o.line,
+        price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
+      },
+      alternatives: o.alternatives.map((a) => ({
+        ...a,
+        price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
+      }))
+    }))
+  }));
+};
+
+// BOOKING
+const updateBookingGroups = (
+  groups: BookingOptionGroup<PerBookingPackageOption>[],
+  changedLines: ChangedLine[]
+): BookingOptionGroup<PerBookingPackageOption>[] => {
+  return groups.map((g) => ({
+    ...g,
+    options: g.options.map((o) => ({
+      ...o,
+      groups: updateBookingGroups(o.groups, changedLines),
+      units: updateOptionUnits(o.units, changedLines),
+      pax: updateOptionPax(o.pax, changedLines),
+      line: {
+        ...o.line,
+        price: changedLines.find((cl) => cl.entryLineGuid === o.line.entryLineGuid)?.price ?? o.line.price
+      },
+      alternatives: o.alternatives.map((a) => ({
+        ...a,
+        price: changedLines.find((cl) => cl.entryLineGuid === a.entryLineGuid)?.price ?? a.price
+      }))
+    }))
+  }));
+};

package/src/booking-wizard/features/product-options/no-options.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
-import Message from '../../components/message';
-import { selectTranslations } from '../booking/selectors';
-import { useSelector } from 'react-redux';
-
-const NoOptions = () => {
-  const translations = useSelector(selectTranslations);
-
-  return (
-    <div className="form__group">
-      <Message type="success" title={translations.OPTIONS_FORM.NO_OPTIONS_TITLE}>
-        <p>{translations.OPTIONS_FORM.NO_OPTIONS_MESSAGE}</p>
-      </Message>
-    </div>
-  );
-};
-
-export default NoOptions;
+import React from 'react';
+import Message from '../../components/message';
+import { selectTranslations } from '../booking/selectors';
+import { useSelector } from 'react-redux';
+
+const NoOptions = () => {
+  const translations = useSelector(selectTranslations);
+
+  return (
+    <div className="form__group">
+      <Message type="success" title={translations.OPTIONS_FORM.NO_OPTIONS_TITLE}>
+        <p>{translations.OPTIONS_FORM.NO_OPTIONS_MESSAGE}</p>
+      </Message>
+    </div>
+  );
+};
+
+export default NoOptions;

package/src/booking-wizard/features/product-options/none-option.tsx

@@ -1,73 +1,73 @@
-import { BookingOptionGroup, PerBookingPackageOption, PerPaxPackageOption, PerUnitPackageOption } from '@qite/tide-client/build/types';
-import React from 'react';
-import { buildClassName } from '../../../shared/utils/class-util';
-import { formatPrice } from '../../../shared/utils/localization-util';
-import { useSelector } from 'react-redux';
-import { selectCurrencyCode, selectTranslations } from '../booking/selectors';
-
-interface NoneOptionProps {
-  group: BookingOptionGroup<PerBookingPackageOption> | BookingOptionGroup<PerUnitPackageOption> | BookingOptionGroup<PerPaxPackageOption>;
-  parentId: string;
-  handleNoneSelectionChanged: () => void;
-}
-
-const NoneOption: React.FC<NoneOptionProps> = ({ group, parentId, handleNoneSelectionChanged }) => {
-  const translations = useSelector(selectTranslations);
-  const currencyCode = useSelector(selectCurrencyCode);
-  const selectedOption = group.options.find((x) => x.isSelected);
-  const showNoneOption = group.options.some((x) => x.requirementType === 2);
-  const noneSelected = !selectedOption;
-  const priceDifferencetext = selectedOption ? `- ${formatPrice(Math.abs(selectedOption.line.price), currencyCode)}` : '';
-
-  return (
-    <>
-      {showNoneOption && (
-        <tr>
-          <td>
-            <div className={buildClassName(['tree', noneSelected && 'tree--selected'])}>
-              <div className="tree__level">
-                <div className="tree__header">
-                  <div className="tree__description-collapse">
-                    <div className="radiobutton">
-                      <div className="radiobutton__label">
-                        <input
-                          type="radio"
-                          value={undefined}
-                          id={`${parentId}_NONE`}
-                          name={parentId}
-                          className={buildClassName(['radiobutton__input', 'radiobutton__input--parent'])}
-                          defaultChecked={noneSelected}
-                          onChange={handleNoneSelectionChanged}></input>
-                        <span className="radiobutton__label-text">
-                          <div className="date-list">
-                            <span className={buildClassName(['date-list__item', 'date-list__item--none'])}></span>
-                          </div>
-                        </span>
-                        <div className="tree__columns-actions">
-                          <div className="tree__columns">
-                            <div className="tree__column">
-                              <label htmlFor={`${parentId}_NONE`} className={buildClassName(['tree__product-name', 'tree__product-name--none'])}>
-                                {translations.OPTIONS_FORM.NONE}
-                              </label>
-                            </div>
-                            <div className="tree__column"></div>
-                            <div className="tree__column"></div>
-                            <div className={buildClassName(['tree__column', 'tree__column--price'])}>
-                              {!noneSelected && <span className={buildClassName(['price', 'price--decrease'])}>{priceDifferencetext}</span>}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </td>
-        </tr>
-      )}
-    </>
-  );
-};
-
-export default NoneOption;
+import { BookingOptionGroup, PerBookingPackageOption, PerPaxPackageOption, PerUnitPackageOption } from '@qite/tide-client/build/types';
+import React from 'react';
+import { buildClassName } from '../../../shared/utils/class-util';
+import { formatPrice } from '../../../shared/utils/localization-util';
+import { useSelector } from 'react-redux';
+import { selectCurrencyCode, selectTranslations } from '../booking/selectors';
+
+interface NoneOptionProps {
+  group: BookingOptionGroup<PerBookingPackageOption> | BookingOptionGroup<PerUnitPackageOption> | BookingOptionGroup<PerPaxPackageOption>;
+  parentId: string;
+  handleNoneSelectionChanged: () => void;
+}
+
+const NoneOption: React.FC<NoneOptionProps> = ({ group, parentId, handleNoneSelectionChanged }) => {
+  const translations = useSelector(selectTranslations);
+  const currencyCode = useSelector(selectCurrencyCode);
+  const selectedOption = group.options.find((x) => x.isSelected);
+  const showNoneOption = group.options.some((x) => x.requirementType === 2);
+  const noneSelected = !selectedOption;
+  const priceDifferencetext = selectedOption ? `- ${formatPrice(Math.abs(selectedOption.line.price), currencyCode)}` : '';
+
+  return (
+    <>
+      {showNoneOption && (
+        <tr>
+          <td>
+            <div className={buildClassName(['tree', noneSelected && 'tree--selected'])}>
+              <div className="tree__level">
+                <div className="tree__header">
+                  <div className="tree__description-collapse">
+                    <div className="radiobutton">
+                      <div className="radiobutton__label">
+                        <input
+                          type="radio"
+                          value={undefined}
+                          id={`${parentId}_NONE`}
+                          name={parentId}
+                          className={buildClassName(['radiobutton__input', 'radiobutton__input--parent'])}
+                          defaultChecked={noneSelected}
+                          onChange={handleNoneSelectionChanged}></input>
+                        <span className="radiobutton__label-text">
+                          <div className="date-list">
+                            <span className={buildClassName(['date-list__item', 'date-list__item--none'])}></span>
+                          </div>
+                        </span>
+                        <div className="tree__columns-actions">
+                          <div className="tree__columns">
+                            <div className="tree__column">
+                              <label htmlFor={`${parentId}_NONE`} className={buildClassName(['tree__product-name', 'tree__product-name--none'])}>
+                                {translations.OPTIONS_FORM.NONE}
+                              </label>
+                            </div>
+                            <div className="tree__column"></div>
+                            <div className="tree__column"></div>
+                            <div className={buildClassName(['tree__column', 'tree__column--price'])}>
+                              {!noneSelected && <span className={buildClassName(['price', 'price--decrease'])}>{priceDifferencetext}</span>}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  );
+};
+
+export default NoneOption;