Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | import { usePostUpdateGiftshowMutation } from '@lib/api/mutations';
import { useGetTotalGiftshowListQuery } from '@lib/api/queries';
import { Button, Form, Select, message } from 'antd';
import { Delta } from 'quill';
import { styled } from 'styled-components';
type ChangeGiftshowModalProps = {
rewardId: string;
prevCustomData: string;
closeModal: () => unknown;
};
export default function ChangeGiftshowModal({
rewardId,
prevCustomData,
closeModal
}: ChangeGiftshowModalProps) {
const { data: giftshows } = useGetTotalGiftshowListQuery();
const { mutateAsync } = usePostUpdateGiftshowMutation();
const [form] = Form.useForm();
const getGoodsInfo = (goodsCode: string) =>
giftshows?.data?.result.goodsList.find((goods) => goods.goodsCode === goodsCode);
const handleSubmit = async (values: { goodsCode: string }) => {
try {
const customData = JSON.parse(prevCustomData);
customData.goodsCode = values.goodsCode;
const { content, goodsImgB, affiliate, validPrdDay } = getGoodsInfo(values.goodsCode) || {};
const contentToDelta = {
ops: [
{ insert: '교환처\n', attributes: { bold: true } },
{ insert: `${affiliate}\n` },
{ insert: '유효기간\n', attributes: { bold: true } },
{ insert: `${validPrdDay}\n` },
{ insert: '내용\n', attributes: { bold: true } },
{ insert: `${content}\n` }
]
} as Delta;
const data = await mutateAsync({
rewardId,
values: {
customData,
info: JSON.stringify(contentToDelta) || '',
imageUrl: goodsImgB || ''
}
});
if (data.success) {
message.success('기프티쇼 보상이 변경되었습니다.');
closeModal();
}
} catch (e) {
console.error(e);
message.error('기프티쇼 보상 변경에 실패했습니다.');
}
};
return (
<>
<Form
form={form}
onFinish={handleSubmit}
labelCol={{ span: 24 }}
wrapperCol={{ span: 24 }}
preserve={false}
>
<Form.Item name="goodsCode">
<Select
placeholder="변경할 기프티쇼 보상을 선택해주세요"
options={giftshows?.data?.result.goodsList.map((giftshow) => ({
label: giftshow.goodsName,
value: giftshow.goodsCode
}))}
showSearch
filterOption={(input, option) => {
return option?.label?.includes(input) || false;
}}
/>
</Form.Item>
</Form>
<Footer>
<Button onClick={closeModal}>닫기</Button>
<Button type="primary" onClick={form.submit}>
확인
</Button>
</Footer>
</>
);
}
const Footer = styled.div`
text-align: right;
& > button:first-of-type {
margin-right: 8px;
}
`;
|