Ghost/ghost/admin/app/templates/settings/integrations/firstpromoter.hbs
Kevin Ansfield 9fd87f565d Migrated <GhValidationStatusContainer> to {{validation-status}} modifier
no issue

- moved logic from `<GhValidationStatusContainer>` to a new `validation-status` modifier
  - removes a usage of the `ValidationState` mixin
  - migrated uses of the component to a mixin
  - paves the way for full removal of the `ValidationState` mixin in later refactors (mixins are deprecated)
- migrated `<GhFormGroup>` to a glimmer component
  - swapped the extend of `GhValidationStatusContainer` to usage of the `validation-status` modifier with a template-only component
  - updated all `<GhFormGroup>` to use the standard `class=""` instead of `@classNames=""` and `@class=""`
  - allows `data-test-*` attributes to be added to uses of `<FormGroup>` to help when complex components are grouped as a form input
2022-12-09 12:38:35 +00:00

86 lines
4.4 KiB
Handlebars

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header sticky">
<div class="flex flex-column">
<div class="gh-canvas-breadcrumb">
<LinkTo @route="settings">
Settings
</LinkTo>
{{svg-jar "arrow-right-small"}}
<LinkTo @route="settings.integrations" data-test-link="integrations-back">
Integrations
</LinkTo>
{{svg-jar "arrow-right-small"}} FirstPromoter
</div>
</div>
<section class="view-actions">
<GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
</section>
</GhCanvasHeader>
<section class="view-container">
<section class="gh-main-section 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" rel="noopener noreferrer">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>