maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Used preact modal for userSubscriptionLiquidTag (#18623)

Browse source 
* Used preact modal for user-subscription

* Updated test cases

* Nit fix
This commit is contained in:
Rajat Talesra 2022-10-25 02:01:52 +05:30 • committed by GitHub
parent f339ec99d1
commit 9cc455a38d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/assets/stylesheets/ltags/UserSubscriptionTag.scss
View file

@ -61,14 +61,3 @@
box-shadow: 0 0 0 4px var(--body-color-inverted);
}
}
// modal styles overwrite crayons component WIP
#user-subscription-confirmation-modal {
.crayons-modal__box__header {
padding: var(--su-2) var(--su-4);
}
.crayons-modal__box__body {
padding: var(--su-6);
}
}

54
app/javascript/liquidTags/userSubscriptionLiquidTag.js
View file

@ -1,4 +1,9 @@
import { getUserDataAndCsrfToken } from '@utilities/getUserDataAndCsrfToken';
import {
closeWindowModal,
showWindowModal,
WINDOW_MODAL_ID,
} from '@utilities/showModal';
/* global userData */
function toggleSubscribeActionUI({
@ -85,31 +90,38 @@ function initSignedInState(tagContainer, appleAuth = false) {
tagContainer
.querySelector('.ltag__user-subscription-tag__signed-in .crayons-btn')
.addEventListener('click', () => {
window.Forem.showModal({
title: 'Confirm subscribe',
contentSelector:
'.user-subscription-confirmation-modal .crayons-modal__box__body',
overlay: true,
onOpen: () => {
// Attach listeners for cancel button and subscribe button
document
.querySelector(
'#window-modal .ltag__user-subscription-tag____cancel-btn',
)
.addEventListener('click', window.Forem.closeModal);
document
.querySelector(
'#window-modal .ltag__user-subscription-tag__confirmation-btn',
)
.addEventListener('click', confirmSubscribe);
},
});
showConfirmSubscribeModal();
});
}
function showConfirmSubscribeModal() {
showWindowModal({
title: 'Confirm subscribe',
size: 'small',
modalContent: document.querySelector(
'.user-subscription-confirmation-modal .crayons-modal__box__body',
).innerHTML,
onOpen: () => {
// Attach listeners for cancel button and subscribe button
document
.querySelector(
`#${WINDOW_MODAL_ID} .ltag__user-subscription-tag____cancel-btn`,
)
.addEventListener('click', () => {
closeWindowModal();
});
document
.querySelector(
`#${WINDOW_MODAL_ID} .ltag__user-subscription-tag__confirmation-btn`,
)
.addEventListener('click', confirmSubscribe);
},
});
}
function confirmSubscribe() {
window.Forem.closeModal();
closeWindowModal();
clearNotices();
submitSubscription().then((response) => {

15
cypress/e2e/seededFlows/articleFlows/liquidTagFlows/userSubscriptionTagWithSubscribableEmail.spec.js
View file

@ -31,7 +31,10 @@ describe('User subscription liquid tag - subscribable email', () => {
}).should('have.length', 2);
cy.findAllByRole('button', { name: 'Subscribe' }).last().click();
cy.getModal()
cy.findByTestId('modal-container').as('modal');
cy.get('@modal')
.findByRole('button', { name: 'Confirm subscription' })
.click();
@ -43,7 +46,10 @@ describe('User subscription liquid tag - subscribable email', () => {
it('cancels subscription action', () => {
cy.findAllByRole('button', { name: 'Subscribe' }).last().click();
cy.getModal().findByRole('button', { name: 'Cancel' }).click();
cy.findByTestId('modal-container').as('modal');
cy.get('@modal').findByRole('button', { name: /Close/ }).click();
cy.findAllByRole('button', { name: 'Subscribe' }).should('have.length', 2);
cy.findByText(
@ -57,7 +63,10 @@ describe('User subscription liquid tag - subscribable email', () => {
});
cy.findAllByRole('button', { name: 'Subscribe' }).last().click();
cy.getModal()
cy.findByTestId('modal-container').as('modal');
cy.get('@modal')
.findByRole('button', { name: 'Confirm subscription' })
.click();