import React, { useEffect, useState } from 'react'; import TipUrls from '../components/TipUrls' import ProfileUrl from '../components/ProfileUrl' import BuskPay from '../components/BuskPay'; import DonationsModule from '../components/DonationsModule'; import PropTypes from 'prop-types'; import SettingsModule from '../components/SettingsModule'; import { updateSuccess } from '../actions/settings'; import Flash from './Flash'; import StripeConnect from './AlertDialogs/StripeConnect'; import ConnectedPaymentMethods from './PaymentMethods/ConnectedPaymentMethods'; import PaymentSettings from "./PaymentSettings/PaymentSettings"; import Tabs from './Tabs/Tabs'; // Redux actions import { fullListSelect } from '../actions/settingsTipsActions'; import AddMorePaymentMethods from './PaymentMethods/AddMorePaymentMethods'; const SettingsTips = ({ dispatch, progressBar, tipsInfo, buskerTools }) => { const [viewport, setViewport] = useState({ width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }); React.useEffect(() => { let timer = setTimeout(() => dispatch(updateSuccess('close')), 5000); return () => { clearTimeout(timer); }; }, [tipsInfo.flash.message]) /*==================================== "YOUR PAYMENTS" TABS =====================================*/ const [activePaymentsTab, setActivePaymentsTab] = useState("tips-received"); const handlePaymentsTabSelection = tab => { setActivePaymentsTab(tab.id); // Remove "Full List" details anytime the tab is changed // so the correct table data can be shown at any time if (tipsInfo.currentFullList) { dispatch(fullListSelect(null)) } } // Pre-select the correct payments tab based on if the user is a Busker or not useEffect(() => { setActivePaymentsTab(tipsInfo.userIsBusker ? "tips-received" : "tips-given"); }, [tipsInfo.userIsBusker]) return (