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

package/src/templates/invoice/flux-invoice.tsx

@@ -0,0 +1,134 @@
+import { tz } from '@date-fns/tz'
+import type { BillingAddress } from '@driveflux/db'
+import { StyleSheet, Text, View } from '@react-pdf/renderer'
+import { format } from 'date-fns/format'
+import { config } from '../../config'
+import logo from './images/logo.png'
+import { InvoiceDetails } from './invoice-details'
+import { InvoiceNotes } from './invoice-notes'
+import { LetterHead } from './letter-head'
+import { PlatformAndHostDetails } from './platform-and-host-details'
+import { Spacer } from './spacer'
+import { SplitContainer } from './split-container'
+import { SplitContainerItems } from './split-container-items'
+import { StandardPage } from './standard-page'
+import type { InvoiceForPDF } from './types'
+
+type FLUXInvoiceProps = {
+  data: InvoiceForPDF
+}
+
+// Helper function to format billing address
+const formatBillingAddress = (
+  address: BillingAddress | null | undefined,
+): string => {
+  if (!address) return '-'
+  const parts = [
+    address.street1,
+    address.street2,
+    address.city,
+    address.state,
+    address.postalCode,
+  ].filter(Boolean)
+  return parts.join(', ')
+}
+
+const styles = StyleSheet.create({
+  phoneEmailContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+  },
+})
+
+export const FLUXInvoice = ({ data }: FLUXInvoiceProps) => {
+  const logoUri = new URL(logo, config.appUrl).toString()
+  return (
+    <StandardPage
+      letterHead={
+        <LetterHead
+          logoSource={logoUri}
+          companyName="FLUX Sdn. Bhd."
+          companyAddress="15-2 Jalan Solaris, Solaris Mont Kiara, 50480 Kuala Lumpur"
+          purpose="Invoice"
+          idLabel="Inv No"
+          idValue={data.eInvoice?.fluxDetails.invoiceNumber || '-'}
+        />
+      }
+    >
+      <SplitContainer
+        left={
+          <SplitContainerItems
+            items={[
+              {
+                title: 'Bill To',
+                value: data.payerName,
+              },
+              {
+                title: 'Address',
+                value: formatBillingAddress(data.billingAddress),
+              },
+              {
+                title: 'Tel / Email',
+                value: (
+                  <View style={styles.phoneEmailContainer}>
+                    <Text>{data.payerPhoneNumber}</Text>
+                    <Text>{data.payerEmail}</Text>
+                  </View>
+                ),
+              },
+            ]}
+          />
+        }
+        right={
+          <SplitContainerItems
+            items={[
+              {
+                title: 'Invoice Issue Date',
+                value: format(data.createdAt, 'dd-MM-yyyy', {
+                  in: tz(config.timezone),
+                }),
+              },
+              {
+                title: 'Payment Due Date',
+                value: format(data.date, 'dd-MM-yyyy', {
+                  in: tz(config.timezone),
+                }),
+              },
+              {
+                title: 'Paid On',
+                value: data.paidAt
+                  ? format(data.paidAt, 'dd-MM-yyyy', {
+                      in: tz(config.timezone),
+                    })
+                  : '-',
+              },
+              {
+                title: 'Po No.',
+                value: data.eInvoice?.poNumber || '-',
+              },
+              {
+                title: 'Car Plate / Car Type',
+                value: data.subscriptionDetails?.vehicleModel || '-',
+              },
+              {
+                title: 'Sub ID',
+                value: data.subscriptionDetails?.subscriptionId || '-',
+              },
+            ]}
+          />
+        }
+      />
+      <Spacer height={12} />
+      <PlatformAndHostDetails data={data} />
+      <Spacer />
+      <InvoiceDetails
+        total={data.total}
+        paid={!!data.paidAt}
+        items={data.eInvoice.fluxDetails.lines}
+      />
+      <Spacer />
+      <InvoiceNotes />
+    </StandardPage>
+  )
+}

package/src/templates/invoice/footer.tsx

@@ -0,0 +1,46 @@
+import { StyleSheet, Text, View } from '@react-pdf/renderer'
+import { colors } from './colors'
+
+// Approximate footer height: line (0.6px) + gap (12px) + text (estimated 20-24px for wrapped text)
+// Using a safe estimate of ~36px total
+export const FOOTER_HEIGHT = 36
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 12,
+    width: '100%',
+  },
+  line: {
+    backgroundColor: colors.lightGrey,
+    width: '100%',
+    height: 0.6,
+  },
+  text: {
+    fontFamily: 'Gotham-Book',
+    fontSize: 6,
+    fontWeight: 400,
+    color: colors.darkGrey,
+    textAlign: 'left',
+  },
+})
+
+export const Footer = () => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.line} />
+      <Text style={styles.text}>
+        This document is issued by FLUX Sdn. Bhd. for the purposes of compliance
+        with, inter alia the (i) E-Invoice Guideline under the Income Tax Act
+        1967; (ii) Sales Tax on Low Value Goods Guideline under the Sales Tax
+        Act 2018; (iii) Logistics Service Guideline under the Service Tax Act
+        2018.
+      </Text>
+    </View>
+  )
+}

package/src/templates/invoice/host-invoice.tsx

@@ -0,0 +1,134 @@
+import { tz } from '@date-fns/tz'
+import type { BillingAddress } from '@driveflux/db'
+import { StyleSheet, Text, View } from '@react-pdf/renderer'
+import { format } from 'date-fns/format'
+import { config } from '../../config'
+import { InvoiceDetails } from './invoice-details'
+import { InvoiceNotes } from './invoice-notes'
+import { LetterHead } from './letter-head'
+import { PlatformAndHostDetails } from './platform-and-host-details'
+import { Spacer } from './spacer'
+import { SplitContainer } from './split-container'
+import { SplitContainerItems } from './split-container-items'
+import { StandardPage } from './standard-page'
+import type { InvoiceForPDF } from './types'
+
+export type HostInvoiceProps = {
+  data: {
+    eInvoice: Pick<InvoiceForPDF['eInvoice'], 'poNumber' | 'fluxDetails'> & {
+      hostDetails: NonNullable<InvoiceForPDF['eInvoice']['hostDetails']>
+    }
+  } & Pick<
+    InvoiceForPDF,
+    | 'payerName'
+    | 'billingAddress'
+    | 'payerPhoneNumber'
+    | 'payerEmail'
+    | 'date'
+    | 'total'
+    | 'paidAt'
+    | 'subscriptionDetails'
+  >
+}
+
+// Helper function to format billing address
+const formatBillingAddress = (
+  address: BillingAddress | null | undefined,
+): string => {
+  if (!address) return '-'
+  const parts = [
+    address.street1,
+    address.street2,
+    address.city,
+    address.state,
+    address.postalCode,
+  ].filter(Boolean)
+  return parts.join(', ')
+}
+
+const styles = StyleSheet.create({
+  phoneEmailContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 4,
+  },
+})
+
+export const HostInvoice = ({ data }: HostInvoiceProps) => {
+  return (
+    <StandardPage
+      letterHead={
+        <LetterHead
+          purpose="Invoice"
+          companyName="FLUX Sdn. Bhd."
+          companyAddress="15-2 Jalan Solaris, Solaris Mont Kiara, 50480 Kuala Lumpur"
+          idLabel="Inv No"
+          idValue={data.eInvoice.hostDetails.invoiceNumber || '-'}
+        />
+      }
+    >
+      <SplitContainer
+        left={
+          <SplitContainerItems
+            items={[
+              {
+                title: 'Bill To',
+                value: data.payerName,
+              },
+              {
+                title: 'Address',
+                value: formatBillingAddress(data.billingAddress),
+              },
+              {
+                title: 'Tel / Email',
+                value: (
+                  <View style={styles.phoneEmailContainer}>
+                    <Text>{data.payerPhoneNumber}</Text>
+                    <Text>{data.payerEmail}</Text>
+                  </View>
+                ),
+              },
+            ]}
+          />
+        }
+        right={
+          <SplitContainerItems
+            items={[
+              {
+                title: 'Invoice Date',
+                value: format(data.date, 'dd-MM-yyyy', {
+                  in: tz(config.timezone),
+                }),
+              },
+              {
+                title: 'Po No.',
+                value:
+                  data.eInvoice.hostDetails?.poNumber ||
+                  data.eInvoice.poNumber ||
+                  '-',
+              },
+              {
+                title: 'Car Plate / Car Type',
+                value: data.subscriptionDetails?.vehicleModel || '-',
+              },
+              {
+                title: 'Sub ID',
+                value: data.subscriptionDetails?.subscriptionId || '-',
+              },
+            ]}
+          />
+        }
+      />
+      <Spacer height={12} />
+      <PlatformAndHostDetails data={data} />
+      <Spacer />
+      <InvoiceDetails
+        total={data.total}
+        paid={!!data.paidAt}
+        items={data.eInvoice.hostDetails.lines}
+      />
+      <Spacer />
+      <InvoiceNotes />
+    </StandardPage>
+  )
+}

package/src/templates/invoice/images/logo.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="91px" height="29px" viewBox="0 0 91 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>Logo_Black</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="0.0664201087 0.228952542 14.9793913 0.228952542 14.9793913 16.6193593 0.0664201087 16.6193593"></polygon>
+        <polygon id="path-3" points="0.379826087 0.399216949 6.40758696 0.399216949 6.40758696 6.38983051 0.379826087 6.38983051"></polygon>
+    </defs>
+    <g id="UI" stroke="none" stroke-width="1" fill="none" fillRule="evenodd">
+        <g id="Flux_W_Index_3" transform="translate(-49.000000, -23.000000)">
+            <g id="Header-Copy">
+                <g id="Logo_Black" transform="translate(49.000000, 23.000000)">
+                    <polygon id="Fill-1" fill="#000000" points="23 7 35 7 35 8.91891081 24.8849846 8.91891081 24.8849846 14.5451328 33.1150154 14.5451328 33.1150154 16.4548672 24.8849846 16.4548672 24.8849846 24 23 24"></polygon>
+                    <polygon id="Fill-2" fill="#000000" points="40 7 41.8375644 7 41.8375644 22.081599 51 22.081599 51 24 40 24"></polygon>
+                    <g id="Group-19">
+                        <path d="M56.7696082,16.3991966 L56.7696082,7.12706102 L58.6306571,7.12706102 L58.6306571,16.2822136 C58.6306571,19.8177559 60.5154451,21.8079424 63.6727495,21.8079424 C66.7118527,21.8079424 68.6436245,19.9819254 68.6436245,16.3991966 L68.6436245,7.12706102 L70.5051679,7.12706102 L70.5051679,16.2586203 C70.5051679,21.0352644 67.7484614,23.5174678 63.6252712,23.5174678 C59.5495592,23.5174678 56.7696082,21.0352644 56.7696082,16.3991966" id="Fill-3" fill="#000000"></path>
+                        <g id="Group-7" transform="translate(75.668478, 6.898305)">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <g id="Clip-6"></g>
+                            <polygon id="Fill-5" fill="#000000" mask="url(#mask-2)" points="6.40427337 8.25998644 0.302327717 0.228952542 2.49325163 0.228952542 7.55858859 6.92549492 12.5764473 0.228952542 14.7441266 0.228952542 8.64218098 8.23688475 14.9795397 16.6193593 12.7648766 16.6193593 7.48786576 9.57137627 2.21036033 16.6193593 0.0664201087 16.6193593"></polygon>
+                        </g>
+                        <path d="M0.883244022,16.4406407 C-0.294315761,15.2703186 -0.294315761,13.372539 0.883244022,12.2017254 L12.1410321,1.01362373 C13.3185918,-0.156698305 15.2281082,-0.156698305 16.4056679,1.01362373 C17.5837223,2.18394576 17.5837223,4.08172542 16.4056679,5.25204746 L5.14837446,16.4406407 C4.55934728,17.0260475 3.78782554,17.3185051 3.01580924,17.3185051 C2.24379293,17.3185051 1.4722712,17.0260475 0.883244022,16.4406407 Z" id="Fill-8" fill="#50C8E8" opacity="0.3"></path>
+                        <path d="M6.51322609,22.0357729 C5.3356663,20.8649593 5.3356663,18.9676712 6.51322609,17.7968576 L12.1408837,12.2042814 C13.3184435,11.0334678 15.2279598,11.0334678 16.4060141,12.2042814 C17.5835739,13.3746034 17.5835739,15.2723831 16.4060141,16.4427051 L10.7783565,22.0357729 C10.1893293,22.6211797 9.41780761,22.9136373 8.6457913,22.9136373 C7.873775,22.9136373 7.10225326,22.6211797 6.51322609,22.0357729 Z" id="Fill-10" fill="#50C8E8" opacity="0.3"></path>
+                        <g id="Group-14" transform="translate(10.880435, 22.118644)">
+                            <mask id="mask-4" fill="white">
+                                <use xlink:href="#path-3"></use>
+                            </mask>
+                            <g id="Clip-13"></g>
+                            <path d="M6.40758696,3.39457288 C6.40758696,5.04904746 5.05841304,6.38992881 3.39370652,6.38992881 C1.72949457,6.38992881 0.379826087,5.04904746 0.379826087,3.39457288 C0.379826087,1.74058983 1.72949457,0.399216949 3.39370652,0.399216949 C5.05841304,0.399216949 6.40758696,1.74058983 6.40758696,3.39457288" id="Fill-12" fill="#50C8E8" mask="url(#mask-4)"></path>
+                        </g>
+                        <path d="M17.2880217,3.13155763 C17.2880217,4.7860322 15.9388478,6.12691356 14.2741413,6.12691356 C12.6099293,6.12691356 11.2602609,4.7860322 11.2602609,3.13155763 C11.2602609,1.47708305 12.6099293,0.136201695 14.2741413,0.136201695 C15.9388478,0.136201695 17.2880217,1.47708305 17.2880217,3.13155763" id="Fill-15" fill="#50C8E8"></path>
+                        <path d="M17.2880217,14.3221169 C17.2880217,15.9765915 15.9388478,17.3174729 14.2741413,17.3174729 C12.6099293,17.3174729 11.2602609,15.9765915 11.2602609,14.3221169 C11.2602609,12.6676424 12.6099293,11.326761 14.2741413,11.326761 C15.9388478,11.326761 17.2880217,12.6676424 17.2880217,14.3221169" id="Fill-17" fill="#50C8E8"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,231 @@
+import { StyleSheet, Text, View } from '@react-pdf/renderer'
+import { colors } from './colors'
+
+type InvoiceDetailsProps = {
+  showSST?: boolean
+  paid: boolean
+  total: number
+  items: {
+    description: string
+    amount: number
+    taxAmount?: number
+    total?: number
+  }[]
+}
+
+// Helper function to format numbers with commas and 2 decimal places
+const formatCurrency = (value: number): string => {
+  return value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignSelf: 'stretch',
+  },
+  headerRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    backgroundColor: '#ebfbff',
+    alignSelf: 'stretch',
+  },
+  headerCell: {
+    padding: 8,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  headerCellText: {
+    fontFamily: 'Gotham-Medium',
+    fontSize: 8,
+    fontWeight: 500,
+    color: colors.primaryBlack,
+  },
+  headerCellNo: {
+    width: 24,
+    alignItems: 'flex-start',
+  },
+  headerCellDescription: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  headerCellAmount: {
+    width: 80,
+    alignItems: 'flex-end',
+  },
+  headerCellSST: {
+    width: 80,
+    alignItems: 'flex-end',
+  },
+  headerCellRM: {
+    width: 80,
+    alignItems: 'flex-end',
+  },
+  dataRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    borderBottomWidth: 0.6,
+    borderBottomColor: colors.lightGrey,
+    borderBottomStyle: 'solid',
+    alignSelf: 'stretch',
+  },
+  dataCell: {
+    padding: 8,
+    display: 'flex',
+  },
+  dataCellText: {
+    fontFamily: 'Gotham-Book',
+    fontSize: 8,
+    fontWeight: 400,
+    color: colors.primaryBlack,
+  },
+  dataCellNo: {
+    width: 24,
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+  },
+  dataCellDescription: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+  descriptionText: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 4,
+    fontFamily: 'Gotham-Book',
+    fontSize: 8,
+    fontWeight: 400,
+    color: colors.primaryBlack,
+  },
+  dataCellAmount: {
+    width: 80,
+    alignItems: 'flex-end',
+  },
+  dataCellSST: {
+    width: 80,
+    alignItems: 'flex-end',
+  },
+  dataCellRM: {
+    width: 80,
+    alignItems: 'flex-end',
+  },
+  amountText: {
+    textAlign: 'right',
+  },
+  totalRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignSelf: 'stretch',
+  },
+  totalLabel: {
+    flex: 1,
+    padding: 8,
+    display: 'flex',
+    alignItems: 'flex-end',
+  },
+  totalLabelText: {
+    fontFamily: 'Gotham-Medium',
+    fontSize: 10,
+    fontWeight: 500,
+    color: colors.primaryBlack,
+  },
+  totalValue: {
+    width: 80,
+    height: 30,
+    padding: 8,
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end',
+  },
+  totalValueText: {
+    fontFamily: 'Gotham-Medium',
+    fontSize: 10,
+    fontWeight: 500,
+    color: colors.primaryBlack,
+    textAlign: 'right',
+  },
+})
+
+export const InvoiceDetails = ({
+  items,
+  total,
+  showSST,
+  paid,
+}: InvoiceDetailsProps) => {
+  return (
+    <View style={styles.container}>
+      {/* Header Row */}
+      <View style={styles.headerRow}>
+        <View style={[styles.headerCell, styles.headerCellNo]}>
+          <Text style={styles.headerCellText}>No</Text>
+        </View>
+        <View style={[styles.headerCell, styles.headerCellDescription]}>
+          <Text style={styles.headerCellText}>Description</Text>
+        </View>
+        <View style={[styles.headerCell, styles.headerCellAmount]}>
+          <Text style={[styles.headerCellText, styles.amountText]}>Amount</Text>
+        </View>
+        {showSST && (
+          <View style={[styles.headerCell, styles.headerCellSST]}>
+            <Text style={[styles.headerCellText, styles.amountText]}>
+              Inc. SST (8%)
+            </Text>
+          </View>
+        )}
+        <View style={[styles.headerCell, styles.headerCellRM]}>
+          <Text style={[styles.headerCellText, styles.amountText]}>RM</Text>
+        </View>
+      </View>
+
+      {/* Data Rows */}
+      {items.map((item, index) => {
+        const rowNumber = index + 1
+        const taxAmount = item.taxAmount ?? 0
+        const itemTotal = item.total ?? item.amount + taxAmount
+
+        return (
+          <View key={`${item.description}-${index}`} style={styles.dataRow}>
+            <View style={[styles.dataCell, styles.dataCellNo]}>
+              <Text style={styles.dataCellText}>{rowNumber}</Text>
+            </View>
+            <View style={[styles.dataCell, styles.dataCellDescription]}>
+              <View style={styles.descriptionText}>
+                <Text style={styles.dataCellText}>{item.description}</Text>
+              </View>
+            </View>
+            <View style={[styles.dataCell, styles.dataCellAmount]}>
+              <Text style={[styles.dataCellText, styles.amountText]}>
+                {formatCurrency(item.amount)}
+              </Text>
+            </View>
+            {showSST && (
+              <View style={[styles.dataCell, styles.dataCellSST]}>
+                <Text style={[styles.dataCellText, styles.amountText]}>
+                  {taxAmount > 0 ? formatCurrency(taxAmount) : '-'}
+                </Text>
+              </View>
+            )}
+            <View style={[styles.dataCell, styles.dataCellRM]}>
+              <Text style={[styles.dataCellText, styles.amountText]}>
+                {formatCurrency(itemTotal)}
+              </Text>
+            </View>
+          </View>
+        )
+      })}
+
+      {/* Total Row */}
+      <View style={styles.totalRow}>
+        <View style={styles.totalLabel}>
+          <Text style={styles.totalLabelText}>
+            {paid ? 'TOTAL PAID AMOUNT' : 'TOTAL AMOUNT'}
+          </Text>
+        </View>
+        <View style={styles.totalValue}>
+          <Text style={styles.totalValueText}>{formatCurrency(total)}</Text>
+        </View>
+      </View>
+    </View>
+  )
+}

package/src/templates/invoice/invoice-notes.tsx

@@ -0,0 +1,74 @@
+import { StyleSheet, Text, View } from '@react-pdf/renderer'
+import { colors } from './colors'
+import { Li } from './li'
+import { Spacer } from './spacer'
+import { Ul } from './ul'
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignSelf: 'stretch',
+    gap: 4,
+  },
+  title: {
+    fontFamily: 'Gotham-Medium',
+    fontSize: 8,
+    fontWeight: 500,
+    color: colors.primaryBlack,
+  },
+  text: {
+    fontFamily: 'Gotham-Book',
+    fontSize: 8,
+    fontWeight: 400,
+    color: colors.primaryBlack,
+  },
+  disclaimer: {
+    fontStyle: 'italic',
+    fontFamily: 'Gotham-Light',
+    fontSize: 8,
+    fontWeight: 300,
+    color: colors.primaryBlack,
+  },
+  list: {
+    fontFamily: 'Gotham-Book',
+    fontSize: 8,
+    fontWeight: 400,
+    color: colors.primaryBlack,
+  },
+})
+export const InvoiceNotes = () => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Payment Processed By:</Text>
+      <Text style={styles.title}>FLUX Sdn. Bhd. (1375723-H)</Text>
+      <Text style={styles.text}>
+        15-2 Jalan Solaris, Solaris Mont Kiara, 50480 Kuala Lumpur
+      </Text>
+      <Text style={styles.disclaimer}>
+        FLUX (the “Platform”) acts as a technology provider and a limited
+        payment collection agent for the Host. Completion of payment of the
+        Total Price to FLUX satisfies your financial obligation to your Host.
+        All refund requests are processed according to the Host's cancellation
+        policy (available on the Listing) or our general Rebooking and Refund
+        Policy Terms.
+      </Text>
+
+      <Spacer height={12} />
+
+      <Text style={styles.title}>Important Notice:</Text>
+
+      <Ul style={styles.list}>
+        <Li>We supports credit/debit card and payment link upon request.</Li>
+        <Li>
+          Payments made directly to Flux's bank account through online bank
+          transfer or cheque will incur an additional 10% surcharge. For direct
+          bank in, please include the Invoice ID in your payment reference. FLUX
+          is not responsible for any delays or misallocations due to missing or
+          incorrect references. Unidentified payments will not be treated as a
+          settlement until clarified.
+        </Li>
+      </Ul>
+    </View>
+  )
+}