diff --git a/includes/DeactivationSurvey.php b/includes/DeactivationSurvey.php index 7025df0..7432d83 100644 --- a/includes/DeactivationSurvey.php +++ b/includes/DeactivationSurvey.php @@ -79,12 +79,6 @@ public function __construct() { __( 'Need Help? Check the help center for support.', 'wp-module-deactivation' ), '/wp-admin/admin.php?page=' . container()->plugin()->id . '#/help' ), - 'durationOption1' => __( '1 Hour','wp-module-deactivation' ), - 'durationOption1Value' => __( '1_hour','wp-module-deactivation' ), - 'durationOption2' => __( '24 Hours','wp-module-deactivation' ), - 'durationOption2Value' => __( '24_hours','wp-module-deactivation' ), - 'durationOption3' => __( 'Until I turn it back on','wp-module-deactivation' ), - 'durationOption3Value' => __( 'until_manual','wp-module-deactivation' ), ); // Merge defaults with container values from plugin diff --git a/static/css/deactivation-survey.css b/static/css/deactivation-survey.css index be76aa8..3c59b72 100644 --- a/static/css/deactivation-survey.css +++ b/static/css/deactivation-survey.css @@ -17,6 +17,10 @@ display: flex; justify-content: center; z-index: 100000; + --nfd-deactivation-overlay: rgba(43, 46, 56, 0.9); + --nfd-deactivation-background: #F8F8F8; + --nfd-deactivation-title: #242424; + --nfd-deactivation-text: #6C6B6B; } #nfd-deactivation-survey * { @@ -39,7 +43,7 @@ .nfd-deactivation-survey__overlay { animation: nfd-fade-in 200ms both; - background-color: rgba(43, 46, 56, 0.9); + background-color: var(--nfd-deactivation-overlay); } .nfd-deactivation-survey__disabled { @@ -47,121 +51,80 @@ } .nfd-deactivation-survey__container { - animation: nfd-fade-in 400ms 200ms both, nfd-slide-up 400ms 200ms both; - background-color: white; - border-radius: 5px; + background-color: var(--nfd-deactivation-background); color: #3C434A; - max-height: 80vh; - max-width: 1024px; + max-height: 90dvh; + max-width: 780px; + border-radius: 5px; position: relative; - width: 80vw; + overflow-y: auto; + overflow-x: hidden; + animation: nfd-fade-in 400ms 200ms both, nfd-slide-up 400ms 200ms both; } .nfd-deactivation__content { - align-items: center; - background-color: #f9f9f6; display:flex; flex-direction: column; - justify-content: space-between; + align-items: center; + justify-content: center; text-align: center; -} - -.nfd-deactivation-form { - width: 100%; + gap: 1.5rem; + width: 700px; + min-height: 500px; + padding: 2rem; } .nfd-deactivation__header, .nfd-deactivation__body, -.nfd-deactivation__footer-content, -.nfd-deactivation-fieldset { - padding: 0 4rem; - margin: 0 auto; - max-width: 90%; -} - -.nfd-deactivation__header { - margin-top: 2rem; - text-align: center; - width: 100%; -} - -.nfd-deactivation__body { - margin: 1rem auto; - text-align: left; - width: 100%; -} - .nfd-deactivation__footer { - background-color: #fff; - border-top: 1px solid #dcdcde; - margin-top: 1rem; - width: 100%; -} - -.nfd-deactivation__footer-content { - padding-top: .5rem; - padding-bottom: .5rem + margin: 0 auto; + max-width: 99%; } -.nfd-deactivation__content-title { - font-size: 2.5rem; +.nfd-deactivation__header-title { + font-size: 2.1rem; + font-weight: 500; line-height: 1.1em; + margin: 0 0 .75rem; + color: var(--nfd-deactivation-title); } -.nfd-deactivation__content-subtitle { - font-size: 1.25rem; +.nfd-deactivation__header-subtitle { + font-size: 1.1rem; line-height: 1.25em; + margin: 0; + color: var(--nfd-deactivation-text); } -.nfd-deactivation__helptext { - font-size: 1.0rem; - padding-right: 3rem; - text-align: left; -} - -.nfd-deactivation-survey__content { - padding: 1.5rem; +.nfd-deactivation__cards { + display: flex; + flex-direction: column; + gap: 1rem; } .nfd-deactivation__card { - align-items: center; - background-color: #fff; - border: none; - border-radius: 3px; - box-shadow: 0 0 15px #e2e2df; - display: flex; - flex-wrap: wrap; - gap: .5rem; - justify-content: left; - margin: 0 auto 1rem; - max-width: 100%; - padding: 1rem 2rem; + background-color: white; text-align: left; + padding: 10px; + border: 1px solid #EBECF4; + border-radius: 4px; } .nfd-deactivation__card-title { - font-size: 1.25rem; - font-weight: 600; - color: #111111; + font-size: 1rem; + font-weight: 500; + color: var(--nfd-deactivation-title); } .nfd-deactivation__card-desc { - color: #000000; -} - -.nfd-deactivation-fieldset { - border-top: 1px solid #dcdcde; - display: flex; - flex-direction: column; - padding-top: 1rem; - text-align: left; - gap: .75rem; + color: var(--nfd-deactivation-text); } .nfd-deactivation-label { font-size: 1rem; font-weight: 600; } + .nfd-deactivation-textarea { font-size: 1rem; padding: .5em; @@ -169,7 +132,6 @@ width: 100%; } - .nfd-deactivation-survey__container button[aria-label="Close dialog"] { border: none; background-color: transparent; @@ -183,50 +145,65 @@ top: 5px; } -.nfd-deactivation-survey__content-header h3 { - color: #3C434A; - font-size: 1rem; - margin: 0 0 .45rem; +.nfd-deactivation-form { + width: 100%; } -.nfd-deactivation-survey__content form { - display: flex; - flex-direction: column; - gap: 1rem; - margin-top: 1.5rem; - width: 100%; +.nfd-deactivation-form .nfd-deactivation__body { + width: 85%; } -.nfd-deactivation-survey__content form label { +.nfd-deactivation-fieldset { + border-top: 1px solid #dcdcde; + padding-top: 1rem; + text-align: left; +} + +.nfd-deactivation-form label { display: inline-block; + font-weight: 500; margin-bottom: 8px; } -.nfd-deactivation-survey__content form textarea { +.nfd-deactivation-form textarea { border-color: #8B8F94; max-height: 150px; - min-height: 60px; + min-height: 75px; padding: 8px; width: 100%; } -.nfd-deactivation-survey__content form textarea::placeholder { +.nfd-deactivation-form textarea::placeholder { font-size: 13px; } -.nfd-deactivation-survey__content-actions { - align-items: center; +.nfd-deactivation__footer { + padding-top: 1.3rem; + display: flex; + flex-direction: column; + gap: .75rem; +} + +.nfd-deactivation__footer-actions { display: flex; + flex-direction: column; + justify-content: center; gap: 1rem; - justify-content: space-between; } -.nfd-deactivation-survey__content-actions > div { - align-items: center; +.nfd-deactivation__footer-actions > div { display: flex; + justify-content: center; + align-items: center; gap: .75rem; } +.nfd-deactivation__helptext p { + color: var(--nfd-deactivation-text); + font-size: .9rem; + margin: 0; +} + .nfd-deactivation-survey-action { background-color: transparent; border: none; @@ -268,28 +245,52 @@ width: 20%; } +.nfd-deactivation__step { + position: absolute; + bottom: 15px; + right: 15px; + color: #8b8e9a; + font-size: 16px; + letter-spacing: 2.5px; + user-select: none; +} + /* mobile */ -@media screen and (max-width: 600px) { - .nfd-deactivation-survey__container, - .nfd-deactivation-survey__container[data-step="1"] { - max-height: 100vh; - max-width: 100vw; - width: 100%; +@media screen and (max-width: 780px) { + .nfd-deactivation-survey__container { + max-width: 95vw; } - .nfd-deactivation__header, - .nfd-deactivation__body, - .nfd-deactivation__footer-content, - .nfd-deactivation-fieldset { - padding: 0 2rem; + .nfd-deactivation__content { + max-width: 100%; + padding: 1.2rem; + gap: 1rem; } -} -@media screen and (max-width: 600px) { - .nfd-deactivation-survey__container { - overflow: scroll; + .nfd-deactivation__header-title { + font-size: 1.6rem; + } + + .nfd-deactivation__header-subtitle { + font-size: 1rem; + } + + .nfd-deactivation__cards { + gap: .75rem; + } + + .nfd-deactivation__card-title { + font-size: .9rem; + } + + .nfd-deactivation-form .nfd-deactivation__body { + width: 99%; } - } + + .nfd-deactivation-form textarea { + max-height: 75px; + } +} /* animations */ @keyframes nfd-submitting { diff --git a/static/js/deactivation-survey.js b/static/js/deactivation-survey.js index b70b762..71ea940 100644 --- a/static/js/deactivation-survey.js +++ b/static/js/deactivation-survey.js @@ -25,6 +25,9 @@ // Create dialog instance deactivationSurveyDialog = new A11yDialog( surveyDialog ); deactivationSurveyDialog.show(); + + // Destroy dialog on hide + deactivationSurveyDialog.on( 'hide', destroyDialog ); }; const getSureCards = () => { @@ -44,78 +47,77 @@ const getSureContent = () => { const content = ` -
+
-

${ +

${ runtimeData.strings.sureTitle }

-

${ +

${ runtimeData.strings.sureDesc }

-
+
${ getSureCards() }
-
-
-
+
+
+

${ runtimeData.strings.sureHelp }

-
+
-
-
+
+
1/2
+
`; return content; }; const getSurveyContent = () => { const content = ` - + `; return content; }; @@ -123,12 +125,12 @@ const getDialogHTML = () => { const content = `
-
- ${ getSureContent() } - ${ getSurveyContent() } -
+
+ ${ getSureContent() } + ${ getSurveyContent() } +
- `; + `; return content; }; @@ -286,6 +288,9 @@ ); const sure = document.querySelector( '.nfd-deactivation-sure' ); const survey = document.querySelector( '.nfd-deactivation-survey' ); + const textArea = document.getElementById( + 'nfd-deactivation-survey__input' + ); // update container with data setp 2 container.setAttribute( 'data-step', '2' ); @@ -295,6 +300,8 @@ // display survey content survey.classList.remove( 'nfd-hidden' ); survey.removeAttribute( 'aria-hidden' ); + // focus on textarea + textArea.focus(); }; // Attach events listeners diff --git a/tests/cypress/integration/deactivation-survey.cy.js b/tests/cypress/integration/deactivation-survey.cy.js index 4a51a5c..84d5282 100644 --- a/tests/cypress/integration/deactivation-survey.cy.js +++ b/tests/cypress/integration/deactivation-survey.cy.js @@ -19,17 +19,40 @@ describe( 'Plugin Deactivation Survey', () => { }, { body: {} } ); - } ); - it( 'Plugin deactivate link opens modal, clicking out closes modal', () => { - // body does not have no scroll class - cy.get( 'body' ).should( 'not.have.class', 'nfd-noscroll' ); - cy.get( '.nfd-deactivation-survey__container' ).should( 'not.exist' ); + Cypress.Commands.add( 'triggerDeactivationModal', () => { + cy.get( + '.deactivate a[id*="' + Cypress.env( 'pluginId' ) + '"]' + ).click(); + } ); + + Cypress.Commands.add( 'verifyModalClosed', () => { + cy.get( '.nfd-deactivation-survey__container' ).should( + 'not.exist' + ); + cy.get( 'body' ).should( 'not.have.class', 'nfd-noscroll' ); + } ); + + Cypress.Commands.add( 'verifyPluginDeactivated', () => { + cy.get( + '.deactivate a[id*="' + Cypress.env( 'pluginId' ) + '"]' + ).should( 'not.exist' ); + cy.get( + '.activate a[id*="' + Cypress.env( 'pluginId' ) + '"]' + ).should( 'exist' ); + } ); + + Cypress.Commands.add( 'reactivatePlugin', () => { + cy.get( + '.activate a[id*="' + Cypress.env( 'pluginId' ) + '"]' + ).click(); + cy.wait( 500 ); + } ); + } ); - // click link - cy.get( - '.deactivate a[id*="' + Cypress.env( 'pluginId' ) + '"]' - ).click(); + it( 'Plugin deactivate link opens modal', () => { + // click "Deactivate" link from plugins list + cy.triggerDeactivationModal(); // body has no scroll class cy.get( 'body' ).should( 'have.class', 'nfd-noscroll' ); @@ -41,43 +64,75 @@ describe( 'Plugin Deactivation Survey', () => { // overlay exists cy.get( '.nfd-deactivation-survey__overlay' ).should( 'exist' ); - - cy.get( '.nfd-deactivation-survey__overlay' ).click( { force: true } ); - - cy.get( 'body' ).should( 'not.have.class', 'nfd-noscroll' ); - cy.get( '.nfd-deactivation-survey__content' ).should( 'not.exist' ); } ); - it( 'Are You Sure Interstitial exists, cancel button exits modal', () => { - // click link to open modal + it( 'Step 1 content renders correctly', () => { cy.get( - '.deactivate a[id*="' + Cypress.env( 'pluginId' ) + '"]' - ).click(); - - cy.get( '.nfd-deactivation-sure .nfd-deactivation__content-title' ).should( 'be.visible' ); - cy.get( '.nfd-deactivation-sure .nfd-deactivation__content-subtitle' ).should( 'be.visible' ); + '.nfd-deactivation-sure .nfd-deactivation__header-title' + ).should( 'be.visible' ); + cy.get( + '.nfd-deactivation-sure .nfd-deactivation__header-subtitle' + ).should( 'be.visible' ); cy.get( '.nfd-deactivation-sure .nfd-deactivation__cards' ).should( 'be.visible' ); cy.get( '.nfd-deactivation-sure .nfd-deactivation__helptext' ).should( 'be.visible' ); // Check content matches deactivation runtime data cy.get( - '.nfd-deactivation-sure .nfd-deactivation__content-title' + '.nfd-deactivation-sure .nfd-deactivation__header-title' ).contains( newfoldDeactivationSurvey.strings.sureTitle ); - cy.get( 'button[nfd-deactivation-survey-destroy]' ).should( + // Cancel button exists + cy.get( + '.nfd-deactivation-sure button[nfd-deactivation-survey-destroy]' + ).should( 'be.visible' ); + + // Continue button exists + cy.get( + '.nfd-deactivation-sure button[nfd-deactivation-survey-next]' + ).should( 'be.visible' ); + + // Go to next step + cy.get( + '.nfd-deactivation-sure button[nfd-deactivation-survey-next]' + ).click(); + } ); + + it( 'Step 2 content renders correctly', () => { + cy.get( + '.nfd-deactivation-survey .nfd-deactivation__header-title' + ).should( 'be.visible' ); + cy.get( + '.nfd-deactivation-survey .nfd-deactivation__header-subtitle' + ).should( 'be.visible' ); + cy.get( '.nfd-deactivation-survey .nfd-deactivation-label' ).should( + 'be.visible' + ); + cy.get( '.nfd-deactivation-survey .nfd-deactivation-textarea' ).should( 'be.visible' ); - cy.get( 'button[nfd-deactivation-survey-next]' ).should( 'be.visible' ); + // Check content matches deactivation runtime data cy.get( - '.nfd-deactivation-sure button[nfd-deactivation-survey-destroy]' - ).click(); + '.nfd-deactivation-survey .nfd-deactivation__header-title' + ).contains( newfoldDeactivationSurvey.strings.surveyTitle ); + + // Cancel button exists + cy.get( + '.nfd-deactivation-survey button[nfd-deactivation-survey-destroy]' + ).should( 'be.visible' ); + + // Submit button exists + cy.get( + '.nfd-deactivation-survey input[nfd-deactivation-survey-submit]' + ).should( 'be.visible' ); - cy.get( 'body' ).should( 'not.have.class', 'nfd-noscroll' ); - cy.get( '.nfd-deactivation-survey__content' ).should( 'not.exist' ); + // Skip button exists + cy.get( + '.nfd-deactivation-survey button[nfd-deactivation-survey-skip]' + ).should( 'be.visible' ); } ); - it( 'Continue button exists and advances to survey, skip button functions', () => { + it( 'Skip action works', () => { // ignore notifications errors if there are any cy.intercept( { @@ -91,13 +146,6 @@ describe( 'Plugin Deactivation Survey', () => { url: /newfold-data(\/|%2F)v1(\/|%2F)events/, } ).as( 'surveyEvent' ); - // click link to open modal - cy.get( - '.deactivate a[id*="' + Cypress.env( 'pluginId' ) + '"]' - ).click(); - - cy.get( 'button[nfd-deactivation-survey-next]' ).click(); - // skip & deactivate functions cy.get( 'button[nfd-deactivation-survey-skip]' ).should( 'be.visible' ); cy.get( 'button[nfd-deactivation-survey-skip]' ).click(); @@ -106,22 +154,14 @@ describe( 'Plugin Deactivation Survey', () => { .its( 'request.body.data.survey_input' ) .should( 'eq', '(Skipped)' ); // verify modal closed - cy.get( '.nfd-deactivation-survey__container' ).should( 'not.exist' ); + cy.verifyModalClosed(); // verify plugin is deactivated - cy.get( - '.deactivate a[id*="' + Cypress.env( 'pluginId' ) + '"]' - ).should( 'not.exist' ); - cy.get( '.activate a[id*="' + Cypress.env( 'pluginId' ) + '"]' ).should( - 'exist' - ); + cy.verifyPluginDeactivated(); // reactivate plugin - cy.get( - '.activate a[id*="' + Cypress.env( 'pluginId' ) + '"]' - ).click(); - cy.wait( 500 ); + cy.reactivatePlugin(); } ); - it( 'Survey successfully deactivates plugin', () => { + it( 'Submit action works', () => { // ignore notifications errors if there are any cy.intercept( { @@ -136,10 +176,9 @@ describe( 'Plugin Deactivation Survey', () => { } ).as( 'surveyEvent' ); // click link to open modal - cy.get( - '.deactivate a[id*="' + Cypress.env( 'pluginId' ) + '"]' - ).click(); + cy.triggerDeactivationModal(); + // go to step 2 cy.get( 'button[nfd-deactivation-survey-next]' ).click(); // can enter reason @@ -156,20 +195,51 @@ describe( 'Plugin Deactivation Survey', () => { .should( 'eq', ugcReason ); cy.wait( 500 ); // verify plugin is deactivated - cy.get( - '.deactivate a[id*="' + Cypress.env( 'pluginId' ) + '"]' - ).should( 'not.exist' ); - cy.get( '.activate a[id*="' + Cypress.env( 'pluginId' ) + '"]' ).should( - 'exist' - ); + cy.verifyPluginDeactivated(); // reactivate plugin + cy.reactivatePlugin(); + } ); + + it( 'Modal closes properly', () => { + // On overlay click + cy.triggerDeactivationModal(); + cy.get( '.nfd-deactivation-survey__overlay' ).click( { force: true } ); + cy.verifyModalClosed(); + + // On step 1 cancel button click + cy.triggerDeactivationModal(); cy.get( - '.activate a[id*="' + Cypress.env( 'pluginId' ) + '"]' + '.nfd-deactivation-sure button[nfd-deactivation-survey-destroy]' ).click(); - cy.wait( 500 ); + cy.verifyModalClosed(); + + // On ESC key press (step 1) + cy.triggerDeactivationModal(); + cy.get( 'body' ).type( '{esc}' ); + cy.verifyModalClosed(); + + // On step 2 cancel button click + cy.triggerDeactivationModal(); + cy.get( + '.nfd-deactivation-sure button[nfd-deactivation-survey-next]' + ).click(); + cy.get( + '.nfd-deactivation-survey button[nfd-deactivation-survey-destroy]' + ).click(); + cy.verifyModalClosed(); + + // On ESC key press (step 2) + cy.triggerDeactivationModal(); + cy.get( + '.nfd-deactivation-sure button[nfd-deactivation-survey-next]' + ).click(); + cy.get( 'body' ).type( '{esc}' ); + cy.verifyModalClosed(); } ); } ); -after(()=>{ - cy.exec( `npx wp-env run cli wp plugin activate ${ Cypress.env( 'pluginSlug' ) }` ); -}); \ No newline at end of file +after( () => { + cy.exec( + `npx wp-env run cli wp plugin activate ${ Cypress.env( 'pluginSlug' ) }` + ); +} );