purchasedESIM&qrDRAFT

This commit is contained in:
ArpitxGit
2024-05-29 19:34:35 +05:30
parent ab66e08a70
commit f5ceed9439
3 changed files with 89 additions and 99 deletions

View File

@@ -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
View File

@@ -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",

View File

@@ -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",