Updated members import validation warning design

no issues.
- changed warning style when import can still happen
- combines all warnings to a single section
- hides details for warnings behind an expandable list so that
- updated copy

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

@@ -38,12 +38,20 @@
 {{else}}
     <div class="modal-body">
         {{#if (and this.filePresent (not this.failureMessage))}}
-            {{#each validationErrors as |error|}}
-                <div class="failed flex items-center gh-members-upload-failuremessage">
-                    {{svg-jar "warning" class="w4 h4 fill-red mr1"}}
-                    {{error.message}}
+            {{#if validationErrors}}
+                <div class="failed flex items-start gh-members-upload-errorcontainer gh-members-upload-warningmessage">
+                    <div class="mr2">{{svg-jar "warning" class="nudge-top--2 w5 h5 fill-yellow-d1"}}</div>
+                    <div>
+                        <p class="ma0 pa0 gh-members-import-errorheading"><span class="fw6">Warning!</span> There are some problems with the CSV data. You can still import it but data loss might occur.</p>
+                        <button type="button" class="gh-btn gh-btn-text gh-btn-warningdetails regular" {{action (toggle "errorDetailsOpen" this)}}><span>Details</span></button>
+                        {{#liquid-if this.errorDetailsOpen}}
+                            {{#each validationErrors as |error|}}
+                                <p class="ma0 pa0 gh-members-import-errordetailtext">{{error.message}}</p>
+                            {{/each}}
+                        {{/liquid-if}}
+                    </div>
                 </div>
-            {{/each}}
+            {{/if}}
             <GhFormGroup>
                 <div class="bg-whitegrey-l2 ba b--whitegrey br3">
                     <div class="flex flex-column items-center justify-center gh-members-import-file">
@@ -59,9 +67,9 @@
             </GhFormGroup>
         {{else}}
             {{#if this.failureMessage}}
-                <div class="failed flex items-center gh-members-upload-failuremessage">
-                    {{svg-jar "warning" class="w4 h4 fill-red mr1"}}
-                    {{this.failureMessage}}
+                <div class="failed flex items-start gh-members-upload-errorcontainer gh-members-upload-errormessage">
+                    <div class="mr2">{{svg-jar "warning" class="nudge-top--2 w4 h4 fill-red"}}</div>
+                    <p class="ma0 pa0">{{this.failureMessage}}</p>
                 </div>
             {{/if}}
             <div class="upload-form bg-whitegrey-l2 ba b--whitegrey br3">

ghost/admin/app/services/member-import-validator.js

@@ -46,19 +46,19 @@ export default Service.extend({
 
         if (hasStripeId) {
             // check can be done on whole set as it won't be too slow
-            let hasDuplicateStripeIds = this._hasDuplicateStripeIds(data);
-            if (hasDuplicateStripeIds === true) {
-                validationResults.push(new MemberImportError('Some members will not be imported. Members with duplicate Stripe customer ids are not allowed.'));
-            }
-
             if (!this.membersUtils.isStripeEnabled) {
-                validationResults.push(new MemberImportError('Stripe customer IDs exist in the data, but no stripe account is connected.'));
+                validationResults.push(new MemberImportError(`You need to connect to Stripe first to import Stripe data.`));
             } else {
                 let stripeSeverValidation = await this._checkStripeServer(validatedSet);
                 if (stripeSeverValidation !== true) {
                     validationResults.push(new MemberImportError('Stripe customer IDs exist in the data, but we could not find such customer in connected Stripe account'));
                 }
             }
+
+            let hasDuplicateStripeIds = this._hasDuplicateStripeIds(data);
+            if (hasDuplicateStripeIds === true) {
+                validationResults.push(new MemberImportError('Members with same Stripe customer IDs will not be imported.'));
+            }
         }
 
         if (validationResults.length) {

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

@@ -408,11 +408,40 @@ textarea.gh-member-details-textarea {
     min-height: 180px;
 }
 
-.gh-members-upload-failuremessage {
-    background: color-mod(var(--red) a(7%));
-    border: 1px solid var(--red);
+.gh-members-upload-errorcontainer {
+    border: 1px solid var(--whitegrey);
     border-radius: 4px;
     padding: 8px;
-    color: var(--red);
     margin-bottom: 20px;
+}
+
+.gh-members-upload-warningmessage {
+    border-left: 4px solid var(--yellow);
+}
+
+.gh-members-upload-errormessage {
+    border-left: 4px solid var(--red);
+}
+
+.gh-members-import-errorheading {
+    font-size: 1.4rem;
+    line-height: 1.55em;
+    margin-top: 2px;
+}
+
+p.gh-members-import-errordetailtext {
+    font-size: 1.3rem;
+    line-height: 1.4em;
+    color: var(--midgrey);
+}
+
+.gh-members-import-errordetailtext:first-of-type {
+    border-top: 1px solid var(--lightgrey);
+    padding-top: 8px;
+    margin-top: 8px;
+}
+
+.gh-members-import-errordetailtext:not(:last-of-type) {
+    padding-bottom: 4px;
+    margin-bottom: 6px;
 }

ghost/admin/app/styles/patterns/buttons.css

@@ -383,6 +383,19 @@ svg.gh-btn-icon-right {
     line-height: 36px;
 }
 
+.gh-btn-text.gh-btn-warningdetails span,
+.gh-btn-text.gh-btn-errordetails span {
+    text-decoration: underline;
+}
+
+.gh-btn-text.gh-btn-warningdetails span {
+    color: color-mod(var(--yellow) l(-8%) s(+5%));
+}
+
+.gh-btn-text.gh-btn-errordetails span {
+    color: var(--red);
+}
+
 
 /*
 /* Button Variations