fix(tickets): fix issues in ticket format, update regex for links (#533)

Co-authored-by: Fabrizio Costa Medich <[email protected]>

assets/translations/en.json

@@ -161,6 +161,7 @@
     "hour": "Hour",
     "hours": "Hour",
     "icon": "Icon",
+    "image": "Image",
     "inYourAgenda": "in your agenda",
     "it": "Italian",
     "language": "Language",

assets/translations/it.json

@@ -161,6 +161,7 @@
     "hour": "Orario",
     "hours": "Ore",
     "icon": "Icona",
+    "image": "Immagine",
     "inYourAgenda": "nella tua agenda",
     "it": "Italiano",
     "language": "Lingua",

src/core/components/TextWithLinks.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { TextProps } from 'react-native';
 import { MixedStyleDeclaration } from 'react-native-render-html';
 
-import { linkUrls } from '../../utils/html';
+import { linkUrls, replaceImgWithAnchorTags } from '../../utils/html';
 import { HtmlView } from './HtmlView';
 
 type Props = {
@@ -11,7 +11,7 @@ type Props = {
 
 export const TextWithLinks = ({ baseStyle, children, style }: Props) => {
   if (!children || typeof children !== 'string') return null;
-  const html = linkUrls(children);
+  const html = linkUrls(replaceImgWithAnchorTags(children));
   return (
     <HtmlView
       source={{ html }}

src/features/tickets/components/TextMessage.tsx

@@ -5,7 +5,7 @@ import { useStylesheet } from '@lib/ui/hooks/useStylesheet';
 import { Theme } from '@lib/ui/types/Theme';
 
 import { TextWithLinks } from '../../../core/components/TextWithLinks';
-import { getHtmlTextContent } from '../../../utils/html';
+import { sanitizeHtml } from '../../../utils/html';
 
 export interface TextMessageProps {
   message: string;
@@ -15,7 +15,7 @@ export const TextMessage = ({ message }: TextMessageProps) => {
   const styles = useStylesheet(createStyles);
 
   const textMessage = useMemo(() => {
-    return getHtmlTextContent(message);
+    return sanitizeHtml(message ?? '');
   }, [message]);
 
   return <TextWithLinks style={styles.text}>{textMessage}</TextWithLinks>;

src/utils/html.ts

@@ -2,6 +2,7 @@ import { Document } from 'react-native-render-html';
 
 import { innerText } from 'domutils';
 import { parseDocument } from 'htmlparser2';
+import i18next from 'i18next';
 
 export const sanitizeHtml = (html: string) =>
   html.replace(/\r/g, '').replace(/\\r/g, '').replace(/\\"/g, '"').trim();
@@ -11,9 +12,16 @@ export const getHtmlTextContent = (text: string) => {
   return innerText(dom.children as any[]);
 };
 
+export const replaceImgWithAnchorTags = (html: string) => {
+  const imgRegex = /<img[^>]*src="([^">]*)"[^>]*>/gi;
+  return html.replace(imgRegex, (_, src) => {
+    return `<a href="${src}">${i18next.t('common.image')}</a>`;
+  });
+};
+
 export const linkUrls = (html: string) => {
   const regex =
-    /(?!<a[^>]*>[^<])(?:https?:\/\/|www\.)(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#/%=~_|$?!:,.]*\)|[A-Z0-9+&@#/%=~_|$])(?![^<]*<\/a>)/gi;
+    /(?!<a[^>]*>[^<])(?:https?:\/\/(?:www\.)?|www\.)?(?:[A-Z0-9-]+(?:[-.][A-Z0-9]+)*\.[A-Z]{2,5})(?::[0-9]{1,5})?(?:\/[A-Z0-9\-._~:/?#[\]@!$&'()*+,;=]*)?(?:\?[A-Z0-9\-._~:/?#[\]@!$&'()*+,;=%]*)?(?:#[A-Z0-9\-._~:/?#[\]@!$&'()*+,;=%]*)?(?![^<]*<\/a>)(?<!\.)/gi;
   return html.replace(regex, match => {
     if (!match.startsWith('http')) match = `https://${match}`;
     return `<a href="${match}">${match}</a>`;