@bigbinary/neeto-commons-rn 1.8.4 → 2.0.2

package/src/screens/authentication/OTPVerificationScreen.tsx

@@ -0,0 +1,235 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { StyleSheet } from "react-native";
+
+import {
+  Button,
+  Container,
+  Input,
+  ParentView,
+  Toast,
+  Touchable,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+import { useFocusEffect } from "@react-navigation/native";
+import Icon from "react-native-remix-icon";
+
+import { useLocalization } from "../../contexts/localization";
+import { useAuth } from "../../hooks/query/useAuth";
+import { type CommonsScreenProps } from "../../navigation/types";
+
+// eslint-disable-next-line @bigbinary/neeto/no-dangling-constants
+const RESEND_TIMER = 30;
+let interval: ReturnType<typeof setInterval> | null = null;
+
+export const OTPVerificationScreen = ({
+  navigation,
+  route: { params },
+}: CommonsScreenProps<"OTPVerification">) => {
+  const [code, setCode] = useState("");
+  const [resendTimer, setResendTimer] = useState(RESEND_TIMER);
+  const [startTimer, setStartTimer] = useState(false);
+
+  const isSubmittingRef = useRef(false);
+
+  const { email, userId } = params;
+  const { strings } = useLocalization();
+  const t = strings.commons.verificationScreen;
+
+  const { useVerifyOTPMutation, useGenerateOTPMutation } = useAuth();
+  const { mutate: mutateVerifyOTP, isPending: isVerifyingOTP } =
+    useVerifyOTPMutation();
+
+  const { mutateAsync: generateOTP, isPending: isGeneratingOTP } =
+    useGenerateOTPMutation();
+
+  const resendOTP = async () => {
+    try {
+      await generateOTP({ email, showCodeSentToast: true });
+      setResendTimer(RESEND_TIMER);
+    } catch {
+      // pass
+    }
+  };
+
+  const onHandleTextChange = (otp: string) => {
+    setCode(otp);
+    if (otp.length === 6) verifyOTP(otp);
+  };
+
+  const verifyOTP = (code: string) => {
+    if (isVerifyingOTP || isSubmittingRef.current) return;
+
+    if (code.length !== 6) {
+      Toast.show({
+        type: "warning",
+        text2: t.OTPRequired,
+      });
+    } else {
+      isSubmittingRef.current = true;
+      mutateVerifyOTP(
+        { code, userId },
+        {
+          onSettled: () => {
+            isSubmittingRef.current = false;
+          },
+        }
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (startTimer) {
+      interval = setInterval(() => {
+        setResendTimer(prev => {
+          if (prev === 1) {
+            clearInterval(interval as ReturnType<typeof setInterval>);
+          }
+
+          return prev - 1;
+        });
+      }, 1000);
+    }
+
+    // `interval` is null until the first tick is scheduled; clearing a null
+    // handle has always been the no-op it is today.
+    return () => clearInterval(interval as ReturnType<typeof setInterval>);
+  }, [startTimer]);
+
+  useEffect(() => {
+    if (resendTimer === RESEND_TIMER) {
+      setStartTimer(true);
+    }
+
+    if (resendTimer === 0) {
+      setStartTimer(false);
+    }
+  }, [resendTimer]);
+
+  useFocusEffect(
+    useCallback(() => {
+      setResendTimer(RESEND_TIMER);
+    }, [])
+  );
+
+  return (
+    <ParentView
+      backgroundColor={lightTheme.colors.white}
+      barStyle="dark-content"
+      style={styles.screen}
+    >
+      <Container style={styles.body}>
+        <Container style={styles.backRow}>
+          <Touchable
+            style={styles.backButton}
+            onPress={() => navigation?.goBack()}
+          >
+            <Icon
+              color={lightTheme.colors.palette.grey600}
+              name="arrow-left-s-line"
+              size={25}
+            />
+          </Touchable>
+        </Container>
+        <Typography
+          color={lightTheme.colors.palette.grey800}
+          style={styles.heading}
+          variant="header"
+          weight="semibold"
+        >
+          {strings.commons.headers.otpVerification}
+        </Typography>
+        <Typography
+          color={lightTheme.colors.palette.grey700}
+          size="s"
+          style={styles.description}
+          weight="regular"
+        >
+          {t.codeDescription1}
+          <Typography weight="semibold">{email}</Typography>
+          {t.codeDescription2}
+        </Typography>
+        <Input
+          autoFocus
+          keyboardType="phone-pad"
+          label={t.enterLoginCode}
+          maxLength={6}
+          value={code}
+          onChangeText={onHandleTextChange}
+        />
+        <Container style={styles.resendRow}>
+          {/*
+            v3's Button renders a spinner while loading and has no
+            `loadingText` slot, so `t.sendingOTP` no longer has a home.
+          */}
+          <Button
+            disabled={Boolean(resendTimer)}
+            isLoading={isGeneratingOTP}
+            variant="text"
+            // `formatString` returns a plain string whenever every argument is
+            // one, which is the case here.
+            label={
+              strings.formatString(
+                t.resendCode,
+                resendTimer ? `(${resendTimer})` : ""
+              ) as string
+            }
+            labelStyle={[
+              styles.resendLabel,
+              resendTimer ? styles.resendLabelWaiting : styles.resendLabelReady,
+            ]}
+            onPress={resendOTP}
+          />
+        </Container>
+        <Container>
+          <Button
+            disabled={code.length !== 6}
+            isLoading={isVerifyingOTP}
+            label={strings.commons.buttons.continue}
+            onPress={() => verifyOTP(code)}
+          />
+        </Container>
+      </Container>
+    </ParentView>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  body: {
+    flex: 1,
+    marginHorizontal: 16,
+  },
+  backRow: {
+    justifyContent: "center",
+    height: 42,
+    marginBottom: 18,
+  },
+  backButton: {
+    marginLeft: -14,
+    padding: 2,
+    width: 42,
+  },
+  heading: {
+    marginBottom: 2,
+  },
+  description: {
+    marginBottom: 24,
+  },
+  resendRow: {
+    alignItems: "center",
+    marginVertical: 16,
+  },
+  resendLabel: {
+    fontFamily: lightTheme.fonts.regular,
+    fontSize: lightTheme.fontSizes.s,
+  },
+  resendLabelWaiting: {
+    color: lightTheme.colors.palette.grey600,
+  },
+  resendLabelReady: {
+    color: lightTheme.colors.text.primary,
+  },
+});

package/src/screens/authentication/Organization.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { StyleSheet } from "react-native";
+
+import {
+  Avatar,
+  Container,
+  Touchable,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+import Icon from "react-native-remix-icon";
+
+import { moderateScale } from "../../helpers/scale";
+import { type Organization as OrganizationEntity } from "../../slices/auth";
+
+export interface OrganizationProps {
+  organization: OrganizationEntity;
+  onOrganizationSelect: (args: { organization: OrganizationEntity }) => void;
+  isSidePane?: boolean;
+}
+
+export const Organization = ({
+  organization,
+  onOrganizationSelect,
+  isSidePane = false,
+}: OrganizationProps) => {
+  const { organization_name, subdomain } = organization;
+
+  const showOrganizationDetails = () => (
+    <Container style={styles.details}>
+      <Typography
+        color={lightTheme.colors.text.primary}
+        size="xl"
+        weight="regular"
+      >
+        {organization_name}
+      </Typography>
+      <Typography
+        color={lightTheme.colors.palette.grey600}
+        size="xs"
+        weight="regular"
+      >
+        {subdomain}
+      </Typography>
+    </Container>
+  );
+
+  return (
+    <Touchable
+      style={styles.card}
+      onPress={() => onOrganizationSelect({ organization })}
+    >
+      {isSidePane ? (
+        <Container style={styles.sidePaneRow}>
+          <Container style={styles.avatar}>
+            <Avatar
+              imageUrl=""
+              name={organization_name ? organization_name.charAt(0) : ""}
+              variant="small"
+            />
+          </Container>
+          {showOrganizationDetails()}
+        </Container>
+      ) : (
+        showOrganizationDetails()
+      )}
+      <Icon
+        color={lightTheme.colors.primary}
+        name="arrow-right-s-line"
+        size={25}
+      />
+    </Touchable>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    // v2 passed the CSS `border={1}` shorthand, which React Native has no
+    // equivalent for; `borderWidth` is what it was reaching for alongside
+    // the borderColor/borderRadius below.
+    borderColor: lightTheme.colors.border.primary,
+    borderRadius: 8,
+    borderWidth: 1,
+    marginBottom: 18,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  details: {
+    justifyContent: "center",
+  },
+  sidePaneRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  avatar: {
+    marginRight: moderateScale(4),
+  },
+});

package/src/screens/authentication/SubDomainScreen.tsx

@@ -0,0 +1,176 @@
+import React, { useCallback, useState } from "react";
+import { StyleSheet } from "react-native";
+
+import {
+  Container,
+  FlashList,
+  ParentView,
+  SearchBar,
+  Touchable,
+  Typography,
+  lightTheme,
+} from "@bigbinary/neetoui-rn";
+import Icon from "react-native-remix-icon";
+
+import { Organization } from "./Organization";
+
+import { LineLoader } from "../../components";
+import { useLocalization } from "../../contexts/localization";
+import { moderateScale } from "../../helpers/scale";
+import { useAuth } from "../../hooks/query/useAuth";
+import { type CommonsScreenProps } from "../../navigation/types";
+import { type Organization as OrganizationEntity } from "../../slices/auth";
+
+export const SubDomainScreen = ({
+  navigation,
+  route: {
+    params: { organizations },
+  },
+}: CommonsScreenProps<"SubDomain">) => {
+  const { strings } = useLocalization();
+  const [searchTerm, setSearchTerm] = useState("");
+  const { useSelectOrganizationMutation } = useAuth();
+  const { mutate: selectOrganization, isPending: isSelectingOrganization } =
+    useSelectOrganizationMutation();
+
+  const onBackPress = useCallback(() => {
+    if (navigation.canGoBack()) {
+      navigation.goBack();
+    }
+  }, [navigation]);
+
+  const onOrganizationSelect = ({
+    organization,
+  }: {
+    organization: OrganizationEntity;
+  }) => {
+    selectOrganization({ organization });
+  };
+
+  const searchTermLowerCase = searchTerm.toLowerCase().trim();
+
+  const filteredOrganizations = !searchTermLowerCase
+    ? [...organizations]
+    : [...organizations].filter(
+        org =>
+          org.organization_name.toLowerCase().includes(searchTermLowerCase) ||
+          org.subdomain.toLowerCase().includes(searchTermLowerCase)
+      );
+
+  const renderHeader = () => (
+    <Container style={styles.header}>
+      <Typography
+        color={lightTheme.colors.palette.grey800}
+        style={styles.headerTitle}
+        variant="header"
+        weight="semibold"
+      >
+        {strings.commons.headers.subDomain}
+      </Typography>
+      <Container>
+        <Typography
+          color={lightTheme.colors.palette.grey600}
+          size="s"
+          style={styles.headerDescription}
+          weight="regular"
+        >
+          {strings.commons.subdomain.description1}
+          <Typography color={lightTheme.colors.text.primary} weight="bold">
+            {organizations[0].email}
+          </Typography>
+          {strings.commons.subdomain.description2}
+        </Typography>
+        {/*
+          v3's SearchBar owns its text; it has no `value` prop, so the screen
+          only mirrors it through onChangeText.
+        */}
+        <SearchBar
+          // `formatString` returns a plain string whenever every argument is
+          // one, which is the case here.
+          placeholder={
+            strings.formatString(
+              strings.commons.placeholders.search,
+              strings.commons.labels.Workspaces.toLowerCase()
+            ) as string
+          }
+          onChangeText={setSearchTerm}
+        />
+      </Container>
+    </Container>
+  );
+
+  return (
+    <ParentView
+      backgroundColor={lightTheme.colors.white}
+      barStyle="dark-content"
+      style={styles.screen}
+    >
+      <Container>
+        <Container style={styles.navBar}>
+          {/* 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>
+        <LineLoader isLoading={isSelectingOrganization} />
+      </Container>
+      <Container style={styles.body}>
+        {renderHeader()}
+        <FlashList
+          contentContainerStyle={styles.contentContainerStyle}
+          data={filteredOrganizations}
+          keyExtractor={item => item.id}
+          style={styles.flatListStyle}
+          renderItem={({ item }) => (
+            <Organization
+              organization={item}
+              onOrganizationSelect={onOrganizationSelect}
+            />
+          )}
+        />
+      </Container>
+    </ParentView>
+  );
+};
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+  },
+  navBar: {
+    alignItems: "center",
+    flexDirection: "row",
+    height: moderateScale(44),
+    paddingHorizontal: moderateScale(16),
+  },
+  backButton: {
+    marginLeft: moderateScale(-8),
+  },
+  body: {
+    flex: 1,
+    marginHorizontal: moderateScale(16),
+    marginTop: moderateScale(16),
+  },
+  header: {
+    justifyContent: "center",
+    marginBottom: 18,
+  },
+  headerTitle: {
+    lineHeight: moderateScale(28),
+    marginBottom: moderateScale(8),
+  },
+  headerDescription: {
+    marginBottom: moderateScale(8),
+  },
+  flatListStyle: {
+    marginBottom: 20,
+  },
+  contentContainerStyle: {
+    justifyContent: "center",
+  },
+});

package/src/screens/authentication/constants.ts

@@ -0,0 +1,30 @@
+import { statusCodes } from "@react-native-google-signin/google-signin";
+
+export const MAX_RETRY_ATTEMPTS = 3;
+
+export const GOOGLE_LOGIN_ERRORS = {
+  // Platform-independent codes exported by the library (values differ per
+  // platform — never hardcode them)
+  IN_PROGRESS: statusCodes.IN_PROGRESS,
+  PLAY_SERVICES_NOT_AVAILABLE: statusCodes.PLAY_SERVICES_NOT_AVAILABLE,
+  SIGN_IN_CANCELLED: statusCodes.SIGN_IN_CANCELLED,
+  SIGN_IN_REQUIRED: statusCodes.SIGN_IN_REQUIRED,
+  // Raw CommonStatusCodes the library does not export; still surface as
+  // error.code strings on Android
+  // Ref: https://developers.google.com/android/reference/com/google/android/gms/common/api/CommonStatusCodes#constants_1
+  INVALID_ACCOUNT: "5",
+  RESOLUTION_REQUIRED: "6",
+  NETWORK_ERROR: "7",
+  INTERNAL_ERROR: "8",
+  DEVELOPER_ERROR: "10",
+  INTERRUPTED: "14",
+  TIMEOUT: "15",
+  API_NOT_CONNECTED: "17",
+};
+
+export const RETRYABLE_ERROR_CODES = [
+  GOOGLE_LOGIN_ERRORS.NETWORK_ERROR,
+  GOOGLE_LOGIN_ERRORS.INTERRUPTED,
+  GOOGLE_LOGIN_ERRORS.TIMEOUT,
+  GOOGLE_LOGIN_ERRORS.INTERNAL_ERROR,
+];

package/src/screens/index.ts

@@ -0,0 +1,10 @@
+export { LoginScreen } from "./authentication/LoginScreen";
+export { OTPVerificationScreen } from "./authentication/OTPVerificationScreen";
+export { SubDomainScreen } from "./authentication/SubDomainScreen";
+export { IncompleteOnboardingInfo } from "./authentication/IncompleteOnboardingInfo";
+export { ProfileScreen } from "./profile/ProfileScreen";
+export { NotificationsScreen } from "./NotificationsScreen";
+export { ChatWidget } from "./profile/ChatWidget";
+export { default as TeamMembersScreen } from "./team_members";
+export { default as AddTeamMemberScreen } from "./team_members/Add";
+export { default as EditTeamMemberScreen } from "./team_members/Edit";

package/src/screens/profile/ChatWidget.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+import Config from "react-native-config";
+import { WebView } from "react-native-webview";
+
+export const ChatWidget = () => (
+  <WebView source={{ uri: Config.CHAT_SDK_URL ?? "" }} />
+);