Merge pull request #23 from keepsimpleio/dev

Hotfix: Longevity loading state for russian pages

Author: MaryWylde

src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.module.scss

@@ -1,12 +1,13 @@
 .whyDoThisTooltip {
-  background-image: url('/keepsimple_/assets/longevity/habits/what-is-this-bg.webp');
-  background-size: contain;
   width: 700px;
   height: 100%;
-  background-repeat: no-repeat;
   z-index: 999;
   padding-bottom: 20px;
+  position: relative;
 
+  .img {
+    position: absolute;
+  }
   .heading {
     padding-top: 20px;
     padding-left: 20px;
@@ -34,6 +35,8 @@
   .content {
     padding-left: 20px;
     padding-top: 12px;
+    z-index: 55;
+    position: relative;
 
     p {
       width: 337px;
@@ -45,11 +48,13 @@
 
 @media (max-width: 956px) {
   .whyDoThisTooltip {
-    background-image: unset;
     width: unset;
     height: unset;
     padding-bottom: unset;
 
+    .img {
+      display: none;
+    }
     .heading {
       padding-top: 0;
       padding-left: 0;

src/components/longevity/WhyDoThisTooltip/WhyDoThisTooltip.tsx

@@ -5,15 +5,59 @@ import Heading from '@components/Heading';
 import { WhyDoThisTooltipProps } from './WhyDoThisTooltip.types';
 
 import styles from './WhyDoThisTooltip.module.scss';
+import Image from 'next/image';
 
 const WhyDoThisTooltip: FC<WhyDoThisTooltipProps> = ({
   whatDamagesText,
   headline,
   locale,
 }) => {
+  // TODO: This is very temporary workaround for strapi data
+  const looksLikeHtml = (s: string) => /<\/?[a-z][\s\S]*>/i.test(s);
+  const escapeHtml = (s: string) =>
+    s
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+
+  const textToHtml = (input: string) => {
+    let s = escapeHtml(input);
+
+    s = s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+
+    const paragraphs = s
+      .split(/\n\s*\n/)
+      .map(p => p.trim())
+      .filter(Boolean);
+
+    return paragraphs.map(p => `<p>${p.replace(/\n/g, '<br />')}</p>`).join('');
+  };
+  function RichText({ value }: { value?: string | null }) {
+    if (!value) return null;
+
+    const html = looksLikeHtml(value) ? value : textToHtml(value);
+
+    return (
+      <div
+        dangerouslySetInnerHTML={{ __html: html }}
+        className={styles.content}
+      />
+    );
+  }
+
   return (
     <div className={styles.whyDoThisTooltip}>
       <div>
+        <Image
+          src={'/keepsimple_/assets/longevity/habits/what-is-this-bg.webp'}
+          alt="Background"
+          width={700}
+          height={300}
+          priority
+          className={styles.img}
+        />
         {headline && (
           <Heading
             text={headline ? headline : ''}
@@ -23,10 +67,7 @@ const WhyDoThisTooltip: FC<WhyDoThisTooltipProps> = ({
             className={styles.heading}
           />
         )}
-        <div
-          dangerouslySetInnerHTML={{ __html: whatDamagesText || '' }}
-          className={styles.content}
-        />
+        <RichText value={whatDamagesText} />
       </div>
     </div>
   );

src/pages/_app.tsx

@@ -224,10 +224,10 @@ function App({ Component, pageProps: { session, ...pageProps } }: TApp) {
     }
   }, [accountData?.id, accountData?.createdAt]);
 
-  const clean = (url: string) =>
-    url.split('?')[0].split('#')[0].replace(/\/+$/, '');
-  const isLongevityUrl = (url: string) =>
-    clean(url).startsWith(longevityBaseUrl);
+  const isLongevityUrl = (url: string) => {
+    const normalizedUrl = url.split('?')[0].split('#')[0].replace(/\/+$/, '');
+    return normalizedUrl.startsWith(longevityBaseUrl);
+  };
 
   useEffect(() => {
     const onStart = (url: string) => {
@@ -273,8 +273,8 @@ function App({ Component, pageProps: { session, ...pageProps } }: TApp) {
   }, []);
 
   const isLongevityNow = isLongevityUrl(router.asPath);
-  const overlayOn =
-    isLongevityNow && (routeLoading || !heroReady || !videosReady);
+  //TODO: Fix heroReady logic
+  const overlayOn = isLongevityNow && (routeLoading || !videosReady);
 
   return (
     <SessionProvider session={session}>