Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MOB-73 #81

Merged
merged 2 commits into from
Sep 25, 2024
Merged

MOB-73 #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe7d485
MOB-73
chathurapathiranage Sep 23, 2024
fb558ed
MOB-73
chathurapathiranage Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 20 additions & 90 deletions src/components/PaymentModal.tsx
View file
Open in desktop
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
Open in desktop
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
Loading