nitro-web 0.0.29 → 0.0.31

package/components/billing/stripe.api.js

@@ -13,256 +13,258 @@ export default {
     'post   /api/stripe/create-billing-portal-session': ['isUser', 'billingPortalSessionCreate'],
     'get    /api/stripe/upcoming-invoices': ['isUser', 'upcomingInvoicesFind'],
   },
+  setup: setup,
+  stripeWebhook: stripeWebhook,
+  billingPortalSessionCreate: billingPortalSessionCreate,
+  upcomingInvoicesFind: upcomingInvoicesFind,
+}
 
-  setup: function (middleware, _config) {
-    // Set config values
-    config = {
-      env: _config.env,
-      clientUrl: _config.clientUrl,
-      stripeSecretKey: _config.stripeSecretKey,
-      stripeWebhookSecret: _config.stripeWebhookSecret,
-    }
-    for (let key in config) {
-      if (!config[key]) {
-        throw new Error(`Missing config value for stripe.api.js: ${key}`)
-      }
-    }
-    stripe = new Stripe(config.stripeSecretKey)
-  },
-
-  stripeWebhook: async function (req, res) {
-    try {
-      var event = config.env == 'development' ? req.body : stripe.webhooks.constructEvent(
-        req.rawBody,
-        req.rawHeaders['stripe-signature'],
-        config.stripeWebhookSecret
-      )
-    } catch (err) {
-      if (err && err.message) console.log(err.message)
-      else console.log(err)
-      return res.error(err)
+function setup(middleware, _config) {
+  // Set config values
+  config = {
+    env: _config.env,
+    clientUrl: _config.clientUrl,
+    stripeSecretKey: _config.stripeSecretKey,
+    stripeWebhookSecret: _config.stripeWebhookSecret,
+  }
+  for (let key in config) {
+    if (!config[key]) {
+      throw new Error(`Missing config value for stripe.api.js: ${key}`)
     }
+  }
+  stripe = new Stripe(config.stripeSecretKey)
+}
 
-    if (!event.data || !event.data.object) {
-      return res.status(400).send(`Missing webhook data: ${event}.`)
-    }
+async function stripeWebhook(req, res) {
+  try {
+    var event = config.env == 'development' ? req.body : stripe.webhooks.constructEvent(
+      req.rawBody,
+      req.rawHeaders['stripe-signature'],
+      config.stripeWebhookSecret
+    )
+  } catch (err) {
+    if (err && err.message) console.log(err.message)
+    else console.log(err)
+    return res.error(err)
+  }
 
-    // useful for cleaning failed webhooks
-    if (req.query.success) return true
-    // console.log('event.type: ', event.type)
+  if (!event.data || !event.data.object) {
+    return res.status(400).send(`Missing webhook data: ${event}.`)
+  }
 
-    // Stripe cannot guarantee event order
-    switch (event.type) {
-      case 'customer.subscription.created':
-      case 'customer.subscription.updated':
-      case 'customer.subscription.deleted':
-        // Subscriptions can be renewed which resurrects cancelled subscriptions.. ignore this
-        console.log('Event: ' + event.type)
-        this._webhookSubUpdated(req, res, event)
-        break
-      case 'customer.created': // customer created by subscribing
-      case 'customer.updated': // payment method changes
-        console.log('Event: ' + event.type)
-        this._webhookCustomerCreatedUpdated(req, res, event)
-        break
-      default:
-        res.status(400).send(`Unsupported type: ${event}.`)
-        break
-    }
-  },
+  // useful for cleaning failed webhooks
+  if (req.query.success) return true
+  // console.log('event.type: ', event.type)
 
-  billingPortalSessionCreate: async function (req, res) {
-    try {
-      if (!req.user.stripeCustomer?.id) {
-        throw new Error('No stripe customer found for the user')
-      }
-      const session = await stripe.billingPortal.sessions.create({
-        customer: req.user.stripeCustomer.id,
-        return_url: config.clientUrl + '/subscriptions',
-      })
-      res.json(session.url)
-    } catch (err) {
-      this._error(req, res, err)
-    }
-  },
+  // Stripe cannot guarantee event order
+  switch (event.type) {
+    case 'customer.subscription.created':
+    case 'customer.subscription.updated':
+    case 'customer.subscription.deleted':
+      // Subscriptions can be renewed which resurrects cancelled subscriptions.. ignore this
+      console.log('Event: ' + event.type)
+      webhookSubUpdated(req, res, event)
+      break
+    case 'customer.created': // customer created by subscribing
+    case 'customer.updated': // payment method changes
+      console.log('Event: ' + event.type)
+      webhookCustomerCreatedUpdated(req, res, event)
+      break
+    default:
+      res.status(400).send(`Unsupported type: ${event}.`)
+      break
+  }
+}
 
-  upcomingInvoicesFind: async function (req, res) {
-    try {
-      if (!req.user.stripeCustomer?.id) return res.json({})
-      const nextInvoice = await stripe.invoices.retrieveUpcoming({
-        customer: req.user.stripeCustomer.id,
-      })
-      res.json(nextInvoice)
-    } catch (err) {
-      if (err.code == 'invoice_upcoming_none') return res.json({})
-      this._error(req, res, err)
+async function billingPortalSessionCreate(req, res) {
+  try {
+    if (!req.user.stripeCustomer?.id) {
+      throw new Error('No stripe customer found for the user')
     }
-  },
-
-  /* Private webhook actions */
+    const session = await stripe.billingPortal.sessions.create({
+      customer: req.user.stripeCustomer.id,
+      return_url: config.clientUrl + '/subscriptions',
+    })
+    res.json(session.url)
+  } catch (err) {
+    error(req, res, err)
+  }
+}
 
-  _webhookCustomerCreatedUpdated: async function (req, res, event) {
-    try {
-      const customer = event.data.object
-      const user = await this._getUserFromEvent(event)
-      const customerExpanded = await stripe.customers.retrieve(
-        customer.id,
-        { expand: ['invoice_settings.default_payment_method'] }
-      )
-      await db.user.update({
-        query: user._id,
-        data: { stripeCustomer: customerExpanded },
-        blacklist: ['-stripeCustomer'],
-      })
-      res.json({})
-    } catch (err) {
-      console.log(err)
-      this._error(req, res, err)
-    }
-  },
+async function upcomingInvoicesFind(req, res) {
+  try {
+    if (!req.user.stripeCustomer?.id) return res.json({})
+    const nextInvoice = await stripe.invoices.retrieveUpcoming({
+      customer: req.user.stripeCustomer.id,
+    })
+    res.json(nextInvoice)
+  } catch (err) {
+    if (err.code == 'invoice_upcoming_none') return res.json({})
+    error(req, res, err)
+  }
+}
 
-  _webhookSubUpdated: async function (req, res, event) {
-    // Update the subscription on the company
-    try {
-      const subData = event.data.object
-       // webhook from deleting a company?
-      if (subData.cancellation_details.comment == 'company deleted') {
-        return res.json({})
-      }
+/* Private webhook actions */
 
-      const user = await this._getUserFromEvent(event)
-      if (!user.company) {
-        throw new Error(`Subscription user has no company to update the subscription (${subData.id}) onto`)
-      }
+async function webhookCustomerCreatedUpdated(req, res, event) {
+  try {
+    const customer = event.data.object
+    const user = await getUserFromEvent(event)
+    const customerExpanded = await stripe.customers.retrieve(
+      customer.id,
+      { expand: ['invoice_settings.default_payment_method'] }
+    )
+    await db.user.update({
+      query: user._id,
+      data: { stripeCustomer: customerExpanded },
+      blacklist: ['-stripeCustomer'],
+    })
+    res.json({})
+  } catch (err) {
+    console.log(err)
+    error(req, res, err)
+  }
+}
 
-      // Ignoring incomplete subscriptions
-      if (subData.status.match(/incomplete/)) {
-        return res.json({})
-      // Ignoring subscriptions without companyId (e.g. manual subscriptions)
-      } else if (!subData.metadata.companyId) {
-        return res.json({ ignoringManualSubscriptions: true })
-      // Ignoring old subscriptions
-      } else if (subData.created < (user.company.stripeSubscription?.created || 0)) {
-        return res.json({ ignoringOldSubscriptions: true })
-      }
-      
-      // Update company with the updated subscription and users
-      const sub = await stripe.subscriptions.retrieve(
-        subData.id,
-        { expand: ['latest_invoice.payment_intent'] }
-      )
-      await db.company.update({
-        query: user.company._id,
-        data: { stripeSubscription: sub, users: user.company.users },
-        blacklist: ['-stripeSubscription', '-users'],
-      })
-      
-      res.json({})
-    } catch (err) {
-      console.error(err)
-      this._error(req, res, err)
+async function webhookSubUpdated(req, res, event) {
+  // Update the subscription on the company
+  try {
+    const subData = event.data.object
+      // webhook from deleting a company?
+    if (subData.cancellation_details.comment == 'company deleted') {
+      return res.json({})
     }
-  },
-
-  /* Private */
 
-  _getUserFromEvent: async function (event) {
-    // User retreived from the event's customer. 
-    // The customer is created before the paymentIntent and subscriptionIntent is set up
-    let object = event.data.object
-    let customerId = object.object == 'customer'? object.id : object.customer
-    if (customerId) {
-      var user = await db.user.findOne({
-        query: { 'stripeCustomer.id': customerId },
-        populate: db.user.populate({}),
-        blacklist: false, // ['-company.users.inviteToken'],
-      })
+    const user = await getUserFromEvent(event)
+    if (!user.company) {
+      throw new Error(`Subscription user has no company to update the subscription (${subData.id}) onto`)
     }
-    if (!user) {
-      await db.log.insert({ data: {
-        date: Date.now(),
-        event: event.type,
-        message: `Cannot find user with id: ${customerId}.`,
-      }})
-      throw new Error(`Cannot find user with id: ${customerId}.`)
-    }
-    // populate company owner with user data (handy for _addSubscriptionBillingChange)
-    if (user.company?.users) {
-      user.company.users = user.company.users.map(o => {
-        if (o.role == 'owner' && o._id.toString() == user._id.toString()) {
-          o.firstName = user.firstName
-          o.name = user.name
-          o.email = user.email
-        }
-        return o
-      })
+
+    // Ignoring incomplete subscriptions
+    if (subData.status.match(/incomplete/)) {
+      return res.json({})
+    // Ignoring subscriptions without companyId (e.g. manual subscriptions)
+    } else if (!subData.metadata.companyId) {
+      return res.json({ ignoringManualSubscriptions: true })
+    // Ignoring old subscriptions
+    } else if (subData.created < (user.company.stripeSubscription?.created || 0)) {
+      return res.json({ ignoringOldSubscriptions: true })
     }
-    return user
-  },
+    
+    // Update company with the updated subscription and users
+    const sub = await stripe.subscriptions.retrieve(
+      subData.id,
+      { expand: ['latest_invoice.payment_intent'] }
+    )
+    await db.company.update({
+      query: user.company._id,
+      data: { stripeSubscription: sub, users: user.company.users },
+      blacklist: ['-stripeSubscription', '-users'],
+    })
+    
+    res.json({})
+  } catch (err) {
+    console.error(err)
+    error(req, res, err)
+  }
+}
 
-  _getProducts: async function () {
-    /**
-     * Returns all products and caches it on the app
-     * @returns {Array} products
-     */
-    try {
-      if (stripeProducts) return stripeProducts
-      if (!config.stripeSecretKey) {
-        stripeProducts = []
-        throw new Error('Missing process.env.stripeSecretKey for retrieving products')
+async function getUserFromEvent(event) {
+  // User retreived from the event's customer. 
+  // The customer is created before the paymentIntent and subscriptionIntent is set up
+  let object = event.data.object
+  let customerId = object.object == 'customer'? object.id : object.customer
+  if (customerId) {
+    var user = await db.user.findOne({
+      query: { 'stripeCustomer.id': customerId },
+      populate: db.user.populate({}),
+      blacklist: false, // ['-company.users.inviteToken'],
+    })
+  }
+  if (!user) {
+    await db.log.insert({ data: {
+      date: Date.now(),
+      event: event.type,
+      message: `Cannot find user with id: ${customerId}.`,
+    }})
+    throw new Error(`Cannot find user with id: ${customerId}.`)
+  }
+  // populate company owner with user data (handy for _addSubscriptionBillingChange)
+  if (user.company?.users) {
+    user.company.users = user.company.users.map(o => {
+      if (o.role == 'owner' && o._id.toString() == user._id.toString()) {
+        o.firstName = user.firstName
+        o.name = user.name
+        o.email = user.email
       }
+      return o
+    })
+  }
+  return user
+}
 
-      let products = (await stripe.products.list({ limit: 100, active: true })).data
-      let prices = (await stripe.prices.list({ limit: 100, active: true, expand: ['data.tiers'] })).data
-
-      return (stripeProducts = products.map((product) => ({
-        // remove default_price when new pricing is ready
-        ...util.pick(product, ['id', 'created', 'default_price', 'description', 'name', 'metadata']),
-        type: product.name.match(/housing/i) ? 'project' : 'subscription', // overwriting, was 'service'
-        prices: prices
-          .filter((price) => price.product == product.id)
-          .map((price) => ({
-            ...util.pick(price, ['id', 'product', 'nickname', 'recurring', 'unit_amount', 'tiers', 'tiers_mode']),
-            interval: price.recurring?.interval, // 'year', 'month', undefined
-          })),
-      })))
-    } catch (err) {
-      console.error(new Error(err)) // when stripe throws errors, the callstack is missing.
-      return []
+export async function getProducts() {
+  /**
+   * Returns all products and caches it on the app
+   * @returns {Array} products
+   */
+  try {
+    if (stripeProducts) return stripeProducts
+    if (!config.stripeSecretKey) {
+      stripeProducts = []
+      throw new Error('Missing process.env.stripeSecretKey for retrieving products')
     }
-  },
 
-  _createOrUpdateCustomer: async function (user, paymentMethod=null) {
-    /**
-     * Creates or updates a stripe customer and saves it to the user
-     * @param {Object} user - user
-     * @param {String} paymentMethod - stripe payment method id to save to the customer
-     * @called before paymentIntent and subscriptionIntent, and after completion with paymentMethod
-     * @returns mutates user
-     */
-    const data = {
-      email: user.email,
-      name: user.name,
-      address: { country: 'NZ' },
-      ...(!paymentMethod ? {} : { invoice_settings: { default_payment_method: paymentMethod }}),
-      expand: ['invoice_settings.default_payment_method', 'tax'], // expands card object
-    }
-    
-    if (user.stripeCustomer) var customer = await stripe.customers.update(user.stripeCustomer.id, data)
-    else customer = await stripe.customers.create({ ...data })
+    let products = (await stripe.products.list({ limit: 100, active: true })).data
+    let prices = (await stripe.prices.list({ limit: 100, active: true, expand: ['data.tiers'] })).data
 
-    user.stripeCustomer = customer
-    await db.user.update({
-      query: user._id,
-      data: { stripeCustomer: customer },
-      blacklist: ['-stripeCustomer'],
-    })
-  },
+    return (stripeProducts = products.map((product) => ({
+      // remove default_price when new pricing is ready
+      ...util.pick(product, ['id', 'created', 'default_price', 'description', 'name', 'metadata']),
+      type: product.name.match(/housing/i) ? 'project' : 'subscription', // overwriting, was 'service'
+      prices: prices
+        .filter((price) => price.product == product.id)
+        .map((price) => ({
+          ...util.pick(price, ['id', 'product', 'nickname', 'recurring', 'unit_amount', 'tiers', 'tiers_mode']),
+          interval: price.recurring?.interval, // 'year', 'month', undefined
+        })),
+    })))
+  } catch (err) {
+    console.error(new Error(err)) // when stripe throws errors, the callstack is missing.
+    return []
+  }
+}
 
-  _error: async function (req, res, err) {
-    if (err && err.response && err.response.body) console.log(err.response.body)
-    if (util.isString(err) && err.match(/Cannot find company with id/)) {
-      res.json({ user: 'no company found' })
-    } else res.error(err)
-  },
+// async function createOrUpdateCustomer(user, paymentMethod=null) {
+//   /**
+//    * Creates or updates a stripe customer and saves it to the user
+//    * @param {Object} user - user
+//    * @param {String} paymentMethod - stripe payment method id to save to the customer
+//    * @called before paymentIntent and subscriptionIntent, and after completion with paymentMethod
+//    * @returns mutates user
+//    */
+//   const data = {
+//     email: user.email,
+//     name: user.name,
+//     address: { country: 'NZ' },
+//     ...(!paymentMethod ? {} : { invoice_settings: { default_payment_method: paymentMethod }}),
+//     expand: ['invoice_settings.default_payment_method', 'tax'], // expands card object
+//   }
+  
+//   if (user.stripeCustomer) var customer = await stripe.customers.update(user.stripeCustomer.id, data)
+//   else customer = await stripe.customers.create({ ...data })
+
+//   user.stripeCustomer = customer
+//   await db.user.update({
+//     query: user._id,
+//     data: { stripeCustomer: customer },
+//     blacklist: ['-stripeCustomer'],
+//   })
+// }
+
+async function error(req, res, err) {
+  if (err && err.response && err.response.body) console.log(err.response.body)
+  if (util.isString(err) && err.match(/Cannot find company with id/)) {
+    res.json({ user: 'no company found' })
+  } else res.error(err)
 }

package/components/dashboard/dashboard.tsx

@@ -1,10 +1,11 @@
 import { css, theme } from 'twin.macro'
+import { injectedConfig } from 'nitro-web'
 
-export function Dashboard({ config }: { config: { isStatic?: boolean } }) {
+export function Dashboard() {
   const [store] = useTracked()
-  const textColor = store.apiAvailable ? 'text-green-700' : config.isStatic ? 'text-gray-700' : 'text-pink-700'
-  const fillColor = store.apiAvailable ? 'fill-green-500' : config.isStatic ? 'fill-gray-500' : 'fill-pink-500'
-  const bgColor = store.apiAvailable ? 'bg-green-100' : config.isStatic ? 'bg-[#eeeeee]' : 'bg-pink-100'
+  const textColor = store.apiAvailable ? 'text-green-700' : injectedConfig.isStatic ? 'text-gray-700' : 'text-pink-700'
+  const fillColor = store.apiAvailable ? 'fill-green-500' : injectedConfig.isStatic ? 'fill-gray-500' : 'fill-pink-500'
+  const bgColor = store.apiAvailable ? 'bg-green-100' : injectedConfig.isStatic ? 'bg-[#eeeeee]' : 'bg-pink-100'
 
   return (
     <div css={style}>
@@ -17,7 +18,7 @@ export function Dashboard({ config }: { config: { isStatic?: boolean } }) {
           <svg viewBox="0 0 6 6" aria-hidden="true" className={`size-1.5 ${fillColor}`}>
             <circle r={3} cx={3} cy={3} />
           </svg>
-          { store.apiAvailable ? 'API Available' : `API Unavailable${config.isStatic ? ' (Static Example)' : ''}` }
+          { store.apiAvailable ? 'API Available' : `API Unavailable${injectedConfig.isStatic ? ' (Static Example)' : ''}` }
         </span>
       </p>
     </div>

package/components/partials/styleguide.tsx

@@ -1,9 +1,8 @@
 import { Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, Modal, Calendar, injectedConfig } from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
 import { CheckIcon } from '@heroicons/react/20/solid'
-import { Config } from 'nitro-web/types'
 
-export function Styleguide({ config }: { config: Config }) {
+export function Styleguide() {
   const [customerSearch, setCustomerSearch] = useState('')
   const [showModal1, setShowModal1] = useState(false)
   const [state, setState] = useState({
@@ -167,7 +166,7 @@ export function Styleguide({ config }: { config: Config }) {
             name="country" 
             type="country" 
             state={state} 
-            options={useMemo(() => getCountryOptions(config.countries), [])} 
+            options={useMemo(() => getCountryOptions(injectedConfig.countries), [])} 
             onChange={onInputChange}
           />
         </div>
@@ -204,7 +203,7 @@ export function Styleguide({ config }: { config: Config }) {
           <Select 
             name="currency"
             state={state} 
-            options={useMemo(() => getCurrencyOptions(config.currencies), [])} 
+            options={useMemo(() => getCurrencyOptions(injectedConfig.currencies), [])} 
             onChange={onInputChange}
           />
         </div>
@@ -249,7 +248,8 @@ export function Styleguide({ config }: { config: Config }) {
         </div>
         <div>
           <label for="amount">Amount ({state.amount})</label>
-          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} config={config} />
+          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} 
+            config={injectedConfig} />
         </div>
       </div>
 
@@ -273,7 +273,7 @@ export function Styleguide({ config }: { config: Config }) {
       <div class="grid grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="avatar">Avatar</label>
-          <Drop class="is-small" name="avatar" state={state} onChange={onInputChange} awsUrl={config.awsUrl} />
+          <Drop class="is-small" name="avatar" state={state} onChange={onInputChange} awsUrl={injectedConfig.awsUrl} />
         </div>
         <div>
           <label for="calendar">Calendar</label>

package/components/settings/settings-business.tsx

@@ -4,9 +4,9 @@
 ////// look at the select type error below
 import * as util from 'nitro-web/util'
 import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
-import { Button, Field, Select, Topbar, Tabbar } from 'nitro-web'
+import { Button, Field, Select, Topbar, Tabbar, injectedConfig } from 'nitro-web'
 
-export function SettingsBusiness({ config }) {
+export function SettingsBusiness() {
   const isLoading = useState(false)
   const [{ user }, setStore] = sharedStore.useTracked()
   const [state, setState] = useState(() => {
@@ -64,7 +64,7 @@ export function SettingsBusiness({ config }) {
                 name="business.country" 
                 type="country" 
                 state={state} 
-                options={useMemo(() => util.getCountryOptions(config.countries), [])} 
+                options={useMemo(() => util.getCountryOptions(injectedConfig.countries), [])} 
                 onChange={onChange.bind(setState)}
               />
             </div>
@@ -74,7 +74,7 @@ export function SettingsBusiness({ config }) {
                 name="business.currency" 
                 type="country" 
                 state={state} 
-                options={useMemo(() => util.getCurrencyOptions(config.currencies), [])}
+                options={useMemo(() => util.getCurrencyOptions(injectedConfig.currencies), [])}
                 onChange={onChange.bind(setState)}
               />
             </div>

package/components/settings/settings-team--member.tsx

@@ -1,16 +1,14 @@
 // @ts-nocheck
 // todo: finish tailwind conversion
-import { Button, FormError, Field, Modal, Select } from 'nitro-web'
+import { Button, FormError, Field, Modal, Select, injectedConfig } from 'nitro-web'
 import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
-import { Config } from 'nitro-web/types'
 
 type SettingsTeamMemberProps = {
   showModal: boolean
   setShowModal: (showModal: boolean) => void
-  config?: Config
 }
 
-export function SettingsTeamMember ({ showModal, setShowModal, config }: SettingsTeamMemberProps) {
+export function SettingsTeamMember ({ showModal, setShowModal }: SettingsTeamMemberProps) {
   // @param {object} showModal - user
   const [{ user }] = sharedStore.useTracked()
   const [isLoading] = useState(false)
@@ -34,7 +32,7 @@ export function SettingsTeamMember ({ showModal, setShowModal, config }: Setting
     <Modal show={showModal} setShow={setShowModal} class="p-modal">
 
       <h2 class="h2"><em>Add</em> Team Member</h2>
-      <p class="subtitle">Invite a new team member to collaborate with you on {config?.name || 'Nitro'}.</p>
+      <p class="subtitle">Invite a new team member to collaborate with you on {injectedConfig?.name || 'Nitro'}.</p>
       
       <form class="form" onSubmit={onSubmit}>
         <div class="cols cols-6 cols-gap-2-5">
@@ -89,7 +87,7 @@ export function SettingsTeamMember ({ showModal, setShowModal, config }: Setting
             <Field 
               name="message" 
               type="textarea" 
-              placeholder={`${user.firstName} is inviting you to collaborate on ${config?.name || 'Nitro'}.`} 
+              placeholder={`${user.firstName} is inviting you to collaborate on ${injectedConfig?.name || 'Nitro'}.`} 
               state={state} onChange={onChange.bind(setState)} 
             />
           </div>

package/components/settings/settings-team.tsx

@@ -2,9 +2,9 @@
 // todo: finish tailwind conversion
 import * as util from 'nitro-web/util'
 import SvgPlus from 'nitro-web/client/imgs/icons/plus.svg'
-import { Button, Table, Avatar, Tabbar, Topbar, SettingsTeamMember } from 'nitro-web'
+import { Button, Table, Avatar, Tabbar, Topbar, SettingsTeamMember, injectedConfig } from 'nitro-web'
 
-export function SettingsTeam({ config }) {
+export function SettingsTeam() {
   const isLoading = useState(false)
   const [showModal, setShowModal] = useState()
   const [{ user }] = sharedStore.useTracked()
@@ -48,7 +48,7 @@ export function SettingsTeam({ config }) {
             key: user._id,
             name: (
               <>
-                <Avatar awsUrl={config.awsUrl} user={user} isRound={true} class="mt--1 mb--1" />
+                <Avatar awsUrl={injectedConfig.awsUrl} user={user} isRound={true} class="mt--1 mb--1" />
                 <b>{util.ucFirst(user.name)}</b>
                 {user.status != 'invited' && <span class="text-grey">(Invitation pending)</span>}
               </>