feat(InvoiceCard): add sticky bottom action bar on scroll - #817

TypeError: Cannot read properties of undefined (reading 'toFixed') ❯ Module.formatPrice src/utils/format.ts:33:16 ❯ ApiCard src/components/ApiCard.tsx:907:19 ❯ renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:15486:18 ❯ mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20103:13 ❯ beginWork node_modules/react-dom/cjs/react-dom.development.js:21626:16 ❯ beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27465:14 ❯ performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26599:12 ❯ workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26505:5 ❯ renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26473:7 ❯ recoverFromConcurrentError node_modules/react-dom/cjs/react-dom.development.js:25889:20

AssertionError: expected +0 to be 5 // Object.is equality - Expected + Received - 5 + 0 ❯ src/ApiUsage.test.tsx:92:31

TestingLibraryElementError: Unable to find an accessible element with the role "navigation" and name `/breadcrumb/i` There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole Ignored nodes: comments, script, style <body> <div> <div aria-busy="true" aria-label="API usage loading shell" class="api-usage-page" > <div aria-hidden="true" style="display: flex; gap: 8px; margin-bottom: 24px;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 80px; height: 16px;" /> <span style="color: var(--text-secondary);" > / </span> <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 160px; height: 16px;" /> </div> <div aria-hidden="true" class="api-header" style="margin-bottom: 24px;" > <div class="api-header-info" style="display: flex; gap: 16px; align-items: center;" > <div class="api-logo" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 56px; height: 56px; border-radius: 12px;" /> </div> <div style="display: grid; gap: 8px; flex: 1 1 0%;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 40%; height: 28px;" /> <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 60%; height: 16px;" /> </div> </div> <div class="api-header-actions" style="display: flex; gap: 12px;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 150px; height: 36px; border-radius: 8px;" /> <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 90px; height: 36px; border-radius: 8px;" /> <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 110px; height: 36px; border-radius: 8px;" /> </div> </div> <div aria-hidden="true" class="surface api-key-section" style="margin-bottom: 24px;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 100px; height: 20px; margin-bottom: 16px;" /> <div class="api-key-card" style="padding: 20px;" > <div class="api-key-display" style="display: flex; gap: 12px; align-items: center;" > <div class="key-input-group" style="flex: 1 1 0%;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 100%; height: 38px; border-radius: 8px;" /> </div> <div class="key-actions" style="display: flex; gap: 12px;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 80px; height: 38px; border-radius: 8px;"

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/Reset Filters/i` There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole Ignored nodes: comments, script, style <body> <div> <div aria-busy="true" aria-label="API usage loading shell" class="api-usage-page" > <div aria-hidden="true" style="display: flex; gap: 8px; margin-bottom: 24px;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 80px; height: 16px;" /> <span style="color: var(--text-secondary);" > / </span> <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 160px; height: 16px;" /> </div> <div aria-hidden="true" class="api-header" style="margin-bottom: 24px;" > <div class="api-header-info" style="display: flex; gap: 16px; align-items: center;" > <div class="api-logo" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 56px; height: 56px; border-radius: 12px;" /> </div> <div style="display: grid; gap: 8px; flex: 1 1 0%;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 40%; height: 28px;" /> <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 60%; height: 16px;" /> </div> </div> <div class="api-header-actions" style="display: flex; gap: 12px;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 150px; height: 36px; border-radius: 8px;" /> <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 90px; height: 36px; border-radius: 8px;" /> <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 110px; height: 36px; border-radius: 8px;" /> </div> </div> <div aria-hidden="true" class="surface api-key-section" style="margin-bottom: 24px;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 100px; height: 20px; margin-bottom: 16px;" /> <div class="api-key-card" style="padding: 20px;" > <div class="api-key-display" style="display: flex; gap: 12px; align-items: center;" > <div class="key-input-group" style="flex: 1 1 0%;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 100%; height: 38px; border-radius: 8px;" /> </div> <div class="key-actions" style="display: flex; gap: 12px;" > <div aria-hidden="true" class="skeleton skeleton--stellar" role="presentation" style="width: 80px; height: 38px; border-radius: 8px;"

TypeError: handleCopy is not a function ❯ onClick src/components/EmptyState.tsx:837:28 ❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14 ❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30 ❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25 ❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3 ❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9 ❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17 ❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34 ❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16 ❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31 This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running. The latest test that might've caused the error is "copies the default message when no custom message is provided". It might mean one of the following: - The error was thrown, while Vitest was running this test. - If the error occurred after the test had been completed, this was the last documented test before it was thrown.

TypeError: handleCopy is not a function ❯ onClick src/components/EmptyState.tsx:837:28 ❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14 ❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30 ❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25 ❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3 ❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9 ❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17 ❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34 ❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16 ❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31 This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running. The latest test that might've caused the error is "copies the resolved message (message prop takes precedence over description)". It might mean one of the following: - The error was thrown, while Vitest was running this test. - If the error occurred after the test had been completed, this was the last documented test before it was thrown.

TypeError: handleCopy is not a function ❯ onClick src/components/EmptyState.tsx:837:28 ❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14 ❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30 ❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25 ❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3 ❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9 ❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17 ❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34 ❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16 ❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31 This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running. The latest test that might've caused the error is "reverts 'Copied' feedback after 2 seconds". It might mean one of the following: - The error was thrown, while Vitest was running this test. - If the error occurred after the test had been completed, this was the last documented test before it was thrown.

TypeError: handleCopy is not a function ❯ onClick src/components/EmptyState.tsx:837:28 ❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14 ❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30 ❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25 ❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3 ❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9 ❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17 ❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34 ❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16 ❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31 This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running. The latest test that might've caused the error is "announces copy success via aria-live region". It might mean one of the following: - The error was thrown, while Vitest was running this test. - If the error occurred after the test had been completed, this was the last documented test before it was thrown.

TypeError: handleCopy is not a function ❯ onClick src/components/EmptyState.tsx:837:28 ❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14 ❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30 ❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25 ❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3 ❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9 ❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17 ❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34 ❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16 ❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31 This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running. The latest test that might've caused the error is "shows 'Copied' feedback after clicking". It might mean one of the following: - The error was thrown, while Vitest was running this test. - If the error occurred after the test had been completed, this was the last documented test before it was thrown.

TypeError: handleCopy is not a function ❯ onClick src/components/EmptyState.tsx:837:28 ❯ HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:14 ❯ HTMLUnknownElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30 ❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25 ❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3 ❯ HTMLUnknownElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9 ❯ HTMLUnknownElementImpl.dispatchEvent node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17 ❯ HTMLUnknownElement.dispatchEvent node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34 ❯ Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:16 ❯ invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:31 This error originated in "src/components/EmptyState.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running. The latest test that might've caused the error is "copies the message text to clipboard on click". It might mean one of the following: - The error was thrown, while Vitest was running this test. - If the error occurred after the test had been completed, this was the last documented test before it was thrown.

Node.js 20 is deprecated. The following actions target Node.js 20 but are being forced to run on Node.js 24: actions/checkout@v4, actions/setup-node@v4, actions/upload-artifact@v4. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/