payment

src/components/ModalConfrim.tsx

@@ -1,18 +1,22 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import DefaulModal from './DefaulModal'
 import { useTranslation } from 'react-i18next'
 import Button from './Button'
+import Textarea from './Textarea'
 
 type Props = {
     isLoading?: boolean,
     close: () => void,
     isOpen: boolean,
-    onConfrim: () => void,
+    onConfrim: (text?: string) => void,
+    label?: string,
+    isHasDescription?: boolean
 }
 
 const ModalConfrim: FC<Props> = (props: Props) => {
 
     const { t } = useTranslation('global')
+    const [description, setDescription] = useState<string>('')
 
     return (
         <DefaulModal
@@ -22,12 +26,31 @@ const ModalConfrim: FC<Props> = (props: Props) => {
             isHeader
         >
             <div className='mt-6'>
-                <div className='text-sm text-center'> {t('confrim.content')}</div>
+                <div className='text-sm text-center'>
+                    {
+                        props.label ?
+                            props.label
+                            :
+                            t('confrim.content')
+                    }
+
+                    {
+                        props.isHasDescription &&
+                        <div className='mt-4'>
+                            <Textarea
+                                placeholder={t('description')}
+                                onChange={(e) => setDescription(e.target.value)}
+                                value={description}
+                                className='bg-transparent border border-gray-500 rounded-xl w-[300px] p-2'
+                            />
+                        </div>
+                    }
+                </div>
 
                 <div className='flex gap-4 justify-center mt-10'>
                     <Button
                         label={t('confrim.yes')}
-                        onClick={props.onConfrim}
+                        onClick={() => props.onConfrim(props.isHasDescription ? description : undefined)}
                         isLoading={props.isLoading}
                     />
                     <Button

src/components/Textarea.tsx

@@ -2,16 +2,19 @@ import { FC, InputHTMLAttributes } from 'react'
 import Error from './Error'
 
 type Props = {
-    label: string,
+    label?: string,
     error_text?: string
 } & InputHTMLAttributes<HTMLTextAreaElement>
 
 const Textarea: FC<Props> = (props: Props) => {
     return (
         <div className='w-full relative'>
-            <label className='text-sm'>
-                {props.label}
-            </label>
+            {
+                props.label &&
+                <div className='text-xs text-gray-500 absolute top-2 right-2' >
+                    {props.label}
+                </div>
+            }
 
             <textarea
                 className='border border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs'