@kiosinc/commons-rn 0.1.60 → 0.1.62

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

package/src/utils/checkout.ts

@@ -0,0 +1,5 @@
+import { CustomerCardPayment } from '../types/customer';
+
+export const getCardName = (card: CustomerCardPayment) => {
+  return card.cardDetails.cardBrand + ' **** ' + card.cardDetails.last4;
+};

package/src/utils/currency.ts

@@ -0,0 +1,10 @@
+export class Currency {
+  static usdFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  });
+
+  static formatToUsd(amount: number) {
+    return this.usdFormatter.format(amount / 100);
+  }
+}

package/src/utils/square.ts

@@ -0,0 +1,50 @@
+import {
+  CardDetails,
+  SQIPCardEntry,
+  // @ts-ignore
+} from 'react-native-square-in-app-payments';
+
+/**
+ * Callback when successfully get the card nonce details for processig
+ * card entry is still open and waiting for processing card nonce details
+ * @param {*} cardDetails
+ * @param onCompleteCallback
+ */
+async function onCardNonceRequestSuccess(
+  cardDetails: CardDetails,
+  onCompleteCallback: (cardDetails: CardDetails) => void
+) {
+  try {
+    // take payment with the card details
+    // await chargeCard(cardDetails);
+
+    // payment finished successfully
+    // you must call this method to close card entry
+    await SQIPCardEntry.completeCardEntry(() =>
+      onCompleteCallback(cardDetails)
+    );
+  } catch (ex) {
+    // payment failed to complete due to error
+    // notify card entry to show processing error
+    // @ts-ignore
+    await SQIPCardEntry.showCardNonceProcessingError(ex.message);
+  }
+}
+
+/**
+ * An event listener to start card entry flow
+ */
+export async function onStartCardEntry(
+  onSuccessCallback: (cardDetails: CardDetails) => void,
+  onCancelCallback: () => void
+) {
+  const cardEntryConfig = {
+    collectPostalCode: false,
+  };
+  await SQIPCardEntry.startCardEntryFlow(
+    cardEntryConfig,
+    (cardDetails: CardDetails) =>
+      onCardNonceRequestSuccess(cardDetails, onSuccessCallback),
+    onCancelCallback
+  );
+}