Prod release: push the new design banner

src/js/components/AskGurbaniBotQuestion/AskGurbaniBotQuestion.tsx

@@ -1,37 +1,22 @@
-
 import React from 'react';
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
-import { setModalOpen } from '@/features/actions';
 
 import BotSinghIcon from '../Icons/BotSinghIcon';
-import {AskGurbaniBotQuestionModal} from '@/components/Modals';
 
-interface ModalOpenState {
-    modalOpened: string
-}
+export const KHALIS_AI_URL = 'https://next.sikhitothemax.org/?mode=khalis-ai';
 
 const AskGurbaniBotQuestion = () => {
-    const dispatch = useDispatch()
-    const typedUseSelector: TypedUseSelectorHook<ModalOpenState> = useSelector;
-    const modalOpened = typedUseSelector(state => state.modalOpened)
-
     const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
         e.preventDefault();
-        dispatch(setModalOpen('AskGurbaniBotQuestion'));
+        window.open(KHALIS_AI_URL, '_blank', 'noopener,noreferrer');
     }
 
-    const isAskGurbaniBotQuestionModalOpened = modalOpened === 'AskGurbaniBotQuestion';
-
     return (
-        <>
-            {isAskGurbaniBotQuestionModalOpened && <AskGurbaniBotQuestionModal isModalOpen={isAskGurbaniBotQuestionModalOpened} />}
-            <button className="fp-buttons apps-item" onClick={handleClick}>
-                <div className="apps-icon-container">
-                    <BotSinghIcon />
-                </div>
-            </button>
-        </>
+        <button className="fp-buttons apps-item" onClick={handleClick} aria-label="Khalis AI">
+            <div className="apps-icon-container">
+                <BotSinghIcon />
+            </div>
+        </button>
     )
 }
 
-export default AskGurbaniBotQuestion
+export default AskGurbaniBotQuestion

src/js/components/Banner/NewDesignBanner.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import Banner from './Banner';
+
+const SESSION_STORAGE_KEY = 'newDesignBannerDismissed';
+
+const getIsDismissed = () => {
+  try {
+    return sessionStorage.getItem(SESSION_STORAGE_KEY) === 'true';
+  } catch {
+    return false;
+  }
+};
+
+const NewDesignBanner = () => {
+  const [isDismissed, setIsDismissed] = useState(getIsDismissed);
+
+  if (isDismissed) return null;
+
+  const handleDismiss = () => {
+    try {
+      sessionStorage.setItem(SESSION_STORAGE_KEY, 'true');
+    } catch {
+      // ignore storage errors, still dismiss for this render
+    }
+    setIsDismissed(true);
+  };
+
+  return (
+    <Banner
+      banner={{
+        message: 'A new SikhiToTheMax experience is here — faster, cleaner, and powered by Khalis AI.',
+        link: 'next.sikhitothemax.org',
+        label: 'Try the new design',
+        type: '3',
+        classes: { notification: 'notification-new-design' },
+      }}
+      onCrossIconClick={handleDismiss}
+    />
+  );
+};
+
+export default NewDesignBanner;

src/js/components/Layout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Header from './Header';
 import Footer from './Footer';
-import Banner from './Banner/Banner';
+import NewDesignBanner from './Banner/NewDesignBanner';
 import GenericError, { SachKaur, BalpreetSingh } from './GenericError';
 import PropTypes from 'prop-types';
 import {
@@ -140,16 +140,7 @@ class Layout extends React.PureComponent {
 
     return online || pathname !== '/' ? (
       <div className="layout">
-        <Banner
-          banner={{
-            message:
-              'Help Us Build the Future of SikhiToTheMax! Every donation doubled - dvnetwork.org/sikhitothemax',
-            link: 'dvnetwork.org/sikhitothemax',
-            label: 'Donate now',
-            type: '3',
-            disabled: true,
-          }}
-        />
+        <NewDesignBanner />
         {isAddFavoriteShabadModalOpen && (
           <AddFavouriteShabadModal open={isAddFavoriteShabadModalOpen} />
         )}

src/js/pages/Home/HomePageIcons.tsx

@@ -11,9 +11,6 @@ import { DesktopSync } from '@/components/Icons/DesktopSync';
 import AskGurbaniBotQuestion from '@/components/AskGurbaniBotQuestion/AskGurbaniBotQuestion';
 
 const appRoutes = [{
-    icon: <AskGurbaniBotQuestion />,
-    title: 'Ask a Question'
-}, {
     icon: <Sundar />,
     title: 'Sundar Gutka',
     name: 'Sundar Gutka',
@@ -51,6 +48,9 @@ const appRoutes = [{
     title: "Bani Controller",
     name: "Bani Controller",
     to: '/control',
+}, {
+    icon: <AskGurbaniBotQuestion />,
+    title: 'Khalis AI'
 }];
 
 const HomePageIcons = () => {

src/js/pages/Home/index.js

@@ -159,17 +159,18 @@ class Home extends React.PureComponent {
                         doodle={showDoodle ? doodleData : null}
                       />
 
-                      <span className="new-text">
-                        <b className="new-text-blue">NEW </b>
-                        <span
+                      <span className="new-text new-text-blue">
+                        <b>NEW </b>
+                        <a
+                          href="https://next.sikhitothemax.org"
+                          target="_blank"
+                          className='new-text'
+                          rel="noopener noreferrer"
                           style={{ cursor: 'pointer' }}
-                          onClick={() => {
-                            this.props.setModalOpen('AskGurbaniBotQuestion');
-                          }}
                         >
-                          Get your questions answered by Khalis AI!{' '}
+                          Check out the new SikhiToTheMax Design!{' '}
                           <u>Try it now.</u>
-                        </span>
+                        </a>
                       </span>
                     </div>
                   </div>

src/scss/_banner.scss

@@ -92,6 +92,36 @@
     &.type-3 {
       background-color: $sttm-blue;
     }
+
+    &.notification-new-design {
+      padding: 6px 10px;
+
+      .banner-text-container {
+        flex-grow: 1;
+        justify-content: center;
+        // offset the close button on the right so the text sits at true center
+        padding-left: calc(30px + 1.2em);
+      }
+
+      .banner-text {
+        font-size: 0.9rem;
+        font-weight: normal;
+        width: auto;
+
+        @media screen and (max-width: 45.999999em) {
+          font-size: 0.85rem;
+        }
+      }
+
+      .banner-title {
+        font-weight: normal;
+      }
+
+      .banner-link-button {
+        font-size: 0.85rem;
+        padding: 6px 12px;
+      }
+    }
   }
 }