Ghost/ghost/admin/app/templates/components/gh-member-settings-form.hbs

<h4 class="midlightgrey f-small fw5 ttu">Basic info</h4>
<div class="pa5 pb0 pt4 br4 shadow-1 bg-grouped-table mt2 flex flex-column flex-row-ns items-start justify-between gh-tag-basic-settings-form">
    <div class="flex flex-column items-start mr8 w-100 w-50-ns">
        {{#gh-form-group errors=member.errors hasValidated=member.hasValidated property="name"}}
        <label for="member-name">Name</label>
        {{gh-text-input
                    id="member-name"
                    name="name"
                    value=(readonly scratchName)
                    tabindex="1"
                    input=(action (mut scratchName) value="target.value")
                    focus-out=(action 'setProperty' 'name' scratchName)}}
        {{gh-error-message errors=member.errors property="name"}}
        {{/gh-form-group}}

        {{#gh-form-group errors=member.errors hasValidated=member.hasValidated property="email"}}
        <label for="member-email">Email</label>
        {{gh-text-input
            disabled=true
            value=(readonly scratchEmail)
            id="member-email"
            name="email"
            tabindex="2"
            focus-out=(action 'setProperty' 'email' scratchEmail)
            input=(action (mut scratchEmail) value="target.value")}}
        {{/gh-form-group}}

    </div>
    <div class="mb6 mb0-ns w-100 w-50-ns">
        {{#gh-form-group errors=member.errors hasValidated=member.hasValidated property="note"}}
            <label for="member-note">Note</label>
            {{gh-textarea
                        id="member-note"
                        name="note"
                        class="gh-member-details-textarea"
                        tabindex="3"
                        value=(readonly scratchNote)
                        input=(action (mut scratchNote) value="target.value")
                        focus-out=(action 'setProperty' 'note' scratchNote)
                    }}
            {{gh-error-message errors=member.errors property="note"}}
            <p>Not visible to member. Maximum: <b>500</b> characters. You’ve used {{gh-count-down-characters scratchNote 500}}</p>
        {{/gh-form-group}}
    </div>
</div>

<h4 class="midlightgrey f-small fw5 ttu mt12">Stripe info</h4>

{{#if isLoading}}
    <div class="pa20 br4 shadow-1 bg-grouped-table mt2">
        <div class="flex justify-center flex-auto">
            <div class="gh-loading-spinner"> </div>
        </div>
    </div>
{{else}}
    {{#if subscriptions}}
        <div class="br4 shadow-1 bg-grouped-table mt2">
            {{#if hasMultipleSubscriptions}}
                <div class="pa2 flex flex-column flex-row-ns items-center justify-center f7 fw5 bg-whitegrey-l2 bb b--whitegrey br4 br--top">
                    {{svg-jar "info" class="gh-member-info-icon mr2 fill-darkgrey"}} Member has multiple Stripe subscriptions
                </div>
            {{/if}}
            {{#each subscriptions as |subscription|}}
                <section class="gh-member-stripe-info pa5 pb0 pt4 flex flex-column flex-row-ns items-start justify-between">
                    <div class="flex items-start w-100">
                        <div class="w-50 flex-auto mr8">
                            <h4 class="f8 fw6">Customer data</h4>
                            <table class="gh-member-stripe-table">
                                <tr>
                                    <td class="gh-member-stripe-label">Stripe customer ID</td>
                                    <td class="gh-member-stripe-data">
                                        <a href="https://dashboard.stripe.com/customers/{{subscription.customer.id}}" target="_blank" rel="noopener" data-tooltip="View on Stripe">
                                            {{subscription.customer.id}}
                                        </a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="gh-member-stripe-label">Name</td>
                                    <td class="gh-member-stripe-data">
                                        {{#if subscription.customer.name}}
                                            {{subscription.customer.name}}
                                        {{else}}
                                            <span class="midlightgrey-l2">No name</span>
                                        {{/if}}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="gh-member-stripe-label">Email</td>
                                    <td class="gh-member-stripe-data">
                                        {{#if subscription.customer.email}}
                                            {{subscription.customer.email}}
                                        {{else}}
                                            <span class="midlightgrey-l2">No email</span>
                                        {{/if}}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="gh-member-stripe-label">Customer since</td>
                                    <td class="gh-member-stripe-data">
                                        {{#if subscription.startDate}}
                                            {{subscription.startDate}}
                                        {{else}}
                                            <span class="midlightgrey-l2">No data</span>
                                        {{/if}}
                                    </td>
                                </tr>
                            </table>
                        </div>

                        <div class="w-50 flex-auto">
                            <h4 class="f8 fw6">Subscription data</h4>
                            <table class="gh-member-stripe-table">
                                <tr>
                                    <td class="gh-member-stripe-label">Plan</td>
                                    <td class="gh-member-stripe-data">{{subscription.plan.nickname}} <span class="midgrey">({{subscription.dollarAmount}} <span class="ttu">{{subscription.plan.currency}}</span>/{{subscription.plan.interval}})</span></td>
                                </tr>
                                <tr>
                                    <td class="gh-member-stripe-label">Current status</td>
                                    <td class="gh-member-stripe-data">{{subscription.status}}</td>
                                </tr>
                                <tr>
                                    <td class="gh-member-stripe-label">Next renewal date</td>
                                    <td class="gh-member-stripe-data">{{subscription.validUntil}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </section>
            {{/each}}
        </div>
    {{else}}
        <div class="pa20 br4 shadow-1 bg-grouped-table mt2">
            <p class="ma0 pa0 tc midgrey">Member doesn't have Stripe subscription</p>
        </div>
    {{/if}}
{{/if}}