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.
1294 lines
38 KiB
1294 lines
38 KiB
2 months ago
|
// 支付组件
|
||
|
|
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;
|