@driveflux/pdf 1.0.1 → 1.0.2

package/src/templates/QuotationPdf/Header.tsx

@@ -0,0 +1,31 @@
+import { Link, Text, View } from '@react-pdf/renderer'
+import { FC } from 'react'
+import FluxLogo from '../../components/FluxLogo.js'
+import { colors } from '../../theme/colors.js'
+
+type Props = {
+  tTitle: string
+  quotationId: string
+  quotationDate: string
+}
+const Header: FC<Props> = ({ tTitle, quotationId, quotationDate }) => {
+  return (
+    <View style={{ gap: 24 }}>
+      <Link src="https://driveflux.com">
+        <FluxLogo />
+      </Link>
+      <View style={{ gap: 4 }}>
+        <Text style={{ fontWeight: 'bold', textTransform: 'uppercase', fontSize: 18 }}>{tTitle}</Text>
+        <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
+          <Text style={{ color: colors.primary3, fontSize: 10 }}>{quotationId}</Text>
+          <View style={{ gap: 8, flexDirection: 'row' }}>
+            <Text style={{ fontSize: 10, color: colors.black }}>Date</Text>
+            <Text style={{ color: colors.primary3, fontSize: 10 }}>{quotationDate}</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default Header

package/src/templates/QuotationPdf/Pricing.tsx

@@ -0,0 +1,214 @@
+import { Quotation } from '@driveflux/db'
+import { formatMoney } from '@driveflux/format-money'
+import { Text, View } from '@react-pdf/renderer'
+import { FC } from 'react'
+import { colors } from '../../theme/colors.js'
+import SectionBoxNew from './SectionBoxNew.js'
+import { QuotationPdfTranslation } from './translations.js'
+
+type Props = {
+  quotation: Quotation
+  t?: QuotationPdfTranslation['pricing']
+}
+
+const Pricing: FC<Props> = ({ quotation, t }) => {
+  const { startFee, reservationFee, deposit, subscriptionFee, extraCharges, couponCode, couponType, discountAmount } =
+    quotation.fees
+
+  let totalUpfrontFee = startFee + (reservationFee || 0) + deposit
+  let totalMonthlyFee = subscriptionFee
+
+  extraCharges.forEach((charge) => {
+    if (charge.type === 'upfront') {
+      totalUpfrontFee += charge.amount
+    } else if (charge.type === 'monthly') {
+      totalMonthlyFee += charge.amount
+    }
+  })
+
+  if (couponCode && couponType === 'upfront') {
+    totalUpfrontFee -= discountAmount || 0
+  }
+
+  if (couponCode && couponType === 'monthly') {
+    totalMonthlyFee -= discountAmount || 0
+  }
+
+  const getFeeValue = (key: string) => {
+    switch (key) {
+      case 'startFee':
+        return startFee
+      case 'reservationFee':
+        return reservationFee
+      case 'deposit':
+        return deposit
+      case 'subscriptionFee':
+        return subscriptionFee
+      default:
+        return null
+    }
+  }
+
+  return (
+    <View>
+      <SectionBoxNew
+        topContent={
+          <>
+            <Text style={{ textTransform: 'uppercase', fontSize: 12, fontWeight: 'bold' }}>{t?.title}</Text>
+            {/* upfront */}
+            <Text style={{ fontWeight: 'bold', color: colors.black, letterSpacing: 1 }}>{t?.fees.upfront.title}</Text>
+            {t?.fees.upfront.content.map((fee) => {
+              const feeValue = getFeeValue(fee.key)?.toFixed(2)
+              if (feeValue === '0.00') {
+                return null
+              }
+              return (
+                <View key={fee.key} style={{ justifyContent: 'space-between', flexDirection: 'row', rowGap: 8 }}>
+                  <Text style={{ paddingRight: 4, letterSpacing: 1, color: colors.primary3 }}>{fee.title}</Text>
+                  <Text style={{ color: colors.primary3, letterSpacing: 1 }}>{feeValue !== null ? feeValue : ''}</Text>
+                </View>
+              )
+            })}
+            {/* extra charge */}
+            {quotation.fees.extraCharges.length > 0 && (
+              <>
+                {quotation.fees.extraCharges
+                  .filter((charge) => charge.amount > 0)
+                  .filter((charge) => charge.type === 'upfront')
+                  .map((charge, i) => (
+                    <View key={i} style={{ justifyContent: 'space-between', flexDirection: 'row', rowGap: 8 }}>
+                      <Text style={{ paddingRight: 4, letterSpacing: 1, color: colors.primary3 }}>
+                        {t?.fees.extraCharge} - {charge.description}
+                      </Text>
+                      <Text style={{ color: colors.primary3, letterSpacing: 1 }}>{charge.amount.toFixed(2)}</Text>
+                    </View>
+                  ))}
+              </>
+            )}
+            {quotation.fees.couponCode !== null && quotation.fees.couponType === 'upfront' && (
+              <>
+                <View style={{ justifyContent: 'space-between', flexDirection: 'row', rowGap: 8 }}>
+                  <Text style={{ paddingRight: 4, letterSpacing: 1, color: colors.primary3 }}>
+                    {t?.fees.promo} - {quotation.fees.couponCode}
+                  </Text>
+                  <Text style={{ color: colors.accent4, letterSpacing: 1 }}>
+                    {quotation.fees.discountAmount?.toFixed(2)}
+                  </Text>
+                </View>
+              </>
+            )}
+            <View
+              style={{
+                backgroundColor: colors.primary1,
+                borderTop: `1px solid ${colors.primary1}`,
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+                padding: 4
+              }}
+            >
+              <Text style={{ letterSpacing: 1, paddingRight: 4 }}>Total</Text>
+              <Text style={{ letterSpacing: 1 }}>{formatMoney(totalUpfrontFee)}</Text>
+            </View>
+
+            <View style={{ borderBottom: `1px solid ${colors.primary2}` }}></View>
+
+            {/* monthly */}
+            <Text style={{ fontWeight: 'bold', color: colors.black, letterSpacing: 1 }}>{t?.fees.monthly.title}</Text>
+            {t?.fees.monthly.content.map((fee) => {
+              const feeValue = getFeeValue(fee.key)?.toFixed(2)
+
+              return (
+                <View key={fee.key} style={{ justifyContent: 'space-between', flexDirection: 'row', rowGap: 8 }}>
+                  <Text style={{ paddingRight: 4, letterSpacing: 1, color: colors.primary3 }}>{fee.title}</Text>
+                  <Text style={{ color: colors.primary3, letterSpacing: 1 }}>{feeValue !== null ? feeValue : ''}</Text>
+                </View>
+              )
+            })}
+
+            {/* extra charges monthly*/}
+            {quotation.fees.extraCharges.length > 0 && (
+              <>
+                {quotation.fees.extraCharges
+                  .filter((charge) => charge.type === 'monthly')
+                  .map((charge, i) => (
+                    <View key={i} style={{ justifyContent: 'space-between', flexDirection: 'row', rowGap: 8 }}>
+                      <Text style={{ paddingRight: 4, letterSpacing: 1, color: colors.primary3 }}>
+                        {t?.fees.extraCharge} - {charge.description}
+                      </Text>
+                      <Text style={{ color: colors.primary3, letterSpacing: 1 }}>{charge.amount.toFixed(2)}</Text>
+                    </View>
+                  ))}
+              </>
+            )}
+
+            {/* promo monthly */}
+            {quotation.fees.couponCode !== null && quotation.fees.couponType === 'monthly' && (
+              <>
+                <View style={{ justifyContent: 'space-between', flexDirection: 'row', rowGap: 8 }}>
+                  <Text style={{ paddingRight: 4, letterSpacing: 1, color: colors.primary3 }}>
+                    {t?.fees.promo} - {quotation.fees.couponCode}
+                  </Text>
+                  <Text style={{ color: colors.accent4, letterSpacing: 1 }}>
+                    {quotation.fees.discountAmount?.toFixed(2)}
+                  </Text>
+                </View>
+              </>
+            )}
+
+            <View
+              style={{
+                backgroundColor: colors.primary1,
+                borderTop: `1px solid ${colors.primary1}`,
+                justifyContent: 'space-between',
+                flexDirection: 'row',
+                padding: 4
+              }}
+            >
+              <Text style={{ letterSpacing: 1, paddingRight: 4 }}>Total</Text>
+              <Text style={{ letterSpacing: 1 }}>{formatMoney(totalMonthlyFee)}</Text>
+            </View>
+          </>
+        }
+        bottomContent={
+          <>
+            <View style={{ rowGap: 16 }}>
+              <Text style={{ textTransform: 'uppercase', fontSize: 12, fontWeight: 'bold', letterSpacing: 1 }}>
+                {t?.fees.dueToday.title}
+              </Text>
+              <Text style={{ color: colors.primary3, letterSpacing: 1 }}>{t?.fees.dueToday.description}</Text>
+              <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
+                <Text style={{ letterSpacing: 1, color: colors.primary3 }}> {t?.fees.dueToday.subTotal}</Text>
+                <Text style={{ letterSpacing: 1, color: colors.primary3 }}>
+                  {quotation.fees.amountBeforeTax.toFixed(2)}
+                </Text>
+              </View>
+              <View style={{ justifyContent: 'space-between', flexDirection: 'row' }}>
+                <Text style={{ letterSpacing: 1, color: colors.primary3 }}> {t?.fees.dueToday.serviceFee}</Text>
+                <Text style={{ letterSpacing: 1, color: colors.primary3 }}>{quotation.fees.taxAmount.toFixed(2)}</Text>
+              </View>
+
+              <View
+                style={{
+                  backgroundColor: colors.primary1,
+                  borderTop: `1px solid ${colors.primary1}`,
+                  justifyContent: 'space-between',
+                  flexDirection: 'row',
+                  padding: 4
+                }}
+              >
+                <Text style={{ letterSpacing: 1, paddingRight: 4, fontWeight: 'bold' }}>
+                  {t?.fees.dueToday.grandTotal}
+                </Text>
+                <Text style={{ letterSpacing: 1, fontWeight: 'bold' }}>
+                  {formatMoney(quotation.fees.amountAfterTax)}
+                </Text>
+              </View>
+            </View>
+          </>
+        }
+      />
+    </View>
+  )
+}
+
+export default Pricing

package/src/templates/QuotationPdf/QuotationPdfPage.tsx

@@ -0,0 +1,25 @@
+import { Quotation } from '@driveflux/db'
+import { View } from '@react-pdf/renderer'
+import { format } from 'date-fns'
+import { FC, PropsWithChildren } from 'react'
+import StandardPage from '../../components/StandardPage.js'
+import Header from './Header.js'
+
+type Props = {
+  quotation: Quotation
+}
+
+const QuotationPdfPage: FC<PropsWithChildren<Props>> = ({ quotation, children }) => {
+  return (
+    <StandardPage style={{ padding: 40, fontSize: 10, gap: 16 }}>
+      <Header
+        tTitle={'Quotation'}
+        quotationId={quotation.id}
+        quotationDate={format(quotation.createdAt, 'dd-MM-yyyy')}
+      />
+      <View style={{ flex: 1, rowGap: 24 }}>{children}</View>
+    </StandardPage>
+  )
+}
+
+export default QuotationPdfPage

package/src/templates/QuotationPdf/SectionBoxNew.tsx

@@ -0,0 +1,20 @@
+import { View } from '@react-pdf/renderer'
+import { FC, ReactNode } from 'react'
+import { colors } from '../../theme/colors.js'
+
+type Props = {
+  topContent: ReactNode
+  bottomContent: ReactNode
+}
+
+const SectionBoxNew: FC<Props> = ({ topContent, bottomContent }) => {
+  return (
+    <View style={{ border: `1px solid ${colors.primary2}` }}>
+      <View style={{ padding: 16, rowGap: 16 }}>{topContent}</View>
+      <View style={{ borderBottom: `1px solid ${colors.primary2}` }} />
+      <View style={{ padding: 16, rowGap: 16 }}>{bottomContent}</View>
+    </View>
+  )
+}
+
+export default SectionBoxNew

package/src/templates/QuotationPdf/TermsSection.tsx

@@ -0,0 +1,28 @@
+import { Text, View } from '@react-pdf/renderer'
+import { FC } from 'react'
+import { colors } from '../../theme/colors.js'
+import { QuotationPdfTranslation } from './translations.js'
+
+type Props = {
+  t: QuotationPdfTranslation['terms']
+}
+
+const TermsSection: FC<Props> = ({ t }) => {
+  return (
+    <View style={{ gap: 16 }}>
+      <Text style={{ fontWeight: 'bold', color: colors.black, letterSpacing: 1, textTransform: 'uppercase' }}>
+        {t?.title}
+      </Text>
+      <View>
+        {t.content.map((line, i) => (
+          <View key={i} style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+            <Text style={{ marginRight: 4, fontSize: 8 }}>•</Text>
+            <Text style={{ color: colors.primary3, letterSpacing: 1, fontSize: 8 }}>{line}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+export default TermsSection

package/src/templates/QuotationPdf/index.tsx

@@ -0,0 +1,46 @@
+import { Quotation } from '@driveflux/db'
+import { Document } from '@react-pdf/renderer'
+import { FC, useMemo } from 'react'
+import { PdfTemplatesSupportedLocales } from '../../types.js'
+import { toPdf } from '../../utils.js'
+import CustomerSubscriptionSection from './CustomerSubscriptionSection.js'
+import GFV from './GFV.js'
+import Pricing from './Pricing.js'
+import QuotationPdfPage from './QuotationPdfPage.js'
+import TermsSection from './TermsSection.js'
+import { useTranslations } from './translations.js'
+
+type Props = {
+  locale?: PdfTemplatesSupportedLocales
+  quotation: Quotation
+}
+
+type Options = {
+  locale?: PdfTemplatesSupportedLocales
+  quotation: Quotation
+}
+
+export const generateQuotationPdf = async ({ locale = 'en', quotation }: Options, fileName: string) => {
+  return await toPdf(<QuotationPDF locale={locale} quotation={quotation} />, fileName)
+}
+
+const QuotationPDF: FC<Props> = ({ locale = 'en', quotation }) => {
+  const pageProps = useMemo(() => {
+    return {
+      t: useTranslations(locale),
+      quotation: quotation
+    }
+  }, [])
+  const { t } = pageProps
+
+  return (
+    <Document language={locale}>
+      <QuotationPdfPage quotation={quotation}>
+        <CustomerSubscriptionSection quotation={quotation} t={t} />
+        <Pricing quotation={quotation} t={t.pricing} />
+        {quotation.fees.gfv && <GFV quotation={quotation} t={t.pricing} />}
+        <TermsSection t={t.terms} />
+      </QuotationPdfPage>
+    </Document>
+  )
+}

package/src/templates/QuotationPdf/translations.ts

@@ -0,0 +1,82 @@
+const enTranslation = {
+  quotation: `Quotation`,
+  date: 'Date',
+  customer: {
+    title: `Customer`,
+    name: `Name`,
+    email: `Email`,
+    address: `Address`
+  },
+  subscription: {
+    title: `Subscription`,
+    vehicleName: `Vehicle`,
+    plan: `Subscription Plan`,
+    mileagePackage: `Mileage Package`
+  },
+  subIncludes: {
+    title: `What's Included:`,
+    content: [
+      `Comprehensive insurance`,
+      `Road tax`,
+      `Regularly scheduled maintenance`,
+      `Selective wear & tear`,
+      `Ability to swap vehicles`,
+      `Doorstep delivery`,
+      `24/7 nationwide roadside assistance`,
+      `Theft recovery services`,
+      `Independently rated vehicle inspection`,
+      `Option to purchase the vehicle at the end of the subscription`
+    ]
+  },
+  pricing: {
+    title: `Pricing`,
+    fees: {
+      upfront: {
+        title: `Upfront Fees`,
+        content: [
+          { title: `Booking Fee`, key: 'reservationFee' },
+          { title: `Activation Fee`, key: 'startFee' },
+          { title: `Refundable Deposit`, key: 'deposit' }
+        ]
+      },
+      monthly: {
+        title: `Monthly Fees`,
+        content: [{ title: `Subscription Fee`, key: 'subscriptionFee' }]
+      },
+      dueToday: {
+        title: `Due Today`,
+        description: `Grand Total is due before your subscription start. Monthly fee is due on the first day of every cycle period.`,
+        subTotal: `Upfront Fees + Monthly Fee`,
+        serviceFee: `Service Fee (8%)`,
+        grandTotal: `Grand Total`
+      },
+      extraCharge: `Extra Charge`,
+      promo: `Promo`,
+      gfv: {
+        title: `Guaranteed Future Value (GFV)`
+      }
+    }
+  },
+  terms: {
+    title: `Terms`,
+    content: [
+      `This quotation is valid for 7 days.`,
+      `All vehicles proposed are unique and are available to our customers on a first come first served basis.`,
+      `The Mileage Package is the monthly mileage cap for the vehicle. If you exceed this cap for any given month, excess mileage charges will be incurred.`,
+      `Initial payment to be made within 7 days of the invoice date.`,
+      `Subscription starts on the date of the car delivery.`,
+      `The upfront fees are billed one-time per subscription, before the subscription starts.`,
+      `All monthly recurring fees are billed on the same date as the delivery of the vehicle.`,
+      `Scheduling delivery will only commence Grand Total is fully paid, 7 - 30+ days after payment and subject to vehicle availability.`
+    ]
+  }
+}
+
+export type QuotationPdfTranslation = typeof enTranslation
+
+export const useTranslations = (locale: 'en'): QuotationPdfTranslation => {
+  const translation = {
+    en: enTranslation
+  }
+  return translation[locale]
+}

package/src/templates/QuotationPdf/utils.ts

@@ -0,0 +1,44 @@
+import { MileagePackage, PlanType } from '@driveflux/db'
+import { Address } from '@driveflux/db/types'
+
+export const formatAddress = (originalAddress: Address) => {
+  const { coordinates, metadata, ...address } = originalAddress
+  return (Object.keys(address) as Array<keyof typeof address>)
+    .filter((key) => key !== 'name' && !!address[key])
+    .map((a) => address[a])
+    .join(', ')
+}
+
+export const getSimplifiedPlanTranslation = (plan: PlanType) => {
+  switch (plan) {
+    case 'plan60':
+      return `60 Months`
+    case 'plan36':
+      return `36 Months`
+    case 'plan24':
+      return `24 Months`
+    case 'plan12':
+      return `12 Months`
+    case 'plan1':
+      return `Monthly`
+    case 'planWeekly':
+      return `Weekly`
+    default:
+      return `Unknown Plan`
+  }
+}
+
+export const getMileagePackageTranslation = (mileagePackage?: MileagePackage) => {
+  switch (mileagePackage) {
+    case 'lite':
+      return `Lite`
+    case 'standard':
+      return `Standard`
+    case 'plus':
+      return `Plus`
+    case 'unlimited':
+      return `Unlimited`
+    default:
+      return `Unknown Mileage Package`
+  }
+}

package/src/templates/index.ts

@@ -1 +1,2 @@
+export * from './QuotationPdf/index.js'
 export * from './SubscriptionAgreement/index.js'