@kiosinc/commons-rn 0.1.61 → 0.1.62

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>
+  );
+};

package/src/screens/SavedCards/SavedCards.tsx

@@ -0,0 +1,197 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Alert,
+  Button,
+  LineLoader,
+  RefreshControl,
+  Text,
+  View,
+} from '../../components';
+import { ActivityIndicator, useTheme } from 'react-native-paper';
+import uuid from 'react-native-uuid';
+import { useTranslation } from 'react-i18next';
+import { FlatList } from 'react-native';
+import { onStartCardEntry } from '../../utils/square';
+import { useCustomerQueries } from '../../hooks/useCustomer';
+import { useCheckCustomer } from '../../hooks/useCheckCustomer';
+import { CardRow } from './CardRow';
+import { CustomerCardPayment } from '../../types/customer';
+
+export const SavedCards = ({
+  onCheckout,
+  total,
+}: {
+  onCheckout?: (selectedCard: CustomerCardPayment) => void;
+  total?: string;
+}) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const { customer } = useCheckCustomer();
+  const {
+    useSaveCustomerCard,
+    useFetchSavedCards,
+    useDisableCard,
+    useUpdateCustomer,
+  } = useCustomerQueries();
+  const { saveCard, saveCardLoading } = useSaveCustomerCard();
+  const { disableCard, disableCardLoading } = useDisableCard();
+  const [selectedPaymentId, onSelectPaymentId] = useState('');
+  const { updateCustomer, updateCustomerLoading } = useUpdateCustomer();
+
+  useEffect(() => {
+    if (customer?.paymentId) {
+      onSelectPaymentId(customer.paymentId);
+    }
+  }, [customer?.paymentId, onSelectPaymentId]);
+
+  const {
+    data: cards = [],
+    isFetching,
+    isLoading,
+    refetch,
+  } = useFetchSavedCards();
+
+  const onAddPress = () => {
+    onStartCardEntry(
+      (cardDetails) => {
+        saveCard({
+          sourceId: cardDetails.nonce,
+          idempotentKey: uuid.v4() as string,
+        });
+      },
+      () => {}
+    );
+  };
+
+  const label =
+    cards.length > 0 ? t('checkout.payAndPlaceOrder') : t('checkout.payByCard');
+
+  if (isLoading) {
+    return <ActivityIndicator />;
+  }
+
+  const onUseCard = () => {
+    if (cards.length === 0) {
+      // If no cards then initiate add card flow.
+      onStartCardEntry(
+        (cardDetails) => {
+          saveCard({
+            sourceId: cardDetails.nonce,
+            idempotentKey: uuid.v4() as string,
+          });
+        },
+        () => {}
+      );
+    } else if (!customer.paymentId) {
+      Alert.show({ title: 'Select a card' });
+    } else {
+      // Make payment
+      const selectedCard = cards.find(
+        (card: any) => card.linkedObjectId === customer.paymentId
+      );
+      if (selectedCard) {
+        onCheckout?.(selectedCard);
+      } else {
+        Alert.show({ title: 'Select a card' });
+      }
+    }
+  };
+
+  return (
+    <View flex={1}>
+      <View px="16" bg="background" flex={1}>
+        <LineLoader
+          isLoading={isFetching || disableCardLoading || updateCustomerLoading}
+        />
+        <FlatList
+          extraData={{ selectedPaymentId, disableCardLoading }}
+          refreshControl={
+            <RefreshControl refreshing={false} onRefresh={refetch} />
+          }
+          data={cards}
+          showsVerticalScrollIndicator={false}
+          renderItem={({ item: card, index }) => (
+            <CardRow
+              isDisabled={disableCardLoading}
+              isSelected={selectedPaymentId === card.linkedObjectId}
+              isSelectable={!!onCheckout}
+              key={index}
+              card={card}
+              onDelete={(id: string) => {
+                disableCard(id);
+              }}
+              onSelect={(linkedObjectId: string) => {
+                onSelectPaymentId(linkedObjectId);
+                updateCustomer({
+                  paymentId: linkedObjectId,
+                  addressId: customer.addressId,
+                  squareCustomerId: customer.squareCustomerId,
+                });
+              }}
+            />
+          )}
+          ListHeaderComponent={
+            <>
+              {cards.length > 0 ? (
+                <Text mb="8" variant="titleMedium">
+                  {t('checkout.paymentMethods')}
+                </Text>
+              ) : (
+                <Text variant="bodyLarge" color="outline">
+                  {t('checkout.noSavedCards')}
+                </Text>
+              )}
+            </>
+          }
+          ListFooterComponent={
+            <View alignItems="flex-start">
+              <Button
+                pt={'16'}
+                loading={saveCardLoading}
+                onPress={onAddPress}
+                icon="plus"
+                mode="text"
+              >
+                {t('checkout.addCard')}
+              </Button>
+            </View>
+          }
+        />
+      </View>
+      {!!onCheckout && (
+        <View
+          bg="secondaryContainer"
+          height={84}
+          padding="16"
+          justifyContent="space-between"
+          flexDirection="row"
+          width="100%"
+        >
+          <View>
+            <Text variant="bodyLarge" color="onSurface">
+              {t('order.total')}
+            </Text>
+            <Text variant="titleLarge" color="onSurface">
+              {total}
+            </Text>
+          </View>
+          <Button
+            mode="contained"
+            height={40}
+            width={'auto'}
+            alignSelf="center"
+            bg="primary"
+            labelStyle={[
+              {
+                color: theme.colors.background,
+              },
+            ]}
+            onPress={onUseCard}
+          >
+            {label}
+          </Button>
+        </View>
+      )}
+    </View>
+  );
+};

package/src/selectBusiness/queryKeys.ts

@@ -2,6 +2,11 @@ export const queryKeys = {
   BUSINESSES: 'BUSINESSES',
   TERMS_AND_CONDITIONS: 'TERMS_AND_CONDITIONS',
   TERMS_AND_CONDITIONS_URL: 'TERMS_AND_CONDITIONS_URL',
+  CARDS: 'CARDS',
+  CUSTOMER: 'CUSTOMER',
+  PROGRAM: 'PROGRAM',
+  LOYALTY: 'LOYALTY',
+  REWARDS: 'REWARDS',
 };
 
 export const DEFAULT_STALE_TIME = 60 * (60 * 1000); // 60 mins

package/src/types/customer.d.ts

@@ -0,0 +1,70 @@
+export interface SaveCardRequest {
+  sourceId: string;
+  verificationToken?: string;
+  idempotentKey: string;
+}
+
+export interface ConnectSquareCustomerRequest {
+  uid: string;
+  businessId: string;
+  idempotentKey: string;
+}
+
+export interface Address {
+  addressLine1: string;
+  addressLine2: string;
+  // city: string;
+  // state: string;
+  // zip: string;
+  // country: string;
+}
+
+export interface CreateCustomerProfileProps {
+  address: Address | null;
+}
+export interface CustomerProfileProps {
+  addressId: string | null;
+  paymentId: string | null;
+  squareCustomerId: string | null;
+}
+
+export interface UpdateSquareLoyaltyCustomerRequest {
+  uid: string;
+  businessId: string;
+}
+
+interface DocumentProps {
+  created: string;
+  updated: string;
+}
+
+enum PaymentType {
+  card = 'card',
+}
+export interface CardDetailsProps {
+  bin: string;
+  cardBrand: string;
+  cardType: string;
+  enabled: boolean;
+  expMonth: number;
+  expYear: number;
+  fingerprint: string;
+  last4: string;
+  merchantId: string;
+  prepaidType: string;
+  version: number;
+}
+
+export interface CustomerPaymentProps {
+  type: PaymentType;
+  linkedObjectId: string;
+  provider: string;
+}
+
+export interface CustomerCardPayment
+  extends CustomerPaymentProps,
+    DocumentProps {
+  uid: string;
+  cardDetails: CardDetailsProps;
+  id: string;
+}