discourse-subscriptions/assets/javascripts/discourse/components/campaign-banner.hbs

{{#if this.shouldShow}}
  <div
    class="campaign-banner"
    style={{html-safe (concat "box-shadow: 5px 5px #" this.dropShadowColor)}}
  >
    <DButton @icon="times" @action={{this.dismissBanner}} class="close" />

    <div class="campaign-banner-info" style={{html-safe this.bannerInfoStyle}}>
      {{#if this.isGoalMet}}
        <h2 class="campaign-banner-info-header">
          {{i18n "discourse_subscriptions.campaign.success_title"}}
        </h2>

        <p class="campaign-banner-info-description">
          {{i18n "discourse_subscriptions.campaign.success_body"}}
        </p>
      {{else}}
        <h2 class="campaign-banner-info-header">
          {{i18n "discourse_subscriptions.campaign.title"}}
        </h2>

        <p class="campaign-banner-info-description">
          {{i18n "discourse_subscriptions.campaign.body"}}
        </p>

        {{#if this.product}}
          <LinkTo
            @route="subscribe.show"
            @model={{this.product}}
            @disabled={{this.product.subscribed}}
            class="btn btn-primary campaign-banner-info-button"
          >
            {{d-icon "far-heart"}}
            {{d-icon "heart" class="hover-heart"}}
            {{i18n "discourse_subscriptions.campaign.button"}}
          </LinkTo>
        {{else}}
          <LinkTo
            @route={{this.subscribeRoute}}
            class="btn btn-primary campaign-banner-info-button"
          >
            {{d-icon "far-heart"}}
            {{d-icon "heart" class="hover-heart"}}
            {{i18n "discourse_subscriptions.campaign.button"}}
          </LinkTo>
        {{/if}}
      {{/if}}
    </div>

    <div class="campaign-banner-progress">
      {{#if this.isGoalMet}}
        <div class="fireworks">
          <div class="before"></div>
          <div class="after"></div>
        </div>

        <div class="campaign-banner-progress-success"></div>

        {{#if this.subscriberGoal}}
          <p class="campaign-banner-progress-description">
            {{html-safe
              (i18n
                "discourse_subscriptions.campaign.goal_comparison"
                current=this.subscribers
                goal=this.goalTarget
              )
            }}
            {{i18n "discourse_subscriptions.campaign.subscribers"}}
          </p>
        {{else}}
          <p class="campaign-banner-progress-description">
            {{html-safe
              (i18n
                "discourse_subscriptions.campaign.goal_comparison"
                current=(format-currency this.currency this.amountRaised)
                goal=(format-currency this.currency this.goalTarget)
              )
            }}
            {{i18n "discourse_subscriptions.campaign.raised"}}
          </p>

          {{#if this.showContributors}}
            <ConditionalLoadingSpinner
              @condition={{this.loading}}
              @size="small"
            >
              <div class="campaign-banner-progress-users">
                <p class="campaign-banner-progress-users-title">
                  <strong>
                    {{i18n
                      "discourse_subscriptions.campaign.recent_contributors"
                    }}
                  </strong>
                </p>

                <div class="campaign-banner-progress-users-avatars">
                  {{#each this.contributors as |contributor|}}
                    {{avatar
                      contributor
                      avatarTemplatePath="avatar_template"
                      usernamePath="username"
                      namePath="name"
                      imageSize="small"
                    }}
                  {{/each}}
                </div>
              </div>
            </ConditionalLoadingSpinner>
          {{/if}}
        {{/if}}
      {{else}}
        {{#if this.subscriberGoal}}
          <progress
            class="campaign-banner-progress-bar"
            value={{this.subscribers}}
            max={{this.siteSettings.discourse_subscriptions_campaign_goal}}
          ></progress>

          <p class="campaign-banner-progress-description">
            {{html-safe
              (i18n
                "discourse_subscriptions.campaign.goal_comparison"
                current=this.subscribers
                goal=this.goalTarget
              )
            }}
            {{i18n "discourse_subscriptions.campaign.subscribers"}}
          </p>
        {{else}}
          <progress
            class="campaign-banner-progress-bar"
            value={{this.amountRaised}}
            max={{this.siteSettings.discourse_subscriptions_campaign_goal}}
          ></progress>

          <p class="campaign-banner-progress-description">
            {{html-safe
              (i18n
                "discourse_subscriptions.campaign.goal_comparison"
                current=(format-currency this.currency this.amountRaised)
                goal=(format-currency this.currency this.goalTarget)
              )
            }}
            {{i18n "discourse_subscriptions.campaign.raised"}}
          </p>
        {{/if}}

        {{#if this.showContributors}}
          <ConditionalLoadingSpinner @condition={{this.loading}} @size="small">
            <div class="campaign-banner-progress-users">
              <p class="campaign-banner-progress-users-title">
                <strong>
                  {{i18n
                    "discourse_subscriptions.campaign.recent_contributors"
                  }}
                </strong>
              </p>

              <div class="campaign-banner-progress-users-avatars">
                {{#each this.contributors as |contributor|}}
                  {{avatar
                    contributor
                    avatarTemplatePath="avatar_template"
                    usernamePath="username"
                    namePath="name"
                    imageSize="small"
                  }}
                {{/each}}
              </div>
            </div>
          </ConditionalLoadingSpinner>
        {{/if}}
      {{/if}}
    </div>
  </div>
{{/if}}