diff --git a/src/components/UserProfileSettings/AddTelegram.tsx b/src/components/UserProfileSettings/AddTelegram.tsx index 2d9adc3c18..0a377b7efe 100644 --- a/src/components/UserProfileSettings/AddTelegram.tsx +++ b/src/components/UserProfileSettings/AddTelegram.tsx @@ -12,6 +12,7 @@ import { appConfig } from 'config'; import { Box, Link, Modal, Telegram, Text, TextInput } from 'blocks'; import { shortenText } from 'helpers/UtilityHelper'; import { useTelegramFormik } from './AddTelegram.form'; +import { css } from 'styled-components'; type AddTelegramProps = { modalControl: ModalResponse; @@ -232,7 +233,10 @@ const AddTelegram: FC = ({ Step 2: Visit the link and paste the code - + = ({ textAlign: 'center', color: 'text-brand-medium', }} + css={css` + overflow: auto; + word-wrap: break-word; + width: 100%; + `} > {appConfig?.telegramExternalURL} diff --git a/src/components/UserProfileSettings/UserProfileSettings.form.ts b/src/components/UserProfileSettings/UserProfileSettings.form.ts index de14e3464c..52b7ac75e5 100644 --- a/src/components/UserProfileSettings/UserProfileSettings.form.ts +++ b/src/components/UserProfileSettings/UserProfileSettings.form.ts @@ -4,7 +4,7 @@ import { getRequiredFieldMessage } from 'common'; // Define Formik initial values type type FormValues = { - displayName: string | null; + displayName: string; picture: string | null; desc: string | null; }; diff --git a/src/components/UserProfileSettings/UserProfileSettings.tsx b/src/components/UserProfileSettings/UserProfileSettings.tsx index 2326adf097..b4f721cf1f 100644 --- a/src/components/UserProfileSettings/UserProfileSettings.tsx +++ b/src/components/UserProfileSettings/UserProfileSettings.tsx @@ -143,8 +143,18 @@ const UserProfileSettings: FC = ({ setErrorMessage, set label="Display Name" value={userFormik.values.displayName as string} onChange={userFormik.handleChange('displayName')} - error={userFormik.touched.displayName && Boolean(userFormik.errors.displayName)} - errorMessage={userFormik.touched.displayName ? userFormik.errors.displayName : ''} + error={ + userFormik.submitCount > 0 && !userFormik.values.displayName + ? true // Required error on submit + : userFormik.values.displayName.length > 50 // Length error during typing + } + errorMessage={ + userFormik.submitCount > 0 && !userFormik.values.displayName + ? 'Display Name is required' + : userFormik.values.displayName.length > 50 + ? 'Display Name cannot exceed 50 characters' + : '' + } totalCount={50} /> diff --git a/src/config/config-dev.js b/src/config/config-dev.js index 5885295e37..e3bfdb022c 100644 --- a/src/config/config-dev.js +++ b/src/config/config-dev.js @@ -83,7 +83,7 @@ export const config = { }, // social media integration - telegramExternalURL: 'https://t.me/PushCommDevBot', + telegramExternalURL: 'https://web.telegram.org/k/#@PushCommDevBot', discordExternalURL: null, }; diff --git a/src/config/config-prod.js b/src/config/config-prod.js index 0dbbba1bc8..ab0d981f89 100644 --- a/src/config/config-prod.js +++ b/src/config/config-prod.js @@ -83,7 +83,7 @@ export const config = { }, // social media integration - telegramExternalURL: 'https://t.me/PushCommBot', + telegramExternalURL: 'https://web.telegram.org/k/#@PushCommBot', discordExternalURL: null, };