From 83e808f551272c144cbe98cac39d73bb1d9f9fc2 Mon Sep 17 00:00:00 2001 From: Ash Monty Date: Mon, 4 Jul 2022 18:26:10 +0200 Subject: [PATCH] style: add tier change styling --- public/assets/css/upgrade.css | 106 ++++++++++++++++++++++++++++--- public/assets/js/upgrade.js | 102 +++++++++++++++++++++++++++++ src/routers/account.js | 3 +- views/account/upgrade.handlebars | 66 ++++++++++--------- 4 files changed, 236 insertions(+), 41 deletions(-) create mode 100644 public/assets/js/upgrade.js diff --git a/public/assets/css/upgrade.css b/public/assets/css/upgrade.css index 9f7db62..1e4b95b 100644 --- a/public/assets/css/upgrade.css +++ b/public/assets/css/upgrade.css @@ -164,8 +164,10 @@ label.tier p.price span { form .button-wrapper { grid-column: 2 / span 1; + position: relative; + margin-top: 24px; } -form button { +button { appearance: none; -webkit-appearance: none; display: block; @@ -179,21 +181,101 @@ form button { padding: 12px; color: var(--text); width: 100%; - margin-top: 24px; - pointer-events: none; - filter: brightness(0.75) saturate(0.75); /* not using opacity here 'cause in the mobile layout you would see the cards under it */ + transition: filter 300ms; -} -form .tier-radio:checked ~ .button-wrapper button { pointer-events: all; cursor: pointer; filter: none; } +form button.disabled { + pointer-events: none; + filter: brightness(0.75) saturate(0.75); /* not using opacity here 'cause in the mobile layout you would see the cards under it */ + cursor: default; +} + +form button.unsubscribe { + position: relative; + background: none; + color: var(--text-secondary); + margin-top: 12px; + padding: 0; +} +form button.unsubscribe.hidden { + position: absolute; + top: 0; + pointer-events: none; + z-index: -1; +} +form button.unsubscribe:hover { + color: var(--text); +} + +div.unsub-modal-wrapper, +div.switch-tier-modal-wrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + + display: flex; + justify-content: center; + align-items: center; + background: rgba(0, 0, 0, 0.6); + + z-index: 10; +} +div.unsub-modal-wrapper.hidden, +div.switch-tier-modal-wrapper.hidden { + display: none; +} +div.unsub-modal, +div.switch-tier-modal { + background: #393b5f; + padding: 48px; + border-radius: 8px; + text-align: left; + width: min(660px, 90%); + box-sizing: border-box; +} + +div.unsub-modal h1, +div.switch-tier-modal h1 { + margin-top: 0; +} +p.unsub-modal-caption, +p.switch-tier-modal-caption { + color: var(--text-secondary); +} +p.unsub-modal-caption span, +p.switch-tier-modal-caption span { + color: var(--text); +} + +.unsub-modal-button-wrapper, +.switch-tier-modal-button-wrapper { + margin-top: 24px; + display: flex; + justify-content: flex-end; +} +.unsub-modal-button-wrapper button, +.switch-tier-modal-button-wrapper button { + margin-left: 12px; + width: fit-content; +} +.unsub-modal-button-wrapper button.cancel, +.switch-tier-modal-button-wrapper button.cancel { + background: none; +} +.unsub-modal-button-wrapper button.confirm, +.switch-tier-modal-button-wrapper button.confirm { + padding: 12px 24px; +} @media screen and (max-width: 900px) { .account-form-wrapper { width: min(500px, 100%); - margin-bottom: 120px; + margin-bottom: 172px; } form { @@ -215,14 +297,20 @@ form .tier-radio:checked ~ .button-wrapper button { form .button-wrapper::before { content: ""; position: absolute; - top: 0; + top: -24px; left: -100vw; width: 200vw; - height: 150%; + height: 300%; background: #111531; } } +@media screen and (max-width: 600px) { + div.unsub-modal { + padding: 24px; + } +} + @media screen and (max-width: 380px) { label.tier .tier-perks { width: 80%; diff --git a/public/assets/js/upgrade.js b/public/assets/js/upgrade.js new file mode 100644 index 0000000..36e1a05 --- /dev/null +++ b/public/assets/js/upgrade.js @@ -0,0 +1,102 @@ +const buttons = { + submit: document.getElementById('submitButton'), + unsubModal: { + show: document.getElementById('unsubModalShowButton'), + close: document.getElementById('unsubModalCloseButton'), + confirm: document.getElementById('unsubModalConfirmButton'), + }, + switchTierModal: { + show: document.getElementById('switchTierShowButton'), + close: document.getElementById('switchTierCloseButton'), + confirm: document.getElementById('switchTierConfirmButton'), + }, +}; + +const currentTierID = document.querySelector('form').dataset.currentTier; + +const currentTierElement = document.querySelector(`#${currentTierID}`) || undefined; + +// if the condition is met, we disable the submit button and enable the unsubscribe button +function conditionalSubmitButton(condition, target) { + if (condition) { + buttons.submit.innerText = 'Already subscribed to this tier'; + buttons.unsubModal.show.innerText = `Unsubscribe from ${currentTierElement.dataset.tierName}`; + buttons.submit.disabled = true; + buttons.submit.classList.add('disabled'); + buttons.unsubModal.show.classList.remove('hidden'); + } else { + buttons.submit.classList.remove('disabled'); + buttons.unsubModal.show.classList.add('hidden'); + buttons.submit.disabled = false; + buttons.submit.innerText = `Subscribe to ${target.dataset.tierName}`; + } +} + +// If the currect tier exists, select it from the list and disable the submit button. +if (currentTierElement) { + currentTierElement.click(); + conditionalSubmitButton(true); +} + +// If a tier is selected, conditionally enable the submit button. +document.querySelector('form').addEventListener('change', function(e) { + e.preventDefault(); + + // If the selected tier is the current tier, set the button to disabled. Else we enable the button + conditionalSubmitButton(e.target.value === currentTierElement?.value, e.target); +}); + +// handle the submit button +buttons.submit.addEventListener('click', function(e) { + e.preventDefault(); + + // If the user is already subscribed to another tier, we show the confirm modal, else if this is a new subscription we submit the form. + if (currentTierElement) { + const oldTierNameSpan = document.querySelector('.switch-tier-modal-caption span.oldtier'); + const newTierNameSpan = document.querySelector('.switch-tier-modal-caption span.newtier'); + oldTierNameSpan.innerText = currentTierElement.dataset.tierName; + newTierNameSpan.innerText = document.querySelector('input[name="tier"]:checked').dataset.tierName; + + document.querySelector('.switch-tier-modal-wrapper').classList.remove('hidden'); + } else { + const form = document.querySelector('form'); + const selectedTier = form.querySelector('input[type="radio"]:checked').value; + form.action = `/account/checkout/${selectedTier}`; + form.submit(); + } +}); + +buttons.unsubModal.show.addEventListener('click', function(e) { + e.preventDefault(); + + const tierNameSpan = document.querySelector('.unsub-modal-caption span'); + tierNameSpan.innerText = currentTierElement.dataset.tierName; + + // Show the unsubscribe modal + document.querySelector('.unsub-modal-wrapper').classList.remove('hidden'); +}); +buttons.unsubModal.close.addEventListener('click', function(e) { + e.preventDefault(); + + // Hide the unsubscribe modal + document.querySelector('.unsub-modal-wrapper').classList.add('hidden'); +}); +buttons.unsubModal.confirm.addEventListener('click', function(e) { + e.preventDefault(); + + /* unsub logic here */ + alert('lol unsubbed'); +}); + +buttons.switchTierModal.close.addEventListener('click', function(e) { + e.preventDefault(); + + // Hide the switch tier modal + document.querySelector('.switch-tier-modal-wrapper').classList.add('hidden'); +}); +buttons.switchTierModal.confirm.addEventListener('click', function(e) { + e.preventDefault(); + + /* tier switching logic here */ + alert('lol switched tier'); +}); \ No newline at end of file diff --git a/src/routers/account.js b/src/routers/account.js index 427e097..8184e4b 100644 --- a/src/routers/account.js +++ b/src/routers/account.js @@ -524,7 +524,8 @@ router.get('/upgrade', async (request, response) => { layout: 'main', locale: util.getLocale(request.locale.region, request.locale.language), localeString: request.locale.toString(), - error: request.cookies.error + error: request.cookies.error, + currentTier: 'price_1LBnZADOJlJAaQQ3pEUjNWbY' // To be replaced }; const { data: prices } = await stripe.prices.list(); diff --git a/views/account/upgrade.handlebars b/views/account/upgrade.handlebars index e269420..a8532c4 100644 --- a/views/account/upgrade.handlebars +++ b/views/account/upgrade.handlebars @@ -1,8 +1,7 @@ -
- + + + +
- \ No newline at end of file +