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

package/src/components/CardSheet/useCardSheet/index.ts

@@ -0,0 +1,104 @@
+import {
+  useCard,
+  useCvcCode,
+  useExpirationDate,
+  useName,
+} from '../../../hooks/base';
+import { useEffect, useState } from 'react';
+import {
+  usePaymentInstrumentsStore,
+  usePaymentStore,
+} from '../../../contexts/StoreContext';
+import { LayoutAnimation } from 'react-native';
+import { CardPayment, InvalidFieldError } from '../../../types/CommonSheet';
+
+type PaymentMethod = 'new-card' | 'saved-card';
+
+export const useCardSheet = () => {
+  const { cardHolderName, saveCardForFutureUsage, countryCode, pay } =
+    usePaymentStore();
+
+  const { selectedPaymentInstrument, paymentInstruments, payWithToken } =
+    usePaymentInstrumentsStore();
+
+  const cardInputModel = useCard();
+  const nameInputModel = useName(cardHolderName);
+  const expirationDateInputModel = useExpirationDate();
+  const cvcCodeInputModel = useCvcCode();
+  const [saveCard, setSaveCard] = useState(saveCardForFutureUsage || false);
+
+  const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>('new-card');
+
+  useEffect(() => {
+    setPaymentMethod(selectedPaymentInstrument ? 'saved-card' : 'new-card');
+  }, [selectedPaymentInstrument]);
+
+  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;
+
+    if (paymentMethod === 'saved-card' && selectedPaymentInstrument) {
+      error = await payWithToken(selectedPaymentInstrument.token);
+    } else {
+      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,
+      };
+
+      error = await pay(cardPayment);
+    }
+
+    if (error) {
+      handleError(error);
+    }
+  };
+
+  const selectPaymentMethod = (method: PaymentMethod) => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setPaymentMethod(method);
+  };
+
+  return {
+    countryCode,
+    paymentMethod,
+    selectedPaymentInstrument,
+    paymentInstruments,
+    saveCard,
+    cardInputModel,
+    nameInputModel,
+    expirationDateInputModel,
+    cvcCodeInputModel,
+    setSaveCard,
+    processPayment,
+    selectPaymentMethod,
+  };
+};

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TouchableOpacity, Image } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useStyles } from './styles';
+
+interface CheckboxProps {
+  selected: boolean;
+  onPress?: () => void;
+}
+
+export const Checkbox = (props: CheckboxProps) => {
+  const styles = useStyles(props.selected);
+  const theme = useTheme();
+
+  return (
+    <TouchableOpacity
+      disabled={!props.onPress}
+      style={styles.container}
+      onPress={props.onPress}
+    >
+      {props.selected && (
+        <Image style={styles.image} source={theme.images.checkbox} />
+      )}
+    </TouchableOpacity>
+  );
+};

package/src/components/Checkbox/styles.tsx

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = (selected: boolean) => {
+  const { colors } = useTheme();
+
+  const styles = StyleSheet.create({
+    container: {
+      borderRadius: 12,
+      width: 24,
+      height: 24,
+      borderWidth: 2,
+      borderColor: selected ? colors.royalBlue : colors.doveGray,
+    },
+    image: {
+      width: 24,
+      height: 24,
+      marginLeft: -2,
+      marginTop: -2,
+    },
+  });
+
+  return styles;
+};

package/src/components/GooglePayButton/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { TouchableOpacity, Image } from 'react-native';
+import { useNativePaymentStore } from '../../contexts/StoreContext';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useStyles } from './styles';
+
+interface GooglePayButtonProps {
+  disabled?: boolean;
+}
+
+export const GooglePayButton = (props: GooglePayButtonProps) => {
+  const styles = useStyles(props.disabled);
+  const theme = useTheme();
+
+  const { presentGooglePay } = useNativePaymentStore();
+
+  return (
+    <TouchableOpacity
+      disabled={props.disabled}
+      style={styles.container}
+      onPress={presentGooglePay}
+    >
+      <Image style={styles.image} source={theme.images.googlePay} />
+    </TouchableOpacity>
+  );
+};

package/src/components/GooglePayButton/styles.tsx

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = (disabled?: boolean) => {
+  const { colors } = useTheme();
+
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      opacity: disabled ? 0.6 : 1,
+      height: 48,
+      width: '100%',
+      backgroundColor: colors.black,
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    text: {
+      fontSize: 14,
+      color: colors.white,
+    },
+    image: {
+      width: 44,
+      height: 24,
+    },
+  });
+
+  return styles;
+};

package/src/components/Header/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Image, Text, TouchableOpacity, View } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useStyles } from './styles';
+
+interface HeaderProps {
+  title: string;
+
+  onCloseButtonPress: () => void;
+  onBackButtonPress?: () => void;
+}
+
+export const Header = (props: HeaderProps) => {
+  const styles = useStyles();
+  const theme = useTheme();
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        disabled={!props.onBackButtonPress}
+        style={styles.imageContainer}
+        onPress={props.onBackButtonPress}
+      >
+        {props.onBackButtonPress && (
+          <Image style={styles.image} source={theme.images.back} />
+        )}
+      </TouchableOpacity>
+      <Text style={styles.title}>{props.title}</Text>
+      <TouchableOpacity
+        style={styles.imageContainer}
+        onPress={props.onCloseButtonPress}
+      >
+        <Image style={styles.image} source={theme.images.cross} />
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/components/Header/styles.tsx

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { colors, fonts } = useTheme();
+
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      height: 56,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 16,
+    },
+    title: {
+      color: colors.codGray,
+      fontWeight: '700',
+      fontSize: 18,
+      textAlign: 'center',
+      flex: 1,
+      fontFamily: fonts.sfProTextBold,
+    },
+    image: {
+      height: 18,
+      width: 16,
+    },
+    imageContainer: {
+      height: 18,
+      width: 16,
+    },
+  });
+
+  return styles;
+};

package/src/components/ImageButton/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Image, ImageSourcePropType, TouchableOpacity } from 'react-native';
+import { useStyles } from './styles';
+
+interface ImageButtonProps {
+  source: ImageSourcePropType;
+  onPress: () => void;
+}
+
+export const ImageButton = (props: ImageButtonProps) => {
+  const styles = useStyles();
+
+  return (
+    <TouchableOpacity
+      hitSlop={{ left: 10, right: 10, top: 10, bottom: 10 }}
+      style={styles.container}
+      onPress={props.onPress}
+    >
+      <Image style={styles.image} source={props.source} />
+    </TouchableOpacity>
+  );
+};

package/src/components/ImageButton/styles.tsx

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    container: {},
+    image: {},
+  });
+
+  return styles;
+};

package/src/components/InputFields/BaseInputField/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import {
+  TextInput,
+  View,
+  ViewStyle,
+  StyleProp,
+  KeyboardTypeOptions,
+} from 'react-native';
+import type { InputModel } from '../../../types/PaymentSheet';
+import { useStyles } from './styles';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { Stack } from 'react-native-spacing-system';
+import { Text } from '../../../components/Text';
+
+export interface BaseInputFieldProps {
+  title: string;
+  inputModel: InputModel;
+
+  keyboardType?: KeyboardTypeOptions;
+  maxLength?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  placeholder?: string;
+}
+
+export const BaseInputField = (props: BaseInputFieldProps) => {
+  const styles = useStyles();
+
+  const theme = useTheme();
+
+  const onFocus = () => {
+    props.inputModel.onFocus();
+  };
+
+  const onBlur = () => {
+    props.inputModel.onBlur();
+  };
+
+  return (
+    <View style={props.containerStyle}>
+      <Text style={styles.title}>{props.title}</Text>
+      <Stack size={4} />
+      <View style={[styles.container]}>
+        <TextInput
+          placeholder={props.placeholder}
+          placeholderTextColor={theme.colors.dustyGray}
+          autoCorrect={false}
+          spellCheck={false}
+          keyboardType={props.keyboardType}
+          maxLength={props.maxLength}
+          value={props.inputModel.value}
+          onChangeText={props.inputModel.setValue}
+          style={styles.input}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />
+      </View>
+      {!!props.inputModel.errorText && (
+        <Text style={styles.errorText}>{props.inputModel.errorText}</Text>
+      )}
+    </View>
+  );
+};

package/src/components/InputFields/BaseInputField/styles.tsx

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { colors, fonts } = useTheme();
+
+  const styles = StyleSheet.create({
+    input: {
+      fontSize: 16,
+      paddingHorizontal: 16,
+      width: '100%',
+      color: colors.codGray,
+      fontFamily: fonts.sfProTextRegular,
+    },
+    title: {
+      fontSize: 14,
+      lineHeight: 20,
+      color: colors.codGray,
+      fontFamily: fonts.sfProTextRegular,
+    },
+    container: {
+      borderColor: colors.silver,
+      borderWidth: 1,
+      height: 56,
+      justifyContent: 'center',
+      borderRadius: 8,
+    },
+    errorText: {
+      color: colors.guardsmanRed,
+      fontSize: 12,
+      marginVertical: 6,
+      fontFamily: fonts.sfProTextRegular,
+    },
+  });
+
+  return styles;
+};

package/src/components/InputFields/CVCInputField/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { View } from 'react-native';
+import consts from '../../../consts/validation';
+import { BaseInputField, BaseInputFieldProps } from '../BaseInputField';
+import { useStyles } from './styles';
+
+type CVCInputFieldProps = Omit<
+  BaseInputFieldProps,
+  'maxLength' | 'keyboardType'
+>;
+
+export const CVCInputField = (props: CVCInputFieldProps) => {
+  const styles = useStyles();
+
+  return (
+    <View style={props.containerStyle}>
+      <View style={[styles.container]}>
+        <BaseInputField
+          {...props}
+          containerStyle={undefined}
+          maxLength={consts.CVC_MAX_LENGTH}
+          keyboardType="number-pad"
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/InputFields/CVCInputField/styles.tsx

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    container: {
+      justifyContent: 'center',
+    },
+    imagesContainer: {
+      flexDirection: 'row',
+      position: 'absolute',
+      right: 0,
+      paddingRight: 8,
+    },
+    image: {
+      width: 30,
+      height: 20,
+      marginRight: 6,
+    },
+  });
+
+  return styles;
+};

package/src/components/InputFields/CardInputField/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View, Image } from 'react-native';
+import type { CardInputModel } from '../../../types/PaymentSheet';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { BaseInputField, BaseInputFieldProps } from '../BaseInputField';
+import { useStyles } from './styles';
+import consts from '../../../consts/validation';
+
+type CardInputFieldProps = Omit<
+  BaseInputFieldProps,
+  'maxLength' | 'keyboardType'
+> & {
+  inputModel: CardInputModel;
+};
+
+export const CardInputField = (props: CardInputFieldProps) => {
+  const theme = useTheme();
+  const styles = useStyles();
+
+  const cardType = props.inputModel.cardType;
+
+  const renderImage = () => {
+    if (!cardType) {
+      return (
+        <Image
+          style={styles.imagePlaceholder}
+          source={theme.images.cardPlaceholder}
+        />
+      );
+    }
+
+    const cardImage = {
+      americanExpress: theme.images.americanExpress,
+      visa: theme.images.visa,
+      mastercard: theme.images.mastercard,
+    };
+
+    return <Image style={styles.image} source={cardImage[cardType]} />;
+  };
+
+  return (
+    <View style={styles.container}>
+      <BaseInputField
+        {...props}
+        inputModel={props.inputModel}
+        maxLength={
+          cardType
+            ? consts.CARD_NUMBER_LENGTH[cardType]
+            : consts.CARD_NUMBER_LENGTH.default
+        }
+        keyboardType="number-pad"
+      />
+      <View style={styles.imageContainer}>{renderImage()}</View>
+    </View>
+  );
+};

package/src/components/InputFields/CardInputField/styles.tsx

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    container: {},
+    imageContainer: {
+      flexDirection: 'row',
+      position: 'absolute',
+      right: 0,
+      paddingRight: 8,
+      top: 42,
+      marginRight: 6,
+    },
+    imagePlaceholder: {
+      width: 24,
+      height: 24,
+    },
+    image: {
+      width: 32,
+      height: 24,
+    },
+  });
+
+  return styles;
+};

package/src/components/InputFields/ExpirationDateInputField/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BaseInputField, BaseInputFieldProps } from '../BaseInputField';
+import consts from '../../../consts/validation';
+import type { ExpirationDateInputModel } from '../../../types/PaymentSheet';
+
+type ExpirationDateInputFieldProps = Omit<
+  BaseInputFieldProps,
+  'maxLength' | 'keyboardType'
+> & {
+  inputModel: ExpirationDateInputModel;
+};
+
+export const ExpirationDateInputField = (
+  props: ExpirationDateInputFieldProps
+) => {
+  return (
+    <BaseInputField
+      {...props}
+      inputModel={props.inputModel}
+      maxLength={consts.EXPIRATION_DATE_MAX_LENGTH}
+      keyboardType="number-pad"
+    />
+  );
+};

package/src/components/LoadingSpinner/index.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, Easing } from 'react-native';
+import { useStyles } from './styles';
+
+const DURATION = 1000;
+
+const startRotationAnimation = (
+  durationMs: number,
+  rotationDegree: Animated.Value
+): void => {
+  Animated.loop(
+    Animated.timing(rotationDegree, {
+      toValue: 360,
+      duration: durationMs,
+      easing: Easing.linear,
+      useNativeDriver: true,
+    })
+  ).start();
+};
+
+const LoadingSpinner = (): JSX.Element => {
+  const styles = useStyles();
+
+  const rotationDegree = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    startRotationAnimation(DURATION, rotationDegree);
+  }, [rotationDegree]);
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={[
+          styles.progress,
+          {
+            transform: [
+              {
+                rotateZ: rotationDegree.interpolate({
+                  inputRange: [0, 360],
+                  outputRange: ['0deg', '360deg'],
+                }),
+              },
+            ],
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+export default LoadingSpinner;

package/src/components/LoadingSpinner/styles.tsx

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { colors } = useTheme();
+
+  const styles = StyleSheet.create({
+    container: {
+      width: 32,
+      height: 32,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    progress: {
+      borderTopColor: colors.white,
+      width: '100%',
+      height: '100%',
+      borderRadius: 16,
+      borderLeftColor: colors.white,
+      borderRightColor: colors.white,
+      borderBottomColor: colors.royalBlue,
+      borderWidth: 3,
+      position: 'absolute',
+    },
+  });
+
+  return styles;
+};

package/src/components/Modal/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import ModalComponent from 'react-native-modal';
+import { useStyles } from './styles';
+
+interface ModalProps {
+  isVisible: boolean;
+  children: JSX.Element | JSX.Element[] | undefined;
+
+  onClose?: () => void;
+}
+
+export const Modal = (props: ModalProps) => {
+  const styles = useStyles();
+
+  const close = () => {
+    props.onClose?.();
+  };
+
+  return (
+    <ModalComponent
+      hasBackdrop
+      isVisible={props.isVisible}
+      onBackdropPress={close}
+      swipeDirection={undefined}
+      backdropOpacity={0.4}
+      style={styles.modalStyle}
+    >
+      {props.children}
+    </ModalComponent>
+  );
+};