social media warning, copy fixes and intl

Giveth · Apr 24, 2024 · 5e4e152 · 5e4e152
1 parent 60e7377
commit 5e4e152
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 6 deletions.
diff --git a/lang/ca.json b/lang/ca.json
@@ -870,6 +870,8 @@
 	"label.singular.round_count": "{round} ronda",
 	"label.skip_for_now": "Omet per ara",
 	"label.social_profiles": "Perfils socials",
+	"label.social_find_us_on": "Troba'ns a les xarxes socials",
+	"label.social_warning": "Giveth NO verifica els enllaços de xarxes socials publicats pels projectes, feu clic sota el vostre propi criteri!",
 	"label.something_went_wrong": "Alguna cosa ha anat malament!",
 	"label.some_or_all_of_your_staked_giv_is_locked": "Part o la totalitat del teu GIV en staking està bloquejat. Feu clic a 'Detalls del GIV bloquejat' per obtenir més informació.",
 	"label.sorry_this_projet_doesnt_support_your_current_net": "Ho sentim, aquest projecte no admet la teva xarxa actual.",

diff --git a/lang/en.json b/lang/en.json
@@ -870,6 +870,8 @@
 	"label.singular.round_count": "{round} round",
 	"label.skip_for_now": "Skip for now",
 	"label.social_profiles": "Social profiles",
+	"label.social_find_us_on": "Find us on Social Media",
+	"label.social_warning": "Giveth does NOT verify social media links published by projects, click at your own discretion!",
 	"label.something_went_wrong": "Something went wrong!!",
 	"label.some_or_all_of_your_staked_giv_is_locked": "Some or all of your staked GIV is locked. Click 'Locked GIV Details' for more information.",
 	"label.sorry_this_projet_doesnt_support_your_current_net": "Sorry, this project doesn’t support your current network.",

diff --git a/lang/es.json b/lang/es.json
@@ -870,6 +870,8 @@
 	"label.singular.round_count": "{round} ronda",
 	"label.skip_for_now": "Ignorar por ahora",
 	"label.social_profiles": "Perfiles Sociales",
+	"label.social_find_us_on": "Encuéntranos en las redes sociales",
+	"label.social_warning": "Giveth NO verifica los enlaces de redes sociales publicados por los proyectos, haga clic bajo su propio criterio!",
 	"label.something_went_wrong": "¡Algo salió mal!",
 	"label.some_or_all_of_your_staked_giv_is_locked": "Parte o la totalidad de su GIV en staking está bloqueado. Haga clic en \"Detalles del GIV bloqueado\" para obtener más información.",
 	"label.sorry_this_projet_doesnt_support_your_current_net": "Lo sentimos, este proyecto no admite tu red actual.",

diff --git a/src/components/views/project/ProjectSocialItem.tsx b/src/components/views/project/ProjectSocialItem.tsx
@@ -20,10 +20,9 @@ const socialMediaColor: { [key: string]: string } = {
 	website: '#2EA096',
 };
 
-const removeHttpsFromUrl = (socialMediaUrl: string) => {
-	return socialMediaUrl.replace('https://', '');
+const removeHttpsAndWwwFromUrl = (socialMediaUrl: string) => {
+	return socialMediaUrl.replace('https://', '').replace('www.', '');
 };
-
 const ProjectSocialItem = ({ socialMedia }: IProjectSocialMediaItem) => {
 	const item = socialMediasArray.find(item => {
 		return item.type.toLocaleLowerCase() === socialMedia.type.toLowerCase();
@@ -52,7 +51,7 @@ const ProjectSocialItem = ({ socialMedia }: IProjectSocialMediaItem) => {
 							],
 						}}
 					>
-						{removeHttpsFromUrl(socialMedia.link)}
+						{removeHttpsAndWwwFromUrl(socialMedia.link)}
 					</B>
 				</Flex>
 			</SocialItemContainer>

diff --git a/src/components/views/project/ProjectSocials.tsx b/src/components/views/project/ProjectSocials.tsx
@@ -1,15 +1,22 @@
-import { B, Flex } from '@giveth/ui-design-system';
+import { B, Flex, neutralColors } from '@giveth/ui-design-system';
 import React from 'react';
+import styled from 'styled-components';
+import { useIntl } from 'react-intl';
 import { useProjectContext } from '@/context/project.context';
 import ProjectSocialItem from './ProjectSocialItem';
 import { IProjectSocialMedia } from '@/apollo/types/types';
 
 const ProjectSocials = () => {
+	const { formatMessage } = useIntl();
 	const { projectData } = useProjectContext();
 
 	return (
 		<div>
-			<B>Find us on Social Media </B>
+			<B>
+				{formatMessage({
+					id: 'label.social_find_us_on',
+				})}
+			</B>
 			<br />
 			<Flex gap='24px' $flexWrap>
 				{projectData?.socialMedia?.map(
@@ -23,8 +30,20 @@ const ProjectSocials = () => {
 					),
 				)}
 			</Flex>
+			<SocialWarning>
+				{formatMessage({
+					id: 'label.social_warning',
+				})}
+			</SocialWarning>
 		</div>
 	);
 };
 
 export default ProjectSocials;
+
+const SocialWarning = styled.div`
+	margin-top: 16px;
+	color: ${neutralColors.gray[800]};
+	font-size: 0.9rem;
+	font-style: italic;
+`;