Push to prod: Redirect to newer sttm design, if the user has opened the newer design.

src/js/index.js

@@ -1,3 +1,6 @@
+// First import: redirect opted-in users to the new design before the rest of
+// the app loads (see ./redirect-check).
+import './redirect-check';
 import React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';

src/js/pages/Home/index.js

@@ -25,6 +25,7 @@ import {
 } from '../../constants';
 import { toSearchURL, getShabadList, reformatSearchTypes } from '../../util';
 import { pageView } from '../../util/analytics';
+import { rememberNewDesign } from '../../util/design-preference';
 import { setModalOpen } from '@/features/actions';
 import { connect } from 'react-redux';
 import MicIcon from '@/components/Icons/MicIcon';
@@ -163,10 +164,12 @@ class Home extends React.PureComponent {
                         <b>NEW </b>
                         <a
                           href="https://next.sikhitothemax.org"
-                          target="_blank"
                           className='new-text'
-                          rel="noopener noreferrer"
                           style={{ cursor: 'pointer' }}
+                          // Remember the choice so future visits to the old site
+                          // redirect straight to the new design (#151). Same tab
+                          // so the preference takes effect where they land.
+                          onClick={rememberNewDesign}
                         >
                           Check out the new SikhiToTheMax Design!{' '}
                           <u>Try it now.</u>

src/js/redirect-check.js

@@ -0,0 +1,6 @@
+// Imported first in index.js so it runs before the rest of the bundle: if the
+// user opted into the new design, send them to next.sikhitothemax.org right
+// away (see ./util/design-preference and issue KhalisFoundation/sttm-next#151).
+import { maybeRedirectToNewDesign } from './util/design-preference';
+
+maybeRedirectToNewDesign();

src/js/util/design-preference.js

@@ -0,0 +1,48 @@
+// Cross-site "which design" preference, shared with next.sikhitothemax.org via a
+// cookie scoped to the parent domain (localStorage can't cross the two origins).
+// `sttm_design=new` means the user opted into the new design, so redirect them
+// there — preserving the path — on future visits to this old site. Cleared by
+// "Go back to previous design" on the new site. See KhalisFoundation/sttm-next#151.
+
+const COOKIE = 'sttm_design';
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
+
+const isProdHost = () => {
+  const host = window.location.hostname;
+  return host === 'sikhitothemax.org' || host === 'www.sikhitothemax.org';
+};
+
+// Scope to `.sikhitothemax.org` so both hosts share it; omit the domain on any
+// other host (localhost / previews) so it still sets for local testing.
+const domainAttr = () =>
+  window.location.hostname.endsWith('sikhitothemax.org')
+    ? '; domain=.sikhitothemax.org'
+    : '';
+
+export const prefersNewDesign = () =>
+  document.cookie.split('; ').some((c) => c === `${COOKIE}=new`);
+
+/** Remember the user opted into the new design (set on the "Try it now" click). */
+export const rememberNewDesign = () => {
+  document.cookie = `${COOKIE}=new${domainAttr()}; path=/; max-age=${ONE_YEAR_SECONDS}; samesite=lax`;
+};
+
+/**
+ * If the user opted into the new design, redirect to it (same path + query) and
+ * return true. Only on the production host, and with a `?design=old` escape
+ * hatch so the old site stays reachable. Never throws — a redirect check must
+ * not block the app.
+ */
+export const maybeRedirectToNewDesign = () => {
+  try {
+    if (!isProdHost()) return false;
+    const params = new URLSearchParams(window.location.search);
+    if (params.get('design') === 'old') return false;
+    if (!prefersNewDesign()) return false;
+    const { pathname, search, hash } = window.location;
+    window.location.replace(`https://next.sikhitothemax.org${pathname}${search}${hash}`);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};