@mx-cartographer/experiences 4.0.13 → 4.0.14-alpha.JB1

package/src/categories/stores/CategoryStore.ts

@@ -0,0 +1,184 @@
+import { makeAutoObservable, runInAction } from 'mobx'
+import { getUnixTime } from 'date-fns/getUnixTime'
+import { subMonths } from 'date-fns/subMonths'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { endOfMonth } from 'date-fns/endOfMonth'
+
+import { Account, CategoryApi, CategoryGuids, CategoryGuidToName } from '../../common'
+
+import type {
+  Category,
+  DetailedCategory,
+  DateRangeCategoryTotals,
+  GlobalStore,
+  MonthlyCategoryTotals,
+} from '../../common'
+
+import { augmentCategories } from '../util/CategoryUtil'
+import { UiStore } from './UiStore'
+
+export class CategoryStore {
+  api = new CategoryApi('/', '')
+  globalStore: GlobalStore
+  uiStore: UiStore
+
+  categories: Category[] = []
+  dateRangeCategoryTotals: DateRangeCategoryTotals[] = []
+  monthlyCategoryTotals: MonthlyCategoryTotals[] = []
+
+  isLoadingCategoryTotals = false
+
+  constructor(globalStore: GlobalStore) {
+    this.globalStore = globalStore
+    this.uiStore = new UiStore()
+
+    makeAutoObservable(this)
+  }
+
+  initialize = async (endpoint: string, token: string) => {
+    this.api = new CategoryApi(endpoint, token)
+
+    await this.loadCategories()
+  }
+
+  get detailedCategories(): DetailedCategory[] {
+    return augmentCategories(
+      this.categories,
+      this.dateRangeCategoryTotals,
+      this.monthlyCategoryTotals,
+    )
+  }
+
+  get incomeCategories(): DetailedCategory[] {
+    return this.detailedCategories.filter((c) => c.is_income)
+  }
+
+  get spendCategories(): DetailedCategory[] {
+    return this.detailedCategories.filter(
+      (c) => !c.is_income && !c.isTransfer && c.guid !== CategoryGuids.INVESTMENTS,
+    )
+  }
+
+  get transferCategories(): DetailedCategory[] {
+    return this.detailedCategories.filter((c) => c.isTransfer)
+  }
+
+  addCategory = async (name: string, parentGuid: string) => {
+    const category = { name, parent_guid: parentGuid } as Category
+
+    try {
+      await this.api.addCategory(category)
+      await this.loadCategories()
+    } catch (error) {
+      console.error(`Error occurred while adding category: ${error}`)
+    }
+  }
+
+  loadCategories = async () => {
+    try {
+      const categories = await this.api.getCategories()
+      const { default_categories } = this.globalStore.copyStore.copy.categories
+
+      runInAction(() => {
+        this.categories = categories.map((category: Category) => ({
+          ...category,
+          name: default_categories[category.guid]
+            ? default_categories[category.guid].replace(/&/g, '&')
+            : category.name,
+        }))
+      })
+    } catch (error) {
+      console.error(`Error occurred while getting categories: ${error}`)
+    }
+  }
+
+  loadDateRangeCategoryTotals = async (accounts: Account[], startDate: Date, endDate: Date) => {
+    this.setIsLoadingCategoryTotals(true)
+    try {
+      const totals = await this.api.getDateRangeCategoryTotals(
+        getUnixTime(startDate),
+        getUnixTime(endDate),
+        accounts,
+      )
+      runInAction(() => {
+        this.dateRangeCategoryTotals = totals
+        this.setIsLoadingCategoryTotals(false)
+      })
+    } catch (error) {
+      this.setIsLoadingCategoryTotals(false)
+      console.error(`Error occurred while getting date range category totals: ${error}`)
+    }
+  }
+
+  loadMonthlyCategoryTotals = async (
+    accounts: Account[] = this.globalStore.accountStore.accounts,
+    startDate?: Date,
+    endDate?: Date,
+  ) => {
+    const start = getUnixTime(startOfMonth(startDate ?? subMonths(new Date(), 11)))
+    const end = getUnixTime(endOfMonth(endDate ?? new Date()))
+
+    try {
+      const totals = await this.api.getMonthlyCategoryTotals(start, end, accounts)
+
+      runInAction(() => {
+        this.monthlyCategoryTotals = totals
+      })
+    } catch (error) {
+      console.error(`Error occurred while getting monthly category totals: ${error}`)
+    }
+  }
+
+  reloadCategoryTotals = async (accounts: Account[], startDate: Date, endDate: Date) => {
+    this.setIsLoadingCategoryTotals(true)
+    try {
+      const dateRangeTotals = await this.api.getDateRangeCategoryTotals(
+        getUnixTime(startDate),
+        getUnixTime(endDate),
+        accounts,
+      )
+
+      const monthlyTotals = await this.api.getMonthlyCategoryTotals(
+        getUnixTime(startOfMonth(subMonths(endDate, 11))),
+        getUnixTime(endOfMonth(endDate)),
+        accounts,
+      )
+
+      runInAction(() => {
+        this.dateRangeCategoryTotals = dateRangeTotals
+        this.monthlyCategoryTotals = monthlyTotals
+        this.setIsLoadingCategoryTotals(false)
+      })
+    } catch (error) {
+      console.error(`Error occurred while getting category totals: ${error}`)
+    }
+  }
+
+  removeCategory = async (guid: string) => {
+    try {
+      await this.api.removeCategory(guid)
+      await this.loadCategories()
+    } catch (error) {
+      console.error(`Error occurred while removing category: ${error}`)
+    }
+  }
+
+  setIsLoadingCategoryTotals = (isLoading: boolean) => {
+    this.isLoadingCategoryTotals = isLoading
+  }
+
+  updateCategory = async (category: Category) => {
+    try {
+      await this.api.updateCategory(category)
+      await this.loadCategories()
+    } catch (error) {
+      console.error(`Error occurred while updating category: ${error}`)
+    }
+  }
+
+  // TODO: Remove this after refactoring Trends components to use detailedCategories
+  getCategoryName = (guid: string) => {
+    const category = this.categories.find((c) => c.guid === guid)
+    return category?.name ?? CategoryGuidToName[guid]
+  }
+}

package/src/categories/stores/UiStore.ts

@@ -0,0 +1,36 @@
+import { makeAutoObservable } from 'mobx'
+
+export class UiStore {
+  expandedGuid: string | null = null
+  selectedGuid: string | null = null
+  searchValue = ''
+  showSelected = true
+  shouldDisableDrawerScroll = false
+  unselectable: string[] = []
+  unselectableText = ''
+
+  savedOnSelect: any // todo
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  setExpandedGuid = (guid: string | null) => (this.expandedGuid = guid)
+
+  setSelectedGuid = (guid: string | null) => (this.selectedGuid = guid)
+
+  setSearchValue = (value: string) => (this.searchValue = value)
+
+  setShouldDisableDrawerScroll = (shouldDisable: boolean) =>
+    (this.shouldDisableDrawerScroll = shouldDisable)
+
+  setShowSelected = (showSelected: boolean) => (this.showSelected = showSelected)
+
+  setUnselectable = (unselectable: string[]) => (this.unselectable = unselectable)
+
+  setUnselectableText = (text: string) => (this.unselectableText = text)
+
+  onSelect = (guid: string) => this.savedOnSelect(guid)
+
+  setOnSelect = (callback: any) => (this.savedOnSelect = callback)
+}

package/src/categories/stores/__tests__/CategoryStore.test.ts

@@ -0,0 +1,54 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { endOfMonth } from 'date-fns/endOfMonth'
+
+import { GlobalStore } from '../../../common'
+
+describe('Testing the CategoryStore', () => {
+  let globalStore: GlobalStore
+
+  beforeEach(() => {
+    globalStore = new GlobalStore()
+  })
+
+  describe('augmentCategories()', () => {
+    it('successfully sets detailedCategories to state', async () => {
+      const { accountStore, categoryStore, copyStore } = globalStore
+
+      expect(categoryStore.detailedCategories).toHaveLength(0)
+      await copyStore.initialize('/', '')
+      await categoryStore.initialize('/', '')
+      await categoryStore.loadDateRangeCategoryTotals(
+        accountStore.accounts,
+        startOfMonth(new Date()),
+        endOfMonth(new Date()),
+      )
+      await categoryStore.loadMonthlyCategoryTotals()
+
+      // There are 21 top level categories
+      expect(categoryStore.detailedCategories).toHaveLength(21)
+
+      expect(categoryStore.incomeCategories).toHaveLength(1)
+      expect(categoryStore.spendCategories).toHaveLength(18)
+      expect(categoryStore.transferCategories).toHaveLength(1)
+    })
+  })
+
+  describe('loadCategories()', () => {
+    it('successfully sets localized categories to state', async () => {
+      const { categoryStore, copyStore } = globalStore
+
+      await copyStore.initialize('/', '')
+      await categoryStore.initialize('/', '')
+
+      // There are 119 total categories
+      expect(categoryStore.categories).toHaveLength(119)
+
+      const categoryNameWithAmpersandHTMLCode = categoryStore.categories.find(
+        (category) => category.guid === 'CAT-7829f71c-2e8c-afa5-2f55-fa3634b89874',
+      )
+
+      expect(categoryNameWithAmpersandHTMLCode?.name.includes('&')).toBeTruthy()
+    })
+  })
+})

package/src/categories/util/CategoryUtil.ts

@@ -0,0 +1,136 @@
+import { format } from 'date-fns/format'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+import { subMonths } from 'date-fns/subMonths'
+
+import {
+  type Category,
+  type DateRangeCategoryTotals,
+  type DetailedCategory,
+  type MonthlyAmount,
+  type MonthlyCategoryTotals,
+  CategoryColors,
+  CategoryGuids,
+  CategoryIcon,
+  DATE_FORMATS_INTL,
+  formatDate,
+} from '../../common'
+
+const MONTHLY_AVERAGE_LENGTH = 3
+const MONTHS_OF_HISTORY = 12
+
+/**
+ * Augment categories
+ * @param categories - Categories to augment
+ * @param monthlyCategoryTotals - Monthly category totals
+ * @param currentCategoryTotals - Current month category totals
+ */
+export const augmentCategories = (
+  categories: Category[],
+  currentCategoryTotals: DateRangeCategoryTotals[],
+  monthlyCategoryTotals: MonthlyCategoryTotals[],
+): DetailedCategory[] => {
+  return categories
+    .filter((category) => !category.parent_guid)
+    .map((category) =>
+      getDetailedCategory(
+        category,
+        currentCategoryTotals,
+        monthlyCategoryTotals,
+        categories.filter((c) => c.parent_guid === category.guid),
+      ),
+    )
+}
+
+/**
+ * Get an augmented category with additional details
+ * @param category - The category to augment
+ * @param currentCategoryTotals - Current month category totals
+ * @param monthlyCategoryTotals - Past monthly category totals
+ * @param subCategories - Subcategories for the specified category (If applicable)
+ */
+const getDetailedCategory = (
+  category: Category,
+  currentCategoryTotals: DateRangeCategoryTotals[],
+  monthlyCategoryTotals: MonthlyCategoryTotals[],
+  subCategories: Category[] = [],
+): DetailedCategory => {
+  const guid = category.guid
+  const parentGuid = category.parent_guid || guid
+  const isParent = guid === parentGuid
+
+  const currentAmount = currentCategoryTotals.find((t) => t.category_guid === guid)?.total || 0
+  const monthlyAmounts = getMonthlyAmounts(
+    monthlyCategoryTotals.filter((total) => total.category_guid === guid),
+  )
+  const totalMonthlyAmounts = getMonthlyAmounts(
+    monthlyCategoryTotals.filter(
+      (total) => total.category_guid === guid || total.top_level_category_guid === guid,
+    ),
+  )
+  const detailedSubCategories = subCategories.map((subCategory) =>
+    getDetailedCategory(subCategory, currentCategoryTotals, monthlyCategoryTotals),
+  )
+  const totalAmount = detailedSubCategories.reduce(
+    (total, current) => total + current.currentAmount,
+    currentAmount,
+  )
+
+  return {
+    ...category,
+    currentAmount,
+    averageAmount: getAverage(monthlyAmounts),
+    color: CategoryColors[parentGuid],
+    icon: CategoryIcon[parentGuid],
+    isTransfer: parentGuid === CategoryGuids.TRANSFER,
+    monthlyAmounts,
+    subCategories: detailedSubCategories,
+    totalAmount: isParent ? totalAmount : 0,
+    totalAverageAmount: getAverage(totalMonthlyAmounts),
+    totalMonthlyAmounts: isParent ? totalMonthlyAmounts : [],
+  }
+}
+
+/**
+ * Get the average amount based on the number of months (numMonths) requested
+ * @param monthlyAmounts - Monthly amounts to calculate and average from
+ * @param numMonths - Number of months to base the average on (DEFAULT: 3)
+ */
+const getAverage = (
+  monthlyAmounts: MonthlyAmount[],
+  numMonths: number = MONTHLY_AVERAGE_LENGTH,
+): number => {
+  const monthsBack = numMonths > history.length ? history.length : numMonths
+
+  return Math.ceil(
+    Math.max(
+      0,
+      monthlyAmounts.slice(-monthsBack).reduce((total, current) => total + current.amount, 0) /
+        monthsBack,
+    ),
+  )
+}
+
+/**
+ * Get the last 12 months of amounts for a category
+ * @param categoryTotals - Monthly category totals
+ */
+const getMonthlyAmounts = (categoryTotals: MonthlyCategoryTotals[]): MonthlyAmount[] => {
+  const monthlyAmounts: MonthlyAmount[] = []
+  const today = startOfToday()
+  for (let i = 0; i <= MONTHS_OF_HISTORY; i++) {
+    const historyDate = startOfMonth(subMonths(today, MONTHS_OF_HISTORY - i))
+    const monthlyTotals = categoryTotals.filter(
+      (total) => total.year_month === Number(format(historyDate, 'yyyyMM')),
+    )
+    const totalAmount = monthlyTotals.reduce((acc, curr) => acc + curr.total, 0)
+
+    monthlyAmounts.push({
+      amount: totalAmount,
+      isoDate: format(historyDate, 'yyyy-MM-dd'),
+      label: formatDate(historyDate, DATE_FORMATS_INTL.MONTH_YEAR),
+    })
+  }
+
+  return monthlyAmounts
+}

package/src/common/api/AnalyticsApi.ts

@@ -0,0 +1,49 @@
+import Bowser from 'bowser'
+
+import { Fetch } from '../utils'
+
+import { ApiEndpoints } from '../constants'
+import { AnalyticsEvent } from '../types'
+
+export class AnalyticsApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  initializeAnalyticsSession = async (version: string, featureName?: string) => {
+    const browser = Bowser.getParser(window.navigator.userAgent)
+
+    const { analytics_session } = await this.fetchInstance.post(ApiEndpoints.ANALYTICS_SESSION, {
+      browser_name: browser.getBrowserName() || 'Unknown',
+      browser_version: browser.getBrowserVersion() || '0.0.0',
+      is_first_visit: false,
+      product_name: 'Individual Widget',
+      product_version: version,
+    })
+    if (!analytics_session) {
+      return { analytics_session: null }
+    }
+    this.fetchInstance.post(ApiEndpoints.ANALYTICS_FEATURE_VISITS, {
+      feature_visit: {
+        analytics_session_guid: analytics_session.guid,
+        feature_name: featureName ? featureName : 'Experiences',
+        is_first_visit: analytics_session.is_first_visit,
+      },
+    })
+    return { analytics_session }
+  }
+
+  sendAnalyticEvent = async (event: AnalyticsEvent) => {
+    return this.fetchInstance.post(ApiEndpoints.ANALYTICS_EVENTS, event).catch((err) => {
+      throw err
+    })
+  }
+
+  sendAnalyticsPageview = async (event: any) => {
+    return this.fetchInstance.post(ApiEndpoints.ANALYTICS_PAGEVIEWS, event).catch((err) => {
+      throw err
+    })
+  }
+}

package/src/common/api/BeatApi.ts

@@ -0,0 +1,32 @@
+import Fetch from '../utils/Fetch'
+
+import { ApiEndpoints } from '../constants'
+
+import type { Beat } from '../types'
+
+export class BeatApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  getBeats = async (pageNum?: number, perPage?: number) => {
+    const beatParams = `page=${pageNum ? pageNum : 1}&per_page=${perPage ? perPage : 5}`
+
+    return this.fetchInstance.get(`${ApiEndpoints.BEATS}?${beatParams}`).then((data) => data.beats)
+  }
+
+  getBeatsWithAssociatedTransaction = async (fromDate?: string) => {
+    let beatParams = 'has_associated_transaction_guid=true'
+    beatParams += fromDate ? `&from_date=${fromDate}` : ''
+
+    return this.fetchInstance.get(`${ApiEndpoints.BEATS}?${beatParams}`).then((data) => data.beats)
+  }
+
+  updateBeat = async (beat: Beat) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.BEATS}/${beat.guid}`, beat)
+      .then((data) => data.beat)
+  }
+}

package/src/common/api/CategoryApi.ts

@@ -0,0 +1,52 @@
+import Fetch from '../utils/Fetch'
+
+import { ApiEndpoints } from '../constants/ApiEndpoints'
+
+import type { Account } from '../types/Account'
+import type { Category } from '../types/Category'
+
+export class CategoryApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  addCategory = async (category: Category) => {
+    return this.fetchInstance.post(ApiEndpoints.CATEGORIES, category).then((data) => data.category)
+  }
+
+  getCategories = async () => {
+    return this.fetchInstance.get(ApiEndpoints.CATEGORIES).then((data) => data.categories)
+  }
+
+  getDateRangeCategoryTotals = async (startDate: number, endDate: number, accounts: Account[]) => {
+    return this.fetchInstance
+      .post(`${ApiEndpoints.DATE_RANGE_CATEGORY_TOTALS}/from/${startDate}/to/${endDate}`, {
+        account_guid: accounts.map((account) => account.guid),
+      })
+      .then((data) => data.date_range_category_totals)
+  }
+
+  getMonthlyCategoryTotals = async (startDate: number, endDate: number, accounts?: Account[]) => {
+    return accounts
+      ? this.fetchInstance
+          .post(`${ApiEndpoints.MONTHLY_CATEGORY_TOTALS}/from/${startDate}/to/${endDate}`, {
+            account_guid: accounts.length === 0 ? [''] : accounts.map((account) => account.guid),
+          })
+          .then((data) => data.monthly_category_totals)
+      : this.fetchInstance
+          .get(`${ApiEndpoints.MONTHLY_CATEGORY_TOTALS}/from/${startDate}/to/${endDate}`)
+          .then((data) => data.monthly_category_totals)
+  }
+
+  removeCategory = async (guid: string) => {
+    return this.fetchInstance.delete(`${ApiEndpoints.CATEGORIES}/${guid}`)
+  }
+
+  updateCategory = async (category: Category) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.CATEGORIES}/${category.guid}`, category)
+      .then((data) => data.category)
+  }
+}

package/src/common/api/GlobalCopyApi.ts

@@ -0,0 +1,17 @@
+import Fetch from '../utils/Fetch'
+
+import { ApiEndpoints } from '../constants/ApiEndpoints'
+
+export class GlobalCopyApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  getGlobalCopy = async (namespace: string, translationKey: string) => {
+    return this.fetchInstance
+      .post(`${ApiEndpoints.LOCALIZED_CONTENT}/${namespace}`, { translation_key: translationKey })
+      .then((data) => data)
+  }
+}

package/src/common/api/LocalizedCopyApi.ts

@@ -0,0 +1,21 @@
+import Fetch from '../utils/Fetch'
+
+import { ApiEndpoints } from '../constants/ApiEndpoints'
+
+export class LocalizedCopyApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  getLocalizedCopy = async (req: any) => {
+    return this.fetchInstance.post(ApiEndpoints.LOCALIZED_COPY, req).then((data) => data)
+  }
+
+  getLocalizedContent = async (namespace: string) => {
+    return this.fetchInstance
+      .post(`${ApiEndpoints.LOCALIZED_CONTENT}/${namespace}`)
+      .then((data) => data)
+  }
+}

package/src/common/api/NotificationApi.ts

@@ -0,0 +1,40 @@
+import Fetch from '../utils/Fetch'
+
+import { ApiEndpoints } from '../constants'
+
+import type { Notification } from '../types'
+
+export class NotificationApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  getNotifications = () => {
+    return this.fetchInstance
+      .get(ApiEndpoints.NOTIFICATIONS)
+      .then((data) =>
+        data.notifications.map((obj: { notification: Notification }) => obj.notification),
+      )
+      .finally()
+  }
+
+  updateNotification = (notification: Notification) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.NOTIFICATIONS}/${notification.guid}`, {
+        guid: notification.guid,
+        has_been_viewed: notification.has_been_viewed,
+      })
+      .then((data) => data.notification)
+      .finally()
+  }
+
+  // Note: The notifications/mark_all_as_viewed endpoint is broken, but still returns 202.
+  // A bug ticket has been filed to fix it, but should not require any changes here.
+  markAllAsViewed = (channel?: number) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.NOTIFICATIONS}/mark_all_as_viewed`, { channel })
+      .finally()
+  }
+}

package/src/common/api/ScheduledPaymentsApi.ts

@@ -0,0 +1,37 @@
+import { ApiEndpoints, Fetch, type ScheduledPayment, TransactionType } from '../index'
+
+export class ScheduledPaymentsApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  addScheduledPayment = async (scheduledPayment: ScheduledPayment) => {
+    return this.fetchInstance
+      .post(ApiEndpoints.SCHEDULED_PAYMENTS, {
+        ...scheduledPayment,
+        is_recurring: 'true',
+        transaction_type: TransactionType.DEBIT,
+      })
+      .then((data) => data.scheduled_payment)
+  }
+
+  getScheduledPayments = async () => {
+    return this.fetchInstance
+      .get(ApiEndpoints.SCHEDULED_PAYMENTS)
+      .then((data) => data.scheduled_payments)
+  }
+
+  updateScheduledPayment = async (scheduledPayment: ScheduledPayment) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.SCHEDULED_PAYMENTS}/${scheduledPayment.guid}`, scheduledPayment)
+      .then((data) => data.scheduled_payment)
+  }
+
+  deleteScheduledPayment = async (guid: string) => {
+    return this.fetchInstance
+      .delete(`${ApiEndpoints.SCHEDULED_PAYMENTS}/${guid}`)
+      .then((data) => data)
+  }
+}

package/src/common/api/UserApi.ts

@@ -0,0 +1,23 @@
+import Fetch from '../utils/Fetch'
+
+import { ApiEndpoints } from '../constants'
+
+import type { UserProfile } from '../types'
+
+export class UserApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  getUserProfile = async () => {
+    return this.fetchInstance.get(ApiEndpoints.APP_DATA).then((data) => data.user_profile)
+  }
+
+  updateUserProfile = async (userProfile: UserProfile) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.USER_PROFILES}/${userProfile.guid}`, userProfile)
+      .then((data) => data.user_profile)
+  }
+}