@driveflux/pdf 4.0.77 → 5.0.0-feature-e-invoicing.0

package/src/preview/fonts/register-fonts.ts

@@ -0,0 +1,395 @@
+import { Font } from '@react-pdf/renderer'
+import gothamBlack from './GOTHAM-BLACK.TTF'
+import gothamBlackItalic from './GOTHAM-BLACKITALIC.TTF'
+import gothamBold from './GOTHAM-BOLD.TTF'
+import gothamXLight from './GOTHAM-XLIGHT.TTF'
+import gothamXLightItalic from './GOTHAM-XLIGHTITALIC.TTF'
+import gothamBoldItalic from './Gotham-BoldItalic.otf'
+import gothamBook from './Gotham-Book.otf'
+import gothamBookItalic from './Gotham-BookItalic.otf'
+import gothamExtraLight from './Gotham-ExtraLight.otf'
+import gothamExtraLightItalic from './Gotham-ExtraLightItalic.otf'
+import gothamLight from './Gotham-Light.otf'
+import gothamLightItalic from './Gotham-LightItalic.otf'
+import gothamMedium from './Gotham-Medium.otf'
+import gothamMediumItalic from './Gotham-MediumItalic.otf'
+// Standard Gotham fonts
+import gothamThin from './Gotham-Thin.otf'
+import gothamThinItalic from './Gotham-ThinItalic.otf'
+import gothamUltra from './Gotham-Ultra.otf'
+import gothamUltraItalic from './Gotham-UltraItalic.otf'
+import gothamNarrowBlack from './GothamNarrow-Black.otf'
+import gothamNarrowBlackItalic from './GothamNarrow-BlackItalic.otf'
+import gothamNarrowBook from './GothamNarrow-Book.otf'
+import gothamNarrowBookItalic from './GothamNarrow-BookItalic.otf'
+import gothamNarrowLight from './GothamNarrow-Light.otf'
+import gothamNarrowLightItalic from './GothamNarrow-LightItalic.otf'
+import gothamNarrowMedium from './GothamNarrow-Medium.otf'
+import gothamNarrowMediumItalic from './GothamNarrow-MediumItalic.otf'
+// Gotham Narrow fonts
+import gothamNarrowThin from './GothamNarrow-Thin.otf'
+import gothamNarrowThinItalic from './GothamNarrow-ThinItalic.otf'
+import gothamNarrowUltra from './GothamNarrow-Ultra.otf'
+import gothamNarrowUltraItalic from './GothamNarrow-UltraItalic.otf'
+import gothamNarrowXLight from './GothamNarrow-XLight.otf'
+import gothamNarrowXLightItalic from './GothamNarrow-XLightItalic.otf'
+import gothamExtraNarrowBold from './gotham-extra-narrow-bold.otf'
+import gothamExtraNarrowBoldItalic from './gotham-extra-narrow-bold-italic.otf'
+// Gotham Extra Narrow fonts
+import gothamExtraNarrowBook from './gotham-extra-narrow-book.otf'
+import gothamExtraNarrowBookItalic from './gotham-extra-narrow-book-italic.otf'
+import gothamExtraNarrowLight from './gotham-extra-narrow-light.otf'
+import gothamExtraNarrowLightItalic from './gotham-extra-narrow-light-italic.otf'
+import gothamExtraNarrowMedium from './gotham-extra-narrow-medium.otf'
+import gothamExtraNarrowMediumItalic from './gotham-extra-narrow-medium-italic.otf'
+import gothamRoundedBold from './gotham-rounded-bold.otf'
+import gothamRoundedBoldItalic from './gotham-rounded-bold-italic.otf'
+// Gotham Rounded fonts
+import gothamRoundedBook from './gotham-rounded-book.otf'
+import gothamRoundedBookItalic from './gotham-rounded-book-italic.otf'
+import gothamRoundedLight from './gotham-rounded-light.otf'
+import gothamRoundedLightItalic from './gotham-rounded-light-italic.otf'
+import gothamRoundedMedium from './gotham-rounded-medium.otf'
+import gothamRoundedMediumItalic from './gotham-rounded-medium-italic.otf'
+
+export const registerFonts = () => {
+  // Standard Gotham fonts
+  // Gotham-Thin
+  Font.register({
+    family: 'Gotham-Thin',
+    src: gothamThin,
+    fontStyle: 'normal',
+    fontWeight: 100,
+  })
+  Font.register({
+    family: 'Gotham-Thin',
+    src: gothamThinItalic,
+    fontStyle: 'italic',
+    fontWeight: 100,
+  })
+
+  // Gotham-XLight
+  Font.register({
+    family: 'Gotham-XLight',
+    src: gothamXLight,
+    fontStyle: 'normal',
+    fontWeight: 200,
+  })
+  Font.register({
+    family: 'Gotham-XLight',
+    src: gothamXLightItalic,
+    fontStyle: 'italic',
+    fontWeight: 200,
+  })
+
+  // Gotham-ExtraLight
+  Font.register({
+    family: 'Gotham-ExtraLight',
+    src: gothamExtraLight,
+    fontStyle: 'normal',
+    fontWeight: 200,
+  })
+  Font.register({
+    family: 'Gotham-ExtraLight',
+    src: gothamExtraLightItalic,
+    fontStyle: 'italic',
+    fontWeight: 200,
+  })
+
+  // Gotham-Light
+  Font.register({
+    family: 'Gotham-Light',
+    src: gothamLight,
+    fontStyle: 'normal',
+    fontWeight: 300,
+  })
+  Font.register({
+    family: 'Gotham-Light',
+    src: gothamLightItalic,
+    fontStyle: 'italic',
+    fontWeight: 300,
+  })
+
+  // Gotham-Book
+  Font.register({
+    family: 'Gotham-Book',
+    src: gothamBook,
+    fontStyle: 'normal',
+    fontWeight: 400,
+  })
+  Font.register({
+    family: 'Gotham-Book',
+    src: gothamBookItalic,
+    fontStyle: 'italic',
+    fontWeight: 400,
+  })
+
+  // Gotham-Medium
+  Font.register({
+    family: 'Gotham-Medium',
+    src: gothamMedium,
+    fontStyle: 'normal',
+    fontWeight: 500,
+  })
+  Font.register({
+    family: 'Gotham-Medium',
+    src: gothamMediumItalic,
+    fontStyle: 'italic',
+    fontWeight: 500,
+  })
+
+  // Gotham-Bold
+  Font.register({
+    family: 'Gotham-Bold',
+    src: gothamBold,
+    fontStyle: 'normal',
+    fontWeight: 700,
+  })
+  Font.register({
+    family: 'Gotham-Bold',
+    src: gothamBoldItalic,
+    fontStyle: 'italic',
+    fontWeight: 700,
+  })
+
+  // Gotham-Black
+  Font.register({
+    family: 'Gotham-Black',
+    src: gothamBlack,
+    fontStyle: 'normal',
+    fontWeight: 800,
+  })
+  Font.register({
+    family: 'Gotham-Black',
+    src: gothamBlackItalic,
+    fontStyle: 'italic',
+    fontWeight: 800,
+  })
+
+  // Gotham-Ultra
+  Font.register({
+    family: 'Gotham-Ultra',
+    src: gothamUltra,
+    fontStyle: 'normal',
+    fontWeight: 900,
+  })
+  Font.register({
+    family: 'Gotham-Ultra',
+    src: gothamUltraItalic,
+    fontStyle: 'italic',
+    fontWeight: 900,
+  })
+
+  // Gotham Narrow fonts
+  // GothamNarrow-Thin
+  Font.register({
+    family: 'GothamNarrow-Thin',
+    src: gothamNarrowThin,
+    fontStyle: 'normal',
+    fontWeight: 100,
+  })
+  Font.register({
+    family: 'GothamNarrow-Thin',
+    src: gothamNarrowThinItalic,
+    fontStyle: 'italic',
+    fontWeight: 100,
+  })
+
+  // GothamNarrow-XLight
+  Font.register({
+    family: 'GothamNarrow-XLight',
+    src: gothamNarrowXLight,
+    fontStyle: 'normal',
+    fontWeight: 200,
+  })
+  Font.register({
+    family: 'GothamNarrow-XLight',
+    src: gothamNarrowXLightItalic,
+    fontStyle: 'italic',
+    fontWeight: 200,
+  })
+
+  // GothamNarrow-Light
+  Font.register({
+    family: 'GothamNarrow-Light',
+    src: gothamNarrowLight,
+    fontStyle: 'normal',
+    fontWeight: 300,
+  })
+  Font.register({
+    family: 'GothamNarrow-Light',
+    src: gothamNarrowLightItalic,
+    fontStyle: 'italic',
+    fontWeight: 300,
+  })
+
+  // GothamNarrow-Book
+  Font.register({
+    family: 'GothamNarrow-Book',
+    src: gothamNarrowBook,
+    fontStyle: 'normal',
+    fontWeight: 400,
+  })
+  Font.register({
+    family: 'GothamNarrow-Book',
+    src: gothamNarrowBookItalic,
+    fontStyle: 'italic',
+    fontWeight: 400,
+  })
+
+  // GothamNarrow-Medium
+  Font.register({
+    family: 'GothamNarrow-Medium',
+    src: gothamNarrowMedium,
+    fontStyle: 'normal',
+    fontWeight: 500,
+  })
+  Font.register({
+    family: 'GothamNarrow-Medium',
+    src: gothamNarrowMediumItalic,
+    fontStyle: 'italic',
+    fontWeight: 500,
+  })
+
+  // GothamNarrow-Black
+  Font.register({
+    family: 'GothamNarrow-Black',
+    src: gothamNarrowBlack,
+    fontStyle: 'normal',
+    fontWeight: 800,
+  })
+  Font.register({
+    family: 'GothamNarrow-Black',
+    src: gothamNarrowBlackItalic,
+    fontStyle: 'italic',
+    fontWeight: 800,
+  })
+
+  // GothamNarrow-Ultra
+  Font.register({
+    family: 'GothamNarrow-Ultra',
+    src: gothamNarrowUltra,
+    fontStyle: 'normal',
+    fontWeight: 900,
+  })
+  Font.register({
+    family: 'GothamNarrow-Ultra',
+    src: gothamNarrowUltraItalic,
+    fontStyle: 'italic',
+    fontWeight: 900,
+  })
+
+  // Gotham Rounded fonts
+  // GothamRounded-Book
+  Font.register({
+    family: 'GothamRounded-Book',
+    src: gothamRoundedBook,
+    fontStyle: 'normal',
+    fontWeight: 400,
+  })
+  Font.register({
+    family: 'GothamRounded-Book',
+    src: gothamRoundedBookItalic,
+    fontStyle: 'italic',
+    fontWeight: 400,
+  })
+
+  // GothamRounded-Light
+  Font.register({
+    family: 'GothamRounded-Light',
+    src: gothamRoundedLight,
+    fontStyle: 'normal',
+    fontWeight: 300,
+  })
+  Font.register({
+    family: 'GothamRounded-Light',
+    src: gothamRoundedLightItalic,
+    fontStyle: 'italic',
+    fontWeight: 300,
+  })
+
+  // GothamRounded-Medium
+  Font.register({
+    family: 'GothamRounded-Medium',
+    src: gothamRoundedMedium,
+    fontStyle: 'normal',
+    fontWeight: 500,
+  })
+  Font.register({
+    family: 'GothamRounded-Medium',
+    src: gothamRoundedMediumItalic,
+    fontStyle: 'italic',
+    fontWeight: 500,
+  })
+
+  // GothamRounded-Bold
+  Font.register({
+    family: 'GothamRounded-Bold',
+    src: gothamRoundedBold,
+    fontStyle: 'normal',
+    fontWeight: 700,
+  })
+  Font.register({
+    family: 'GothamRounded-Bold',
+    src: gothamRoundedBoldItalic,
+    fontStyle: 'italic',
+    fontWeight: 700,
+  })
+
+  // Gotham Extra Narrow fonts
+  // GothamExtraNarrow-Book
+  Font.register({
+    family: 'GothamExtraNarrow-Book',
+    src: gothamExtraNarrowBook,
+    fontStyle: 'normal',
+    fontWeight: 400,
+  })
+  Font.register({
+    family: 'GothamExtraNarrow-Book',
+    src: gothamExtraNarrowBookItalic,
+    fontStyle: 'italic',
+    fontWeight: 400,
+  })
+
+  // GothamExtraNarrow-Light
+  Font.register({
+    family: 'GothamExtraNarrow-Light',
+    src: gothamExtraNarrowLight,
+    fontStyle: 'normal',
+    fontWeight: 300,
+  })
+  Font.register({
+    family: 'GothamExtraNarrow-Light',
+    src: gothamExtraNarrowLightItalic,
+    fontStyle: 'italic',
+    fontWeight: 300,
+  })
+
+  // GothamExtraNarrow-Medium
+  Font.register({
+    family: 'GothamExtraNarrow-Medium',
+    src: gothamExtraNarrowMedium,
+    fontStyle: 'normal',
+    fontWeight: 500,
+  })
+  Font.register({
+    family: 'GothamExtraNarrow-Medium',
+    src: gothamExtraNarrowMediumItalic,
+    fontStyle: 'italic',
+    fontWeight: 500,
+  })
+
+  // GothamExtraNarrow-Bold
+  Font.register({
+    family: 'GothamExtraNarrow-Bold',
+    src: gothamExtraNarrowBold,
+    fontStyle: 'normal',
+    fontWeight: 700,
+  })
+  Font.register({
+    family: 'GothamExtraNarrow-Bold',
+    src: gothamExtraNarrowBoldItalic,
+    fontStyle: 'italic',
+    fontWeight: 700,
+  })
+}

package/src/preview/frontend.tsx

@@ -0,0 +1,23 @@
+import { NuqsAdapter } from 'nuqs/adapters/react'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './client/app'
+
+const elem = document.getElementById('root')!
+const app = (
+  <StrictMode>
+    <NuqsAdapter>
+      <App />
+    </NuqsAdapter>
+  </StrictMode>
+)
+
+if (import.meta.hot) {
+  // With hot module reloading, `import.meta.hot.data` is persisted.
+  // biome-ignore lint/suspicious/noAssignInExpressions: generated by bun
+  const root = (import.meta.hot.data.root ??= createRoot(elem))
+  root.render(app)
+} else {
+  // The hot module reloading API is not available in production.
+  createRoot(elem).render(app)
+}

package/src/preview/global.css

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+@import "../../node_modules/@driveflux/beam/dist/base-styles.css";
+@source "../../node_modules/@driveflux/beam/dist";
+
+@layer base {
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: "Gotham-Bold", sans-serif;
+    text-transform: uppercase;
+  }
+
+  body {
+    letter-spacing: 1px;
+    font-size: 14px;
+  }
+
+  li {
+    margin-left: 16px;
+  }
+}
+
+@layer utilities {
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+  }
+}

package/src/preview/preview.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Preview PDF</title>
+  </head>
+  <body class="text-base">
+    <div id="root"></div>
+    <script type="module" src="./frontend.tsx"></script>
+  </body>
+</html>

package/src/preview/server.ts

@@ -0,0 +1,28 @@
+import { serve } from 'bun'
+import { api } from './api'
+import preview from './preview.html'
+
+const extractPort = (url: string | undefined) => {
+  if (!url) return 3000
+  const urlObj = new URL(url)
+  return urlObj.port
+}
+
+const server = serve({
+  routes: {
+    // Serve preview.html for all unmatched routes.
+    '/': preview,
+    '/api/*': api.handle,
+  },
+
+  development: process.env.NODE_ENV !== 'production' && {
+    // Enable browser hot reloading in development
+    hmr: true,
+
+    // Echo console logs from the browser to the server
+    console: true,
+  },
+  port: extractPort(process.env.FLUX_PUBLIC_APP_URL),
+})
+
+console.log(`🚀 Server running at ${server.url}`)

package/src/repository.ts

@@ -0,0 +1,39 @@
+import { prisma } from '@driveflux/db'
+import { PDFErrors } from './errors'
+
+class PDFRepository {
+  async getInvoiceForPDF(invoiceId: string) {
+    const invoice = await prisma.invoice.findUnique({
+      where: {
+        id: invoiceId,
+      },
+      select: {
+        id: true,
+        eInvoice: true,
+        total: true,
+        lines: true,
+        subscriptionDetails: true,
+        payerName: true,
+        billingAddress: true,
+        payerPhoneNumber: true,
+        payerEmail: true,
+        paidAt: true,
+        createdAt: true,
+        date: true,
+        paid: true,
+      },
+    })
+
+    if (!invoice) {
+      throw new PDFErrors.InvoiceNotFound(`Invoice ${invoiceId} not found`)
+    }
+    if (!invoice.eInvoice) {
+      throw new PDFErrors.InvoiceNotEInvoice(invoiceId)
+    }
+    return invoice as Omit<typeof invoice, 'eInvoice'> & {
+      eInvoice: NonNullable<typeof invoice.eInvoice>
+    }
+  }
+}
+
+export const repository = new PDFRepository()

package/src/templates/invoice/colors.ts

@@ -0,0 +1,6 @@
+export const colors = {
+  primaryBlack: '#030303',
+  blueBranding: '#50C8E8',
+  darkGrey: '#585858',
+  lightGrey: '#EFEFF0',
+}

package/src/templates/invoice/company-details.tsx

@@ -0,0 +1,124 @@
+import { StyleSheet, Text, View } from '@react-pdf/renderer'
+import { colors } from './colors'
+
+type CompanyDetailsProps = {
+  title: string
+  companyName: string
+  address: string
+  sstNumber: string
+  tinNumber: string
+  invoiceNumber: string
+}
+
+const styles = StyleSheet.create({
+  title: {
+    fontFamily: 'Gotham-Medium',
+    fontSize: 8,
+    fontWeight: 500,
+    color: colors.primaryBlack,
+    marginBottom: 2,
+  },
+  companyName: {
+    fontFamily: 'Gotham-Medium',
+    fontSize: 6,
+    fontWeight: 500,
+    color: colors.darkGrey,
+  },
+  address: {
+    fontFamily: 'Gotham-Book',
+    fontSize: 6,
+    fontWeight: 400,
+    color: colors.darkGrey,
+  },
+  detailsContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignSelf: 'stretch',
+  },
+  item: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignSelf: 'stretch',
+    minHeight: 0,
+  },
+  titleContainer: {
+    width: 60,
+    flexShrink: 0,
+    flexGrow: 0,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  detailsTitle: {
+    fontFamily: 'Gotham-Book',
+    fontSize: 6,
+    fontWeight: 400,
+    color: colors.darkGrey,
+    textAlign: 'right',
+  },
+  colon: {
+    fontFamily: 'Gotham-Book',
+    fontSize: 6,
+    fontWeight: 400,
+    color: colors.darkGrey,
+    width: 6,
+    marginLeft: 2,
+    flexShrink: 0,
+    flexGrow: 0,
+  },
+  details: {
+    fontFamily: 'Gotham-Medium',
+    fontSize: 6,
+    fontWeight: 500,
+    color: colors.primaryBlack,
+    flex: 1,
+    marginLeft: 0,
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 2,
+    alignSelf: 'stretch',
+  },
+})
+
+export const CompanyDetails = ({
+  title,
+  companyName,
+  address,
+  sstNumber,
+  tinNumber,
+  invoiceNumber,
+}: CompanyDetailsProps) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.companyName}>{companyName}</Text>
+      <Text style={styles.address}>{address}</Text>
+
+      <View style={styles.detailsContainer}>
+        <View style={styles.item}>
+          <View style={styles.titleContainer}>
+            <Text style={styles.detailsTitle}>SST No</Text>
+          </View>
+          <Text style={styles.colon}>:</Text>
+          <Text style={styles.details}>{sstNumber}</Text>
+        </View>
+        <View style={styles.item}>
+          <View style={styles.titleContainer}>
+            <Text style={styles.detailsTitle}>TIN No</Text>
+          </View>
+          <Text style={styles.colon}>:</Text>
+          <Text style={styles.details}>{tinNumber}</Text>
+        </View>
+        <View style={styles.item}>
+          <View style={styles.titleContainer}>
+            <Text style={styles.detailsTitle}>Invoice No</Text>
+          </View>
+          <Text style={styles.colon}>:</Text>
+          <Text style={styles.details}>{invoiceNumber}</Text>
+        </View>
+      </View>
+    </View>
+  )
+}