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

package/src/components/Modal/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({
+    modalStyle: {
+      margin: 0,
+    },
+    safeArea: {
+      flex: 1,
+    },
+    bottomColorContainer: {
+      width: '100%',
+      height: 100,
+      backgroundColor: colors.white,
+      position: 'absolute',
+      bottom: -100,
+    },
+    contentContainer: {
+      flex: 1,
+      paddingBottom: 16,
+    },
+  });
+
+  return styles;
+};

package/src/components/NativePayButton/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { ApplePayButton } from '../ApplePayButton';
+import { GooglePayButton } from '../GooglePayButton';
+
+interface NativePayButtonProps {
+  disabled?: boolean;
+}
+
+export const NativePayButton = (props: NativePayButtonProps) => {
+  return Platform.OS === 'ios' ? (
+    <ApplePayButton disabled={props.disabled} />
+  ) : (
+    <GooglePayButton disabled={props.disabled} />
+  );
+};

package/src/components/NoInternetConnection/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { Stack } from 'react-native-spacing-system';
+import { useStrings } from '../../contexts/LanguageContext';
+import { useStyles } from './styles';
+import { useNetInfo } from '@react-native-community/netinfo';
+
+export const NoInternetConnection = () => {
+  const styles = useStyles();
+  const { strings } = useStrings();
+
+  const { isConnected } = useNetInfo();
+
+  if (isConnected) {
+    return <></>;
+  }
+
+  return (
+    <View>
+      <Text style={styles.text}>{strings.choosePaymentMethod.noInternet}</Text>
+      <Stack size={24} />
+    </View>
+  );
+};

package/src/components/NoInternetConnection/styles.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { colors } = useTheme();
+
+  const styles = StyleSheet.create({
+    text: {
+      color: colors.cinnabar,
+    },
+  });
+
+  return styles;
+};

package/src/components/OptionMenuModal/index.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Platform, Text, TouchableOpacity, View } from 'react-native';
+import ModalComponent from 'react-native-modal';
+import { useStyles } from './styles';
+import { useOptionMenu } from '../../contexts/OptionMenuContext';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useStrings } from '../../contexts/LanguageContext';
+
+const LEFT_OFFSET = 95;
+const TOP_OFFSET_WITHOUT_USED = 36.5;
+const TOP_OFFSET_WITH_USED = 15;
+
+interface OptionMenuModalProps {
+  onDelete: () => void;
+  onUse: () => void;
+}
+
+type OptionType = 'regular' | 'destructive';
+
+export const OptionMenuModal = (props: OptionMenuModalProps) => {
+  const { colors } = useTheme();
+
+  const { strings } = useStrings();
+
+  const styles = useStyles();
+
+  const { isVisible, x, y, isUsed, hide } = useOptionMenu();
+
+  const close = () => {
+    hide();
+  };
+
+  const renderOption = (
+    text: string,
+    type: OptionType,
+    onPress: () => void
+  ) => {
+    return (
+      <TouchableOpacity style={styles.optionContainer} onPress={onPress}>
+        <Text
+          style={[
+            styles.optionText,
+            { color: type === 'destructive' ? colors.valencia : colors.black },
+          ]}
+        >
+          {text}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const onDelete = () => {
+    close();
+    props.onDelete();
+  };
+
+  const onUse = () => {
+    close();
+    props.onUse();
+  };
+
+  return (
+    <ModalComponent
+      hasBackdrop
+      animationIn={'fadeIn'}
+      animationInTiming={Platform.OS === 'android' ? 1 : undefined}
+      animationOut={'fadeOut'}
+      animationOutTiming={Platform.OS === 'android' ? 1 : undefined}
+      isVisible={isVisible}
+      onBackdropPress={close}
+      backdropOpacity={0}
+      style={styles.modalStyle}
+    >
+      <View
+        style={[
+          styles.container,
+          {
+            left: x - LEFT_OFFSET,
+            top: y - (isUsed ? TOP_OFFSET_WITH_USED : TOP_OFFSET_WITHOUT_USED),
+          },
+        ]}
+      >
+        {!isUsed && (
+          <>
+            {renderOption(strings.savedCards.options.use, 'regular', onUse)}
+            <View style={styles.separator} />
+          </>
+        )}
+        {renderOption(
+          strings.savedCards.options.delete,
+          'destructive',
+          onDelete
+        )}
+      </View>
+    </ModalComponent>
+  );
+};

package/src/components/OptionMenuModal/styles.tsx

@@ -0,0 +1,43 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { colors, fonts } = useTheme();
+
+  const styles = StyleSheet.create({
+    modalStyle: {
+      margin: 0,
+    },
+    container: {
+      borderRadius: 12,
+      backgroundColor: colors.white,
+      position: 'absolute',
+      shadowColor: colors.codGray,
+      shadowOffset: {
+        width: 0,
+        height: 3,
+      },
+      shadowOpacity: 0.4,
+      shadowRadius: 10,
+
+      elevation: 16,
+    },
+    separator: {
+      height: 1,
+      backgroundColor: colors.black,
+      opacity: 0.2,
+    },
+    optionContainer: {
+      width: 107,
+      paddingVertical: 11,
+      paddingHorizontal: 16,
+    },
+    optionText: {
+      fontFamily: fonts.sfProTextRegular,
+      fontSize: 17,
+      lineHeight: 22,
+    },
+  });
+
+  return styles;
+};

package/src/components/PayButton/index.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Text, Image, View } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+import { useStrings } from '../../contexts/LanguageContext';
+import { useStyles } from './styles';
+import { usePaymentStore } from '../../contexts/StoreContext';
+import { observer } from 'mobx-react-lite';
+import { Queue } from 'react-native-spacing-system';
+import { ProcessButton } from '../ProcessButton';
+
+interface PayButtonProps {
+  canStartPayment: boolean;
+
+  onPress: () => void;
+}
+
+export const PayButton = observer((props: PayButtonProps) => {
+  const { amount, currency, paymentStatus } = usePaymentStore();
+
+  const { strings } = useStrings();
+
+  const theme = useTheme();
+
+  const formatDisplayAmount = () => {
+    if (!currency) {
+      return '';
+    }
+
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency,
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(amount || 0);
+  };
+
+  const styles = useStyles();
+
+  return (
+    <ProcessButton
+      canStartPayment={props.canStartPayment}
+      paymentStatus={paymentStatus}
+      defaultContent={
+        <View style={styles.defaultContentContainer}>
+          <Image style={styles.lockImage} source={theme.images.lock} />
+          <Queue size={8} />
+          <Text
+            style={styles.text}
+          >{`${strings.choosePaymentMethod.payButton} ${formatDisplayAmount()}`}</Text>
+        </View>
+      }
+      onPress={props.onPress}
+    />
+  );
+});

package/src/components/PayButton/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/PaymentMethod/index.tsx

@@ -0,0 +1,43 @@
+import React, { useRef } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useStyles } from './styles';
+import { useTheme } from '../../contexts/ThemeContext';
+import { PaymentInstrument } from '../../types/PaymentSheet';
+import { Queue } from 'react-native-spacing-system';
+import { Checkbox } from '../Checkbox';
+import { SavedCard } from '../SavedCard';
+import { ImageButton } from '../ImageButton';
+
+interface PaymentMethodProps {
+  item: PaymentInstrument;
+  selected: boolean;
+
+  onSelect: () => void;
+  onOptionsPress: (x: number, y: number) => void;
+}
+
+export const PaymentMethod = (props: PaymentMethodProps) => {
+  const { images } = useTheme();
+
+  const styles = useStyles();
+
+  const optionsContainerRef = useRef<View>(null);
+
+  return (
+    <TouchableOpacity style={styles.optionContainer} onPress={props.onSelect}>
+      <Checkbox selected={props.selected} />
+      <Queue size={16} />
+      <View style={styles.savedCardContainer}>
+        <SavedCard paymentInstrument={props.item} />
+      </View>
+      <View ref={optionsContainerRef}>
+        <ImageButton
+          source={images.more}
+          onPress={() => {
+            optionsContainerRef.current?.measureInWindow(props.onOptionsPress);
+          }}
+        />
+      </View>
+    </TouchableOpacity>
+  );
+};

package/src/components/PaymentMethod/styles.tsx

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export const useStyles = () => {
+  const styles = StyleSheet.create({
+    optionContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 14,
+    },
+    savedCardContainer: {
+      flex: 1,
+    },
+  });
+
+  return styles;
+};

package/src/components/PaymentMethodFormHeaderOption/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import { useStyles } from './styles';
+import { Checkbox } from '../Checkbox';
+import { Queue } from 'react-native-spacing-system';
+
+interface PaymentMethodFormHeaderOptionProps {
+  selected: boolean;
+  title: string;
+  rightChildren: JSX.Element | JSX.Element[] | undefined;
+
+  disabled?: boolean;
+
+  onSelect?: () => void;
+}
+
+export const PaymentMethodFormHeaderOption = (
+  props: PaymentMethodFormHeaderOptionProps
+) => {
+  const styles = useStyles();
+
+  return (
+    <TouchableOpacity
+      disabled={props.disabled}
+      style={styles.optionContainer}
+      onPress={props.onSelect}
+    >
+      <Checkbox selected={props.selected} />
+      <Queue size={16} />
+      <Text style={styles.title}>{props.title}</Text>
+      {props.rightChildren}
+    </TouchableOpacity>
+  );
+};

package/src/components/PaymentMethodFormHeaderOption/styles.tsx

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { colors, fonts } = useTheme();
+
+  const styles = StyleSheet.create({
+    container: {
+      borderColor: colors.mercury,
+      borderWidth: 2,
+      borderRadius: 16,
+      paddingHorizontal: 16,
+    },
+    title: {
+      fontWeight: '700',
+      fontSize: 14,
+      lineHeight: 20,
+      color: colors.codGray,
+      flex: 1,
+      fontFamily: fonts.sfProTextBold,
+    },
+    image: {
+      width: 32,
+      height: 24,
+    },
+    optionContainer: {
+      backgroundColor: colors.white,
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 12,
+    },
+  });
+
+  return styles;
+};

package/src/components/PaymentMethodsForm/index.tsx

@@ -0,0 +1,24 @@
+import React, { Fragment } from 'react';
+import { View } from 'react-native';
+import { useStyles } from './styles';
+
+interface PaymentMethodsFormProps {
+  methods: JSX.Element[];
+}
+
+export const PaymentMethodsForm = (props: PaymentMethodsFormProps) => {
+  const styles = useStyles();
+
+  return (
+    <View style={styles.container}>
+      {props.methods.map((item, index) => (
+        <Fragment key={index}>
+          {item}
+          {props.methods.length - 1 > index && (
+            <View style={styles.separator} />
+          )}
+        </Fragment>
+      ))}
+    </View>
+  );
+};

package/src/components/PaymentMethodsForm/styles.tsx

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { colors } = useTheme();
+
+  const styles = StyleSheet.create({
+    container: {
+      borderColor: colors.mercury,
+      borderWidth: 2,
+      borderRadius: 16,
+      paddingHorizontal: 16,
+    },
+    separator: {
+      height: 1,
+      backgroundColor: colors.mercury,
+      marginLeft: 40,
+      marginRight: -16,
+    },
+  });
+
+  return styles;
+};

package/src/components/PaymentSheet/index.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Modal } from '../Modal';
+import { ThreeDSecureSheet } from '../3DSecureSheet';
+import { usePaymentStore } from '../../contexts/StoreContext';
+import { observer } from 'mobx-react-lite';
+import { CardSheet } from '../CardSheet';
+import {
+  AnimatedContainer,
+  AnimatedContainerHandler,
+} from '../AnimatedContainer';
+import { SavedCardsSheet } from '../SavedCardsSheet';
+import { usePaymentSheet } from '../../contexts/PaymentSheetContext';
+
+export const PaymentSheet = observer(() => {
+  const sheetId = useRef<string>();
+
+  const { isSheetVisible, hidePaymentSheet } = usePaymentStore();
+  const { currentId, init, deinit } = usePaymentSheet();
+
+  const [sheetHeight, setSheetHeight] = useState(0);
+
+  const cardSheetRef = useRef<AnimatedContainerHandler>(null);
+  const savedCardsSheetRef = useRef<AnimatedContainerHandler>(null);
+
+  const stack = useRef<React.RefObject<AnimatedContainerHandler>[]>([]);
+
+  useEffect(() => {
+    stack.current = [cardSheetRef];
+    sheetId.current = init();
+
+    return () => {
+      if (sheetId.current) {
+        close();
+        deinit(sheetId.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleCardPress = () => {
+    stack.current.push(savedCardsSheetRef);
+    show();
+  };
+
+  const show = () => {
+    stack.current[stack.current.length - 1]?.current?.show();
+    stack.current[stack.current.length - 2]?.current?.goToBack();
+  };
+
+  const goBack = () => {
+    stack.current[stack.current.length - 2]?.current?.show();
+    stack.current[stack.current.length - 1]?.current?.hide();
+    stack.current.pop();
+  };
+
+  const close = () => {
+    stack.current = [stack.current[0]!];
+    hidePaymentSheet(true);
+  };
+
+  if (currentId !== sheetId.current || !sheetId.current) {
+    return <></>;
+  }
+
+  return (
+    <Modal isVisible={isSheetVisible} onClose={close}>
+      {isSheetVisible ? (
+        <>
+          <AnimatedContainer
+            ref={cardSheetRef}
+            initWithoutAnimation
+            onHeightChanged={setSheetHeight}
+          >
+            <CardSheet onClose={close} onCardPress={handleCardPress} />
+          </AnimatedContainer>
+          <AnimatedContainer ref={savedCardsSheetRef} height={sheetHeight}>
+            <SavedCardsSheet onClose={close} onBack={goBack} />
+          </AnimatedContainer>
+        </>
+      ) : (
+        <></>
+      )}
+      <ThreeDSecureSheet />
+    </Modal>
+  );
+});

package/src/components/PrivacyPolicySheet/consts.ts

@@ -0,0 +1,42 @@
+export const PRIVACY_POLICY_LINKS = {
+  AT: 'sumup.at',
+  BE: 'nl.sumup.be',
+  BG: 'sumup.bg',
+  HR: 'sumup.hr',
+  CY: 'sumup.com.cy',
+  CZ: 'sumup.cz',
+  DK: 'sumup.dk',
+  EE: 'sumup.ee',
+  FI: 'sumup.fi',
+  FR: 'sumup.fr',
+  DE: 'sumup.de',
+  GR: 'sumup.gr',
+  HU: 'sumup.hu',
+  IT: 'sumup.it',
+  LV: 'sumup.lv',
+  LT: 'sumup.lt',
+  LU: 'fr.sumup.lu',
+  MT: 'sumup.com.mt',
+  NL: 'sumup.nl',
+  PL: 'sumup.pl',
+  PT: 'sumup.pt',
+  RO: 'sumup.ro',
+  SK: 'sumup.sk',
+  SI: 'sumup.si',
+  ES: 'sumup.es',
+  SE: 'sumup.se',
+  GB: 'sumup.co.uk',
+  CH: 'ch-de.sumup.com',
+  NO: 'sumup.no',
+  AR: 'sumup.com.ar',
+  BR: 'sumup.com.br',
+  CL: 'sumup.cl',
+  CO: 'sumup.co',
+  PE: 'sumup.pe',
+  CA: 'sumup.ca',
+  AU: 'sumup.com.au',
+};
+
+export const DEFAULT_PRIVACY_POLICY_LINK = 'sumup.com';
+
+export const PRIVACY_URL_KEY = '/privacy';

package/src/components/PrivacyPolicySheet/index.tsx

@@ -0,0 +1,56 @@
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+import { WebViewSheet } from '../WebViewSheet';
+import {
+  DEFAULT_PRIVACY_POLICY_LINK,
+  PRIVACY_POLICY_LINKS,
+  PRIVACY_URL_KEY,
+} from './consts';
+
+export interface PrivacyPolicySheetHandler {
+  show: () => void;
+}
+
+interface PrivacyPolicySheetProps {
+  countryCode: string;
+}
+
+export const PrivacyPolicySheet = forwardRef<
+  PrivacyPolicySheetHandler,
+  PrivacyPolicySheetProps
+>((props, ref) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const countryCode = props.countryCode as keyof typeof PRIVACY_POLICY_LINKS;
+  const uri = useMemo(() => {
+    return (
+      'https://' +
+      (PRIVACY_POLICY_LINKS[countryCode] || DEFAULT_PRIVACY_POLICY_LINK) +
+      PRIVACY_URL_KEY
+    );
+  }, [countryCode]);
+
+  useImperativeHandle(ref, () => ({
+    show: () => {
+      setIsVisible(true);
+    },
+  }));
+
+  const onClose = () => {
+    setIsVisible(false);
+  };
+
+  return (
+    <WebViewSheet
+      isVisible={isVisible}
+      onClose={onClose}
+      source={{
+        uri,
+      }}
+    />
+  );
+});