feat(barcode): adding log level details

Author: gjulivan

packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.editorConfig.ts

@@ -94,6 +94,15 @@ export function getProperties(values: BarcodeGeneratorPreviewProps, defaultPrope
         hidePropertiesIn(defaultProperties, values, ["customCodeFormat"]);
     }
 
+    if (!values.allowDownload) {
+        hidePropertiesIn(defaultProperties, values, [
+            "downloadButtonCaption",
+            "downloadButtonAriaLabel",
+            "downloadFileName",
+            "buttonPosition"
+        ]);
+    }
+
     return defaultProperties;
 }
 

packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.tsx

@@ -11,7 +11,7 @@ export default function BarcodeGenerator(props: BarcodeGeneratorContainerProps):
     const config = barcodeConfig(props);
 
     if (!config.codeValue) {
-        return <span>No barcode value provided</span>;
+        return <span>{props.emptyMessage?.value || "No barcode value provided"}</span>;
     }
 
     return (

packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.xml

@@ -22,6 +22,14 @@
                         <enumerationValue key="Custom">Custom</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="emptyMessage" type="textTemplate" required="false">
+                    <caption>Empty message</caption>
+                    <description />
+                    <translations>
+                        <translation lang="en_US">No barcode value provided</translation>
+                        <translation lang="nl_NL">Geen barcodewaarde opgegeven</translation>
+                    </translations>
+                </property>
                 <property key="allowDownload" type="boolean" defaultValue="false">
                     <caption>Allow download</caption>
                     <description>Adds a download button</description>
@@ -111,6 +119,17 @@
                     <description>Space between main barcode and addon (in pixels)</description>
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Development">
+                <property key="logLevel" type="enumeration" required="true" defaultValue="None">
+                    <caption>Log Level</caption>
+                    <description>Choose the log level for in the case of failure for generating the barcode. Info will display generic error message on the UI and Debug will gives detailed information on the developer console.</description>
+                    <enumerationValues>
+                        <enumerationValue key="None">None</enumerationValue>
+                        <enumerationValue key="Info">Info</enumerationValue>
+                        <enumerationValue key="Debug">Debug</enumerationValue>
+                    </enumerationValues>
+                </property>
+            </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Display">
             <property key="displayValue" type="boolean" defaultValue="false">

packages/pluggableWidgets/barcode-generator-web/src/components/Barcode.tsx

@@ -17,10 +17,12 @@ export function BarcodeRenderer({ config }: BarcodeRendererProps): ReactElement
     if (error) {
         return (
             <div className="barcode-renderer">
-                <div className="alert alert-danger" role="alert">
-                    <strong>Unable to generate barcode.</strong> Please check the barcode value and format
-                    configuration.
-                </div>
+                {config.logLevel !== "None" && (
+                    <div className="alert alert-danger" role="alert">
+                        <strong>Unable to generate barcode.</strong> Please check the barcode value and format
+                        configuration.
+                    </div>
+                )}
             </div>
         );
     }

packages/pluggableWidgets/barcode-generator-web/src/config/Barcode.config.ts

@@ -7,16 +7,21 @@ interface DownloadButtonConfig {
     buttonPosition: "top" | "bottom";
 }
 
-/** Configuration for barcode (non-QR) rendering */
-export interface BarcodeTypeConfig {
-    type: "barcode";
+type codeType = "barcode" | "qrcode";
+
+export interface CodeBaseTypeConfig<T = codeType> extends Pick<BarcodeGeneratorContainerProps, "logLevel"> {
+    type: T;
     codeValue: string;
+    margin: number;
+    downloadButton?: DownloadButtonConfig;
+}
+
+/** Configuration for barcode (non-QR) rendering */
+export interface BarcodeTypeConfig extends CodeBaseTypeConfig<"barcode"> {
     width: number;
     height: number;
     format: string;
-    margin: number;
     displayValue: boolean;
-    downloadButton?: DownloadButtonConfig;
 
     // Advanced barcode options
     enableEan128: boolean;
@@ -29,14 +34,10 @@ export interface BarcodeTypeConfig {
 }
 
 /** Configuration for QR code rendering */
-export interface QRCodeTypeConfig {
-    type: "qrcode";
-    codeValue: string;
+export interface QRCodeTypeConfig extends CodeBaseTypeConfig<"qrcode"> {
     size: number;
-    margin: number;
     title: string;
     level: QrLevelEnum;
-    downloadButton?: DownloadButtonConfig;
     image?: {
         src: string;
         x: number | undefined;
@@ -63,15 +64,21 @@ export function barcodeConfig(props: BarcodeGeneratorContainerProps): BarcodeCon
           }
         : undefined;
 
+    const baseConfig: CodeBaseTypeConfig = {
+        type: format === "QRCode" ? "qrcode" : "barcode",
+        codeValue,
+        margin: props.codeMargin ?? 2,
+        logLevel: props.logLevel,
+        downloadButton: downloadButtonConfig
+    };
+
     if (format === "QRCode") {
         return {
+            ...baseConfig,
             type: "qrcode",
-            codeValue,
             size: props.qrSize ?? 128,
-            margin: props.qrMargin ?? 2,
             title: props.qrTitle ?? "",
             level: props.qrLevel ?? "L",
-            downloadButton: downloadButtonConfig,
             image:
                 props.qrOverlaySrc?.status === "available"
                     ? {
@@ -88,14 +95,12 @@ export function barcodeConfig(props: BarcodeGeneratorContainerProps): BarcodeCon
     }
 
     return {
+        ...baseConfig,
         type: "barcode",
-        codeValue,
         width: props.codeWidth ?? 128,
         height: props.codeHeight ?? 128,
         format,
-        margin: props.codeMargin ?? 2,
         displayValue: props.displayValue ?? false,
-        downloadButton: downloadButtonConfig,
 
         // Advanced barcode options
         enableEan128: props.enableEan128 ?? false,

packages/pluggableWidgets/barcode-generator-web/src/hooks/useRenderBarcode.ts

@@ -2,6 +2,13 @@ import { BarcodeTypeConfig } from "../config/Barcode.config";
 import { RefObject, useEffect, useRef, useState } from "react";
 import { type BarcodeRenderOptions, renderBarcode } from "../utils/barcodeRenderer-utils";
 import { validateAddonValue, validateBarcodeValue } from "../config/validation";
+import { LogLevelEnum } from "../../typings/BarcodeGeneratorProps";
+
+function printError(message: string, logLevel: LogLevelEnum) {
+    if (logLevel === "Debug") {
+        console.error(`[Barcode Generator] ${message}`);
+    }
+}
 
 export const useRenderBarcode = (
     config: BarcodeTypeConfig
@@ -35,10 +42,10 @@ export const useRenderBarcode = (
             if (!validationResult.valid) {
                 const errorMsg = validationResult.message || "Invalid barcode value";
                 // Log detailed error for developers
-                console.error(
-                    `[Barcode Generator] Validation failed for format "${format}":`,
-                    errorMsg,
-                    `\nProvided value: "${value}"`
+
+                printError(
+                    `Validation failed for format "${format}": ${errorMsg} \nProvided value: "${value}"`,
+                    config.logLevel
                 );
                 setError(true);
                 return;
@@ -50,10 +57,9 @@ export const useRenderBarcode = (
                 if (!addonResult.valid) {
                     const errorMsg = addonResult.message || "Invalid addon value";
                     // Log detailed error for developers
-                    console.error(
-                        `[Barcode Generator] Addon validation failed for format "${addonFormat}":`,
-                        errorMsg,
-                        `\nProvided addon value: "${addonValue}"`
+                    printError(
+                        `Addon validation failed for format "${addonFormat}": ${errorMsg} \nProvided addon value: "${addonValue}"`,
+                        config.logLevel
                     );
                     setError(true);
                     return;
@@ -82,13 +88,7 @@ export const useRenderBarcode = (
             } catch (error) {
                 const errorMsg = error instanceof Error ? error.message : "Error generating barcode";
                 // Log detailed error for developers
-                console.error(
-                    `[Barcode Generator] Rendering failed:`,
-                    errorMsg,
-                    `\nFormat: "${format}"`,
-                    `\nValue: "${value}"`,
-                    error
-                );
+                printError(`Rendering failed: ${errorMsg} \nFormat: "${format}" \nValue: "${value}"`, config.logLevel);
                 setError(true);
             }
         } else if (!value) {

packages/pluggableWidgets/barcode-generator-web/typings/BarcodeGeneratorProps.d.ts

@@ -15,6 +15,8 @@ export type CustomCodeFormatEnum = "CODE128" | "EAN13" | "EAN8" | "UPC" | "CODE3
 
 export type AddonFormatEnum = "None" | "EAN5" | "EAN2";
 
+export type LogLevelEnum = "None" | "Info" | "Debug";
+
 export type QrLevelEnum = "L" | "M" | "Q" | "H";
 
 export interface BarcodeGeneratorContainerProps {
@@ -24,6 +26,7 @@ export interface BarcodeGeneratorContainerProps {
     tabIndex?: number;
     codeValue: DynamicValue<string>;
     codeFormat: CodeFormatEnum;
+    emptyMessage?: DynamicValue<string>;
     allowDownload: boolean;
     downloadButtonCaption?: DynamicValue<string>;
     downloadButtonAriaLabel?: DynamicValue<string>;
@@ -37,6 +40,7 @@ export interface BarcodeGeneratorContainerProps {
     addonFormat: AddonFormatEnum;
     addonValue: DynamicValue<string>;
     addonSpacing: number;
+    logLevel: LogLevelEnum;
     displayValue: boolean;
     showAsCard: boolean;
     codeWidth: number;
@@ -70,6 +74,7 @@ export interface BarcodeGeneratorPreviewProps {
     translate: (text: string) => string;
     codeValue: string;
     codeFormat: CodeFormatEnum;
+    emptyMessage: string;
     allowDownload: boolean;
     downloadButtonCaption: string;
     downloadButtonAriaLabel: string;
@@ -83,6 +88,7 @@ export interface BarcodeGeneratorPreviewProps {
     addonFormat: AddonFormatEnum;
     addonValue: string;
     addonSpacing: number | null;
+    logLevel: LogLevelEnum;
     displayValue: boolean;
     showAsCard: boolean;
     codeWidth: number | null;