WalletOverviewPayoutSection.tsx

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>
    </>
  )
}