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

<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>
        <p class="gh-box gh-box-green">Need some help? <a href="https://ghost.org/help/import-members/" target="_blank" rel="noopener noreferrer">Learn more</a> about importing members or <a href="https://static.ghost.org/v4.0.0/files/member-import-template.csv" target="_blank" rel="noopener noreferrer">download a sample CSV file</a>.</p>
    {{/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">
            {{svg-jar "import-in-progress" class="gh-import-member-icon"}}
            <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 you’ll receive a confirmation email as soon as it’s 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">
        {{#if (eq this.state 'INIT')}}
            <button class="gh-btn" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
                <span>Close</span>
            </button>
        {{/if}}

        {{#if (eq this.state 'MAPPING')}}
            <button class="gh-btn" data-test-button="restart-import-members" type="button" {{action "reset"}}>
                <span>Start over</span>
            </button>
            <button class="gh-btn gh-btn-green {{unless this.mappingResult.membersCount "disabled"}}" type="button" {{action "upload"}} data-test-button="perform-import">
                {{#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 class="gh-btn disabled" disabled="disabled" data-test-button="restart-import-members" type="button" {{action "reset"}}>
                <span>Start over</span>
            </button>
            <button class="gh-btn gh-btn-green gh-btn-icon disabled" disabled="disabled" type="button" {{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="download-import-errors">
                    <span>Download error file</span>
                </a>
                {{#if (eq this.importResponse.importedCount 0)}}
                    <button class="gh-btn gh-btn-black" data-test-button="restart-import-members" type="button" {{action "reset"}}>
                        <span>Try again</span>
                    </button>
                {{else}}
                    <button class="gh-btn gh-btn-black" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
                        <span>View members</span>
                    </button>
                {{/if}}
            {{else}}
                {{#if (eq this.importResponse.importedCount 0)}}
                    <button class="gh-btn" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
                        <span>Close</span>
                    </button>
                    <button class="gh-btn gh-btn-black" data-test-button="restart-import-members" type="button" {{action "reset"}}>
                        <span>Try again</span>
                    </button>
                {{else}}
                    <button class="gh-btn" data-test-button="restart-import-members" type="button" {{action "reset"}}>
                        <span>Upload another file</span>
                    </button>
                    <button class="gh-btn gh-btn-black" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
                        <span>View members</span>
                    </button>
                {{/if}}
            {{/if}}
        {{/if}}

        {{#if (eq this.state 'PROCESSING')}}
            <button class="gh-btn" data-test-button="restart-import-members" type="button" {{action "reset"}}>
                <span>Upload another file</span>
            </button>
            <button class="gh-btn gh-btn-black" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
                <span>Got it</span>
            </button>
        {{/if}}

        {{#if (eq this.state 'ERROR')}}
            {{#if this.showTryAgainButton}}
                <button class="gh-btn" data-test-button="restart-import-members" type="button" {{action "reset"}}>
                    <span>Try again</span>
                </button>
            {{/if}}
            <button class="gh-btn gh-btn-black" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
                <span>OK</span>
            </button>
        {{/if}}
    </div>
</div>