mirror of
https://github.com/Blockchain-Powered-eSIM/eSIM-Wallet.git
synced 2026-01-09 10:27:58 -05:00
purchasedESIM&qrDRAFT
This commit is contained in:
@@ -13,6 +13,7 @@ import {
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
Image,
|
||||
TouchableOpacity,
|
||||
PermissionsAndroid,
|
||||
} from 'react-native';
|
||||
@@ -26,10 +27,7 @@ var RNFS = require('react-native-fs');
|
||||
import {MMKVLoader, useMMKVStorage} from 'react-native-mmkv-storage';
|
||||
|
||||
import axios from 'axios';
|
||||
import {Image} from 'react-native';
|
||||
// import https from 'follow-redirects/https';
|
||||
|
||||
// import {encode} from 'base64-arraybuffer';
|
||||
import {unzip} from 'react-native-zip-archive';
|
||||
|
||||
import {REACT_APP_eSIM_GO_API_KEY} from '@env';
|
||||
|
||||
@@ -67,12 +65,13 @@ export default function App() {
|
||||
const [eSIMPlans, setEsimPlans] = useState<Plan[]>([]);
|
||||
const [selectedPlan, setSelectedPlan] = useState(null);
|
||||
|
||||
const [purchaseStatusMessage, setPurchaseStatusMessage] = useState('');
|
||||
const [isPurchaseModalVisible, setIsPurchaseModalVisible] = useState(false);
|
||||
|
||||
const [orgData, setOrgData] = useState<any>(null);
|
||||
const [isOrgModalVisible, setIsOrgModalVisible] = useState(false);
|
||||
|
||||
// const REACT_APP_eSIM_GO_API_KEY = process.env['REACT_APP_eSIM_GO_API_KEY'];
|
||||
|
||||
const [pngImage, setPngImage] = useState<string | null>(null);
|
||||
const [imagePath, setImagePath] = useState(null);
|
||||
const [isImageModalVisible, setIsImageModalVisible] = useState(false);
|
||||
|
||||
const DEVICE_IDENTIFIER = 'deviceIDKey';
|
||||
@@ -97,7 +96,6 @@ export default function App() {
|
||||
const response = await axios.request(config); // Await Axios request
|
||||
const orgDetail = response.data?.organisations[0]?.productDescription;
|
||||
|
||||
// console.log(JSON.stringify(response.data));
|
||||
console.log(orgDetail);
|
||||
setOrgData(orgDetail);
|
||||
setIsOrgModalVisible(true);
|
||||
@@ -124,70 +122,37 @@ export default function App() {
|
||||
setConfirmModalVisibility(true);
|
||||
};
|
||||
|
||||
// const fetchPngImage = async (iccid: string) => {
|
||||
// const options = {
|
||||
// method: 'GET',
|
||||
// hostname: 'api.esim-go.com',
|
||||
// path: `/v2.3/esims/${iccid}/qr`,
|
||||
// headers: {
|
||||
// 'X-API-Key': 'REACT_APP_eSIM_GO_API_KEY',
|
||||
// 'Content-Type': 'application/json',
|
||||
// },
|
||||
// maxRedirects: 20,
|
||||
// };
|
||||
|
||||
// const req = https.request(options, function (res) {
|
||||
// const chunks: Uint8Array[] = [];
|
||||
|
||||
// res.on('data', function (chunk) {
|
||||
// chunks.push(chunk);
|
||||
// });
|
||||
|
||||
// res.on('end', function () {
|
||||
// const body = Buffer.concat(chunks);
|
||||
// const imageBase64 = body.toString('base64');
|
||||
// setPngImage(imageBase64);
|
||||
// setIsImageModalVisible(true);
|
||||
// });
|
||||
|
||||
// res.on('error', function (error) {
|
||||
// console.error(error);
|
||||
// });
|
||||
// });
|
||||
|
||||
// req.end();
|
||||
// };
|
||||
|
||||
const fetchPngImage = async (iccid: string) => {
|
||||
const fetchPngImage = async (reference_id: string) => {
|
||||
try {
|
||||
const zipPath = `${RNFS.DownloadDirectoryPath}/response.zip`;
|
||||
const extractPath = `${RNFS.DownloadDirectoryPath}/extracted`;
|
||||
|
||||
let config = {
|
||||
method: 'get',
|
||||
maxBodyLength: Infinity,
|
||||
url: `https://api.esim-go.com/v2.3/esims/${iccid}/qr`,
|
||||
url: `https://api.esim-go.com/v2.3/esims/assignments/?reference=${reference_id}`,
|
||||
headers: {
|
||||
'X-API-Key': 'REACT_APP_eSIM_GO_API_KEY', // Replace with your actual API key
|
||||
'X-API-Key': REACT_APP_eSIM_GO_API_KEY, // Replace with your actual API key
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'application/zip',
|
||||
},
|
||||
};
|
||||
|
||||
const response = await axios.request(config);
|
||||
|
||||
const imageBase64 = response.data;
|
||||
console.log('[QR_IMAGE_RESPONSE]:', imageBase64);
|
||||
await RNFS.writeFile(zipPath, response.data, 'base64');
|
||||
await unzip(zipPath, extractPath);
|
||||
|
||||
const path = RNFS.DownloadDirectoryPath + '/esim_qr.png';
|
||||
RNFS.writeFile(path, response.data)
|
||||
.then(success => {
|
||||
console.log('File Written');
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
});
|
||||
const files = await RNFS.readDir(extractPath);
|
||||
const pngFile = files.find(file => file.name.endsWith('.png'));
|
||||
|
||||
setPngImage(imageBase64);
|
||||
setIsImageModalVisible(true);
|
||||
if (pngFile) {
|
||||
setImagePath(`file://${pngFile.path}`);
|
||||
} else {
|
||||
console.log('PNG image not found in the zip file');
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('Error fetching PNG image:', error);
|
||||
console.log('Error fetching the zip file : ', error);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -199,8 +164,8 @@ export default function App() {
|
||||
// Prepare data for the API request
|
||||
|
||||
let data = JSON.stringify({
|
||||
type: 'validate',
|
||||
assign: false,
|
||||
type: 'transaction',
|
||||
assign: true,
|
||||
Order: [
|
||||
{
|
||||
type: 'bundle',
|
||||
@@ -210,16 +175,6 @@ export default function App() {
|
||||
],
|
||||
});
|
||||
|
||||
// Request body for /esims/apply
|
||||
//let data = JSON.stringify({
|
||||
// bundles: [
|
||||
// {
|
||||
// name: selectedPlan.description, // Assuming the plan description is the name
|
||||
// startTime: new Date().toISOString(), // Assuming the purchase time is the current time
|
||||
// },
|
||||
// ],
|
||||
//});
|
||||
|
||||
console.log('[HandleConfirmPurchase-DATA]:', data);
|
||||
|
||||
// Configure the API request
|
||||
@@ -228,7 +183,7 @@ export default function App() {
|
||||
maxBodyLength: Infinity,
|
||||
url: 'https://api.esim-go.com/v2.3/orders',
|
||||
headers: {
|
||||
'X-API-Key': 'REACT_APP_eSIM_GO_API_KEY', // Replace 'YOUR_API_KEY' with your actual API key
|
||||
'X-API-Key': REACT_APP_eSIM_GO_API_KEY, // Replace 'YOUR_API_KEY' with your actual API key
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
data: data,
|
||||
@@ -237,11 +192,19 @@ export default function App() {
|
||||
try {
|
||||
const response = await axios.request(config);
|
||||
console.log('---------------------');
|
||||
console.log('[RESPONSE]', response);
|
||||
// console.log('[RESPONSE]', response);
|
||||
console.log('Purchase successful:', response.data);
|
||||
const purchaseOderRef = response.data?.orderReference;
|
||||
const purchaseStatusMessage = response.data?.statusMessage;
|
||||
console.log('[PURCHASE-ORDER-REF]:', purchaseOderRef);
|
||||
console.log('[PURCHASE-STATUS-MESSAGE]:', purchaseStatusMessage);
|
||||
const Res = JSON.stringify(response.data);
|
||||
storeData(PURCHASE_RESPONSE, Res);
|
||||
setConfirmModalVisibility(false);
|
||||
setPurchaseStatusMessage(
|
||||
purchaseStatusMessage || 'Purchase successful',
|
||||
);
|
||||
setIsPurchaseModalVisible(true);
|
||||
|
||||
// // Fetch the PNG image using the ICCID from the response
|
||||
// const iccid = response.data?.iccid;
|
||||
@@ -257,6 +220,16 @@ export default function App() {
|
||||
}
|
||||
};
|
||||
|
||||
// const handleOpenURL = ({url}: {url: string}) => {
|
||||
// // Extract the ICCID from the URL if present
|
||||
// const iccidMatch = url.match(/iccid=([A-Fa-f0-9]{19})/);
|
||||
// if (iccidMatch) {
|
||||
// const iccid = iccidMatch[1];
|
||||
// // Fetch and display the PNG image
|
||||
// fetchPngImage(iccid);
|
||||
// }
|
||||
// };
|
||||
|
||||
const handleCancelPurchase = () => {
|
||||
setConfirmModalVisibility(false);
|
||||
};
|
||||
@@ -273,6 +246,10 @@ export default function App() {
|
||||
setIsTransactionModalVisible(visible => !visible);
|
||||
};
|
||||
|
||||
const togglePurchaseModalVisibility = () => {
|
||||
setIsPurchaseModalVisible(visible => !visible);
|
||||
};
|
||||
|
||||
// Store and retrieve data
|
||||
// TODO: Handle other datatypes
|
||||
const storeData = (key, value) => {
|
||||
@@ -478,20 +455,20 @@ export default function App() {
|
||||
{/* Modal for fetch QR */}
|
||||
<Button
|
||||
title="Fetch QR"
|
||||
onPress={() => fetchPngImage('8943108165007773976')}
|
||||
onPress={() => fetchPngImage('d316bfe2-e465-4d66-a476-1efa85fb6abd')}
|
||||
/>
|
||||
{/* Modal for displaying QR code */}
|
||||
<Modal isVisible={isImageModalVisible}>
|
||||
<Modal.Container>
|
||||
<Modal.Header title="Your QR Code" />
|
||||
<Modal.Body>
|
||||
{pngImage ? (
|
||||
{imagePath ? (
|
||||
<Image
|
||||
source={{uri: `data:image/png;base64,${pngImage}`}}
|
||||
source={{uri: imagePath}}
|
||||
style={{width: 200, height: 200}}
|
||||
/>
|
||||
) : (
|
||||
<Text style={styles.text}>No image available</Text>
|
||||
<Text style={styles.text}>Loading image ...</Text>
|
||||
)}
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
@@ -573,6 +550,20 @@ export default function App() {
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button title="Yes" onPress={handleConfirmPurchase} />
|
||||
<Modal isVisible={isPurchaseModalVisible}>
|
||||
<Modal.Container>
|
||||
<Modal.Header title="Purchase Details" />
|
||||
<Modal.Body>
|
||||
<Text style={styles.text}>{purchaseStatusMessage}</Text>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button
|
||||
title="Back"
|
||||
onPress={togglePurchaseModalVisibility}
|
||||
/>
|
||||
</Modal.Footer>
|
||||
</Modal.Container>
|
||||
</Modal>
|
||||
<Button title="No" onPress={handleCancelPurchase} />
|
||||
</Modal.Footer>
|
||||
</Modal.Container>
|
||||
@@ -590,27 +581,6 @@ export default function App() {
|
||||
</Modal.Footer>
|
||||
</Modal.Container>
|
||||
</Modal>
|
||||
<Modal isVisible={isImageModalVisible}>
|
||||
<Modal.Container>
|
||||
<Modal.Header title="Your QR Code" />
|
||||
<Modal.Body>
|
||||
{pngImage ? (
|
||||
<Image
|
||||
source={{uri: `data:image/png;base64,${pngImage}`}}
|
||||
style={{width: 200, height: 200}}
|
||||
/>
|
||||
) : (
|
||||
<Text style={styles.text}>No image available</Text>
|
||||
)}
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button
|
||||
title="Close"
|
||||
onPress={() => setIsImageModalVisible(false)}
|
||||
/>
|
||||
</Modal.Footer>
|
||||
</Modal.Container>
|
||||
</Modal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
21
package-lock.json
generated
21
package-lock.json
generated
@@ -8,6 +8,7 @@
|
||||
"name": "eSIM-Wallet",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"adm-zip": "^0.5.12",
|
||||
"axios": "^1.7.2",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"babel-preset-react-native": "^4.0.1",
|
||||
@@ -22,7 +23,8 @@
|
||||
"react-native-dotenv": "^3.4.11",
|
||||
"react-native-fs": "^2.20.0",
|
||||
"react-native-mmkv-storage": "^0.9.1",
|
||||
"react-native-modal": "^13.0.1"
|
||||
"react-native-modal": "^13.0.1",
|
||||
"react-native-zip-archive": "^7.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.24.4",
|
||||
@@ -5027,6 +5029,14 @@
|
||||
"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/adm-zip": {
|
||||
"version": "0.5.12",
|
||||
"resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.12.tgz",
|
||||
"integrity": "sha512-6TVU49mK6KZb4qG6xWaaM4C7sA/sgUMLy/JYMOzkcp3BvVLpW0fXDFQiIzAuxFCt/2+xD7fNIiPFAoLZPhVNLQ==",
|
||||
"engines": {
|
||||
"node": ">=6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ajv": {
|
||||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
@@ -14138,6 +14148,15 @@
|
||||
"react-native": ">=0.65.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-zip-archive": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-zip-archive/-/react-native-zip-archive-7.0.0.tgz",
|
||||
"integrity": "sha512-e4fckhO0PPFj/5oB6T2pYG9X5JqRvpIcs105vbXb6AjFRjmQPWEpw1f7iymrnSDKeyls60zexC4j3Z9iPKfZaA==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.6",
|
||||
"react-native": ">=0.60.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native/node_modules/@jest/types": {
|
||||
"version": "26.6.2",
|
||||
"resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
|
||||
|
||||
@@ -28,7 +28,8 @@
|
||||
"react-native-dotenv": "^3.4.11",
|
||||
"react-native-fs": "^2.20.0",
|
||||
"react-native-mmkv-storage": "^0.9.1",
|
||||
"react-native-modal": "^13.0.1"
|
||||
"react-native-modal": "^13.0.1",
|
||||
"react-native-zip-archive": "^7.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.24.4",
|
||||
|
||||
Reference in New Issue
Block a user