Philip Cesar Garay
148 lines
4.1 KiB
JavaScript
148 lines
4.1 KiB
JavaScript
import React from "react";
|
|
import { Text, View, Image, StyleSheet } from "@react-pdf/renderer";
|
|
import numbro from "numbro";
|
|
|
|
const DisplayCustomerInformation = ({ billingDetails } = {}) => {
|
|
return (
|
|
<View style={Styles.rightColumn}>
|
|
{[
|
|
`Client: ${billingDetails.legalName || "NC"}`,
|
|
billingDetails.billingAddress,
|
|
// `${billingDetails.zipCode}, ${billingDetails.city}, ${billingDetails.countryCode}`,
|
|
`TVA: ${billingDetails.taxIdentificationNumber || "NC"}`,
|
|
`SIREN: ${billingDetails.SIREN || "NC"}`,
|
|
]
|
|
.filter(Boolean)
|
|
.map((line, index) => (
|
|
<Text key={index} style={Styles.textParagraph}>
|
|
{line}
|
|
</Text>
|
|
))}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const RenderCompanyLogo = ({ logoBase64 } = {}) => {
|
|
return (
|
|
<Image src={`data:image/png;base64,${logoBase64}`} style={{ width: 200 }} />
|
|
);
|
|
};
|
|
|
|
const RenderTermsOfSale = () => {
|
|
return {
|
|
title: "Conditions générales de vente",
|
|
content: <Text style={Styles.textParagraph}>{"ICI TES CGV"}</Text>,
|
|
};
|
|
};
|
|
|
|
const RenderCompanyInformation = ({ company }) => {
|
|
return {
|
|
title: "Informations du prestataire",
|
|
content: (
|
|
<Text style={Styles.textParagraph}>
|
|
{`${company?.name}, ${company?.address}, ${company?.postalCode || "-"}, ${company?.city || "-"},\nSIRET: ${company?.identifier}, RCS: ${company?.city} ${company?.RCS}, TVA: ${company?.taxIdentifier || "-"}.\nPour toute question, vous pourrez nous contacter au ${company?.phoneNumber} ou à l'adresse ${company?.supportEmail}.`}
|
|
</Text>
|
|
),
|
|
};
|
|
};
|
|
|
|
const SignatureForm = () => {
|
|
return {
|
|
title: "Signature du client",
|
|
content: (
|
|
<>
|
|
<Text style={Styles.textParagraph}>
|
|
Fait à {"{{Ville de signature;font_size=12}}"}, le
|
|
{" {{Date;type=datenow;font_size=12}}"}
|
|
</Text>
|
|
|
|
<Text style={Styles.textParagraph}>
|
|
Nom et prénom du signataire:{" "}
|
|
{"{{Nom et Prénom du signataire;font_size=12}}"}
|
|
</Text>
|
|
|
|
<Text style={Styles.textParagraph}>
|
|
Fonction du signataire: {"{{Fonction du signataire;font_size=12}}"}
|
|
</Text>
|
|
|
|
<Text style={Styles.textParagraph}>
|
|
Téléphone: {"{{type=phone;required=true;font_size=12}}"}
|
|
</Text>
|
|
|
|
<Text style={Styles.textParagraph}>Signature:</Text>
|
|
|
|
<View style={Styles.signatureBox}>
|
|
<Text>{"{{Sign;type=signature;width=200;height=50}}"}</Text>
|
|
</View>
|
|
</>
|
|
),
|
|
};
|
|
};
|
|
|
|
const formatPrice = ({ amount = 0, average = false }) =>
|
|
`${numbro(amount || 0).format({
|
|
spaceSeparated: true,
|
|
thousandSeparated: true,
|
|
average,
|
|
mantissa: average ? 1 : 2,
|
|
})} €`;
|
|
|
|
const Styles = StyleSheet.create({
|
|
body: {
|
|
padding: 40,
|
|
fontFamily: "Helvetica",
|
|
fontSize: 12,
|
|
lineHeight: 1.5,
|
|
color: "#000",
|
|
},
|
|
section: { marginBottom: 30 },
|
|
sectionTitle: { fontSize: 14, opacity: 0.5, marginBottom: 5 },
|
|
textParagraph: { marginBottom: 5 },
|
|
headerRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
},
|
|
leftColumn: { width: "50%", textAlign: "left" },
|
|
rightColumn: { width: "50%", textAlign: "right" },
|
|
table: { marginBottom: 20 },
|
|
tableRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
paddingVertical: 10,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: "#ccc",
|
|
},
|
|
tableColHeaderLeft: { width: "70%", fontWeight: "bold", textAlign: "left" },
|
|
tableColHeaderRight: { width: "30%", fontWeight: "bold", textAlign: "right" },
|
|
tableColLeft: { width: "70%", textAlign: "left" },
|
|
tableColRight: { width: "30%", textAlign: "right" },
|
|
summaryRow: {
|
|
flexDirection: "row",
|
|
justifyContent: "flex-end",
|
|
marginTop: 10,
|
|
},
|
|
summaryLabel: {
|
|
width: "70%",
|
|
textAlign: "right",
|
|
paddingRight: 10,
|
|
fontWeight: "bold",
|
|
},
|
|
summaryValue: { width: "30%", textAlign: "right" },
|
|
signatureBox: {
|
|
width: 200,
|
|
height: 50,
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
},
|
|
});
|
|
|
|
export {
|
|
Styles,
|
|
formatPrice,
|
|
DisplayCustomerInformation,
|
|
RenderTermsOfSale,
|
|
RenderCompanyLogo,
|
|
RenderCompanyInformation,
|
|
SignatureForm,
|
|
};
|