You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1293 lines
38 KiB
1293 lines
38 KiB
// 支付组件 |
|
import React, { useState } from "react"; |
|
import { |
|
View, |
|
Text, |
|
StyleSheet, |
|
ScrollView, |
|
Image, |
|
TouchableOpacity, |
|
SafeAreaView, |
|
} from "react-native"; |
|
import fontSize from "../utils/fontsizeUtils"; |
|
import widthUtils from "../utils/widthUtils"; |
|
import CircleOutlineIcon from "../components/CircleOutlineIcon"; |
|
import CloseIcon from "../components/CloseIcon"; |
|
import CheckIcon from "../components/CheckIcon"; |
|
import BackIcon from "../components/BackIcon"; |
|
|
|
interface RechargeScreenProps { |
|
onClose: () => void; |
|
} |
|
|
|
const RechargeScreen: React.FC<RechargeScreenProps> = ({ onClose }) => { |
|
const [selectedPrice, setSelectedPrice] = useState("500,000"); |
|
const [selectedOperator, setSelectedOperator] = useState<string | null>(null); |
|
const [activeTab, setActiveTab] = useState(0); |
|
const [showBlankPage, setShowBlankPage] = useState(false); |
|
|
|
const handlePriceSelect = (price: string) => { |
|
setSelectedPrice(price); |
|
}; |
|
|
|
const handleOperatorSelect = (operator: string) => { |
|
setSelectedOperator(operator === selectedOperator ? null : operator); |
|
}; |
|
|
|
const handleBackButton = () => { |
|
setShowBlankPage(false); |
|
}; |
|
|
|
const handleButtonClick = () => { |
|
if (selectedOperator) { |
|
setShowBlankPage(true); |
|
} |
|
}; |
|
|
|
return ( |
|
<SafeAreaView style={styles.safeArea}> |
|
<View style={showBlankPage ? styles.mainContainer1 : styles.mainContainer}> |
|
<View style={styles.header}> |
|
<Text style={styles.title}>Recharger</Text> |
|
{!showBlankPage && ( |
|
<TouchableOpacity onPress={onClose} style={styles.closeButton}> |
|
<CloseIcon size={fontSize(15)} /> |
|
</TouchableOpacity> |
|
)} |
|
{showBlankPage && ( |
|
<TouchableOpacity onPress={handleBackButton} style={styles.backButton}> |
|
<Text style={styles.backButtonText}> |
|
<BackIcon size={fontSize(18)}/> |
|
</Text> |
|
</TouchableOpacity> |
|
)} |
|
</View> |
|
|
|
{!showBlankPage ? ( |
|
<> |
|
<ScrollView contentContainerStyle={styles.scrollContent}> |
|
<View style={styles.container2}> |
|
<View style={styles.amountRechargeContainer}> |
|
<Text style={styles.rechargePromptTextStyle}> |
|
Choisissez ou entrez le montant à recharger |
|
</Text> |
|
</View> |
|
</View> |
|
|
|
{/* 金额选择 */} |
|
<View style={styles.priceGroup}> |
|
<View style={styles.row}> |
|
<TouchableOpacity |
|
style={[ |
|
styles.priceBoxBlue, |
|
selectedPrice === "500,000" |
|
? styles.priceBoxSelected |
|
: styles.priceBoxUnselected, |
|
]} |
|
onPress={() => handlePriceSelect("500,000")} |
|
> |
|
<Text |
|
style={[ |
|
styles.priceTextBlue, |
|
selectedPrice === "500,000" |
|
? styles.priceTextSelected |
|
: styles.priceTextUnselected, |
|
]} |
|
> |
|
500,000 |
|
</Text> |
|
<Text |
|
style={[ |
|
styles.currencyTextBlue, |
|
selectedPrice === "500,000" |
|
? styles.currencyTextSelected |
|
: styles.currencyTextUnselected, |
|
]} |
|
> |
|
FCFA |
|
</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={[ |
|
styles.priceBoxWhite, |
|
selectedPrice === "1000,000" |
|
? styles.priceBoxSelected |
|
: styles.priceBoxUnselected, |
|
]} |
|
onPress={() => handlePriceSelect("1000,000")} |
|
> |
|
<Text |
|
style={[ |
|
styles.priceText, |
|
selectedPrice === "1000,000" |
|
? styles.priceTextSelected |
|
: styles.priceTextUnselected, |
|
]} |
|
> |
|
1000,000 |
|
</Text> |
|
<Text |
|
style={[ |
|
styles.currencyText, |
|
selectedPrice === "1000,000" |
|
? styles.currencyTextSelected |
|
: styles.currencyTextUnselected, |
|
]} |
|
> |
|
FCFA |
|
</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={[ |
|
styles.priceBoxWhite, |
|
selectedPrice === "2000,000" |
|
? styles.priceBoxSelected |
|
: styles.priceBoxUnselected, |
|
]} |
|
onPress={() => handlePriceSelect("2000,000")} |
|
> |
|
<Text |
|
style={[ |
|
styles.priceText, |
|
selectedPrice === "2000,000" |
|
? styles.priceTextSelected |
|
: styles.priceTextUnselected, |
|
]} |
|
> |
|
2000,000 |
|
</Text> |
|
<Text |
|
style={[ |
|
styles.currencyText, |
|
selectedPrice === "2000,000" |
|
? styles.currencyTextSelected |
|
: styles.currencyTextUnselected, |
|
]} |
|
> |
|
FCFA |
|
</Text> |
|
</TouchableOpacity> |
|
</View> |
|
<View style={styles.row}> |
|
<TouchableOpacity |
|
style={[ |
|
styles.priceBoxWhite, |
|
selectedPrice === "3000,000" |
|
? styles.priceBoxSelected |
|
: styles.priceBoxUnselected, |
|
]} |
|
onPress={() => handlePriceSelect("3000,000")} |
|
> |
|
<Text |
|
style={[ |
|
styles.priceText, |
|
selectedPrice === "3000,000" |
|
? styles.priceTextSelected |
|
: styles.priceTextUnselected, |
|
]} |
|
> |
|
3000,000 |
|
</Text> |
|
<Text |
|
style={[ |
|
styles.currencyText, |
|
selectedPrice === "3000,000" |
|
? styles.currencyTextSelected |
|
: styles.currencyTextUnselected, |
|
]} |
|
> |
|
FCFA |
|
</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={[ |
|
styles.priceBoxWhite, |
|
selectedPrice === "5000,000" |
|
? styles.priceBoxSelected |
|
: styles.priceBoxUnselected, |
|
]} |
|
onPress={() => handlePriceSelect("5000,000")} |
|
> |
|
<Text |
|
style={[ |
|
styles.priceText, |
|
selectedPrice === "5000,000" |
|
? styles.priceTextSelected |
|
: styles.priceTextUnselected, |
|
]} |
|
> |
|
5000,000 |
|
</Text> |
|
<Text |
|
style={[ |
|
styles.currencyText, |
|
selectedPrice === "5000,000" |
|
? styles.currencyTextSelected |
|
: styles.currencyTextUnselected, |
|
]} |
|
> |
|
FCFA |
|
</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
|
|
{/* 支付方式标题 */} |
|
<View style={styles.section}> |
|
<Text style={styles.subtitle}>Choisissez votre mode de paiement</Text> |
|
</View> |
|
|
|
{/* Tab Bar */} |
|
<View style={styles.tabContainer}> |
|
<TouchableOpacity |
|
style={[styles.tab, activeTab === 0 && styles.activeTab]} |
|
onPress={() => setActiveTab(0)} |
|
> |
|
<Text style={[styles.tabText, activeTab === 0 && styles.activeTabText]}> |
|
Mode de paiement |
|
</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity |
|
style={[styles.tab, activeTab === 1 && styles.activeTab]} |
|
onPress={() => setActiveTab(1)} |
|
> |
|
<Text style={[styles.tabText, activeTab === 1 && styles.activeTabText]}> |
|
Autre |
|
</Text> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
{/* Tab Content */} |
|
{activeTab === 0 ? ( |
|
<> |
|
<View style={styles.operatorCard}> |
|
<View |
|
style={{ |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
}} |
|
> |
|
<View style={{ flexDirection: "row", alignItems: "center" }}> |
|
<Image |
|
source={require("../../assets/img/image_cb840273.png")} |
|
style={styles.operatorImage} |
|
/> |
|
<Text style={styles.orangeText}> |
|
Nous ne supportons que{"\n"}les opérateurs affichés. |
|
</Text> |
|
</View> |
|
<TouchableOpacity onPress={() => handleOperatorSelect("orange")}> |
|
<View style={styles.checkboxContainer}> |
|
<CircleOutlineIcon |
|
size={fontSize(24)} |
|
strokeColor={ |
|
selectedOperator === "orange" ? "#007efa" : undefined |
|
} |
|
fillColor={ |
|
selectedOperator === "orange" ? "#007efa" : undefined |
|
} |
|
/> |
|
{selectedOperator === "orange" && ( |
|
<View style={styles.checkmarkContainer}> |
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
</View> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
<View style={styles.iconRow}> |
|
<Image |
|
source={require("../../assets/img/image_7337a807.png")} |
|
style={styles.operatorIcon} |
|
/> |
|
<Image |
|
source={require("../../assets/img/image_96b927ad.png")} |
|
style={styles.operatorIcon} |
|
/> |
|
<Image |
|
source={require("../../assets/img/image_1fee7e8b.png")} |
|
style={styles.operatorIcon} |
|
/> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.cardContainer}> |
|
<View style={styles.iconRow}> |
|
<Image |
|
source={require("../../assets/img/image_13d56c9.png")} |
|
style={styles.operatorImage} |
|
/> |
|
</View> |
|
|
|
{/* 右侧圆圈图标 */} |
|
<TouchableOpacity onPress={() => handleOperatorSelect("mtn")}> |
|
<View style={styles.checkboxContainer}> |
|
<CircleOutlineIcon |
|
size={fontSize(24)} |
|
strokeColor={selectedOperator === "mtn" ? "#007efa" : undefined} |
|
fillColor={selectedOperator === "mtn" ? "#007efa" : undefined} |
|
/> |
|
{selectedOperator === "mtn" && ( |
|
<View style={styles.checkmarkContainer}> |
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
</View> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
<View style={styles.balanceInfoContainer}> |
|
<View style={styles.leftInfo}> |
|
<View style={styles.blueBox}> |
|
{/* 圆形图标（左边） */} |
|
<Image |
|
source={require("../../assets/img/余额 icon.png")} |
|
style={styles.operatorImage} |
|
/> |
|
</View> |
|
<Text style={styles.balanceText}> |
|
Vous avez encore un solde{"\n"}de 650,000 FCFA |
|
</Text> |
|
</View> |
|
|
|
{/* 圆形图标（右边） */} |
|
<TouchableOpacity onPress={() => handleOperatorSelect("balance")}> |
|
<View style={styles.checkboxContainer}> |
|
<CircleOutlineIcon |
|
size={fontSize(24)} |
|
strokeColor={ |
|
selectedOperator === "balance" ? "#007efa" : undefined |
|
} |
|
fillColor={selectedOperator === "balance" ? "#007efa" : undefined} |
|
/> |
|
{selectedOperator === "balance" && ( |
|
<View style={styles.checkmarkContainer}> |
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
</View> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
|
|
<View style={styles.currencyContainer}> |
|
<View style={styles.currencyRow}> |
|
<Image |
|
source={require("../../assets/img/image_8786995c.png")} |
|
style={styles.currencyImage} |
|
/> |
|
<TouchableOpacity onPress={() => handleOperatorSelect("currency")}> |
|
<View style={styles.checkboxContainer}> |
|
<CircleOutlineIcon |
|
size={fontSize(24)} |
|
strokeColor={ |
|
selectedOperator === "currency" ? "#007efa" : undefined |
|
} |
|
fillColor={ |
|
selectedOperator === "currency" ? "#007efa" : undefined |
|
} |
|
/> |
|
{selectedOperator === "currency" && ( |
|
<View style={styles.checkmarkContainer}> |
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
</View> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
{selectedOperator === "currency" && ( |
|
<> |
|
<Text style={styles.subtitle}>Choisissez la devise</Text> |
|
<View style={styles.row}> |
|
<TouchableOpacity style={styles.currencyButtonActive}> |
|
<Text style={styles.buttonTextWhite}>USD</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity style={styles.currencyButtonInactive}> |
|
<Text style={styles.buttonTextDark}>FCFA</Text> |
|
</TouchableOpacity> |
|
</View> |
|
<Text style={styles.totalText}>Total: ＄121.97</Text> |
|
</> |
|
)} |
|
</View> |
|
|
|
<View style={styles.cardContainer}> |
|
<View style={styles.iconRow}> |
|
<Image |
|
source={require("../../assets/img/image_4e72f054.png")} |
|
style={styles.operatorImage1} |
|
/> |
|
</View> |
|
|
|
{/* 右侧圆圈图标 */} |
|
<TouchableOpacity onPress={() => handleOperatorSelect("mtn")}> |
|
<View style={styles.checkboxContainer}> |
|
<CircleOutlineIcon |
|
size={fontSize(24)} |
|
strokeColor={selectedOperator === "mtn" ? "#007efa" : undefined} |
|
fillColor={selectedOperator === "mtn" ? "#007efa" : undefined} |
|
/> |
|
{selectedOperator === "mtn" && ( |
|
<View style={styles.checkmarkContainer}> |
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
</View> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
</> |
|
) : ( |
|
<View style={styles.outerContainer}> |
|
<View style={styles.flexContainer}> |
|
<View style={styles.imageContainer}> |
|
<Image |
|
source={require('../../assets/img/image_c6aa9539.png')} |
|
style={styles.imageStyle} |
|
resizeMode="cover" |
|
/> |
|
</View> |
|
<View style={styles.verticalAlignEndContent}> |
|
<View style={styles.svgContainer}> |
|
<TouchableOpacity onPress={() => handleOperatorSelect("mtn")}> |
|
<View style={styles.checkboxContainer}> |
|
<CircleOutlineIcon |
|
size={fontSize(24)} |
|
strokeColor={selectedOperator === "mtn" ? "#007efa" : undefined} |
|
fillColor={selectedOperator === "mtn" ? "#007efa" : undefined} |
|
/> |
|
{selectedOperator === "mtn" && ( |
|
<View style={styles.checkmarkContainer}> |
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
</View> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
|
|
<View style={styles.flexContainer}> |
|
<View style={styles.imageContainer}> |
|
<Image |
|
source={require('../../assets/img/Global 1.png')} |
|
style={styles.imageStyle} |
|
resizeMode="cover" |
|
/> |
|
</View> |
|
<View style={styles.verticalAlignEndContent}> |
|
<View style={styles.svgContainer}> |
|
<TouchableOpacity onPress={() => handleOperatorSelect("mtn")}> |
|
<View style={styles.checkboxContainer}> |
|
<CircleOutlineIcon |
|
size={fontSize(24)} |
|
strokeColor={selectedOperator === "mtn" ? "#007efa" : undefined} |
|
fillColor={selectedOperator === "mtn" ? "#007efa" : undefined} |
|
/> |
|
{selectedOperator === "mtn" && ( |
|
<View style={styles.checkmarkContainer}> |
|
<CheckIcon size={fontSize(12)} color="#FFFFFF" /> |
|
</View> |
|
)} |
|
</View> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
)} |
|
</ScrollView> |
|
|
|
{/* 操作按钮 - 固定在底部 */} |
|
<View style={styles.actionButtonsContainer}> |
|
<View style={styles.actionButtons}> |
|
<TouchableOpacity style={styles.cancelButton} onPress={onClose}> |
|
<Text style={styles.buttonTextDark}>Annuler</Text> |
|
</TouchableOpacity> |
|
<TouchableOpacity style={styles.confirmButton} onPress={handleButtonClick}> |
|
<Text style={styles.buttonTextWhite}>Confirmer</Text> |
|
</TouchableOpacity> |
|
</View> |
|
</View> |
|
</> |
|
) : ( |
|
<View style={styles.outerContainer}> |
|
<View style={styles.paymentSection2}> |
|
{/* Header with back button and title */} |
|
|
|
|
|
{/* Transaction summary */} |
|
<View style={styles.transactionSummaryContainer1}> |
|
<View style={styles.transactionSummaryContainer}> |
|
<View style={styles.flexContainerWithImages}> |
|
<Image |
|
source={require('../../assets/img/image_cb840273.png')} |
|
style={styles.imageContainerStyled} |
|
resizeMode="cover" |
|
/> |
|
<Image |
|
source={require('../../assets/img/image_b05c3ffe.png')} |
|
style={styles.imageContainerWithBorder} |
|
resizeMode="cover" |
|
/> |
|
</View> |
|
<View style={styles.amountContainer}> |
|
<Text style={styles.amountLabel}>Montant</Text> |
|
<View style={styles.amountContainer1}> |
|
<Text style={styles.priceHeading}>500,000</Text> |
|
<Text style={styles.priceLabel}>FCFA</Text> |
|
</View> |
|
</View> |
|
</View> |
|
|
|
{/* Mobile info section */} |
|
<View style={styles.mobileInfoSection}> |
|
<View style={styles.mobileNumberSection}> |
|
<Text style={styles.mobileNumberLabel}>Indicatif pays et numéro de mobile</Text> |
|
<View style={styles.infoCard}> |
|
<View style={styles.flexRowWithIcon}> |
|
<View style={styles.flexRowWithIcon}> |
|
<Image |
|
source={require('../../assets/img/image_de4ca740.png')} |
|
style={styles.maskedImageWithText} |
|
resizeMode="cover" |
|
/> |
|
<Text style={styles.highlightText}>+89</Text> |
|
</View> |
|
<View style={styles.svgContainer2}> |
|
{/* <Svg width={12} height={12} viewBox="0 0 12 12" fill="none"> |
|
<ClipPath id="clip3_296_2233"> |
|
<Rect width={12} height={12} fill="white" x={12.0004} y={0} rotation={90} /> |
|
</ClipPath> |
|
<G clipPath="url(#clip3_296_2233)"> |
|
<Path |
|
d="M11.4464,3.658l-1.01,-1.035l-4.413,4.638l-4.4136,-4.638l-1.0098,1.035l5.4234,5.672z" |
|
fill="black" |
|
/> |
|
</G> |
|
</Svg> */} |
|
</View> |
|
<View style={styles.verticalDivider} /> |
|
</View> |
|
<Text style={styles.statisticText}>22660962235</Text> |
|
</View> |
|
</View> |
|
|
|
{/* Mobile operators */} |
|
<View style={styles.mobileOperatorsContainer}> |
|
<Text style={styles.mobileNumberLabel}>Opérateurs pris en charge</Text> |
|
<View style={styles.operatorSupportContainer}> |
|
<Image |
|
source={require('../../assets/img/image_7337a807.png')} |
|
style={styles.imageContainerWithBorder1} |
|
resizeMode="cover" |
|
/> |
|
<Image |
|
source={require('../../assets/img/image_96b927ad.png')} |
|
style={styles.imageContainerWithBorder1} |
|
resizeMode="cover" |
|
/> |
|
<Image |
|
source={require('../../assets/img/image_1fee7e8b.png')} |
|
style={styles.imageContainerWithBorder1} |
|
resizeMode="cover" |
|
/> |
|
</View> |
|
</View> |
|
|
|
{/* Payment button */} |
|
<View style={styles.blueBoxContainer}> |
|
<View style={styles.paymentNotice1}> |
|
<Text style={styles.paymentNotice}>PAY 500,000 FCFA</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
)} |
|
</View> |
|
</SafeAreaView> |
|
); |
|
}; |
|
|
|
const styles = StyleSheet.create({ |
|
safeArea: { |
|
flex: 1, |
|
backgroundColor: "#f0f0f0", |
|
}, |
|
mainContainer: { |
|
flex: 1, |
|
backgroundColor: "#f0f0f0", |
|
borderTopLeftRadius: 10, |
|
borderTopRightRadius: 10, |
|
}, |
|
mainContainer1: { |
|
flex: 1, |
|
backgroundColor: "#fff", |
|
borderTopLeftRadius: 10, |
|
borderTopRightRadius: 10, |
|
}, |
|
header: { |
|
flexDirection: "row", |
|
justifyContent: "center", |
|
alignItems: "center", |
|
padding: 24, |
|
paddingBottom: 0, |
|
position: "relative", |
|
marginTop: 20, |
|
marginBottom: 20, |
|
}, |
|
scrollContent: { |
|
padding: 24, |
|
paddingTop: 0, |
|
}, |
|
container: { |
|
padding: 24, |
|
backgroundColor: "#f0f0f0", |
|
borderTopLeftRadius: 10, |
|
borderTopRightRadius: 10, |
|
}, |
|
title: { |
|
fontSize: 24, |
|
fontWeight: "700", |
|
textTransform: "capitalize", |
|
color: "black", |
|
position: "absolute", |
|
left: 0, |
|
right: 0, |
|
textAlign: "center", |
|
}, |
|
section: { |
|
marginTop: 44, |
|
}, |
|
subtitle: { |
|
fontSize: 16, |
|
fontWeight: "700", |
|
color: "black", |
|
textTransform: "capitalize", |
|
marginBottom: 12, |
|
}, |
|
priceGroup: { |
|
marginTop: 10, |
|
}, |
|
row: { |
|
flexDirection: "row", |
|
justifyContent: "flex-start", |
|
marginTop: 15, |
|
}, |
|
priceBoxBlue: { |
|
width: "30%", |
|
backgroundColor: "#edf2fa", |
|
borderColor: "#002fa7", |
|
borderWidth: 1, |
|
borderRadius: 5, |
|
paddingVertical: 9, |
|
paddingHorizontal: 22, |
|
alignItems: "center", |
|
marginRight: "5%", |
|
}, |
|
priceBoxWhite: { |
|
width: "30%", |
|
backgroundColor: "white", |
|
borderRadius: 5, |
|
paddingVertical: 9, |
|
paddingHorizontal: 22, |
|
alignItems: "center", |
|
marginRight: "5%", |
|
}, |
|
priceTextBlue: { |
|
fontSize: fontSize(16), |
|
fontWeight: "700", |
|
color: "#002fa7", |
|
}, |
|
currencyTextBlue: { |
|
fontSize: fontSize(10), |
|
color: "#002fa7", |
|
marginTop: 1, |
|
}, |
|
priceText: { |
|
fontSize: fontSize(16), |
|
fontWeight: "700", |
|
color: "#333", |
|
}, |
|
currencyText: { |
|
fontSize: fontSize(10), |
|
color: "#7f7e7e", |
|
marginTop: 1, |
|
}, |
|
operatorCard: { |
|
backgroundColor: "white", |
|
padding: 16, |
|
borderRadius: 5, |
|
marginTop: 18, |
|
}, |
|
operatorImage: { |
|
width: 80, |
|
height: 30, |
|
resizeMode: "contain", |
|
}, |
|
operatorImage1: { |
|
width: 228, |
|
height: 30, |
|
resizeMode: "contain", |
|
}, |
|
orangeText: { |
|
color: "#ff5100", |
|
fontSize: fontSize(12), |
|
fontWeight: "500", |
|
marginLeft: 12, |
|
}, |
|
iconRow: { |
|
flexDirection: "row", |
|
gap: 10, |
|
}, |
|
operatorIcon: { |
|
width: 60, |
|
height: 22, |
|
resizeMode: "contain", |
|
}, |
|
currencyContainer: { |
|
backgroundColor: "white", |
|
padding: 10, |
|
borderRadius: 5, |
|
marginTop: 20, |
|
}, |
|
currencyRow: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
paddingRight:6 |
|
}, |
|
currencyImage: { |
|
width: 80, |
|
height: 30, |
|
resizeMode: "contain", |
|
}, |
|
radioCircle: { |
|
width: 24, |
|
height: 24, |
|
borderRadius: 12, |
|
borderWidth: 2, |
|
borderColor: "#007AFF", |
|
}, |
|
currencyButtonActive: { |
|
backgroundColor: "#002fa7", |
|
borderRadius: 18, |
|
width: widthUtils(36, 100).width, |
|
height: widthUtils(36, 100).height, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
currencyButtonInactive: { |
|
backgroundColor: "#eeeeee", |
|
borderRadius: 18, |
|
width: widthUtils(36, 100).width, |
|
height: widthUtils(36, 100).height, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
marginLeft: 10, |
|
}, |
|
buttonTextWhite: { |
|
color: "white", |
|
fontWeight: "600", |
|
}, |
|
buttonTextDark: { |
|
color: "black", |
|
fontWeight: "500", |
|
}, |
|
totalText: { |
|
marginTop: 16, |
|
fontWeight: "900", |
|
fontSize: fontSize(16), |
|
color: "#ff5100", |
|
}, |
|
actionButtonsContainer: { |
|
padding: 24, |
|
paddingTop: 0, |
|
backgroundColor: "#f0f0f0", |
|
}, |
|
actionButtons: { |
|
flexDirection: "row", |
|
justifyContent: "space-between", |
|
padding: 10, |
|
}, |
|
cancelButton: { |
|
backgroundColor: "white", |
|
borderRadius: 25, |
|
width: widthUtils(50, 160).width, |
|
height: widthUtils(50, 160).height, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
borderColor: "#ccc", |
|
borderWidth: 1, |
|
}, |
|
confirmButton: { |
|
backgroundColor: "#002fa7", |
|
borderRadius: 25, |
|
width: widthUtils(50, 160).width, |
|
height: widthUtils(50, 160).height, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
balanceInfoContainer: { |
|
flexDirection: "row", |
|
backgroundColor: "white", |
|
borderRadius: 5, |
|
paddingHorizontal: 16, |
|
height: 50, |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
marginTop: 14, |
|
}, |
|
leftInfo: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
flex: 1, |
|
}, |
|
blueBox: { |
|
flexDirection: "row", |
|
backgroundColor: "#3955f6", |
|
paddingHorizontal: 7, |
|
paddingLeft: 6, |
|
alignItems: "center", |
|
borderRadius: 4, |
|
}, |
|
saleText: { |
|
fontSize: 16, |
|
fontFamily: "Timmana", |
|
color: "white", |
|
marginLeft: 4, |
|
}, |
|
balanceText: { |
|
marginLeft: 17, |
|
fontSize: fontSize(11), |
|
lineHeight: 14, |
|
fontWeight: "500", |
|
color: "#333333", |
|
}, |
|
cardContainer: { |
|
flexDirection: "row", |
|
alignItems: "center", |
|
justifyContent: "space-between", |
|
backgroundColor: "white", |
|
borderRadius: 5, |
|
paddingHorizontal: 16, |
|
height: 50, |
|
marginTop: 15, |
|
}, |
|
|
|
imageSmall: { |
|
width: widthUtils(30, 24).width, |
|
height: widthUtils(30, 24).height, |
|
resizeMode: "contain", |
|
}, |
|
imageLarge: { |
|
width: widthUtils(26, 44).width, |
|
height: widthUtils(26, 44).height, |
|
resizeMode: "contain", |
|
}, |
|
emptyBox: { |
|
backgroundColor: "transparent", |
|
borderWidth: 0, |
|
}, |
|
container1: { |
|
flexDirection: "row", |
|
gap: 10, |
|
alignItems: "center", |
|
marginTop: 10, |
|
}, |
|
button: { |
|
width: widthUtils(36, 190).width, |
|
height: widthUtils(36, 190).height, |
|
borderRadius: 18, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
buttonActive: { |
|
backgroundColor: "#002fa7", |
|
}, |
|
buttonInactive: { |
|
backgroundColor: "#fdfefe", |
|
}, |
|
textActive: { |
|
color: "white", |
|
fontWeight: "600", |
|
fontSize: fontSize(15), |
|
}, |
|
textInactive: { |
|
color: "black", |
|
fontSize: fontSize(15), |
|
}, |
|
priceBoxSelected: { |
|
backgroundColor: "#edf2fa", |
|
borderColor: "#002fa7", |
|
borderWidth: 1, |
|
}, |
|
priceBoxUnselected: { |
|
backgroundColor: "white", |
|
borderColor: "#dddddd", |
|
borderWidth: 1, |
|
}, |
|
priceTextSelected: { |
|
color: "#002fa7", |
|
}, |
|
priceTextUnselected: { |
|
color: "#333", |
|
}, |
|
currencyTextSelected: { |
|
color: "#002fa7", |
|
}, |
|
currencyTextUnselected: { |
|
color: "#7f7e7e", |
|
}, |
|
closeButton: { |
|
padding: 5, |
|
position: "absolute", |
|
right: 24, |
|
zIndex: 1, |
|
}, |
|
checkboxContainer: { |
|
position: "relative", |
|
width: fontSize(24), |
|
height: fontSize(24), |
|
}, |
|
checkmarkContainer: { |
|
position: "absolute", |
|
top: 0, |
|
left: 0, |
|
right: 0, |
|
bottom: 0, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
}, |
|
|
|
container2: { |
|
width: '100%', |
|
marginTop: 20, |
|
}, |
|
amountRechargeContainer: { |
|
display: 'flex', |
|
flexDirection: 'column', |
|
alignItems: 'center', |
|
justifyContent: 'center', |
|
width: '100%', |
|
height: 60, |
|
backgroundColor: 'white', |
|
borderRadius: 5, |
|
}, |
|
rechargePromptTextStyle: { |
|
flex: 0, |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 14, |
|
lineHeight: 14, |
|
color: '#747474', |
|
// Note: PingFang SC font might not be available by default in React Native |
|
// You may need to load custom fonts using expo-font or other methods |
|
}, |
|
tabContainer: { |
|
flexDirection: 'row', |
|
backgroundColor: 'white', |
|
borderRadius: 5, |
|
marginTop: 10, |
|
padding: 5, |
|
}, |
|
tab: { |
|
flex: 1, |
|
paddingVertical: 10, |
|
alignItems: 'center', |
|
borderRadius: 5, |
|
}, |
|
activeTab: { |
|
backgroundColor: '#002fa7', |
|
}, |
|
tabText: { |
|
fontSize: fontSize(14), |
|
color: '#333', |
|
fontWeight: '500', |
|
}, |
|
activeTabText: { |
|
color: 'white', |
|
fontWeight: '600', |
|
}, |
|
emptyTab: { |
|
backgroundColor: 'white', |
|
borderRadius: 5, |
|
padding: 20, |
|
marginTop: 10, |
|
alignItems: 'center', |
|
justifyContent: 'center', |
|
height: 200, |
|
}, |
|
emptyTabText: { |
|
color: '#666', |
|
fontSize: fontSize(14), |
|
}, |
|
outerContainer: { |
|
width: '100%', |
|
}, |
|
flexContainer: { |
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
justifyContent: 'flex-start', |
|
height: 50, |
|
paddingRight: 16, |
|
paddingLeft: 16, |
|
backgroundColor: 'white', |
|
borderRadius: 5, |
|
marginTop: 18, |
|
|
|
}, |
|
imageContainer: { |
|
width: '26.54%', |
|
}, |
|
imageStyle: { |
|
width: 80, |
|
height: 30, |
|
borderWidth: 0, |
|
}, |
|
verticalAlignEndContent: { |
|
flexDirection: 'column', |
|
alignItems: 'flex-end', |
|
width: '73.46%', |
|
}, |
|
svgContainer: { |
|
width: 24, |
|
height: 24, |
|
}, |
|
backButton: { |
|
position: "absolute", |
|
left: 24, |
|
zIndex: 1, |
|
}, |
|
backButtonText: { |
|
fontSize: fontSize(14), |
|
color: "#007AFF", |
|
fontWeight: "500", |
|
}, |
|
blankPage: { |
|
flex: 1, |
|
justifyContent: "center", |
|
alignItems: "center", |
|
backgroundColor: "#f0f0f0", |
|
}, |
|
blankPageText: { |
|
fontSize: fontSize(16), |
|
color: "#666", |
|
}, |
|
paymentSection2: { |
|
paddingTop: 24, |
|
paddingRight: 20, |
|
paddingBottom: 333, |
|
paddingLeft: 20, |
|
backgroundColor: 'white', |
|
borderTopLeftRadius: 10, |
|
borderTopRightRadius: 10, |
|
}, |
|
paymentSectionContainer: { |
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
justifyContent: 'flex-start', |
|
width: '100%', |
|
}, |
|
paymentSection: { |
|
width: '8.48%', |
|
paddingRight: 15, |
|
}, |
|
svgContainer1: { |
|
width: 18, |
|
height: 18, |
|
}, |
|
paymentSection1: { |
|
flexDirection: 'column', |
|
alignItems: 'center', |
|
justifyContent: 'flex-start', |
|
width: '91.52%', |
|
paddingRight: 33, |
|
}, |
|
paymentHeadingStyle: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 24, |
|
lineHeight: 22, |
|
color: 'black', |
|
textTransform: 'capitalize', |
|
fontFamily: 'Montserrat-Bold', |
|
}, |
|
transactionSummaryContainer1: { |
|
width: '100%', |
|
}, |
|
transactionSummaryContainer: { |
|
width: '100%', |
|
paddingRight: 15, |
|
paddingLeft: 15, |
|
backgroundColor: 'linear-gradient(90deg, rgba(206, 229, 255, 1) 0%, rgba(238, 244, 255, 1) 100%', |
|
borderRadius: 5, |
|
}, |
|
flexContainerWithImages: { |
|
flexDirection: 'row', |
|
alignItems: 'flex-start', |
|
justifyContent: 'flex-start', |
|
}, |
|
imageContainerStyled: { |
|
width: 99, |
|
height: 36, |
|
borderWidth: 0, |
|
}, |
|
imageContainerWithBorder: { |
|
width: 135, |
|
height: 140, |
|
marginLeft: 141, |
|
borderWidth: 0, |
|
}, |
|
amountContainer: { |
|
width: '100%', |
|
paddingTop: 8, |
|
paddingRight: 11, |
|
paddingBottom: 10, |
|
paddingLeft: 11, |
|
marginTop: -83, |
|
backgroundColor: 'white', |
|
borderWidth: 1, |
|
borderRadius: 5, |
|
}, |
|
amountLabel: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 12, |
|
color: '#7f7e7e', |
|
fontFamily: 'PingFangSC-Medium', |
|
}, |
|
amountContainer1: { |
|
flexDirection: 'row', |
|
alignItems: 'flex-start', |
|
justifyContent: 'flex-start', |
|
marginTop: 1, |
|
}, |
|
priceHeading: { |
|
padding: 0, |
|
paddingBottom: 5, |
|
margin: 0, |
|
fontSize: 24, |
|
lineHeight: 22, |
|
color: '#161616', |
|
fontFamily: 'Montserrat-Bold', |
|
}, |
|
priceLabel: { |
|
padding: 0, |
|
paddingTop: 5, |
|
margin: 0, |
|
marginLeft: 3, |
|
fontSize: 12, |
|
color: '#7f7e7e', |
|
fontFamily: 'PingFangSC-Medium', |
|
}, |
|
mobileInfoSection: { |
|
width: '100%', |
|
marginTop: 30, |
|
}, |
|
mobileNumberSection: { |
|
width: '100%', |
|
}, |
|
mobileNumberLabel: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 14, |
|
lineHeight: 18, |
|
color: 'black', |
|
fontFamily: 'PingFangSC-Regular', |
|
}, |
|
infoCard: { |
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
justifyContent: 'flex-start', |
|
width: '100%', |
|
height: 50, |
|
paddingRight: 12, |
|
paddingLeft: 12, |
|
marginTop: 12, |
|
borderWidth: 1, |
|
borderColor: '#d8d8d8', |
|
borderRadius: 25, |
|
}, |
|
flexRowWithIcon: { |
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
justifyContent: 'flex-start', |
|
}, |
|
maskedImageWithText: { |
|
width: 20, |
|
height: 12, |
|
borderWidth: 0, |
|
}, |
|
highlightText: { |
|
padding: 0, |
|
margin: 0, |
|
marginLeft: 3, |
|
fontSize: 16, |
|
lineHeight: 22, |
|
color: '#1c284e', |
|
fontFamily: 'PingFangSC-Semibold', |
|
}, |
|
svgContainer2: { |
|
width: 12, |
|
height: 12, |
|
marginLeft: 12, |
|
}, |
|
verticalDivider: { |
|
width: 1, |
|
height: 30, |
|
marginLeft: 8.5, |
|
borderLeftWidth: 1, |
|
borderColor: '#b1b1b1', |
|
}, |
|
statisticText: { |
|
padding: 0, |
|
margin: 0, |
|
marginLeft: 19.5, |
|
fontSize: 16, |
|
lineHeight: 22, |
|
color: '#1c284e', |
|
fontFamily: 'PingFangSC-Semibold', |
|
}, |
|
mobileOperatorsContainer: { |
|
width: '100%', |
|
marginTop: 20, |
|
}, |
|
operatorSupportContainer: { |
|
flexDirection: 'row', |
|
gap: 10, |
|
alignItems: 'center', |
|
justifyContent: 'flex-start', |
|
marginTop: 12, |
|
}, |
|
imageContainerWithBorder1: { |
|
width: 70, |
|
height: 26, |
|
borderWidth: 0, |
|
}, |
|
blueBoxContainer: { |
|
flexDirection: 'column', |
|
alignItems: 'center', |
|
justifyContent: 'flex-start', |
|
width: '100%', |
|
marginTop: 50, |
|
backgroundColor: '#002fa7', |
|
borderRadius: 25, |
|
}, |
|
paymentNotice1: { |
|
flexDirection: 'column', |
|
alignItems: 'center', |
|
justifyContent: 'center', |
|
height: 50, |
|
}, |
|
paymentNotice: { |
|
padding: 0, |
|
margin: 0, |
|
fontSize: 16, |
|
color: 'white', |
|
fontFamily: 'Montserrat-Bold', |
|
}, |
|
}); |
|
|
|
export default RechargeScreen;
|
|
|