/ src / components / Form / OfferFormSwitcher.jsx
OfferFormSwitcher.jsx
 1  import React, { useState } from "react";
 2  import styles from './offerformswitcher.module.scss'
 3  import CargoForm from "./CargoForm";
 4  import ServicesForm from "./ServicesForm";
 5  
 6  const OfferFormSwitcher = ({
 7      logo,
 8      updateLogo,
 9      logoUpdated,
10      prefill,
11      currencySymbol,
12      rows,
13      onFormMod,
14      onTableUpdate,
15      onRowAdd,
16      onRowRemove,
17      onPreviewToggle,
18      handleCargoSubmitForm,
19      handleTableData,
20      handleCargoData,
21      handleServicesData
22  }) => {
23    const [onServicesFormActive, setOnServicesFormActive] = useState(false);
24  
25    const handleCargoFormClick = ({}) => {
26      setOnServicesFormActive(false);
27    };
28  
29    const handleServicesFormClick = () => {
30      setOnServicesFormActive(true);
31    };
32  
33    return (
34      <div className={styles.switchContainer}>
35        <div className={styles.switchButtonContainer}>
36          <button
37            className={`${styles.switchButton} ${
38              !onServicesFormActive ? styles.active : styles.inactive
39            }`}
40            onClick={handleCargoFormClick}
41          >
42            Cargo
43          </button>
44          <button
45            className={`${styles.switchButton} ${
46              onServicesFormActive ? styles.active : styles.inactive
47            }`}
48            onClick={handleServicesFormClick}
49          >
50            Services
51          </button>
52        </div>
53        <div className={styles.contentContainer}>
54          <div className={styles.componentWrapper}>
55            {onServicesFormActive ?
56             <ServicesForm
57                  prefill={prefill}
58                  rows={rows}
59                  logo={logo}
60                  updateLogo={updateLogo}
61                  logoUpdated={logoUpdated}
62                  currencySymbol={currencySymbol}
63                  onFormMod={onFormMod}
64                  onPreviewToggle={onPreviewToggle}
65                  onRowAdd={onRowAdd}
66                  onRowRemove={onRowRemove}
67                  onTableUpdate={onTableUpdate}
68                  onTableDataToTemplate={handleTableData}
69              /> :
70              <CargoForm
71                  prefill={prefill}
72                  rows={rows}
73                  logo={logo}
74                  updateLogo={updateLogo}
75                  logoUpdated={logoUpdated}
76                  currencySymbol={currencySymbol}
77                  onFormMod={onFormMod}
78                  onPreviewToggle={onPreviewToggle}
79                  onRowAdd={onRowAdd}
80                  onRowRemove={onRowRemove}
81                  onTableUpdate={onTableUpdate}
82                  onTableDataToTemplate={handleTableData}
83              />}
84          </div>
85        </div>
86      </div>
87    );
88  };
89  
90  export default OfferFormSwitcher;