@kiosinc/commons-rn 0.1.48 → 0.1.50

package/src/auth/screens/ResetPassword.tsx

@@ -1,7 +1,6 @@
 import {
   ParentView,
   Text,
-  View,
   TextInput,
   Button,
   KeyboardAvoidingView,
@@ -43,50 +42,46 @@ export const ResetPassword = () => {
   return (
     <ParentView px="16">
       <Header left={10} position={'absolute'} zIndex={'100'} />
-      <View flex={1} justifyContent={'center'}>
-        <KeyboardAvoidingView
-          alignSelf="center"
-          justifyContent={'center'}
-          width={{ phone: '100%', tablet: 372 }}
+      <KeyboardAvoidingView
+        justifyContent={'center'}
+        width={{ phone: '100%', tablet: 372 }}
+      >
+        <Text py="48" textAlign="center" variant="titleLarge">
+          {t('authentication.enterYour')}
+        </Text>
+        <Controller
+          control={control}
+          render={({ field: { onChange, onBlur, value } }) => {
+            return (
+              <TextInput
+                autoFocus
+                keyboardType="email-address"
+                autoCapitalize="none"
+                mode="outlined"
+                autoComplete="email"
+                error={!!errors.email?.message}
+                errorMessage={errors.email?.message}
+                onBlur={onBlur}
+                onChangeText={onChange}
+                value={value}
+                label={t('authentication.email')}
+              />
+            );
+          }}
+          name="email"
+        />
+        <Button
+          loading={isLoading}
+          mt="16"
+          mode="contained"
+          onPress={handleSubmit(onSubmit)}
         >
-          <View alignItems="center">
-            <Text py="48" textAlign="center" variant="titleLarge">
-              {t('authentication.enterYour')}
-            </Text>
-          </View>
-          <Controller
-            control={control}
-            render={({ field: { onChange, onBlur, value } }) => {
-              return (
-                <TextInput
-                  keyboardType="email-address"
-                  autoCapitalize="none"
-                  mode="outlined"
-                  autoComplete="email"
-                  error={!!errors.email?.message}
-                  errorMessage={errors.email?.message}
-                  onBlur={onBlur}
-                  onChangeText={onChange}
-                  value={value}
-                  label={t('authentication.email')}
-                />
-              );
-            }}
-            name="email"
-          />
-          <Button
-            loading={isLoading}
-            mt="16"
-            mode="contained"
-            onPress={handleSubmit(onSubmit)}
-          >
-            {t('authentication.resetPassword')}
-          </Button>
-          <Button mt="48" mode="outlined" onPress={navigation.goBack}>
-            {t('cancel')}
-          </Button>
-        </KeyboardAvoidingView>
-      </View>
+          {t('authentication.resetPassword')}
+        </Button>
+        <Button mt="48" mode="outlined" onPress={navigation.goBack}>
+          {t('cancel')}
+        </Button>
+      </KeyboardAvoidingView>
     </ParentView>
   );
 };

package/src/auth/screens/SignUp.tsx

@@ -67,127 +67,117 @@ export const SignUp = () => {
 
   return (
     <ParentView px="16">
-      <Header left={10} position={'absolute'} zIndex={'100'} />
-      <View flex={1} justifyContent={'center'}>
-        <KeyboardAvoidingView
-          flex={1}
-          behavior="padding"
-          alignSelf="center"
-          justifyContent={'center'}
-          width={{ phone: '100%', tablet: 372 }}
-        >
-          <View alignItems="center">
-            <Text pb="40" variant="titleLarge">
-              {t('authentication.createAccountTitle')}
-            </Text>
-          </View>
-          <View justifyContent="center">
-            <Controller
-              control={control}
-              render={({ field: { onChange, onBlur, value } }) => {
-                return (
-                  <TextInput
-                    my="5"
-                    mode="outlined"
-                    error={!!errors.displayName?.message}
-                    errorMessage={errors.displayName?.message}
-                    onBlur={onBlur}
-                    onChangeText={onChange}
-                    value={value}
-                    label={t('authentication.displayName')}
-                  />
-                );
-              }}
-              name="displayName"
-            />
-            {Config.APP_NAME !== 'gusteau' && (
-              <Controller
-                control={control}
-                render={({ field: { onChange, onBlur, value } }) => {
-                  return (
-                    <TextInput
-                      my="5"
-                      mode="outlined"
-                      error={!!errors.name?.message}
-                      errorMessage={errors.name?.message}
-                      onBlur={onBlur}
-                      onChangeText={onChange}
-                      value={value}
-                      label={t('authentication.businessName')}
-                    />
-                  );
-                }}
-                name="name"
+      <Header title={t('authentication.createAccountTitle')} />
+      <KeyboardAvoidingView
+        flex={1}
+        behavior="padding"
+        width={{ phone: '100%', tablet: 372 }}
+      >
+        <Controller
+          control={control}
+          render={({ field: { onChange, onBlur, value } }) => {
+            return (
+              <TextInput
+                autoFocus
+                my="5"
+                mode="outlined"
+                error={!!errors.displayName?.message}
+                errorMessage={errors.displayName?.message}
+                onBlur={onBlur}
+                onChangeText={onChange}
+                value={value}
+                label={t('authentication.displayName')}
+              />
+            );
+          }}
+          name="displayName"
+        />
+        {Config.APP_NAME !== 'gusteau' && (
+          <Controller
+            control={control}
+            render={({ field: { onChange, onBlur, value } }) => {
+              return (
+                <TextInput
+                  my="5"
+                  mode="outlined"
+                  error={!!errors.name?.message}
+                  errorMessage={errors.name?.message}
+                  onBlur={onBlur}
+                  onChangeText={onChange}
+                  value={value}
+                  label={t('authentication.businessName')}
+                />
+              );
+            }}
+            name="name"
+          />
+        )}
+        <Controller
+          control={control}
+          render={({ field: { onChange, onBlur, value } }) => {
+            return (
+              <TextInput
+                my="5"
+                autoCapitalize="none"
+                keyboardType="email-address"
+                mode="outlined"
+                autoComplete="email"
+                error={!!errors.email?.message}
+                errorMessage={errors.email?.message}
+                onBlur={onBlur}
+                onChangeText={onChange}
+                value={value}
+                label={t('authentication.email')}
+              />
+            );
+          }}
+          name="email"
+        />
+        <Controller
+          control={control}
+          render={({ field: { onChange, onBlur, value } }) => {
+            return (
+              <PhoneInput
+                placeholder="Phone Number"
+                onBlur={onBlur}
+                onChangePhoneNumber={onChange}
+                value={value}
+                defaultCountry="US"
+                errorMessage={errors.phoneNumber?.message}
+                selectedCountry={selectedCountry as ICountry}
+                onChangeSelectedCountry={setSelectedCountry}
               />
-            )}
-            <Controller
-              control={control}
-              render={({ field: { onChange, onBlur, value } }) => {
-                return (
-                  <TextInput
-                    my="5"
-                    autoCapitalize="none"
-                    keyboardType="email-address"
-                    mode="outlined"
-                    autoComplete="email"
-                    error={!!errors.email?.message}
-                    errorMessage={errors.email?.message}
-                    onBlur={onBlur}
-                    onChangeText={onChange}
-                    value={value}
-                    label={t('authentication.email')}
-                  />
-                );
-              }}
-              name="email"
-            />
-            <Controller
-              control={control}
-              render={({ field: { onChange, onBlur, value } }) => {
-                return (
-                  <PhoneInput
-                    placeholder="Phone Number"
-                    onBlur={onBlur}
-                    onChangePhoneNumber={onChange}
-                    value={value}
-                    defaultCountry="US"
-                    errorMessage={errors.phoneNumber?.message}
-                    selectedCountry={selectedCountry as ICountry}
-                    onChangeSelectedCountry={setSelectedCountry}
-                  />
-                );
-              }}
-              name="phoneNumber"
-            />
-          </View>
-          <Button
-            loading={isCheckingIsRegistered}
-            mt="48"
-            onPress={handleSubmit(onSubmit)}
-            mode="contained"
+            );
+          }}
+          name="phoneNumber"
+        />
+        <Button
+          loading={isCheckingIsRegistered}
+          mt="24"
+          onPress={handleSubmit(onSubmit)}
+          mode="contained"
+        >
+          {t('authentication.createAccount')}
+        </Button>
+        <View flexDirection="row" flexWrap="wrap" pt="10">
+          <Text variant="bodyMedium">{t('authentication.byContinue')} </Text>
+          <LinkButton
+            labelStyle={style.linkButton}
+            mode="text"
+            onPress={() => Linking.openURL(TERMS_OF_SERVICE)}
+          >
+            {t('authentication.termsAndConditions')}
+          </LinkButton>
+          <Text variant="bodyMedium"> {t('authentication.and')} </Text>
+          <LinkButton
+            labelStyle={style.linkButton}
+            mode="text"
+            onPress={() => Linking.openURL(PRIVACY_POLICY)}
           >
-            {t('authentication.createAccount')}
-          </Button>
-          <View flexDirection="row" flexWrap="wrap" pt="10">
-            <Text variant="bodyMedium">{t('authentication.byContinue')} </Text>
-            <LinkButton
-              labelStyle={style.linkButton}
-              mode="text"
-              onPress={() => Linking.openURL(TERMS_OF_SERVICE)}
-            >
-              {t('authentication.termsAndConditions')}
-            </LinkButton>
-            <Text variant="bodyMedium"> {t('authentication.and')} </Text>
-            <LinkButton
-              labelStyle={style.linkButton}
-              mode="text"
-              onPress={() => Linking.openURL(PRIVACY_POLICY)}
-            >
-              {t('authentication.privacyPolicy')}
-            </LinkButton>
-          </View>
-        </KeyboardAvoidingView>
-      </View>
+            {t('authentication.privacyPolicy')}
+          </LinkButton>
+        </View>
+      </KeyboardAvoidingView>
     </ParentView>
   );
 };

package/src/auth/screens/VerifyPhoneNumberForLogin.tsx

@@ -69,7 +69,7 @@ export const VerifyPhoneNumberForLogin: React.FC<
             >
               {t('authentication.codeSent', {
                 phoneNumber: params.phoneNumber,
-              })}{' '}
+              })}
             </Text>
           </View>
           <Controller

package/src/components/OtpInputs.tsx

@@ -1,5 +1,5 @@
 import { InteractionManager, Keyboard, StyleSheet } from 'react-native';
-import React, { useEffect } from 'react';
+import React, { forwardRef, useEffect } from 'react';
 import {
   TextInput as T,
   type TextInputProps,
@@ -49,11 +49,11 @@ type Props = RestyleProps &
     errorMessage?: string;
   };
 
-export const TextInput = ({ ...rest }: Props) => {
+export const TextInput = forwardRef(({ ...rest }: Props, ref: any) => {
   const props = useRestyle(restyleFunctions as any, rest);
 
-  return <T {...props} />;
-};
+  return <T {...props} ref={ref} />;
+});
 
 type OtpInputsPropsType = {
   handleChange?: (value: string) => void;

package/src/components/ParentView.tsx

@@ -59,7 +59,6 @@ type Props = RestyleProps &
   ViewProps & {
     barStyle?: StatusBarStyle;
     children?: React.ReactNode;
-    shouldDismissKeyboardOnTap?: boolean;
     topInset?: boolean;
     rightInset?: boolean;
     leftInset?: boolean;
@@ -103,12 +102,10 @@ export const ParentView = ({
   rightInset = true,
   leftInset = true,
   bottomInset = true,
-  shouldDismissKeyboardOnTap = true,
   ...rest
 }: Props) => {
   const props = useRestyle(restyleFunctions as any, rest);
 
-  const keyboardHeight = useKeyboard();
   const safeAreaViewProps = {
     edges: [
       ...(topInset ? ['top'] : []),
@@ -119,17 +116,6 @@ export const ParentView = ({
 
   const insets = useSafeAreaInsets();
 
-  const handleOnTouchStart = (e: any) => {
-    if (
-      keyboardHeight &&
-      e?.target?._internalFiberInstanceHandleDEV?.elementType?.indexOf(
-        'TextInput'
-      ) === -1
-    ) {
-      Keyboard.dismiss();
-    }
-  };
-
   const theme = useTheme();
 
   return (
@@ -147,9 +133,6 @@ export const ParentView = ({
         bg={bg ?? 'background'}
         {...(props as any)}
         {...(bottomInset && { pb: insets.bottom })}
-        {...(shouldDismissKeyboardOnTap
-          ? { onTouchStart: handleOnTouchStart }
-          : {})}
       >
         {children}
       </View>

package/src/selectBusiness/SelectBusiness.tsx

@@ -13,7 +13,7 @@ import {
 } from '../components';
 import { FlashList } from '@shopify/flash-list';
 import { useTranslation } from 'react-i18next';
-import { useTheme } from 'react-native-paper';
+import { ActivityIndicator, useTheme } from 'react-native-paper';
 import { useMMKVString } from 'react-native-mmkv';
 import { type NavigationProp, useNavigation } from '@react-navigation/native';
 import { useQueryClient } from '@tanstack/react-query';
@@ -53,7 +53,7 @@ const BusinessCard = ({
       >
         <Text variant="bodyMedium">{business.name}</Text>
         {isSelectedBusiness && (
-          <Tick height={20} width={20} color={theme.colors.onBackground} />
+          <Tick height={20} width={20} fill={theme.colors.onBackground} />
         )}
       </View>
     </Card>
@@ -66,7 +66,13 @@ export const SelectBusiness = () => {
     MMKV_KEYS.BUSINESS_ID
   );
   const [searchText, setSearchText] = useState('');
-  const { data = [], isFetching, isRefetching, refetch } = useBusinesses();
+  const {
+    data = [],
+    isLoading,
+    isFetching,
+    isRefetching,
+    refetch,
+  } = useBusinesses();
 
   const navigation = useNavigation<NavigationProp<RootStackType>>();
   const queryClient = useQueryClient();
@@ -98,6 +104,24 @@ export const SelectBusiness = () => {
     }
   }, [searchText, data]);
 
+  useEffect(() => {
+    if (!selectedBusinessId && data.length === 1) {
+      setBusinessId((data[0] as any).id);
+    }
+  }, [data, selectedBusinessId, setBusinessId]);
+
+  if (isLoading || (!selectedBusinessId && data.length === 1))
+    return (
+      <ParentView
+        flex={1}
+        backgroundColor="background"
+        justifyContent={'center'}
+        alignItems={'center'}
+      >
+        <ActivityIndicator />
+      </ParentView>
+    );
+
   return (
     <ParentView flex={1} backgroundColor="background">
       <Header title={t('home.selectBusiness')} />
@@ -155,7 +179,7 @@ export const SelectBusiness = () => {
           )}
         </View>
         {!selectedBusinessId && (
-          <View flex={1} justifyContent="flex-end">
+          <View justifyContent="flex-end">
             <LinkButton mode="text" onPress={handleLogout}>
               {t('profile.logout')}
             </LinkButton>

package/src/selectBusiness/useBusinesses.ts

@@ -1,13 +1,16 @@
 import { useQuery } from '@tanstack/react-query';
 import { DEFAULT_STALE_TIME, queryKeys } from './queryKeys';
 import axios from 'axios';
+import { useAuthentication } from '../auth';
 
 export const getBusinessData = () => {
   return axios.get('/user/businessData');
 };
 
-export const useBusinesses = () =>
-  useQuery([queryKeys.BUSINESSES], getBusinessData, {
+export const useBusinesses = () => {
+  const { user } = useAuthentication();
+  return useQuery([queryKeys.BUSINESSES], getBusinessData, {
+    enabled: Boolean(user),
     staleTime: DEFAULT_STALE_TIME,
     select: (response) => {
       const businesses = response?.data?.businesses as Array<{
@@ -31,3 +34,4 @@ export const useBusinesses = () =>
       return businesses;
     },
   });
+};