@bigbinary/neeto-commons-rn 1.8.4 → 2.0.2

package/src/screens/authentication/AuthOptions.tsx

@@ -0,0 +1,254 @@
+import React from "react";
+import { Platform, StyleSheet } from "react-native";
+
+import {
+  Alert,
+  Button,
+  Container,
+  Divider,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+import appleAuth from "@invertase/react-native-apple-authentication";
+import {
+  GoogleSignin,
+  isErrorWithCode,
+  isSuccessResponse,
+} from "@react-native-google-signin/google-signin";
+
+import {
+  GOOGLE_LOGIN_ERRORS,
+  MAX_RETRY_ATTEMPTS,
+  RETRYABLE_ERROR_CODES,
+} from "./constants";
+
+import { SocialButton } from "../../components/SocialButton";
+import { bugsnagErrorHandler } from "../../config/bugsnag";
+import { useLocalization } from "../../contexts/localization";
+import { removeSecureValue } from "../../helpers/keychain";
+import { moderateScale } from "../../helpers/scale";
+import { useAuth } from "../../hooks/query/useAuth";
+
+type LoginType = "email" | "google" | "apple";
+
+export interface AuthOptionsProps {
+  handleSubmit: () => void;
+  buttonLoading?: boolean;
+}
+
+export const AuthOptions = ({
+  handleSubmit,
+  buttonLoading = false,
+}: AuthOptionsProps) => {
+  const { strings } = useLocalization();
+
+  const { useLoginViaGoogleMutation, useLoginViaAppleMutation } = useAuth();
+
+  const { mutate: loginViaGoogle, isPending: isLoginViaGoogleLoading } =
+    useLoginViaGoogleMutation();
+
+  const { mutate: loginViaApple, isPending: isLoginViaAppleLoading } =
+    useLoginViaAppleMutation();
+
+  const onGoogleButtonPress = async (retryCount = 0) => {
+    try {
+      const signedInUsingGoogle = GoogleSignin.hasPreviousSignIn();
+      if (signedInUsingGoogle) {
+        await GoogleSignin.signOut();
+      }
+
+      await GoogleSignin.hasPlayServices({
+        showPlayServicesUpdateDialog: true,
+      });
+
+      const authResponse = await GoogleSignin.signIn();
+
+      if (isSuccessResponse(authResponse)) {
+        const { serverAuthCode } = authResponse.data;
+
+        // Google types serverAuthCode as nullable. R.isEmpty(null) is false,
+        // so the previous isEmpty guard let a null code through to the API.
+        if (!serverAuthCode) {
+          bugsnagErrorHandler(
+            JSON.stringify(authResponse),
+            "Empty serverAuthCode in GoogleLogin"
+          );
+        } else {
+          loginViaGoogle({ serverAuthCode });
+        }
+      }
+    } catch (error) {
+      if (isErrorWithCode(error)) {
+        if (
+          RETRYABLE_ERROR_CODES.includes(error.code) &&
+          retryCount < MAX_RETRY_ATTEMPTS
+        ) {
+          Alert.show({
+            title: strings.commons.errors.googleSignIn.retryTitle,
+            description: strings.commons.errors.googleSignIn.retryableError,
+            buttons: [
+              {
+                label: strings.commons.buttons.retry,
+                onPress: () => onGoogleButtonPress(retryCount + 1),
+              },
+              { label: strings.commons.buttons.cancel, onPress: () => {} },
+            ],
+          });
+        } else if (retryCount >= MAX_RETRY_ATTEMPTS) {
+          Alert.show({
+            title: strings.commons.errors.googleSignIn.failureTitle,
+            description: strings.commons.errors.googleSignIn.maxRetries,
+          });
+        } else {
+          let errorMessage = strings.commons.errors.googleSignIn.default;
+
+          switch (error.code) {
+            case GOOGLE_LOGIN_ERRORS.SIGN_IN_CANCELLED:
+              return; // User cancelled the login flow
+            case GOOGLE_LOGIN_ERRORS.PLAY_SERVICES_NOT_AVAILABLE:
+              errorMessage =
+                strings.commons.errors.googleSignIn.playServicesNotAvailable;
+              break;
+            case GOOGLE_LOGIN_ERRORS.SIGN_IN_REQUIRED:
+              errorMessage = strings.commons.errors.googleSignIn.signInRequired;
+              break;
+            case GOOGLE_LOGIN_ERRORS.INVALID_ACCOUNT:
+              errorMessage = strings.commons.errors.googleSignIn.invalidAccount;
+              break;
+            case GOOGLE_LOGIN_ERRORS.RESOLUTION_REQUIRED:
+              errorMessage =
+                strings.commons.errors.googleSignIn.resolutionRequired;
+              break;
+            case GOOGLE_LOGIN_ERRORS.API_NOT_CONNECTED:
+              errorMessage =
+                strings.commons.errors.googleSignIn.apiNotConnected;
+              break;
+            case GOOGLE_LOGIN_ERRORS.DEVELOPER_ERROR:
+              errorMessage = strings.commons.errors.googleSignIn.developerError;
+              break;
+          }
+
+          Alert.show({
+            title: strings.commons.errors.googleSignIn.failureTitle,
+            description: errorMessage,
+          });
+
+          bugsnagErrorHandler(
+            JSON.stringify({
+              code: error.code,
+              message: error.message,
+            }),
+            "Google Sign-in API Error in GoogleLogin"
+          );
+        }
+      } else {
+        bugsnagErrorHandler(error as Error, "Error in GoogleLogin");
+      }
+    }
+  };
+
+  const onAppleButtonPress = async () => {
+    try {
+      const { identityToken, authorizationCode } =
+        await appleAuth.performRequest({
+          requestedOperation: appleAuth.Operation.LOGIN,
+          requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
+        });
+
+      // Apple types both credentials as nullable, and the API needs both.
+      if (!identityToken || !authorizationCode) {
+        bugsnagErrorHandler(
+          "Missing identityToken or authorizationCode in AppleLogin",
+          "Empty credentials in AppleLogin"
+        );
+
+        return;
+      }
+
+      loginViaApple({ identityToken, authorizationCode });
+    } catch (error) {
+      if (
+        !["1000", "1001"].includes((error as { code?: string })?.code ?? "")
+      ) {
+        bugsnagErrorHandler(error as Error, "AppleLogin");
+        await removeSecureValue("userAuth");
+      }
+    }
+  };
+
+  const handleOnLogin = async (type: LoginType) => {
+    await removeSecureValue("userAuth");
+    switch (type) {
+      case "email":
+        handleSubmit();
+        break;
+      case "google":
+        onGoogleButtonPress();
+        break;
+      case "apple":
+        onAppleButtonPress();
+        break;
+    }
+  };
+
+  return (
+    <Container>
+      <Button
+        isLoading={buttonLoading}
+        label={strings.commons.buttons.continue}
+        onPress={() => handleOnLogin("email")}
+      />
+      <Container style={styles.separatorRow}>
+        <Divider
+          orientation="horizontal"
+          style={styles.separatorRule}
+          thickness={1}
+        />
+        <Typography
+          style={styles.separatorLabel}
+          variant="subtext"
+          weight="regular"
+        >
+          {strings.commons.conditionals.OR}
+        </Typography>
+        <Divider
+          orientation="horizontal"
+          style={styles.separatorRule}
+          thickness={1}
+        />
+      </Container>
+      <SocialButton
+        isLoading={isLoginViaGoogleLoading}
+        variant="google"
+        onPress={() => handleOnLogin("google")}
+      />
+      {Platform.OS === "ios" && appleAuth.isSupported && (
+        <SocialButton
+          isLoading={isLoginViaAppleLoading}
+          style={styles.appleButton}
+          variant="apple"
+          onPress={() => handleOnLogin("apple")}
+        />
+      )}
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  appleButton: {
+    marginTop: moderateScale(24),
+  },
+  separatorRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginVertical: 32,
+  },
+  separatorRule: {
+    backgroundColor: lightTheme.colors.palette.grey400,
+    flex: 1,
+  },
+  separatorLabel: {
+    marginHorizontal: 2,
+  },
+});

package/src/screens/authentication/IncompleteOnboardingInfo.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback } from "react";
+import { Linking, StyleSheet } from "react-native";
+
+import {
+  Container,
+  ParentView,
+  Touchable,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+import Config from "react-native-config";
+import Icon from "react-native-remix-icon";
+
+import { HyperlinkText } from "../../components/HyperlinkText";
+import { useLocalization } from "../../contexts/localization";
+import { moderateScale } from "../../helpers/scale";
+import {
+  type CommonsParamList,
+  type CommonsScreenProps,
+} from "../../navigation/types";
+
+export const IncompleteOnboardingInfo = ({
+  navigation,
+  route,
+}: CommonsScreenProps<"UnBoarded">) => {
+  const {
+    strings: {
+      commons: { unboardedOrganization },
+      formatString,
+    },
+  } = useLocalization();
+
+  // The navigator types params as required, but a host app can still push
+  // this route without them; the fallback keeps the pre-TypeScript
+  // behaviour of rendering with empty values instead of throwing.
+  const { name, subdomain } =
+    route.params ?? ({} as CommonsParamList["UnBoarded"]);
+
+  const webAppLink = `https://${subdomain}${Config.URL_SUFFIX}`;
+  // Needs to handled once we the implementation in place.
+  const helpLink = `https://${subdomain}${Config.URL_SUFFIX}/support`;
+
+  const onBackPress = useCallback(() => {
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    }
+  }, [navigation]);
+
+  const handleOnPressURL = useCallback(
+    (url: string) => Linking.openURL(url),
+    []
+  );
+
+  // ParentView is already `flex: 1` and defaults its background to the
+  // theme's `background.primary`, which is what `bg="background.primary"`
+  // asked for.
+  return (
+    <ParentView barStyle="dark-content">
+      <Container style={styles.header}>
+        {/* v3's ripple config dropped `isCentered`; nothing replaces it. */}
+        <Touchable
+          hitSlop={10}
+          rippleConfig={{ shouldOverflowContainer: true }}
+          style={styles.backButton}
+          onPress={onBackPress}
+        >
+          <Icon name="arrow-left-s-line" size={moderateScale(24)} />
+        </Touchable>
+      </Container>
+      <Container style={styles.body}>
+        <Typography variant="modalHeader">
+          {formatString(unboardedOrganization.title, name)}
+        </Typography>
+        <HyperlinkText
+          linkStyleProps={{ color: lightTheme.colors.primary }}
+          textStyleProps={{ style: styles.infoMessage }}
+          linkMapping={{
+            [helpLink]: unboardedOrganization.supportLabel,
+            [webAppLink]: unboardedOrganization.appLinkLabel,
+          }}
+          text={formatString(
+            unboardedOrganization.infoMessage,
+            webAppLink,
+            helpLink
+          )}
+          onPress={handleOnPressURL}
+        />
+      </Container>
+    </ParentView>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    alignItems: "center",
+    flexDirection: "row",
+    height: moderateScale(44),
+    paddingHorizontal: moderateScale(16),
+  },
+  backButton: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  body: {
+    marginHorizontal: moderateScale(16),
+  },
+  infoMessage: {
+    marginTop: moderateScale(16),
+  },
+});

package/src/screens/authentication/LoginScreen.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect } from "react";
+import { Platform, StyleSheet } from "react-native";
+
+import {
+  Container,
+  Input,
+  ParentView,
+  Toast,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+import { useFormik } from "formik";
+import Config from "react-native-config";
+import DeviceInfo from "react-native-device-info";
+import * as Yup from "yup";
+
+import { AuthOptions } from "./AuthOptions";
+
+import { ScreenHeader } from "../../components";
+import { useLocalization } from "../../contexts/localization";
+import { getItem } from "../../helpers/asyncStore";
+import {
+  getSecureValue,
+  setSecureValue,
+  removeSecureValue,
+} from "../../helpers/keychain";
+import { moderateScale } from "../../helpers/scale";
+import { useAuth } from "../../hooks/query/useAuth";
+
+const logError = (error: unknown) => {
+  // eslint-disable-next-line no-console
+  console.error("Error in clearing token:", error);
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  body: {
+    flex: 1,
+    marginHorizontal: 16,
+  },
+  inputWrapper: {
+    justifyContent: "space-around",
+    marginBottom: 32,
+    marginTop: 18,
+  },
+  versionText: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: moderateScale(50),
+    textAlign: "center",
+  },
+  androidVersionText: {
+    lineHeight: moderateScale(25),
+  },
+});
+
+export const LoginScreen = () => {
+  const { useGenerateOTPMutation } = useAuth();
+  const { mutate: generateOTP, isPending: isGeneratingOTP } =
+    useGenerateOTPMutation();
+
+  const { strings } = useLocalization();
+
+  const {
+    handleChange,
+    handleSubmit,
+    errors,
+    values,
+    isValid,
+    touched,
+    setFieldValue,
+  } = useFormik({
+    validationSchema: Yup.object().shape({
+      email: Yup.string().required().email(),
+    }),
+    validateOnBlur: true,
+    initialValues: { email: "" },
+    onSubmit: ({ email }) => {
+      if (isValid) {
+        generateOTP({ email });
+      }
+    },
+  });
+
+  const { email } = values;
+
+  useEffect(() => {
+    const checkEmaiLExists = async () => {
+      try {
+        const emailid = await getItem<string>("email");
+        if (emailid) handleChange("email")(emailid);
+      } catch (error) {
+        Toast.show({
+          type: "error",
+          text2: (error as Error)?.message,
+        });
+      }
+    };
+    checkEmaiLExists();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const clearToken = async () => {
+      try {
+        const userAuth = await getSecureValue("userAuth");
+        if (userAuth) {
+          const parsedAuth = JSON.parse(userAuth);
+          const { authToken, ...rest } = parsedAuth || {};
+          if (authToken) {
+            await setSecureValue("userAuth", JSON.stringify(rest));
+          }
+        }
+      } catch (error) {
+        logError(error);
+        await removeSecureValue("userAuth");
+      }
+    };
+
+    clearToken();
+  }, []);
+
+  return (
+    <ParentView
+      backgroundColor={lightTheme.colors.white}
+      barStyle="dark-content"
+      style={styles.screen}
+    >
+      <Container style={styles.body}>
+        {/*
+          The v2 `lineHeight` override has no v3 counterpart: ScreenHeader
+          takes only `title` and a container `style`, and sets the title's
+          line height itself on Android.
+        */}
+        <ScreenHeader title={strings.commons.headers.login} />
+        <Container style={styles.inputWrapper}>
+          <Input
+            autoCapitalize="none"
+            error={touched?.email ? errors?.email : ""}
+            keyboardType="email-address"
+            label={strings.commons.labels.Email}
+            value={email}
+            onBlur={() => setFieldValue("email", email.toLowerCase())}
+            onChangeText={handleChange("email")}
+          />
+        </Container>
+        <AuthOptions
+          buttonLoading={isGeneratingOTP}
+          handleSubmit={handleSubmit}
+        />
+      </Container>
+      <Typography
+        color={lightTheme.colors.palette.grey600}
+        size="xs"
+        weight="regular"
+        style={StyleSheet.flatten([
+          styles.versionText,
+          Platform.OS === "android" && styles.androidVersionText,
+        ])}
+      >
+        {Config.APP_DISPLAY_NAME}
+        {strings.commons.common.version}
+        {DeviceInfo.getVersion()}
+      </Typography>
+    </ParentView>
+  );
+};