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:
@@ -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
8
package-lock.json
generated
@@ -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"
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user