231 lines
16 KiB
React
231 lines
16 KiB
React
|
import React from 'react';
|
||
|
|
|
||
|
|
// import logo from "../../images/payprelogo1.svg"
|
||
|
|
import logo from '../../Images/pozologoimg.png';
|
||
|
|
import {
|
||
|
|
PhoneOutlined,
|
||
|
|
MailOutlined,
|
||
|
|
EnvironmentOutlined,
|
||
|
|
} from '@ant-design/icons';
|
||
|
|
import moment from 'moment';
|
||
|
|
import './Pdfdoc.scss';
|
||
|
|
const PdfPage = ({ printingdata, CompanyName, zipcode, address, City }) => {
|
||
|
|
var start = moment(printingdata?.ValidityStart);
|
||
|
|
var end = moment(printingdata?.ValidityEnd);
|
||
|
|
let DayCount = end.diff(start, 'days') > 30 ? 'Yearly' : 'Monthly';
|
||
|
|
const formatDateToDMY = (originalDate) => {
|
||
|
|
// Step 1: Parse the original date string into a JavaScript Date object
|
||
|
|
let dateObject = new Date(originalDate);
|
||
|
|
|
||
|
|
// Step 2: Create a new date string in the "date month year" format
|
||
|
|
let day = String(dateObject.getDate()).padStart(2, '0');
|
||
|
|
let month = String(dateObject.getMonth() + 1).padStart(2, '0'); // Months are zero-based
|
||
|
|
let year = dateObject.getFullYear();
|
||
|
|
|
||
|
|
let formattedDate = `${day}/${month}/${year}`;
|
||
|
|
|
||
|
|
return formattedDate;
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="Pdf-body" id="Pdfbody">
|
||
|
|
<div className="Pdf-Div">
|
||
|
|
<div className="Pdf-head-div">
|
||
|
|
<img
|
||
|
|
src={logo}
|
||
|
|
style={{ width: '50px', height: '70px' }}
|
||
|
|
// className="headlogo-img"
|
||
|
|
/>
|
||
|
|
<div>
|
||
|
|
<p className="Pdf-head"> Invoice </p>
|
||
|
|
<p> PayPre Private Limited </p>
|
||
|
|
</div>
|
||
|
|
<span class="square"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="Pdf-amt-details">
|
||
|
|
<p>
|
||
|
|
Invoice Number :
|
||
|
|
<span className="Pdf-amt-digit">
|
||
|
|
{printingdata ? printingdata?.UniqueId : null}
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Amount:
|
||
|
|
<span className="Pdf-amt-digit">
|
||
|
|
₹ {printingdata ? printingdata?.NetPrice : 0}
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="Pdf-amt-details">
|
||
|
|
<p>
|
||
|
|
Payment Method :
|
||
|
|
<span className="Pdf-amt-digit">
|
||
|
|
{printingdata ? printingdata.PaymentModeName : null}
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Date :
|
||
|
|
<span className="Pdf-amt-digit">
|
||
|
|
{printingdata ? formatDateToDMY(printingdata.PurDate) : null}
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="Pdf-Cont-Div">
|
||
|
|
<div className="Pdf-cont">
|
||
|
|
<div className="Pdf-cont-txt">
|
||
|
|
<p className="Pdf-cont-subhead"> Billed From</p>
|
||
|
|
<p className="Pdf-cont-text">
|
||
|
|
Paypre , 51, Step colony, Dharga, Hosur - 635 126, Tamilnadu,
|
||
|
|
India.
|
||
|
|
<p>Phone : +91 9344644484, 9445222716</p>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div className="Pdf-cont-txt">
|
||
|
|
<p className="Pdf-cont-subhead"> Billed To </p>
|
||
|
|
<p className="Pdf-cont-text">
|
||
|
|
{printingdata
|
||
|
|
? printingdata.UserName != null
|
||
|
|
? printingdata.UserName
|
||
|
|
: printingdata.MobileNo
|
||
|
|
: 'hh'}
|
||
|
|
,<br />
|
||
|
|
<p className="Pdf-cont-text">
|
||
|
|
{CompanyName != null ? CompanyName : null}
|
||
|
|
</p>
|
||
|
|
{address != null ? address : null} {City != null ? City : null}{' '}
|
||
|
|
{zipcode != null ? zipcode : null}
|
||
|
|
<p>Phone : {printingdata ? printingdata.MobileNo : null}</p>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr class="new3" />
|
||
|
|
|
||
|
|
<div className="Pdf-Table-Div">
|
||
|
|
<table>
|
||
|
|
<caption>Statement Summary</caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th scope="col">Description</th>
|
||
|
|
<th scope="col">Plan Type</th>
|
||
|
|
<th scope="col">Duration</th>
|
||
|
|
<th scope="col">Purchase Date</th>
|
||
|
|
<th scope="col">Period</th>
|
||
|
|
<th scope="col">Amount</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td data-label="Account">
|
||
|
|
{printingdata ? printingdata.AppName : null}
|
||
|
|
</td>
|
||
|
|
<td data-label="PlanName">
|
||
|
|
{printingdata ? printingdata?.PricingName : 0}
|
||
|
|
</td>
|
||
|
|
<td data-label="Duration">{DayCount}</td>
|
||
|
|
<td data-label="Due Date">
|
||
|
|
{printingdata ? formatDateToDMY(printingdata.PurDate) : null}
|
||
|
|
</td>
|
||
|
|
<td data-label="Period">
|
||
|
|
{printingdata
|
||
|
|
? formatDateToDMY(printingdata.ValidityStart)
|
||
|
|
: null}{' '}
|
||
|
|
-{' '}
|
||
|
|
{printingdata
|
||
|
|
? formatDateToDMY(printingdata.ValidityEnd)
|
||
|
|
: null}
|
||
|
|
</td>
|
||
|
|
<td data-label="Amount">
|
||
|
|
₹{printingdata ? printingdata.NetPrice : 0}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr class="new3" />
|
||
|
|
|
||
|
|
<div className="Pdf-Table-Div">
|
||
|
|
<table>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<th> </th>
|
||
|
|
<th> </th>
|
||
|
|
<th data-label="Sub Total">Sub Total</th>
|
||
|
|
<td>₹{printingdata ? printingdata.Price : 0}</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td> </td>
|
||
|
|
<td> </td>
|
||
|
|
<th data-label="Tax">Tax </th>
|
||
|
|
<td>₹{printingdata ? printingdata.TaxAmount : 0}</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<th> </th>
|
||
|
|
<th> </th>
|
||
|
|
<th data-label="Total">Total</th>
|
||
|
|
<td>₹{printingdata ? printingdata.NetPrice : 0}</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="Pdf-footer-div1">
|
||
|
|
<div>
|
||
|
|
<p className="Pdf-footer-txt1"> Terms & Conditions </p>
|
||
|
|
<p className="Pdf-footer-txt">
|
||
|
|
These Buying Terms and Conditions (the "Agreement") set forth the
|
||
|
|
terms and conditions governing the purchase of goods or services
|
||
|
|
(collectively referred to as "Products") from a seller or vendor
|
||
|
|
(referred to as the "Seller") by a buyer (referred to as the
|
||
|
|
"Buyer"). By placing an order for Products, the Buyer agrees to be
|
||
|
|
bound by this Agreement.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="Pdf-footer-subdiv">
|
||
|
|
<div className="Pdf-footer-subdiv-txt-div">
|
||
|
|
<p className="Pdf-footer-subdiv-txt">
|
||
|
|
{' '}
|
||
|
|
<PhoneOutlined /> 87569876216
|
||
|
|
</p>
|
||
|
|
<p className="Pdf-footer-subdiv-txt">
|
||
|
|
{' '}
|
||
|
|
<MailOutlined /> pozo@info.com
|
||
|
|
</p>
|
||
|
|
<p className="Pdf-footer-subdiv-txt">
|
||
|
|
{' '}
|
||
|
|
<EnvironmentOutlined /> Hosur-Tamilnadu, India.{' '}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<img
|
||
|
|
src={logo}
|
||
|
|
style={{ width: '50px', height: '70px' }}
|
||
|
|
// src={
|
||
|
|
// "data:image/jpeg;base64,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
|
||
|
|
// }
|
||
|
|
// width="70"
|
||
|
|
// height="100"
|
||
|
|
// className="logo-img"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr className="new4" />
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PdfPage;
|