diff --git a/hlx_statics/blocks/getcredential/getcredential.css b/hlx_statics/blocks/getcredential/getcredential.css index 5be991d3..a1d6b2d0 100644 --- a/hlx_statics/blocks/getcredential/getcredential.css +++ b/hlx_statics/blocks/getcredential/getcredential.css @@ -2551,6 +2551,52 @@ align-self: flex-start; } +.request-access-request-btn-wrap { + position: relative; + margin-top: 8px; + display: inline-flex; + align-self: flex-start; +} + +.request-access-pending-popover { + position: absolute; + top: -6px; + left: calc(100% + 12px); + width: 230px; + background: var(--color-white); + border: 1px solid var(--color-light-gray-border); + border-radius: 4px; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); + padding: 12px; + z-index: 5; +} + +.request-access-pending-popover.hidden { + display: none; +} + +.request-access-pending-title { + margin: 0 0 8px; + font-size: 0.875rem; + font-weight: 700; + color: var(--color-dark-bg); +} + +.request-access-pending-body { + margin: 0; + font-size: 0.75rem; + line-height: 1.4; + color: var(--color-text); +} + +.request-access-pending-link { + display: inline-block; + margin-top: 8px; + font-size: 0.75rem; + color: var(--color-primary); + text-decoration: underline; +} + /* EdgeCase variants (NoProduct, Type1User, NotMember, NotSignUp) from credential JSON */ .request-access-edge-case-card { border: 2px solid var(--color-primary); diff --git a/hlx_statics/blocks/getcredential/getcredential.js b/hlx_statics/blocks/getcredential/getcredential.js index 798856ea..b6ad38e0 100644 --- a/hlx_statics/blocks/getcredential/getcredential.js +++ b/hlx_statics/blocks/getcredential/getcredential.js @@ -1134,13 +1134,57 @@ function buildRequestAccessLeftCard(config, edgeCaseKey, options = {}) { card.appendChild(list); } if (restricted.buttonLabel) { + const isRequestPending = Boolean(lastRequestAccessEntitlement?.template?.isRequestPending); + const btnWrap = createTag('div', { class: 'request-access-request-btn-wrap' }); const btn = createTag('button', { type: 'button', class: 'spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM request-access-request-btn' }); btn.innerHTML = `${restricted.buttonLabel}`; - btn.setAttribute('data-request-access-trigger', 'true'); - card.appendChild(btn); + btn.disabled = isRequestPending; + if (!isRequestPending) { + btn.setAttribute('aria-disabled', 'true'); + btn.setAttribute('aria-label', 'Request access is pending, please wait for approval'); + + const pendingPopover = createTag('div', { + class: 'request-access-pending-popover hidden', + role: 'status', + 'aria-live': 'polite' + }); + const pendingTitle = createTag('p', { class: 'request-access-pending-title' }); + pendingTitle.textContent = 'Your request is pending approval'; + const pendingBody = createTag('p', { class: 'request-access-pending-body' }); + pendingBody.textContent = "You'll hear back from your admin soon. If your request is approved, you'll get an email with instructions on how to start using your apps and services."; + const pendingLink = createTag('a', { + class: 'request-access-pending-link', + href: 'https://developer.adobe.com/developer-console/docs/guides/credentials/request-access/', + target: '_blank', + rel: 'noreferrer' + }); + pendingLink.textContent = 'Learn more about requesting Adobe apps'; + pendingPopover.appendChild(pendingTitle); + pendingPopover.appendChild(pendingBody); + pendingPopover.appendChild(pendingLink); + + const showPendingPopover = () => pendingPopover.classList.remove('hidden'); + const hidePendingPopover = () => pendingPopover.classList.add('hidden'); + btnWrap.addEventListener('mouseenter', showPendingPopover); + btnWrap.addEventListener('mouseleave', hidePendingPopover); + btnWrap.addEventListener('focusin', showPendingPopover); + btnWrap.addEventListener('focusout', hidePendingPopover); + btnWrap.addEventListener('click', (e) => { + e.preventDefault(); + pendingPopover.classList.toggle('hidden'); + }); + btnWrap.appendChild(btn); + btnWrap.appendChild(pendingPopover); + } else { + btn.setAttribute('aria-disabled', 'false'); + btn.setAttribute('aria-label', 'Request access'); + btn.setAttribute('data-request-access-trigger', 'true'); + btnWrap.appendChild(btn); + } + card.appendChild(btnWrap); } return card; }