Skip to content

Commit

Permalink
Merge pull request #81 from degica/task/MOB-73
Browse files Browse the repository at this point in the history 
MOB-73
  • Loading branch information
@chathurapathiranage
chathurapathiranage authored Sep 25, 2024
2 parents 2896b17 + fb558ed commit 5b0b966
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 178 deletions.
110 changes: 20 additions & 90 deletions src/components/PaymentModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,14 @@
import { Dispatch, SetStateAction, useContext } from "react";
import { Dispatch, SetStateAction } from "react";

import {
TouchableOpacity,
Modal,
View,
Image,
StyleSheet,
Alert,
Keyboard,
} from "react-native";

import { t } from "i18next";

import { Actions, DispatchContext, StateContext } from "../context/state";

import {
paymentFailedCtaText,
paymentSuccessCtaText,
} from "../util/constants";
import { ResponseScreenStatuses, ThemeSchemeType } from "../util/types";
import { ThemeSchemeType } from "../util/types";

import closeIcon from "../assets/images/close.png";

Expand All @@ -28,117 +18,57 @@ import { useCurrentTheme } from "../theme/useCurrentTheme";
import KomojuText from "./KomojuText";
import ResponseScreen from "./ResponseScreen";
import SheetContent from "./SheetContent";
import { usePaymentUiUtils } from "../hooks/usePaymentUiUtils";

type PaymentModalProps = {
modalVisible: boolean;
setModalVisible: Dispatch<SetStateAction<boolean>>;
onDismiss?: () => void;
};

const PaymentModal = ({
const PaymentModal: React.FC<PaymentModalProps> = ({
modalVisible,
setModalVisible,
onDismiss,
}: PaymentModalProps) => {
const { paymentState, paymentType } = useContext(StateContext);
const dispatch = useContext(DispatchContext);
}) => {
const {
paymentState,
paymentType,
closeSheet,
getCtaText,
ctaOnPress,
shouldShowAlert,
} = usePaymentUiUtils(onDismiss);

const theme = useCurrentTheme();
const styles = getStyles(theme);

const closeSheet = (showAlert = true) => {
Keyboard.dismiss();

if (showAlert) {
// showing an alert when user try to close the SDK modal
Alert.alert(`${t("CANCEL_PAYMENT")}?`, "", [
{
text: t("NO"),
style: "cancel",
},
{
text: t("YES"),
onPress: () => {
// invoking client provided onDismiss() callback when closing the SDK modal
onDismiss && onDismiss();
setModalVisible(false);
},
},
]);
} else {
// invoking client provided callback when closing the SDK modal
onDismiss && onDismiss();
setModalVisible(false);
}
};

const getCtaText = () => {
switch (paymentState) {
case ResponseScreenStatuses.SUCCESS:
case ResponseScreenStatuses.COMPLETE:
case ResponseScreenStatuses.CANCELLED:
case ResponseScreenStatuses.EXPIRED:
return paymentSuccessCtaText;
case ResponseScreenStatuses.FAILED:
return paymentFailedCtaText;
default:
return "";
}
};

const ctaOnPress = () => {
switch (paymentState) {
case ResponseScreenStatuses.SUCCESS:
case ResponseScreenStatuses.COMPLETE:
case ResponseScreenStatuses.CANCELLED:
return closeSheet(false);
case ResponseScreenStatuses.EXPIRED:
return closeSheet(false);
case ResponseScreenStatuses.FAILED:
return dispatch({
type: Actions.SET_PAYMENT_STATE,
payload: "",
});
default:
return "";
}
};

const onCloseModal = () => {
closeSheet(
!(
paymentState === ResponseScreenStatuses.SUCCESS ||
paymentState === ResponseScreenStatuses.CANCELLED ||
paymentState === ResponseScreenStatuses.COMPLETE ||
paymentState === ResponseScreenStatuses.EXPIRED
)
);
const handleClose = () => {
closeSheet(shouldShowAlert(), () => setModalVisible(false));
};

return (
<Modal
animationType="slide"
presentationStyle="overFullScreen"
visible={modalVisible}
onRequestClose={onCloseModal}
onRequestClose={handleClose}
>
<TouchableOpacity onPress={onCloseModal} style={styles.container} />
<TouchableOpacity onPress={handleClose} style={styles.container} />

<View style={styles.bottomSheetContainer}>
<View style={styles.line}>
<KomojuText style={styles.headerLabel}>
{!paymentState ? "PAYMENT_OPTIONS" : ""}
</KomojuText>
<TouchableOpacity style={styles.crossBtn} onPress={onCloseModal}>
<Image
source={closeIcon}
/>
<TouchableOpacity style={styles.crossBtn} onPress={handleClose}>
<Image source={closeIcon} />
</TouchableOpacity>
</View>
{paymentState ? (
<ResponseScreen
status={paymentState}
onPress={ctaOnPress}
onPress={() => ctaOnPress(() => setModalVisible(false))}
onPressLabel={getCtaText()}
paymentType={paymentType}
/>
Expand Down
112 changes: 24 additions & 88 deletions src/components/Sheet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import React, {
useCallback,
useImperativeHandle,
useContext,
useRef,
useEffect,
ForwardRefRenderFunction,
} from "react";

import {
Alert,
Image,
StyleSheet,
TouchableOpacity,
Expand All @@ -19,25 +17,17 @@ import {

import { useTranslation } from "react-i18next";

import { Actions, DispatchContext, StateContext } from "../context/state";
import { useTheme } from "../context/ThemeContext";

import {
paymentFailedCtaText,
paymentSuccessCtaText,
ThemeModes,
} from "../util/constants";
import { ResponseScreenStatuses, ThemeSchemeType } from "../util/types";
import { ThemeSchemeType } from "../util/types";

import closeIcon from "../assets/images/close.png";
import closeDMIcon from "../assets/images/close_dm.png";

import { resizeFonts, responsiveScale, WINDOW_HEIGHT } from "../theme/scalling";
import { useCurrentTheme } from "../theme/useCurrentTheme";

import KomojuText from "./KomojuText";
import ResponseScreen from "./ResponseScreen";
import SheetContent from "./SheetContent";
import { usePaymentUiUtils } from "../hooks/usePaymentUiUtils";

const MAX_TRANSLATE_Y = -WINDOW_HEIGHT + responsiveScale(50);

Expand Down Expand Up @@ -67,11 +57,17 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
const translateYState = useRef(0);
const contextState = useRef(0);

const { paymentState, paymentType } = useContext(StateContext);
const dispatch = useContext(DispatchContext);
const {
paymentState,
paymentType,
closeSheet,
getCtaText,
ctaOnPress,
shouldShowAlert,
} = usePaymentUiUtils(onDismiss);

const theme = useCurrentTheme();
const styles = getStyles(theme);
const { mode } = useTheme();

useEffect(() => {
const yListener = translateY.addListener(({ value }) => {
Expand Down Expand Up @@ -104,32 +100,9 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
return activeState.current;
}, []);

const closeSheet = (showAlert = true) => {
Keyboard.dismiss();

if (showAlert) {
// showing an alert when user try to close the SDK modal
Alert.alert(`${t("CANCEL_PAYMENT")}?`, "", [
{
text: t("NO"),
onPress: () => scrollTo(MAX_TRANSLATE_Y + 50),
style: "cancel",
},
{
text: t("YES"),
onPress: () => {
// invoking client provided onDismiss() callback when closing the SDK modal
onDismiss && onDismiss();
scrollTo(0);
},
},
]);
} else {
// invoking client provided callback when closing the SDK modal
onDismiss && onDismiss();
scrollTo(0);
}
};
const handleClose = useCallback((forceClose = false) => {
closeSheet(shouldShowAlert() && !forceClose, () => scrollTo(0));
}, [closeSheet, shouldShowAlert, scrollTo]);

useImperativeHandle(
ref,
Expand All @@ -138,11 +111,11 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
Keyboard.dismiss();
scrollTo(MAX_TRANSLATE_Y + 50);
},
close: closeSheet,
close: handleClose,
scrollTo,
isActive,
}),
[scrollTo, isActive]
[scrollTo, isActive, handleClose]
);

const panResponder = useRef(
Expand All @@ -157,48 +130,19 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
},
onPanResponderRelease: () => {
if (translateYState.current > -WINDOW_HEIGHT / 1.5) {
closeSheet(false);
handleClose(false);
} else if (translateYState.current < -WINDOW_HEIGHT / 1.5) {
scrollTo(MAX_TRANSLATE_Y + 50);
}
},
})
).current;

const getCtaText = () => {
switch (paymentState) {
case ResponseScreenStatuses.SUCCESS:
case ResponseScreenStatuses.COMPLETE:
case ResponseScreenStatuses.CANCELLED:
return paymentSuccessCtaText;
case ResponseScreenStatuses.FAILED:
return paymentFailedCtaText;
default:
return "";
}
};

const ctaOnPress = () => {
switch (paymentState) {
case ResponseScreenStatuses.SUCCESS:
case ResponseScreenStatuses.COMPLETE:
case ResponseScreenStatuses.CANCELLED:
return closeSheet(false);
case ResponseScreenStatuses.FAILED:
return dispatch({
type: Actions.SET_PAYMENT_STATE,
payload: "",
});
default:
return "";
}
};

return (
<>
<RNAnimated.View
onTouchStart={() => {
if (swipeClose) closeSheet(false);
if (swipeClose) handleClose(true);
}}
pointerEvents="none"
style={[styles.backDrop, { opacity: active }]}
Expand All @@ -210,28 +154,20 @@ const Sheet: ForwardRefRenderFunction<SheetRefProps, SheetProps> = (
]}
>
<RNAnimated.View style={styles.line} {...panResponder.panHandlers}>
<KomojuText style={styles.headerLabel}>PAYMENT_OPTIONS</KomojuText>
<KomojuText style={styles.headerLabel}>
{!paymentState ? t("PAYMENT_OPTIONS") : ""}
</KomojuText>
<TouchableOpacity
style={styles.crossBtn}
onPress={() =>
closeSheet(
!(
paymentState === ResponseScreenStatuses.SUCCESS ||
paymentState === ResponseScreenStatuses.CANCELLED ||
paymentState === ResponseScreenStatuses.COMPLETE
)
)
}
onPress={() => handleClose()}
>
<Image
source={mode === ThemeModes.light ? closeIcon : closeDMIcon}
/>
<Image source={closeIcon} />
</TouchableOpacity>
</RNAnimated.View>
{paymentState ? (
<ResponseScreen
status={paymentState}
onPress={ctaOnPress}
onPress={() => ctaOnPress(() => scrollTo(0))}
onPressLabel={getCtaText()}
paymentType={paymentType}
/>
Expand Down
Loading

0 comments on commit 5b0b966

Please sign in to comment.