Merge pull request #2776 from glific/feature/redirect-to-new

Redirect to new home page
glific · Feb 27, 2024 · 1e870d3 · 1e870d3
2 parents 0842ce2 + 5750b9d
commit 1e870d3
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 44 deletions.
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -1,6 +1,8 @@
 import dayjs from 'dayjs';
 import * as Yup from 'yup';
 
+export const OLD_DOMAIN = 'tides.coloredcow.com';
+export const NEW_DOMAIN = 'glific.com';
 export const SIDE_DRAWER_WIDTH = 233;
 export const SHORT_DATE_FORMAT = 'DD/MM/YY';
 export const LONG_DATE_FORMAT = 'DD/MM/YYYY';

diff --git a/src/containers/Auth/Auth.tsx b/src/containers/Auth/Auth.tsx
@@ -9,7 +9,7 @@ import WhatsAppIcon from 'assets/images/icons/Social/Whatsapp.svg?react';
 import { termsOfUse } from 'containers/Organization/Organization';
 import { Button } from 'components/UI/Form/Button/Button';
 import GlificLogo from 'assets/images/logo/Logo.svg';
-// import { Promotion } from './Promotion/Promotion';
+import { Promotion } from './Promotion/Promotion';
 import styles from './Auth.module.css';
 import axios from 'axios';
 import { ORGANIZATION_NAME } from 'config';
@@ -240,7 +240,7 @@ export const Auth = ({
         ) : null}
       </div>
       {/* commenting out the promotion section for now */}
-      {/* {mode === 'login' && <Promotion />} */}
+      {mode === 'login' && <Promotion />}
     </div>
   );
 };
diff --git a/src/containers/Auth/Promotion/Promotion.module.css b/src/containers/Auth/Promotion/Promotion.module.css
@@ -7,9 +7,10 @@
 .Container {
   position: fixed;
   background: linear-gradient(130deg, #ffd7ca, #fff6ca);
-  width: 290px;
-  right: 24px;
+  width: 310px;
+  right: 60px;
   bottom: 0;
+  padding-bottom: 10px;
   border: 4px solid #073f24;
   border-bottom: 0px;
 }
@@ -83,6 +84,7 @@
   color: #073f24;
   font-size: 15px;
   font-weight: 400;
+  margin-bottom: 20px;
   font-style: normal;
   line-height: 1.25;
   align-items: baseline;

diff --git a/src/containers/Auth/Promotion/Promotion.tsx b/src/containers/Auth/Promotion/Promotion.tsx
@@ -3,12 +3,7 @@ import MinimizeIcon from 'assets/images/icons/Minimize.svg?react';
 import MaximizeIcon from 'assets/images/icons/Maximize.svg?react';
 import styles from './Promotion.module.css';
 
-const points = [
-  'Learn how to integrate ChatGPT with your chatbot to make your conversations more impactful and engaging!',
-  'Learn how TAP is using ChatGPT in their chatbot',
-];
-
-const LINK = 'https://rb.gy/ywfqp';
+const hostname = location.hostname.replace('.glific.com', '');
 
 export const Promotion = () => {
   const [minimized, setMinimized] = useState(false);
@@ -20,7 +15,7 @@ export const Promotion = () => {
         <div className={styles.HeaderText}>NEW!</div>
         {minimized ? (
           <>
-            <div className={styles.GiftCard}>Glific Webinar</div>
+            <div className={styles.GiftCard}>New Website Address!</div>
             <MaximizeIcon
               className={styles.AccordianIcon}
               onClick={() => setMinimized(!minimized)}
@@ -33,24 +28,41 @@ export const Promotion = () => {
 
       {!minimized && (
         <>
-          <div className={styles.Image}>
-            Webinar on ChatGPT integration with Glific 28th July 12 PM
-          </div>
+          <div className={styles.Image}>New Website Address!</div>
 
           <div className={styles.Points}>
-            {points.map((point, index) => (
-              <p className={styles.BodyListText} key={point}>
-                <span>{index + 1}</span>
-                {point}
-              </p>
-            ))}
+            <div className={styles.BodyListText}>
+              <span>{1}</span>
+              <div>
+                We're Moving: <strong>tides.coloredcow.com</strong> is changing to{' '}
+                <strong>glific.com</strong>! To access your Glific account use{' '}
+                <strong>{hostname}.glific.com </strong>
+                instead of{' '}
+                <strong>
+                  {hostname}
+                  .tides.coloredcow.com
+                </strong>
+              </div>
+            </div>
+            <div className={styles.BodyListText}>
+              <span>2</span>
+              <div>
+                What this means? <strong>{hostname}.tides.coloredcow.com </strong>
+                page will become inactive on 31st March. Bookmark the new Glific address right away
+              </div>
+            </div>
+            <div className={styles.BodyListText}>
+              <div>
+                <strong>Note: </strong> Please ignore if you already have a glific.com account
+              </div>
+            </div>
           </div>
-          <a className={styles.Link} href={LINK} target="_blank" rel="noreferrer">
+          {/* <a className={styles.Link} href={LINK} target="_blank" rel="noreferrer">
             <div className={styles.KnowMore}>
               <div>REGISTER NOW</div>
               <div className={styles.Arrow}> ↗</div>
             </div>
-          </a>
+          </a> */}
         </>
       )}
     </div>

diff --git a/src/index.tsx b/src/index.tsx
@@ -13,29 +13,34 @@ import { APPSIGNAL_API_KEY } from './config';
 import './index.css';
 import App from './App';
 import packageInfo from '../package.json';
+import { NEW_DOMAIN, OLD_DOMAIN } from 'common/constants';
 
-let appComponent = <App />;
-if (APPSIGNAL_API_KEY) {
-  const appsignal = new Appsignal({
-    key: APPSIGNAL_API_KEY,
-    revision: packageInfo.version,
-  });
-  appsignal.use(BreadcrumbsNetwork.plugin({ xhrEnabled: true }));
-  appsignal.use(PathDecorator.plugin());
-  appsignal.use(WindowEvents.plugin({ onunhandledrejection: true, onerror: true }));
+if (location.hostname.endsWith(OLD_DOMAIN)) {
+  location.hostname = location.hostname.replace(OLD_DOMAIN, NEW_DOMAIN) + location.pathname;
+} else {
+  let appComponent = <App />;
+  if (APPSIGNAL_API_KEY) {
+    const appsignal = new Appsignal({
+      key: APPSIGNAL_API_KEY,
+      revision: packageInfo.version,
+    });
+    appsignal.use(BreadcrumbsNetwork.plugin({ xhrEnabled: true }));
+    appsignal.use(PathDecorator.plugin());
+    appsignal.use(WindowEvents.plugin({ onunhandledrejection: true, onerror: true }));
 
-  appComponent = (
-    <ErrorBoundary instance={appsignal}>
-      <App />
-    </ErrorBoundary>
-  );
-}
+    appComponent = (
+      <ErrorBoundary instance={appsignal}>
+        <App />
+      </ErrorBoundary>
+    );
+  }
 
-const root = createRoot(document.getElementById('root')!);
+  const root = createRoot(document.getElementById('root')!);
 
-root.render(
-  <ThemeProvider theme={theme}>
-    <CssBaseline />
-    <BrowserRouter>{appComponent}</BrowserRouter>
-  </ThemeProvider>
-);
+  root.render(
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <BrowserRouter>{appComponent}</BrowserRouter>
+    </ThemeProvider>
+  );
+}