Merge pull request #8527 from gitcoinco/gpg/contribution-trust-bonus

Trust bonus modal

app/assets/v2/js/grants/contribution-trust-bonus.js

@@ -0,0 +1,20 @@
+
+Vue.component('contribution-trust-bonus', {
+  delimiters: [ '[[', ']]' ],
+  data: function() {
+    return {
+      modalId: 'trust-bonus'
+    };
+  },
+  methods: {
+    show() {
+      this.$bvModal.show(this.modalId);
+    },
+    close() {
+      this.$bvModal.hide(this.modalId);
+    },
+    goToTrustBonus() {
+      document.location = '/profile/trust';
+    }
+  }
+});

app/assets/v2/js/grants/grant-thanks-modal.js

@@ -6,21 +6,7 @@ Vue.component('contribution-thanks-modal', {
       imgURL: '',
       numberOfContributions: 0,
       donations: [],
-      tweetUrl: '',
-      current_type: 'collections',
-      hideCollectionButtons: true,
-      collection: {
-        id: 0,
-        title: '',
-        description: '',
-        grants: [],
-        hideButtons: true,
-        owner: {
-          url: document.contxt.profile_url,
-          handle: document.contxt.github_handle,
-          avatar_url: '/dynamic/avatar/' + document.contxt.github_handle
-        }
-      }
+      tweetUrl: ''
     };
   },
   mounted: function() {
@@ -43,20 +29,11 @@ Vue.component('contribution-thanks-modal', {
     }
 
     this.donations = checkoutData;
-
-    this.collection.count = checkoutData.length;
-
-    this.collection.grants = checkoutData.map((grant) => {
-
-      return {...grant, logo: grant.grant_logo };
-    });
   },
   methods: {
-    showSingleCollection() {
-      return true;
-    },
     close() {
       this.$bvModal.hide(this.modalId);
+      this.$bvModal.show('trust-bonus');
     },
     handleHide() {
       CartData.clearCheckedOut();

app/assets/v2/js/grants/index.js

@@ -431,7 +431,7 @@ if (document.getElementById('grants-showcase')) {
         vm.grantsNumPages = getGrants.num_pages;
         vm.grantsHasNext = getGrants.has_next;
         vm.numGrants = getGrants.count;
-        vm.changeBanner()
+        vm.changeBanner();
 
         if (vm.grantsHasNext) {
           vm.page = ++vm.page;

app/grants/templates/grants/index.html

@@ -219,6 +219,7 @@
   <script src="{% static "v2/js/grants/_detail-component.js" %}"></script>
   <script src="{% static "v2/js/grants/funding.js" %}"></script>
   <script src="{% static "v2/js/grants/create-collection-modal.js" %}"></script>
+  <script src="{% static "v2/js/grants/contribution-trust-bonus.js" %}"></script>
   <script src="{% static "v2/js/grants/grant-thanks-modal.js" %}"></script>
   <script src="{% static "v2/js/grants/index.js" %}"></script>
 </body>

app/retail/templates/shared/contribution_trust_bonus.html

@@ -0,0 +1,54 @@
+{% comment %}
+    Copyright (C) 2019 Gitcoin Core
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+{% endcomment %}
+{% load i18n static %}
+<contribution-trust-bonus ref="trustBonus" inline-template>
+  <b-modal id="trust-bonus"
+    size="lg"
+    center
+    hide-header
+    hide-footer>
+      <div>
+        <div class="my-2 mx-3 row justify-content-end">
+            <b-button @click="close()" type="button" variant="white" class="close" data-dismiss="modal" aria-label="Close"></button>
+              <span aria-hidden="true">&times;</span>
+            </b-button>
+        </div>
+        <div class="mx-3 mx-md-5 pb-4">
+          <div class="d-inline-flex flex-column text-left text-md-center w-100">
+            <h3 class="mb-0 mb-md-5 d-flex-inline">Increase your QF matching by up to 25%</h3>
+            <div class="align-self-center d-flex mb-5 mb-md-0 row" width="35%" style="max-width: 728px;" style="background: url(), url({% static 'v2/images/grants/image.png' %});">
+              <img class="col-12 col-md-6 d-inline-flex" width="139px" src="{% static 'v2/images/grants/trust-bonus.png' %}" />
+              <img class="col-md-6 d-md-inline-flex d-none" width="139px" style="transform: scaleX(-1);" src="{% static 'v2/images/grants/trust-bonus.png' %}" />
+            </div>
+          </div>
+          <div class="mt-5 my-4">
+            <a>Increase your CLR Match Amount by verifying your profile with various services, and help Gitcoin be more sybil-resistant. Do this anytime before the end of the grants round to earn the match retroactively for all your contributions.</a>
+          </div>
+        </div>
+        <div class="mb-4 mt-2 px-1 d-flex justify-content-end">
+          <b-button
+            class="mt-2 col-md-4 col-sm-12 btn-primary"
+            variant="primary"
+            @click="goToTrustBonus()"
+          >
+            Verify Profile
+          </b-button>
+        </div>
+      </div>
+  </b-modal>
+</contribution-trust-bonus>

app/retail/templates/shared/grant_thanks_modal.html

@@ -17,62 +17,61 @@
 {% endcomment %}
 {% load i18n static %}
 <contribution-thanks-modal inline-template>
-  <b-modal id="contribution-thanks"
-    @hide="handleHide()"
-    size="lg"
-    center
-    hide-header
-    hide-footer>
-      <div>
-        <div class="my-2 mx-3 row justify-content-end">
-            <b-button @click="close()" type="button" variant="white" class="close" data-dismiss="modal" aria-label="Close"></button>
-              <span aria-hidden="true">&times;</span>
-            </b-button>
-        </div>
-        <div class="mx-3 mx-md-5 pb-4">
-          <div class="d-inline-flex flex-column-reverse flex-md-column text-left text-md-center">
-            <h3 class="mb-0 mb-md-5 d-flex-inline">Thank you for your contribution!</h3>
-            <!-- <img class="align-self-center d-flex-inline mb-5 mb-md-0" width="35%" style="max-width: 728px;" src="{% static "v2/images/grants/space-funding-woman.png" %}" /> -->
-            <div class="align-self-center d-flex-inline mb-5 mb-md-0 col-12 col-lg-6">
-              <img class="align-self-center d-flex-inline mb-5 mb-md-0" width="75%" style="max-width: 728px;" :src="imgURL" />
-              <!-- <grant-collection :collection="collection" v-on:collection:show="true" :small="false"></grant-collection> -->
-            </div>
+  <div>
+    <b-modal id="contribution-thanks"
+      @hide="handleHide()"
+      size="lg"
+      center
+      hide-header
+      hide-footer>
+        <div>
+          <div class="my-2 mx-3 row justify-content-end">
+              <b-button @click="close()" type="button" variant="white" class="close" data-dismiss="modal" aria-label="Close"></button>
+                <span aria-hidden="true">&times;</span>
+              </b-button>
           </div>
-          <div class="mt-5 my-4">
-
-            You've successfully contributed to [[numberOfContributions]] grants:
-          </div>
-          <hr />
-          <div>
-            <template v-for="donation in donations">
-              <div class="my-3">
-                <a :href="donation.grant_url" target="_blank">[[donation.grant_title]]</a><br />
-                [[donation.grant_donation_amount]] [[donation.grant_donation_currency]]
-                <span v-if="donation.grant_donation_clr_match > 0" class="text-success"> + [[donation.grant_donation_clr_match]] DAI matching</span>
+          <div class="mx-3 mx-md-5 pb-4">
+            <div class="d-inline-flex flex-column-reverse flex-md-column text-left text-md-center">
+              <h3 class="mb-0 mb-md-5 d-flex-inline">Thank you for your contribution!</h3>
+              <div class="align-self-center d-flex-inline mb-5 mb-md-0 col-12 col-lg-6">
+                <img class="align-self-center d-flex-inline mb-5 mb-md-0" width="75%" style="max-width: 728px;" :src="imgURL" />
               </div>
-            </template>
-          </div>
-          <hr />
-          <div class="mt-2 mb-4 px-1 row justify-content-end">
-            <b-button
-              class="mt-2 mx-2 col-md-4 col-sm-12"
-              variant="outline-primary"
-              @click="$refs.createCollection.fetchCollections()"
-            >
-              Save as Collection
-            </b-button>
-            <b-button
-              class="mt-2 mx-2 col-md-4 col-sm-12"
-              variant="primary"
-              :href="tweetUrl"
-            >
-              <i class="fab fa-twitter" aria-hidden="true"></i>
-              Share on Twitter
-            </b-button>
+            </div>
+            <div class="mt-5 my-4">
+              You've successfully contributed to [[numberOfContributions]] grants:
+            </div>
+            <hr />
+            <div>
+              <template v-for="donation in donations">
+                <div class="my-3">
+                  <a :href="donation.grant_url" target="_blank">[[donation.grant_title]]</a><br />
+                  [[donation.grant_donation_amount]] [[donation.grant_donation_currency]]
+                  <span v-if="donation.grant_donation_clr_match > 0" class="text-success"> + [[donation.grant_donation_clr_match]] DAI matching</span>
+                </div>
+              </template>
+            </div>
+            <hr />
+            <div class="mt-2 mb-4 px-1 row justify-content-end">
+              <b-button
+                class="mt-2 mx-2 col-md-4 col-sm-12"
+                variant="outline-primary"
+                @click="$refs.createCollection.fetchCollections()"
+              >
+                Save as Collection
+              </b-button>
+              <b-button
+                class="mt-2 mx-2 col-md-4 col-sm-12"
+                variant="primary"
+                :href="tweetUrl"
+              >
+                <i class="fab fa-twitter" aria-hidden="true"></i>
+                Share on Twitter
+              </b-button>
+            </div>
           </div>
+          {% include 'shared/create_collection_modal.html' %}
         </div>
-        {% include 'shared/create_collection_modal.html' %}
-      </div>
-  </b-modal>
+      </b-modal>
+      {% include 'shared/contribution_trust_bonus.html' %}
+  </div>
 </contribution-thanks-modal>
-