Promise chaining in computed property not resolving

Ember Data
1

I have three models (product, store, and storeProduct). product and store are related through the storeProduct which has a discount rate applied to individual products in a store. I am trying to create a computed value of the total value of products in a store with the discount applied (see totalProductValue in //models/store).

However, in the store template when I output {{model.totalProductValue}} I get NaN. I ran it through the chrome debugger and found that

   let discount= storeProduct.get('discount');//undefined
   let price = storeProduct.get('product.price');//undefined

Any help is greatly appreciated

Full CODE:

//models/product.js
import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr(),
  brand: DS.attr(),
  price: DS.attr()
});

//models/storeProduct
import DS from 'ember-data';

export default DS.Model.extend({
 discountRate: DS.attr('number'),
 store: DS.belongsTo('store',{async:true}),
 product:DS.belongsTo('product,{async:true})

//models/store
import DS from 'ember-data';

export default DS.Model.extend({
 name: DS.attr('string'),
 address: DS.attr('string'),
 storeProducts: DS.hasMany('storeProduct',{async: true}),
 
 totalProductValue:function(){
  var storeProducts= this.get("storeProducts");
  return storeProducts.reduce(function(previousValue, storeProduct){
   let discount= storeProduct.get('discount');
   let price = storeProduct.get('product.price');
    return previousValue + (discount* price);
   }, 0);
  }.property('storeProducts.@each.product),`
2

Maybe your storeProduct.get('product.price') is returning a promise, try to resolve storeProduct.get('product') before using its price.

It will be a little tricky to do everything in the same reduce, though.