Merge pull request #52 from degica/dev

Dev

example/ios/example/AppDelegate.mm

@@ -1,6 +1,7 @@
 #import "AppDelegate.h"
 
 #import <React/RCTBundleURLProvider.h>
+#import <React/RCTLinkingManager.h> // Add this import
 
 @implementation AppDelegate
 
@@ -28,4 +29,12 @@ - (NSURL *)bundleURL
 #endif
 }
 
-@end
+// Add this method to handle opening URLs
+- (BOOL)application:(UIApplication *)application
+   openURL:(NSURL *)url
+   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
+{
+  return [RCTLinkingManager application:application openURL:url options:options];
+}
+
+@end

example/package.json

@@ -3,10 +3,10 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
+    "android": "./scripts/installer.sh android",
+    "ios": "./scripts/installer.sh ios",
     "lint": "eslint .",
-    "start": "react-native start",
+    "start": "./scripts/start-metro.sh",
     "test": "jest"
   },
   "dependencies": {
@@ -36,4 +36,4 @@
   "engines": {
     "node": ">=18"
   }
-}
+}

example/scripts/installer.sh

@@ -0,0 +1,61 @@
+#!/bin/bash
+set -euo pipefail
+IFS=$'\n\t'
+
+PLATFORM=${1:-}
+
+# Function to fetch the version from the package.json using Node.js
+get_package_version() {
+  node -p "require('../payment_sdk/package.json').version"
+}
+
+# Function to terminate Metro
+terminate_metro() {
+  if pgrep -f "node.*metro" > /dev/null; then
+    echo "Terminating Metro server..."
+    pkill -f "node.*metro"
+  else
+    echo "Metro server is not running."
+  fi
+}
+
+# Uninstall the package from example
+echo "Uninstalling @komoju/komoju-react-native from example"
+npm uninstall @komoju/komoju-react-native
+
+# Change directory to payment_sdk
+echo "Changing directory to payment_sdk"
+cd ../payment_sdk
+
+# Build the package
+echo "Building the package"
+npm run build
+
+# Get the version from package.json
+PACKAGE_VERSION=$(get_package_version)
+echo "Package version found: $PACKAGE_VERSION"
+
+# Change directory back to example
+echo "Changing directory back to example"
+cd ../example
+
+# Install the built package
+echo "Installing the built package version $PACKAGE_VERSION"
+npm i "../payment_sdk/komoju-komoju-react-native-${PACKAGE_VERSION}.tgz"
+
+# Terminate Metro
+terminate_metro
+
+# Run platform-specific command if provided
+case $PLATFORM in
+  android)
+    echo "Running on Android"
+    react-native run-android
+    ;;
+  ios)
+    echo "Running on iOS"
+    react-native run-ios
+    ;;
+esac
+
+echo "Installation and build process complete!"

example/scripts/start-metro.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+set -euo pipefail
+IFS=$'\n\t'
+
+# Function to terminate Metro
+terminate_metro() {
+  if pgrep -f "node.*metro" > /dev/null; then
+    echo "Terminating Metro server..."
+    pkill -f "node.*metro"
+  else
+    echo "Metro server is not running."
+  fi
+}
+
+# Terminate any running Metro server
+terminate_metro
+
+# Start the Metro server with cache clean
+echo "Starting Metro server with cache clean"
+npx react-native start --reset-cache

payment_sdk/package.json

@@ -55,6 +55,7 @@
     "react-native": "0.74.1",
     "react-test-renderer": "^18.2.0",
     "ts-jest": "^29.1.4",
+    "tsc-alias": "^1.8.10",
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.12.0"
   },

payment_sdk/readme.md

@@ -64,6 +64,15 @@ export default function PaymentScreen() {
 
 You can [visit our docs](https://doc.komoju.com/reference/createsession) to see how a session id can be created
 
+### Setup a return URL.
+
+Many payment method types require a return URL, so if you fail to provide it, we can’t present those payment methods to your user, even if you’ve enabled them.
+When a customer exits your app, for example to authenticate in Safari or their banking app, provide a way for them to automatically return to your app afterward.
+#### 1. Use `return_url` parameter when creating a session 
+#### 2. [Configure the custom URL scheme](https://reactnative.dev/docs/linking) in your AndroidManifest.xml and Info.plist files
+> Note:
+> If you’re using Expo, [set your scheme](https://docs.expo.dev/guides/linking/#in-a-standalone-app) in the app.json file.
+
 To initialize Komoju in your React Native app, use the `KomojuSDK.KomojuProvider` component in the root component of your application.
 
 `KomojuProvider` can accept `publicKey`, `payment_methods` and `language` as props. Only `publicKey` is required.

payment_sdk/scripts/publish.sh

@@ -15,7 +15,7 @@ EOF
 }
 
 percentEncodeString() {
-  jq -rn --arg x "$1" '$x|@uri'
+  node -p "encodeURIComponent('$1')"
 }
 
 create_github_release() {
@@ -128,20 +128,27 @@ npm run build
 echo "Bumping package.json $RELEASE_TYPE version and tagging commit"
 npm version $RELEASE_TYPE
 
+# Extract the new version from package.json
+NEW_VERSION=$(node -p "require('./package.json').version")
+
+# Update the version in ../example/package.json
+echo "Updating version in ../example/package.json to $NEW_VERSION"
+node -p "const fs = require('fs'); const path = '../example/package.json'; const pkg = JSON.parse(fs.readFileSync(path, 'utf8')); pkg.version = '$NEW_VERSION'; fs.writeFileSync(path, JSON.stringify(pkg, null, 2))"
+
 echo "Publishing release to npm"
 npm publish --access=public
 
 echo "Pushing git commit and tag"
+git add package.json ../example/package.json
+git commit -m "Update package.json and example package.json to version $NEW_VERSION"
 git push --follow-tags
 
-# echo "Pushing git changes to main brach"
-# git add package.json
-# git commit -m  "package.json"
-# git push origin main
+echo "Updating the main branch"
+git push origin main
 
 echo "Publish successful!"
 echo ""
 
 create_github_release
 
-echo "Done!"
+echo "Done!"

payment_sdk/src/components/LightBox.tsx

@@ -1,27 +1,31 @@
 import React from "react";
 
-import { StyleSheet, Text, View } from "react-native";
+import { Image, StyleSheet, Text, View } from "react-native";
 
 import { useTranslation } from "react-i18next";
 
 import { ThemeSchemeType } from "@util/types";
 
+import Thunder from "@assets/images/thunder.png"
+
 import { resizeFonts, responsiveScale } from "@theme/scalling";
 import { useCurrentTheme } from "@theme/useCurrentTheme";
 
+
 type Props = {
   content: string;
-  icon?: string;
 };
 
-const LightBox = ({ content, icon }: Props) => {
+const LightBox = ({ content }: Props) => {
   const { t } = useTranslation();
   const theme = useCurrentTheme();
   const styles = getStyles(theme);
 
   return (
     <View style={styles.container}>
-      <View style={styles.iconWrapper}>{icon && <Text style={styles.icon}>{icon}</Text>}</View>
+      <View style={styles.iconWrapper}>
+        <Image source={Thunder} style={styles.icon} />
+      </View>
       <Text style={styles.content}>{t(content)}</Text>
     </View>
   );
@@ -37,13 +41,12 @@ const getStyles = (theme: ThemeSchemeType) => {
       flexDirection: "row",
       backgroundColor: theme.LIGHT_BOX,
       borderRadius: responsiveScale(8),
-      justifyContent: "center",
       alignItems: "center",
     },
     content: {
       fontSize: resizeFonts(16),
       color: theme.TEXT_COLOR,
-      flex: 0.9,
+      flex: 1,
     },
     iconWrapper: {
       marginRight: responsiveScale(8),
@@ -56,7 +59,8 @@ const getStyles = (theme: ThemeSchemeType) => {
       alignItems: 'center'
     },
     icon: {
-      fontSize: resizeFonts(20)
+      width: responsiveScale(18),
+      height: responsiveScale(18),
     }
   });