From 890279a95b19b69e6a95bdb9c133933fa5bce80a Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Tue, 13 Sep 2022 14:08:14 +0530
Subject: [PATCH] Added mock UI table for member source data

refs https://github.com/TryGhost/Team/issues/1891

- uses mock stats data to show UI for which sources are driving member signups/conversions
---
 .../dashboard/charts/attribution.hbs          | 42 +++++++++++++++++++
 .../dashboard/charts/attribution.js           | 25 +++++++++++
 ghost/admin/app/templates/dashboard.hbs       |  4 +-
 3 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 ghost/admin/app/components/dashboard/charts/attribution.hbs
 create mode 100644 ghost/admin/app/components/dashboard/charts/attribution.js

diff --git a/ghost/admin/app/components/dashboard/charts/attribution.hbs b/ghost/admin/app/components/dashboard/charts/attribution.hbs
new file mode 100644
index 0000000000..337a7c126d
--- /dev/null
+++ b/ghost/admin/app/components/dashboard/charts/attribution.hbs
@@ -0,0 +1,42 @@
+<section class="gh-dashboard-section gh-dashboard-recents">
+    <article class="gh-dashboard-box" {{did-insert this.loadData}}>
+        <div class="gh-dashboard-recents-posts gh-dashboard-list">
+            <div class="gh-dashboard-list-header">
+                <div class="gh-dashboard-list-title">Sources</div>
+                <div class="gh-dashboard-list-title">Free Signups</div>
+                <div class="gh-dashboard-list-title">Paid Conversions</div>
+            </div>
+            <div class="gh-dashboard-list-body">
+                {{#each this.sources as |sourceData|}}
+                    <div class="gh-dashboard-list-item">
+                        <div class="gh-dashboard-list-item-sub">
+                            <span class="gh-dashboard-list-text">{{sourceData.source}}</span>
+                        </div>
+                        <div class="gh-dashboard-list-item-sub">
+                            <span class="gh-dashboard-metric-minivalue">
+                                {{#if sourceData.freeSignups}}
+                                    {{format-number sourceData.freeSignups}}
+                                {{else}}
+                                    &mdash;
+                                {{/if}}
+                            </span>
+                        </div>
+                        <div class="gh-dashboard-list-item-sub">
+                           <span class="gh-dashboard-metric-minivalue">
+                                {{#if sourceData.paidConversions}}
+                                    {{format-number sourceData.paidConversions}}
+                                {{else}}
+                                    &mdash;
+                                {{/if}}
+                            </span>
+                        </div>
+                    </div>
+                {{else}}
+                    <div class="gh-dashboard-list-empty">
+                        <p>No sources.</p>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </article>
+</section>
diff --git a/ghost/admin/app/components/dashboard/charts/attribution.js b/ghost/admin/app/components/dashboard/charts/attribution.js
new file mode 100644
index 0000000000..4c314b41ba
--- /dev/null
+++ b/ghost/admin/app/components/dashboard/charts/attribution.js
@@ -0,0 +1,25 @@
+import Component from '@glimmer/component';
+import {action} from '@ember/object';
+import {inject as service} from '@ember/service';
+// import {tracked} from '@glimmer/tracking';
+
+export default class Recents extends Component {
+    @service dashboardStats;
+
+    @action
+    loadData() {
+        this.dashboardStats.loadMemberAttributionStats();
+    }
+
+    get sources() {
+        return this.dashboardStats?.membersAttributionSources90d || [];
+    }
+
+    get areMembersEnabled() {
+        return this.dashboardStats.siteStatus?.membersEnabled;
+    }
+
+    get areNewslettersEnabled() {
+        return this.dashboardStats.siteStatus?.newslettersEnabled;
+    }
+}
diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs
index cef5e121cd..a78dce241c 100644
--- a/ghost/admin/app/templates/dashboard.hbs
+++ b/ghost/admin/app/templates/dashboard.hbs
@@ -18,7 +18,9 @@
 
                     <div class="gh-dashboard-group {{if this.isTotalMembersZero 'is-zero'}}">
                         <Dashboard::Charts::Anchor />
-
+                        {{#if (feature 'sourceAttribution')}}
+                            <Dashboard::Charts::Attribution />
+                        {{/if}}
                         {{#if this.areNewslettersEnabled}}
                             <Dashboard::Charts::Engagement />
                         {{/if}}