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

package/src/components/Switch/styles.tsx

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+
+const UNSELECT_MARGIN = 2;
+const SELECT_MARGIN = 22;
+
+export const useStyles = (selected: boolean) => {
+  const { colors, fonts } = useTheme();
+
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    textContainer: {
+      flex: 1,
+    },
+    title: {
+      fontSize: 14,
+      color: colors.codGray,
+      fontFamily: fonts.sfProTextRegular,
+    },
+    switchContainer: {
+      width: 51,
+      height: 31,
+      backgroundColor: selected ? colors.royalBlue : colors.mercury,
+      justifyContent: 'center',
+      borderRadius: 20,
+    },
+    switchCircle: {
+      width: 27,
+      height: 27,
+      backgroundColor: colors.white,
+      borderRadius: 13.5,
+      shadowColor: colors.codGray,
+      shadowOffset: {
+        width: 0,
+        height: 1,
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 3,
+      elevation: 3,
+      marginLeft: selected ? SELECT_MARGIN : UNSELECT_MARGIN,
+    },
+  });
+
+  return styles;
+};

package/src/components/Text/index.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react';
+import {
+  Text as RNText,
+  TextProps as RNTextProps,
+  TextStyle,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useStyles } from './styles';
+
+const SUPERSCRIPT_TAG = 'sup';
+const CUSTOM_TAG = '1';
+
+interface Tag {
+  open: string;
+  close: string;
+}
+
+type TextProps = RNTextProps & {
+  customTag?: {
+    style: TextStyle;
+  };
+};
+
+export const Text = (props: TextProps) => {
+  const styles = useStyles(props.style as TextStyle);
+
+  let TextComponent = useMemo(() => {
+    let tag: Tag | undefined;
+    let customTag: Tag | undefined;
+    if (props.children?.toString().includes(`<${SUPERSCRIPT_TAG}>`)) {
+      tag = {
+        open: `<${SUPERSCRIPT_TAG}>`,
+        close: `</${SUPERSCRIPT_TAG}>`,
+      };
+    }
+
+    if (props.children?.toString().includes(`<${CUSTOM_TAG}>`)) {
+      customTag = {
+        open: `<${CUSTOM_TAG}>`,
+        close: `</${CUSTOM_TAG}>`,
+      };
+    }
+
+    if (tag) {
+      let text = props.children?.toString() || '';
+      const indexOfOpenTag = text.indexOf(tag.open);
+      const indexOfCloseTag = text.indexOf(tag.close);
+
+      return (
+        <RNText>
+          <RNText {...props}>{text.slice(0, indexOfOpenTag)}</RNText>
+          <View>
+            <RNText {...props} style={styles.superscript}>
+              {text.slice(indexOfOpenTag + tag.open.length, indexOfCloseTag)}
+            </RNText>
+          </View>
+          <RNText {...props}>
+            {text.slice(indexOfCloseTag + tag.close.length)}
+          </RNText>
+        </RNText>
+      );
+    }
+
+    if (customTag && props.customTag) {
+      let text = props.children?.toString() || '';
+      const indexOfOpenTag = text.indexOf(customTag.open);
+      const indexOfCloseTag = text.indexOf(customTag.close);
+
+      return (
+        <TouchableOpacity onPress={props.onPress}>
+          <RNText>
+            <RNText {...props} onPress={undefined}>
+              {text.slice(0, indexOfOpenTag)}
+            </RNText>
+            <RNText
+              {...props}
+              onPress={undefined}
+              style={props.customTag.style}
+            >
+              {text.slice(
+                indexOfOpenTag + customTag.open.length,
+                indexOfCloseTag
+              )}
+            </RNText>
+            <RNText {...props} onPress={undefined}>
+              {text.slice(indexOfCloseTag + customTag.close.length)}
+            </RNText>
+          </RNText>
+        </TouchableOpacity>
+      );
+    }
+
+    return <RNText {...props}>{props.children}</RNText>;
+  }, [props, styles]);
+
+  return TextComponent;
+};

package/src/components/Text/styles.tsx

@@ -0,0 +1,13 @@
+import { StyleSheet, TextStyle } from 'react-native';
+
+export const useStyles = (style?: TextStyle) => {
+  const styles = StyleSheet.create({
+    superscript: {
+      fontSize: (style?.fontSize || 14) * 0.7,
+      fontFamily: style?.fontFamily,
+      lineHeight: (style?.lineHeight || 20) / 1.15,
+    },
+  });
+
+  return styles;
+};

package/src/components/WebViewSheet/index.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Modal } from '../Modal';
+import WebView, { WebViewProps } from 'react-native-webview';
+import { useStyles } from './styles';
+import { ActivityIndicator, Platform, View } from 'react-native';
+import { useTheme } from '../../contexts/ThemeContext';
+import { Header } from '../Header';
+
+interface WebViewSheetProps extends Pick<
+  WebViewProps,
+  'onLoadEnd' | 'onShouldStartLoadWithRequest' | 'source'
+> {
+  isVisible: boolean;
+  onClose: () => void;
+}
+
+export const WebViewSheet = (props: WebViewSheetProps) => {
+  const styles = useStyles();
+
+  const { colors } = useTheme();
+
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <Modal isVisible={props.isVisible}>
+      <View style={styles.container}>
+        <View style={styles.headerContainer}>
+          <Header title={''} onCloseButtonPress={props.onClose} />
+        </View>
+        {props.isVisible && (
+          <WebView
+            containerStyle={styles.webview}
+            onLoadEnd={(event) => {
+              setLoading(event.nativeEvent.url === 'about:blank');
+            }}
+            onShouldStartLoadWithRequest={props.onShouldStartLoadWithRequest}
+            source={props.source}
+          />
+        )}
+        {loading && (
+          <View style={styles.loaderContainer}>
+            <ActivityIndicator
+              size={'large'}
+              color={Platform.OS === 'android' ? colors.royalBlue : undefined}
+              style={styles.activityIndicator}
+            />
+          </View>
+        )}
+      </View>
+    </Modal>
+  );
+};

package/src/components/WebViewSheet/styles.tsx

@@ -0,0 +1,45 @@
+import { StyleSheet, useWindowDimensions } from 'react-native';
+import { useSafeArea } from '../../hooks/useSafeArea';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export const useStyles = () => {
+  const { top } = useSafeArea();
+
+  const height = useWindowDimensions().height;
+
+  const { colors } = useTheme();
+
+  const styles = StyleSheet.create({
+    container: {
+      width: '100%',
+      height: height - top,
+      marginTop: top,
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      overflow: 'hidden',
+      backgroundColor: colors.white,
+    },
+    headerContainer: {
+      paddingHorizontal: 16,
+      marginBottom: -16,
+    },
+    webview: {
+      flex: 1,
+    },
+    loaderContainer: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingBottom: 70,
+    },
+    activityIndicator: {
+      transform: [{ scale: 1.5 }],
+    },
+  });
+
+  return styles;
+};

package/src/consts/UI.ts

@@ -0,0 +1,3 @@
+export default {
+  CONTAINER_HORIZONTAL_PADDING: 16,
+};

package/src/consts/errors.ts

@@ -0,0 +1,7 @@
+const ERROR_CODES = {
+  checkoutProcessed: 'CHECKOUT_PROCESSED',
+  invalid: 'INVALID',
+  unknown: 'UNKNOWN',
+};
+
+export { ERROR_CODES };

package/src/consts/nativePayMethod.ts

@@ -0,0 +1,14 @@
+const SUPPORTED_CARD_TYPES = ['Visa', 'MasterCard'];
+
+export default {
+  supportedCardTypesIOS: SUPPORTED_CARD_TYPES,
+  supportedCardTypesAndroid: SUPPORTED_CARD_TYPES.map((item) =>
+    item.toUpperCase()
+  ),
+  android: {
+    gateway: 'sumup',
+    type: 'PAYMENT_GATEWAY',
+    allowedCardAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
+    totalPriceStatus: 'FINAL',
+  },
+};

package/src/consts/validation.ts

@@ -0,0 +1,14 @@
+export default {
+  EMPTY_FIELD_LENGTH: 0,
+  CVC_MIN_LENGTH: 3,
+  CVC_MAX_LENGTH: 4,
+  ZIPCODE_MAX_LENGTH: 6,
+  MIN_NAME_LENGTH: 3,
+  EXPIRATION_DATE_MAX_LENGTH: 5,
+  CARD_NUMBER_LENGTH: {
+    americanExpress: 15,
+    visa: 16,
+    mastercard: 16,
+    default: 16,
+  },
+};

package/src/contexts/LanguageContext/index.tsx

@@ -0,0 +1,47 @@
+import React, { useContext, useState } from 'react';
+import { languages } from '../../translations';
+
+interface LanguageContextParams {
+  strings: any;
+  initStrings: (language?: string) => void;
+}
+
+const LanguageContext = React.createContext({} as LanguageContextParams);
+
+interface ThemeProviderProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+export const LanguageProvider = (props: ThemeProviderProps) => {
+  const [strings, setStrings] = useState(languages['en-GB']);
+
+  const initStrings = (language?: string) => {
+    if (language) {
+      const selectedStrings = languages[language];
+      setStrings(selectedStrings || languages['en-GB']);
+      return;
+    }
+
+    try {
+      const LocalizedStrings = require('react-native-localization')?.default;
+      setStrings(new LocalizedStrings(languages));
+    } catch (ex) {
+      console.error(
+        "You need to install react-native-localization to automatically detect user system language. If you don't need it, please provide the language field in the initPaymentSheet function. (Note: don't forget to install native modules)"
+      );
+    }
+  };
+
+  return (
+    <LanguageContext.Provider
+      value={{
+        strings,
+        initStrings,
+      }}
+    >
+      {props.children}
+    </LanguageContext.Provider>
+  );
+};
+
+export const useStrings = () => useContext(LanguageContext);

package/src/contexts/OptionMenuContext/index.tsx

@@ -0,0 +1,46 @@
+import React, { useContext, useState } from 'react';
+
+interface OptionMenuContextParams {
+  x: number;
+  y: number;
+  isUsed: boolean;
+  isVisible: boolean;
+  hide: () => void;
+  show: (x: number, y: number, isUsed: boolean) => void;
+}
+
+const OptionMenuContext = React.createContext({} as OptionMenuContextParams);
+
+interface OptionMenuProviderProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+export const OptionMenuProvider = (props: OptionMenuProviderProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const [isUsed, setIsUsed] = useState(false);
+
+  const show = (
+    selectedX: number,
+    selectedY: number,
+    selectedIsUsed: boolean
+  ) => {
+    setX(selectedX);
+    setY(selectedY);
+    setIsVisible(true);
+    setIsUsed(selectedIsUsed);
+  };
+
+  const hide = () => {
+    setIsVisible(false);
+  };
+
+  return (
+    <OptionMenuContext.Provider value={{ isVisible, x, y, isUsed, show, hide }}>
+      {props.children}
+    </OptionMenuContext.Provider>
+  );
+};
+
+export const useOptionMenu = () => useContext(OptionMenuContext);

package/src/contexts/PaymentSheetContext/index.tsx

@@ -0,0 +1,41 @@
+import React, { useRef, useState } from 'react';
+import uuid from 'react-native-uuid';
+
+interface PaymentSheetContextType {
+  currentId: string | undefined;
+  init: () => string;
+  deinit: (id: string) => void;
+}
+
+const PaymentSheetContext = React.createContext({} as PaymentSheetContextType);
+
+interface PaymentSheetContextProps {
+  children: JSX.Element | JSX.Element[];
+}
+
+export const PaymentSheetProvider = (props: PaymentSheetContextProps) => {
+  const ids = useRef<string[]>([]);
+  const [currentId, setCurrentId] = useState<string | undefined>();
+
+  const init = () => {
+    const id = uuid.v4() as string;
+    setCurrentId(id);
+    ids.current.push(id);
+    return id;
+  };
+
+  const deinit = (id: string) => {
+    ids.current = ids.current.filter((item) => item !== id);
+    if (ids.current.length > 0) {
+      setCurrentId(ids.current[ids.current.length - 1]);
+    }
+  };
+
+  return (
+    <PaymentSheetContext.Provider value={{ currentId, init, deinit }}>
+      {props.children}
+    </PaymentSheetContext.Provider>
+  );
+};
+
+export const usePaymentSheet = () => React.useContext(PaymentSheetContext);

package/src/contexts/StoreContext.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, ReactNode, useContext } from 'react';
+import { RootStore } from '../stores/RootStore';
+
+let store: RootStore;
+
+const StoreContext = createContext<RootStore | undefined>(undefined);
+
+export function RootStoreProvider({
+  children,
+  publicKey,
+  domain,
+  isTestApp,
+}: {
+  children: ReactNode;
+  publicKey: string;
+  domain?: string;
+  isTestApp?: boolean;
+}) {
+  let root = store ?? new RootStore(publicKey, domain);
+  if (isTestApp) {
+    root = new RootStore(publicKey, domain);
+  }
+
+  store = root;
+
+  return <StoreContext.Provider value={root}>{children}</StoreContext.Provider>;
+}
+
+export function useRootStore() {
+  const context = useContext(StoreContext);
+  if (context === undefined) {
+    throw new Error('useRootStore must be used within RootStoreProvider');
+  }
+
+  return context;
+}
+
+export const usePaymentStore = () => useRootStore().paymentStore;
+export const useSaveCardStore = () => useRootStore().saveCardStore;
+
+export const useThreeDSecureStore = () => useRootStore().threeDSecureStore;
+
+export const useNativePaymentStore = () => useRootStore().nativePaymentStore;
+
+export const usePaymentInstrumentsStore = () =>
+  useRootStore().paymentInstrumentsStore;

package/src/contexts/ThemeContext.tsx

@@ -0,0 +1,9 @@
+import { Colors, Images, Fonts } from '../styles';
+
+const DEFAULT_THEME = {
+  colors: Colors.light,
+  images: Images.light,
+  fonts: Fonts.light,
+};
+
+export const useTheme = () => DEFAULT_THEME;

package/src/helpers/formatAmount/index.ts

@@ -0,0 +1,22 @@
+const INT_FLOAT_PARTS_LENGTH = 2;
+const FLOAT_PART_INDEX = 1;
+
+export const formatAmount = (amount: number | null) => {
+  if (!amount) {
+    return '';
+  }
+
+  const amountString = amount.toString();
+  const splitedAmount = amountString.split('.');
+  const intPart = splitedAmount[0];
+
+  let floatPart = '';
+  if (splitedAmount.length === INT_FLOAT_PARTS_LENGTH) {
+    const optionalFloatPart = splitedAmount[FLOAT_PART_INDEX];
+    if (optionalFloatPart) {
+      floatPart = optionalFloatPart;
+    }
+  }
+
+  return intPart + '.' + floatPart.padEnd(2, '0');
+};

package/src/helpers/getUserAgent/index.ts

@@ -0,0 +1,5 @@
+import { Platform } from 'react-native';
+
+export const getUserAgent = () => {
+  return `[React Native SDK] ${Platform.OS} ${Platform.Version}`;
+};

package/src/helpers/validation/paymentFields.ts

@@ -0,0 +1,73 @@
+import consts from '../../consts/validation';
+import type { CardType } from '../../types/PaymentSheet';
+
+const FIRST_CARD_NUMBER: Record<number, CardType> = {
+  3: 'americanExpress',
+  4: 'visa',
+  5: 'mastercard',
+};
+
+const LAST_MONTH_NUMBER = 12;
+const YEAR_SUFFIX_LENGTH = 2;
+
+export const detectCardType = (value: string): CardType | undefined => {
+  if (!value.length) {
+    return;
+  }
+
+  const firstNumber = Number(value[0]);
+  if (!firstNumber || isNaN(firstNumber)) {
+    return;
+  }
+
+  return FIRST_CARD_NUMBER[firstNumber];
+};
+
+export const isCardNumberValid = (
+  value: string,
+  cardType?: CardType
+): boolean => {
+  if (!cardType) {
+    return false;
+  }
+
+  return value.length === consts.CARD_NUMBER_LENGTH[cardType];
+};
+
+export const isNameValid = (value: string): boolean =>
+  value.length >= consts.MIN_NAME_LENGTH;
+
+export const isCvcValid = (value: string): boolean =>
+  value.length >= consts.CVC_MIN_LENGTH &&
+  value.length <= consts.CVC_MAX_LENGTH;
+
+export const normalizeExpirationInput = (
+  input: string
+): { value: string; month: number; year: number } => {
+  const raw = input.replace(/\D/g, '').slice(0, 4);
+  const value = raw.length > 2 ? `${raw.slice(0, 2)}/${raw.slice(2)}` : raw;
+
+  return {
+    value,
+    month: Number(raw.slice(0, 2) || 0),
+    year: Number(raw.slice(2, 4) || 0),
+  };
+};
+
+export const isValidExpirationDate = (
+  year: number,
+  month: number,
+  now = new Date()
+): boolean => {
+  const currentYear = Number(
+    now.getFullYear().toString().slice(YEAR_SUFFIX_LENGTH)
+  );
+  const currentMonth = now.getMonth() + 1;
+
+  const isMonthCorrect = month > 0 && month <= LAST_MONTH_NUMBER;
+
+  return (
+    isMonthCorrect &&
+    (year > currentYear || (year >= currentYear && month >= currentMonth))
+  );
+};

package/src/hooks/base/index.ts

@@ -0,0 +1,6 @@
+import { useCard } from './useCard';
+import { useName } from './useName';
+import { useExpirationDate } from './useExpirationDate';
+import { useCvcCode } from './useCvcCode';
+
+export { useCard, useName, useExpirationDate, useCvcCode };

package/src/hooks/base/useCard/index.ts

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+import type { CardInputModel, CardType } from '../../../types/PaymentSheet';
+import consts from '../../../consts/validation';
+import { useStrings } from '../../../contexts/LanguageContext';
+import {
+  detectCardType,
+  isCardNumberValid,
+} from '../../../helpers/validation/paymentFields';
+
+export const useCard = (): CardInputModel => {
+  const { strings } = useStrings();
+
+  const [value, setValue] = useState('');
+  const [cardType, setCardType] = useState<CardType | undefined>();
+  const [errorText, setErrorText] = useState('');
+
+  const isValid = isCardNumberValid(value, cardType);
+
+  useEffect(() => {
+    if (value.length === 0) {
+      setCardType(undefined);
+      return;
+    }
+
+    setCardType(detectCardType(value));
+  }, [value]);
+
+  const onFocus = () => {
+    setErrorText('');
+  };
+
+  const onBlur = () => {
+    if (value.length === consts.EMPTY_FIELD_LENGTH) {
+      return;
+    }
+
+    showErrorIfNeeded();
+  };
+
+  const showErrorIfNeeded = () => {
+    if (value.length === consts.EMPTY_FIELD_LENGTH) {
+      setErrorText(strings.choosePaymentMethod.cardInformation.requiredField);
+    } else if (
+      !cardType ||
+      value.length !== consts.CARD_NUMBER_LENGTH[cardType]
+    ) {
+      setErrorText(strings.choosePaymentMethod.cardInformation.wrongCardNumber);
+    }
+  };
+
+  const reset = () => {
+    setValue('');
+    setCardType(undefined);
+    setErrorText('');
+  };
+
+  return {
+    value,
+    errorText,
+    isValid,
+    cardType,
+    setValue,
+    setErrorText,
+    onFocus,
+    onBlur,
+    reset,
+    showErrorIfNeeded,
+  };
+};