Add close button

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'}.`}
     >

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."

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.'

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}

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} />;
       }
     }
   };

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"

packages/web-shared/components/Profile/Profile.js

@@ -256,7 +256,9 @@ const Profile = ({ theme, handleCloseProfile, ...rest }) => {
           ) : null}
         </Styled.ProfileCard>
       </Styled.Profile>
-      {showAuth && state.step !== authSteps.Success ? <AuthManager /> : null}
+      {showAuth && state.step !== authSteps.Success ? (
+        <AuthManager onClose={() => setShowAuth(false)} />
+      ) : null}
     </>
   );
 };