@kiosinc/commons-rn 0.1.85 → 0.1.87

package/src/components/OfflineStrip.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import { Text, View } from '@kiosinc/commons-rn';
+import NetInfo from '@react-native-community/netinfo';
+import { onlineManager } from '@tanstack/react-query';
+import { useMMKVBoolean } from 'react-native-mmkv';
+import { Icon, useTheme } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
+import { useTranslation } from 'react-i18next';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export const OfflineStrip = () => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const [isOnline, setIsOnline] = useMMKVBoolean('online');
+  useEffect(() => {
+    onlineManager.setEventListener((setOnline) => {
+      return NetInfo.addEventListener((state) => {
+        setIsOnline(!!state.isConnected);
+        setOnline(!!state.isConnected);
+      });
+    });
+  }, [setIsOnline]);
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <>
+      {!isOnline && (
+        <View
+          paddingBottom="10"
+          justifyContent="center"
+          style={[styles.view, { paddingTop: insets.top }]}
+        >
+          <Text color="scrim" textAlign="center">
+            {t('commons.offline')}
+            <Icon
+              color={theme.colors.scrim}
+              size={18}
+              source="network-strength-1-alert"
+            />
+          </Text>
+        </View>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  view: {
+    backgroundColor: '#FEB81A',
+  },
+});

package/src/components/SelectionDialog.tsx

@@ -82,7 +82,7 @@ export const SelectionDialog = () => {
 
   const [
     button1 = {
-      label: t('ok'),
+      label: t('commons.ok'),
       onPress: () => {},
       mode: 'text',
     },

package/src/components/Snackbar.tsx

@@ -67,7 +67,7 @@ export const Snackbar = () => {
       onDismiss={hide}
       action={
         action ?? {
-          label: t('close'),
+          label: t('commons.close'),
           onPress: hide,
         }
       }

package/src/components/index.ts

@@ -29,3 +29,4 @@ export { RefreshControl } from './RefreshControl';
 export { FirebaseMedia } from './FirebaseMedia';
 export { PhoneInput, type PCountry } from './PhoneInput';
 export { DelayedRender } from './DelayedRender';
+export { OfflineStrip } from './OfflineStrip';

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export { AssetManager } from './AssetManager';

package/src/hooks/index.ts

@@ -0,0 +1,9 @@
+export { useDeactivateAccount } from './useDeactivateAccount';
+export { useTermsOfService } from './useTermsOfService';
+export { useAuth } from './useAuth';
+export { useCustomerQueries } from './useCustomer';
+export { useCheckCustomer } from './useCheckCustomer';
+export { useAppVersionCheck } from './useAppVersionCheck';
+export { useBusinesses } from './useBusinesses';
+export { useLogout } from './useLogout';
+export { useCreateBusiness } from './useCreateBusiness';

package/src/hooks/useAppVersionCheck.ts

@@ -6,12 +6,14 @@ import { getVersion } from 'react-native-device-info';
 import { useEffect } from 'react';
 import semver from 'semver';
 import { Alert as AlertFromLibrary } from '../components';
+import { useTranslation } from 'react-i18next';
 
 export const useAppVersionCheck = ({
   Alert,
 }: {
   Alert: typeof AlertFromLibrary;
 }) => {
+  const { t } = useTranslation();
   const storeUrl =
     Platform.OS === 'android' ? Config.PLAY_STORE_URL : Config.APP_STORE_URL;
 
@@ -50,22 +52,21 @@ export const useAppVersionCheck = ({
       if (isRequiredUpdate || isOptionalUpdate) {
         Alert.show({
           isDismissable: !isRequiredUpdate, // Allow dismissal only if the update is not required
-          title: 'New Update ✨',
-          description:
-            'A new version of the app is available. Please update to the latest version for the best experience.',
+          title: t('commons.appUpdateAlert.title'),
+          description: t('commons.appUpdateAlert.description'),
           buttons: isRequiredUpdate
             ? [
                 {
-                  label: 'Update',
+                  label: t('commons.update'),
                   onPress: () => storeUrl && Linking.openURL(storeUrl),
                 },
               ]
             : [
                 {
-                  label: 'Cancel',
+                  label: t('commons.cancel'),
                 },
                 {
-                  label: 'Update',
+                  label: t('commons.update'),
                   onPress: () => storeUrl && Linking.openURL(storeUrl),
                 },
               ],

package/src/{auth/hooks/useAuthentication.ts → hooks/useAuth.ts}

@@ -1,22 +1,19 @@
 import { useMutation } from '@tanstack/react-query';
 
 import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';
-import {
-  changeUser,
-  useAuthenticationDispatch,
-} from '../providers/authentication';
+import { changeUser, useAuthenticationDispatch } from '../providers';
 import {
   type NavigationProp,
   StackActions,
   useNavigation,
 } from '@react-navigation/native';
 import { useTranslation } from 'react-i18next';
-import { Alert } from '../../components';
+import { Alert } from '../components';
 import { checkIsRegisteredAPI, signUpAPI } from '../api/authentication';
 import Config from 'react-native-config';
-import { analytics } from '../../utils/analytics';
-import { analyticsKeys } from '../../constants/analyticsKeys';
-import { createCustomer } from '../../api/customer';
+import { analytics } from '../utils/analytics';
+import { analyticsKeys } from '../constants/analyticsKeys';
+import { createCustomer } from '../api/customer';
 
 let confirmationResult: FirebaseAuthTypes.ConfirmationResult;
 
@@ -28,7 +25,7 @@ export type TUserData = {
   password: string;
 };
 
-export const useAuthentication = () => {
+export const useAuth = () => {
   const dispatch = useAuthenticationDispatch();
   const navigation = useNavigation<NavigationProp<RootStackType>>();
   const { t } = useTranslation();
@@ -43,7 +40,7 @@ export const useAuthentication = () => {
         {
           onError: (error: Error) => {
             Alert.show({
-              title: t('authentication.wrongOTP'),
+              title: t('commons.wrongOTP'),
             });
             console.log('error in useSignUp', error);
           },
@@ -112,7 +109,7 @@ export const useAuthentication = () => {
             navigation.navigate('VerifyPhoneNumberForLogin', { phoneNumber });
           } else {
             Alert.show({
-              description: t('authentication.userDoesNotExist', {
+              description: t('commons.userDoesNotExist', {
                 emailOrPhoneNumber: phoneNumber,
               }),
             });
@@ -150,7 +147,7 @@ export const useAuthentication = () => {
           });
         } catch {
           Alert.show({
-            description: t('authentication.userDoesNotExist', {
+            description: t('commons.userDoesNotExist', {
               emailOrPhoneNumber: email,
             }),
           });

package/src/{auth/hooks → hooks}/useAuthenticateRequests.ts

@@ -1,8 +1,8 @@
-import { Alert } from '../../components';
 import axios from 'axios';
 import { useEffect } from 'react';
 import { Platform } from 'react-native';
 import Config from 'react-native-config';
+import { Alert } from '../components';
 
 export const useAuthenticateRequests = (
   getToken: () => Promise<string | null>

package/src/{selectBusiness → hooks}/useCreateBusiness.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { queryKeys } from './queryKeys';
-import { signUpAPI } from '../auth/api/authentication';
+import { signUpAPI } from '../api/authentication';
 
 export const useCreateBusiness = ({ onSuccess }: { onSuccess: () => void }) => {
   const queryClient = useQueryClient();

package/src/hooks/useCustomer.ts

@@ -15,15 +15,11 @@ import {
   saveCustomerCard,
   updateCustomerProfile,
 } from '../api/customer';
-import {
-  Address,
-  CustomerProfileProps,
-  SaveCardRequest,
-} from '../types/customer';
 import { useMMKVString } from 'react-native-mmkv';
 import { MMKV_KEYS } from '../constants';
-import { queryKeys } from '../selectBusiness/queryKeys';
+import { queryKeys } from './queryKeys';
 import firebase from '@react-native-firebase/auth';
+import { Address, SaveCardRequest } from '@kiosinc/commons-types';
 
 export const useCustomerQueries = () => {
   const queryClient = useQueryClient();
@@ -81,7 +77,11 @@ export const useCustomerQueries = () => {
     },
     useUpdateCustomer: () => {
       const mutation = useMutation(
-        async (props: CustomerProfileProps) => {
+        async (props: {
+          addressId: string | null;
+          paymentId: string | null;
+          squareCustomerId: string | null;
+        }) => {
           if (isLoggedIn) {
             const response = await updateCustomerProfile({
               uid: user.uid,

package/src/{auth/hooks → hooks}/useDeactivateAccount.ts

@@ -1,8 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
-import { Alert } from '../../components';
-import { deactivateAPI } from '../api/authentication';
 import { useTranslation } from 'react-i18next';
 import auth from '@react-native-firebase/auth';
+import { deactivateAPI } from '../api/authentication';
+import { Alert } from '../components';
 
 export const useDeactivateAccount = () => {
   const { t } = useTranslation();
@@ -14,7 +14,7 @@ export const useDeactivateAccount = () => {
       onSuccess: () => {
         auth().signOut();
         Alert.show({
-          description: t('authentication.deactivationSuccess'),
+          description: t('commons.deactivationSuccess'),
         });
       },
     }

package/src/{auth/hooks → hooks}/useLogout.ts

@@ -3,9 +3,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useCallback } from 'react';
 import FastImage from 'react-native-fast-image';
 import { useMMKVString } from 'react-native-mmkv';
-import { MMKV_KEYS } from '../../constants';
-import { analytics } from '../../utils/analytics';
 import Config from 'react-native-config';
+import { analytics } from '../utils';
+import { MMKV_KEYS } from '../constants';
 
 export const useLogout = () => {
   const [_, setBusinessId] = useMMKVString(MMKV_KEYS.BUSINESS_ID);

package/src/{auth/hooks → hooks}/useTermsOfService.ts

@@ -1,10 +1,10 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import firestore from '@react-native-firebase/firestore';
-import { DEFAULT_STALE_TIME, queryKeys } from '../../selectBusiness/queryKeys';
-import { getCurrentTimestamp } from '../../utils';
-import { analytics } from '../../utils/analytics';
-import { createCustomer } from '../../api/customer';
 import firebase from '@react-native-firebase/auth';
+import { getCurrentTimestamp } from '../utils';
+import { createCustomer } from '../api/customer';
+import { analytics } from '../utils';
+import { DEFAULT_STALE_TIME, queryKeys } from './queryKeys';
 
 export const useTermsOfService = () => {
   const queryClient = useQueryClient();

package/src/index.tsx

@@ -1,23 +1,7 @@
-export { useAppVersionCheck } from './hooks/useAppVersionCheck';
-
-export { AssetManager } from './helpers/AssetManager';
-export { Currency } from './utils/currency';
-
-export { useCustomerQueries } from './hooks/useCustomer';
-export { useCheckCustomer } from './hooks/useCheckCustomer';
-export { SavedCards } from './screens/SavedCards/SavedCards';
-
-export {
-  useMultiSnapBottomSheetRef,
-  TMultiSnapBottomSheetRef,
-} from './utils/useMultiSnapBottomSheetRef';
-export {
-  useSingleSnapBottomSheetRef,
-  TSingleSnapBottomSheetRef,
-} from './utils/useSingleSnapBottomSheetRef';
-
+export * from './hooks';
+export * from './screens';
 export * from './components';
-export * from './auth';
-export * from './selectBusiness';
-
-export { Analytics } from './utils/analytics';
+export * from './localization';
+export * from './utils';
+export * from './helpers';
+export * from './providers';

package/src/localization/index.ts

@@ -0,0 +1,4 @@
+import en from './translations/en.json';
+export const translations = {
+  en,
+};

package/src/localization/translations/en.json

@@ -0,0 +1,88 @@
+{
+  "commons": {
+    "offline": "You seem to be offline...    ",
+    "ok": "OK",
+    "close": "Close",
+    "create": "Create",
+    "update": "Update",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "continue": "Continue",
+    "logIn": "Log In",
+    "forgotPassword": "Forgot Password?",
+    "newToApp": "New to KIOS?",
+    "signUp": "Sign Up",
+    "email": "Email",
+    "password": "Password",
+    "requiredPassword": "Enter your Password",
+    "enterYour": "Enter Your Email to\nReset Password",
+    "resetPassword": "Reset Password",
+    "resetPasswordInstructionSent": "The reset password instructions were sent to {{email}}.",
+    "backToLogin": "Back to Log In",
+    "createAccountTitle": "Create a KIOS Account",
+    "createAccount": "Create Account",
+    "businessName": "Business Name",
+    "businessNameRequired": "Enter Business Name",
+    "displayName": "Name",
+    "displayNameRequired": "Enter a first and last name",
+    "phoneNumber": "Phone Number",
+    "requiredPhoneNumber": "Enter your Phone Number",
+    "passwordMustContain": "Password must contain:",
+    "minLength": "At least 8 characters",
+    "1lowerChar": "At least 1 lowercase character",
+    "1upperChar": "At least 1 uppercase character",
+    "1number": "At least 1 number",
+    "1special": "At least 1 special character",
+    "validEmail": "Email must be a valid email",
+    "requiredEmailForLogin": "Enter the email you have an account with",
+    "requiredEmailForSignUp": "Enter the email you want to create an account with",
+    "byContinue": "By continuing, you agree to KIOS’s",
+    "termsAndConditions": "Terms and Conditions",
+    "and": "and",
+    "privacyPolicy": "Privacy Policy.",
+    "createPassword": "Create a Password",
+    "verifyYourNumber": "Verify Your Number",
+    "loginWithNumber": "Login with Number",
+    "codeSent": "We’ve sent a 6-digital code to your {{phoneNumber}}.",
+    "resendCode": "Resend Code",
+    "userDoesNotExist": "No account found with '{{emailOrPhoneNumber}}'.",
+    "wrongCredentials": "You have entered an invalid email or password",
+    "deactivationSuccess": "Your account deactivated successfully",
+    "wrongOTP": "The verification code which you entered is invalid, Please enter the correct code.",
+    "passwordChangeSuccess": "Password changed successfully",
+    "newPassword": "New Password",
+    "currentPassword": "Current Password",
+    "changePassword": "Change password",
+    "wrongPassword": "Wrong password",
+    "wrongPasswordDesc": "The password you have entered is invalid",
+    "resetPasswordWarningAlert": {
+      "title": "Log out of all kiosks",
+      "description": "Resetting your password will automatically log you out of all your kiosks. Are you sure you want to continue?"
+    },
+    "appUpdateAlert": {
+      "title": "New Update ✨",
+      "description": "A new version of the app is available. Please update to the latest version for the best experience."
+    },
+    "addCard": "Add card",
+    "noSavedCards": "You have no saved card yet.",
+    "paymentMethods": "Payment methods",
+    "payment": "Payment",
+    "payAndPlaceOrder": "Pay & Place order",
+    "payByCard": "Pay by card",
+    "confirmCardDelete": "Confirm Delete Card",
+    "cardDeleteDesc": "Are you sure you want to delete card ending in {{card}}?",
+    "total": "Subtotal",
+    "createBusiness": "Create Business",
+    "selectBusiness": "Select Business",
+    "searchBusiness": "Search Business",
+    "noBusiness": "Looks like you don't have any businesses.",
+    "logout": "Logout",
+    "termsOfServiceModal": {
+      "title": "Please accept the updated terms to continue using Remy",
+      "description": "You can view the updated terms at any time but you will need to accept the terms in order to access your account.",
+      "review": "Review Terms"
+    },
+    "termsTitle": "Terms of Service Update",
+    "acceptTerms": "Accept Terms"
+  }
+}

package/src/providers/index.ts

@@ -0,0 +1,6 @@
+export { changeUser } from './authentication/actions/authentication.actions';
+export {
+  useAuthentication,
+  useAuthenticationDispatch,
+  AuthenticationProvider,
+} from './authentication/AuthenticationProvider';

package/src/{auth/screens → screens/Auth}/ChangePassword.tsx

@@ -15,7 +15,6 @@ import { Controller, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useTranslation } from 'react-i18next';
 import { RouteProp, useNavigation } from '@react-navigation/native';
-
 import { changePasswordSchema } from './validators';
 
 export type TPasswordForm = {
@@ -57,24 +56,24 @@ export const ChangePassword: React.FC<ChangePasswordProps> = ({ route }) => {
         await user.reauthenticateWithCredential(credential);
         await user.updatePassword(data.newPassword);
         setIsLoading(false);
-        Snackbar.show({ title: t('authentication.passwordChangeSuccess') });
+        Snackbar.show({ title: t('commons.passwordChangeSuccess') });
         navigation.goBack();
       }
     } catch (error: any) {
       setIsLoading(false);
       Alert.show({
-        title: t('authentication.wrongPassword'),
-        description: t('authentication.wrongPasswordDesc'),
+        title: t('commons.wrongPassword'),
+        description: t('commons.wrongPasswordDesc'),
       });
     }
   };
 
   const passwordExpectations = [
-    t('authentication.minLength'),
-    t('authentication.1lowerChar'),
-    t('authentication.1upperChar'),
-    t('authentication.1number'),
-    t('authentication.1special'),
+    t('commons.minLength'),
+    t('commons.1lowerChar'),
+    t('commons.1upperChar'),
+    t('commons.1number'),
+    t('commons.1special'),
   ];
 
   return (
@@ -88,7 +87,7 @@ export const ChangePassword: React.FC<ChangePasswordProps> = ({ route }) => {
         >
           <View alignItems="center">
             <Text pb="40" variant="titleLarge">
-              {t('authentication.changePassword')}
+              {t('commons.changePassword')}
             </Text>
           </View>
           <Controller
@@ -106,7 +105,7 @@ export const ChangePassword: React.FC<ChangePasswordProps> = ({ route }) => {
                   onBlur={onBlur}
                   onChangeText={onChange}
                   value={value}
-                  label={t('authentication.currentPassword')}
+                  label={t('commons.currentPassword')}
                 />
               );
             }}
@@ -133,9 +132,9 @@ export const ChangePassword: React.FC<ChangePasswordProps> = ({ route }) => {
                       trigger();
                     }}
                     value={value}
-                    label={t('authentication.password')}
+                    label={t('commons.password')}
                   />
-                  <Text pt="4">{t('authentication.passwordMustContain')}</Text>
+                  <Text pt="4">{t('commons.passwordMustContain')}</Text>
                   {passwordExpectations.map((expectation, index) => {
                     const didExpectationFoundInErrors =
                       passwordErrors?.includes(expectation) ?? false;
@@ -169,7 +168,7 @@ export const ChangePassword: React.FC<ChangePasswordProps> = ({ route }) => {
             onPress={handleSubmit(handleChangePassword)}
             mode="contained"
           >
-            {t('authentication.changePassword')}
+            {t('commons.changePassword')}
           </Button>
         </KeyboardAvoidingView>
       </View>

package/src/{auth/screens → screens/Auth}/Login.tsx

@@ -71,7 +71,7 @@ export const Login = () => {
               <Tab.Screen
                 options={{
                   tabBarLabel: TabBarTitle({
-                    title: t('authentication.phoneNumber'),
+                    title: t('commons.phoneNumber'),
                   }),
                 }}
                 name="LoginWithPhoneNumber"
@@ -80,7 +80,7 @@ export const Login = () => {
               <Tab.Screen
                 options={{
                   tabBarLabel: TabBarTitle({
-                    title: t('authentication.email'),
+                    title: t('commons.email'),
                   }),
                 }}
                 name="LoginWithEmail"

package/src/{auth/screens → screens/Auth}/LoginWithEmail.tsx

@@ -54,7 +54,7 @@ export const LoginWithEmail = () => {
         });
       })
       .catch(() => {
-        Snackbar.show({ title: t('authentication.wrongCredentials') });
+        Snackbar.show({ title: t('commons.wrongCredentials') });
       })
       .finally(() => {
         setIsLoading(false);
@@ -79,7 +79,7 @@ export const LoginWithEmail = () => {
                 onBlur={onBlur}
                 onChangeText={onChange}
                 value={value}
-                label={t('authentication.email')}
+                label={t('commons.email')}
               />
             );
           }}
@@ -99,7 +99,7 @@ export const LoginWithEmail = () => {
                 onBlur={onBlur}
                 onChangeText={onChange}
                 value={value}
-                label={t('authentication.password')}
+                label={t('commons.password')}
               />
             );
           }}
@@ -113,7 +113,7 @@ export const LoginWithEmail = () => {
             navigation.navigate('ResetPassword');
           }}
         >
-          {t('authentication.forgotPassword')}
+          {t('commons.forgotPassword')}
         </LinkButton>
       </View>
       <Button
@@ -121,7 +121,7 @@ export const LoginWithEmail = () => {
         mode="contained"
         onPress={handleSubmit(onSubmit)}
       >
-        {t('authentication.logIn')}
+        {t('commons.logIn')}
       </Button>
       {Config.APP_NAME !== 'git' && (
         <View
@@ -130,7 +130,7 @@ export const LoginWithEmail = () => {
           pt="4"
           flexDirection="row"
         >
-          <Text variant="labelLarge">{t('authentication.newToApp')}</Text>
+          <Text variant="labelLarge">{t('commons.newToApp')}</Text>
           <LinkButton
             mode="text"
             onPress={() => {
@@ -138,7 +138,7 @@ export const LoginWithEmail = () => {
               navigation.navigate('SignUp');
             }}
           >
-            {t('authentication.signUp')}
+            {t('commons.signUp')}
           </LinkButton>
         </View>
       )}

package/src/{auth/screens → screens/Auth}/LoginWithPhoneNumber.tsx

@@ -4,12 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { Controller, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { loginWithPhoneNumberValidationSchema } from './validators';
-import { useAuthentication } from '../hooks/useAuthentication';
 import { ICountry } from 'react-native-international-phone-number';
 import { Keyboard } from 'react-native';
 import Config from 'react-native-config';
 import { analytics } from '../../utils/analytics';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useAuth } from '../../hooks';
 
 type FormData = {
   phoneNumber: string;
@@ -17,7 +17,7 @@ type FormData = {
 
 export const LoginWithPhoneNumber = () => {
   const { t } = useTranslation();
-  const { useVerifyPhoneNumberForLogin } = useAuthentication();
+  const { useVerifyPhoneNumberForLogin } = useAuth();
   const { mutate: sendCode, isLoading: isSendingCode } =
     useVerifyPhoneNumberForLogin();
   const [selectedCountry, setSelectedCountry] = useState<ICountry>();
@@ -75,7 +75,7 @@ export const LoginWithPhoneNumber = () => {
         mode="contained"
         onPress={handleSubmit(onSubmit)}
       >
-        {t('authentication.logIn')}
+        {t('commons.logIn')}
       </Button>
       {Config.APP_NAME !== 'git' && (
         <View
@@ -84,7 +84,7 @@ export const LoginWithPhoneNumber = () => {
           pt="4"
           flexDirection="row"
         >
-          <Text variant="labelLarge">{t('authentication.newToApp')}</Text>
+          <Text variant="labelLarge">{t('commons.newToApp')}</Text>
           <LinkButton
             mode="text"
             onPress={() => {
@@ -92,7 +92,7 @@ export const LoginWithPhoneNumber = () => {
               navigation.navigate('SignUp');
             }}
           >
-            {t('authentication.signUp')}
+            {t('commons.signUp')}
           </LinkButton>
         </View>
       )}