From 701b9b5d58ea4e7460d285c849a223480fefdb00 Mon Sep 17 00:00:00 2001 From: Knee Cola Date: Sat, 22 Nov 2025 14:47:25 +0100 Subject: [PATCH] Refactor Pdf417Barcode to accept payment params as props MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/ui/Pdf417Barcode.tsx | 27 +++++---------------------- package-lock.json | 8 ++++---- package.json | 2 +- 3 files changed, 10 insertions(+), 27 deletions(-) diff --git a/app/ui/Pdf417Barcode.tsx b/app/ui/Pdf417Barcode.tsx index cb087f0..8743f0c 100644 --- a/app/ui/Pdf417Barcode.tsx +++ b/app/ui/Pdf417Barcode.tsx @@ -1,37 +1,20 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, FC } from 'react'; import { generateBarcode } from '../lib/pdf/pdf417'; import { renderBarcode } from '../lib/pdf/renderBarcode'; -import { EncodePayment } from 'hub-3a-payment-encoder'; - -export const Pdf417Barcode = () => { +import { EncodePayment, PaymentParams } from 'hub-3a-payment-encoder'; + +export const Pdf417Barcode:FC<{paymentParams:PaymentParams}> = ({paymentParams}) => { const [bitmapData, setBitmapData] = useState(undefined); 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 barcodeMatrix = generateBarcode(hub3a_text); const bitmap = renderBarcode(barcodeMatrix, 2, 2); setBitmapData(bitmap); - }, []); + }, [paymentParams]); // Don't render until bitmap is generated (prevents hydration mismatch) if (!bitmapData) { diff --git a/package-lock.json b/package-lock.json index 716cd5c..c84b799 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "bcrypt": "^5.1.1", "clsx": "^2.0.0", "daisyui": "^4.5.0", - "hub-3a-payment-encoder": "^1.0.0", + "hub-3a-payment-encoder": "^1.1.0", "iban": "^0.0.14", "is-ua-webview": "^1.1.2", "mongodb": "^6.3.0", @@ -5023,9 +5023,9 @@ } }, "node_modules/hub-3a-payment-encoder": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/hub-3a-payment-encoder/-/hub-3a-payment-encoder-1.0.0.tgz", - "integrity": "sha512-QohkyGnqIktnf6LlkeeXuYb6kAtZN2d7UQqjEDh+xZIvOfMiqA41/1ncWSHJ5Ieg67v9ZfvEVv9/SO2UTjTY+g==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/hub-3a-payment-encoder/-/hub-3a-payment-encoder-1.1.0.tgz", + "integrity": "sha512-th2Q0nbniczyqnK7/tfAqRnsw6Jq0j2K4G1XF12l0C3Xo3rgiax8j/ZbEx5XJILKMrXeXCIfbuEOvmLFO/h43w==", "license": "LGPL-3.0-or-later", "dependencies": { "ibantools": "^4.1.3" diff --git a/package.json b/package.json index 2ae382b..3acc393 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "bcrypt": "^5.1.1", "clsx": "^2.0.0", "daisyui": "^4.5.0", - "hub-3a-payment-encoder": "^1.0.0", + "hub-3a-payment-encoder": "^1.1.0", "iban": "^0.0.14", "is-ua-webview": "^1.1.2", "mongodb": "^6.3.0",