store: [Circular] & stripeSubscription/isSubscriptionActive not updating in the store.

[andrewshrout]

Expected Behavior

When the subscription session ends, and the page is reloaded, I expect it to rerender, and I can now only cancel subscription. I also expect that upon finishing my checkout session, my local store should update and not just my user in mongo.

What actually happens StripeCard updates, stripeListofInvoices, and hasCardInformation updates. However, even if I log out, hit refresh, after checking out - it will not update my Billings page. Also store gets this infinite loop of [Circular]. Everything in the database however is correct!

MyApp.constructor
Store {
  isServer: true,
  currentUser: User {
    store: [Circular],
    _id: '5f6a387053ad584f0831254a',
    slug: 'andrew-shrout-1',
    email: '=====',
    displayName: 'Andrew Shrout',
    avatarUrl: 'https://lh4.googleusercontent.com/-H7jTmMGgT8s/AAAAAAAAAAI/AAAAAAAAAAA/AMZuuclJFQc-Ly1AJ0eOR68PHJPylEWPJA/photo.jpg',
    isSignedupViaGoogle: true,
    darkTheme: false,
    stripeSubscription: undefined,
    isSubscriptionActive: undefined,
    isPaymentFailed: undefined,
    stripeCard: {
      brand: 'visa',
      country: 'US',
      exp_month: 1,
      exp_year: 2022,
      funding: 'credit',
      last4: '4242'
    },
    hasCardInformation: true,
    stripeListOfInvoices: { object: 'list', data: [Array], has_more: false 
}
  },
  currentUrl: '/billing'

Other Context I've put all the TeamLeader stuff into user as there are no discussions or team leaders in my end product. I started from the "7-begin" and worked up until the Team stuff, and then implemented Stripe from chapter 9. I had originally attempted to "unwire" the end product in chapter 10 but it was ultimately too hard and embedded in the specific product you guys had built for me to understand.

I've been tracing the API, writing it to be functional and reading all the documentation for 2 days now but I can't figure out why the store won't update. My assumption is its in _app or something to do with the props not updating. I would appreciate any help.

https://github.com/andrewshrout/saas-book-course/tree/master/book/7-begin

[andrewshrout]

Are the values not observed by mobX because subscribeTeam would normally be a method for the Team class? If that's the case, would you just load stripe in the user class, call the fetchCheckoutSessionApi method -> and runInAction updating the user Store?

[tima101]

@andrewshrout I can look tomorrow at your code. A high level comment is that you removed Team data model and Team data store from your project but Stripe API infrastructure is integrated with both Team and User. In fact, Billing page's subscription status is per team, Team Leader purchases subscription per team.

I briefly looked at your code and I see one problem, publicFields on User data model are missing a few Stripe-related properties:

https://github.com/andrewshrout/saas-book-course/blob/37940267d0451a253ca628e3898936e17b327dfd/book/7-begin/api/server/models/User.ts#L275

Meaning API server does not send this data to APP server or APP browser.

I recommend, if feasible, to deviate into your product at Chapter 10.

Let me know if you want me to run your project after fixing above problem but since you made a lot of changes to book's code I can't promise much.

PS Good job on getting this far in the book!

[andrewshrout]

@tima101 thanks for looking it over! The public fields thing fixed everything for subscriptions. The only changes I really made were removing discussions / posts, putting all team leader subscription methods into user, and all team leader data typing/storages into user. It was mostly a copy-paste and slight renaming job.

The main reason I didn't deviate from Chapter 10 is there is a ton of refactoring the layout of the pages when things like the discussion collections are added, coupled with the balkanization of the models and stores. The second half of chapter 7 and the entirety of chapter 8 do major reworks of the site that aren't necessary for me. I'm primarily licensing one user to use my mapping tool which will pull data from my AWS. Then they can choose to do a limited number of exports of the formatted data if they choose depending on their subscription level. Now that I understand it a little bit better, maybe I can give it a shot at re-writing 10-end.

Any advice on this

 currentUser: User {
    store: [Circular],
    ...

thing? From reading various github issues / SO, I can figure out that I'm injecting my store into itself somewhere. I would imagine that would cause problems in deployment.

[tima101]

@andrewshrout I can look at code if you move your question into separate new issue but can't promise solution since this is outside of the book's scope. If you decide to create new issue, please rename this one and close it. Thanks.