Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions hlx_statics/blocks/getcredential/getcredential.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
48 changes: 46 additions & 2 deletions hlx_statics/blocks/getcredential/getcredential.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `<span class="spectrum-Button-label">${restricted.buttonLabel}</span>`;
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;
}
Expand Down
Loading