feat: settings general api

apps/mochi-web/components/settings/general/DefaultMessage.tsx

@@ -7,34 +7,25 @@ import {
 } from '@mochi-ui/core'
 import { EditLine, TrashBinLine } from '@mochi-ui/icons'
 import React from 'react'
-import {
-  Control,
-  Controller,
-  UseFormWatch,
-  useFieldArray,
-} from 'react-hook-form'
+import { Controller, useFieldArray, useFormContext } from 'react-hook-form'
 import { actionList } from '~constants/settings'
-import { GeneralFormValue } from './types'
+import { ResponseGeneralSettingData } from '~types/mochi-schema'
 import { MessageModal } from './MessageModal'
 
-interface Props {
-  control: Control<GeneralFormValue>
-  watch: UseFormWatch<GeneralFormValue>
-}
-
-export const DefaultMessage = ({ control, watch }: Props) => {
+export const DefaultMessage = () => {
+  const { control, watch } = useFormContext<ResponseGeneralSettingData>()
   const { fields, append, remove, update } = useFieldArray({
     control,
-    name: 'defaultMessage',
+    name: 'payment.default_message_settings',
   })
-  const enableDefaultMessage = watch('enableDefaultMessage')
+  const enableDefaultMessage = watch('payment.default_message_enable')
 
   return (
     <div className="flex flex-col w-full max-w-md space-y-2">
       <div className="flex items-center justify-between">
         <FormLabel>Default message</FormLabel>
         <Controller
-          name="enableDefaultMessage"
+          name="payment.default_message_enable"
           control={control}
           render={({ field: { value, onChange, ...rest } }) => (
             <Switch
@@ -48,7 +39,7 @@ export const DefaultMessage = ({ control, watch }: Props) => {
       {(enableDefaultMessage ? fields : []).map((each, index) => (
         <Controller
           key={each.id}
-          name={`defaultMessage.${index}`}
+          name={`payment.default_message_settings.${index}`}
           control={control}
           render={({ field }) => (
             <div className="flex items-center border rounded-md border-divider shadow-input">

apps/mochi-web/components/settings/general/GeneralPage.tsx

@@ -1,12 +1,29 @@
-import { apiLogout } from '~constants/api'
+import { API, GET_PATHS, apiLogout } from '~constants/api'
 import { api } from '~constants/mochi'
-import { Button, Separator, Typography, useLoginWidget } from '@mochi-ui/core'
+import {
+  ActionBar,
+  ActionBarActionGroup,
+  ActionBarBody,
+  ActionBarCancelButton,
+  ActionBarConfirmButton,
+  ActionBarContent,
+  ActionBarDescription,
+  ActionBarIcon,
+  Button,
+  Separator,
+  Typography,
+  toast,
+  useLoginWidget,
+} from '@mochi-ui/core'
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { ROUTES } from '~constants/routes'
-import { platformGroupList, targetGroupList } from '~constants/settings'
-import { GeneralFormValue } from './types'
+import { useFetchGeneralSettings } from '~hooks/settings/useFetchGeneralSettings'
+import {
+  ResponseGeneralSettingData,
+  ResponseUserGeneralSettingResponse,
+} from '~types/mochi-schema'
 import { MoneySource } from './MoneySource'
 import { ReceiverPlatform } from './ReceiverPlatform'
 import { TokenPriority } from './TokenPriority'
@@ -16,65 +33,93 @@ import { TransactionPrivacy } from './TransactionPrivacy'
 import { SocialAccountsPrivacy } from './SocialAccountsPrivacy'
 import { WalletsPrivacy } from './WalletsPrivacy'
 
+const SETTINGS_GENERAL_FORM_ID = 'settings-general-form'
+
 export const GeneralPage = () => {
-  const form = useForm<GeneralFormValue>({
+  const form = useForm<ResponseGeneralSettingData>({
     mode: 'all',
-    defaultValues: {
-      defaultMoneySource: 'mochi',
-      defaultReceiverPlatform: 'discord',
-      defaultTokenPriority: [{ id: '941f0fb1-00da-49dc-a538-5e81fc874cb4' }],
-      transactionPrivacy: {
-        general_target_group: targetGroupList[0].key,
-        general_platform_group: platformGroupList[0].key,
-        custom_settings: [],
-      },
-      socialAccountsPrivacy: {
-        general_target_group: targetGroupList[0].key,
-        general_platform_group: platformGroupList[0].key,
-        custom_settings: [],
-      },
-      walletsPrivacy: {
-        general_target_group: targetGroupList[0].key,
-        general_platform_group: platformGroupList[0].key,
-        custom_settings: [],
-      },
-    },
   })
-  const { handleSubmit, control, watch } = form
+  const {
+    handleSubmit,
+    reset,
+    formState: { isSubmitting, isDirty },
+  } = form
 
-  const { logout } = useLoginWidget()
+  const { profile, logout } = useLoginWidget()
   const { replace } = useRouter()
+  const { data: settings } = useFetchGeneralSettings(profile?.id)
+
+  const resetData = useCallback(
+    (data?: ResponseGeneralSettingData) => {
+      if (!data) return
+      reset({
+        ...data,
+        payment: {
+          ...data.payment,
+          prioritized_token: data.payment?.prioritized_token_ids?.map((id) => ({
+            id,
+          })),
+        },
+      })
+    },
+    [reset],
+  )
 
-  const onSubmit = (data: any) => {
-    alert(JSON.stringify(data))
+  const onUpdateSettings = (data: ResponseGeneralSettingData) => {
+    if (!profile?.id) return
+    const payload = {
+      payment: {
+        ...data.payment,
+        token_priorities:
+          data.payment?.prioritized_token?.map((each) => each.id) || [],
+      },
+      privacy: {
+        ...data.privacy,
+      },
+    }
+    return API.MOCHI.put(payload, GET_PATHS.UPDATE_GENERAL_SETTINGS(profile.id))
+      .json((r: ResponseUserGeneralSettingResponse) => {
+        resetData(r.data)
+      })
+      .catch((e) => {
+        const err = JSON.parse(e.message)
+        toast({
+          description: err.msg,
+          scheme: 'danger',
+        })
+      })
   }
 
-  return (
-    <>
-      <FormProvider {...form}>
-        <form onSubmit={handleSubmit(onSubmit)} />
-        <div className="space-y-4">
-          <Typography level="h6">Payment setting</Typography>
+  useEffect(() => {
+    resetData(settings)
+  }, [resetData, settings])
 
-          <div className="flex gap-4">
-            <MoneySource control={control} />
-            <ReceiverPlatform control={control} />
-          </div>
+  return (
+    <FormProvider {...form}>
+      <form
+        id={SETTINGS_GENERAL_FORM_ID}
+        onSubmit={handleSubmit(onUpdateSettings)}
+      />
+      <div className="space-y-4">
+        <Typography level="h6">Payment setting</Typography>
 
-          <TokenPriority {...{ control, watch }} />
-          <DefaultMessage {...{ control, watch }} />
-          <TransactionLimit {...{ control, watch }} />
+        <div className="flex gap-4">
+          <MoneySource />
+          <ReceiverPlatform />
+        </div>
 
-          <Separator className="w-full max-w-md" />
+        <TokenPriority />
+        <DefaultMessage />
+        <TransactionLimit />
 
-          <Typography level="h6">Privacy</Typography>
+        <Separator className="w-full max-w-md" />
 
-          <TransactionPrivacy {...{ control, watch }} />
-          <SocialAccountsPrivacy {...{ control, watch }} />
-          <WalletsPrivacy {...{ control, watch }} />
-        </div>
-      </FormProvider>
+        <Typography level="h6">Privacy</Typography>
 
+        <TransactionPrivacy />
+        <SocialAccountsPrivacy />
+        <WalletsPrivacy />
+      </div>
       <div className="mt-8">
         <Button
           variant="outline"
@@ -91,6 +136,41 @@ export const GeneralPage = () => {
           Log out
         </Button>
       </div>
-    </>
+      <div className="sticky bottom-0">
+        <ActionBar open={isDirty}>
+          <ActionBarContent
+            scheme="success"
+            outline
+            shadow
+            onOpenAutoFocus={(e) => e.preventDefault()}
+            anchorClassName="left-0 right-0 -mb-8"
+          >
+            <ActionBarIcon />
+            <ActionBarBody>
+              <ActionBarDescription>
+                Do you want to save these changes?
+              </ActionBarDescription>
+            </ActionBarBody>
+            <ActionBarActionGroup>
+              <ActionBarCancelButton
+                disabled={isSubmitting}
+                variant="link"
+                onClick={() => reset()}
+              >
+                Reset
+              </ActionBarCancelButton>
+              <ActionBarConfirmButton
+                loading={isSubmitting}
+                type="submit"
+                form={SETTINGS_GENERAL_FORM_ID}
+                className="min-w-[130px]"
+              >
+                Save changes
+              </ActionBarConfirmButton>
+            </ActionBarActionGroup>
+          </ActionBarContent>
+        </ActionBar>
+      </div>
+    </FormProvider>
   )
 }

apps/mochi-web/components/settings/general/MessageModal.tsx

@@ -22,16 +22,16 @@ import { Controller, useForm } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { z } from 'zod'
 import { actionList } from '~constants/settings'
-import { Message } from './types'
+import { ModelDefaultMessageSetting } from '~types/mochi-schema'
 
 const schema = z.object({
   action: z.string().min(1, 'This field is required'),
   message: z.string().min(1, 'This field is required'),
 })
 
 interface Props {
-  defaultValues?: Message
-  onConfirm: (data: Message) => void
+  defaultValues?: ModelDefaultMessageSetting
+  onConfirm: (data: ModelDefaultMessageSetting) => void
   trigger: React.ReactNode
 }
 
@@ -41,12 +41,12 @@ export const MessageModal = ({
   trigger,
 }: Props) => {
   const [open, setOpen] = useState(false)
-  const { control, handleSubmit, reset } = useForm<Message>({
+  const { control, handleSubmit, reset } = useForm<ModelDefaultMessageSetting>({
     defaultValues,
     resolver: zodResolver(schema),
   })
 
-  const onSubmit = (data: Message) => {
+  const onSubmit = (data: ModelDefaultMessageSetting) => {
     setOpen(false)
     onConfirm(data)
   }

apps/mochi-web/components/settings/general/MoneySource.tsx

@@ -1,3 +1,4 @@
+import { truncate } from '@dwarvesf/react-utils'
 import {
   Button,
   FormControl,
@@ -9,31 +10,54 @@ import {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  useLoginWidget,
 } from '@mochi-ui/core'
 import { PlusLine } from '@mochi-ui/icons'
-import { Control, Controller } from 'react-hook-form'
-import { GeneralFormValue } from './types'
+import { Controller, useFormContext } from 'react-hook-form'
+import { ResponseGeneralSettingData } from '~types/mochi-schema'
+import { getPlatform } from '~utils/platform'
 
-interface Props {
-  control: Control<GeneralFormValue>
-}
+export const MoneySource = () => {
+  const { profile } = useLoginWidget()
+  const { control, setValue } = useFormContext<ResponseGeneralSettingData>()
 
-export const MoneySource = ({ control }: Props) => {
   return (
     <Controller
-      name="defaultMoneySource"
+      name="payment.default_money_source.platform_identifier"
       control={control}
       render={({ field, fieldState }) => (
         <FormControl error={!!fieldState.error} className="min-w-[160px]">
           <FormLabel>Default money source</FormLabel>
-          <Select {...field}>
+          <Select
+            {...field}
+            onChange={(value) => {
+              setValue(
+                'payment.default_money_source',
+                {
+                  platform_identifier: value,
+                  platform:
+                    profile?.associated_accounts?.find(
+                      (each) => each.platform_identifier === value,
+                    )?.platform || 'mochi',
+                },
+                { shouldDirty: true },
+              )
+            }}
+          >
             <SelectTrigger className="justify-between h-10 border border-divider">
-              <SelectValue placeholder="Mochi wallet" />
+              <SelectValue />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="mochi">Mochi wallet</SelectItem>
-              <SelectItem value="evm">EVM | 0xfsf...few</SelectItem>
-              <SelectItem value="sol">SOL | 0xfsf...few</SelectItem>
+              {profile?.associated_accounts?.map((each) => (
+                <SelectItem
+                  key={each.platform_identifier}
+                  value={each.platform_identifier}
+                >
+                  {getPlatform(each.platform).name} |{' '}
+                  {truncate(each.platform_identifier, 10, true)}
+                </SelectItem>
+              ))}
               <SelectSeparator />
               <Button variant="ghost" className="w-full pl-2 pr-2 h-9">
                 <PlusLine className="w-4 h-4" />