Skip to content

Commit

Permalink
update copy and styles
Browse files Browse the repository at this point in the history 
cards have title and description text and a conditional to be evaluated determining visibility of the card.
  • Loading branch information
@circlecube
circlecube committed Mar 15, 2024
1 parent bf9d829 commit f706c8f
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 37 deletions.
56 changes: 38 additions & 18 deletions includes/DeactivationSurvey.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ public function __construct() {

$defaults = array(
'surveyAriaTitle' => __( 'Plugin Deactivation Survey', 'wp-module-deactivation' ),
'surveyTitle' => sprintf( __( 'Thank you for using the %s plugin!', 'wp-module-deactivation' ), ucwords( container()->plugin()->id ) ),
'surveyTitle' => sprintf(
__( 'Thank you for using the %s plugin!', 'wp-module-deactivation' ),
ucwords( container()->plugin()->id )
),
'surveyDesc' => __( 'Please take a moment to let us know why you\'re deactivating this plugin.', 'wp-module-deactivation' ),
'formAriaLabel' => __( 'Plugin Deactivation Form', 'wp-module-deactivation' ),
'label' => __( 'Why are you deactivating this plugin?', 'wp-module-deactivation' ),
Expand All @@ -36,25 +39,40 @@ public function __construct() {
'skipAriaLabel' => __( 'Skip and Deactivate Plugin', 'wp-module-deactivation' ),
'continue' => __( 'Continue', 'wp-module-deactivation' ),
'continueAriaLabel' => __( 'Continue Deactivation', 'wp-module-deactivation' ),
'sureTitle' => __( 'Are You Sure?', 'wp-module-deactivation' ),
'sureDesc' => __( 'This plugin is powers important features on your site. These will no longer be available if you deactivate the plugin.', 'wp-module-deactivation' ),
'sureHelpTitle' => __( 'Need Help?', 'wp-module-deactivation' ),
'sureHelpUrl1' => 'https://bluehost.com/',
'sureHelpUrl2' => 'https://bluehost.com/',
'sureHelpUrl3' => 'https://bluehost.com/',
'sureTitle' => __( 'Are you sure you want to deactivate?', 'wp-module-deactivation' ),
'sureDesc' => __( 'If the Bluehost plugin is deactivated, these features will no longer work:', 'wp-module-deactivation' ),
'sureCards' => array(
__( 'Performance Improvements' ),
__( 'Wonder Blocks Patters' ),
__( 'Security Improvements' ),
__( 'Integrated AI Help Center' ),
array(
'title' => sprintf(
__( '%s Caching', 'wp-module-deactivation' ),
ucwords( container()->plugin()->id )
),
'desc' => __( 'Automatically clears the server page cache when your site updates', 'wp-module-deactivation' ),
'condition' => true,
),
array(
'title' => sprintf(
__( '%s Staging', 'wp-module-deactivation' ),
ucwords( container()->plugin()->id )
),
'desc' => __( 'Create a staging copy of your site to safely test changes', 'wp-module-deactivation' ),
'condition' => true,
),
array(
'title' => __( 'WooCommerce Tools', 'wp-module-deactivation' ),
'desc' => __( 'Run campaigns and promotions on your store', 'wp-module-deactivation' ),
'condition' => 'window.NewfoldRuntime.isWoocommerceActive',
),
array(
'title' => __( 'Wonder Blocks & Patterns Library', 'wp-module-deactivation' ),
'desc' => __( 'Dozens of beautiful block templates and patterns', 'wp-module-deactivation' ),
'condition' => true,
),
),
'sureHelp' => sprintf(
__( 'Need Help? Check the <a href="%s">help center</a> for support.', 'wp-module-deactivation' ),
'/wp-admin/admin.php?page=' . container()->plugin()->id . '#/help'
),
);

$defaults['sureHelp'] = sprintf(
__( 'Learn more about <a href="%1$s" target="_blank" nfd-deactivation-survey-destroy>the features of this plugin</a>, check the <a href="%2$s" onclick="newfoldEmbeddedHelp.toggleNFDLaunchedEmbeddedHelp()">help center</a>, or <a href="%3$s">contact support</a>.' ),
$defaults['sureHelpUrl1'],
$defaults['sureHelpUrl2'],
$defaults['sureHelpUrl3']
);

// Merge defaults with container values from plugin
Expand Down Expand Up @@ -108,6 +126,8 @@ public function deactivation_survey_assets() {
public function deactivation_survey_runtime() {
$plugin_slug = explode( '/', container()->plugin()->basename )[0];

// Validate strings->cards via condition

wp_localize_script(
'nfd-deactivation-survey',
'newfoldDeactivationSurvey',
Expand Down
55 changes: 37 additions & 18 deletions static/css/deactivation-survey.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,6 @@
width: 80vw;
}

@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%;
}
}

.nfd-deactivation__content {
align-items: center;
background-color: #f9f9f6;
Expand All @@ -81,21 +72,20 @@

.nfd-deactivation__header,
.nfd-deactivation__body,
.nfd-deactivation__footer-content {
.nfd-deactivation__footer-content,
.nfd-deactivation-fieldset {
padding: 0 4rem;
margin: 0 auto;
max-width: 800px;
max-width: 90%;
}

.nfd-deactivation__header {
padding: 0 4rem;
margin-bottom: 1rem;
margin-top: 2rem;
text-align: center;
width: 100%;
}

.nfd-deactivation__body {
padding: 0 4rem;
margin: 1rem auto;
text-align: left;
width: 100%;
Expand All @@ -109,7 +99,8 @@
}

.nfd-deactivation__footer-content {
padding: 1rem 4rem;
padding-top: .5rem;
padding-bottom: .5rem
}

.nfd-deactivation__content-title {
Expand All @@ -133,24 +124,35 @@
}

.nfd-deactivation__card {
align-items: center;
background-color: #fff;
border: none;
border-radius: 3px;
box-shadow: 0 0 15px #e2e2df;
font-size: 1.25rem;
display: flex;
flex-wrap: wrap;
gap: .5rem;
justify-content: left;
margin: 0 auto 1rem;
max-width: 100%;
padding: 1rem 2rem;
text-align: left;
}

.nfd-deactivation__card-title {
font-size: 1.25rem;
font-weight: 600;
color: #111111;
}

.nfd-deactivation__card-desc {
color: #000000;
}

.nfd-deactivation-fieldset {
border-top: 1px solid #dcdcde;
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 800px;
padding-top: 1rem;
text-align: left;
gap: .75rem;
Expand Down Expand Up @@ -266,6 +268,23 @@
width: 20%;
}

/* 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%;
}

.nfd-deactivation__header,
.nfd-deactivation__body,
.nfd-deactivation__footer-content,
.nfd-deactivation-fieldset {
padding: 0 2rem;
}
}

/* animations */
@keyframes nfd-submitting {
0% {
Expand Down
9 changes: 8 additions & 1 deletion static/js/deactivation-survey.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,14 @@
const getSureCards = () => {
return runtimeData.strings.sureCards
.map( ( card ) => {
return `<div class="nfd-deactivation__card">${ card }</div>`;
if ( card.condition !== true && ! eval( card.condition ) ) {
return '';
}

return `<div class="nfd-deactivation__card">
<span class="nfd-deactivation__card-title">${ card.title }</span>
<span class="nfd-deactivation__card-desc">${ card.desc }</span>
</div>`;
} )
.join( '' );
};
Expand Down

0 comments on commit f706c8f

Please sign in to comment.