Edit Exception Queue

Name

Also known as (comma separated)

Brief definition Items requiring special handling.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "queueName", "type": "text", "label": "Queue name", "default": "Payment exceptions" }, { "id": "reasonFilter", "type": "select", "label": "Filter by reason", "default": "all", "options": [ "all", "fraud-check", "address-mismatch" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showResolve", "type": "toggle", "label": "Show resolve button", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"exq exq--{{reasonFilter}}\">\n <p class=\"exq__title\">{{queueName}}</p>\n <div class=\"exq__row exq__row--fraud-check\">Order #9021 <span class=\"exq__tag\" style=\"background:{{accent}};\">fraud-check</span>{{#if showResolve}}<button type=\"button\" class=\"exq__btn\">Resolve</button>{{/if}}</div>\n <div class=\"exq__row exq__row--address-mismatch\">Order #9033 <span class=\"exq__tag\" style=\"background:{{accent}};\">address-mismatch</span>{{#if showResolve}}<button type=\"button\" class=\"exq__btn\">Resolve</button>{{/if}}</div>\n <div class=\"exq__row exq__row--fraud-check\">Order #9044 <span class=\"exq__tag\" style=\"background:{{accent}};\">fraud-check</span>{{#if showResolve}}<button type=\"button\" class=\"exq__btn\">Resolve</button>{{/if}}</div>\n</div>\n<style>\n.exq { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.exq__title { margin: 0 0 10px; font-weight: 700; }\n.exq__row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; background: #ffffff; border: 1px solid #24143014; margin-bottom: 6px; }\n.exq__tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; color: #241430; font-weight: 600; }\n.exq__btn { margin-left: auto; border: none; background: #24143014; padding: 4px 9px; border-radius: 6px; font-size: 10px; font-weight: 600; cursor: pointer; color: #241430; }\n.exq--fraud-check .exq__row--address-mismatch, .exq--address-mismatch .exq__row--fraud-check { display: none; }\n</style>", "tailwind": "<div class=\"exqtw exqtw--{{reasonFilter}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-2.5 font-bold\">{{queueName}}</p>\n <div class=\"exqtw__row exqtw__row--fraud-check flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] mb-1.5\">Order #9021 <span class=\"text-[10px] py-0.5 px-1.5 rounded-full font-semibold\" style=\"background:{{accent}};\">fraud-check</span>{{#if showResolve}}<button type=\"button\" class=\"ml-auto border-none bg-[#24143014] py-1 px-2.5 rounded-md text-[10px] font-semibold cursor-pointer\">Resolve</button>{{/if}}</div>\n <div class=\"exqtw__row exqtw__row--address-mismatch flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] mb-1.5\">Order #9033 <span class=\"text-[10px] py-0.5 px-1.5 rounded-full font-semibold\" style=\"background:{{accent}};\">address-mismatch</span>{{#if showResolve}}<button type=\"button\" class=\"ml-auto border-none bg-[#24143014] py-1 px-2.5 rounded-md text-[10px] font-semibold cursor-pointer\">Resolve</button>{{/if}}</div>\n <div class=\"exqtw__row exqtw__row--fraud-check flex items-center gap-2 p-2 rounded-md bg-white border border-[#24143014] mb-1.5\">Order #9044 <span class=\"text-[10px] py-0.5 px-1.5 rounded-full font-semibold\" style=\"background:{{accent}};\">fraud-check</span>{{#if showResolve}}<button type=\"button\" class=\"ml-auto border-none bg-[#24143014] py-1 px-2.5 rounded-md text-[10px] font-semibold cursor-pointer\">Resolve</button>{{/if}}</div>\n</div>\n<style>\n.exqtw--fraud-check .exqtw__row--address-mismatch, .exqtw--address-mismatch .exqtw__row--fraud-check { display: none; }\n</style>", "react": "export function ExceptionQueue({\n queueName = \"{{queueName}}\",\n reasonFilter = \"{{reasonFilter}}\",\n accent = \"{{accent}}\",\n showResolve = {{showResolve}},\n}) {\n const rows = [\n { id: \"Order #9021\", reason: \"fraud-check\" },\n { id: \"Order #9033\", reason: \"address-mismatch\" },\n { id: \"Order #9044\", reason: \"fraud-check\" },\n ].filter((r) => reasonFilter === \"all\" || r.reason === reasonFilter);\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 10px\", fontWeight: 700 }}>{queueName}</p>\n {rows.map((r) => (\n <div key={r.id} style={{ display: \"flex\", alignItems: \"center\", gap: 8, padding: 8, borderRadius: 6, background: \"#ffffff\", border: \"1px solid #24143014\", marginBottom: 6 }}>\n {r.id}\n <span style={{ fontSize: 10, padding: \"2px 7px\", borderRadius: 999, color: \"#241430\", fontWeight: 600, background: accent }}>{r.reason}</span>\n {showResolve && <button type=\"button\" style={{ marginLeft: \"auto\", border: \"none\", background: \"#24143014\", padding: \"4px 9px\", borderRadius: 6, fontSize: 10, fontWeight: 600, cursor: \"pointer\", color: \"#241430\" }}>Resolve</button>}\n </div>\n ))}\n </div>\n );\n}" }