Production release PR

apps/100ms-custom-app/src/App.jsx

@@ -1,22 +1,34 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { Suspense, useEffect, useRef, useState } from 'react';
 import { Flex, HMSPrebuilt } from '@100mslive/roomkit-react';
 import { useOverridePrebuiltLayout } from './hooks/useOverridePrebuiltLayout';
 import { useSearchParam } from './hooks/useSearchParam';
 import {
+  fetchData,
   getAuthTokenUsingRoomIdRole,
   getRoomCodeFromUrl,
   getRoomIdRoleFromUrl,
 } from './utils/utils';
 
+const Header = React.lazy(() => import('./components/Header'));
+
 const App = () => {
   const roomCode = getRoomCodeFromUrl();
+  const [onlyEmail, setOnlyEmail] = useState(false);
   const [authToken, setAuthToken] = useState(useSearchParam('auth_token'));
+  const [data, setData] = useState({});
+  const [showHeader, setShowHeader] = useState(false);
   // added subdomain in query param for easy testing in vercel links
   const subdomain = useSearchParam('subdomain') || window.location.hostname;
   const { roomId, role } = getRoomIdRoleFromUrl();
   const { overrideLayout, isHeadless } = useOverridePrebuiltLayout();
   const hmsPrebuiltRef = useRef();
 
+  useEffect(() => {
+    if (roomCode) {
+      fetchData(subdomain, roomCode, setOnlyEmail, setData, setShowHeader);
+    }
+  }, []);
+
   useEffect(() => {
     // remove notifications and messages for beam
     // enable beam speaker logging for transcription
@@ -48,6 +60,15 @@ const App = () => {
       direction="column"
       css={{ size: '100%', overflowY: 'hidden', bg: '$background_dim' }}
     >
+      {onlyEmail && showHeader && (
+        <Suspense fallback={null}>
+          <Header
+            roomLinks={data?.roomLinks}
+            policyID={data?.policyID}
+            theme={data?.theme}
+          />
+        </Suspense>
+      )}
       {(authToken || roomCode) && (
         <HMSPrebuilt
           roomCode={roomCode}

apps/100ms-custom-app/src/components/Header.js

@@ -1,68 +1,42 @@
-import React, { Suspense, useCallback, useState } from 'react';
-import { CodeIcon, EditIcon, InviteIcon } from '@100mslive/react-icons';
-import { Button, Flex, styled, Text } from '@100mslive/roomkit-react';
-import { AppAnalytics } from '../utils/analytics';
+import React, { Suspense, useState } from 'react';
+import { useMedia } from 'react-use';
 import {
-  apiBasePath,
-  getInitialsFromEmail,
-  getRandomColor,
-} from '../utils/utils';
+  BrushDesignIcon,
+  PeopleAddIcon,
+  PersonContactIcon,
+} from '@100mslive/react-icons';
+import {
+  Button,
+  config as cssConfig,
+  Flex,
+  styled,
+  Text,
+} from '@100mslive/roomkit-react';
 import darkLogo from '../assets/images/100ms_dark.svg';
 import logo from '../assets/images/100ms_logo.svg';
 
-const DownloadCodeModal = React.lazy(() => import('./DownloadCodeModal'));
 const InviteLinksModal = React.lazy(() => import('./InviteLinksModal'));
+
 const LogoImg = styled('img', {
-  maxHeight: '$14',
+  maxHeight: '$10',
   width: 'auto',
   cursor: 'pointer',
   '@md': {
-    maxHeight: '$12',
+    maxHeight: '$10',
   },
 });
-const randomColor = getRandomColor();
 
 export default function Header({
-  savingData,
-  refreshData,
-  settings,
-  roomLinks,
-  onlyEmail,
-  toggleModal,
+  roomLinks = {},
+  policyID = '',
+  theme = 'DARK',
 }) {
   const [modal, togModal] = useState(false);
-  const [codeModal, setCodeModal] = useState(false);
+  const isMobile = useMedia(cssConfig.media.md);
 
-  const generateEnvData = useCallback(
-    logo => {
-      return `REACT_APP_TILE_SHAPE=${settings.tile_shape}\nREACT_APP_THEME=${
-        settings.theme
-      }\nREACT_APP_COLOR=${settings.brand_color}\nREACT_APP_LOGO=${
-        logo || ''
-      }\nREACT_APP_FONT=${
-        settings.font
-      }\nREACT_APP_TOKEN_GENERATION_ENDPOINT=${`${
-        apiBasePath + window.location.hostname
-      }/`}\nREACT_APP_ENV=${process.env.REACT_APP_ENV}\n`;
-    },
-    [settings.tile_shape, settings.brand_color, settings.theme, settings.font]
-  );
-
-  const downloadCode = async () => {
-    await refreshData().then(logo => {
-      var envFile = document.createElement('a');
-      const data = generateEnvData(logo);
-      envFile.setAttribute(
-        'href',
-        `data:text/plain;charset=utf-8,${encodeURIComponent(data)}`
-      );
-      envFile.download = 'example.env';
-      envFile.style.display = 'none';
-      document.body.appendChild(envFile);
-      envFile.click();
-      document.body.removeChild(envFile);
-    });
-  };
+  if (isMobile) {
+    return null;
+  }
 
   return (
     <>
@@ -79,75 +53,94 @@ export default function Header({
           onClick={() => {
             window.open(process.env.REACT_APP_DASHBOARD_LINK);
           }}
-          src={settings.theme === 'dark' ? logo : darkLogo}
+          src={theme !== 'DARK' ? darkLogo : logo}
           alt="100ms logo"
           width={132}
           height={40}
         />
         <Flex align="center">
-          {onlyEmail && (
-            <>
-              {roomLinks && Object.keys(roomLinks).length > 0 && (
-                <Button
-                  onClick={() => {
-                    togModal(!modal);
-                    AppAnalytics.track('invite.clicked');
-                  }}
-                  css={{ px: '$8', mr: '$4', color: '$on_primary_high' }}
-                >
-                  <InviteIcon />
-                  <Text as="span" css={{ ml: '$2', color: '$on_primary_high' }}>
-                    Invite
-                  </Text>
-                </Button>
-              )}
-              <Button
-                variant="standard"
-                css={{ lineHeight: '1.5rem' }}
-                onClick={() => {
-                  window.open('https://100ms.live/contact?referrer=prebuilt');
+          <>
+            <a
+              rel="noreferrer"
+              target="_blank"
+              href="https://100ms.live/contact?referrer=prebuilt"
+            >
+              <Flex
+                align="center"
+                css={{
+                  color: '$on_surface_medium',
+                  borderRight: '1px solid $border_default',
+                  pr: '$md',
+                  mx: '$md',
+                  gap: '$4',
+                  '&:hover': { color: '$on_surface_high' },
                 }}
               >
-                Schedule a demo
-              </Button>
-              <Button
-                variant="standard"
-                css={{ px: '$6', mx: '$4' }}
-                disabled={savingData}
-                onClick={() => {
-                  setCodeModal(true);
+                <PersonContactIcon />
+                <Text
+                  variant="sm"
+                  css={{ color: 'inherit', fontWeight: '$semiBold' }}
+                >
+                  Talk to Sales
+                </Text>
+              </Flex>
+            </a>
+
+            {roomLinks && Object.keys(roomLinks).length > 0 && (
+              <Flex
+                onClick={() => togModal(true)}
+                align="center"
+                css={{
+                  color: '$on_surface_medium',
+                  borderRight: '1px solid $border_default',
+                  cursor: 'pointer',
+                  mr: '$md',
+                  px: '$md',
+                  gap: '$4',
+                  '&:hover': { color: '$on_surface_high' },
                 }}
               >
-                <CodeIcon />
-              </Button>
+                <PeopleAddIcon />
+                <Text
+                  variant="sm"
+                  css={{ color: 'inherit', fontWeight: '$semiBold' }}
+                >
+                  Invite Others
+                </Text>
+              </Flex>
+            )}
+            <a
+              target="_blank"
+              href={`https://${
+                process.env.REACT_APP_ENV === 'prod' ? 'dashboard' : 'app-qa'
+              }.100ms.live/templates/${policyID}/prebuilt`}
+              rel="noreferrer"
+            >
               <Button
-                variant="standard"
-                css={{ mr: '$4', px: '$6' }}
-                onClick={toggleModal}
+                variant=""
+                icon
+                css={{
+                  lineHeight: '1rem',
+                  fontSize: '$sm',
+                  p: '$2 $4',
+                  r: '$0',
+                  background:
+                    'linear-gradient(210deg, #6626ED 0%, #2672ED 100%)',
+                  color: '$on_primary_high',
+                  '&:hover': {
+                    background:
+                      'linear-gradient(210deg, #2672ED 0%, #6626ED 100%)',
+                  },
+                }}
               >
-                <EditIcon />
+                <BrushDesignIcon />
+                Customise
               </Button>
-            </>
-          )}
-          <Flex
-            align="center"
-            justify="center"
-            css={{ bg: randomColor, w: '$14', h: '$14', r: '$round' }}
-          >
-            <Text css={{ color: '$on_primary_high' }}>
-              {getInitialsFromEmail()}
-            </Text>
-          </Flex>
+            </a>
+          </>
         </Flex>
       </Flex>
-      {codeModal && (
-        <Suspense fallback={null}>
-          <DownloadCodeModal
-            downloadEnv={downloadCode}
-            onClose={() => setCodeModal(false)}
-          />
-        </Suspense>
-      )}
+
       {modal && (
         <Suspense fallback={null}>
           <InviteLinksModal

apps/100ms-custom-app/src/utils/utils.js

@@ -183,3 +183,38 @@ export const getAuthTokenUsingRoomIdRole = async function ({
     throw Error('failed to get auth token using roomid and role');
   }
 };
+
+export const fetchData = async (
+  subdomain,
+  roomCode,
+  setOnlyEmail,
+  setData,
+  setShowHeader
+) => {
+  const jwt = getAuthInfo().token;
+
+  const url = `${apiBasePath}apps/get-details?domain=${subdomain}&room_id=${roomCode}`;
+  const headers = {};
+  if (jwt) {
+    headers['Authorization'] = `Bearer ${jwt}`;
+  }
+  headers['Content-Type'] = 'application/json';
+
+  getWithRetry(url, headers)
+    .then(res => {
+      if (res.data.success) {
+        setOnlyEmail(res.data.same_user);
+        setShowHeader(true);
+        setData({
+          roomLinks: res.data.room_links,
+          policyID: res.data.policy_id,
+          theme: res.data.theme,
+        });
+      }
+    })
+    .catch(err => {
+      setShowHeader(false);
+      const errorMessage = `[Get Details] ${err.message}`;
+      console.error(errorMessage);
+    });
+};