Cart localstorage update

app/assets/v2/js/cart-data.js

@@ -11,18 +11,15 @@ class CartData {
   static cartContainsGrantWithId(grantId) {
     grantId = String(grantId);
     const cart = this.loadCart();
-    const idList = cart.map(grant => {
-      return grant.grant_id;
-    });
+    const idList = cart.map((grant) => String(grant.grant_id));
 
     return idList.includes(grantId);
   }
 
   static share_url(title) {
     const checkedOut = this.loadCheckedOut();
     const donations = (checkedOut.length > 0 ? checkedOut : this.loadCart());
-    let bulk_add_cart = 'https://gitcoin.co/grants/cart/bulk-add/';
-
+    let bulk_add_cart = `${window.location.host}/grants/cart/bulk-add/`;
     let network = document.web3network;
 
     if (!network) {
@@ -53,6 +50,10 @@ class CartData {
   }
 
   static addToCart(grantData, no_report) {
+    // Enforce that grant ID is a string, since currently grant IDs are stored as strings in the cart
+    grantData.grant_id = String(grantData.grant_id);
+
+    // Return if grant is already in cart
     if (this.cartContainsGrantWithId(grantData.grant_id)) {
       return;
     }
@@ -246,6 +247,74 @@ class CartData {
     applyCartMenuStyles();
   }
 
+  // Updates localStorage with the latest grant data from the backend and returns the new cart
+  static async updateCart() {
+    // Read cart data from local storage
+    const cartData = this.loadCart();
+
+    // Make sure no grants have empty currencies, and if so default to 0.001 ETH. This prevents cart
+    // from being stuck as 'loading' if a currency is empty
+    cartData.forEach((grant, index) => {
+      if (!grant.grant_donation_currency) {
+        cartData[index].grant_donation_currency = 'ETH';
+        cartData[index].grant_donation_amount = '0.001';
+      }
+    });
+
+    // Get list of all grant IDs and fetch updated grant data from backend
+    const grantIds = cartData.map((grant) => grant.grant_id);
+    const url = `${window.location.origin}/grants/v1/api/grants?pks=${grantIds.join(',')}`;
+    const response = await fetch(url);
+    const latestGrantsData = (await response.json()).grants;
+
+    // Update grant info with latest data
+    cartData.forEach((grant, index) => {
+      // Find the latestGrantsData entry with the same grant ID as this grant
+      const grantIndex = latestGrantsData.findIndex((item) => String(item.id) === String(grant.grant_id));
+      const latestGrantData = latestGrantsData[grantIndex];
+
+      // Update with the grant data from server
+      cartData[index].binance_payout_address = latestGrantData.binance_payout_address;
+      cartData[index].celo_payout_address = latestGrantData.celo_payout_address;
+      cartData[index].clr_round_num = latestGrantData.clr_round_num;
+      cartData[index].grant_admin_address = latestGrantData.admin_address;
+      cartData[index].grant_clr_prediction_curve = latestGrantData.clr_prediction_curve;
+      cartData[index].grant_contract_address = latestGrantData.contract_address;
+      cartData[index].grant_contract_version = latestGrantData.contract_version;
+      cartData[index].grant_donation_num_rounds = 1; // always 1, since recurring contributions are not supported
+      cartData[index].grant_id = String(latestGrantData.id); // IDs are saved as strings in localStorage, so we cast to string here
+      cartData[index].grant_image_css = latestGrantData.image_css;
+      cartData[index].grant_logo = latestGrantData.logo_url;
+      cartData[index].grant_slug = latestGrantData.slug;
+      cartData[index].grant_title = latestGrantData.title;
+      cartData[index].grant_token_address = latestGrantData.token_address;
+      cartData[index].grant_token_symbol = latestGrantData.token_symbol;
+      cartData[index].grant_url = latestGrantData.url;
+      cartData[index].harmony_payout_address = latestGrantData.harmony_payout_address;
+      cartData[index].is_clr_eligible = latestGrantData.is_clr_eligible;
+      cartData[index].is_on_team = latestGrantData.is_on_team;
+      cartData[index].kusama_payout_address = latestGrantData.kusama_payout_address;
+      cartData[index].polkadot_payout_address = latestGrantData.polkadot_payout_address;
+      cartData[index].rsk_payout_address = latestGrantData.rsk_payout_address;
+      cartData[index].tenants = latestGrantData.tenants;
+      cartData[index].zcash_payout_address = latestGrantData.zcash_payout_address;
+      cartData[index].zil_payout_address = latestGrantData.zil_payout_address;
+
+      // Other localStorage properties not updated above:
+      //   grant_donation_amount:     Existing localStorage value is preserved
+      //   grant_donation_clr_match:  Updated in cart.js `grantData` watcher
+      //   grant_donation_currency:   Existing localStorage value is preserved
+      //   payment_status:            Updated on-demand in cart.js `updatePaymentStatus()` method
+      //   token_local_id:            Existing localStorage value is preserved
+      //   txnid:                     Updated on-demand in cart.js `updatePaymentStatus()` method
+      //   uuid:                      TODO is this needed or can it be removed? Currently existing value is preserved
+    });
+
+    // Save the updated cart data to local storage and return it
+    this.setCart(cartData);
+    return cartData;
+  }
+
   static loadCheckedOut() {
     const checkedOutList = localStorage.getItem('contributions_were_successful');
 

app/assets/v2/js/cart.js

@@ -1322,44 +1322,12 @@ Vue.component('grants-cart', {
       token.name = token.symbol;
     });
 
-    // Read array of grants in cart from localStorage
-    const grantData = CartData.loadCart();
-
-    // Make sure none have empty currencies, and if they do default to 0.001 ETH. This is done
-    // to prevent the cart from getting stuck loading if a currency is empty
-    grantData.forEach((grant, index) => {
-      if (!grant.grant_donation_currency) {
-        grantData[index].grant_donation_currency = 'ETH';
-        grantData[index].grant_donation_amount = '0.001';
-      }
-    });
-    CartData.setCart(grantData);
-    this.grantData = grantData;
+    // Update then get cart data from localStorage
+    this.grantData = await CartData.updateCart();
 
     // Initialize array of empty comments
     this.comments = this.grantData.map(grant => undefined);
 
-    // Get list of all grant IDs and unique tokens in the cart
-    const grantIds = this.grantData.map(grant => grant.grant_id);
-
-    // Fetch updated CLR curves for all grants
-    const url = `${window.location.origin}/grants/v1/api/grants?pks=${grantIds.join(',')}`;
-    const response = await fetch(url);
-    const clrCurves = (await response.json()).grants;
-
-    // Update CLR curves
-    this.grantData.forEach((grant, index) => {
-      // Find the clrCurves entry with the same grant ID as this grant
-      const clrIndex = clrCurves.findIndex(item => {
-        return Number(item.id) === Number(grant.grant_id);
-      });
-
-      // Update grantData from server
-      this.$set(this.grantData[index], 'grant_clr_prediction_curve', clrCurves[clrIndex].clr_prediction_curve);
-      this.$set(this.grantData[index], 'is_on_team', clrCurves[clrIndex].is_on_team);
-
-    });
-
     // Wait until we can load token list
     let elapsedTime = 0;
     let delay = 50; // 50 ms debounce

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

@@ -534,7 +534,7 @@ if (document.getElementById('grants-showcase')) {
         this.bottom = this.scrollEnd();
       });
     },
-    mounted() {
+    async mounted() {
       let vm = this;
 
       this.fetchGrants(this.page);

app/grants/templates/grants/cart-vue.html

@@ -52,14 +52,14 @@
             <h1 class="text-left text-black mt-5 mb-3">Grants Cart</h1>
 
             {% comment %} Main container {% endcomment %}
-            <div v-if="grantData.length === 0" class="font-bigger-1 text-left grant-header-row">
-              Your cart is empty.
-            </div>
-
-            <div v-else-if="isLoading" class="text-center mb-5">
+            <div v-if="isLoading" class="text-center mb-5">
               <loading-screen class="my-5"></loading-screen>
               <div>Fetching cart data...</div>
             </div>
+
+            <div v-else-if="grantData.length === 0" class="font-bigger-1 text-left grant-header-row">
+              Your cart is empty.
+            </div>
 
             <div v-else class="m-auto" style="padding-bottom: 10rem;">
               <div>