diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx
index 662daa9..2edaa4e 100644
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@@ -23,8 +23,9 @@ import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
-import {useAtom, useSetAtom} from "jotai";
+import { useAtom, useSetAtom } from "jotai";
import {
+ isFamilyViewAtom,
settingsPageIndex,
toDosPageIndex,
userSettingsView,
@@ -32,6 +33,7 @@ import {
export default function TabLayout() {
const { mutateAsync: signOut } = useSignOut();
+ const setIsFamilyView = useSetAtom(isFamilyViewAtom);
const setPageIndex = useSetAtom(settingsPageIndex);
const setUserView = useSetAtom(userSettingsView);
const setToDosIndex = useSetAtom(toDosPageIndex);
@@ -79,6 +81,7 @@ export default function TabLayout() {
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
+ setIsFamilyView(false);
}}
icon={}
/>
@@ -91,6 +94,7 @@ export default function TabLayout() {
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
+ setIsFamilyView(false);
}}
icon={}
/>
@@ -118,6 +122,7 @@ export default function TabLayout() {
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
+ setIsFamilyView(false);
}}
icon={}
/>
@@ -130,6 +135,7 @@ export default function TabLayout() {
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
+ setIsFamilyView(false);
}}
icon={}
/>
@@ -142,6 +148,7 @@ export default function TabLayout() {
setPageIndex(0);
setToDosIndex(0);
setUserView(true);
+ setIsFamilyView(false);
}}
label={"Manage Settings"}
labelStyle={styles.label}
diff --git a/app/(unauth)/cal_sync.tsx b/app/(unauth)/cal_sync.tsx
new file mode 100644
index 0000000..0e9f15b
--- /dev/null
+++ b/app/(unauth)/cal_sync.tsx
@@ -0,0 +1,246 @@
+import {SafeAreaView} from "react-native-safe-area-context";
+import {Button, Text, View} from "react-native-ui-lib";
+import React from "react";
+import {useCalSync} from "@/hooks/useCalSync";
+import GoogleIcon from "@/assets/svgs/GoogleIcon";
+import AppleIcon from "@/assets/svgs/AppleIcon";
+import OutlookIcon from "@/assets/svgs/OutlookIcon";
+import {useAuthContext} from "@/contexts/AuthContext";
+import {StyleSheet} from "react-native";
+
+export default function Screen() {
+ const {profileData, setRedirectOverride} = useAuthContext()
+ const {handleStartGoogleSignIn, handleAppleSignIn, handleMicrosoftSignIn} = useCalSync()
+
+ const hasSomeCalendarsSynced =
+ !!profileData?.appleAccounts || !!profileData?.microsoftAccounts || !!profileData?.googleAccounts
+
+ return (
+
+
+
+
+ Let's get started!
+
+
+ Add your calendar below to sync events to your Cally calendar
+
+
+
+
+ {!profileData?.googleAccounts && (
+
+
+
+
+
+
+
+
+ )
+}
+
+const styles = StyleSheet.create({
+ addCalBtn: {
+ backgroundColor: "#ffffff",
+ marginBottom: 15,
+ justifyContent: "flex-start",
+ paddingLeft: 25,
+ },
+ backBtn: {
+ backgroundColor: "red",
+ marginLeft: -2,
+ justifyContent: "flex-start",
+ },
+ card: {
+ backgroundColor: "white",
+ width: "100%",
+ padding: 20,
+ paddingBottom: 30,
+ marginTop: 20,
+ borderRadius: 12,
+ },
+ noPaddingCard: {
+ backgroundColor: "white",
+ width: "100%",
+ marginTop: 20,
+ borderRadius: 12,
+ },
+ colorBox: {
+ aspectRatio: 1,
+ justifyContent: "center",
+ alignItems: "center",
+ width: 51,
+ borderRadius: 12,
+ },
+ checkbox: {
+ borderRadius: 50,
+ },
+ addCalLbl: {
+ fontSize: 16,
+ fontFamily: "PlusJakartaSan_500Medium",
+ flexWrap: "wrap",
+ width: "75%",
+ textAlign: "left",
+ lineHeight: 20,
+ overflow: "visible",
+ },
+ subTitle: {
+ fontFamily: "Manrope_600SemiBold",
+ fontSize: 18,
+ },
+ cardTitle: {
+ fontFamily: "Manrope_500Medium",
+ fontSize: 15,
+ },
+});
diff --git a/app/(unauth)/onboarding_flow/index.tsx b/app/(unauth)/connect.tsx
similarity index 80%
rename from app/(unauth)/onboarding_flow/index.tsx
rename to app/(unauth)/connect.tsx
index 8d09129..7abd451 100644
--- a/app/(unauth)/onboarding_flow/index.tsx
+++ b/app/(unauth)/connect.tsx
@@ -1,5 +1,5 @@
import Entry from "@/components/pages/main/Entry";
export default function Screen() {
- return ;
+ return ;
}
diff --git a/app/(unauth)/get_started.tsx b/app/(unauth)/get_started.tsx
new file mode 100644
index 0000000..f5788f2
--- /dev/null
+++ b/app/(unauth)/get_started.tsx
@@ -0,0 +1,169 @@
+import {SafeAreaView} from "react-native-safe-area-context";
+import {Button, Colors, Dialog, LoaderScreen, Text, View} from "react-native-ui-lib";
+import React, {useCallback, useState} from "react";
+import {useRouter} from "expo-router";
+import QRIcon from "@/assets/svgs/QRIcon";
+import {Camera, CameraView} from "expo-camera";
+import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode";
+import {useAuthContext} from "@/contexts/AuthContext";
+import debounce from "debounce";
+
+export default function Screen() {
+ const router = useRouter()
+ const {setRedirectOverride} = useAuthContext()
+ const [hasPermission, setHasPermission] = useState(null);
+ const [showCameraDialog, setShowCameraDialog] = useState(false);
+
+ const {mutateAsync: signInWithQrCode, isLoading} = useLoginWithQrCode();
+
+ const debouncedRouterReplace = useCallback(
+ debounce(() => {
+ router.push("/(unauth)/cal_sync");
+ }, 300),
+ []
+ );
+
+ const handleQrCodeScanned = async ({data}: { data: string }) => {
+ setShowCameraDialog(false);
+ setRedirectOverride(true);
+ try {
+ await signInWithQrCode({userId: data});
+ debouncedRouterReplace()
+ } catch (err) {
+ console.log(err)
+ }
+ };
+
+ const getCameraPermissions = async (callback: () => void) => {
+ const {status} = await Camera.requestCameraPermissionsAsync();
+ setHasPermission(status === "granted");
+ if (status === "granted") {
+ callback();
+ }
+ };
+
+ const handleOpenQrCodeDialog = () => {
+ getCameraPermissions(() => setShowCameraDialog(true));
+ }
+
+ return (
+
+
+
+
+ Get started with Cally
+
+
+
+
+
+
+
+
+
+
+ or
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Already have an account?
+
+
+
+
+
+ {/* Legacy, move into separate component */}
+ {/* Camera Dialog */}
+
+
+
+ {isLoading && (
+
+ )}
+
+ )
+}
diff --git a/app/(unauth)/index.tsx b/app/(unauth)/index.tsx
index 6bd604c..25d0cd0 100644
--- a/app/(unauth)/index.tsx
+++ b/app/(unauth)/index.tsx
@@ -1,10 +1,44 @@
-import Entry from "@/components/pages/main/Entry";
import {SafeAreaView} from "react-native-safe-area-context";
+import {Button, Image, Text, View} from "react-native-ui-lib";
+import React from "react";
+import {useRouter} from "expo-router";
export default function Screen() {
+ const router = useRouter()
+
return (
-
-
+
+
+
+
+
+
+
+
+ Welcome to Cally
+
+
+ Lightening Mental Loads,
+ One Family at a Time
+
+
+
+
+
+
+
+
)
-}
\ No newline at end of file
+}
diff --git a/app/(unauth)/onboarding_flow/_layout.tsx b/app/(unauth)/onboarding_flow/_layout.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/app/(unauth)/reset_password.tsx b/app/(unauth)/reset_password.tsx
new file mode 100644
index 0000000..ce263f1
--- /dev/null
+++ b/app/(unauth)/reset_password.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import {ResetPasswordPage} from "@/components/pages/main/ResetPasswordPage";
+
+export default function Screen() {
+ return
+}
diff --git a/app/(unauth)/sign_in.tsx b/app/(unauth)/sign_in.tsx
new file mode 100644
index 0000000..454fbef
--- /dev/null
+++ b/app/(unauth)/sign_in.tsx
@@ -0,0 +1,6 @@
+import SignInPage from "@/components/pages/main/SignInPage";
+import React from "react";
+
+export default function Screen() {
+ return
+}
diff --git a/app/(unauth)/sign_up.tsx b/app/(unauth)/sign_up.tsx
new file mode 100644
index 0000000..d653f37
--- /dev/null
+++ b/app/(unauth)/sign_up.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import SignUpPage from "@/components/pages/main/SignUpPage";
+
+export default function Screen() {
+ return (
+
+ )
+}
diff --git a/assets/svgs/CloseXIcon.tsx b/assets/svgs/CloseXIcon.tsx
index b072267..b040fe6 100644
--- a/assets/svgs/CloseXIcon.tsx
+++ b/assets/svgs/CloseXIcon.tsx
@@ -5,13 +5,14 @@ const CloseXIcon: React.FC = (props) => (
width={15}
height={15}
fill="none"
+ viewBox="0 0 15 15"
{...props}
>
diff --git a/assets/svgs/PlusIcon.tsx b/assets/svgs/PlusIcon.tsx
index 5e9af64..7acb9ad 100644
--- a/assets/svgs/PlusIcon.tsx
+++ b/assets/svgs/PlusIcon.tsx
@@ -4,6 +4,7 @@ const PlusIcon = (props: SvgProps) => (
+ );
};
const styles = StyleSheet.create({
- textfield: {
- backgroundColor: "white",
- marginVertical: 10,
- padding: 30,
- height: 45,
- borderRadius: 50,
- fontFamily: "PlusJakartaSans_300Light",
- },
- jakartaLight: {
- fontFamily: "PlusJakartaSans_300Light",
- fontSize: 16,
- color: "#484848",
- },
- jakartaMedium: {
- fontFamily: "PlusJakartaSans_500Medium",
- fontSize: 16,
- color: "#919191",
- textDecorationLine: "underline",
- },
+ textfield: {
+ backgroundColor: "white",
+ marginVertical: 10,
+ padding: 30,
+ height: 45,
+ borderRadius: 50,
+ fontFamily: "PlusJakartaSans_300Light",
+ },
+ jakartaLight: {
+ fontFamily: "PlusJakartaSans_300Light",
+ fontSize: 16,
+ color: "#484848",
+ },
+ jakartaMedium: {
+ fontFamily: "PlusJakartaSans_500Medium",
+ fontSize: 16,
+ color: "#919191",
+ textDecorationLine: "underline",
+ },
});
export default SignInPage;
diff --git a/components/pages/main/SignUpPage.tsx b/components/pages/main/SignUpPage.tsx
index 361dbb6..32f83b1 100644
--- a/components/pages/main/SignUpPage.tsx
+++ b/components/pages/main/SignUpPage.tsx
@@ -3,6 +3,9 @@ import {
Button,
ButtonSize,
Checkbox,
+ Colors,
+ KeyboardAwareScrollView,
+ LoaderScreen,
Text,
TextField,
TextFieldRef,
@@ -10,16 +13,15 @@ import {
View,
} from "react-native-ui-lib";
import {useSignUp} from "@/hooks/firebase/useSignUp";
-import {StyleSheet} from "react-native";
+import {KeyboardAvoidingView, StyleSheet} from "react-native";
import {AntDesign} from "@expo/vector-icons";
+import KeyboardManager from "react-native-keyboard-manager";
+import {SafeAreaView} from "react-native-safe-area-context";
+import {useRouter} from "expo-router";
-const SignUpPage = ({
- setTab,
- }: {
- setTab: React.Dispatch<
- React.SetStateAction<"register" | "login" | "reset-password">
- >;
-}) => {
+KeyboardManager.setEnableAutoToolbar(true);
+
+const SignUpPage = () => {
const [email, setEmail] = useState("");
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
@@ -28,154 +30,196 @@ const SignUpPage = ({
const [isPasswordVisible, setIsPasswordVisible] = useState(false);
const [allowFaceID, setAllowFaceID] = useState(false);
const [acceptTerms, setAcceptTerms] = useState(false);
- const {mutateAsync: signUp} = useSignUp();
+ const {mutateAsync: signUp, isLoading} = useSignUp();
const lnameRef = useRef(null);
const emailRef = useRef(null);
const passwordRef = useRef(null);
+ const router = useRouter()
+
const handleSignUp = async () => {
await signUp({email, password, firstName, lastName});
+ router.replace("/(unauth)/cal_sync")
};
return (
-
- Get started with Cally
-
- Please enter your details.
-
- {
- lnameRef.current?.focus();
- }}
- blurOnSubmit={false}
- />
- {
- emailRef.current?.focus();
- }}
- blurOnSubmit={false}
- />
- {
- passwordRef.current?.focus();
- }}
- blurOnSubmit={false}
- />
-
- setIsPasswordVisible(!isPasswordVisible)}
- >
-
-
- }
- />
-
-
-
- {
- setAllowFaceID(value);
- }}
- />
-
- Allow FaceID for login in future
-
-
-
- setAcceptTerms(value)}
- />
-
-
- I accept the
+
+
+
+
+
+ Get started with Cally
-
-
- {" "}
- terms and conditions
+
+ Please enter your details.
+
+
+
+
+ {
+ lnameRef.current?.focus();
+ }}
+ blurOnSubmit={false}
+ accessibilityLabel="First name input"
+ accessibilityHint="Enter your first name"
+ accessible
+ returnKeyType="next"
+ textContentType="givenName"
+ importantForAccessibility="yes"
+ />
+ {
+ emailRef.current?.focus();
+ }}
+ blurOnSubmit={false}
+ accessibilityLabel="Last name input"
+ accessibilityHint="Enter your last name"
+ accessible
+ returnKeyType="next"
+ textContentType="familyName"
+ importantForAccessibility="yes"
+ />
+ {
+ passwordRef.current?.focus();
+ }}
+ />
+
+
+ setIsPasswordVisible(!isPasswordVisible)}
+ >
+
+
+ }
+ />
+
+
+
+
+
+
+ {
+ setAllowFaceID(value);
+ }}
+ />
+
+ Allow FaceID for login in future
-
- and
-
-
- {" "}
- privacy policy
+
+
+ setAcceptTerms(value)}
+ />
+
+
+ I accept the
+
+
+
+ {" "}
+ terms and conditions
+
+
+ and
+
+
+ {" "}
+ privacy policy
+
+
+
+
+
+
+
+
+
+
+
+
+ Already have an account?
-
+
+
-
-
-
-
-
-
- Already have an account?
-
+
-
-
-
+ {isLoading && (
+
+ )}
+
);
};
@@ -192,8 +236,6 @@ const styles = StyleSheet.create({
fontSize: 13,
color: "#919191",
},
- //mora da se izmeni kako treba
- bottomView: {marginTop: "auto", marginBottom: 30, marginTop: "auto"},
jakartaLight: {
fontFamily: "PlusJakartaSans_300Light",
fontSize: 13,
diff --git a/components/pages/settings/CalendarSettingsPage.tsx b/components/pages/settings/CalendarSettingsPage.tsx
index 809d877..46ff557 100644
--- a/components/pages/settings/CalendarSettingsPage.tsx
+++ b/components/pages/settings/CalendarSettingsPage.tsx
@@ -1,851 +1,547 @@
-import { AntDesign, Ionicons } from "@expo/vector-icons";
-import React, { useCallback, useEffect, useState } from "react";
-import { Button, Checkbox, Text, View } from "react-native-ui-lib";
-import { ActivityIndicator, Alert, ScrollView, StyleSheet } from "react-native";
-import { TouchableOpacity } from "react-native-gesture-handler";
-import { useAuthContext } from "@/contexts/AuthContext";
-import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
+import {AntDesign, Ionicons} from "@expo/vector-icons";
+import React, {useCallback, useState} from "react";
+import {Button, Checkbox, Text, View} from "react-native-ui-lib";
+import {ActivityIndicator, ScrollView, StyleSheet} from "react-native";
+import {TouchableOpacity} from "react-native-gesture-handler";
+import {useAuthContext} from "@/contexts/AuthContext";
+import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
import debounce from "debounce";
import AppleIcon from "@/assets/svgs/AppleIcon";
import GoogleIcon from "@/assets/svgs/GoogleIcon";
import OutlookIcon from "@/assets/svgs/OutlookIcon";
-import * as AuthSession from "expo-auth-session";
-import * as Google from "expo-auth-session/providers/google";
-import * as WebBrowser from "expo-web-browser";
-import { UserProfile } from "@firebase/auth";
-import { useFetchAndSaveGoogleEvents } from "@/hooks/useFetchAndSaveGoogleEvents";
-import { useFetchAndSaveOutlookEvents } from "@/hooks/useFetchAndSaveOutlookEvents";
-import { useFetchAndSaveAppleEvents } from "@/hooks/useFetchAndSaveAppleEvents";
-import * as AppleAuthentication from "expo-apple-authentication";
import ExpoLocalization from "expo-localization/src/ExpoLocalization";
-import { colorMap } from "@/constants/colorMap";
-import { useAtom } from "jotai";
-import { settingsPageIndex } from "../calendar/atoms";
+import {colorMap} from "@/constants/colorMap";
+import {useSetAtom} from "jotai";
+import {settingsPageIndex} from "../calendar/atoms";
import CalendarSettingsDialog from "./calendar_components/CalendarSettingsDialog";
+import {useClearTokens} from "@/hooks/firebase/useClearTokens";
+import {useCalSync} from "@/hooks/useCalSync";
+import Feather from "@expo/vector-icons/Feather";
-const googleConfig = {
- androidClientId:
- "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
- iosClientId:
- "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
- webClientId:
- "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
- scopes: [
- "email",
- "profile",
- "https://www.googleapis.com/auth/calendar.events.owned",
- ],
-};
-
-const microsoftConfig = {
- clientId: "13c79071-1066-40a9-9f71-b8c4b138b4af",
- redirectUri: AuthSession.makeRedirectUri({ path: "settings" }),
- scopes: [
- "openid",
- "profile",
- "email",
- "offline_access",
- "Calendars.ReadWrite",
- "User.Read",
- ],
- authorizationEndpoint:
- "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
- tokenEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/token",
-};
const CalendarSettingsPage = () => {
- const { profileData } = useAuthContext();
- const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
- const [firstDayOfWeek, setFirstDayOfWeek] = useState(
- profileData?.firstDayOfWeek ??
- ExpoLocalization.getCalendars()[0].firstWeekday === 1
- ? "Mondays"
- : "Sundays"
- );
- const [isModalVisible, setModalVisible] = useState(false);
- const [selectedService, setSelectedService] = useState<
- "google" | "outlook" | "apple"
- >("google");
- const [selectedEmail, setSelectedEmail] = useState("");
+ const {profileData} = useAuthContext();
+ const setPageIndex = useSetAtom(settingsPageIndex);
- const showConfirmationDialog = (
- serviceName: "google" | "outlook" | "apple",
- email: string
- ) => {
- setSelectedService(serviceName);
- setSelectedEmail(email);
- setModalVisible(true);
- };
-
- const handleConfirm = () => {
- clearToken(selectedService, selectedEmail);
- setModalVisible(false);
- };
-
- const handleCancel = () => {
- setModalVisible(false);
- };
-
- const [selectedColor, setSelectedColor] = useState(
- profileData?.eventColor ?? colorMap.pink
- );
- const [previousSelectedColor, setPreviousSelectedColor] = useState(
- profileData?.eventColor ?? colorMap.pink
- );
-
- const { mutateAsync: updateUserData } = useUpdateUserData();
- const { mutateAsync: fetchAndSaveGoogleEvents, isLoading: isSyncingGoogle } =
- useFetchAndSaveGoogleEvents();
- const {
- mutateAsync: fetchAndSaveOutlookEvents,
- isLoading: isSyncingOutlook,
- } = useFetchAndSaveOutlookEvents();
- const { mutateAsync: fetchAndSaveAppleEvents, isLoading: isSyncingApple } =
- useFetchAndSaveAppleEvents();
-
- WebBrowser.maybeCompleteAuthSession();
- const [_, response, promptAsync] = Google.useAuthRequest(googleConfig);
-
- useEffect(() => {
- signInWithGoogle();
- }, [response]);
-
- const signInWithGoogle = async () => {
- try {
- if (response?.type === "success") {
- const accessToken = response.authentication?.accessToken;
-
- const userInfoResponse = await fetch(
- "https://www.googleapis.com/oauth2/v3/userinfo",
- {
- headers: { Authorization: `Bearer ${accessToken}` },
- }
- );
-
- const userInfo = await userInfoResponse.json();
- const googleMail = userInfo.email;
-
- let googleAccounts = profileData?.googleAccounts;
- const updatedGoogleAccounts = googleAccounts
- ? { ...googleAccounts, [googleMail]: accessToken }
- : { [googleMail]: accessToken };
-
- await updateUserData({
- newUserData: { googleAccounts: updatedGoogleAccounts },
- });
-
- await fetchAndSaveGoogleEvents({
- token: accessToken,
- email: googleMail,
- });
- }
- } catch (error) {
- console.error("Error during Google sign-in:", error);
- }
- };
-
- const handleMicrosoftSignIn = async () => {
- try {
- console.log("Starting Microsoft sign-in...");
-
- const authRequest = new AuthSession.AuthRequest({
- clientId: microsoftConfig.clientId,
- scopes: microsoftConfig.scopes,
- redirectUri: microsoftConfig.redirectUri,
- responseType: AuthSession.ResponseType.Code,
- usePKCE: true, // Enable PKCE
- });
-
- console.log("Auth request created:", authRequest);
-
- const authResult = await authRequest.promptAsync({
- authorizationEndpoint: microsoftConfig.authorizationEndpoint,
- });
-
- console.log("Auth result:", authResult);
-
- if (authResult.type === "success" && authResult.params?.code) {
- const code = authResult.params.code;
- console.log("Authorization code received:", code);
-
- // Exchange authorization code for tokens
- const tokenResponse = await fetch(microsoftConfig.tokenEndpoint, {
- method: "POST",
- headers: {
- "Content-Type": "application/x-www-form-urlencoded",
- },
- body: `client_id=${
- microsoftConfig.clientId
- }&redirect_uri=${encodeURIComponent(
- microsoftConfig.redirectUri
- )}&grant_type=authorization_code&code=${code}&code_verifier=${
- authRequest.codeVerifier
- }&scope=${encodeURIComponent(
- "https://graph.microsoft.com/Calendars.ReadWrite offline_access User.Read"
- )}`,
- });
-
- console.log("Token response status:", tokenResponse.status);
-
- if (!tokenResponse.ok) {
- const errorText = await tokenResponse.text();
- console.error("Token exchange failed:", errorText);
- return;
- }
-
- const tokenData = await tokenResponse.json();
- console.log("Token data received:", tokenData);
-
- if (tokenData?.access_token) {
- console.log("Access token received, fetching user info...");
-
- // Fetch user info from Microsoft Graph API to get the email
- const userInfoResponse = await fetch(
- "https://graph.microsoft.com/v1.0/me",
- {
- headers: {
- Authorization: `Bearer ${tokenData.access_token}`,
- },
- }
- );
-
- const userInfo = await userInfoResponse.json();
- console.log("User info received:", userInfo);
-
- if (userInfo.error) {
- console.error("Error fetching user info:", userInfo.error);
- } else {
- const outlookMail = userInfo.mail || userInfo.userPrincipalName;
-
- let microsoftAccounts = profileData?.microsoftAccounts;
- const updatedMicrosoftAccounts = microsoftAccounts
- ? { ...microsoftAccounts, [outlookMail]: tokenData.access_token }
- : { [outlookMail]: tokenData.access_token };
-
- // Update user data with Microsoft token and email
- await updateUserData({
- newUserData: { microsoftAccounts: updatedMicrosoftAccounts },
- });
-
- await fetchAndSaveOutlookEvents(
- tokenData.access_token,
- outlookMail
- );
- console.log("User data updated successfully.");
- }
- }
- } else {
- console.warn("Authentication was not successful:", authResult);
- }
- } catch (error) {
- console.error("Error during Microsoft sign-in:", error);
- }
- };
-
- const handleAppleSignIn = async () => {
- try {
- console.log("Starting Apple Sign-in...");
-
- const credential = await AppleAuthentication.signInAsync({
- requestedScopes: [
- AppleAuthentication.AppleAuthenticationScope.EMAIL,
- AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
- ],
- });
-
- console.log("Apple sign-in result:", credential);
-
- const appleToken = credential.identityToken;
- const appleMail = credential.email;
-
- if (appleToken) {
- console.log("Apple ID token received. Fetch user info if needed...");
-
- await updateUserData({
- newUserData: { appleToken, appleMail },
- });
-
- console.log("User data updated with Apple ID token.");
- await fetchAndSaveAppleEvents({ token: appleToken, email: appleMail! });
- } else {
- console.warn(
- "Apple authentication was not successful or email was hidden."
- );
- }
- } catch (error) {
- console.error("Error during Apple Sign-in:", error);
- }
- };
-
- const debouncedUpdateUserData = useCallback(
- debounce(async (color: string) => {
- try {
- await updateUserData({
- newUserData: {
- eventColor: color,
- },
- });
- } catch (error) {
- console.error("Failed to update color:", error);
- setSelectedColor(previousSelectedColor);
- }
- }, 500),
- []
- );
-
- const debouncedUpdateFirstDayOfWeek = useCallback(
- debounce(async (firstDayOfWeek: string) => {
- try {
- await updateUserData({
- newUserData: {
- firstDayOfWeek,
- },
- });
- } catch (error) {
- console.error("Failed to update first day of week:", error);
- }
- }, 500),
- []
- );
-
- const handleChangeFirstDayOfWeek = (firstDayOfWeek: string) => {
- setFirstDayOfWeek(firstDayOfWeek === "Sundays" ? "Mondays" : "Sundays");
- debouncedUpdateFirstDayOfWeek(
- firstDayOfWeek === "Sundays" ? "Mondays" : "Sundays"
+ const [firstDayOfWeek, setFirstDayOfWeek] = useState(
+ profileData?.firstDayOfWeek ??
+ ExpoLocalization.getCalendars()[0].firstWeekday === 1
+ ? "Mondays"
+ : "Sundays"
);
- };
+ const [isModalVisible, setModalVisible] = useState(false);
+ const [selectedService, setSelectedService] = useState<
+ "google" | "outlook" | "apple"
+ >("google");
+ const [selectedEmail, setSelectedEmail] = useState("");
- const handleChangeColor = (color: string) => {
- setPreviousSelectedColor(selectedColor);
- setSelectedColor(color);
- debouncedUpdateUserData(color);
- };
+ const showConfirmationDialog = (
+ serviceName: "google" | "outlook" | "apple",
+ email: string
+ ) => {
+ setSelectedService(serviceName);
+ setSelectedEmail(email);
+ setModalVisible(true);
+ };
- const clearToken = async (
- provider: "google" | "outlook" | "apple",
- email: string
- ) => {
- const newUserData: Partial = {};
- if (provider === "google") {
- let googleAccounts = profileData?.googleAccounts;
- if (googleAccounts) {
- googleAccounts[email] = null;
- newUserData.googleAccounts = googleAccounts;
- }
- } else if (provider === "outlook") {
- let microsoftAccounts = profileData?.microsoftAccounts;
- if (microsoftAccounts) {
- microsoftAccounts[email] = null;
- newUserData.microsoftAccounts = microsoftAccounts;
- }
- } else if (provider === "apple") {
- let appleAccounts = profileData?.appleAccounts;
- if (appleAccounts) {
- appleAccounts[email] = null;
- newUserData.appleAccounts = appleAccounts;
- }
- }
- await updateUserData({ newUserData });
- };
+ const handleConfirm = async () => {
+ await clearToken({email: selectedEmail, provider: selectedService});
+ setModalVisible(false);
+ };
- let isConnectedToGoogle = false;
- if (profileData?.googleAccounts) {
- Object.values(profileData?.googleAccounts).forEach((item) => {
- if (item !== null) {
- isConnectedToGoogle = true;
- return;
- }
- });
- }
+ const handleCancel = () => {
+ setModalVisible(false);
+ };
- let isConnectedToMicrosoft = false;
- const microsoftAccounts = profileData?.microsoftAccounts;
- if (microsoftAccounts) {
- Object.values(profileData?.microsoftAccounts).forEach((item) => {
- if (item !== null) {
- isConnectedToMicrosoft = true;
- return;
- }
- });
- }
+ const [selectedColor, setSelectedColor] = useState(
+ profileData?.eventColor ?? colorMap.pink
+ );
+ const [previousSelectedColor, setPreviousSelectedColor] = useState(
+ profileData?.eventColor ?? colorMap.pink
+ );
- let isConnectedToApple = false;
- if (profileData?.appleAccounts) {
- Object.values(profileData?.appleAccounts).forEach((item) => {
- if (item !== null) {
- isConnectedToApple = true;
- return;
- }
- });
- }
+ const {mutateAsync: updateUserData} = useUpdateUserData();
+ const {mutateAsync: clearToken} = useClearTokens();
- return (
-
- setPageIndex(0)}>
-
-
-
- Return to main settings
-
-
-
-
- Calendar settings
-
-
- Event Color Preference
-
-
- handleChangeColor(colorMap.pink)}>
-
- {selectedColor == colorMap.pink && (
-
- )}
-
-
- handleChangeColor(colorMap.orange)}
- >
-
- {selectedColor == colorMap.orange && (
-
- )}
-
-
- handleChangeColor(colorMap.green)}>
-
- {selectedColor == colorMap.green && (
-
- )}
-
-
- handleChangeColor(colorMap.teal)}>
-
- {selectedColor == colorMap.teal && (
-
- )}
-
-
- handleChangeColor(colorMap.purple)}
- >
-
- {selectedColor == colorMap.purple && (
-
- )}
-
-
-
-
-
- Weekly Start Date
-
- handleChangeFirstDayOfWeek("Sundays")}
- />
-
- Sundays
-
- {" "}
- (default)
-
-
-
-
- handleChangeFirstDayOfWeek("Mondays")}
- />
-
- Mondays
-
-
-
-
- Add Calendar
-
+ const {
+ isSyncingGoogle,
+ isSyncingOutlook,
+ isConnectedToGoogle,
+ isConnectedToMicrosoft,
+ isConnectedToApple,
+ handleAppleSignIn,
+ isSyncingApple,
+ handleMicrosoftSignIn,
+ fetchAndSaveOutlookEvents,
+ fetchAndSaveGoogleEvents,
+ handleStartGoogleSignIn,
+ fetchAndSaveAppleEvents
+ } = useCalSync()
-
+ );
};
const styles = StyleSheet.create({
- addCalBtn: {
- backgroundColor: "#ffffff",
- marginBottom: 15,
- justifyContent: "flex-start",
- paddingLeft: 25,
- },
- backBtn: {
- backgroundColor: "red",
- marginLeft: -2,
- justifyContent: "flex-start",
- },
- card: {
- backgroundColor: "white",
- width: "100%",
- padding: 20,
- paddingBottom: 30,
- marginTop: 20,
- borderRadius: 12,
- },
- noPaddingCard: {
- backgroundColor: "white",
- width: "100%",
- marginTop: 20,
- borderRadius: 12,
- },
- colorBox: {
- aspectRatio: 1,
- justifyContent: "center",
- alignItems: "center",
- width: 51,
- borderRadius: 12,
- },
- checkbox: {
- borderRadius: 50,
- },
- addCalLbl: {
- fontSize: 16,
- fontFamily: "PlusJakartaSan_500Medium",
- flexWrap: "wrap",
- width: "75%",
- textAlign: "left",
- lineHeight: 20,
- overflow: "visible",
- },
- subTitle: {
- fontFamily: "Manrope_600SemiBold",
- fontSize: 18,
- },
- cardTitle: {
- fontFamily: "Manrope_500Medium",
- fontSize: 15,
- },
+ addCalBtn: {
+ backgroundColor: "#ffffff",
+ marginBottom: 15,
+ justifyContent: "flex-start",
+ paddingLeft: 25,
+ },
+ backBtn: {
+ backgroundColor: "red",
+ marginLeft: -2,
+ justifyContent: "flex-start",
+ },
+ card: {
+ backgroundColor: "white",
+ width: "100%",
+ padding: 20,
+ paddingBottom: 30,
+ marginTop: 20,
+ borderRadius: 12,
+ },
+ noPaddingCard: {
+ backgroundColor: "white",
+ width: "100%",
+ marginTop: 20,
+ borderRadius: 12,
+ },
+ colorBox: {
+ aspectRatio: 1,
+ justifyContent: "center",
+ alignItems: "center",
+ width: 51,
+ borderRadius: 12,
+ },
+ checkbox: {
+ borderRadius: 50,
+ },
+ addCalLbl: {
+ fontSize: 16,
+ fontFamily: "PlusJakartaSan_500Medium",
+ flexWrap: "wrap",
+ width: "70%",
+ textAlign: "left",
+ lineHeight: 20,
+ overflow: "hidden",
+ },
+ subTitle: {
+ fontFamily: "Manrope_600SemiBold",
+ fontSize: 18,
+ },
+ cardTitle: {
+ fontFamily: "Manrope_500Medium",
+ fontSize: 15,
+ },
});
export default CalendarSettingsPage;
diff --git a/components/pages/settings/SettingsPage.tsx b/components/pages/settings/SettingsPage.tsx
index b999785..cbe0b6c 100644
--- a/components/pages/settings/SettingsPage.tsx
+++ b/components/pages/settings/SettingsPage.tsx
@@ -1,6 +1,6 @@
import { Button, Text, View } from "react-native-ui-lib";
import React, { useState } from "react";
-import { StyleSheet } from "react-native";
+import {Linking, StyleSheet} from "react-native";
import { Octicons } from "@expo/vector-icons";
import CalendarSettingsPage from "./CalendarSettingsPage";
import ChoreRewardSettings from "./ChoreRewardSettings";
@@ -21,11 +21,23 @@ const pageIndex = {
policy: 4,
};
+const PRIVACY_POLICY_URL = 'https://callyapp.com';
+
+
const SettingsPage = () => {
const { profileData } = useAuthContext();
const [pageIndex, setPageIndex] = useAtom(settingsPageIndex);
const isntParent = profileData?.userType !== ProfileType.PARENT;
+ const openPrivacyPolicy = async () => {
+ const supported = await Linking.canOpenURL(PRIVACY_POLICY_URL);
+ if (supported) {
+ await Linking.openURL(PRIVACY_POLICY_URL);
+ } else {
+ console.log("Don't know how to open this URL:", PRIVACY_POLICY_URL);
+ }
+ };
+
return (
{pageIndex == 0 && (
@@ -73,7 +85,8 @@ const SettingsPage = () => {
}}
/>
- }
- >
-
-
-
-
-
-
+
+
+ Enter email address
+
+
-
- {selectedStatus === ProfileType.FAMILY_DEVICE
- ? "Device Name"
- : "First Name"}
-
- {
- lNameRef.current?.focus();
- }}
- blurOnSubmit={false}
- returnKeyType="next"
- />
+ setShowAddUserDialog(false)}
+ center
+ marginT-30
+ >
+ Return to user settings
+
+
+
- {selectedStatus !== ProfileType.FAMILY_DEVICE && (
- <>
- Last Name
- {
- emailRef.current?.focus();
- }}
- blurOnSubmit={false}
- returnKeyType="next"
- />
-
- )}
+
-
- );
+ {pfpUri ? (
+
+
+ Clear user photo
+
+
+ ) : (
+
+
+ Upload User Profile Photo
+
+
+ )}
+
+
+
+ Member Status
+
+ setSelectedStatus(item)}
+ showSearch
+ floatingPlaceholder
+ style={styles.inViewPicker}
+ trailingAccessory={
+
+
+
+ }
+ >
+
+
+
+
+
+
+
+
+ {selectedStatus === ProfileType.FAMILY_DEVICE
+ ? "Device Name"
+ : "First Name"}
+
+ {
+ lNameRef.current?.focus();
+ }}
+ blurOnSubmit={false}
+ returnKeyType="next"
+ />
+
+ {selectedStatus !== ProfileType.FAMILY_DEVICE && (
+ <>
+ Last Name
+ {
+ emailRef.current?.focus();
+ }}
+ blurOnSubmit={false}
+ returnKeyType="next"
+ />
+
+ )}
+
+ {selectedStatus !== ProfileType.FAMILY_DEVICE && (
+ <>
+ Email Address (Optional)
+
+
+ )}
+
+