Merge pull request #2240 from LZoog/issues/2210

fix(delete_account): issue #2210 - Improve delete_account with style update, copy update, hide product container if 0 products

packages/fxa-content-server/app/scripts/templates/settings/delete_account.mustache

@@ -14,7 +14,7 @@
     <div class="error"></div>
 
     <form novalidate>
-      <div class="delete-account-product-container {{#productListError}}hide{{/productListError}}">
+      <div class="delete-account-product-container {{#hideProductContainer}}hide{{/hideProductContainer}}">
         <p>{{#t}}You've connected your Firefox account to Mozilla products that keep you secure and productive on the web:{{/t}}</p>
 
         <ul class="delete-account-product-list {{#hasTwoColumnProductList}}two-col{{/hasTwoColumnProductList}}">
@@ -52,7 +52,7 @@
       <ul class="delete-account-checkbox-list">
         <li class='delete-account-checkbox-list-item'>
           <input id="delete-account-subscriptions" type="checkbox" value="delete-account-subscriptions" class="delete-account-checkbox" required />
-          <label for="delete-account-subscriptions">{{#t}}Any subscriptions you have will be cancelled{{/t}}</label>
+          <label for="delete-account-subscriptions">{{#t}}Any paid subscriptions you have will be cancelled{{/t}}</label>
         </li>
 
         <li class='delete-account-checkbox-list-item'>

packages/fxa-content-server/app/scripts/views/settings/delete_account.js

@@ -35,7 +35,7 @@ var View = FormView.extend({
     this._activeSubscriptions = [];
     this._uniqueBrowserNames = [];
     this._hasTwoColumnProductList = false;
-    this._productListError = false;
+    this._hideProductContainer = false;
   },
 
   setInitialContext(context) {
@@ -46,7 +46,7 @@ var View = FormView.extend({
       subscriptions: this._activeSubscriptions,
       uniqueBrowserNames: this._uniqueBrowserNames,
       hasTwoColumnProductList: this._hasTwoColumnProductList,
-      productListError: this._productListError,
+      hideProductContainer: this._hideProductContainer,
     });
   },
 
@@ -65,12 +65,18 @@ var View = FormView.extend({
     ])
       .then(() => {
         this._uniqueBrowserNames = this._setuniqueBrowserNames();
-        this._hasTwoColumnProductList = this._setHasTwoColumnProductList();
+
+        const numberOfProducts = this._getNumberOfProducts();
+        if (numberOfProducts === 0) {
+          this._hideProductContainer = true;
+        } else if (numberOfProducts >= 4) {
+          this._hasTwoColumnProductList = true;
+        }
       })
       .catch(err => {
         this.model.set('error', err);
         this.logError(err);
-        this._productListError = true;
+        this._hideProductContainer = true;
       })
       .finally(() => this.render());
   },
@@ -114,7 +120,7 @@ var View = FormView.extend({
     }));
   },
 
-  _setHasTwoColumnProductList() {
+  _getNumberOfProducts() {
     let numberOfProducts = this._uniqueBrowserNames.length;
     for (const client of this._attachedClients.toJSON()) {
       if (client.isOAuthApp === true) {
@@ -126,7 +132,7 @@ var View = FormView.extend({
         numberOfProducts++;
       }
     }
-    return numberOfProducts >= 4;
+    return numberOfProducts;
   },
 
   _toggleEnableSubmit() {

packages/fxa-content-server/app/styles/modules/_settings.scss

@@ -388,25 +388,31 @@ section.modal-panel {
 
 .delete-account {
   &-product-container {
-    &.hide { // error during fetch for subscriptions and/or clients
+    &.hide { // 0 products or error during fetch for subscriptions and/or clients
       display: none;
     }
   }
 
   &-product-list {
-    padding-left: 14px;
-    margin: 0 0 24px;
     line-height: 24px;
+    margin: 0 0 24px;
+    padding-left: 14px;
   }
 
   &-checkbox-list {
     list-style: none;
-    padding-left: 0;
     margin: 0 0 32px;
+    padding-left: 0;
 
     &-item {
+      display: grid;
+      grid-template-columns: 28px auto;
       margin-bottom: 12px;
     }
+
+    label {
+      line-height: 1.5;
+    }
   }
 
   ul {

packages/fxa-content-server/app/tests/spec/views/settings/delete_account.js

@@ -404,8 +404,23 @@ describe('views/settings/delete_account', function() {
         });
       });
 
-      describe('_setHasTwoColumnProductList', () => {
-        it('does not add `two-col` class to `delete-account-product-list` if count of rendered products is 3', () => {
+      describe('_getNumberOfProducts', () => {
+        it('adds `hide` class to `delete-account-product-container` if number of rendered products is 0', () => {
+          activeSubscriptions = [];
+          attachedClients = [];
+
+          return view
+            .render()
+            .then(() => view.openPanel())
+            .then(() => {
+              assert.isTrue($('.delete-account-product-list li').length === 0);
+              assert.isTrue(
+                view.$('.delete-account-product-container').hasClass('hide')
+              );
+            });
+        });
+
+        it('does not add `two-col` class to `delete-account-product-list` if number of rendered products is 3', () => {
           activeSubscriptions = [];
 
           return view
@@ -419,7 +434,7 @@ describe('views/settings/delete_account', function() {
             });
         });
 
-        it('adds `two-col` class to `delete-account-product-list` if count of rendered products 4', () => {
+        it('adds `two-col` class to `delete-account-product-list` if number of rendered products 4', () => {
           assert.isTrue(view.$('.delete-account-product-list li').length === 4);
           assert.isTrue(
             view.$('.delete-account-product-list').hasClass('two-col')