Refactor component names and adjust translated texts

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<IPayRequestModal> = ({ account, status, onClose }) => {
+  const onClickClose = () => {
+    onClose('PAY_REQUEST');
+  };
+
+  return (
+    <Modal width='lg'>
+      <PayRequestForm account={account} status={status} onClose={onClickClose} />
+    </Modal>
+  );
+};
+
+export default PayRequestModal;

src/features/ui/components/modals/zap-invoice.tsx

@@ -51,8 +51,8 @@ const ZapInvoiceModal: React.FC<IZapInvoice> = ({ account, invoice, splitData, o
   const renderTitle = () => {
     return (
       <FormattedMessage
-        id='nutzap.send_to'
+        id='zap.send_to'
-        defaultMessage='Send cashus to {target}'
+        defaultMessage='Send zaps to {target}'
         values={{ target: emojifyText(account.display_name, account.emojis) }}
       />
     );

src/features/ui/components/modals/zap-split/zap-split.tsx

@@ -33,8 +33,8 @@ const ZapSplit = ({ zapData, zapAmount, invoice, onNext, isLastStep, onFinish }:
     return (
       <div className='max-w-[280px] truncate'>
         <FormattedMessage
-          id='nutzap.send_to'
+          id='zap.send_to'
-          defaultMessage='Send cashus to {target}'
+          defaultMessage='Send zaps to {target}'
           values={{ target: emojifyText(account.display_name, account.emojis) }}
         />
       </div>

src/features/zap/components/zap-button/payment-button.tsx

@@ -30,7 +30,7 @@ interface IButton {
 }
 
 /** Customizable button element. */
-const ZapButton = forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
+const PaymentButton = forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Element => {
   const {
     disabled = false,
     icon,
@@ -75,6 +75,6 @@ const ZapButton = forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.Eleme
 });
 
 export {
-  ZapButton as default,
+  PaymentButton as default,
-  ZapButton,
+  PaymentButton,
 };

src/features/zap/components/zap-pay-request-form.tsx

@@ -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<Element>) => {
-    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<HTMLInputElement>) => {
-    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 (
-    <Stack space={4} element='form' onSubmit={handleSubmit} justifyContent='center' alignItems='center' className='relative'>
-      <Stack space={2} justifyContent='center' alignItems='center' >
-        <IconButton
-          src={closeIcon}
-          onClick={onClose}
-          className='absolute right-[-1%] top-[-2%] text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180'
-        />
-
-        <Text weight='semibold'>
-          <FormattedMessage
-            id='zap.send_to'
-            defaultMessage='Send zaps to {target}'
-            values={{ target: emojifyText(account.display_name, account.emojis) }}
-          />
-        </Text>
-        <Avatar src={account.avatar} size={50} />
-        <DisplayNameInline account={account} />
-      </Stack>
-
-      <div className='flex w-full justify-center'>
-        {ZAP_PRESETS.map(({ amount, icon }) => (
-          <ZapButton
-            onClick={() => setZapAmount(amount)}
-            className='m-0.5 sm:m-1'
-            selected={zapAmount === amount}
-            icon={icon}
-            amount={amount}
-          />
-        ))}
-      </div>
-
-      <Stack space={2}>
-        <div className='relative flex items-end justify-center gap-4'>
-          <Input
-            type='text' onChange={handleCustomAmount} value={zapAmount}
-            className='max-w-20 rounded-none border-0 border-b-4 p-0 text-center !text-2xl font-bold shadow-none !ring-0 dark:bg-transparent sm:max-w-28 sm:p-0.5 sm:!text-4xl'
-          />
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {hasZapSplit && <p className='absolute right-0 font-bold sm:-right-6 sm:text-xl'>sats</p>}
-        </div>
-
-        {hasZapSplit && (
-          <span className='flex justify-center text-xs'>
-            <FormattedMessage
-              id='zap.split_message.receiver'
-              defaultMessage='{receiver} will receive {amountReceiver} sats*'
-              values={{ receiver: emojifyText(account.display_name, account.emojis), amountReceiver: zapSplitData.receiveAmount }}
-            />
-          </span>
-        )}
-
-      </Stack>
-
-      <div className='w-full'>
-        <Input onChange={e => setZapComment(e.target.value)} type='text' placeholder={intl.formatMessage(messages.zap_commentPlaceholder)} />
-      </div>
-
-      {hasZapSplit ? <Stack space={2}>
-
-        <Button className='m-auto w-auto' type='submit' theme='primary' icon={boltIcon} text={'Zap sats'} disabled={zapAmount < 1 ? true : false} />
-
-        <div className='flex items-center justify-center gap-2 sm:gap-4'>
-          <span className='text-[10px] sm:text-xs'>
-            <FormattedMessage
-              id='zap.split_message.deducted'
-              defaultMessage='{amountDeducted} sats will deducted*'
-              values={{ instance: emojifyText(account.display_name, account.emojis), amountDeducted: zapSplitData.splitAmount }}
-            />
-          </span>
-
-          <Link to={'/'} className='text-xs underline'>
-            <SvgIcon src={infoSquareRoundedIcon} className='w-4' alt='info-square-rounded' />
-          </Link>
-
-        </div>
-      </Stack> : <Button className='m-auto w-auto' type='submit' theme='primary' icon={boltIcon} text={renderZapButtonText()} disabled={zapAmount < 1 ? true : false} />}
-
-    </Stack>
-  );
-};
-
-export default ZapPayRequestForm;

src/locales/ar.json

@@ -1520,8 +1520,8 @@
   "video.play": "تشغيل",
   "video.unmute": "تفعيل الصوت",
   "who_to_follow.title": "حسابات مقترحة",
-  "zap.comment_input.placeholder": "تعليق إختياري",
+  "payment_method.comment_input.placeholder": "تعليق إختياري",
   "zap.open_wallet": "فتح المحفظة",
-  "nutzap.send_to": "أرسل cashus إلى {target}",
+  "zap.send_to": "أرسل zaps إلى {target}",
-  "zap.send_to": "أرسل zaps إلى {target}"
+  "payment_method.send_to": "أرسل {method} إلى {target}"
 }

src/locales/en.json

@@ -1275,8 +1275,8 @@
   "notifications.filter.statuses": "Updates from people you follow",
   "notifications.group": "{count, plural, one {# notification} other {# notifications}}",
   "notifications.queue_label": "Click to see {count} new {count, plural, one {notification} other {notifications}}",
-  "nutzap.send_to": "Send cashus to {target}",
   "zap.send_to": "Send zaps to {target}",
+  "payment_method.send_to": "Send {method} to {target}",
   "oauth_consumer.tooltip": "Sign in with {provider}",
   "oauth_consumers.title": "Other ways to sign in",
   "onboarding.avatar.subtitle": "Just have fun with it.",
@@ -1727,13 +1727,13 @@
   "video.play": "Play",
   "video.unmute": "Unmute sound",
   "who_to_follow.title": "People To Follow",
-  "zap.button.text.raw": "Zap {amount} sats",
+  "payment_method.button.text.raw": "Zap {amount} sats",
   "zap.button.text.rounded": "Zap {amount}K sats",
-  "zap.comment_input.placeholder": "Optional comment",
+  "payment_method.comment_input.placeholder": "Optional comment",
   "zap.finish": "Finish",
   "zap.next": "Next",
   "zap.open_wallet": "Open Wallet",
-  "zap.split_message.deducted": "{amountDeducted} sats will deducted*",
+  "payment_method.split_message.deducted": "{amountDeducted} sats will deducted*",
   "zap.split_message.receiver": "{receiver} will receive {amountReceiver} sats*",
   "zap_split.question": "Why am I paying this?",
   "zap_split.text": "Your support will help us build an unstoppable empire and rule the galaxy!",

src/locales/es.json

@@ -1626,9 +1626,9 @@
   "video.play": "Reproducir",
   "video.unmute": "Dejar de silenciar sonido",
   "who_to_follow.title": "Personas a seguir",
-  "zap.button.text.raw": "Zap {amount} sats",
+  "payment_method.button.text.raw": "Zap {amount} sats",
-  "zap.comment_input.placeholder": "Comentario opcional",
+  "payment_method.comment_input.placeholder": "Comentario opcional",
   "zap.open_wallet": "Abrir Wallet",
-  "nutzap.send_to": "Enviar cachus a {target}",
+  "zap.send_to": "Enviar zaps a {target}",
-  "zap.send_to": "Enviar zaps a {target}"
+  "payment_method.send_to": "Enviar {method} a {target}"
 }

src/locales/ga.json

@@ -1679,15 +1679,15 @@
   "video.play": "Seinn",
   "video.unmute": "Fuaim gan iomrá",
   "who_to_follow.title": "Daoine le Leanúint",
-  "zap.button.text.raw": "Suíonn Zap {amount}",
+  "payment_method.button.text.raw": "Suíonn Zap {amount}",
   "zap.button.text.rounded": "Zap {amount}K shuíonn",
-  "zap.comment_input.placeholder": "Nóta roghnach",
+  "payment_method.comment_input.placeholder": "Nóta roghnach",
   "zap.finish": "Críochnaigh",
   "zap.next": "Ar Aghaidh",
   "zap.open_wallet": "Oscail Sparán",
-  "nutzap.send_to": "Seol cashus chuig {target}",
   "zap.send_to": "Seol zaps chuig {target}",
-  "zap.split_message.deducted": "Asbhainfear {amountDeducted} sats*",
+  "payment_method.send_to": "Seol {method} chuig {target}",
+  "payment_method.split_message.deducted": "Asbhainfear {amountDeducted} sats*",
   "zap.split_message.receiver": "Gheobhaidh {receiver} {amountReceiver} sats*",
   "zap_split.question": "Cén fáth a bhfuil mé ag íoc seo?",
   "zap_split.text": "Beidh do thacaíocht cabhrú linn a thógáil Impireacht unstoppable agus riail an réaltra!",

src/locales/hr.json

@@ -1484,5 +1484,5 @@
   "video.pause": "Zaustavi",
   "video.play": "Reproduciraj",
   "who_to_follow.title": "Moglo bi vam se svidjeti",
-  "zap.comment_input.placeholder": "Opcionalni komentar"
+  "payment_method.comment_input.placeholder": "Opcionalni komentar"
 }

src/locales/pt-BR.json

@@ -1635,12 +1635,12 @@
   "video.play": "Reproduzir",
   "video.unmute": "Reativar som",
   "who_to_follow.title": "Quem seguir",
-  "zap.button.text.raw": "Zap {amount} sats",
+  "payment_method.button.text.raw": "Zap {amount} sats",
-  "zap.comment_input.placeholder": "Comentário opcional",
+  "payment_method.comment_input.placeholder": "Comentário opcional",
   "zap.open_wallet": "Abrir Carteira",
-  "nutzap.send_to": "Enviar cashus para {target}",
   "zap.send_to": "Enviar zaps para {target}",
-  "zap.split_message.deducted": "{amountDeducted} sats serão deduzidos*",
+  "payment_method.send_to": "Enviar {method} para {target}",
+  "payment_method.split_message.deducted": "{amountDeducted} sats serão deduzidos*",
   "zap.split_message.receiver": "{receiver} receberá {amountReceiver} sats*",
   "zap_split.question": "Por que estou pagando isso?",
   "zap_split.text": "Seu apoio nos ajudará a construir um império imparável e governar a galáxia!",

src/locales/pt.json

@@ -1616,8 +1616,8 @@
   "video.play": "Reproduzir",
   "video.unmute": "Retirar do silêncio",
   "who_to_follow.title": "Quem Seguir",
-  "zap.comment_input.placeholder": "Comentário opcional",
+  "payment_method.comment_input.placeholder": "Comentário opcional",
   "zap.open_wallet": "Abrir Carteira",
-  "nutzap.send_to": "Enviar cashus para {target}",
+  "payment_method.send_to": "Enviar {method} para {target}",
   "zap.send_to": "Enviar zaps para {target}"
 }

src/locales/zh-CN.json

@@ -1620,8 +1620,9 @@
   "video.play": "播放",
   "video.unmute": "解除静音声音",
   "who_to_follow.title": "推荐关注",
-  "zap.button.text.raw": "打闪 {amount} 聪",
+  "payment_method.button.text.raw": "打闪 {amount} 聪",
-  "zap.comment_input.placeholder": "可选评论",
+  "payment_method.comment_input.placeholder": "可选评论",
   "zap.open_wallet": "打开钱包",
+  "payment_method.send_to": "发送打闪给 {target}",
   "zap.send_to": "发送打闪给 {target}"
 }