From bad386ee231b06184e2f0f9348072e7cdcb48a5a Mon Sep 17 00:00:00 2001 From: danidfra Date: Fri, 14 Mar 2025 12:28:27 -0300 Subject: [PATCH] Refactor component names and adjust translated texts --- .../components/modals/pay-request-modal.tsx | 26 +++ .../ui/components/modals/zap-invoice.tsx | 4 +- .../components/modals/zap-split/zap-split.tsx | 4 +- .../{zap-button.tsx => payment-button.tsx} | 6 +- .../zap/components/zap-pay-request-form.tsx | 189 ------------------ src/locales/ar.json | 6 +- src/locales/en.json | 8 +- src/locales/es.json | 8 +- src/locales/ga.json | 8 +- src/locales/hr.json | 2 +- src/locales/pt-BR.json | 8 +- src/locales/pt.json | 4 +- src/locales/zh-CN.json | 5 +- 13 files changed, 58 insertions(+), 220 deletions(-) create mode 100644 src/features/ui/components/modals/pay-request-modal.tsx rename src/features/zap/components/zap-button/{zap-button.tsx => payment-button.tsx} (94%) delete mode 100644 src/features/zap/components/zap-pay-request-form.tsx diff --git a/src/features/ui/components/modals/pay-request-modal.tsx b/src/features/ui/components/modals/pay-request-modal.tsx new file mode 100644 index 000000000..b6f89ad3c --- /dev/null +++ b/src/features/ui/components/modals/pay-request-modal.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import Modal from 'soapbox/components/ui/modal.tsx'; +import PayRequestForm from 'soapbox/features/zap/components/pay-request-form.tsx'; + +import type { Status as StatusEntity, Account as AccountEntity } from 'soapbox/types/entities.ts'; + +interface IPayRequestModal { + account: AccountEntity; + status?: StatusEntity; + onClose:(type?: string) => void; +} + +const PayRequestModal: React.FC = ({ account, status, onClose }) => { + const onClickClose = () => { + onClose('PAY_REQUEST'); + }; + + return ( + + + + ); +}; + +export default PayRequestModal; diff --git a/src/features/ui/components/modals/zap-invoice.tsx b/src/features/ui/components/modals/zap-invoice.tsx index 764d640b4..13f50a942 100644 --- a/src/features/ui/components/modals/zap-invoice.tsx +++ b/src/features/ui/components/modals/zap-invoice.tsx @@ -51,8 +51,8 @@ const ZapInvoiceModal: React.FC = ({ account, invoice, splitData, o const renderTitle = () => { return ( ); diff --git a/src/features/ui/components/modals/zap-split/zap-split.tsx b/src/features/ui/components/modals/zap-split/zap-split.tsx index 33ce20902..0abcaae0f 100644 --- a/src/features/ui/components/modals/zap-split/zap-split.tsx +++ b/src/features/ui/components/modals/zap-split/zap-split.tsx @@ -33,8 +33,8 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }: return (
diff --git a/src/features/zap/components/zap-button/zap-button.tsx b/src/features/zap/components/zap-button/payment-button.tsx similarity index 94% rename from src/features/zap/components/zap-button/zap-button.tsx rename to src/features/zap/components/zap-button/payment-button.tsx index 02a24cfae..d0122c7ef 100644 --- a/src/features/zap/components/zap-button/zap-button.tsx +++ b/src/features/zap/components/zap-button/payment-button.tsx @@ -30,7 +30,7 @@ interface IButton { } /** Customizable button element. */ -const ZapButton = forwardRef((props, ref): JSX.Element => { +const PaymentButton = forwardRef((props, ref): JSX.Element => { const { disabled = false, icon, @@ -75,6 +75,6 @@ const ZapButton = forwardRef((props, ref): JSX.Eleme }); export { - ZapButton as default, - ZapButton, + PaymentButton as default, + PaymentButton, }; diff --git a/src/features/zap/components/zap-pay-request-form.tsx b/src/features/zap/components/zap-pay-request-form.tsx deleted file mode 100644 index e95ecdd5f..000000000 --- a/src/features/zap/components/zap-pay-request-form.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import boltIcon from '@tabler/icons/outline/bolt.svg'; -import infoSquareRoundedIcon from '@tabler/icons/outline/info-square-rounded.svg'; -import xIcon from '@tabler/icons/outline/x.svg'; -import { useEffect, useState } from 'react'; -import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; -import { Link } from 'react-router-dom'; - -import { zap } from 'soapbox/actions/interactions.ts'; -import { openModal, closeModal } from 'soapbox/actions/modals.ts'; -import useZapSplit from 'soapbox/api/hooks/zap-split/useZapSplit.ts'; -import chestIcon from 'soapbox/assets/icons/chest.png'; -import coinStack from 'soapbox/assets/icons/coin-stack.png'; -import coinIcon from 'soapbox/assets/icons/coin.png'; -import moneyBag from 'soapbox/assets/icons/money-bag.png'; -import pileCoin from 'soapbox/assets/icons/pile-coin.png'; -import DisplayNameInline from 'soapbox/components/display-name-inline.tsx'; -import Avatar from 'soapbox/components/ui/avatar.tsx'; -import Button from 'soapbox/components/ui/button.tsx'; -import IconButton from 'soapbox/components/ui/icon-button.tsx'; -import Input from 'soapbox/components/ui/input.tsx'; -import Stack from 'soapbox/components/ui/stack.tsx'; -import SvgIcon from 'soapbox/components/ui/svg-icon.tsx'; -import Text from 'soapbox/components/ui/text.tsx'; -import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts'; -import { emojifyText } from 'soapbox/utils/emojify.tsx'; - -import ZapButton from './zap-button/zap-button.tsx'; - -import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities.ts'; - -const ZAP_PRESETS = [ - { amount: 50, icon: coinIcon }, - { amount: 200, icon: coinStack }, - { amount: 1_000, icon: pileCoin }, - { amount: 3_000, icon: moneyBag }, - { amount: 5_000, icon: chestIcon }, -]; - -interface IZapPayRequestForm { - status?: StatusEntity; - account: AccountEntity; - onClose?(): void; -} - -const closeIcon = xIcon; - -const messages = defineMessages({ - zap_button_rounded: { id: 'zap.button.text.rounded', defaultMessage: 'Zap {amount}K sats' }, - zap_button: { id: 'zap.button.text.raw', defaultMessage: 'Zap {amount} sats' }, - zap_commentPlaceholder: { id: 'zap.comment_input.placeholder', defaultMessage: 'Optional comment' }, -}); - -const ZapPayRequestForm = ({ account, status, onClose }: IZapPayRequestForm) => { - - const intl = useIntl(); - const dispatch = useAppDispatch(); - const [zapComment, setZapComment] = useState(''); - const [zapAmount, setZapAmount] = useState(50); // amount in millisatoshi - const { zapArrays, zapSplitData, receiveAmount } = useZapSplit(status, account); - const splitValues = zapSplitData.splitValues; - const hasZapSplit = zapArrays.length > 0; - - const handleSubmit = async (e?: React.FormEvent) => { - e?.preventDefault(); - const zapSplitAccounts = zapArrays.filter(zapData => zapData.account.id !== account.id); - const splitData = { hasZapSplit, zapSplitAccounts, splitValues }; - - const invoice = hasZapSplit ? await dispatch(zap(account, status, zapSplitData.receiveAmount * 1000, zapComment)) : await dispatch(zap(account, status, zapAmount * 1000, zapComment)); - // If invoice is undefined it means the user has paid through his extension - // In this case, we simply close the modal - - if (!invoice) { - dispatch(closeModal('PAY_REQUEST')); - // Dispatch the adm account - if (zapSplitAccounts.length > 0) { - dispatch(openModal('ZAP_SPLIT', { zapSplitAccounts, splitValues })); - } - return; - } - // open QR code modal - dispatch(closeModal('PAY_REQUEST')); - dispatch(openModal('ZAP_INVOICE', { account, invoice, splitData })); - }; - - const handleCustomAmount = (e: React.ChangeEvent) => { - e?.preventDefault(); - const inputAmount = e.target.value.replace(/[^0-9]/g, ''); - - const maxSendable = 250000000; - // multiply by 1000 to convert from satoshi to millisatoshi - if (maxSendable * 1000 > Number(inputAmount)) { - setZapAmount(Number(inputAmount)); - } - }; - - const renderZapButtonText = () => { - if (zapAmount >= 1000) { - return intl.formatMessage(messages.zap_button_rounded, { amount: Math.round((zapAmount / 1000) * 10) / 10 }); - } - return intl.formatMessage(messages.zap_button, { amount: zapAmount }); - }; - - useEffect(() => { - receiveAmount(zapAmount); - }, [zapAmount, zapArrays]); - - return ( - - - - - - - - - - - -
- {ZAP_PRESETS.map(({ amount, icon }) => ( - setZapAmount(amount)} - className='m-0.5 sm:m-1' - selected={zapAmount === amount} - icon={icon} - amount={amount} - /> - ))} -
- - -
- - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - {hasZapSplit &&

sats

} -
- - {hasZapSplit && ( - - - - )} - - - -
- setZapComment(e.target.value)} type='text' placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} /> -
- - {hasZapSplit ? - -