@kiosinc/commons-rn 0.1.60 → 0.1.62

package/src/auth/hooks/useAuthentication.ts

@@ -16,6 +16,7 @@ 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';
 
 let confirmationResult: FirebaseAuthTypes.ConfirmationResult;
 
@@ -64,6 +65,9 @@ export const useAuthentication = () => {
               analytics.profile.set(analyticsKeys.registrationDate, now);
               analytics.profile.set(analyticsKeys.app, Config.APP_NAME);
               analytics.track(analyticsKeys.signupCompleted);
+
+              // Create new customer in customer collections
+              await createCustomer({ uid: auth().currentUser.uid });
             } catch (error: any) {
               console.log('error', error);
               // Sign out user if something goes wrong

package/src/auth/hooks/useTermsOfService.ts

@@ -4,6 +4,7 @@ import { DEFAULT_STALE_TIME, queryKeys } from '../../selectBusiness/queryKeys';
 import { useAuthentication } from '../providers/authentication';
 import { getCurrentTimestamp } from '../../utils';
 import { analytics } from '../../utils/analytics';
+import { createCustomer } from '../../api/customer';
 
 export const useTermsOfService = () => {
   const queryClient = useQueryClient();
@@ -64,18 +65,14 @@ export const useTermsOfService = () => {
         const query = await firestore().doc(`customers/${user.uid}`);
         const customerSnapshot = await query.get();
 
-        if (customerSnapshot.exists) {
-          await query.update({
-            updated: getCurrentTimestamp(),
-            agreementsUpdated: new Date().toISOString(),
-          });
-        } else {
-          await query.set({
-            uid: user.uid,
-            created: getCurrentTimestamp(),
-            agreementsUpdated: new Date().toISOString(),
-          });
+        if (!customerSnapshot.exists) {
+          await createCustomer({ uid: user!.uid });
         }
+        await query.update({
+          updated: getCurrentTimestamp(),
+          agreementsUpdated: new Date().toISOString(),
+        });
+
         analytics.track('term_of_service_accepted');
         await queryClient.invalidateQueries([
           user.uid,

package/src/auth/screens/TermsOfService.tsx

@@ -3,11 +3,9 @@ import {
   Button,
   IconButton,
   ParentView,
-  TSingleSnapBottomSheetRef,
   Text,
   View,
-  useSingleSnapBottomSheetRef,
-} from '@kiosinc/commons-rn';
+} from '../../components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActivityIndicator, useTheme } from 'react-native-paper';
@@ -16,6 +14,10 @@ import { StyleSheet } from 'react-native';
 import { useTermsOfService } from '../hooks/useTermsOfService';
 import { TERMS_OF_SERVICE } from '../../constants';
 import { useLogout } from '../hooks/useLogout';
+import {
+  TSingleSnapBottomSheetRef,
+  useSingleSnapBottomSheetRef,
+} from '../../utils/useSingleSnapBottomSheetRef';
 
 type CloseBottomSheetProps = {
   bottomSheetRef: TSingleSnapBottomSheetRef;

package/src/hooks/useCheckCustomer.ts

@@ -0,0 +1,42 @@
+import { useCallback, useEffect } from 'react';
+import { useCustomerQueries } from './useCustomer';
+import { useAuthentication } from '../auth';
+
+export const useCheckCustomer = () => {
+  const { user } = useAuthentication();
+  const isLoggedIn = user && !user.isAnonymous;
+  const {
+    useFetchCustomer,
+    useCreateCustomer,
+    useFetchSquareProgram,
+    useConnectSquareCustomer,
+  } = useCustomerQueries();
+  const { connectSquare } = useConnectSquareCustomer();
+
+  const { createCustomerHook } = useCreateCustomer();
+  const { data: customer } = useFetchCustomer();
+  const { refetch: fetchSquareProgram } = useFetchSquareProgram({
+    enabled: false,
+    refetchOnWindowFocus: false,
+  });
+
+  const checkIfprogramPresent = useCallback(() => {
+    fetchSquareProgram().then((res) => {
+      if (res.data === null) {
+        connectSquare();
+      }
+    });
+  }, [connectSquare, fetchSquareProgram]);
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      if (customer?.customer === null) {
+        createCustomerHook();
+      } else if (customer?.uid) {
+        checkIfprogramPresent();
+      }
+    }
+  }, [customer, createCustomerHook, isLoggedIn, checkIfprogramPresent]);
+
+  return { customer };
+};

package/src/hooks/useCustomer.ts

@@ -0,0 +1,331 @@
+import { useEffect } from 'react';
+import { useAuthentication } from '../auth';
+import { Alert } from '../components';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import firestore from '@react-native-firebase/firestore';
+import uuid from 'react-native-uuid';
+
+import {
+  connectSquareCustomer,
+  connectSquareLoyalty,
+  createCustomer,
+  fetchLoyaltyRewards,
+  fetchSquareLoyalty,
+  getCustomer,
+  saveCustomerAddress,
+  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';
+
+export const useCustomerQueries = () => {
+  const queryClient = useQueryClient();
+  const { user } = useAuthentication();
+  const [selectedBusinessId] = useMMKVString(MMKV_KEYS.BUSINESS_ID);
+  const isLoggedIn = user && !user.isAnonymous;
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      queryClient.invalidateQueries([queryKeys.LOYALTY, user?.uid]);
+    }
+  }, [isLoggedIn, queryClient, user?.uid]);
+
+  return {
+    useFetchCustomer: () =>
+      useQuery(
+        [queryKeys.CUSTOMER, user?.uid],
+        async () => {
+          if (isLoggedIn) {
+            return await getCustomer(user!.uid);
+          } else {
+            return null;
+          }
+        },
+        {
+          select: (data) => data?.data?.customer,
+        }
+      ),
+    useCreateCustomer: () => {
+      const mutation = useMutation(
+        async () => {
+          if (isLoggedIn) {
+            const response = await createCustomer({ uid: user!.uid });
+            if (response?.data?.customer) {
+              await queryClient.invalidateQueries([
+                queryKeys.CUSTOMER,
+                user?.uid,
+              ]);
+            }
+          }
+        },
+        {
+          onError: (err: { code: string; message: string }) =>
+            Alert.show({
+              title: 'Code ' + err?.code,
+              description: err?.message,
+            }),
+        }
+      );
+
+      return {
+        createCustomerHook: mutation.mutateAsync,
+        createCustomerLoading: mutation.isLoading,
+      };
+    },
+    useUpdateCustomer: () => {
+      const mutation = useMutation(
+        async (props: CustomerProfileProps) => {
+          if (isLoggedIn) {
+            const response = await updateCustomerProfile({
+              uid: user.uid,
+              props,
+            });
+
+            if (response?.data?.customer) {
+              queryClient.invalidateQueries([queryKeys.CUSTOMER, user?.uid]);
+            }
+          }
+        },
+        {
+          onError: (err: { code: string; message: string }) =>
+            Alert.show({
+              title: 'Code ' + err?.code,
+              description: err?.message,
+            }),
+        }
+      );
+
+      return {
+        updateCustomer: mutation.mutate,
+        updateCustomerLoading: mutation.isLoading,
+      };
+    },
+    useSaveCustomerAddress: () => {
+      const mutation = useMutation(
+        async (address: Address) => {
+          if (isLoggedIn) {
+            const response = await saveCustomerAddress({
+              uid: user.uid,
+              address,
+            });
+
+            if (response?.data?.customer) {
+              queryClient.invalidateQueries([queryKeys.CUSTOMER, user?.uid]);
+            }
+          }
+        },
+        {
+          onError: (err: { code: string; message: string }) =>
+            Alert.show({
+              title: 'Code ' + err?.code,
+              description: err?.message,
+            }),
+        }
+      );
+
+      return {
+        useSaveAddress: mutation.mutate,
+        saveAddressLoading: mutation.isLoading,
+      };
+    },
+    useFetchSavedCards: () =>
+      useQuery(
+        [queryKeys.CARDS, user?.uid],
+        async () => {
+          if (isLoggedIn) {
+            const payments = await firestore()
+              .collection(`customers/${user?.uid}/payments`)
+              .orderBy('updated', 'desc')
+              .where('isActive', '==', true)
+              .get();
+            if (payments.docs.length > 0) {
+              return payments.docs.map((payment: any) => {
+                return { ...payment.data(), id: payment.id };
+              });
+            } else {
+              return [];
+            }
+          } else {
+            return [];
+          }
+        },
+        {
+          enabled: Boolean(isLoggedIn),
+        }
+      ),
+    useFetchSquareProgram: (queryOptions?: object) =>
+      useQuery(
+        [queryKeys.PROGRAM, user?.uid, selectedBusinessId],
+        async () => {
+          if (isLoggedIn) {
+            const programs = await firestore()
+              .collection(`customers/${user?.uid}/programs`)
+              .where('type', '==', 'customer')
+              .where('businessId', '==', selectedBusinessId)
+              .orderBy('updated', 'asc')
+              .get();
+            if (programs.docs.length > 0) {
+              return programs.docs.map((program: any) => program.data())[0];
+            } else {
+              return null;
+            }
+          } else {
+            return null;
+          }
+        },
+        {
+          ...queryOptions,
+        }
+      ),
+    useFetchSquareLoyalty: (queryOptions?: object) =>
+      useQuery(
+        [queryKeys.LOYALTY, user?.uid, selectedBusinessId],
+        async () => {
+          if (isLoggedIn && selectedBusinessId) {
+            return await fetchSquareLoyalty(user.uid, selectedBusinessId);
+          } else {
+            return { data: null };
+          }
+        },
+        {
+          select: (res) => res?.data,
+          ...queryOptions,
+        }
+      ),
+    useSaveCustomerCard: () => {
+      const mutation = useMutation(
+        async (data: SaveCardRequest) => {
+          if (isLoggedIn) {
+            console.log('here in useSaveCustomerCard');
+            const response = await saveCustomerCard({
+              uid: user?.uid,
+              props: data,
+            });
+            console.log('here in useSaveCustomerCard response', response.data);
+          }
+        },
+        {
+          onError: (err: { code: string; message: string }) =>
+            Alert.show({
+              title: 'Code ' + err?.code,
+              description: err?.message,
+            }),
+          onSuccess: () => {
+            queryClient.invalidateQueries([queryKeys.CARDS, user?.uid]);
+          },
+        }
+      );
+
+      return {
+        saveCard: mutation.mutate,
+        saveCardLoading: mutation.isLoading,
+      };
+    },
+    useDisableCard: () => {
+      const mutation = useMutation(
+        async (documentId: string) => {
+          if (isLoggedIn) {
+            return await firestore()
+              .collection(`customers/${user?.uid}/payments`)
+              .doc(documentId)
+              .update({
+                isActive: false,
+              });
+          }
+        },
+        {
+          onError: (err: { code: string; message: string }) =>
+            Alert.show({
+              title: 'Code ' + err?.code,
+              description: err?.message,
+            }),
+          onSuccess: () => {
+            queryClient.invalidateQueries([queryKeys.CARDS, user?.uid]);
+          },
+        }
+      );
+
+      return {
+        disableCard: mutation.mutate,
+        disableCardLoading: mutation.isLoading,
+      };
+    },
+    useConnectSquareLoyalty: () => {
+      const mutation = useMutation(
+        async () => {
+          if (isLoggedIn && selectedBusinessId) {
+            await connectSquareLoyalty(user?.uid, {
+              businessId: selectedBusinessId,
+              idempotentKey: uuid.v4() as string,
+              uid: user?.uid,
+            });
+          }
+        },
+        {
+          onError: (err: { code: string; message: string }) =>
+            Alert.show({
+              title: 'Code ' + err?.code,
+              description: err?.message,
+            }),
+          onSuccess: () => {
+            queryClient.invalidateQueries([queryKeys.LOYALTY, user?.uid]);
+          },
+        }
+      );
+
+      return {
+        connectSquareLoyalty: mutation.mutate,
+        connectLoyaltyLoading: mutation.isLoading,
+      };
+    },
+    useConnectSquareCustomer: () => {
+      const mutation = useMutation(
+        async () => {
+          if (isLoggedIn && selectedBusinessId) {
+            await connectSquareCustomer(user?.uid, {
+              businessId: selectedBusinessId,
+              idempotentKey: uuid.v4() as string,
+              uid: user?.uid,
+            });
+          }
+        },
+        {
+          onError: (err: { code: string; message: string }) =>
+            Alert.show({
+              title: 'Code ' + err?.code,
+              description: err?.message,
+            }),
+          onSuccess: () => {
+            queryClient.invalidateQueries([queryKeys.PROGRAM, user?.uid]);
+          },
+        }
+      );
+
+      return {
+        connectSquare: mutation.mutate,
+        connectSquareLoading: mutation.isLoading,
+      };
+    },
+    useFetchLoyaltyRewards: () =>
+      useQuery(
+        [queryKeys.REWARDS, selectedBusinessId],
+        async () => {
+          if (selectedBusinessId)
+            return await fetchLoyaltyRewards(selectedBusinessId);
+          else {
+            return {} as any;
+          }
+        },
+        {
+          select: (data) => data?.data,
+        }
+      ),
+  };
+};

package/src/index.tsx

@@ -1,3 +1,9 @@
+export { Currency } from './utils/currency';
+
+export { useCustomerQueries } from './hooks/useCustomer';
+export { useCheckCustomer } from './hooks/useCheckCustomer';
+export { SavedCards } from './screens/SavedCards/SavedCards';
+
 export {
   useMultiSnapBottomSheetRef,
   TMultiSnapBottomSheetRef,

package/src/screens/SavedCards/CardRow.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Alert, Card, IconButton, Text, View } from '../../components';
+import { RadioButton, useTheme } from 'react-native-paper';
+import { useTranslation } from 'react-i18next';
+import { getCardName } from '../../utils/checkout';
+import { CustomerCardPayment } from '../../types/customer';
+
+export const CardRow = ({
+  card,
+  onDelete,
+  onSelect,
+  isSelectable,
+  isSelected,
+  isDisabled,
+}: {
+  card: CustomerCardPayment;
+  onDelete: (id: string) => void;
+  onSelect: (linkedObjectId: string) => void;
+  isSelectable: boolean;
+  isSelected: boolean;
+  isDisabled: boolean;
+}) => {
+  const name = getCardName(card);
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const onDeleteCard = () => {
+    Alert.show({
+      title: t('checkout.confirmCardDelete'),
+      description: t('checkout.cardDeleteDesc', {
+        card: card.cardDetails.last4,
+      }),
+      buttons: [
+        {
+          label: t('delete'),
+          textColor: theme.colors.error,
+          onPress: () => onDelete(card.id),
+        },
+        {
+          label: t('cancel'),
+          textColor: theme.colors.onSurface,
+        },
+      ],
+    });
+  };
+
+  return (
+    <Card
+      disabled={isDisabled}
+      mode="outlined"
+      borderRadius="4"
+      mb="8"
+      {...(isSelectable
+        ? {
+            onPress: () => {
+              onSelect(card.linkedObjectId);
+            },
+          }
+        : {})}
+    >
+      <View
+        flexDirection="row"
+        px="8"
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        {isSelectable && (
+          <RadioButton.Android
+            value={card.linkedObjectId}
+            status={isSelected ? 'checked' : 'unchecked'}
+            onPress={() => {
+              onSelect(card.linkedObjectId);
+            }}
+          />
+        )}
+        <View
+          paddingStart="8"
+          flexDirection="row"
+          flex={1}
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Text variant="bodyMedium">{name}</Text>
+          <IconButton
+            disabled={isDisabled}
+            icon="trash-can-outline"
+            bg="background"
+            onPress={onDeleteCard}
+          />
+        </View>
+      </View>
+    </Card>
+  );
+};