Ghost/ghost/admin/app/templates/integrations/firstpromoter.hbs

<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            <LinkTo @route="integrations" data-test-link="integrations-back">Integrations</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            FirstPromoter
        </h2>
        <section class="view-actions">
            <GhTaskButton @task={{this.save}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
        </section>
    </GhCanvasHeader>

    {{#if this.showLeaveSettingsModal}}
        <GhFullscreenModal @modal="leave-settings"
            @confirm={{action "leaveSettings"}}
            @close={{action "toggleLeaveSettingsModal"}}
            @modifier="action wide" />
    {{/if}}

    <section class="view-container">
        <section class="gh-main-section bt app-grid">
            <div class="gh-main-section-block app-detail-heading app-grid">
                <div class="app-cell">
                    <img class="app-icon" src="assets/img/firstpromoter.png" />
                </div>
                <div class="app-cell">
                    <h3>FirstPromoter</h3>
                    <p>Launch your own member referral program</p>
                </div>
            </div>
        </section>

        <div class="gh-main-section">
        <h4 class="gh-main-section-header small bn">FirstPromoter configuration</h4>
        <section class="gh-main-section-block">
            <div class="gh-main-section-content grey">
                <div>
                    <div class="gh-setting-first {{unless this.settings.firstpromoter "gh-setting-last"}}">
                        <div class="gh-setting-content">
                            <div class="gh-setting-title">Enable FirstPromoter</div>
                            <div class="gh-setting-desc mb0">Enable <a href="https://firstpromoter.com/?fpr=ghost&fp_sid=admin" target="_blank">FirstPromoter</a> for tracking referrals</div>
                        </div>
                        <div class="gh-setting-action">
                            <div class="for-checkbox">
                                <label for="firstpromoter" class="checkbox">
                                    <input
                                        type="checkbox"
                                        checked={{this.settings.firstpromoter}}
                                        id="firstpromoter"
                                        name="firstpromoter"
                                        onclick={{action "update" value="target.checked"}}
                                        data-test-firstpromoter-checkbox
                                    >
                                    <span class="input-toggle-component"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    {{#liquid-if this.settings.firstpromoter class=""}}
                    <div class="gh-setting-last gh-setting-firstpromoter-liquid">
                        <div class="gh-setting-content gh-setting-content--no-action">
                            <div class="gh-setting-title">FirstPromoter Account ID</div>
                            <div class="gh-setting-desc"> Affiliate and referral tracking, find your ID <a href="https://ghost.org/help/firstpromoter-id/">here</a></div>
                            <div class="gh-setting-content-extended">
                                <GhFormGroup @class="no-margin" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="firstpromoterId">
                                    <GhTextInput
                                        @placeholder="XXXXXXXX"
                                        @name="firstpromoter_id"
                                        @value={{this.settings.firstpromoterId}}
                                        @keyEvents={{hash
                                            Enter=(action "save")
                                        }}
                                    />
                                    <GhErrorMessage @errors={{this.settings.errors}} @property="firstpromoterId"/>
                                </GhFormGroup>
                            </div>
                        </div>
                    </div>
                    {{/liquid-if}}
                </div>
            </div>
        </section>
        </div>
    </section>
</section>