From 776b07982d51fd877138e89cb72936519571e443 Mon Sep 17 00:00:00 2001
From: corlard3y <corlardey@gmail.com>
Date: Tue, 17 Dec 2024 15:17:42 +0100
Subject: [PATCH] fix url and add form settings

---
 src/components/UserProfileSettings/AddTelegram.tsx | 11 ++++++++++-
 .../UserProfileSettings.form.ts                    |  2 +-
 .../UserProfileSettings/UserProfileSettings.tsx    | 14 ++++++++++++--
 src/config/config-dev.js                           |  2 +-
 src/config/config-prod.js                          |  2 +-
 5 files changed, 25 insertions(+), 6 deletions(-)

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<AddTelegramProps> = ({
               Step 2: Visit the link and paste the code
             </Text>
 
-            <Box margin="spacing-xs spacing-none">
+            <Box
+              margin="spacing-xs spacing-none"
+              width="100%"
+            >
               <Link
                 to={appConfig?.telegramExternalURL}
                 target="_blank"
@@ -242,6 +246,11 @@ const AddTelegram: FC<AddTelegramProps> = ({
                   textAlign: 'center',
                   color: 'text-brand-medium',
                 }}
+                css={css`
+                  overflow: auto;
+                  word-wrap: break-word;
+                  width: 100%;
+                `}
               >
                 {appConfig?.telegramExternalURL}
               </Link>
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<UserProfileSettingsType> = ({ 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}
           />
         </Box>
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,
 };