@qite/tide-booking-component 0.0.2-preview.8 → 1.0.0-preview

package/src/booking-wizard/features/product-options/tree-level.tsx

@@ -1,118 +0,0 @@
-import { selectOptions, updateOption } from "./product-options-slice";
-import { useDispatch, useSelector } from "react-redux";
-
-import Checkbox from "./checkbox";
-import OptionDetails from "./option-details";
-import { ProductOption } from "./product-options-api";
-import RadioButton from "./radio-button";
-import React from "react";
-import _, { isEmpty } from "lodash";
-import { parseISO } from "date-fns";
-import { fetchPriceDetails } from "../price-details/price-details-slice";
-import { useState } from "react";
-
-interface TreeLevelProps {
-  productOption: ProductOption;
-}
-
-const TreeLevel: React.FC<TreeLevelProps> = ({ productOption }) => {
-  const dispatch = useDispatch();
-
-  const [collapsed, setCollapsed] = useState(false);
-
-  const productOptions = useSelector(selectOptions);
-
-  const childProductOptions = _.compact(
-    Object.values(productOptions).filter(
-      (p) => p?.parentCode === productOption.code
-    )
-  );
-
-  const optionDetails = (
-    <OptionDetails
-      startDate={parseISO(productOption.fromDate)}
-      endDate={parseISO(productOption.toDate)}
-      price={productOption.price}
-      onToggleCollapse={(collapsed) => setCollapsed(collapsed)}
-      collapsed={collapsed}
-      isCollapsible={
-        productOptions.filter(
-          (childOption) => childOption.parentCode === productOption.code
-        ).length > 0
-      }
-    />
-  );
-
-  const handleSelectedChange: React.ChangeEventHandler<HTMLInputElement> = (
-    e
-  ) => {
-    const updatedProductOption: ProductOption = {
-      ...productOption,
-      isSelected: e.target.checked,
-    };
-
-    dispatch(updateOption(updatedProductOption));
-    dispatch(fetchPriceDetails());
-  };
-
-  const options =
-    childProductOptions.length > 0 && productOption.isSelected && !collapsed ? (
-      <div className="tree__level">
-        <table className="table table--striped">
-          <thead>
-            <tr>
-              <th>
-                <h6 className="tree__level-heading">Opties</h6>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {childProductOptions.map((childProductOption) => (
-              <tr key={childProductOption.code}>
-                <td>
-                  <TreeLevel productOption={childProductOption} />
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    ) : null;
-
-  const body = options ? <div className="tree__body">{options}</div> : null;
-
-  return (
-    <div className="tree__level">
-      <div className="tree__header">
-        <div className="tree__description-collapse">
-          {isEmpty(productOption.group) ? (
-            <Checkbox
-              text={productOption.name}
-              value=""
-              name=""
-              required={productOption.isRequired}
-              defaultChecked={productOption.isSelected}
-              onChange={handleSelectedChange}
-            >
-              {optionDetails}
-              {body}
-            </Checkbox>
-          ) : (
-            <RadioButton
-              text={productOption.name}
-              value=""
-              name={productOption.group ?? ""}
-              defaultChecked={productOption.isSelected}
-              onChange={handleSelectedChange}
-            >
-              {optionDetails}
-              {body}
-            </RadioButton>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TreeLevel;