- 입금확인서 수정
This commit is contained in:
HyeonJongKim
@@ -3,119 +3,149 @@ import { snackBar } from '@/shared/lib';
|
||||
import { toPng } from 'html-to-image';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import '@/shared/ui/assets/css/style-tax-invoice.css';
|
||||
import { useEffect } from 'react';
|
||||
import { ClipLoader, FadeLoader } from 'react-spinners';
|
||||
import { CSSProperties, useEffect, useState } from 'react';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { DepositInfo } from '@/entities/transaction/model/types';
|
||||
|
||||
export interface DepositReceiptSampleProps {
|
||||
depositReceiptSampleOn: boolean;
|
||||
setDepositReceiptSampleOn: (DepositReceiptSampleOn: boolean) => void;
|
||||
depositInfo?: DepositInfo
|
||||
depositReceiptSampleOn: boolean;
|
||||
setDepositReceiptSampleOn: (DepositReceiptSampleOn: boolean) => void;
|
||||
depositInfo?: DepositInfo
|
||||
};
|
||||
|
||||
const override: CSSProperties = {
|
||||
position: 'fixed',
|
||||
display: 'block',
|
||||
margin: '0 auto',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
};
|
||||
|
||||
|
||||
export const DepositReceiptSample = ({
|
||||
depositReceiptSampleOn,
|
||||
setDepositReceiptSampleOn,
|
||||
depositInfo
|
||||
depositReceiptSampleOn,
|
||||
setDepositReceiptSampleOn,
|
||||
depositInfo
|
||||
}: DepositReceiptSampleProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
let [loading, setLoading] = useState<boolean>(false);
|
||||
let [color, setColor] = useState<string>('#0b0606');
|
||||
|
||||
const downloadImage = () => {
|
||||
const section = document.getElementById('image-section') as HTMLElement
|
||||
toPng(section).then((image) => {
|
||||
const link = document.createElement('a');
|
||||
link.download = 'downloadImage.png';
|
||||
link.href = image;
|
||||
link.click();
|
||||
snackBar(t('common.imageRequested'), () => {
|
||||
onClickToClose();
|
||||
});
|
||||
});
|
||||
}
|
||||
const onClickToClose = () => {
|
||||
setDepositReceiptSampleOn(false);
|
||||
};
|
||||
const downloadImage = () => {
|
||||
const section = document.getElementById('image-section') as HTMLElement
|
||||
toPng(section).then((image) => {
|
||||
const link = document.createElement('a');
|
||||
link.download = 'downloadImage.png';
|
||||
link.href = image;
|
||||
link.click();
|
||||
snackBar(t('common.imageRequested'), () => {
|
||||
onClickToClose();
|
||||
});
|
||||
}).finally(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
const onClickToClose = () => {
|
||||
setDepositReceiptSampleOn(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(!!depositReceiptSampleOn){
|
||||
setTimeout(() => {
|
||||
downloadImage();
|
||||
}, 300);
|
||||
}
|
||||
}, [depositReceiptSampleOn]);
|
||||
useEffect(() => {
|
||||
if (!!depositReceiptSampleOn) {
|
||||
setLoading(true);
|
||||
setTimeout(() => {
|
||||
downloadImage();
|
||||
}, 300);
|
||||
}
|
||||
}, [depositReceiptSampleOn, depositInfo]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mail-page">
|
||||
<div id="image-section">
|
||||
<div className="wrap">
|
||||
<div className="header">
|
||||
<div className="header-top">
|
||||
<img
|
||||
className="logo"
|
||||
src={ IMAGE_ROOT + '/mail_nicepay_logo.svg' }
|
||||
alt="NICEPAY"
|
||||
/>
|
||||
</div>
|
||||
<div className="divider"></div>
|
||||
<div className="title-row">
|
||||
<div className="title">입금확인증</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="section">
|
||||
<div className="head">
|
||||
<div className="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="20"
|
||||
viewBox="0 0 16 20"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M13.7656 0.799805C14.839 0.800034 15.7001 1.70434 15.7002 2.7998V17.2002C15.7001 18.2957 14.839 19.2 13.7656 19.2002H2.23438C1.16097 19.2 0.299907 18.2957 0.299805 17.2002V2.7998C0.299907 1.70434 1.16097 0.800034 2.23438 0.799805H13.7656ZM2.23438 2.40039C2.03318 2.40062 1.85655 2.57273 1.85645 2.7998V17.2002C1.85655 17.4273 2.03318 17.5994 2.23438 17.5996H13.7656C13.9674 17.5994 14.1435 17.4274 14.1436 17.2002V2.7998C14.1435 2.57257 13.9674 2.40062 13.7656 2.40039H2.23438Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
|
||||
<path d="M11.9355 3.7998C12.3344 3.79989 12.7002 4.09119 12.7002 4.5C12.7002 4.90881 12.3344 5.20011 11.9355 5.2002H4.06445C3.66564 5.20011 3.2998 4.90881 3.2998 4.5C3.2998 4.09119 3.66564 3.79989 4.06445 3.7998H11.9355Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
|
||||
<path d="M11.9355 6.7998C12.3344 6.79989 12.7002 7.09119 12.7002 7.5C12.7002 7.90881 12.3344 8.20011 11.9355 8.2002H4.06445C3.66564 8.20011 3.2998 7.90881 3.2998 7.5C3.2998 7.09119 3.66564 6.79989 4.06445 6.7998H11.9355Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
|
||||
<path d="M6.91504 9.7998C7.31807 9.7998 7.7002 10.085 7.7002 10.5C7.7002 10.9157 7.31789 11.2002 6.91504 11.2002H4.08496C3.68193 11.2002 3.2998 10.915 3.2998 10.5C3.2998 10.085 3.68193 9.7998 4.08496 9.7998H6.91504Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
|
||||
<path d="M10.9414 14.7998C11.3391 14.7998 11.7002 15.093 11.7002 15.5C11.7002 15.907 11.3391 16.2002 10.9414 16.2002H6.05859C5.66094 16.2002 5.2998 15.907 5.2998 15.5C5.2998 15.093 5.66094 14.7998 6.05859 14.7998H10.9414Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="h-title">입금정보</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">입금일시</div>
|
||||
<div className="v">{ depositInfo?.depositDate}</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">입금은행</div>
|
||||
<div className="v">{ depositInfo?.depositBank }</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">입금계좌</div>
|
||||
<div className="v">{ depositInfo?.depositAccount }</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">금액</div>
|
||||
<div className="v">
|
||||
<NumericFormat
|
||||
value={ depositInfo?.amount }
|
||||
thousandSeparator
|
||||
displayType='text'
|
||||
suffix='원'
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">입금적요</div>
|
||||
<div className="v">{ depositInfo?.depositReason }</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">입금ID</div>
|
||||
<div className="v">{ depositInfo?.depositId }</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div className="mail-page">
|
||||
<div id="image-section">
|
||||
<div className="wrap">
|
||||
<div className="header">
|
||||
<div className="header-top">
|
||||
<img
|
||||
className="logo"
|
||||
src={IMAGE_ROOT + '/mail_nicepay_logo.svg'}
|
||||
alt="NICEPAY"
|
||||
/>
|
||||
</div>
|
||||
<div className="divider"></div>
|
||||
<div className="title-row">
|
||||
<div className="title">입금확인증</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="section">
|
||||
<div className="head">
|
||||
<div className="icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="20"
|
||||
viewBox="0 0 16 20"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M13.7656 0.799805C14.839 0.800034 15.7001 1.70434 15.7002 2.7998V17.2002C15.7001 18.2957 14.839 19.2 13.7656 19.2002H2.23438C1.16097 19.2 0.299907 18.2957 0.299805 17.2002V2.7998C0.299907 1.70434 1.16097 0.800034 2.23438 0.799805H13.7656ZM2.23438 2.40039C2.03318 2.40062 1.85655 2.57273 1.85645 2.7998V17.2002C1.85655 17.4273 2.03318 17.5994 2.23438 17.5996H13.7656C13.9674 17.5994 14.1435 17.4274 14.1436 17.2002V2.7998C14.1435 2.57257 13.9674 2.40062 13.7656 2.40039H2.23438Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
|
||||
<path d="M11.9355 3.7998C12.3344 3.79989 12.7002 4.09119 12.7002 4.5C12.7002 4.90881 12.3344 5.20011 11.9355 5.2002H4.06445C3.66564 5.20011 3.2998 4.90881 3.2998 4.5C3.2998 4.09119 3.66564 3.79989 4.06445 3.7998H11.9355Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
|
||||
<path d="M11.9355 6.7998C12.3344 6.79989 12.7002 7.09119 12.7002 7.5C12.7002 7.90881 12.3344 8.20011 11.9355 8.2002H4.06445C3.66564 8.20011 3.2998 7.90881 3.2998 7.5C3.2998 7.09119 3.66564 6.79989 4.06445 6.7998H11.9355Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
|
||||
<path d="M6.91504 9.7998C7.31807 9.7998 7.7002 10.085 7.7002 10.5C7.7002 10.9157 7.31789 11.2002 6.91504 11.2002H4.08496C3.68193 11.2002 3.2998 10.915 3.2998 10.5C3.2998 10.085 3.68193 9.7998 4.08496 9.7998H6.91504Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
|
||||
<path d="M10.9414 14.7998C11.3391 14.7998 11.7002 15.093 11.7002 15.5C11.7002 15.907 11.3391 16.2002 10.9414 16.2002H6.05859C5.66094 16.2002 5.2998 15.907 5.2998 15.5C5.2998 15.093 5.66094 14.7998 6.05859 14.7998H10.9414Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="h-title">입금정보</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">입금일시</div>
|
||||
<div className="v">{depositInfo?.depositDate}</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">입금은행</div>
|
||||
<div className="v">{depositInfo?.depositBank}</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">입금계좌</div>
|
||||
<div className="v">{depositInfo?.depositAccount}</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">금액</div>
|
||||
<div className="v">
|
||||
<NumericFormat
|
||||
value={depositInfo?.amount}
|
||||
thousandSeparator
|
||||
displayType='text'
|
||||
suffix='원'
|
||||
></NumericFormat>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">입금적요</div>
|
||||
<div className="v">{depositInfo?.depositReason}</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="k">입금ID</div>
|
||||
<div className="v">{depositInfo?.depositId}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{!!loading &&
|
||||
<>
|
||||
<div
|
||||
className="bg-dim"
|
||||
style={{ opacity: '0.4' }}
|
||||
></div>
|
||||
<FadeLoader
|
||||
color={color}
|
||||
loading={loading}
|
||||
cssOverride={override}
|
||||
aria-label="Loading Spinner"
|
||||
data-testid="loader"
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user