Updated UI for empty member import (#1801)

no issue

- Disabled import button if mapping screen has 0 members to be imported
- Updated UI logic for no-member upload case
- Used bullet list for email summary

ghost/admin/app/components/modal-import-members.hbs

@@ -21,7 +21,11 @@
     {{#if (eq this.state 'COMPLETE')}}
         <header class="modal-header icon-center" data-test-modal="import-members">
             {{#if this.importResponse.errorCount}}
-                {{svg-jar "members-outline" class="gh-member-import-icon-members"}}
+                {{#if (eq this.importResponse.importedCount 0)}}
+                    {{svg-jar "members-outline" class="gh-member-import-icon-members midgrey"}}
+                {{else}}
+                    {{svg-jar "members-outline" class="gh-member-import-icon-members green"}}
+                {{/if}}
             {{else}}
                 {{svg-jar "confetti" class="gh-member-import-icon-confetti"}}
             {{/if}}
@@ -46,7 +50,13 @@
         {{/if}}
 
         {{#if (or (eq this.state 'MAPPING') (eq this.state 'UPLOADING'))}}
-            <ModalImportMembers::CsvFileMapping @file={{this.file}} @setMappingResult={{action "setMappingResult"}} @showErrors={{this.showMappingErrors}} @disabled={{if (eq this.state 'UPLOADING') true false}} />
+            <ModalImportMembers::CsvFileMapping
+                @file={{this.file}}
+                @setMappingResult={{action "setMappingResult"}}
+                @setFileData={{action "setMappingFileData"}}
+                @showErrors={{this.showMappingErrors}}
+                @disabled={{if (or (eq this.state 'UPLOADING') (eq this.mappingResult.membersCount 0)) true false}}
+            />
         {{/if}}
 
         {{#if (eq this.state 'PROCESSING')}}
@@ -59,20 +69,28 @@
 
         {{#if (eq this.state 'COMPLETE')}}
             <div class="gh-member-import-resultcontainer">
-                {{#unless (eq this.importResponse.importedCount 0)}}
+                {{#if (eq this.importResponse.importedCount 0)}}
+                <div class="gh-member-import-result-summary">
+                    <p>No members were added{{if this.importResponse.errorCount " due to the following errors:" "."}}</p>
+                </div>
+                {{else}}
                 <div class="gh-member-import-result-summary">
                     <p>A total of <strong>{{format-number this.importResponse.importedCount}}</strong> {{gh-pluralize this.importResponse.importedCount 'person' without-count=true}} were successfully added or updated in your list of members, and now have access to your site.</p>
                 </div>
-                {{/unless}}
+                {{/if}}
                 {{#if this.importResponse.errorCount}}
-                    {{#unless (eq this.importResponse.importedCount 0)}}<hr>{{/unless}}
-                    <div class="gh-member-import-result-summary">
-                        <p>{{if (eq this.importResponse.importedCount 0) "No members were added. "}}<strong>{{format-number this.importResponse.errorCount}}</strong> {{gh-pluralize this.importResponse.errorCount "member" without-count=true}} {{if (eq this.importResponse.errorCount 1) "was" "were"}} skipped due to the following errors:</p>
-                    </div>
+                    {{#unless (eq this.importResponse.importedCount 0)}}
+                        <hr>
+                        <div class="gh-member-import-result-summary">
+                            <p><strong>{{format-number this.importResponse.errorCount}}</strong> {{gh-pluralize this.importResponse.errorCount "member" without-count=true}} {{if (eq this.importResponse.errorCount 1) "was" "were"}} skipped due to the following errors:</p>
+                        </div>
+                    {{/unless}}
                     <div class="gh-member-import-errorlist">
+                        <ul>
                         {{#each this.importResponse.errorList as |error|}}
-                            <p>{{error.message}} ({{error.count}}) </p>
+                            <li>{{error.message}} ({{error.count}}) </li>
                         {{/each}}
+                        </ul>
                     </div>
                 {{/if}}
             </div>
@@ -104,7 +122,7 @@
             <button {{action "reset"}} class="gh-btn" data-test-button="restart-import-members">
                 <span>Start over</span>
             </button>
-            <button class="gh-btn gh-btn-green" {{action "upload"}}>
+            <button class="gh-btn gh-btn-green {{unless this.mappingResult.membersCount "disabled"}}" {{action "upload"}}>
                 {{#if this.mappingResult.membersCount}}
                     <span>Import {{format-number this.mappingResult.membersCount}} {{gh-pluralize this.mappingResult.membersCount 'member' without-count=true}}</span>
                 {{else}}
@@ -123,20 +141,35 @@
         {{/if}}
 
         {{#if (eq this.state 'COMPLETE')}}
-            {{#if this.importResponse.errorCount}}
-            <a href="{{this.importResponse.errorCsvUrl}}" download="{{this.importResponse.errorCsvName}}" class="gh-btn" data-test-button="restart-import-members">
+            {{#if this.importResponse.errorCount}}                
+                <a href="{{this.importResponse.errorCsvUrl}}" download="{{this.importResponse.errorCsvName}}" class="gh-btn" data-test-button="restart-import-members">
                     <span>Download error file</span>
                 </a>
-                <button {{action "closeModal"}} class="gh-btn gh-btn-blue" data-test-button="close-import-members">
-                    <span>View members</span>
-                </button>
+                {{#if (eq this.importResponse.importedCount 0)}}
+                    <button {{action "reset"}} class="gh-btn gh-btn-blue" data-test-button="restart-import-members">
+                        <span>Try again</span>
+                    </button>
+                {{else}}
+                    <button {{action "closeModal"}} class="gh-btn gh-btn-blue" data-test-button="close-import-members">
+                        <span>View members</span>
+                    </button>
+                {{/if}}
             {{else}}
-                <button {{action "reset"}} class="gh-btn" data-test-button="restart-import-members">
-                    <span>Upload another file</span>
-                </button>
-                <button {{action "closeModal"}} class="gh-btn gh-btn-blue" data-test-button="close-import-members">
-                    <span>View members</span>
-                </button>
+                {{#if (eq this.importResponse.importedCount 0)}}
+                    <button {{action "closeModal"}} class="gh-btn" data-test-button="close-import-members">
+                        <span>Close</span>
+                    </button>
+                    <button {{action "reset"}} class="gh-btn gh-btn-blue" data-test-button="restart-import-members">
+                        <span>Try again</span>
+                    </button>
+                {{else}}
+                    <button {{action "reset"}} class="gh-btn" data-test-button="restart-import-members">
+                        <span>Upload another file</span>
+                    </button>
+                    <button {{action "closeModal"}} class="gh-btn gh-btn-blue" data-test-button="close-import-members">
+                        <span>View members</span>
+                    </button>
+                {{/if}}
             {{/if}}
         {{/if}}
 

ghost/admin/app/components/modal-import-members.js

@@ -23,6 +23,7 @@ export default ModalComponent.extend({
 
     file: null,
     mappingResult: null,
+    mappingFileData: null,
     paramName: 'membersfile',
     importResponse: null,
     errorMessage: null,
@@ -66,6 +67,10 @@ export default ModalComponent.extend({
             this.set('mappingResult', mappingResult);
         },
 
+        setMappingFileData(mappingFileData) {
+            this.set('mappingFileData', mappingFileData);
+        },
+
         upload() {
             if (this.file && !this.mappingResult.error) {
                 this.generateRequest();
@@ -127,23 +132,23 @@ export default ModalComponent.extend({
             const formattedError = row.error
                 .replace(
                     'Value in [members.email] cannot be blank.',
-                    'Missing email address'
+                    'Missing email address.'
                 )
                 .replace(
                     'Value in [members.note] exceeds maximum length of 2000 characters.',
-                    '"Note" exceeds maximum length of 2000 characters'
+                    'Note is too long.'
                 )
                 .replace(
                     'Value in [members.subscribed] must be one of true, false, 0 or 1.',
-                    'Value in "Subscribed to emails" must be "true" or "false"'
+                    'Value of "Subscribed to emails" must be "true" or "false"'
                 )
                 .replace(
                     'Validation (isEmail) failed for email',
-                    'Invalid email address'
+                    'Invalid email address.'
                 )
                 .replace(
                     /No such customer:[^,]*/,
-                    'Could not find Stripe customer'
+                    'Could not find Stripe customer.'
                 );
             formattedError.split(',').forEach((errorMssg) => {
                 if (errorList[errorMssg]) {

ghost/admin/app/components/modal-import-members/csv-file-mapping.js

@@ -29,6 +29,7 @@ export default class CsvFileMapping extends Component {
                 } else {
                     this.fileData = [];
                 }
+                this.args.setFileData(this.fileData);
             }
         });
     }

ghost/admin/app/styles/layouts/members.css

@@ -873,7 +873,7 @@ p.gh-members-import-errordetail:first-of-type {
     color: var(--midgrey);
 }
 
-.gh-member-import-errorlist p {
+.gh-member-import-errorlist ul li {
     font-size: 13px;
     font-weight: 400;
     color: var(--midlightgrey-d2);
@@ -894,10 +894,6 @@ p.gh-members-import-errordetail:first-of-type {
     color: var(--midgrey);
 }
 
-.gh-member-import-icon-members {
-    color: var(--green);
-}
-
 .gh-member-import-icon-members path,
 .gh-member-import-icon-members circle {
     stroke-width: 0.85px;