@7365admin1/layer-common 4.0.4-staging.241 → 4.1.0

package/composables/useWebUsb.ts

@@ -227,6 +227,7 @@ export default function useWebUsb() {
     address?: string,
     qrHeader?: string,
     qrSubText?: string,
+    layout?: "receipt" | "onboarding",
   ) => {
     if (!isWebUsbSupported.value) {
       throw new Error("Web USB is not supported in this browser");
@@ -245,7 +246,9 @@ export default function useWebUsb() {
       };
 
       let printTestResult;
-      if (forQr && urlImage) {
+      if (forQr && urlImage && layout === "onboarding") {
+        printTestResult = await printOnboardingQrCode(device, urlImage, qrHeader, qrSubText);
+      } else if (forQr && urlImage) {
         printTestResult = await printQrCode(
           device,
           urlImage,
@@ -399,6 +402,66 @@ export default function useWebUsb() {
     return canvas;
   }
 
+  /**
+   * The self-service onboarding QR: one large QR code, a "SCAN QR CODE"-style
+   * subtext, and a dark site-name banner along the bottom - a single-purpose
+   * gate sign, not the multi-copy visitor-pass receipt `createReceiptLayout`
+   * produces (that one prints several QRs to be cut apart and handed out).
+   */
+  async function createOnboardingQrLayout(
+    qrUrlImage: string,
+    header?: string,
+    subText?: string,
+  ): Promise<HTMLCanvasElement> {
+    const canvas = document.createElement("canvas");
+    canvas.width = 576;
+    canvas.height = 760;
+    const ctx = canvas.getContext("2d")!;
+    ctx.fillStyle = "#fff";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.textAlign = "center";
+
+    const qrSize = 400;
+    const qrCanvas = await QRCode.toCanvas(qrUrlImage, { width: qrSize, margin: 1 });
+    ctx.drawImage(qrCanvas, (canvas.width - qrSize) / 2, 40, qrSize, qrSize);
+
+    ctx.fillStyle = "#000";
+    ctx.font = "bold 26px Arial";
+    ctx.fillText((subText || "SCAN QR CODE").toUpperCase(), canvas.width / 2, 480);
+
+    const bannerHeight = 110;
+    const bannerY = canvas.height - bannerHeight;
+    ctx.fillStyle = "#000";
+    ctx.fillRect(0, bannerY, canvas.width, bannerHeight);
+    ctx.fillStyle = "#fff";
+    ctx.font = "bold 34px Arial";
+    ctx.fillText((header || "").toUpperCase(), canvas.width / 2, bannerY + bannerHeight / 2 + 12);
+
+    return canvas;
+  }
+
+  const printOnboardingQrCode = async (
+    device: USBDevice,
+    urlImage: string,
+    header?: string,
+    subText?: string,
+  ) => {
+    try {
+      const { endpointNumber } = getPrinterConnection(device);
+      const canvas = await createOnboardingQrLayout(urlImage, header, subText);
+      const rasterData = canvasToRaster(canvas);
+      await device.transferOut(endpointNumber, rasterData.buffer);
+
+      const CUT = new Uint8Array([0x1d, 0x56, 0x41, 0x10]);
+      await device.transferOut(endpointNumber, CUT.buffer);
+
+      return { success: true, message: "Onboarding QR print sent successfully" };
+    } catch (error: unknown) {
+      console.error("[WebUSB] printOnboardingQrCode error:", error);
+      return { success: false, error: getErrorMessage(error, "Unable to print onboarding QR code") };
+    }
+  };
+
   function canvasToRaster(canvas: HTMLCanvasElement): Uint8Array {
     const ctx = canvas.getContext("2d");
     if (!ctx) throw new Error("Canvas 2D context not available");

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.4-staging.241",
+  "version": "4.1.0",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",