Merge branch 'main' into main-fix-ios-scroll

ApollosProject · Apr 6, 2024 · ed93abe · ed93abe
2 parents a539927 + 1b68436
commit ed93abe
Show file tree

Hide file tree

Showing 34 changed files with 11,834 additions and 329,869 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -19,8 +19,13 @@ jobs:
         with:
           registry-url: https://registry.npmjs.org/
 
+      - name: Yarn Install
+        run: yarn
+        working-directory: web-embeds
+
       - name: Deploy to NPM
-        run: npm run bump
+        run: yarn bump
         working-directory: web-embeds
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+          YARN_REGISTRY: https://registry.npmjs.org/
diff --git a/micro-service/src/App.js b/micro-service/src/App.js
@@ -8,9 +8,9 @@ import {
   RouterProvider,
 } from '@apollosproject/web-shared/providers';
 
+import AppHeader from '@apollosproject/web-shared/components/AppHeader';
+
 import { Button, Box, BodyText } from '@apollosproject/web-shared/ui-kit';
-import { Logo } from '@apollosproject/web-shared/components';
-import { useCurrentChurch } from '@apollosproject/web-shared/hooks';
 import Styled from './App.styles';
 
 import ErrorPage from './error-page';
@@ -24,20 +24,6 @@ Sentry.init({
   tracesSampleRate: 1.0,
 });
 
-function ChurchLogo(props) {
-  const { currentChurch } = useCurrentChurch();
-
-  //Can't set favicon in SSR
-  if (typeof document !== 'undefined') {
-    const favicon = document.querySelector('link[rel="icon"]');
-    if (currentChurch?.logo) {
-      favicon.href = currentChurch.logo;
-    }
-  }
-
-  return <Logo source={currentChurch?.logo} {...props} />;
-}
-
 function App({ searchParams, url }) {
   const churchSlug = getChurchSlug(url);
   const _root = searchParams?.root;
@@ -47,9 +33,12 @@ function App({ searchParams, url }) {
   const ssr = typeof document === 'undefined';
 
   const mainRoute = (
-    <Styled.FeedWrapper>
-      <FeatureFeed featureFeed={`${type}:${randomId}`} church={churchSlug} />
-    </Styled.FeedWrapper>
+    <>
+      <AppHeader />
+      <Styled.FeedWrapper>
+        <FeatureFeed featureFeed={`${type}:${randomId}`} church={churchSlug} />
+      </Styled.FeedWrapper>
+    </>
   );
 
   const routerConfig = [
@@ -66,7 +55,6 @@ function App({ searchParams, url }) {
   if (churchSlug) {
     return (
       <AppProvider church={churchSlug} modal="true">
-        <ChurchLogo display="flex" alignItems="center" justifyContent="center" marginTop="40px" />
         {/** When using SSR, avoid the router. it crashes */}
         {ssr ? mainRoute : <RouterProvider router={router} />}
       </AppProvider>

diff --git a/micro-service/src/index.css b/micro-service/src/index.css
@@ -15,8 +15,12 @@ html {
 html,
 body {
   height: 100%;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  background-color: #f8f8fa;
+}
+
+* {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
+    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }
 
 img {
@@ -36,4 +40,6 @@ input:focus-visible {
   outline: none;
 }
 
-::selection { background: rgba(110,197,184, 0.62); /* base.tertiary */ }
+::selection {
+  background: rgba(110, 197, 184, 0.62); /* base.tertiary */
+}
diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
   "license": "MIT",
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/*",
+      "micro-service",
+      "web-embeds"
     ],
     "nohoist": []
   }

diff --git a/packages/web-shared/components/AppHeader/AppHeader.js b/packages/web-shared/components/AppHeader/AppHeader.js
@@ -0,0 +1,46 @@
+import Wordmark from '../Wordmark';
+import { useCurrentChurch } from '../../hooks';
+import { Box, Avatar } from '../../ui-kit';
+import { User } from '@phosphor-icons/react';
+
+import SearchStyles from '../Searchbar/Search.styles';
+
+import ProfileButton from '../Profile/ProfileButton';
+
+function ChurchLogo(props) {
+  const { currentChurch } = useCurrentChurch();
+
+  return <Wordmark source={currentChurch?.wordmarkLightUrl} padding={10} {...props} />;
+}
+
+const AppHeader = () => (
+  <>
+    <Box
+      py={8}
+      px={16}
+      height={58}
+      alignItems="center"
+      backgroundColor="fill.paper"
+      borderBottom="1px solid"
+      borderColor="text.quaternary"
+      position="fixed"
+      display="flex"
+      flexDirection="row"
+      justifyContent="space-between"
+      boxShadow="small"
+      top={0}
+      left={0}
+      right={0}
+      zIndex={999}
+    >
+      <Box>
+        <ChurchLogo size="30px" />
+      </Box>
+
+      <ProfileButton />
+    </Box>
+    <Box height={58} />
+  </>
+);
+
+export default AppHeader;
diff --git a/packages/web-shared/components/AppHeader/index.js b/packages/web-shared/components/AppHeader/index.js
@@ -0,0 +1,3 @@
+import AppHeader from './AppHeader';
+
+export default AppHeader;
diff --git a/packages/web-shared/components/Auth/AuthConfirm.js b/packages/web-shared/components/Auth/AuthConfirm.js
@@ -11,7 +11,7 @@ import AuthLayout from './AuthLayout';
 import authSteps from './authSteps';
 import { useAnalytics } from '../../providers/AnalyticsProvider';
 
-const AuthConfirm = () => {
+const AuthConfirm = (props) => {
   const [status, setStatus] = useState('IDLE');
   const [error, setError] = useState(null);
   const [state, dispatch] = useAuth();
@@ -63,7 +63,7 @@ const AuthConfirm = () => {
           email: user?.email,
           phone: user?.phone,
           numberOfSharedProfiles: sharedProfiles.length,
-        });        
+        });
         dispatch(
           updateAuth({
             token,
@@ -77,7 +77,7 @@ const AuthConfirm = () => {
           userId: user?.id,
           email: user?.email,
           phone: user?.phone,
-        });   
+        });
         if (needsOnboarding) {
           dispatch(
             updateAuth({
@@ -130,6 +130,7 @@ const AuthConfirm = () => {
 
   return (
     <AuthLayout
+      {...props}
       heading="We sent you a code..."
       subHeading={`Verify the code we sent to your ${state.type === 'email' ? 'email' : 'phone'}.`}
     >

diff --git a/packages/web-shared/components/Auth/AuthDetails.js b/packages/web-shared/components/Auth/AuthDetails.js
@@ -1,11 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-import {
-  useForm,
-  useUpdateProfileFields,
-  useCurrentUser,
-  useCompleteRegister,
-} from '../../hooks';
+import { useForm, useUpdateProfileFields, useCurrentUser, useCompleteRegister } from '../../hooks';
 import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
 import { Box, Button, Input, Select } from '../../ui-kit';
 import authSteps from '../Auth/authSteps';
@@ -16,7 +11,7 @@ function upperFirst(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-function AuthDetails() {
+function AuthDetails(props) {
   const [status, setStatus] = useState('IDLE');
   const [error, setError] = useState(null);
   const [user, setUser] = useState(null);
@@ -61,6 +56,7 @@ function AuthDetails() {
 
   return (
     <AuthLayout
+      {...props}
       heading="Complete your profile"
       subHeading="Help us learn a little more about you so we can connect you with the
     best ministries and events."

diff --git a/packages/web-shared/components/Auth/AuthIdentity.js b/packages/web-shared/components/Auth/AuthIdentity.js
@@ -7,7 +7,7 @@ import { Button, Input, SmallSystemText, Box } from '../../ui-kit';
 import { validateEmail, validatePhoneNumber } from '../../utils';
 import AuthLayout from './AuthLayout';
 
-const AuthIdentity = () => {
+const AuthIdentity = (props) => {
   const [status, setStatus] = useState('IDLE');
   const [error, setError] = useState(null);
   const [state, dispatch] = useAuth();
@@ -72,9 +72,7 @@ const AuthIdentity = () => {
       setStatus('LOADING');
       requestLogin({
         variables: {
-          identity: validEmail
-            ? { email: values.identity }
-            : { phone: values.identity },
+          identity: validEmail ? { email: values.identity } : { phone: values.identity },
         },
       });
     } else {
@@ -87,9 +85,8 @@ const AuthIdentity = () => {
 
   return (
     <AuthLayout
-      heading={
-        state.type === 'login' ? 'Welcome back!' : 'We’re glad you’re here.'
-      }
+      {...props}
+      heading={state.type === 'login' ? 'Welcome back!' : 'We’re glad you’re here.'}
       subHeading={
         state.type === 'login'
           ? 'Use the same phone number or email that you used when logging into the app before.'

diff --git a/packages/web-shared/components/Auth/AuthLayout/AuthLayout.js b/packages/web-shared/components/Auth/AuthLayout/AuthLayout.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CaretLeft } from '@phosphor-icons/react';
+import { CaretLeft, X } from '@phosphor-icons/react';
 
 import { Box, Card, Button } from '../../../ui-kit';
 import customizations from './customizations';
@@ -47,7 +47,19 @@ function AuthLayout(props = {}) {
             flexDirection="row-reverse"
             icon={<CaretLeft />}
           />
-        ) : null}
+        ) : (
+          <Button
+            variant="link"
+            title="Close"
+            onClick={props.onClose}
+            alignSelf="flex-end"
+            color="text.action"
+            alignItems="center"
+            display="flex"
+            flexDirection="row-reverse"
+            icon={<X />}
+          />
+        )}
         <Heading>{props.heading || customizations.defaulthHeading}</Heading>
         <SubHeading>{props.subHeading || customizations.defaultSubHeading}</SubHeading>
         {props.children}

diff --git a/packages/web-shared/components/Auth/AuthManager.js b/packages/web-shared/components/Auth/AuthManager.js
@@ -15,25 +15,25 @@ function AuthManager(props = {}) {
   const render = () => {
     switch (step) {
       case authSteps.Welcome: {
-        return <Welcome />;
+        return <Welcome {...props} />;
       }
       case authSteps.Identity: {
-        return <Identity />;
+        return <Identity {...props} />;
       }
       case authSteps.Details: {
-        return <Details />;
+        return <Details {...props} />;
       }
       case authSteps.Merge: {
-        return <Merge />;
+        return <Merge {...props} />;
       }
       case authSteps.Confirm: {
-        return <Confirm />;
+        return <Confirm {...props} />;
       }
       case authSteps.Success: {
         return null;
       }
       default: {
-        return <Welcome />;
+        return <Welcome {...props} />;
       }
     }
   };

diff --git a/packages/web-shared/components/Auth/AuthWelcome.js b/packages/web-shared/components/Auth/AuthWelcome.js
@@ -5,15 +5,15 @@ import { Box, Button } from '../../ui-kit';
 import AuthLayout from './AuthLayout';
 import steps from './authSteps';
 
-const AuthWelcome = () => {
+const AuthWelcome = (props) => {
   const [state, dispatch] = useAuth();
 
   const handleSubmit = async ({ step, type }) => {
     dispatch(updateAuth({ step, type }));
   };
 
   return (
-    <AuthLayout>
+    <AuthLayout {...props}>
       <Box flexDirection="row">
         <Button
           mr="base"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import AppHeader from './AppHeader';

		export default AppHeader;