Refactor Pdf417Barcode to accept payment params as props

Changes Pdf417Barcode component from using hardcoded payment data to
accepting paymentParams as a prop, making it reusable. Updates useEffect
dependency array to regenerate barcode when payment params change.

Also updates hub-3a-payment-encoder to v1.1.0 for PaymentParams type support.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-11-22 14:47:25 +01:00
parent 38a1e9d1b8
commit 701b9b5d58
3 changed files with 10 additions and 27 deletions

View File

@@ -1,37 +1,20 @@
'use client'; 'use client';
import { useState, useEffect } from 'react'; import { useState, useEffect, FC } from 'react';
import { generateBarcode } from '../lib/pdf/pdf417'; import { generateBarcode } from '../lib/pdf/pdf417';
import { renderBarcode } from '../lib/pdf/renderBarcode'; import { renderBarcode } from '../lib/pdf/renderBarcode';
import { EncodePayment } from 'hub-3a-payment-encoder'; import { EncodePayment, PaymentParams } from 'hub-3a-payment-encoder';
export const Pdf417Barcode = () => { export const Pdf417Barcode:FC<{paymentParams:PaymentParams}> = ({paymentParams}) => {
const [bitmapData, setBitmapData] = useState<string | undefined>(undefined); const [bitmapData, setBitmapData] = useState<string | undefined>(undefined);
useEffect(() => { useEffect(() => {
const paymentParams = {
Iznos:"123,66", // NOTE: use comma, not period!
ImePlatitelja:"Ivan Horvat",
AdresaPlatitelja:"Ilica 23",
SjedistePlatitelja:"10000 Zagreb",
Primatelj:"VODOOPSKRBA I ODV. D.O.O.",
AdresaPrimatelja:"FOLNEGOVIĆEVA 1",
SjedistePrimatelja:"ZAGREB",
IBAN:"HR8924020061100679445",
ModelPlacanja: "HR00", // MUST contain "HR" prefix!
PozivNaBroj:"2025-05",
SifraNamjene:"",
OpisPlacanja:"Budakova Režije",
};
const hub3a_text = EncodePayment(paymentParams); const hub3a_text = EncodePayment(paymentParams);
const barcodeMatrix = generateBarcode(hub3a_text); const barcodeMatrix = generateBarcode(hub3a_text);
const bitmap = renderBarcode(barcodeMatrix, 2, 2); const bitmap = renderBarcode(barcodeMatrix, 2, 2);
setBitmapData(bitmap); setBitmapData(bitmap);
}, []); }, [paymentParams]);
// Don't render until bitmap is generated (prevents hydration mismatch) // Don't render until bitmap is generated (prevents hydration mismatch)
if (!bitmapData) { if (!bitmapData) {

8
package-lock.json generated
View File

@@ -21,7 +21,7 @@
"bcrypt": "^5.1.1", "bcrypt": "^5.1.1",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"daisyui": "^4.5.0", "daisyui": "^4.5.0",
"hub-3a-payment-encoder": "^1.0.0", "hub-3a-payment-encoder": "^1.1.0",
"iban": "^0.0.14", "iban": "^0.0.14",
"is-ua-webview": "^1.1.2", "is-ua-webview": "^1.1.2",
"mongodb": "^6.3.0", "mongodb": "^6.3.0",
@@ -5023,9 +5023,9 @@
} }
}, },
"node_modules/hub-3a-payment-encoder": { "node_modules/hub-3a-payment-encoder": {
"version": "1.0.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/hub-3a-payment-encoder/-/hub-3a-payment-encoder-1.0.0.tgz", "resolved": "https://registry.npmjs.org/hub-3a-payment-encoder/-/hub-3a-payment-encoder-1.1.0.tgz",
"integrity": "sha512-QohkyGnqIktnf6LlkeeXuYb6kAtZN2d7UQqjEDh+xZIvOfMiqA41/1ncWSHJ5Ieg67v9ZfvEVv9/SO2UTjTY+g==", "integrity": "sha512-th2Q0nbniczyqnK7/tfAqRnsw6Jq0j2K4G1XF12l0C3Xo3rgiax8j/ZbEx5XJILKMrXeXCIfbuEOvmLFO/h43w==",
"license": "LGPL-3.0-or-later", "license": "LGPL-3.0-or-later",
"dependencies": { "dependencies": {
"ibantools": "^4.1.3" "ibantools": "^4.1.3"

View File

@@ -23,7 +23,7 @@
"bcrypt": "^5.1.1", "bcrypt": "^5.1.1",
"clsx": "^2.0.0", "clsx": "^2.0.0",
"daisyui": "^4.5.0", "daisyui": "^4.5.0",
"hub-3a-payment-encoder": "^1.0.0", "hub-3a-payment-encoder": "^1.1.0",
"iban": "^0.0.14", "iban": "^0.0.14",
"is-ua-webview": "^1.1.2", "is-ua-webview": "^1.1.2",
"mongodb": "^6.3.0", "mongodb": "^6.3.0",