Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MWPW-161149] Fix logged out user experience #199

Merged
merged 6 commits into from
Oct 29, 2024
Merged

[MWPW-161149] Fix logged out user experience #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
acb3d8d
Fix logged out user experience
qiyundai Oct 29, 2024
bd48461
update unit tests
qiyundai Oct 29, 2024
72492eb
updated test
qiyundai Oct 29, 2024
4750d5b
fixed on profile behavior
qiyundai Oct 29, 2024
dd0e5db
Update content-update.js
qiyundai Oct 29, 2024
b176583
test fixed
qiyundai Oct 29, 2024
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
155 changes: 79 additions & 76 deletions events/scripts/content-update.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,59 @@ function convertEccIcon(n) {
});
}

async function setCtaState(targetState, rsvpBtn, miloLibs) {
const checkRed = getIcon('check-circle-red');
const enableBtn = () => {
rsvpBtn.el.classList.remove('disabled');
rsvpBtn.el.setAttribute('tabindex', 0);
};

const disableBtn = () => {
rsvpBtn.el.setAttribute('tabindex', -1);
rsvpBtn.el.href = '';
rsvpBtn.el.classList.add('disabled');
};

const stateTrigger = {
registered: async () => {
const registeredText = await miloReplaceKey(miloLibs, 'registered-cta-text');
enableBtn();
updateAnalyticTag(rsvpBtn.el, registeredText);
rsvpBtn.el.textContent = registeredText;
rsvpBtn.el.prepend(checkRed);
},
waitlisted: async () => {
const waitlistedText = await miloReplaceKey(miloLibs, 'waitlisted-cta-text');
enableBtn();
updateAnalyticTag(rsvpBtn.el, waitlistedText);
rsvpBtn.el.textContent = waitlistedText;
rsvpBtn.el.prepend(checkRed);
},
toWaitlist: async () => {
const waitlistText = await miloReplaceKey(miloLibs, 'waitlist-cta-text');
enableBtn();
updateAnalyticTag(rsvpBtn.el, waitlistText);
rsvpBtn.el.textContent = waitlistText;
checkRed.remove();
},
eventClosed: async () => {
const closedText = await miloReplaceKey(miloLibs, 'event-full-cta-text');
disableBtn();
updateAnalyticTag(rsvpBtn.el, closedText);
rsvpBtn.el.textContent = closedText;
checkRed.remove();
},
default: async () => {
enableBtn();
updateAnalyticTag(rsvpBtn.el, rsvpBtn.originalText);
rsvpBtn.el.textContent = rsvpBtn.originalText;
checkRed.remove();
},
};

await stateTrigger[targetState]();
}

function createTag(tag, attributes, html, options = {}) {
const el = document.createElement(tag);
if (html) {
Expand All @@ -94,79 +147,28 @@ function createTag(tag, attributes, html, options = {}) {
export async function updateRSVPButtonState(rsvpBtn, miloLibs) {
const rsvpData = BlockMediator.get('rsvpData');
const eventInfo = BlockMediator.get('eventData');
const checkRed = getIcon('check-circle-red');
let eventFull = false;
if (eventInfo) eventFull = eventInfo.isFull;

const enableBtn = () => {
rsvpBtn.el.classList.remove('disabled');
rsvpBtn.el.setAttribute('tabindex', 0);
};

const disableBtn = () => {
rsvpBtn.el.setAttribute('tabindex', -1);
rsvpBtn.el.href = '';
rsvpBtn.el.classList.add('disabled');
};

const closedState = async () => {
const closedText = await miloReplaceKey(miloLibs, 'event-full-cta-text');
disableBtn();
updateAnalyticTag(rsvpBtn.el, closedText);
rsvpBtn.el.textContent = closedText;
checkRed.remove();
};

const defaultState = () => {
enableBtn();
updateAnalyticTag(rsvpBtn.el, rsvpBtn.originalText);
rsvpBtn.el.textContent = rsvpBtn.originalText;
checkRed.remove();
};

const registeredState = async () => {
const registeredText = await miloReplaceKey(miloLibs, 'registered-cta-text');
enableBtn();
updateAnalyticTag(rsvpBtn.el, registeredText);
rsvpBtn.el.textContent = registeredText;
rsvpBtn.el.prepend(checkRed);
};
let allowWaitlisting = getMetadata('allow-wait-listing') === 'true';

const waitlistState = async () => {
const waitlistText = await miloReplaceKey(miloLibs, 'waitlist-cta-text');
enableBtn();
updateAnalyticTag(rsvpBtn.el, waitlistText);
rsvpBtn.el.textContent = waitlistText;
checkRed.remove();
};

const waitlistedState = async () => {
const waitlistedText = await miloReplaceKey(miloLibs, 'waitlisted-cta-text');
enableBtn();
updateAnalyticTag(rsvpBtn.el, waitlistedText);
rsvpBtn.el.textContent = waitlistedText;
rsvpBtn.el.prepend(checkRed);
};
if (eventInfo) {
eventFull = eventInfo.isFull;
allowWaitlisting = eventInfo.allowWaitlisting;
}

if (!rsvpData) {
if (eventFull) {
if (eventInfo?.allowWaitlisting) {
await waitlistState();
if (allowWaitlisting) {
await setCtaState('toWaitlist', rsvpBtn, miloLibs);
} else {
await closedState();
await setCtaState('eventClosed', rsvpBtn, miloLibs);
}
} else {
defaultState();
await setCtaState('default', rsvpBtn, miloLibs);
}
} else if (rsvpData.registrationStatus === 'registered') {
await registeredState();
await setCtaState('registered', rsvpBtn, miloLibs);
} else if (rsvpData.registrationStatus === 'waitlisted') {
await waitlistedState();
} else if (!rsvpData.ok) {
// FIXME: temporary solution for ESL returning 500 on ESP 400 response
if (rsvpData.error?.message === 'Request to ESP failed: Event is full') {
await closedState();
}
await setCtaState('waitlisted', rsvpBtn, miloLibs);
}
}

Expand All @@ -182,26 +184,27 @@ export function signIn(options) {
async function handleRSVPBtnBasedOnProfile(rsvpBtn, miloLibs, profile) {
const { getConfig } = await import(`${miloLibs}/utils/utils.js`);
const resp = await getEvent(getMetadata('event-id'));
let allowWaitlisting = getMetadata('allow-wait-listing') === 'true';
if (!resp) return;

const eventInfo = resp.data;
BlockMediator.set('eventData', eventInfo);
if (profile?.noProfile || resp.status === 401) {
if (eventInfo?.isFull) {
const eventFullText = await miloReplaceKey(miloLibs, 'event-full-cta-text');
updateAnalyticTag(rsvpBtn.el, eventFullText);
rsvpBtn.el.setAttribute('tabindex', -1);
rsvpBtn.el.href = '';
rsvpBtn.el.textContent = eventFullText;
if (eventInfo && eventInfo.isFull) {
allowWaitlisting = eventInfo.allowWaitlisting;
if (allowWaitlisting) {
await setCtaState('toWaitlist', rsvpBtn, miloLibs);
} else {
await setCtaState('eventClosed', rsvpBtn, miloLibs);
}
} else {
updateAnalyticTag(rsvpBtn.el, rsvpBtn.originalText);
rsvpBtn.el.textContent = rsvpBtn.originalText;
rsvpBtn.el.classList.remove('disabled');
rsvpBtn.el.setAttribute('tabindex', 0);
rsvpBtn.el.addEventListener('click', (e) => {
e.preventDefault();
signIn(getSusiOptions(getConfig()));
});
await setCtaState('default', rsvpBtn, miloLibs);
}
// TODO: add condition once guest checkout is available
rsvpBtn.el.addEventListener('click', (e) => {
e.preventDefault();
signIn(getSusiOptions(getConfig()));
});
} else if (profile) {
await updateRSVPButtonState(rsvpBtn, miloLibs);

Expand Down
34 changes: 27 additions & 7 deletions test/unit/scripts/content-update.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ describe('Content Update Script', () => {

const buttonOriginalText = document.querySelector('a[href$="#rsvp-form-1"]').textContent;
autoUpdateContent(document, miloDeps);
BlockMediator.set('rsvpData', { ok: true, data: { status: { registered: false } } });
BlockMediator.set('rsvpData', null);

expect(document.querySelector('a[href$="#rsvp-form-1"]').textContent).to.be.equal(buttonOriginalText);
});
Expand Down Expand Up @@ -126,16 +126,36 @@ describe('updateRSVPButtonState', () => {
originalText: 'RSVP',
};

let eventInfo = { isFull: false };
BlockMediator.set('eventData', { isFull: false });

await updateRSVPButtonState(rsvpBtn, LIBS, eventInfo);
await updateRSVPButtonState(rsvpBtn, LIBS);
expect(rsvpBtn.el.textContent).to.equal('RSVP');

eventInfo = { isFull: true };
await updateRSVPButtonState(rsvpBtn, LIBS, eventInfo);
BlockMediator.set('rsvpData', { ok: false, error: { message: 'Request to ESP failed: Event is full' } });
await updateRSVPButtonState(rsvpBtn, LIBS, eventInfo);
BlockMediator.set('eventData', { isFull: true, allowWaitlisting: false });
await updateRSVPButtonState(rsvpBtn, LIBS);
expect(rsvpBtn.el.classList.contains('disabled')).to.be.true;

BlockMediator.set('eventData', { isFull: true, allowWaitlisting: true });
await updateRSVPButtonState(rsvpBtn, LIBS);
expect(rsvpBtn.el.classList.contains('disabled')).to.be.false;

BlockMediator.set('rsvpData', { registrationStatus: 'registered' });
BlockMediator.set('eventData', { isFull: true, allowWaitlisting: false });
await updateRSVPButtonState(rsvpBtn, LIBS);
expect(rsvpBtn.el.classList.contains('disabled')).to.be.false;

BlockMediator.set('eventData', { isFull: true, allowWaitlisting: true });
await updateRSVPButtonState(rsvpBtn, LIBS);
expect(rsvpBtn.el.classList.contains('disabled')).to.be.false;

BlockMediator.set('rsvpData', { registrationStatus: 'waitlisted' });
BlockMediator.set('eventData', { isFull: true, allowWaitlisting: false });
await updateRSVPButtonState(rsvpBtn, LIBS);
expect(rsvpBtn.el.classList.contains('disabled')).to.be.false;

BlockMediator.set('eventData', { isFull: true, allowWaitlisting: true });
await updateRSVPButtonState(rsvpBtn, LIBS);
expect(rsvpBtn.el.classList.contains('disabled')).to.be.false;
});
});

Expand Down
Loading