WalletOverviewPayoutSection.tsx
unknown
plain_text
2 months ago
5.9 kB
15
Indexable
import { currencyValueFormat } from '@pabau/quartz' import { PayoutSchedule, PayoutSection, StyledLink, WalletImage, WalletAdd, PayoutBalance, PayoutInfo, PayoutOptions, PayoutAmountInfo, } from '../styles' import { Button } from '../../General' import { BankOutlined } from '@ant-design/icons' import { DotButton, type ListOption } from '../../dotButton/DotButton' import { useBoolean } from 'usehooks-ts' import type { WalletSidebarProps } from '../types' import { useTranslationI18 } from '../../hooks/useTranslationI18' import walletMoney from '../../../assets/images/wallet-money.png' import { InfoModal } from './InfoModal' import { InfoModalIconStyled } from '../styles' import { Tooltip } from '../../DataDisplay' import { WalletTransfer } from './WalletTransfer' import { useEffect, useState } from 'react' export const WalletOverviewPayoutSection = ({ showPayoutDetailsModal, showPaymentDetailsModal, stripeBalanceData, showPayoutModal, stripeBankDetailsData, userData, isWalletTransferFlag, onSubmitTransfer, onSearchTransferAccount, stripeAccountsUserData, loadingCreateTransfer, generateStripeLoginUrl, }: Partial<WalletSidebarProps>) => { const { t } = useTranslationI18() const { value: infoModal, toggle: setInfoModal } = useBoolean(false) const { value: isDotButtonOpen, setValue: setIsDotButtonOpen } = useBoolean(false) const { value: isTransferModalOpen, setValue: setIsTransferModalOpen } = useBoolean(false) const [url, setUrl] = useState<string | undefined>(undefined) const assignStripeUrl = async (): Promise<void> => { const stripeDashboard = await generateStripeLoginUrl?.() setUrl(stripeDashboard) } // eslint-disable-next-line @nx/workspace/no-useeffect useEffect(() => { if (!url) { void assignStripeUrl() } // eslint-disable-next-line react-hooks/exhaustive-deps }, [url]) const menuList: ListOption[] = [ { key: 1, label: ( <StyledLink href="/eod/report"> {t('ui.wallet.sidebar.accountSummary')} </StyledLink> ), icon: undefined, }, { key: 2, label: t('ui.wallet.sidebar.paymentDetails'), icon: undefined, onClick: () => { setIsDotButtonOpen(false) showPaymentDetailsModal?.() }, }, { key: 3, label: t('ui.wallet.sidebar.payoutDetails'), icon: undefined, onClick: () => { showPayoutDetailsModal?.() setIsDotButtonOpen(false) }, }, { key: 4, label: t('ui.wallet.sidebar.stripeDashboard'), icon: undefined, onClick: () => { url !== undefined && window.open(url, '_blank') }, }, ] const availableToPayout = stripeBalanceData?.currency && currencyValueFormat( stripeBalanceData?.amount ?? 0, stripeBalanceData.currency ) const totalBalance = stripeBalanceData?.currency && currencyValueFormat?.( (stripeBalanceData?.amount ?? 0) + (stripeBalanceData?.pending_amount ?? 0), stripeBalanceData?.currency ) const handleOnCancel = (): void => { setIsTransferModalOpen(false) } return ( <> <WalletTransfer isTransferModalOpen={isTransferModalOpen} onCancel={handleOnCancel} onSearch={onSearchTransferAccount} onSubmitTransfer={onSubmitTransfer} stripeAccountsUserData={stripeAccountsUserData} loading={loadingCreateTransfer} /> <PayoutSection> <PayoutInfo> <PayoutAmountInfo> <PayoutBalance>{totalBalance}</PayoutBalance> <Tooltip title={t('wallet.sidebar.transfer.modal.title')}> {Boolean(isWalletTransferFlag) && ( <WalletAdd size={28} onClick={() => { setIsTransferModalOpen(true) }} /> )} </Tooltip> </PayoutAmountInfo> <PayoutOptions> <Button type="primary" icon={<BankOutlined />} onClick={showPayoutModal} disabled={(stripeBalanceData?.amount ?? 0) < 0} > {t('ui.wallet.sidebar.companyName.payout')} </Button> <DotButton customClass="dotButton" menuList={menuList} popoverPlacement="bottomRight" popoverTrigger="click" popoverVisible={isDotButtonOpen} setPopoverVisible={setIsDotButtonOpen} /> </PayoutOptions> </PayoutInfo> <div> {t('ui.wallet.sidebar.payoutAvailable', { payoutAvailable: availableToPayout, })} <Tooltip title={t('ui.wallet.sidebar.payoutTooltip')}> <InfoModalIconStyled aria-label="Payout info" onClick={setInfoModal} /> </Tooltip> <InfoModal infoModal={infoModal} setInfoModal={setInfoModal} totalBalance={totalBalance} availableToTransfer={availableToPayout} pendingTransactions={stripeBalanceData?.pending_amount} currency={userData?.currency} /> </div> <PayoutSchedule> <h4>{t('ui.wallet.sidebar.payoutSchedule')}</h4> <div> <WalletImage src={walletMoney} alt="wallet" preview={false} /> <p> {t('ui.wallet.sidebar.schedule.title')}: <strong>Daily</strong> <span> {t('ui.wallet.sidebar.schedule.description', { lastFourDigits: stripeBankDetailsData?.last4 ?? '0000', })} </span> </p> </div> </PayoutSchedule> </PayoutSection> </> ) }
Editor is loading...
Leave a Comment