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

package/src/components/3DSecureSheet/index.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef } from 'react';
+import { useThreeDSecureStore } from '../../contexts/StoreContext';
+import { observer } from 'mobx-react-lite';
+import logger from '../../services/Logger';
+import { WebViewSheet } from '../WebViewSheet';
+
+export const ThreeDSecureSheet = observer(() => {
+  const wasRedirected = useRef(false);
+
+  const {
+    currentCheckoutId,
+    threeDSecureModel,
+    handle3DSecure,
+    forceCloseThreeDSecure,
+  } = useThreeDSecureStore();
+
+  const isVisible = !!threeDSecureModel;
+
+  let inputs = '';
+  for (const key in threeDSecureModel?.payload) {
+    inputs += `<input type="hidden" name="${key}" value="${threeDSecureModel?.payload[key]}" />`;
+  }
+
+  useEffect(() => {
+    wasRedirected.current = false;
+  }, [threeDSecureModel]);
+
+  const onClose = () => {
+    logger.log(`[3DSecure Flow] a user closed webview`, {});
+
+    forceCloseThreeDSecure();
+  };
+
+  return threeDSecureModel ? (
+    <WebViewSheet
+      isVisible={isVisible}
+      onClose={onClose}
+      onShouldStartLoadWithRequest={(event) => {
+        logger.log(`[3DSecure Flow] [WebView]`, {
+          data: { url: event.url },
+        });
+
+        if (currentCheckoutId && event.url.includes(currentCheckoutId)) {
+          handle3DSecure();
+          return false;
+        }
+
+        return true;
+      }}
+      source={{
+        html: `<form name="autoSubmitForm" action="${threeDSecureModel.url}" method="${threeDSecureModel.method}">${inputs}</form><script type="text/javascript">document.autoSubmitForm.submit();</script>`,
+      }}
+    />
+  ) : (
+    <></>
+  );
+});

package/src/components/AnimatedContainer/index.tsx

@@ -0,0 +1,105 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  KeyboardAvoidingView,
+  LayoutChangeEvent,
+  Platform,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { useStyles } from './styles';
+import { useSafeArea } from '../../hooks/useSafeArea';
+
+const TIMEOUT = 300;
+const BACK_OFFSET = -50;
+const KEYBOARD_VERTICAL_OFFET = 80;
+
+export interface AnimatedContainerHandler {
+  goToBack: () => void;
+  hide: () => void;
+  show: () => void;
+}
+
+interface AnimatedContainerProps {
+  initWithoutAnimation?: boolean;
+  children: JSX.Element | JSX.Element[];
+  height?: number;
+  onHeightChanged?: (height: number) => void;
+}
+
+export const AnimatedContainer = forwardRef<
+  AnimatedContainerHandler,
+  AnimatedContainerProps
+>((props, ref) => {
+  const insets = useSafeArea();
+
+  const isShown = useRef(false);
+
+  const [height, setHeight] = useState<number | undefined>();
+
+  const styles = useStyles(height);
+
+  const { width } = useWindowDimensions();
+
+  const left = useRef(
+    new Animated.Value(props.initWithoutAnimation ? 0 : width)
+  );
+
+  useImperativeHandle(ref, () => ({
+    goToBack: () => {
+      isShown.current = false;
+      Animated.timing(left.current, {
+        toValue: BACK_OFFSET,
+        duration: TIMEOUT,
+        useNativeDriver: false,
+      }).start();
+    },
+    hide: () => {
+      isShown.current = false;
+      Animated.timing(left.current, {
+        toValue: width,
+        duration: TIMEOUT,
+        useNativeDriver: false,
+      }).start();
+    },
+    show: () => {
+      isShown.current = true;
+      Animated.timing(left.current, {
+        toValue: 0,
+        duration: TIMEOUT,
+        useNativeDriver: false,
+      }).start();
+    },
+  }));
+
+  useEffect(() => {
+    if (!isShown.current) {
+      setHeight(props.height);
+    }
+  }, [props.height]);
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    props.onHeightChanged?.(event.nativeEvent.layout.height);
+  };
+
+  return (
+    <Animated.View style={[styles.container, { left: left.current }]}>
+      <KeyboardAvoidingView
+        style={styles.keyboardAvoidingView}
+        enabled={true}
+        behavior={Platform.OS === 'android' ? 'height' : 'position'}
+        keyboardVerticalOffset={-(insets.bottom + KEYBOARD_VERTICAL_OFFET)}
+      >
+        <View style={styles.content} onLayout={onLayout}>
+          {props.children}
+        </View>
+      </KeyboardAvoidingView>
+    </Animated.View>
+  );
+});

package/src/components/AnimatedContainer/styles.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = (height?: number) => {
+  const { colors } = useTheme();
+
+  const { width } = useWindowDimensions();
+
+  const styles = StyleSheet.create({
+    container: {
+      position: 'absolute',
+      bottom: 0,
+      top: 0,
+      left: 0,
+      right: 0,
+    },
+    content: {
+      backgroundColor: colors.white,
+      width: width,
+      height,
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      paddingHorizontal: 16,
+    },
+    keyboardAvoidingView: {
+      flex: 1,
+      justifyContent: 'flex-end',
+    },
+  });
+
+  return styles;
+};

package/src/components/ApplePayButton/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';
+import { useNativePaymentStore } from '../../contexts/StoreContext';
+
+interface ApplePayButtonProps {
+  disabled?: boolean;
+}
+
+export const ApplePayButton = (props: ApplePayButtonProps) => {
+  const styles = useStyles(props.disabled);
+  const theme = useTheme();
+
+  const { presentApplePay } = useNativePaymentStore();
+
+  return (
+    <TouchableOpacity
+      disabled={props.disabled}
+      style={styles.container}
+      onPress={presentApplePay}
+    >
+      <Image style={styles.image} source={theme.images.applePay} />
+    </TouchableOpacity>
+  );
+};

package/src/components/ApplePayButton/styles.tsx

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

package/src/components/Button/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import { useStyles } from './styles';
+
+export type ButtonType = 'primary' | 'secondary' | 'tertiary';
+
+interface ButtonProps {
+  title: string;
+  type: ButtonType;
+
+  onPress: () => void;
+}
+
+export const Button = (props: ButtonProps) => {
+  const styles = useStyles(props.type);
+
+  return (
+    <TouchableOpacity style={styles.container} onPress={props.onPress}>
+      <Text style={styles.text}>{props.title}</Text>
+    </TouchableOpacity>
+  );
+};

package/src/components/Button/styles.tsx

@@ -0,0 +1,52 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+import { ButtonType } from '.';
+
+export const useStyles = (type: ButtonType) => {
+  const { colors, fonts } = useTheme();
+
+  const textColor = {
+    primary: colors.white,
+    secondary: colors.codGray,
+    tertiary: colors.alizarinCrimson,
+  };
+
+  const backgroundColor = {
+    primary: colors.royalBlue,
+    secondary: colors.transparent,
+    tertiary: colors.transparent,
+  };
+
+  const borderColor = {
+    primary: colors.transparent,
+    secondary: colors.silver,
+    tertiary: colors.transparent,
+  };
+
+  const borderWidth = {
+    primary: 0,
+    secondary: 1,
+    tertiary: 0,
+  };
+
+  const styles = StyleSheet.create({
+    container: {
+      height: 48,
+      borderRadius: 100,
+      width: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: backgroundColor[type],
+      borderWidth: borderWidth[type],
+      borderColor: borderColor[type],
+    },
+    text: {
+      fontSize: 16,
+      lineHeight: 24,
+      color: textColor[type],
+      fontFamily: fonts.sfProTextBold,
+    },
+  });
+
+  return styles;
+};

package/src/components/CardInformation/index.tsx

@@ -0,0 +1,129 @@
+import React, { useRef } from 'react';
+import { View } from 'react-native';
+import { useStrings } from '../../contexts/LanguageContext';
+import { CardInputField } from '../InputFields/CardInputField';
+import { CVCInputField } from '../InputFields/CVCInputField';
+import { ExpirationDateInputField } from '../InputFields/ExpirationDateInputField';
+import { useStyles } from './styles';
+import type {
+  CardInputModel,
+  ExpirationDateInputModel,
+  InputModel,
+} from '../../types/PaymentSheet';
+import { BaseInputField } from '../InputFields/BaseInputField';
+import { Stack, Queue } from 'react-native-spacing-system';
+import { Switch } from '../Switch';
+import { usePaymentInstrumentsStore } from '../../contexts/StoreContext';
+import { Text } from '../Text';
+import {
+  PrivacyPolicySheet,
+  PrivacyPolicySheetHandler,
+} from '../PrivacyPolicySheet';
+
+interface CardInformationProps {
+  saveCardTitle: string;
+
+  saveCard: boolean;
+  nameInputModel: InputModel;
+  cvcCodeInputModel: InputModel;
+  cardInputModel: CardInputModel;
+  expirationDateInputModel: ExpirationDateInputModel;
+
+  countryCode?: string | null;
+  showPrivacyPolicyAllTime?: boolean;
+
+  onSaveCardValueChange?: (saveCard: boolean) => void;
+}
+
+export const CardInformation = (props: CardInformationProps) => {
+  const { strings } = useStrings();
+
+  const styles = useStyles();
+
+  const { canCardBeSavedForFuturePayments } = usePaymentInstrumentsStore();
+
+  const privacyPolicySheetRef = useRef<PrivacyPolicySheetHandler>(null);
+
+  const onPrivacyPolicyLinkPress = () => {
+    privacyPolicySheetRef.current?.show();
+  };
+
+  const SaveCardCheckbox = canCardBeSavedForFuturePayments && (
+    <>
+      <Stack size={16} />
+      <Switch
+        text={props.saveCardTitle}
+        isChecked={props.saveCard}
+        onChangeValue={props.onSaveCardValueChange}
+      />
+    </>
+  );
+
+  const PrivacyPolicy = (props.showPrivacyPolicyAllTime || props.saveCard) && (
+    <>
+      <Stack size={8} />
+      <Text
+        style={styles.privacyPolicyText}
+        customTag={{
+          style: styles.privacyPolicyLink,
+        }}
+        onPress={onPrivacyPolicyLinkPress}
+      >
+        {strings.choosePaymentMethod.cardInformation.privacyPolicy}
+      </Text>
+    </>
+  );
+
+  return (
+    <View>
+      <BaseInputField
+        title={strings.choosePaymentMethod.cardInformation.cardholderNameTitle}
+        inputModel={props.nameInputModel}
+        placeholder={
+          strings.choosePaymentMethod.cardInformation.namePlaceholder
+        }
+      />
+      <Stack size={16} />
+      <CardInputField
+        title={strings.choosePaymentMethod.cardInformation.cardNumberTitle}
+        inputModel={props.cardInputModel}
+        placeholder={
+          strings.choosePaymentMethod.cardInformation.cardNumberInputPlaceholder
+        }
+      />
+      <Stack size={16} />
+      <View style={styles.rowContainer}>
+        <ExpirationDateInputField
+          title={
+            strings.choosePaymentMethod.cardInformation.expirationDateTitle
+          }
+          inputModel={props.expirationDateInputModel}
+          placeholder={
+            strings.choosePaymentMethod.cardInformation
+              .expirationDateInputPlaceholder
+          }
+          containerStyle={styles.expirationDateInput}
+        />
+        <Queue size={16} />
+        <CVCInputField
+          title={strings.choosePaymentMethod.cardInformation.securityCodeTitle}
+          inputModel={props.cvcCodeInputModel}
+          placeholder={
+            strings.choosePaymentMethod.cardInformation.cvcInputPlaceholder
+          }
+          containerStyle={styles.cvcInput}
+        />
+      </View>
+      <Stack size={8} />
+      {SaveCardCheckbox}
+      {PrivacyPolicy}
+      <Stack size={16} />
+      {props.countryCode && (
+        <PrivacyPolicySheet
+          ref={privacyPolicySheetRef}
+          countryCode={props.countryCode}
+        />
+      )}
+    </View>
+  );
+};

package/src/components/CardInformation/styles.tsx

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { colors } = useTheme();
+
+  const styles = StyleSheet.create({
+    rowContainer: {
+      flexDirection: 'row',
+      marginTop: -1,
+    },
+    expirationDateInput: {
+      flex: 1,
+    },
+    cvcInput: {
+      flex: 1,
+      marginLeft: -1,
+      justifyContent: 'flex-start',
+    },
+    title: {
+      fontWeight: '600',
+      fontSize: 14,
+      color: colors.paleSky,
+      marginBottom: 8,
+    },
+    privacyPolicyText: {
+      color: colors.doveGray,
+    },
+    privacyPolicyLink: {
+      color: colors.royalBlue,
+    },
+  });
+
+  return styles;
+};

package/src/components/CardSheet/index.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useRef } from 'react';
+import { Image, Keyboard, ScrollView, Text, View } from 'react-native';
+import { NativePayButton } from '../NativePayButton';
+import { Stack } from 'react-native-spacing-system';
+import { useStrings } from '../../contexts/LanguageContext';
+import { NoInternetConnection } from '../NoInternetConnection';
+import { PayButton } from '../PayButton';
+import { useCardSheet } from './useCardSheet';
+import { useStyles } from './styles';
+import { observer } from 'mobx-react-lite';
+import { Header } from '../Header';
+import { PaymentMethodsForm } from '../PaymentMethodsForm';
+import { CardInformation } from '../CardInformation';
+import { PaymentMethodFormHeaderOption } from '../PaymentMethodFormHeaderOption';
+import { Queue } from 'react-native-spacing-system';
+import { useTheme } from '../../contexts/ThemeContext';
+import { SavedCard } from '../SavedCard';
+import { ImageButton } from '../ImageButton';
+import {
+  useNativePaymentStore,
+  usePaymentStore,
+} from '../../contexts/StoreContext';
+
+interface CardSheetProps {
+  onClose: () => void;
+  onCardPress: () => void;
+}
+
+export const CardSheet = observer((props: CardSheetProps) => {
+  const { strings } = useStrings();
+
+  const styles = useStyles();
+
+  const { images } = useTheme();
+
+  const scrollView = useRef<ScrollView>(null);
+
+  const {
+    countryCode,
+    paymentMethod,
+    selectedPaymentInstrument,
+    nameInputModel,
+    cardInputModel,
+    cvcCodeInputModel,
+    expirationDateInputModel,
+    saveCard,
+    processPayment,
+    setSaveCard,
+    selectPaymentMethod,
+  } = useCardSheet();
+
+  const { canPayWithNativeView } = useNativePaymentStore();
+  const { paymentStatus } = usePaymentStore();
+
+  const cardInformationProps = {
+    countryCode,
+    saveCardTitle: strings.choosePaymentMethod.cardInformation.saveCard,
+    saveCard,
+    nameInputModel,
+    cardInputModel,
+    cvcCodeInputModel,
+    expirationDateInputModel,
+    onSaveCardValueChange: setSaveCard,
+  };
+
+  const payButtonProps = {
+    canStartPayment: true,
+    onPress: processPayment,
+  };
+
+  const onKeyboardDidShow = () => {
+    scrollView.current?.scrollToEnd();
+  };
+
+  useEffect(() => {
+    const listener = Keyboard.addListener(
+      'keyboardWillShow',
+      onKeyboardDidShow
+    );
+
+    return () => {
+      listener.remove();
+    };
+  }, []);
+
+  const SavedCards = selectedPaymentInstrument && (
+    <>
+      <PaymentMethodFormHeaderOption
+        selected={paymentMethod === 'saved-card'}
+        onSelect={() => selectPaymentMethod('saved-card')}
+        title={strings.choosePaymentMethod.paymentMethods.saveCardOption}
+        rightChildren={
+          <ImageButton source={images.rightArrow} onPress={props.onCardPress} />
+        }
+      />
+      {paymentMethod === 'saved-card' && (
+        <View style={styles.savedCardContainer}>
+          <SavedCard paymentInstrument={selectedPaymentInstrument} />
+        </View>
+      )}
+    </>
+  );
+
+  const CardPayment = (
+    <>
+      <PaymentMethodFormHeaderOption
+        selected={paymentMethod === 'new-card'}
+        onSelect={() => selectPaymentMethod('new-card')}
+        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} />
+          </>
+        }
+      />
+      {paymentMethod === 'new-card' && (
+        <>
+          <Stack size={16} />
+          <CardInformation {...cardInformationProps} />
+        </>
+      )}
+    </>
+  );
+
+  const PaymentMethods = (
+    <PaymentMethodsForm
+      methods={
+        [SavedCards, CardPayment].filter((item) => !!item) as JSX.Element[]
+      }
+    />
+  );
+
+  const NativePayView = canPayWithNativeView && (
+    <>
+      <NativePayButton
+        disabled={paymentStatus === 'processing' || paymentStatus === 'success'}
+      />
+      <Stack size={20} />
+      <Text style={styles.separatorText}>
+        {strings.choosePaymentMethod.separatorText}
+      </Text>
+      <Stack size={20} />
+    </>
+  );
+
+  return (
+    <View style={styles.container}>
+      <Header
+        title={strings.choosePaymentMethod.title}
+        onCloseButtonPress={props.onClose}
+      />
+      <ScrollView ref={scrollView} showsVerticalScrollIndicator={false}>
+        {NativePayView}
+        {PaymentMethods}
+      </ScrollView>
+      <Stack size={32} />
+      <NoInternetConnection />
+      <PayButton {...payButtonProps} />
+    </View>
+  );
+});

package/src/components/CardSheet/styles.tsx

@@ -0,0 +1,46 @@
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useSafeArea } from '../../hooks/useSafeArea';
+
+export const useStyles = () => {
+  const { colors } = useTheme();
+
+  const { height } = useWindowDimensions();
+
+  const insets = useSafeArea();
+
+  const styles = StyleSheet.create({
+    container: {
+      backgroundColor: colors.white,
+      maxHeight: height - insets.top,
+      paddingBottom: insets.bottom + 16,
+    },
+    title: {
+      fontWeight: 'bold',
+      fontSize: 20,
+      marginBottom: 30,
+      color: colors.black,
+    },
+    separatorText: {
+      fontSize: 14,
+      lineHeight: 16,
+      color: colors.black,
+      width: '100%',
+      textAlign: 'center',
+    },
+    image: {
+      width: 32,
+      height: 24,
+    },
+    savedCardContainer: {
+      marginTop: 16,
+      marginBottom: 18,
+      marginLeft: 40,
+    },
+    keyboardView: {
+      // flex: 1,
+    },
+  });
+
+  return styles;
+};