Customer mode payment

src/assets/languages/en.json

@@ -27,6 +27,7 @@
     "CARD_NUMBER": "Card Number",
     "SCAN_CARD": "Scan Card",
     "PAY": "Pay",
+    "SAVE": "Save",
     "NAME_SHOWN_ON_RECEIPT": "Name (shown on receipt)",
     "FULL_NAME_ON_RECEIPT": "Full name on receipt",
     "EMAIL": "Email",

src/assets/languages/ja.json

@@ -27,6 +27,7 @@
       "CARD_NUMBER": "カード番号",
       "SCAN_CARD": "カードをスキャン",
       "PAY": "支払い",
+      "SAVE": "保存",
       "NAME_SHOWN_ON_RECEIPT": "氏名",
       "FULL_NAME_ON_RECEIPT": "氏名を入力（レシートで表示されます）",
       "EMAIL": "メールアドレス",

src/components/CardInputGroup.tsx

@@ -1,10 +1,4 @@
-import {
-  memo,
-  useContext,
-  useEffect,
-  useState,
-  useCallback,
-} from "react";
+import { memo, useContext, useEffect, useState, useCallback } from "react";
 
 import { StyleSheet, View, Image, Dimensions } from "react-native";
 
@@ -18,6 +12,7 @@ import {
 import {
   CardTypes,
   PaymentType,
+  sessionDataType,
   sessionShowPaymentMethodType,
   ThemeSchemeType,
 } from "../util/types";
@@ -50,8 +45,9 @@ const CardInputGroup = ({ inputErrors, resetError }: Props) => {
   // const [toggleScanCard, setToggleScanCard] = useState<boolean>(false);
   const theme = useCurrentTheme();
   const styles = getStyles(theme);
-  const { cardCVV, cardNumber, cardExpiredDate, paymentMethods } =
+  const { cardCVV, cardNumber, cardExpiredDate, sessionData } =
     useContext(StateContext);
+  const SessionData = sessionData as sessionDataType;
 
   useEffect(() => {
     // Determine card type and set it on first render if cardNumber is not empty
@@ -83,7 +79,7 @@ const CardInputGroup = ({ inputErrors, resetError }: Props) => {
   // Create card image list
   const cardImage = useCallback(() => {
     // Select credit card payment method data from session response payment methods
-    const cardPaymentMethodData = paymentMethods?.find(
+    const cardPaymentMethodData = SessionData.paymentMethods?.find(
       (method: sessionShowPaymentMethodType) =>
         method?.type === PaymentType.CREDIT
     );
@@ -116,7 +112,7 @@ const CardInputGroup = ({ inputErrors, resetError }: Props) => {
     } else {
       return;
     }
-  }, [cardType, paymentMethods]);
+  }, [cardType, SessionData.paymentMethods]);
 
   // const onCardScanned = useCallback(
   //   (cardDetails: { cardNumber?: string; expirationDate?: string }) => {

src/components/PillContainer.tsx

@@ -4,7 +4,11 @@ import { StyleSheet, View, Image, FlatList } from "react-native";
 
 import { StateContext } from "../context/state";
 
-import { PaymentType, sessionShowPaymentMethodType } from "../util/types";
+import {
+  PaymentType,
+  sessionDataType,
+  sessionShowPaymentMethodType,
+} from "../util/types";
 
 import PaymentMethodImages from "../assets/images/paymentMethodImages";
 
@@ -24,7 +28,9 @@ const squareSizeImages = [
 ];
 
 const PillContainer = ({ onSelect, selectedItem }: Props) => {
-  const { paymentMethods } = useContext(StateContext);
+  const { sessionData } = useContext(StateContext) as {
+    sessionData: sessionDataType;
+  };
 
   const getIcon = (slug: PaymentType) => {
     return (
@@ -53,7 +59,7 @@ const PillContainer = ({ onSelect, selectedItem }: Props) => {
   return (
     <View style={styles.container}>
       <FlatList
-        data={paymentMethods}
+        data={sessionData.paymentMethods}
         renderItem={renderItem}
         horizontal
         showsHorizontalScrollIndicator={false}

src/components/sections/CardSection.tsx

@@ -13,6 +13,8 @@ import CardInputGroup from "../CardInputGroup";
 import Input from "../Input";
 import SubmitButton from "../SubmitButton";
 import useThreeDSecureHandler from "../../hooks/useThreeDSecureHandler";
+import { PaymentMode, PaymentType, sessionDataType } from "../../util/types";
+import useSessionPayHandler from "../../hooks/useSessionPayHandler";
 
 const initialErrors = {
   name: false,
@@ -30,15 +32,11 @@ const initialErrors = {
 const CardSection = (): JSX.Element => {
   const [inputErrors, setInputErrors] = useState(initialErrors);
   const { threeDSecurePayment } = useThreeDSecureHandler();
-  const {
-    cardholderName,
-    cardCVV,
-    cardNumber,
-    cardExpiredDate,
-    amount,
-    currency,
-  } = useContext(StateContext);
+  const { sessionPay } = useSessionPayHandler();
+  const { cardholderName, cardCVV, cardNumber, cardExpiredDate, sessionData } =
+    useContext(StateContext);
   const dispatch = useContext(DispatchContext);
+  const SessionData = sessionData as sessionDataType;
 
   const resetError = (type: string) => {
     // TODO: Fix this type error
@@ -58,12 +56,24 @@ const CardSection = (): JSX.Element => {
     });
 
     if (isValid) {
-      threeDSecurePayment({
-        cardholderName,
-        cardCVV,
-        cardNumber,
-        cardExpiredDate,
-      });
+      if (SessionData.mode === PaymentMode.Customer) {
+        sessionPay({
+          paymentType: PaymentType.CREDIT,
+          paymentDetails: {
+            cardholderName,
+            cardCVV,
+            cardNumber,
+            cardExpiredDate,
+          },
+        });
+      } else {
+        threeDSecurePayment({
+          cardholderName,
+          cardCVV,
+          cardNumber,
+          cardExpiredDate,
+        });
+      }
     }
   };
 
@@ -87,8 +97,15 @@ const CardSection = (): JSX.Element => {
       <CardInputGroup inputErrors={inputErrors} resetError={resetError} />
       <View style={styles.btn}>
         <SubmitButton
-          label="PAY"
-          labelSuffix={formatCurrency({ amount, currency })}
+          label={SessionData?.mode === PaymentMode.Customer ? "SAVE" : "PAY"}
+          labelSuffix={
+            SessionData?.mode === PaymentMode.Customer
+              ? ""
+              : formatCurrency({
+                  amount: SessionData.amount,
+                  currency: SessionData.currency,
+                })
+          }
           onPress={onPay}
           testID="PayCTA"
         />

src/components/sections/KonbiniSection.tsx

@@ -9,6 +9,7 @@ import {
   brandType,
   KonbiniType,
   PaymentType,
+  sessionDataType,
   sessionShowPaymentMethodType,
 } from "../../util/types";
 import { validateKonbiniFormFields } from "../../util/validator";
@@ -31,11 +32,11 @@ const KonbiniSection = (): JSX.Element => {
   const [inputErrors, setInputErrors] = useState(initialErrors);
 
   const { sessionPay } = useSessionPayHandler();
-  const { name, email, amount, currency, paymentMethods, selectedStore } =
-    useContext(StateContext);
+  const { name, email, sessionData, selectedStore } = useContext(StateContext);
   const dispatch = useContext(DispatchContext);
+  const SessionData = sessionData as sessionDataType;
 
-  const konbiniPaymentMethodData = paymentMethods?.find(
+  const konbiniPaymentMethodData = SessionData.paymentMethods?.find(
     (method: sessionShowPaymentMethodType) =>
       method?.type === PaymentType.KONBINI
   );
@@ -134,7 +135,10 @@ const KonbiniSection = (): JSX.Element => {
       <View style={styles.btn}>
         <SubmitButton
           label="PAY"
-          labelSuffix={formatCurrency({ amount, currency })}
+          labelSuffix={formatCurrency({
+            amount: SessionData.amount,
+            currency: SessionData.currency,
+          })}
           onPress={onPay}
         />
       </View>

src/components/sections/SingleInputFormSection.tsx

@@ -8,7 +8,7 @@ import Input from "../../components/Input";
 
 import { LangKeys } from "../../util/constants";
 import { formatCurrency } from "../../util/helpers";
-import { PaymentType } from "../../util/types";
+import { PaymentType, sessionDataType } from "../../util/types";
 
 import { responsiveScale } from "../../theme/scalling";
 
@@ -22,7 +22,9 @@ type SingleInputFormSectionProps = {
 const SingleInputFormSection = ({ type }: SingleInputFormSectionProps) => {
   const [inputText, setInputText] = useState("");
   const [inputError, setInputError] = useState(false);
-  const { amount, currency } = useContext(StateContext);
+  const { sessionData } = useContext(StateContext) as {
+    sessionData: sessionDataType;
+  };
   const { sessionPay } = useSessionPayHandler();
 
   const onPay = () => {
@@ -58,7 +60,10 @@ const SingleInputFormSection = ({ type }: SingleInputFormSectionProps) => {
       <View style={styles.btn}>
         <SubmitButton
           label="PAY"
-          labelSuffix={formatCurrency({ amount, currency })}
+          labelSuffix={formatCurrency({
+            amount: sessionData.amount,
+            currency: sessionData.currency,
+          })}
           onPress={onPay}
           testID="PayCTA"
         />

src/components/sections/TransferFormSection.tsx

@@ -7,7 +7,7 @@ import { Actions, DispatchContext, StateContext } from "../../context/state";
 import Input from "../../components/Input";
 
 import { formatCurrency } from "../../util/helpers";
-import { PaymentType } from "../../util/types";
+import { PaymentType, sessionDataType } from "../../util/types";
 import { validateTransferFormFields } from "../../util/validator";
 
 import { responsiveScale } from "../../theme/scalling";
@@ -33,8 +33,9 @@ const TransferFormSection = ({ type }: TransferFormSectionProps) => {
   const [inputErrors, setInputErrors] =
     useState<typeof initialErrors>(initialErrors);
 
-  const { amount, currency, transferFormFields } = useContext(StateContext);
+  const { sessionData, transferFormFields } = useContext(StateContext);
   const { sessionPay } = useSessionPayHandler();
+  const SessionData = sessionData as sessionDataType;
 
   const onPay = () => {
     const isValid = validateTransferFormFields({
@@ -148,7 +149,10 @@ const TransferFormSection = ({ type }: TransferFormSectionProps) => {
       <View style={styles.btn}>
         <SubmitButton
           label="PAY"
-          labelSuffix={formatCurrency({ amount, currency })}
+          labelSuffix={formatCurrency({
+            amount: SessionData.amount,
+            currency: SessionData.currency,
+          })}
           onPress={onPay}
           testID="PayCTA"
         />

src/hooks/useBackgroundHandler.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction, useContext, useEffect } from "react";
 import { AppState, AppStateStatus } from "react-native";
 import {
+  CreatePaymentFuncType,
   PaymentStatuses,
   PaymentType,
   TokenResponseStatuses,
@@ -18,6 +19,8 @@ const useBackgroundHandler = (
   const { paymentType, tokenId, providerPropsData, sessionData } =
     useContext(StateContext);
 
+  const SessionData = sessionData as CreatePaymentFuncType;
+
   const {
     startLoading,
     stopLoading,
@@ -38,13 +41,13 @@ const useBackgroundHandler = (
     return () => {
       windowChangeListener.remove();
     };
-  }, [providerPropsData, paymentType, tokenId, sessionData, isDeepLinkOpened]);
+  }, [providerPropsData, paymentType, tokenId, SessionData, isDeepLinkOpened]);
 
   const handleSessionPaymentResponse = async () => {
     // if this is a session flow, check until session response changes from 'pending' to 'completed' or 'error'
     const sessionShowPayload = {
       publishableKey: providerPropsData.publishableKey,
-      sessionId: sessionData.sessionId,
+      sessionId: SessionData.sessionId,
     };
 
     // fetch session status to check if the payment is completed
@@ -57,7 +60,7 @@ const useBackgroundHandler = (
       } else {
         onPaymentAwaiting();
       } // calling user passed onComplete method with session response data
-      sessionData.onComplete && sessionData.onComplete(sessionResponse);
+      SessionData.onComplete && SessionData.onComplete(sessionResponse);
     } else if (sessionResponse?.payment?.status === PaymentStatuses.CANCELLED) {
       onPaymentCancelled();
     } else if (sessionResponse?.expired) {
@@ -84,7 +87,7 @@ const useBackgroundHandler = (
     ) {
       const paymentResponse = await payForSession({
         paymentType: PaymentType.CREDIT,
-        sessionId: sessionData.sessionId,
+        sessionId: SessionData.sessionId,
         publishableKey: providerPropsData.publishableKey,
         paymentDetails: { tokenId: tokenId },
       });

src/hooks/useDeepLinkHandler.tsx

@@ -1,6 +1,7 @@
 import { Linking } from "react-native";
 import { Dispatch, SetStateAction, useContext, useEffect } from "react";
 import {
+  CreatePaymentFuncType,
   PaymentStatuses,
   PaymentType,
   TokenResponseStatuses,
@@ -12,9 +13,12 @@ import { extractParameterFromUrl } from "../util/helpers";
 import payForSession from "../services/payForSessionService";
 import useMainStateUtils from "./useMainStateUtils";
 
-const useDeepLinkHandler = (setIsDeepLinkOpened: Dispatch<SetStateAction<boolean>>) => {
+const useDeepLinkHandler = (
+  setIsDeepLinkOpened: Dispatch<SetStateAction<boolean>>
+) => {
   const { paymentType, providerPropsData, sessionData } =
     useContext(StateContext);
+  const SessionData = sessionData as CreatePaymentFuncType;
 
   const {
     startLoading,
@@ -43,7 +47,7 @@ const useDeepLinkHandler = (setIsDeepLinkOpened: Dispatch<SetStateAction<boolean
     // if this is a session flow, check until session response changes from 'pending' to 'completed' or 'error'
     const sessionShowPayload = {
       publishableKey: providerPropsData.publishableKey,
-      sessionId: sessionData.sessionId,
+      sessionId: SessionData.sessionId,
     };
 
     // fetch session status to check if the payment is completed
@@ -67,7 +71,7 @@ const useDeepLinkHandler = (setIsDeepLinkOpened: Dispatch<SetStateAction<boolean
         onPaymentAwaiting();
       }
       // calling user passed onComplete method with session response data
-      sessionData.onComplete && sessionData.onComplete(sessionResponse);
+      SessionData.onComplete && SessionData.onComplete(sessionResponse);
     } else if (sessionResponse?.payment?.status === PaymentStatuses.CANCELLED) {
       onPaymentCancelled();
     } else {
@@ -92,7 +96,7 @@ const useDeepLinkHandler = (setIsDeepLinkOpened: Dispatch<SetStateAction<boolean
     ) {
       const paymentResponse = await payForSession({
         paymentType: PaymentType.CREDIT,
-        sessionId: sessionData.sessionId,
+        sessionId: SessionData.sessionId,
         publishableKey: providerPropsData.publishableKey,
         paymentDetails: { tokenId: token },
       });