@sumup/react-native-checkout 0.0.0-alpha.1

package/src/components/ProcessButton/index.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, Image } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+import { ProcessButtonType, useStyles } from './styles';
+import { useNetInfo } from '@react-native-community/netinfo';
+import LoadingSpinner from '../LoadingSpinner';
+import { PaymentStatus } from '../../types/CommonSheet';
+
+interface ProcessButtonProps {
+  defaultContent: JSX.Element;
+  canStartPayment: boolean;
+  paymentStatus: PaymentStatus;
+
+  onPress: () => void;
+}
+
+export const ProcessButton = (props: ProcessButtonProps) => {
+  const theme = useTheme();
+
+  const [type, setType] = useState<ProcessButtonType>('active');
+
+  const styles = useStyles(type);
+
+  const { isConnected } = useNetInfo();
+
+  useEffect(() => {
+    if (!isConnected) {
+      setType('disabled');
+      return;
+    }
+
+    switch (props.paymentStatus) {
+      case 'default':
+      case 'failed':
+        setType(props.canStartPayment ? 'active' : 'disabled');
+        break;
+
+      case 'processing':
+        setType('processing');
+        break;
+
+      case 'success':
+        setType('success');
+        break;
+    }
+  }, [props.canStartPayment, props.paymentStatus, isConnected]);
+
+  let content = <></>;
+  switch (type) {
+    case 'processing':
+      content = <LoadingSpinner />;
+      break;
+
+    case 'active':
+    case 'disabled':
+      content = props.defaultContent;
+      break;
+
+    case 'success':
+      content = (
+        <Image source={theme.images.whiteCheckmark} style={styles.checkmark} />
+      );
+      break;
+  }
+
+  return (
+    <TouchableOpacity
+      disabled={type !== 'active'}
+      style={styles.container}
+      onPress={props.onPress}
+    >
+      {content}
+    </TouchableOpacity>
+  );
+};

package/src/components/ProcessButton/styles.tsx

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export type ProcessButtonType =
+  | 'disabled'
+  | 'active'
+  | 'processing'
+  | 'success';
+
+export const useStyles = (type: ProcessButtonType) => {
+  const { colors } = useTheme();
+
+  const backgroundColor = {
+    disabled: colors.dodgerBlue,
+    active: colors.dodgerBlue,
+    processing: colors.dodgerBlue,
+    success: colors.deepSea,
+  };
+
+  const styles = StyleSheet.create({
+    container: {
+      height: 48,
+      width: '100%',
+      backgroundColor: backgroundColor[type],
+      borderRadius: 100,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    checkmark: {
+      width: 24,
+      height: 24,
+    },
+  });
+
+  return styles;
+};

package/src/components/SaveCard/index.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Image, Keyboard, TouchableWithoutFeedback, View } from 'react-native';
+import { observer } from 'mobx-react-lite';
+import { PaymentMethodFormHeaderOption } from '../PaymentMethodFormHeaderOption';
+import { useStrings } from '../../contexts/LanguageContext';
+import { Queue, Stack } from 'react-native-spacing-system';
+import { CardInformation } from '../CardInformation';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useStyles } from './styles';
+import { useSaveCard } from './useSaveCard';
+import { Header } from '../Header';
+import { PaymentMethodsForm } from '../PaymentMethodsForm';
+import { NoInternetConnection } from '../NoInternetConnection';
+import { SaveCardButton } from '../SaveCardButton';
+
+interface SaveCardProps {
+  onClose: () => void;
+}
+
+export const SaveCard = observer((props: SaveCardProps) => {
+  const { strings } = useStrings();
+  const { images } = useTheme();
+
+  const styles = useStyles();
+
+  const {
+    countryCode,
+    cardInputModel,
+    nameInputModel,
+    expirationDateInputModel,
+    cvcCodeInputModel,
+    processPayment,
+  } = useSaveCard();
+
+  const cardInformationProps = {
+    saveCardTitle: strings.choosePaymentMethod.cardInformation.saveCard,
+    saveCard: true,
+    nameInputModel,
+    cardInputModel,
+    cvcCodeInputModel,
+    expirationDateInputModel,
+    countryCode,
+    showPrivacyPolicyAllTime: true,
+  };
+
+  const CardPayment = (
+    <>
+      <PaymentMethodFormHeaderOption
+        selected={true}
+        disabled={true}
+        title={strings.choosePaymentMethod.paymentMethods.cardOption}
+        rightChildren={
+          <>
+            <Image style={styles.image} source={images.visa} />
+            <Queue size={8} />
+            <Image style={styles.image} source={images.mastercard} />
+            <Queue size={8} />
+            <Image style={styles.image} source={images.americanExpress} />
+          </>
+        }
+      />
+      <Stack size={16} />
+      <CardInformation {...cardInformationProps} />
+    </>
+  );
+
+  const saveCardButtonProps = {
+    canStartPayment: true,
+    onPress: processPayment,
+  };
+
+  return (
+    <>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View style={styles.container}>
+          <Header
+            title={strings.saveCard.title}
+            onCloseButtonPress={props.onClose}
+          />
+          <PaymentMethodsForm methods={[CardPayment]} />
+          <Stack size={32} />
+          <NoInternetConnection />
+          <SaveCardButton {...saveCardButtonProps} />
+        </View>
+      </TouchableWithoutFeedback>
+    </>
+  );
+});

package/src/components/SaveCard/styles.tsx

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+import { useSafeArea } from '../../hooks/useSafeArea';
+
+export const useStyles = () => {
+  const insets = useSafeArea();
+
+  const styles = StyleSheet.create({
+    image: {
+      width: 32,
+      height: 24,
+    },
+    container: {
+      paddingBottom: insets.bottom + 16,
+    },
+  });
+
+  return styles;
+};

package/src/components/SaveCard/useSaveCard/index.ts

@@ -0,0 +1,71 @@
+import {
+  useCard,
+  useCvcCode,
+  useExpirationDate,
+  useName,
+} from '../../../hooks/base';
+import { useSaveCardStore } from '../../../contexts/StoreContext';
+import { CardPayment, InvalidFieldError } from '../../../types/CommonSheet';
+
+export const useSaveCard = () => {
+  const { cardHolderName, countryCode, saveCard } = useSaveCardStore();
+
+  const cardInputModel = useCard();
+  const nameInputModel = useName(cardHolderName);
+  const expirationDateInputModel = useExpirationDate();
+  const cvcCodeInputModel = useCvcCode();
+
+  const handleError = (error: InvalidFieldError) => {
+    if (error.param.includes('number')) {
+      cardInputModel.setErrorText(error.message);
+    } else if (error.param.includes('name')) {
+      nameInputModel.setErrorText(error.message);
+    } else if (error.param.includes('cvv')) {
+      cvcCodeInputModel.setErrorText(error.message);
+    } else if (error.param.includes('expiry')) {
+      expirationDateInputModel.setErrorText(error.message);
+    }
+  };
+
+  const processPayment = async () => {
+    let error;
+
+    cardInputModel.showErrorIfNeeded();
+    nameInputModel.showErrorIfNeeded();
+    cvcCodeInputModel.showErrorIfNeeded();
+    expirationDateInputModel.showErrorIfNeeded();
+
+    if (
+      !cardInputModel.isValid ||
+      !nameInputModel.isValid ||
+      !cvcCodeInputModel.isValid ||
+      !expirationDateInputModel.isValid
+    ) {
+      return;
+    }
+
+    const cardPayment: CardPayment = {
+      name: nameInputModel.value,
+      number: cardInputModel.value,
+      expiryMonth: expirationDateInputModel.month?.toString() || '',
+      expiryYear: expirationDateInputModel.year?.toString() || '',
+      cvv: cvcCodeInputModel.value,
+      saveCard: true,
+    };
+
+    error = await saveCard(cardPayment);
+
+    if (error) {
+      handleError(error);
+    }
+  };
+
+  return {
+    countryCode,
+    cardInputModel,
+    nameInputModel,
+    expirationDateInputModel,
+    cvcCodeInputModel,
+    processPayment,
+  };
+};

package/src/components/SaveCardButton/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useStrings } from '../../contexts/LanguageContext';
+import { useStyles } from './styles';
+import { useSaveCardStore } from '../../contexts/StoreContext';
+import { observer } from 'mobx-react-lite';
+import { ProcessButton } from '../ProcessButton';
+
+interface SaveCardButtonProps {
+  canStartPayment: boolean;
+
+  onPress: () => void;
+}
+
+export const SaveCardButton = observer((props: SaveCardButtonProps) => {
+  const { paymentStatus } = useSaveCardStore();
+
+  const { strings } = useStrings();
+
+  const styles = useStyles();
+
+  return (
+    <ProcessButton
+      canStartPayment={props.canStartPayment}
+      paymentStatus={paymentStatus}
+      defaultContent={
+        <Text style={styles.text}>{strings.saveCard.saveCardButton}</Text>
+      }
+      onPress={props.onPress}
+    />
+  );
+});

package/src/components/SaveCardButton/styles.tsx

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { colors, fonts } = useTheme();
+
+  const styles = StyleSheet.create({
+    text: {
+      fontSize: 16,
+      lineHeight: 24,
+      color: colors.white,
+      fontFamily: fonts.aktivGroteskBold,
+    },
+    lockImage: {
+      width: 24,
+      height: 24,
+    },
+    defaultContentContainer: {
+      flexDirection: 'row',
+    },
+  });
+
+  return styles;
+};

package/src/components/SaveCardSheet/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Modal } from '../Modal';
+import { ThreeDSecureSheet } from '../3DSecureSheet';
+import { useSaveCardStore } from '../../contexts/StoreContext';
+import { observer } from 'mobx-react-lite';
+import { AnimatedContainer } from '../AnimatedContainer';
+import { SaveCard } from '../SaveCard';
+
+export const SaveCardSheet = observer(() => {
+  const { isSheetVisible, hideSaveCardSheet } = useSaveCardStore();
+
+  const onClose = () => {
+    hideSaveCardSheet(true);
+  };
+
+  return (
+    <Modal isVisible={isSheetVisible}>
+      <AnimatedContainer initWithoutAnimation>
+        {isSheetVisible ? <SaveCard onClose={onClose} /> : <></>}
+      </AnimatedContainer>
+      <ThreeDSecureSheet />
+    </Modal>
+  );
+});

package/src/components/SavedCard/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Image, Text, View } from 'react-native';
+import { useStyles } from './styles';
+import { useTheme } from '../../contexts/ThemeContext';
+import { PaymentInstrument } from '../../types/PaymentSheet';
+import { Queue, Stack } from 'react-native-spacing-system';
+
+interface SavedCardProps {
+  paymentInstrument: PaymentInstrument;
+}
+
+export const SavedCard = (props: SavedCardProps) => {
+  const { images } = useTheme();
+
+  const styles = useStyles();
+
+  let image = images.visa;
+  switch (props.paymentInstrument.type) {
+    case 'MASTERCARD':
+      image = images.mastercard;
+      break;
+
+    case 'AMEX':
+      image = images.americanExpress;
+      break;
+
+    default:
+      break;
+  }
+
+  const cardName =
+    props.paymentInstrument.type.charAt(0).toUpperCase() +
+    props.paymentInstrument.type.slice(1).toLocaleLowerCase();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <Image style={styles.image} source={image} />
+        <Queue size={16} />
+        <Text style={styles.title}>{cardName}</Text>
+      </View>
+      <Stack size={2} />
+      <View style={styles.row}>
+        <Text
+          style={styles.text}
+        >{`···· ···· ···· ${props.paymentInstrument.lastDigits}`}</Text>
+      </View>
+    </View>
+  );
+};

package/src/components/SavedCard/styles.tsx

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { colors, fonts } = useTheme();
+
+  const styles = StyleSheet.create({
+    container: {},
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    image: {
+      width: 32,
+      height: 24,
+    },
+    title: {
+      fontSize: 16,
+      color: colors.codGray,
+      fontFamily: fonts.sfProTextRegular,
+    },
+    text: {
+      fontSize: 14,
+      lineHeight: 20,
+      color: colors.doveGray,
+      fontFamily: fonts.sfProTextRegular,
+    },
+  });
+
+  return styles;
+};

package/src/components/SavedCardsSheet/index.tsx

@@ -0,0 +1,108 @@
+import React, { useRef } from 'react';
+import { Alert, ScrollView, View } from 'react-native';
+import { useStyles } from './styles';
+import { PaymentMethodsForm } from '../PaymentMethodsForm';
+import { Header } from '../Header';
+import { useStrings } from '../../contexts/LanguageContext';
+import { usePaymentInstrumentsStore } from '../../contexts/StoreContext';
+import { PaymentInstrument } from '../../types/PaymentSheet';
+import { observer } from 'mobx-react-lite';
+import { useOptionMenu } from '../../contexts/OptionMenuContext';
+import { OptionMenuModal } from '../OptionMenuModal';
+import { PaymentMethod } from '../PaymentMethod';
+
+interface SavedCardsSheetProps {
+  onBack: () => void;
+  onClose: () => void;
+}
+
+export const SavedCardsSheet = observer((props: SavedCardsSheetProps) => {
+  const { strings } = useStrings();
+
+  const styles = useStyles();
+
+  const selectedToken = useRef('');
+
+  const optionMenu = useOptionMenu();
+
+  const {
+    paymentInstruments,
+    selectedPaymentInstrument,
+    selectPaymentInstrument,
+    deletePaymentInstrument,
+  } = usePaymentInstrumentsStore();
+
+  const onUse = () => {
+    if (!selectedToken.current) {
+      return;
+    }
+
+    selectPaymentInstrument(selectedToken.current);
+  };
+
+  const onDelete = () => {
+    if (!selectedToken.current) {
+      return;
+    }
+
+    Alert.alert(
+      strings.savedCards.deleteAlert.title,
+      strings.savedCards.deleteAlert.description,
+      [
+        {
+          text: strings.savedCards.deleteAlert.cancelButton,
+          style: 'cancel',
+        },
+        {
+          text: strings.savedCards.deleteAlert.deleteButton,
+          style: 'destructive',
+          onPress: () => handleDelete(selectedToken.current),
+        },
+      ]
+    );
+  };
+
+  const handleDelete = async (token: string) => {
+    const updatedInstruments = await deletePaymentInstrument(token);
+    if (updatedInstruments.length === 0) {
+      props.onBack();
+    }
+  };
+
+  const renderPaymentMethod = (item: PaymentInstrument) => {
+    const selected = item.token === selectedPaymentInstrument?.token;
+
+    return (
+      <PaymentMethod
+        item={item}
+        selected={selected}
+        onSelect={() => selectPaymentInstrument(item.token)}
+        onOptionsPress={(x, y) => {
+          selectedToken.current = item.token;
+          optionMenu.show(x, y, selected);
+        }}
+      />
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Header
+        title={strings.savedCards.title}
+        onCloseButtonPress={props.onClose}
+        onBackButtonPress={props.onBack}
+      />
+      <ScrollView
+        contentContainerStyle={styles.scrollViewContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {paymentInstruments && (
+          <PaymentMethodsForm
+            methods={paymentInstruments.map(renderPaymentMethod)}
+          />
+        )}
+      </ScrollView>
+      <OptionMenuModal onDelete={onDelete} onUse={onUse} />
+    </View>
+  );
+});

package/src/components/SavedCardsSheet/styles.tsx

@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+import { useSafeArea } from '../../hooks/useSafeArea';
+
+export const useStyles = () => {
+  const insets = useSafeArea();
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    scrollViewContent: {
+      paddingBottom: insets.bottom + 16,
+    },
+  });
+
+  return styles;
+};

package/src/components/SumUpProvider.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import { RootStoreProvider } from '../contexts/StoreContext';
+import { LanguageProvider } from '../contexts/LanguageContext';
+import type { InitSumUpProps } from '../types';
+import { PaymentSheet } from './PaymentSheet';
+import { Platform, UIManager } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { OptionMenuProvider } from '../contexts/OptionMenuContext';
+import { PaymentSheetProvider } from '../contexts/PaymentSheetContext';
+import { SaveCardSheet } from './SaveCardSheet';
+
+/**
+ *  Sumup Provider Component Props
+ */
+export type Props = InitSumUpProps & {
+  children: React.ReactElement | React.ReactElement[];
+};
+
+/**
+ *  SumUpProvider Component
+ *
+ * @example
+ * ```ts
+ *  <SumUpProvider
+ *    publicKey="sup_pk_..."
+ *  >
+ *    <App />
+ *  </SumUpProvider>
+ * ```
+ * @param __namedParameters Props
+ * @returns JSX.Element
+ * @category ReactComponents
+ */
+export const SumUpProvider = ({
+  publicKey,
+  domain,
+  children,
+  //@ts-ignore
+  isTestApp,
+}: Props) => {
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      if (UIManager.setLayoutAnimationEnabledExperimental) {
+        UIManager.setLayoutAnimationEnabledExperimental(true);
+      }
+    }
+  }, []);
+
+  return (
+    <SafeAreaProvider>
+      <LanguageProvider>
+        <PaymentSheetProvider>
+          <OptionMenuProvider>
+            <RootStoreProvider
+              publicKey={publicKey}
+              domain={domain}
+              isTestApp={isTestApp}
+            >
+              <PaymentSheet />
+              <SaveCardSheet />
+              <>{children}</>
+            </RootStoreProvider>
+          </OptionMenuProvider>
+        </PaymentSheetProvider>
+      </LanguageProvider>
+    </SafeAreaProvider>
+  );
+};

package/src/components/Switch/index.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import {
+  Text,
+  View,
+  TouchableWithoutFeedback,
+  LayoutAnimation,
+} from 'react-native';
+import { useStyles } from './styles';
+
+interface CheckboxProps {
+  text: string;
+  isChecked?: boolean;
+
+  onChangeValue?: (isChecked: boolean) => void;
+}
+
+export const Switch = (props: CheckboxProps) => {
+  const [selected, setSelected] = useState(!!props.isChecked);
+
+  const styles = useStyles(selected);
+
+  const onSwitchPress = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setSelected(!selected);
+    props.onChangeValue?.(!selected);
+  };
+
+  return (
+    <View style={styles.container}>
+      <View pointerEvents="none" style={styles.textContainer}>
+        <Text style={styles.title}>{props.text}</Text>
+      </View>
+      <TouchableWithoutFeedback onPress={onSwitchPress}>
+        <View style={styles.switchContainer}>
+          <View style={styles.switchCircle} />
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  );
+};