@driveflux/pdf 1.0.1

package/src/components/FluxLogo.tsx

@@ -0,0 +1,52 @@
+import { Defs, G, Path, Rect, Svg } from '@react-pdf/renderer'
+
+const FluxLogo = () => {
+  return (
+    <Svg width="92" height="29" viewBox="0 0 92 29" fill="none">
+      <G clipPath="url(#clip0_664_102105)">
+        <Path
+          d="M23.6621 6.12305H35.6903V8.00999H25.5568V13.5529H33.805V15.434H25.5568V22.8638H23.6715L23.6621 6.12305Z"
+          fill="black"
+        />
+        <Path d="M40.9981 6.12305H42.8834V20.9827H52.3039V22.8697H40.9922L40.9981 6.12305Z" fill="black" />
+        <Path
+          d="M57.6172 15.6002V6.12305H59.5025V15.4811C59.5025 19.0946 61.4149 21.129 64.6187 21.129C67.7035 21.129 69.6642 19.2621 69.6642 15.6002V6.12305H71.5495V15.4552C71.5495 20.3376 68.751 22.8744 64.5669 22.8744C60.4381 22.8756 57.6172 20.3388 57.6172 15.6002Z"
+          fill="black"
+        />
+        <Path
+          d="M83.2965 14.3324L77.1033 6.12305H79.3338L84.4736 12.9632L89.5663 6.12305H91.7674L85.5742 14.3077L92.0054 22.8756H89.7525L84.4006 15.6722L79.0451 22.8756H76.8594L83.2965 14.3324Z"
+          fill="black"
+        />
+        <Path
+          opacity="0.3"
+          d="M3.05934 17.5614C2.45475 17.5598 1.86415 17.3792 1.36192 17.0423C0.859683 16.7054 0.468271 16.2273 0.23697 15.6682C0.00566877 15.1091 -0.0551799 14.494 0.0620863 13.9004C0.179353 13.3068 0.469491 12.7611 0.895964 12.3322L12.3256 0.892604C12.909 0.364801 13.6728 0.0817665 14.459 0.102098C15.2452 0.12243 15.9934 0.444573 16.5488 1.00183C17.1042 1.55908 17.4243 2.30877 17.4426 3.09567C17.461 3.88257 17.1764 4.64641 16.6476 5.22904L5.218 16.6686C4.93441 16.9521 4.59781 17.1768 4.22742 17.33C3.85703 17.4832 3.46011 17.5618 3.05934 17.5614Z"
+          fill="#50C8E8"
+        />
+        <Path
+          opacity="0.3"
+          d="M8.77458 23.28C8.16964 23.2788 7.57859 23.0985 7.07593 22.7616C6.57326 22.4248 6.18149 21.9465 5.94999 21.3871C5.7185 20.8277 5.65764 20.2123 5.7751 19.6183C5.89256 19.0244 6.18308 18.4786 6.61002 18.0496L12.3213 12.3334C12.6004 12.027 12.9387 11.7804 13.3158 11.6086C13.6928 11.4368 14.1008 11.3433 14.5149 11.3338C14.9291 11.3243 15.3409 11.399 15.7254 11.5533C16.1099 11.7076 16.4592 11.9384 16.752 12.2317C17.0449 12.525 17.2753 12.8746 17.4293 13.2596C17.5832 13.6445 17.6576 14.0567 17.6479 14.4712C17.6382 14.8858 17.5446 15.294 17.3727 15.6713C17.2008 16.0486 16.9543 16.3871 16.648 16.6663L10.9368 22.3837C10.653 22.6681 10.3159 22.8936 9.94489 23.0474C9.57386 23.2013 9.17617 23.2803 8.77458 23.28Z"
+          fill="#50C8E8"
+        />
+        <Path
+          d="M14.4866 29.0001C16.176 29.0001 17.5455 27.6294 17.5455 25.9385C17.5455 24.2477 16.176 22.877 14.4866 22.877C12.7972 22.877 11.4277 24.2477 11.4277 25.9385C11.4277 27.6294 12.7972 29.0001 14.4866 29.0001Z"
+          fill="#50C8E8"
+        />
+        <Path
+          d="M14.4866 6.12314C16.176 6.12314 17.5455 4.75243 17.5455 3.06157C17.5455 1.37071 16.176 0 14.4866 0C12.7972 0 11.4277 1.37071 11.4277 3.06157C11.4277 4.75243 12.7972 6.12314 14.4866 6.12314Z"
+          fill="#50C8E8"
+        />
+        <Path
+          d="M14.4866 17.5616C16.176 17.5616 17.5455 16.1909 17.5455 14.5C17.5455 12.8092 16.176 11.4385 14.4866 11.4385C12.7972 11.4385 11.4277 12.8092 11.4277 14.5C11.4277 16.1909 12.7972 17.5616 14.4866 17.5616Z"
+          fill="#50C8E8"
+        />
+      </G>
+      <Defs>
+        <clipPath id="clip0_664_102105">
+          <Rect width="92" height="29" fill="white" />
+        </clipPath>
+      </Defs>
+    </Svg>
+  )
+}
+
+export default FluxLogo

package/src/components/StandardPage.tsx

@@ -0,0 +1,32 @@
+import { Font, Page, PageProps } from '@react-pdf/renderer'
+import React, { PropsWithChildren } from 'react'
+
+type Props = PageProps & {}
+
+Font.register({
+  family: 'Figtree',
+  fonts: [
+    {
+      src: 'https://fonts.gstatic.com/s/figtree/v5/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_chQF5ewkEU4HTy.ttf',
+      fontWeight: 'normal'
+    },
+    {
+      src: 'https://fonts.gstatic.com/s/figtree/v5/_Xmz-HUzqDCFdgfMsYiV_F7wfS-Bs_eYR15ewkEU4HTy.ttf',
+      fontWeight: 'bold'
+    }
+  ]
+})
+Font.register({
+  family: 'Allura',
+  src: 'https://fonts.gstatic.com/s/allura/v21/9oRPNYsQpS4zjuAPjAIXPtrrGA.ttf'
+})
+
+const StandardDocument: React.FC<PropsWithChildren<Props>> = ({ children, style, ...props }) => {
+  return (
+    <Page style={{ fontFamily: 'Figtree', fontStyle: 'normal', ...style }} {...props}>
+      {children}
+    </Page>
+  )
+}
+
+export default StandardDocument

package/src/debug.ts

@@ -0,0 +1,36 @@
+import { loadAllEnv } from '@driveflux/env'
+import { subscription } from './__mocks__/subscription.js'
+import { generateSubscriptionAgreementPdf } from './templates/SubscriptionAgreement/index.js'
+
+const debugSubscriptionAgreement = async () => {
+  if (!subscription) {
+    console.error('no such subscription')
+    return
+  }
+
+  await generateSubscriptionAgreementPdf({ subscription }, `${process.cwd()}/output/subscription-agreement.pdf`)
+}
+
+//! put all the debugging functions here
+const debugCases: Promise<any>[] = [
+  debugSubscriptionAgreement()
+]
+
+const debug = async () => {
+  loadAllEnv()
+
+  const results = await Promise.allSettled(debugCases)
+
+  if (results.some((res) => res.status === 'rejected')) {
+    results.forEach((res, i) => {
+      if (res.status === 'rejected') {
+        console.error(`debug no ${i + 1} error:`, res.reason)
+      }
+    })
+    return
+  }
+
+  console.log('Generated all PDFs successfully!')
+  console.log(`You can view them in the 'output' folder!`)
+}
+debug()

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './templates/index.js'
+export * from './types.js'
+export * from './utils.js'

package/src/templates/SubscriptionAgreement/Confirmation.tsx

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+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}` || '-'}</Text>
+    </View>
+  )
+}
+
+export default LabelValue

package/src/templates/SubscriptionAgreement/SubscriptionAgreementPage.tsx

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

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

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

@@ -0,0 +1,66 @@
+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>
+  )
+}