@kiosinc/commons-rn 0.1.94 → 0.1.96

package/src/screens/SavedCards/CardRow.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Alert, Card, IconButton, Text, View } from '../../components';
+import ApplePayIcon from '../../assets/icons/apple_pay.svg';
 import { RadioButton, useTheme } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 import { getCardName } from '../../utils/checkout';
@@ -12,48 +13,55 @@ export const CardRow = ({
   isSelectable,
   isSelected,
   isDisabled,
+  isApplePay = false,
 }: {
-  card: CustomerCardPayment;
-  onDelete: (id: string) => void;
-  onSelect: (linkedObjectId: string) => void;
+  card?: CustomerCardPayment;
+  onDelete?: (id: string) => void;
+  onSelect?: (linkedObjectId: string) => void;
   isSelectable: boolean;
   isSelected: boolean;
   isDisabled: boolean;
+  isApplePay?: boolean;
 }) => {
-  const name = getCardName(card);
   const { t } = useTranslation();
   const theme = useTheme();
 
   const onDeleteCard = () => {
-    Alert.show({
-      title: t('commons.confirmCardDelete'),
-      description: t('commons.cardDeleteDesc', {
-        card: card.cardDetails.last4,
-      }),
-      buttons: [
-        {
-          label: t('commons.delete'),
-          textColor: theme.colors.error,
-          onPress: () => onDelete(card.id),
-        },
-        {
-          label: t('commons.cancel'),
-          textColor: theme.colors.onSurface,
-        },
-      ],
-    });
+    if (card) {
+      Alert.show({
+        title: t('commons.confirmCardDelete'),
+        description: t('commons.cardDeleteDesc', {
+          card: card.cardDetails.last4,
+        }),
+        buttons: [
+          {
+            label: t('commons.delete'),
+            textColor: theme.colors.error,
+            onPress: () => onDelete?.(card.id),
+          },
+          {
+            label: t('commons.cancel'),
+            textColor: theme.colors.onSurface,
+          },
+        ],
+      });
+    }
   };
 
+  const cardName = isApplePay ? 'Apple Pay' : getCardName(card!);
+
   return (
     <Card
       disabled={isDisabled}
       mode="outlined"
       borderRadius="4"
+      height={50}
+      justifyContent="center"
       mb="8"
       {...(isSelectable
         ? {
             onPress: () => {
-              onSelect(card.linkedObjectId);
+              onSelect?.(card?.linkedObjectId ?? '');
             },
           }
         : {})}
@@ -66,10 +74,10 @@ export const CardRow = ({
       >
         {isSelectable && (
           <RadioButton.Android
-            value={card.linkedObjectId}
+            value={card?.linkedObjectId || 'apple-pay'}
             status={isSelected ? 'checked' : 'unchecked'}
             onPress={() => {
-              onSelect(card.linkedObjectId);
+              onSelect?.(card?.linkedObjectId ?? '');
             }}
           />
         )}
@@ -80,13 +88,26 @@ export const CardRow = ({
           alignItems="center"
           justifyContent="space-between"
         >
-          <Text variant="bodyMedium">{name}</Text>
-          <IconButton
-            disabled={isDisabled}
-            icon="trash-can-outline"
-            bg="background"
-            onPress={onDeleteCard}
-          />
+          <View flexDirection="row" alignItems="center">
+            {isApplePay && (
+              <ApplePayIcon
+                height={24}
+                width={24}
+                color={theme.colors.onBackground}
+              />
+            )}
+            <Text ps={isApplePay ? '8' : '0'} variant="bodyMedium">
+              {cardName}
+            </Text>
+          </View>
+          {!isApplePay && (
+            <IconButton
+              disabled={isDisabled}
+              icon="trash-can-outline"
+              bg="background"
+              onPress={onDeleteCard}
+            />
+          )}
         </View>
       </View>
     </Card>

package/src/screens/SavedCards/SavedCards.tsx

@@ -10,19 +10,22 @@ import {
 import { ActivityIndicator, useTheme } from 'react-native-paper';
 import uuid from 'react-native-uuid';
 import { useTranslation } from 'react-i18next';
-import { FlatList } from 'react-native';
+import { FlatList, Platform } 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 '@kiosinc/commons-types';
+import { useApplePay } from './useApplePay';
 
 export const SavedCards = ({
   onCheckout,
+  showApplePay,
   total,
 }: {
-  onCheckout?: (selectedCard: CustomerCardPayment) => void;
+  onCheckout?: (selectedCard: CustomerCardPayment | 'ApplePay') => void;
   total?: string;
+  showApplePay?: boolean;
 }) => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -35,14 +38,15 @@ export const SavedCards = ({
   } = useCustomerQueries();
   const { saveCard, saveCardLoading } = useSaveCustomerCard();
   const { disableCard, disableCardLoading } = useDisableCard();
-  const [selectedPaymentId, onSelectPaymentId] = useState('');
+  const [selectedPaymentId, setSelectedPaymentId] = useState('');
   const { updateCustomer, updateCustomerLoading } = useUpdateCustomer();
+  const { hasApplePay } = useApplePay();
 
   useEffect(() => {
     if (customer?.paymentId) {
-      onSelectPaymentId(customer.paymentId);
+      setSelectedPaymentId(customer.paymentId);
     }
-  }, [customer?.paymentId, onSelectPaymentId]);
+  }, [customer?.paymentId]);
 
   const {
     data: cards = [],
@@ -51,7 +55,7 @@ export const SavedCards = ({
     refetch,
   } = useFetchSavedCards();
 
-  const onAddPress = () => {
+  const handleAddCard = () => {
     onStartCardEntry(
       (cardDetails) => {
         saveCard({
@@ -59,44 +63,50 @@ export const SavedCards = ({
           idempotentKey: uuid.v4() as string,
         });
       },
-      () => {}
+      () => {
+        Alert.show({
+          title: t('commons.error'),
+          description: t('commons.cardSaveError'),
+        });
+      }
     );
   };
 
-  const label =
-    cards.length > 0 ? t('commons.payAndPlaceOrder') : t('commons.payByCard');
+  const handleUseCard = () => {
+    if (!cards.length && !(hasApplePay && Platform.OS === 'ios')) {
+      Alert.show({ title: t('commons.noPaymentMethods') });
+      return;
+    }
 
-  if (isLoading) {
-    return <ActivityIndicator />;
-  }
+    if (!selectedPaymentId) {
+      Alert.show({ title: t('commons.selectPaymentMethod') });
+      return;
+    }
 
-  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' });
+    if (selectedPaymentId === 'ApplePay') {
+      onCheckout?.('ApplePay');
     } else {
-      // Make payment
       const selectedCard = cards.find(
-        (card: any) => card.linkedObjectId === customer.paymentId
+        (card: any) => card.linkedObjectId === selectedPaymentId
       );
+
       if (selectedCard) {
         onCheckout?.(selectedCard);
       } else {
-        Alert.show({ title: 'Select a card' });
+        Alert.show({ title: t('commons.selectValidPaymentMethod') });
       }
     }
   };
 
+  const paymentMethods =
+    hasApplePay && showApplePay && Platform.OS === 'ios'
+      ? [{ linkedObjectId: 'ApplePay', isApplePay: true }, ...cards]
+      : cards;
+
+  if (isLoading) {
+    return <ActivityIndicator />;
+  }
+
   return (
     <View flex={1}>
       <View px="16" bg="background" flex={1}>
@@ -106,49 +116,51 @@ export const SavedCards = ({
         <FlatList
           extraData={{ selectedPaymentId, disableCardLoading }}
           refreshControl={
-            <RefreshControl refreshing={false} onRefresh={refetch} />
+            <RefreshControl refreshing={isFetching} onRefresh={refetch} />
           }
-          data={cards}
+          data={paymentMethods}
           showsVerticalScrollIndicator={false}
-          renderItem={({ item: card, index }) => (
+          renderItem={({ item: card }) => (
             <CardRow
               isDisabled={disableCardLoading}
               isSelected={selectedPaymentId === card.linkedObjectId}
               isSelectable={!!onCheckout}
-              key={index}
+              isApplePay={card.isApplePay}
               card={card}
               onDelete={(id: string) => {
-                disableCard(id);
+                if (!card.isApplePay) {
+                  disableCard(id);
+                }
               }}
               onSelect={(linkedObjectId: string) => {
-                onSelectPaymentId(linkedObjectId);
-                updateCustomer({
-                  paymentId: linkedObjectId,
-                  addressId: customer.addressId,
-                  squareCustomerId: customer.squareCustomerId,
-                });
+                setSelectedPaymentId(linkedObjectId);
+                if (!card.isApplePay) {
+                  updateCustomer({
+                    paymentId: linkedObjectId,
+                    addressId: customer.addressId,
+                    squareCustomerId: customer.squareCustomerId,
+                  });
+                }
               }}
             />
           )}
           ListHeaderComponent={
-            <>
-              {cards.length > 0 ? (
-                <Text mb="8" variant="titleMedium">
-                  {t('commons.paymentMethods')}
-                </Text>
-              ) : (
-                <Text variant="bodyLarge" color="outline">
-                  {t('commons.noSavedCards')}
-                </Text>
-              )}
-            </>
+            paymentMethods.length > 0 ? (
+              <Text mb="8" variant="titleMedium">
+                {t('commons.paymentMethods')}
+              </Text>
+            ) : (
+              <Text variant="bodyLarge" color="outline">
+                {t('commons.noSavedCards')}
+              </Text>
+            )
           }
           ListFooterComponent={
             <View alignItems="flex-start">
               <Button
-                pt={'16'}
+                pt="16"
                 loading={saveCardLoading}
-                onPress={onAddPress}
+                onPress={handleAddCard}
                 icon="plus"
                 mode="text"
               >
@@ -178,17 +190,15 @@ export const SavedCards = ({
           <Button
             mode="contained"
             height={40}
-            width={'auto'}
+            width="auto"
             alignSelf="center"
             bg="primary"
-            labelStyle={[
-              {
-                color: theme.colors.background,
-              },
-            ]}
-            onPress={onUseCard}
+            labelStyle={{ color: theme.colors.background }}
+            onPress={handleUseCard}
           >
-            {label}
+            {cards.length > 0 || hasApplePay
+              ? t('commons.payAndPlaceOrder')
+              : t('commons.payByCard')}
           </Button>
         </View>
       )}

package/src/screens/SavedCards/useApplePay.tsx

@@ -0,0 +1,88 @@
+import { useState, useCallback, useEffect } from 'react';
+import { Platform } from 'react-native';
+// @ts-ignore
+import { SQIPApplePay } from 'react-native-square-in-app-payments';
+import { Alert } from '@kiosinc/commons-rn';
+
+export const useApplePay = () => {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [hasApplePay, setHasApplePay] = useState(false);
+
+  useEffect(() => {
+    const checkApplePay = async () => {
+      const digitalWalletEnabled = await SQIPApplePay.canUseApplePay();
+      setHasApplePay(digitalWalletEnabled);
+    };
+
+    checkApplePay();
+  }, []);
+
+  // Handle Apple Pay Nonce Request Success
+  const onApplePayNonceRequestSuccess = useCallback(async (cardDetails) => {
+    try {
+      // Perform operations with cardDetails
+      // await chargeCard(cardDetails);
+
+      Alert.show({ title: JSON.stringify(cardDetails) });
+
+      // Close the Apple Pay sheet with success
+      await SQIPApplePay.completeApplePayAuthorization(true);
+    } catch (ex: any) {
+      await SQIPApplePay.completeApplePayAuthorization(false, ex.message);
+    }
+  }, []);
+
+  // Handle Apple Pay Nonce Request Failure
+  const onApplePayNonceRequestFailure = useCallback(async (errorInfo) => {
+    Alert.show({
+      title: errorInfo.message,
+      description: errorInfo.debugMessage,
+    });
+    await SQIPApplePay.completeApplePayAuthorization(false, errorInfo.message);
+  }, []);
+
+  // Handle Apple Pay Entry Completion
+  const onApplePayEntryComplete = useCallback(() => {
+    setIsProcessing(false);
+  }, []);
+
+  // Start Digital Wallet Flow
+  const startApplePay = useCallback(async () => {
+    if (Platform.OS === 'ios') {
+      if (hasApplePay) {
+        const applePayConfig = {
+          price: '0.1',
+          summaryLabel: 'Test Item',
+          countryCode: 'US',
+          currencyCode: 'USD',
+          paymentType: 2,
+        };
+        try {
+          setIsProcessing(true);
+          await SQIPApplePay.requestApplePayNonce(
+            applePayConfig,
+            onApplePayNonceRequestSuccess,
+            onApplePayNonceRequestFailure,
+            onApplePayEntryComplete
+          );
+        } catch (ex) {
+          setIsProcessing(false);
+          // Handle InAppPaymentsException
+        }
+      }
+    } else if (Platform.OS === 'android') {
+      // Android-specific digital wallet logic
+    }
+  }, [
+    onApplePayNonceRequestSuccess,
+    onApplePayNonceRequestFailure,
+    onApplePayEntryComplete,
+    hasApplePay,
+  ]);
+
+  return {
+    hasApplePay,
+    isProcessing,
+    startApplePay,
+  };
+};