all

Downloads/Voltaserve/ui/src/components/account/account-edit-full-name.tsx

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+  Button,
+  FormControl,
+  FormErrorMessage,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+} from '@chakra-ui/react'
+import { useSWRConfig } from 'swr'
+import {
+  Field,
+  FieldAttributes,
+  FieldProps,
+  Form,
+  Formik,
+  FormikHelpers,
+} from 'formik'
+import * as Yup from 'yup'
+import cx from 'classnames'
+import UserAPI, { User } from '@/client/idp/user'
+
+export type AccountEditFullNameProps = {
+  open: boolean
+  user: User
+  onClose?: () => void
+}
+
+type FormValues = {
+  fullName: string
+}
+
+const AccountEditFullName = ({
+  open,
+  user,
+  onClose,
+}: AccountEditFullNameProps) => {
+  const { mutate } = useSWRConfig()
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const formSchema = Yup.object().shape({
+    fullName: Yup.string().required('Full name is required').max(255),
+  })
+
+  useEffect(() => {
+    setIsModalOpen(open)
+  }, [open])
+
+  const handleSubmit = useCallback(
+    async (
+      { fullName }: FormValues,
+      { setSubmitting }: FormikHelpers<FormValues>,
+    ) => {
+      setSubmitting(true)
+      try {
+        const result = await UserAPI.updateFullName({
+          fullName,
+        })
+        mutate(`/user`, result)
+        setSubmitting(false)
+        onClose?.()
+      } finally {
+        setSubmitting(false)
+      }
+    },
+    [onClose, mutate],
+  )
+
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      onClose={() => onClose?.()}
+      closeOnOverlayClick={false}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Edit Full Name</ModalHeader>
+        <ModalCloseButton />
+        <Formik
+          enableReinitialize={true}
+          initialValues={{ fullName: user.fullName }}
+          validationSchema={formSchema}
+          validateOnBlur={false}
+          onSubmit={handleSubmit}
+        >
+          {({ errors, touched, isSubmitting }) => (
+            <Form>
+              <ModalBody>
+                <Field name="fullName">
+                  {({ field }: FieldAttributes<FieldProps>) => (
+                    <FormControl
+                      isInvalid={
+                        errors.fullName && touched.fullName ? true : false
+                      }
+                    >
+                      <Input
+                        {...field}
+                        placeholder="Full name"
+                        disabled={isSubmitting}
+                        autoFocus
+                      />
+                      <FormErrorMessage>{errors.fullName}</FormErrorMessage>
+                    </FormControl>
+                  )}
+                </Field>
+              </ModalBody>
+              <ModalFooter>
+                <div
+                  className={cx('flex', 'flex-row', 'items-center', 'gap-1')}
+                >
+                  <Button
+                    type="button"
+                    variant="outline"
+                    colorScheme="blue"
+                    disabled={isSubmitting}
+                    onClick={() => onClose?.()}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    type="submit"
+                    variant="solid"
+                    colorScheme="blue"
+                    isLoading={isSubmitting}
+                  >
+                    Save
+                  </Button>
+                </div>
+              </ModalFooter>
+            </Form>
+          )}
+        </Formik>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default AccountEditFullName