shad0w/pelagia-portal
1
0
Fork 0
Code Issues 6 Pull requests 1 Projects Releases 2 Packages Wiki Activity Actions

[Issue]: Make GST captcha a popup #114

New issue
Closed
opened 2026-06-24 00:56:43 +00:00 by shad0w · 3 comments
shad0w commented 2026-06-24 00:56:43 +00:00
Owner
Copy link

Raised by

Kaushal Pal Singh (kps@pelagiamarine.com, MANAGER) — via portal Report Issue button

Description

The form gets too big when the captcha section is visible, buttons get hidden. Make it a popup. Remember to have a cancel/close button.

Priority

P2 — Medium

Context

  • Page: /catalogue/vendors
  • Reported at: 2026-06-24T00:56:43.037Z
### Raised by Kaushal Pal Singh (kps@pelagiamarine.com, MANAGER) — via portal Report Issue button ### Description The form gets too big when the captcha section is visible, buttons get hidden. Make it a popup. Remember to have a cancel/close button. ### Priority P2 — Medium ### Context - Page: `/catalogue/vendors` - Reported at: 2026-06-24T00:56:43.037Z
shad0w added the
portal
 label 2026-06-24 00:56:43 +00:00
shad0w added the
bug
claude-queue
triaged
 labels 2026-06-24 01:01:30 +00:00
shad0w commented 2026-06-24 01:01:30 +00:00
Author
Owner
Copy link

Claude triage

Triage — Issue #114: Make GST captcha a popup

Summary

On /catalogue/vendors, the Add Vendor dialog contains a GSTIN lookup. When the user
clicks Look up, a CAPTCHA block (image + 6-digit input + Verify / New image buttons)
renders inline inside the same modal. This grows the modal vertically; because the
modal (AdminDialog) has no internal scroll and is vertically centred, the form's footer
buttons (Cancel / Create Vendor) get pushed off-screen and become unreachable. The
reporter asks to move the CAPTCHA into its own popup with a cancel/close button.

This is a usability defect (footer actions become inaccessible), so it is classified as a
bug; the requested remedy is a small presentation change.

Affected code

  • App/app/(portal)/admin/vendors/vendor-form.tsx — the single file to change.
    • VendorFormFields (lines ~116–251) holds all CAPTCHA state (captchaStep,
      captchaB64, captchaAnswer, sessionId, gstError, gstSuccess) and the
      fetchCaptcha() / submitSearch() handlers.
    • The inline CAPTCHA block is the captchaStep === "ready" JSX at lines ~186–208 — this
      is what needs to move into a popup.
    • This component is shared by AddVendorButton and EditVendorButton, both rendered
      inside AdminDialog. The catalogue page imports AddVendorButton
      (App/app/(portal)/catalogue/vendors/page.tsx:7,78); admin uses both
      (admin/vendors/vendors-table.tsx, admin/vendors/[id]/page.tsx).
  • App/components/ui/admin-dialog.tsx — existing modal primitive (fixed overlay,
    z-50, Escape-to-close, click-outside-to-close, ✕ button). Reusable for the CAPTCHA
    popup, but note z-index stacking (see open questions).
  • Unchanged: App/app/api/gst/captcha/route.ts and App/app/api/gst/route.ts. The GST
    microservice integration (fetch CAPTCHA, POST gstin+captcha+sessionId) is not touched
    — only where the CAPTCHA UI is rendered changes.

Action items

  1. Extract the captchaStep === "ready" CAPTCHA block out of the inline form flow and
    render it as a popup/dialog overlaid on the vendor form when a lookup is in progress.
  2. Give the popup an explicit Cancel/Close control (and keep Escape / click-outside if
    reusing AdminDialog) that closes it without altering the form fields, resetting
    captchaStep back to "idle".
  3. Preserve existing behaviour: image display, 6-digit numeric input, Verify (calls
    submitSearch), New image (calls fetchCaptcha), Enter-to-submit, and the
    loading/verifying states. On success the popup closes and Name/Address/Pincode populate
    plus the success line shows; on error the error message shows.
  4. Decide presentation of the inline success/error lines (gstSuccess / gstError) — keep
    the success line on the main form after the popup closes; show in-flight errors inside
    the popup so the user sees them in context.
  5. Ensure the main vendor form's footer (Cancel / Create Vendor / Save) is never displaced,
    resolving the original complaint.

Open questions

  • Nested modal stacking: the vendor form is already an AdminDialog at z-50. A CAPTCHA
    popup reusing AdminDialog would sit at the same z-index — acceptable since it renders
    after and covers it, but a slightly higher z-index (or a dedicated lightweight overlay)
    would be safer. Default: reuse AdminDialog with a CAPTCHA title.
  • Click-outside / Escape on the CAPTCHA popup: should dismissing it abort the lookup
    (back to idle)? Assumed yes — treat as Cancel.
  • No existing unit test covers vendor-form.tsx CAPTCHA flow (tests/unit/vendors-table.test.tsx
    exists for the table). A new render test mocking fetch could assert the popup appears on
    Look up and closes on Cancel — nice-to-have, not required for acceptance.

Verification

  • pnpm type-check and pnpm lint.
  • Manual/visual: footer buttons stay visible while the CAPTCHA popup is open; Cancel closes
    it cleanly. Optionally an added Vitest/jsdom render test.

Routing rationale: Localized single-file UI relocation with clear acceptance, no DB/auth/payments and no change to the GST integration itself — safely automatable and verifiable by type-check/lint → claude-queue.

Routing: claude-queue | Type: bug

## Claude triage # Triage — Issue #114: Make GST captcha a popup ## Summary On `/catalogue/vendors`, the **Add Vendor** dialog contains a GSTIN lookup. When the user clicks **Look up**, a CAPTCHA block (image + 6-digit input + Verify / New image buttons) renders **inline** inside the same modal. This grows the modal vertically; because the modal (`AdminDialog`) has no internal scroll and is vertically centred, the form's footer buttons (**Cancel / Create Vendor**) get pushed off-screen and become unreachable. The reporter asks to move the CAPTCHA into its own popup with a cancel/close button. This is a usability defect (footer actions become inaccessible), so it is classified as a **bug**; the requested remedy is a small presentation change. ## Affected code - **`App/app/(portal)/admin/vendors/vendor-form.tsx`** — the single file to change. - `VendorFormFields` (lines ~116–251) holds all CAPTCHA state (`captchaStep`, `captchaB64`, `captchaAnswer`, `sessionId`, `gstError`, `gstSuccess`) and the `fetchCaptcha()` / `submitSearch()` handlers. - The inline CAPTCHA block is the `captchaStep === "ready"` JSX at lines ~186–208 — this is what needs to move into a popup. - This component is shared by `AddVendorButton` and `EditVendorButton`, both rendered inside `AdminDialog`. The catalogue page imports `AddVendorButton` (`App/app/(portal)/catalogue/vendors/page.tsx:7,78`); admin uses both (`admin/vendors/vendors-table.tsx`, `admin/vendors/[id]/page.tsx`). - **`App/components/ui/admin-dialog.tsx`** — existing modal primitive (fixed overlay, `z-50`, Escape-to-close, click-outside-to-close, ✕ button). Reusable for the CAPTCHA popup, but note z-index stacking (see open questions). - **Unchanged:** `App/app/api/gst/captcha/route.ts` and `App/app/api/gst/route.ts`. The GST microservice integration (fetch CAPTCHA, POST gstin+captcha+sessionId) is **not** touched — only where the CAPTCHA UI is rendered changes. ## Action items 1. Extract the `captchaStep === "ready"` CAPTCHA block out of the inline form flow and render it as a popup/dialog overlaid on the vendor form when a lookup is in progress. 2. Give the popup an explicit **Cancel/Close** control (and keep Escape / click-outside if reusing `AdminDialog`) that closes it without altering the form fields, resetting `captchaStep` back to `"idle"`. 3. Preserve existing behaviour: image display, 6-digit numeric input, **Verify** (calls `submitSearch`), **New image** (calls `fetchCaptcha`), Enter-to-submit, and the loading/verifying states. On success the popup closes and Name/Address/Pincode populate plus the success line shows; on error the error message shows. 4. Decide presentation of the inline success/error lines (`gstSuccess` / `gstError`) — keep the success line on the main form after the popup closes; show in-flight errors inside the popup so the user sees them in context. 5. Ensure the main vendor form's footer (Cancel / Create Vendor / Save) is never displaced, resolving the original complaint. ## Open questions - **Nested modal stacking:** the vendor form is already an `AdminDialog` at `z-50`. A CAPTCHA popup reusing `AdminDialog` would sit at the same z-index — acceptable since it renders after and covers it, but a slightly higher z-index (or a dedicated lightweight overlay) would be safer. Default: reuse `AdminDialog` with a CAPTCHA title. - **Click-outside / Escape on the CAPTCHA popup:** should dismissing it abort the lookup (back to idle)? Assumed yes — treat as Cancel. - No existing unit test covers `vendor-form.tsx` CAPTCHA flow (`tests/unit/vendors-table.test.tsx` exists for the table). A new render test mocking `fetch` could assert the popup appears on Look up and closes on Cancel — nice-to-have, not required for acceptance. ## Verification - `pnpm type-check` and `pnpm lint`. - Manual/visual: footer buttons stay visible while the CAPTCHA popup is open; Cancel closes it cleanly. Optionally an added Vitest/jsdom render test. Routing rationale: Localized single-file UI relocation with clear acceptance, no DB/auth/payments and no change to the GST integration itself — safely automatable and verifiable by type-check/lint → claude-queue. **Routing:** `claude-queue` | **Type:** `bug`
shad0w added
claude-working
 and removed
claude-queue
 labels 2026-06-24 01:01:30 +00:00
shad0w commented 2026-06-24 01:01:30 +00:00
Author
Owner
Copy link

[Claude] Started working on this issue on branch claude/issue-114.

<!-- ppms-bot --> [Claude] Started working on this issue on branch `claude/issue-114`.
shad0w added
claude-pr
 and removed
claude-working
 labels 2026-06-24 01:07:43 +00:00
shad0w commented 2026-06-24 01:07:43 +00:00
Author
Owner
Copy link

[Claude] Opened PR #115 with a proposed fix. Review and merge it, then create a release tag to deploy.

<!-- ppms-bot --> [Claude] Opened PR [#115](https://git.pelagiamarine.com/shad0w/pelagia-portal/pulls/115) with a proposed fix. Review and merge it, then create a release tag to deploy.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
master
feat/reports
feat/terms-conditions-admin
feat/crewing-review-hardening
feat/crewing-followups
feat/crewing-appraisal
feat/crewing-verification
feat/crewing-signoff
feat/crewing-admin
feat/crewing-crew-records
feat/crewing-onboarding
feat/crewing-candidates
feat/crewing-requisitions
feat/crewing-foundations
fix/xlsx-export-asset-sizing
feat/po-cancel-supersede
feat/company-header-logo-branding
hotfix/button-portal-label
v0.3.2
v0.3.1
0.3.1
v0.3.0
v0.2.7
v0.2.6
v0.2.5
v0.2.4
v0.2.3
0.2.2
0.2.1
0.2.0
v0.1.2
0.1.1
0.1
Labels
Clear labels   
bug

Something is broken

  
claude-failed

Automated fix attempt failed

  
claude-pr

Claude opened a PR for this

  
claude-queue

Queued for automated Claude fix

  
claude-working

Claude is working on this

  
epic

Crewing epic � tracking issue (A�M)

  
feature

New functionality

  
interactive

Run with Claude interactively/steered � not safe for the unattended watcher

  
portal

Reported via portal Report Issue button

  
triaged

Triage has run on this portal issue (prevents re-triage)

No labels
bug
claude-failed
claude-pr
claude-queue
claude-working
epic
feature
interactive
portal
triaged
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: shad0w/pelagia-portal#114
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?