From 1c0b29fb13502c820085de637ab1915ee262ff98 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Tue, 12 Nov 2024 10:51:00 +0800
Subject: [PATCH] feat(console): add support fields config to sie (#6792)

add support fields to sie page
---
 .../PageContent/Content/SupportForm/index.tsx | 46 +++++++++++++++++++
 .../PageContent/Content/index.tsx             |  3 ++
 .../admin-console/sign-in-exp/content.ts      |  7 +++
 3 files changed, 56 insertions(+)
 create mode 100644 packages/console/src/pages/SignInExperience/PageContent/Content/SupportForm/index.tsx

diff --git a/packages/console/src/pages/SignInExperience/PageContent/Content/SupportForm/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/Content/SupportForm/index.tsx
new file mode 100644
index 000000000..9a11d107a
--- /dev/null
+++ b/packages/console/src/pages/SignInExperience/PageContent/Content/SupportForm/index.tsx
@@ -0,0 +1,46 @@
+import { emailRegEx } from '@logto/core-kit';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import Card from '@/ds-components/Card';
+import FormField from '@/ds-components/FormField';
+import TextInput from '@/ds-components/TextInput';
+import { type SignInExperienceForm } from '@/pages/SignInExperience/types';
+import { uriValidator } from '@/utils/validator';
+
+import FormSectionTitle from '../../components/FormSectionTitle';
+
+function SupportForm() {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useFormContext<SignInExperienceForm>();
+
+  return (
+    <Card>
+      <FormSectionTitle title="content.support.title" />
+      <FormField title="sign_in_exp.content.support.support_email">
+        <TextInput
+          {...register('supportEmail', {
+            pattern: { value: emailRegEx, message: t('errors.email_pattern_error') },
+          })}
+          error={errors.supportEmail?.message}
+          placeholder={t('sign_in_exp.content.support.support_email_placeholder')}
+        />
+      </FormField>
+      <FormField title="sign_in_exp.content.support.support_website">
+        <TextInput
+          {...register('supportWebsiteUrl', {
+            validate: (value) => !value || uriValidator(value) || t('errors.invalid_uri_format'),
+          })}
+          error={errors.supportWebsiteUrl?.message}
+          placeholder={t('sign_in_exp.content.support.support_website_placeholder')}
+        />
+      </FormField>
+    </Card>
+  );
+}
+
+export default SupportForm;
diff --git a/packages/console/src/pages/SignInExperience/PageContent/Content/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/Content/index.tsx
index 943c35208..1320d2e33 100644
--- a/packages/console/src/pages/SignInExperience/PageContent/Content/index.tsx
+++ b/packages/console/src/pages/SignInExperience/PageContent/Content/index.tsx
@@ -1,8 +1,10 @@
 import PageMeta from '@/components/PageMeta';
+import { isDevFeaturesEnabled } from '@/consts/env';
 
 import SignInExperienceTabWrapper from '../components/SignInExperienceTabWrapper';
 
 import LanguagesForm from './LanguagesForm';
+import SupportForm from './SupportForm';
 import TermsForm from './TermsForm';
 
 type Props = {
@@ -14,6 +16,7 @@ function Content({ isActive }: Props) {
     <SignInExperienceTabWrapper isActive={isActive}>
       {isActive && <PageMeta titleKey={['sign_in_exp.tabs.content', 'sign_in_exp.page_title']} />}
       <TermsForm />
+      {isDevFeaturesEnabled && <SupportForm />}
       <LanguagesForm isManageLanguageVisible />
     </SignInExperienceTabWrapper>
   );
diff --git a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/content.ts b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/content.ts
index 0dcbe691b..3702a4d42 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/content.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/content.ts
@@ -24,6 +24,13 @@ const content = {
     default_language_description_fixed:
       'When auto-detect is off, the default language is the only language your software will show. Turn on auto-detect for language extension.',
   },
+  support: {
+    title: 'SUPPORT',
+    support_email: 'Support email',
+    support_email_placeholder: 'support@email.com',
+    support_website: 'Support website',
+    support_website_placeholder: 'https://your.website/support',
+  },
   manage_language: {
     title: 'Manage language',
     subtitle: