@driveflux/pdf 1.0.14 → 1.1.0

package/src/templates/QuotationPdf/translations.ts

@@ -1,82 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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`
-  }
-}
-
-export const getFullMileagePackageTranslation = (plan?: MileagePackage | null) => {
-  switch (plan) {
-    case 'lite':
-      return `Lite - 1,250KM`
-    case 'standard':
-      return `Standard - 2,000KM`
-    case 'plus':
-      return `Plus - 2,750KM`
-    case 'unlimited':
-      return `Unlimited`
-    default:
-      return `Unknown Mileage Package`
-  }
-}

package/src/templates/SubscriptionAgreement/Confirmation.tsx

@@ -1,49 +0,0 @@
-import { userName } from '@driveflux/db/models/user'
-import { SubscriptionWithUser, SubscriptionWithVehicle } from '@driveflux/db/types'
-import { Image, Text, View } from '@react-pdf/renderer'
-import { format } from 'date-fns'
-import { FC } from 'react'
-import { colors } from '../../theme/index.js'
-import LabelValue from './LabelValue.js'
-import { SubscriptionAgreementTranslation } from './translations.js'
-
-type Props = {
-  tConfirmation: SubscriptionAgreementTranslation['confirmation']
-  subscription: SubscriptionWithUser & SubscriptionWithVehicle
-}
-
-const Confirmation: FC<Props> = ({ tConfirmation, subscription }) => {
-  if (!subscription.signature?.signature) {
-    throw new Error('Missing signature')
-  }
-
-  const border = `1px solid ${colors.primary2}`
-
-  return (
-    <View style={{ borderLeft: border, borderRight: border, borderBottom: border }}>
-      <View style={{ backgroundColor: colors.primary1, borderTop: border, padding: 8 }}>
-        <Text style={{ fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: 1 }}>{tConfirmation.title}</Text>
-      </View>
-      <View style={{ padding: 8, paddingBottom: 16, rowGap: 8, borderTop: border }}>
-        <Text>{tConfirmation.agreementText(subscription.businessId ? 'business' : 'member')}</Text>
-        <View style={{ height: 160, alignItems: 'flex-start' }}>
-          <Image src={subscription.signature.signature} />
-        </View>
-        <View style={{ rowGap: 8 }}>
-          <LabelValue label={tConfirmation.name} value={userName(subscription.user)} />
-          <LabelValue label={tConfirmation.idOrPassportNo} value={subscription.user.identification?.number} />
-          <LabelValue
-            label={tConfirmation.date}
-            value={
-              subscription.signature.signedAt
-                ? format(subscription.signature.signedAt, 'dd-MM-yyyy hh:mm a')
-                : undefined
-            }
-          />
-        </View>
-      </View>
-    </View>
-  )
-}
-
-export default Confirmation

package/src/templates/SubscriptionAgreement/CoverPage.tsx

@@ -1,52 +0,0 @@
-import { User } from '@driveflux/db'
-import { userName } from '@driveflux/db/models/user'
-import { Text, View } from '@react-pdf/renderer'
-import { format } from 'date-fns'
-import { FC } from 'react'
-import { colors } from '../../theme/colors.js'
-import CoverPageSection from './CoverPageSection.js'
-import LabelValue from './LabelValue.js'
-import { SubscriptionAgreementTranslation } from './translations.js'
-
-type Props = {
-  tTitle: SubscriptionAgreementTranslation['title']
-  tCover: SubscriptionAgreementTranslation['cover']
-  signedAt: Date
-  user: User
-}
-
-const CoverPage: FC<Props> = ({ tTitle, tCover, signedAt, user }) => {
-  return (
-    <View style={{ flex: 1, paddingVertical: 80, justifyContent: 'space-between' }}>
-      <Text style={{ fontWeight: 'bold', fontSize: 40, textTransform: 'uppercase', flex: 1 }}>{tTitle}</Text>
-      <View style={{ padding: 16, rowGap: 32, border: `1px solid ${colors.primary2}`, fontSize: 10 }}>
-        <CoverPageSection title={tCover.effectiveDate}>
-          <View style={{ flexDirection: 'row', columnGap: 4 }}>
-            <Text style={{ textDecoration: 'underline' }}>{format(signedAt, 'do')}</Text>
-            <Text>{tCover.of}</Text>
-            <Text style={{ textDecoration: 'underline' }}>{format(signedAt, 'MMM')}</Text>
-            <Text>{format(signedAt, 'yyyy')}</Text>
-          </View>
-        </CoverPageSection>
-        <CoverPageSection title={tCover.agreementBetween}>
-          <LabelValue label={tCover.name} value={userName(user)} />
-          <LabelValue label={tCover.idOrPassportNo} value={user.identification?.number} />
-        </CoverPageSection>
-        <Text
-          style={{
-            fontSize: 8,
-            fontWeight: 'bold',
-            color: colors.primary3,
-            textTransform: 'uppercase',
-            letterSpacing: 1
-          }}
-        >
-          {tCover.and}
-        </Text>
-        <Text>FLUX Sdn Bhd (1264766-H)</Text>
-      </View>
-    </View>
-  )
-}
-
-export default CoverPage

package/src/templates/SubscriptionAgreement/CoverPageSection.tsx

@@ -1,25 +0,0 @@
-import { Text, View } from '@react-pdf/renderer'
-import { FC, PropsWithChildren } from 'react'
-import { colors } from '../../theme/colors.js'
-
-type Props = {
-  title: string
-}
-const CoverPageSection: FC<PropsWithChildren<Props>> = ({ title, children }) => {
-  return (
-    <View style={{ rowGap: 16 }}>
-      <Text
-        style={{
-          fontSize: 8,
-          fontWeight: 'bold',
-          color: colors.primary3,
-          textTransform: 'uppercase',
-          letterSpacing: 1
-        }}
-      >{`${title}:`}</Text>
-      {children}
-    </View>
-  )
-}
-
-export default CoverPageSection

package/src/templates/SubscriptionAgreement/Details.tsx

@@ -1,127 +0,0 @@
-import { MileagePackage, PlanType, VehicleType } from '@driveflux/db'
-import { userName } from '@driveflux/db/models/user'
-import { format } from '@driveflux/time'
-import { Text, View } from '@react-pdf/renderer'
-import { FC, useMemo } from 'react'
-import { colors } from '../../theme/index.js'
-import LabelValue from './LabelValue.js'
-import { SubscriptionForAgreement } from './index.js'
-import { SubscriptionAgreementTranslation } from './translations.js'
-
-type Props = {
-  tDetails: SubscriptionAgreementTranslation['details']
-  subscription: SubscriptionForAgreement
-}
-
-const Details: FC<Props> = ({ tDetails, subscription }) => {
-  const details = useMemo(
-    () => ({
-      member: [
-        {
-          key: tDetails.member.name,
-          value: userName(subscription.user)
-        },
-        {
-          key: tDetails.member.idOrPassportNo,
-          value: subscription.user.identification?.number
-        }
-      ],
-      vehicle: [
-        {
-          key: tDetails.vehicle.make,
-          value: subscription.vehicle?.make
-        },
-        {
-          key: tDetails.vehicle.model,
-          value: subscription.vehicle?.vehicleModel
-        },
-        {
-          key: tDetails.vehicle.year,
-          value: subscription.vehicle?.year
-        },
-        {
-          key: tDetails.vehicle.plateNo,
-          value: subscription.vehicle?.registrationNumber
-        }
-      ],
-      subscription: [
-        {
-          key: tDetails.subscription.subscriptionPlan,
-          value: getPlanTranslation(subscription.plan)
-        },
-        {
-          key: tDetails.subscription.mileagePackage,
-          value: getFullMileagePackageTranslation(subscription.mileagePackage)
-        },
-        {
-          key: tDetails.subscription.startDate,
-          value: subscription.startedAt ? format(subscription.startedAt, 'dd-MM-yyyy') : undefined
-        },
-        {
-          key: tDetails.subscription.endDate,
-          value: subscription.endedAt
-            ? format(subscription.endedAt, 'dd-MM-yyyy')
-            : subscription.schedule?.endAt
-              ? format(subscription.schedule?.endAt, 'dd-MM-yyyy')
-              : undefined
-        }
-      ]
-    }),
-    []
-  )
-
-  const border = `1px solid ${colors.primary2}`
-
-  return (
-    <View style={{ borderLeft: border, borderRight: border }}>
-      <View style={{ backgroundColor: colors.primary1, borderTop: border, padding: 8 }}>
-        <Text style={{ fontWeight: 'bold', textTransform: 'uppercase', letterSpacing: 1 }}>{tDetails.agreement}</Text>
-      </View>
-      {Object.keys(details).map((key, i) => (
-        <View key={key} style={{ padding: 8, paddingBottom: 16, rowGap: 8, borderTop: border }}>
-          <Text style={{ textTransform: 'uppercase', color: colors.primary2, fontSize: 8, letterSpacing: 1 }}>{`${key} details`}</Text>
-          {details[key as keyof typeof details].map((line) => (
-            <LabelValue label={line.key} value={line.value} key={line.key} />
-          ))}
-        </View>
-      ))}
-    </View>
-  )
-}
-
-export default Details
-
-// TODO: replace this with dump's once the package is ready
-const getPlanTranslation = (plan?: PlanType | null, vehicleType?: VehicleType) => {
-  switch (plan) {
-    case 'plan60':
-      return vehicleType === 'motorcycle' ? '60 Months' : '60 Months (Basic)'
-    case 'plan36':
-      return '36 Months'
-    case 'plan24':
-      return '24 Months'
-    case 'plan12':
-      return '12 Months'
-    case 'plan1':
-      return 'Monthly (Ultra)'
-    case 'planWeekly':
-      return 'Weekly'
-    default:
-      return 'Unknown Plan'
-  }
-}
-
-const getFullMileagePackageTranslation = (plan?: MileagePackage | null) => {
-  switch (plan) {
-    case 'lite':
-      return 'Lite - 1,250KM'
-    case 'standard':
-      return 'Standard - 2,000KM'
-    case 'plus':
-      return 'Plus - 2,750KM'
-    case 'unlimited':
-      return 'Unlimited'
-    default:
-      return 'Unknown Mileage Package'
-  }
-}

package/src/templates/SubscriptionAgreement/Footer.tsx

@@ -1,37 +0,0 @@
-import { Text, View } from '@react-pdf/renderer'
-import { FC } from 'react'
-import { colors } from '../../theme/colors.js'
-import { SubscriptionAgreementTranslation } from './translations.js'
-
-type Props = {
-  tComputerGenerated: SubscriptionAgreementTranslation['computerGenerated']
-  tPage: SubscriptionAgreementTranslation['page']
-  tOf: SubscriptionAgreementTranslation['of']
-}
-
-const Footer: FC<Props> = ({ tComputerGenerated, tPage, tOf }) => {
-  return (
-    <View
-      fixed
-      style={{
-        justifyContent: 'space-between',
-        flexDirection: 'row',
-        paddingTop: 16,
-        marginTop: 16,
-        borderTop: `1px solid ${colors.links}`,
-        color: colors.primary2,
-        fontSize: 8,
-      }}
-    >
-      <Text>{tComputerGenerated}</Text>
-      <View style={{ flexDirection: 'row', columnGap: 4 }}>
-        <Text>{tPage}</Text>
-        <Text style={{ fontWeight: 'bold', color: colors.black }} render={({ pageNumber }) => `${pageNumber}`} />
-        <Text>{tOf}</Text>
-        <Text style={{ fontWeight: 'bold', color: colors.black }} render={({ totalPages }) => `${totalPages}`} />
-      </View>
-    </View>
-  )
-}
-
-export default Footer

package/src/templates/SubscriptionAgreement/Header.tsx

@@ -1,37 +0,0 @@
-import { Link, Text, View } from '@react-pdf/renderer'
-import { FC } from 'react'
-import FluxLogo from '../../components/FluxLogo.js'
-import { colors } from '../../theme/colors.js'
-import { SubscriptionAgreementTranslation } from './translations.js'
-
-type Props = {
-  tTitle: SubscriptionAgreementTranslation['title']
-  userId: string
-  subscriptionId: string
-}
-
-const Header: FC<Props> = ({ tTitle, userId, subscriptionId }) => {
-  return (
-    <View
-      fixed
-      style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingBottom: 40,
-        // to not get pushed by the content
-        minHeight: 69
-      }}
-    >
-      <Link src="https://driveflux.com">
-        <FluxLogo />
-      </Link>
-      <View style={{ rowGap: 4, fontSize: 8, alignItems: 'flex-end' }}>
-        <Text style={{ fontWeight: 'bold' }}>{tTitle}</Text>
-        <Text style={{ color: colors.primary2 }}>{`FLUX-${userId}-${subscriptionId}`}</Text>
-      </View>
-    </View>
-  )
-}
-
-export default Header

package/src/templates/SubscriptionAgreement/LabelValue.tsx

@@ -1,19 +0,0 @@
-import { Text, View } from '@react-pdf/renderer'
-import { FC } from 'react'
-
-type Props = {
-  label: string
-  value?: string | number | boolean | null
-}
-
-const LabelValue: FC<Props> = ({ label, value }) => {
-  return (
-    <View style={{ flexDirection: 'row' }}>
-      <Text style={{ minWidth: 120, textTransform: 'capitalize' }}>{label}</Text>
-      <Text>{`:`}</Text>
-      <Text style={{ paddingLeft: 16 }}>{!!value ? `${value}` : '-'}</Text>
-    </View>
-  )
-}
-
-export default LabelValue

package/src/templates/SubscriptionAgreement/SubscriptionAgreementPage.tsx

@@ -1,24 +0,0 @@
-import { View } from '@react-pdf/renderer'
-import { FC, PropsWithChildren } from 'react'
-import StandardPage from '../../components/StandardPage.js'
-import Footer from './Footer.js'
-import Header from './Header.js'
-import { SubscriptionAgreementTranslation } from './translations.js'
-
-type Props = {
-  t: SubscriptionAgreementTranslation
-  userId: string
-  subscriptionId: string
-}
-
-const SubscriptionAgreementPage: FC<PropsWithChildren<Props>> = ({ t, userId, subscriptionId, children }) => {
-  return (
-    <StandardPage style={{ padding: 40, fontSize: 10 }}>
-      <Header tTitle={t.title} userId={userId} subscriptionId={subscriptionId} />
-      <View style={{ flex: 1 }}>{children}</View>
-      <Footer tComputerGenerated={t.computerGenerated} tPage={t.page} tOf={t.of} />
-    </StandardPage>
-  )
-}
-
-export default SubscriptionAgreementPage

package/src/templates/SubscriptionAgreement/TermsOfUse.tsx

@@ -1,30 +0,0 @@
-import { Text, View } from '@react-pdf/renderer'
-import { FC } from 'react'
-import TermsOfUseSubSection from './TermsOfUseSubSection.js'
-import { SubscriptionAgreementTranslation } from './translations.js'
-
-type Props = {
-  t: SubscriptionAgreementTranslation['termsOfUse']
-}
-
-const TermsOfUse: FC<Props> = ({ t }) => {
-  return (
-    <View style={{ rowGap: 16 }}>
-      <Text style={{ fontWeight: 'bold', textTransform: 'uppercase' }}>{t.title}</Text>
-      <View style={{ rowGap: 16, lineHeight: 1.4 }}>
-        {t.content.map((section, i) => (
-          <View key={section.title} style={{ rowGap: 16 }}>
-            <Text style={{ fontWeight: 'bold' }}>{`${i + 1} ${section.title}`}</Text>
-            <View style={{ rowGap: 16, paddingLeft: 16 }}>
-              {section.subSections.map((subSection, j) => (
-                <TermsOfUseSubSection indices={[i + 1, j + 1]} subSection={subSection} key={`${i + 1}.${j}`} />
-              ))}
-            </View>
-          </View>
-        ))}
-      </View>
-    </View>
-  )
-}
-
-export default TermsOfUse

package/src/templates/SubscriptionAgreement/TermsOfUseSubSection.tsx

@@ -1,44 +0,0 @@
-import { Text, View } from '@react-pdf/renderer'
-import type { FC } from 'react'
-import { useMemo } from 'react'
-
-type TermsOfUseSubSectionType =
-  | string
-  | {
-      paragraph: string
-      subSections: TermsOfUseSubSectionType[]
-    }
-
-type Props = {
-  indices: number[]
-  subSection: TermsOfUseSubSectionType
-}
-
-const TermsOfUseSubSection: FC<Props> = ({ indices, subSection }) => {
-  const { indicesString, paddingLeft } = useMemo(
-    () => ({
-      indicesString: indices.reduce((prev, curr, i) => `${prev}${curr}${i === indices.length - 1 ? '' : '.'}`, ''),
-      paddingLeft: Math.max(indices.length - 2, 0) * 16
-    }),
-    []
-  )
-
-  return typeof subSection === 'string' ? (
-    <View style={{ flexDirection: 'row', paddingLeft, columnGap: 16 }} key={indicesString}>
-      <Text style={{ fontWeight: 'bold' }}>{indicesString}</Text>
-      <Text style={{ textAlign: 'justify', flex: 1 }}>{subSection}</Text>
-    </View>
-  ) : 'subSections' in subSection ? (
-    <View key={indicesString} style={{ gap: 16 }}>
-      <View style={{ flexDirection: 'row', paddingLeft, columnGap: 16 }} key={indicesString}>
-        <Text style={{ fontWeight: 'bold' }}>{indicesString}</Text>
-        <Text style={{ textAlign: 'justify', flex: 1 }}>{subSection.paragraph}</Text>
-      </View>
-      {subSection.subSections.map((subSection, i) => (
-        <TermsOfUseSubSection key={`${indices}.${i}`} indices={[...indices, i + 1]} subSection={subSection} />
-      ))}
-    </View>
-  ) : null
-}
-
-export default TermsOfUseSubSection

package/src/templates/SubscriptionAgreement/index.tsx

@@ -1,66 +0,0 @@
-import { SignatureDetails, Subscription, SubscriptionSchedule, User, Vehicle } 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 Confirmation from './Confirmation.js'
-import CoverPage from './CoverPage.js'
-import Details from './Details.js'
-import SubscriptionAgreementPage from './SubscriptionAgreementPage.js'
-import TermsOfUse from './TermsOfUse.js'
-import { useTranslations } from './translations.js'
-
-export type SubscriptionForAgreement = Subscription & {
-  user: User
-  vehicle: Vehicle
-  schedule?: SubscriptionSchedule | null
-}
-
-type Options = {
-  locale?: PdfTemplatesSupportedLocales
-  subscription: SubscriptionForAgreement
-}
-export const generateSubscriptionAgreementPdf = async ({ locale = 'en', subscription }: Options, fileName?: string) => {
-  if (!subscription.signature) {
-    throw new Error('Signature not found')
-  }
-  return await toPdf(
-    <SubscriptionAgreement locale={locale} signature={subscription.signature} subscription={subscription} />,
-    fileName
-  )
-}
-
-type Props = {
-  locale?: PdfTemplatesSupportedLocales
-  signature: SignatureDetails
-  subscription: SubscriptionForAgreement
-}
-const SubscriptionAgreement: FC<Props> = ({ locale = 'en', signature, subscription }) => {
-  if (!signature.signedAt) {
-    throw new Error(`Missing 'signature.signedAt'`)
-  }
-
-  const pageProps = useMemo(() => {
-    return {
-      t: useTranslations(locale),
-      userId: subscription.userId,
-      subscriptionId: subscription.id
-    }
-  }, [])
-  const { t } = pageProps
-
-  return (
-    <Document title={t.title} language={locale}>
-      <SubscriptionAgreementPage {...pageProps}>
-        <CoverPage tTitle={t.title} tCover={t.cover} signedAt={signature.signedAt} user={subscription.user} />
-      </SubscriptionAgreementPage>
-      <SubscriptionAgreementPage {...pageProps}>
-        <TermsOfUse t={t.termsOfUse} />
-      </SubscriptionAgreementPage>
-      <SubscriptionAgreementPage {...pageProps}>
-        <Details tDetails={t.details} subscription={subscription} />
-        <Confirmation tConfirmation={t.confirmation} subscription={subscription} />
-      </SubscriptionAgreementPage>
-    </Document>
-  )
-}