Compass/web/components/contact.tsx

import {Col} from 'web/components/layout/col'
import {Row} from 'web/components/layout/row'
import {useUser} from 'web/hooks/use-user'
import {TextEditor, useTextEditor} from "web/components/widgets/editor";
import {JSONContent} from "@tiptap/core";
import {MAX_DESCRIPTION_LENGTH} from "common/envs/constants";
import {Button} from "web/components/buttons/button";
import {api} from "web/lib/api";
import {Title} from "web/components/widgets/title";
import toast from "react-hot-toast";
import Link from "next/link";
import {formLink} from "common/constants";
import {useT} from 'web/lib/locale' // added

export function ContactComponent() {
  const user = useUser()
  const t = useT() // use translations

  const editor = useTextEditor({
    max: MAX_DESCRIPTION_LENGTH,
    defaultValue: '',
    placeholder: t('contact.editor.placeholder', 'Contact us here...'), // localized placeholder
  })

  const showButton = !!editor?.getText().length

  return (
    <Col className="mx-2">
      <Title className="!mb-2 text-3xl">{t('contact.title', 'Contact')}</Title>
      <p className={'custom-link mb-4'}>
        {t('contact.intro_prefix', "You can also contact us through this ")}
        <Link href={formLink}>{t('contact.form_link', 'feedback form')}</Link>
        {t('contact.intro_middle', ' or any of our ')}
        <Link href={'/social'}>{t('contact.socials', 'socials')}</Link>
        {t('contact.intro_suffix', ". Feel free to give your contact information if you'd like us to get back to you.")}
      </p>
      <Col>
        <div className={'mb-2'}>
          <TextEditor
            editor={editor}
          />
        </div>
        {showButton && (
          <Row className="right-1 justify-between gap-2">
            <Button
              size="xs"
              onClick={async () => {
                if (!editor) return
                const data = {
                  content: editor.getJSON() as JSONContent,
                  userId: user?.id,
                };
                const result = await api('contact', data).catch(() => {
                  toast.error(t('contact.toast.failed', 'Failed to contact — try again or contact us...'))
                })
                if (!result) return
                editor.commands.clearContent()
                toast.success(t('contact.toast.success', 'Thank you for your message!'))
              }}
            >
              {t('contact.submit', 'Submit')}
            </Button>
          </Row>
        )}
      </Col>
    </Col>
  )
}