diff --git a/src/api/hooks/admin/useManageZapSplit.ts b/src/api/hooks/admin/useManageZapSplit.ts index 37d2c961c..3b6d12101 100644 --- a/src/api/hooks/admin/useManageZapSplit.ts +++ b/src/api/hooks/admin/useManageZapSplit.ts @@ -1,11 +1,11 @@ import { useState, useEffect } from 'react'; import { defineMessages } from 'react-intl'; +import { type INewAccount } from 'soapbox/features/admin/manage-zap-split'; import { useApi } from 'soapbox/hooks'; import { baseZapAccountSchema, ZapSplitData } from 'soapbox/schemas/zap-split'; import toast from 'soapbox/toast'; -import { type INewAccount } from '../../../features/admin/manage-zap-split'; const messages = defineMessages({ zapSplitFee: { id: 'manage.zap_split.fees_error_message', defaultMessage: 'The fees cannot exceed 50% of the total zap.' }, @@ -18,6 +18,7 @@ export const useManageZapSplit = () => { const api = useApi(); const [formattedData, setFormattedData] = useState([]); const [weights, setWeights] = useState<{ [id: string]: number }>({}); + const [message, setMessage] = useState<{ [id: string]: string }>({}); const fetchZapSplitData = async () => { try { @@ -31,6 +32,11 @@ export const useManageZapSplit = () => { return acc; }, {} as { [id: string]: number }); setWeights(initialWeights); + const initialMessages = normalizedData.reduce((acc, item) => { + acc[item.account.id] = item.message; + return acc; + }, {} as { [id: string]: string }); + setMessage(initialMessages); } } catch (error) { toast.error(messages.fetchErrorMessage); @@ -48,11 +54,18 @@ export const useManageZapSplit = () => { })); }; - const sendNewSplit = async (newAccount?: INewAccount) => { + const handleMessageChange = (accountId: string, newMessage: string) => { + setMessage((prevMessage) => ({ + ...prevMessage, + [accountId]: newMessage, + })); + }; + + const sendNewSplit = async (newAccount?: INewAccount, newMessage?: string) => { try { const updatedZapSplits = formattedData.reduce((acc: { [id: string]: { message: string; weight: number } }, zapData) => { acc[zapData.account.id] = { - message: zapData.message, + message: message[zapData.account.id] || zapData.message, weight: weights[zapData.account.id] || zapData.weight, }; return acc; @@ -95,6 +108,8 @@ export const useManageZapSplit = () => { return { formattedData, weights, + message, + handleMessageChange, handleWeightChange, sendNewSplit, removeAccount, diff --git a/src/features/admin/manage-zap-split.tsx b/src/features/admin/manage-zap-split.tsx index e9857bc14..833471357 100644 --- a/src/features/admin/manage-zap-split.tsx +++ b/src/features/admin/manage-zap-split.tsx @@ -3,7 +3,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl'; import Account from 'soapbox/components/account'; import List, { ListItem } from 'soapbox/components/list'; -import { Button, Column, HStack, Stack } from 'soapbox/components/ui'; +import { Button, Column, HStack, Input, Stack } from 'soapbox/components/ui'; import { useManageZapSplit } from '../../api/hooks/admin/useManageZapSplit'; import AddNewAccount from '../ui/components/new-account-zap-split'; @@ -23,7 +23,7 @@ interface INewAccount{ const ManageZapSplit: React.FC = () => { const intl = useIntl(); - const { formattedData, weights, handleWeightChange, sendNewSplit, removeAccount } = useManageZapSplit(); + const { formattedData, weights, message, handleMessageChange, handleWeightChange, sendNewSplit, removeAccount } = useManageZapSplit(); const [hasNewAccount, setHasNewAccount] = useState(false); const [newWeight, setNewWeight] = useState(0.05); const [newAccount, setNewAccount] = useState({ acc: '', message: '', weight: Number((newWeight * 100).toFixed()) }); @@ -54,17 +54,28 @@ const ManageZapSplit: React.FC = () => { {formattedData.map((data) => ( -
-
+
+
- + +
+ + + handleMessageChange(data.account.id, e.target.value) + } + /> +
+ handleWeightChange(data.account.id, weight)} /> -