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;