Ghost/ghost/admin/app/components/modal-import-members.hbs
Naz a7bb783d33 Added special error modal copy on email freeze
closes https://github.com/TryGhost/Team/issues/913

- When an error is returned from the server during a CSV import and it's because of the email freeze the import modal error has to show a special header along with error message
2021-07-27 16:19:38 +04:00

194 lines
8.9 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="gh-member-import-wrapper {{if (or (eq this.state 'MAPPING') (eq this.state 'UPLOADING')) "wide"}}">
{{#if (eq this.state 'INIT')}}
<header class="modal-header" data-test-modal="import-members">
<h1>Import members</h1>
</header>
{{/if}}
{{#if (or (eq this.state 'MAPPING') (eq this.state 'UPLOADING'))}}
<header class="modal-header" data-test-modal="import-members">
<h1>Import members</h1>
</header>
{{/if}}
{{#if (eq this.state 'PROCESSING')}}
<header class="modal-header icon-center" data-test-modal="import-members">
<GhLoadingSpinner />
<h1>Import in progress</h1>
</header>
{{/if}}
{{#if (eq this.state 'COMPLETE')}}
<header class="modal-header icon-center" data-test-modal="import-members">
{{#if this.importResponse.errorCount}}
{{#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}}
<h1>Import complete</h1>
</header>
{{/if}}
{{#if (eq this.state 'ERROR')}}
<header class="modal-header" data-test-modal="import-members">
<h1>{{this.errorHeader}}</h1>
</header>
{{/if}}
<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>
{{svg-jar "close"}}
<span class="hidden">Close</span>
</a>
<div class="modal-body">
{{#if (eq this.state 'INIT')}}
<ModalImportMembers::CsvFileSelect @setFile={{action "setFile"}} />
{{/if}}
{{#if (or (eq this.state 'MAPPING') (eq this.state 'UPLOADING'))}}
<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')}}
<div class="gh-member-import-resultcontainer">
<div class="gh-member-import-result-summary">
<p>Your import is being processed, and youll receive a confirmation email as soon as its complete. Usually this only takes a few minutes, but larger imports may take longer.</p>
</div>
</div>
{{/if}}
{{#if (eq this.state 'COMPLETE')}}
<div class="gh-member-import-resultcontainer">
{{#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>
{{/if}}
{{#if this.importResponse.errorCount}}
{{#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|}}
<li>{{error.message}} ({{error.count}}) </li>
{{/each}}
</ul>
</div>
{{/if}}
</div>
{{/if}}
{{#if (eq this.state 'ERROR')}}
<div class="failed flex items-start gh-members-upload-errorcontainer error">
<div class="mr2">{{svg-jar "warning" class="nudge-top--2 w4 h4 fill-red"}}</div>
<p class="ma0 pa0">{{this.errorMessage}}</p>
</div>
{{/if}}
</div>
<div class="modal-footer modal-footer-spread">
{{#if (eq this.state 'INIT')}}
<button {{action "closeModal"}} class="gh-btn" data-test-button="close-import-members">
<span>Close</span>
</button>
<a
class="gh-btn"
href="https://static.ghost.org/v4.0.0/files/member-import-template.csv"
target="_blank"
>
<span>Download sample CSV file</span>
</a>
{{/if}}
{{#if (eq this.state 'MAPPING')}}
<button {{action "reset"}} class="gh-btn" data-test-button="restart-import-members">
<span>Start over</span>
</button>
<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}}
<span>Import members</span>
{{/if}}
</button>
{{/if}}
{{#if (eq this.state 'UPLOADING')}}
<button {{action "reset"}} class="gh-btn disabled" disabled="disabled" data-test-button="restart-import-members">
<span>Start over</span>
</button>
<button class="gh-btn gh-btn-green gh-btn-icon disabled" disabled="disabled" {{action "upload"}}>
<span>{{svg-jar "spinner" class="gh-icon-spinner"}} {{this.runningText}}Uploading</span>
</button>
{{/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">
<span>Download error file</span>
</a>
{{#if (eq this.importResponse.importedCount 0)}}
<button {{action "reset"}} class="gh-btn gh-btn-black" data-test-button="restart-import-members">
<span>Try again</span>
</button>
{{else}}
<button {{action "closeModal"}} class="gh-btn gh-btn-black" data-test-button="close-import-members">
<span>View members</span>
</button>
{{/if}}
{{else}}
{{#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-black" 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-black" data-test-button="close-import-members">
<span>View members</span>
</button>
{{/if}}
{{/if}}
{{/if}}
{{#if (eq this.state 'PROCESSING')}}
<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-black" data-test-button="close-import-members">
<span>Got it</span>
</button>
{{/if}}
{{#if (eq this.state 'ERROR')}}
<button {{action "reset"}} class="gh-btn" data-test-button="restart-import-members">
<span>Try again</span>
</button>
<button {{action "closeModal"}} class="gh-btn gh-btn-black" data-test-button="close-import-members">
<span>OK</span>
</button>
{{/if}}
</div>
</div>