From b964bbf521845c262b67f63c2f994134e9c90ec2 Mon Sep 17 00:00:00 2001
From: Franklin <franklinjaradev@gmail.com>
Date: Tue, 26 Dec 2023 22:52:07 -0500
Subject: [PATCH 1/4] wip

---
 apps/expo/package.json                        |  1 +
 apps/expo/src/app/_layout.tsx                 |  4 +-
 apps/expo/src/app/portal/(modals)/pdf.tsx     | 54 +++++++++++++++++--
 .../src/app/portal/(tabs)/account/billing.tsx |  1 +
 pnpm-lock.yaml                                | 13 +++++
 5 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/apps/expo/package.json b/apps/expo/package.json
index 811dadc3..5c3c14e6 100644
--- a/apps/expo/package.json
+++ b/apps/expo/package.json
@@ -71,6 +71,7 @@
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.1",
     "react-native-svg": "^13.9.0",
+    "react-native-toast-message": "^2.2.0",
     "superjson": "^2.2.1"
   },
   "devDependencies": {
diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx
index 7bbdf231..2a7901ae 100644
--- a/apps/expo/src/app/_layout.tsx
+++ b/apps/expo/src/app/_layout.tsx
@@ -1,4 +1,5 @@
-import { Slot, SplashScreen } from "expo-router";
+import Toast from "react-native-toast-message";
+import { Slot } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 
 import { TRPCProvider } from "~/utils/api";
@@ -17,6 +18,7 @@ const RootLayout = () => {
     <TRPCProvider>
       <Slot />
       <StatusBar />
+      <Toast />
     </TRPCProvider>
   );
 };
diff --git a/apps/expo/src/app/portal/(modals)/pdf.tsx b/apps/expo/src/app/portal/(modals)/pdf.tsx
index 6c58f651..76575dd3 100644
--- a/apps/expo/src/app/portal/(modals)/pdf.tsx
+++ b/apps/expo/src/app/portal/(modals)/pdf.tsx
@@ -1,23 +1,69 @@
 import React from "react";
-import { SafeAreaView, useWindowDimensions } from "react-native";
+import { SafeAreaView, Text, useWindowDimensions, View } from "react-native";
 import Pdf from "react-native-pdf";
+import Toast from "react-native-toast-message";
 import { Stack, useLocalSearchParams } from "expo-router";
 
 import {
   LeftHeaderDone,
   RightHeaderShare,
 } from "~/components/ui/headers/pdf-header";
+import { Button } from "~/components/ui/rn-ui/button";
+import { api } from "~/utils/api";
 
 export default function PDFPage() {
-  const { url } = useLocalSearchParams<{ url: string }>();
+  const { url, patientId } = useLocalSearchParams<{
+    url: string;
+    patientId: string;
+  }>();
   const { width, height } = useWindowDimensions();
 
-  console.log(url);
-
   const source = { uri: url, cache: true };
 
+  const createPayment = api.payment.createPayment.useMutation({
+    onSuccess: () => {
+      Toast.show({
+        type: "success",
+        text1: "Payment created successfully",
+      });
+    },
+    onError: (error) => {
+      Toast.show({
+        type: "error",
+        text1: "Payment failed",
+        text2: error.message,
+      });
+    },
+  });
+
+  const onCreatePayment = async (value: number) => {
+    await createPayment.mutateAsync({
+      body: {
+        request: {
+          reference: `Patient/${patientId}`,
+        },
+        amount: {
+          value,
+        },
+        payment: {},
+        recipient: {},
+        status: "active",
+      },
+    });
+  };
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
+      <View className="p-4">
+        <Button
+          onPress={async () => {
+            await onCreatePayment(100);
+          }}
+          className="rounded bg-blue-900"
+        >
+          <Text>Pay Bill</Text>
+        </Button>
+      </View>
       <Stack.Screen
         options={{
           title: "",
diff --git a/apps/expo/src/app/portal/(tabs)/account/billing.tsx b/apps/expo/src/app/portal/(tabs)/account/billing.tsx
index dd86fb38..ad5c4ed0 100644
--- a/apps/expo/src/app/portal/(tabs)/account/billing.tsx
+++ b/apps/expo/src/app/portal/(tabs)/account/billing.tsx
@@ -32,6 +32,7 @@ export default function Billing() {
                 pathname: "/portal/(modals)/pdf",
                 params: {
                   url: bill.resource?.content?.[0]?.attachment.url ?? "",
+                  patientId,
                 },
               })
             }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9c8e38b0..02f9dbe7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -219,6 +219,9 @@ importers:
       react-native-svg:
         specifier: ^13.9.0
         version: 13.9.0(react-native@0.72.6)(react@18.2.0)
+      react-native-toast-message:
+        specifier: ^2.2.0
+        version: 2.2.0(react-native@0.72.6)(react@18.2.0)
       superjson:
         specifier: ^2.2.1
         version: 2.2.1
@@ -13041,6 +13044,16 @@ packages:
       react-native: 0.72.6(@babel/core@7.23.3)(@babel/preset-env@7.23.3)(react@18.2.0)
     dev: false
 
+  /react-native-toast-message@2.2.0(react-native@0.72.6)(react@18.2.0):
+    resolution: {integrity: sha512-AFti8VzUk6JvyGAlLm9/BknTNDXrrhqnUk7ak/pM7uCTxDPveAu2ekszU0on6vnUPFnG04H/QfYE2IlETqeaWw==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+    dependencies:
+      react: 18.2.0
+      react-native: 0.72.6(@babel/core@7.23.3)(@babel/preset-env@7.23.3)(react@18.2.0)
+    dev: false
+
   /react-native-typing-animation@0.1.7(prop-types@15.7.2)(react-native@0.72.6)(react@18.2.0):
     resolution: {integrity: sha512-4H3rF9M+I2yAZpYJcY0Mb29TXkn98QK12rrKSY6LZj1BQD9NNmRZuNXzwX4XHapsIz+N/J8M3p27FOQPbfzqeg==}
     peerDependencies:

From f8aaaec231de01b3a9c509f2702a6ab08de6bc66 Mon Sep 17 00:00:00 2001
From: Franklin <franklinjaradev@gmail.com>
Date: Wed, 27 Dec 2023 15:54:52 -0500
Subject: [PATCH 2/4] chore: payment bill

---
 apps/expo/src/app/portal/(modals)/pdf.tsx | 26 +++++++++++++++--------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/apps/expo/src/app/portal/(modals)/pdf.tsx b/apps/expo/src/app/portal/(modals)/pdf.tsx
index 76575dd3..f128d088 100644
--- a/apps/expo/src/app/portal/(modals)/pdf.tsx
+++ b/apps/expo/src/app/portal/(modals)/pdf.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { SafeAreaView, Text, useWindowDimensions, View } from "react-native";
+import React, { useState } from "react";
+import { SafeAreaView, Text, useWindowDimensions, View, TextInput, Button } from "react-native";
 import Pdf from "react-native-pdf";
 import Toast from "react-native-toast-message";
 import { Stack, useLocalSearchParams } from "expo-router";
@@ -8,7 +8,6 @@ import {
   LeftHeaderDone,
   RightHeaderShare,
 } from "~/components/ui/headers/pdf-header";
-import { Button } from "~/components/ui/rn-ui/button";
 import { api } from "~/utils/api";
 
 export default function PDFPage() {
@@ -19,6 +18,7 @@ export default function PDFPage() {
   const { width, height } = useWindowDimensions();
 
   const source = { uri: url, cache: true };
+  const [value, setValue] = useState("0");
 
   const createPayment = api.payment.createPayment.useMutation({
     onSuccess: () => {
@@ -37,6 +37,7 @@ export default function PDFPage() {
   });
 
   const onCreatePayment = async (value: number) => {
+    console.log("VALUE", value)
     await createPayment.mutateAsync({
       body: {
         request: {
@@ -54,16 +55,23 @@ export default function PDFPage() {
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
-      <View className="p-4">
+      <View className="p-4 flex flex-col gap-4">
+        <TextInput
+          className="border border-gray-300 rounded p-2 mt-4"
+          onChangeText={setValue}
+          value={value}
+          placeholder="Enter amount"
+        />
         <Button
           onPress={async () => {
-            await onCreatePayment(100);
+            await onCreatePayment(parseInt(value));
           }}
-          className="rounded bg-blue-900"
-        >
-          <Text>Pay Bill</Text>
-        </Button>
+          disabled={value === "0"}
+          color="#007AFF"
+          title="Pay Bill"
+        />
       </View>
+
       <Stack.Screen
         options={{
           title: "",

From 8c3e3d4dd8245df5b7ec591dbd2be0907d88f7bc Mon Sep 17 00:00:00 2001
From: Franklin <franklinjaradev@gmail.com>
Date: Fri, 29 Dec 2023 08:04:42 -0500
Subject: [PATCH 3/4] chore: clean up and update pay bill in account tab

---
 apps/expo/src/app/portal/(modals)/pdf.tsx     | 60 +-----------------
 .../src/app/portal/(tabs)/account/_layout.tsx | 11 ++++
 .../src/app/portal/(tabs)/account/billing.tsx |  1 -
 .../src/app/portal/(tabs)/account/index.tsx   | 16 +++--
 .../app/portal/(tabs)/account/pay-bill.tsx    | 61 +++++++++++++++++++
 5 files changed, 85 insertions(+), 64 deletions(-)
 create mode 100644 apps/expo/src/app/portal/(tabs)/account/pay-bill.tsx

diff --git a/apps/expo/src/app/portal/(modals)/pdf.tsx b/apps/expo/src/app/portal/(modals)/pdf.tsx
index 1248f08b..e70f316a 100644
--- a/apps/expo/src/app/portal/(modals)/pdf.tsx
+++ b/apps/expo/src/app/portal/(modals)/pdf.tsx
@@ -1,76 +1,22 @@
-import React, { useState } from "react";
-import { SafeAreaView, Text, useWindowDimensions, View, TextInput, Button } from "react-native";
+import React from "react";
+import { SafeAreaView, useWindowDimensions, } from "react-native";
 import Pdf from "react-native-pdf";
-import Toast from "react-native-toast-message";
 import { Stack, useLocalSearchParams } from "expo-router";
 
 import {
   LeftHeaderDone,
   RightHeaderShare,
 } from "~/components/ui/headers/pdf-header";
-import { api } from "~/utils/api";
 
 export default function PDFPage() {
-  const { url, patientId } = useLocalSearchParams<{
+  const { url } = useLocalSearchParams<{
     url: string;
-    patientId: string;
   }>();
   const { width, height } = useWindowDimensions();
 
   const source = { uri: url, cache: true };
-  const [value, setValue] = useState("0");
-
-  const createPayment = api.payment.createPayment.useMutation({
-    onSuccess: () => {
-      Toast.show({
-        type: "success",
-        text1: "Payment created successfully",
-      });
-    },
-    onError: (error) => {
-      Toast.show({
-        type: "error",
-        text1: "Payment failed",
-        text2: error.message,
-      });
-    },
-  });
-
-  const onCreatePayment = async (value: number) => {
-    console.log("VALUE", value)
-    await createPayment.mutateAsync({
-      body: {
-        request: {
-          reference: `Patient/${patientId}`,
-        },
-        amount: {
-          value,
-        },
-        payment: {},
-        recipient: {},
-        status: "active",
-      },
-    });
-  };
-
   return (
     <SafeAreaView style={{ flex: 1 }}>
-      <View className="p-4 flex flex-col gap-4">
-        <TextInput
-          className="border border-gray-300 rounded p-2 mt-4"
-          onChangeText={setValue}
-          value={value}
-          placeholder="Enter amount"
-        />
-        <Button
-          onPress={async () => {
-            await onCreatePayment(parseInt(value));
-          }}
-          disabled={value === "0"}
-          color="#007AFF"
-          title="Pay Bill"
-        />
-      </View>
 
       <Stack.Screen
         options={{
diff --git a/apps/expo/src/app/portal/(tabs)/account/_layout.tsx b/apps/expo/src/app/portal/(tabs)/account/_layout.tsx
index 88d3f726..752851c2 100644
--- a/apps/expo/src/app/portal/(tabs)/account/_layout.tsx
+++ b/apps/expo/src/app/portal/(tabs)/account/_layout.tsx
@@ -25,6 +25,17 @@ export default function AccountLayout() {
           headerLeft: () => <LeftHeaderBack />,
         }}
       />
+      <Stack.Screen
+        name="pay-bill"
+        options={{
+          title: "Pay Bill",
+          headerStyle: {
+            backgroundColor: "#fff",
+          },
+          headerTitleAlign: "center",
+          headerLeft: () => <LeftHeaderBack />,
+        }}
+      />
     </Stack>
   );
 }
diff --git a/apps/expo/src/app/portal/(tabs)/account/billing.tsx b/apps/expo/src/app/portal/(tabs)/account/billing.tsx
index 77984e09..831d4c8e 100644
--- a/apps/expo/src/app/portal/(tabs)/account/billing.tsx
+++ b/apps/expo/src/app/portal/(tabs)/account/billing.tsx
@@ -42,7 +42,6 @@ export default function Billing() {
                 pathname: "/portal/(modals)/pdf",
                 params: {
                   url: bill.resource?.content?.[0]?.attachment.url ?? "",
-                  patientId,
                 },
               })
             }
diff --git a/apps/expo/src/app/portal/(tabs)/account/index.tsx b/apps/expo/src/app/portal/(tabs)/account/index.tsx
index 2961d47e..807525de 100644
--- a/apps/expo/src/app/portal/(tabs)/account/index.tsx
+++ b/apps/expo/src/app/portal/(tabs)/account/index.tsx
@@ -2,7 +2,7 @@ import { Text, View } from "react-native";
 import { router } from "expo-router";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom, useSetAtom } from "jotai";
-import { Receipt } from "lucide-react-native";
+import { Files, Receipt } from "lucide-react-native";
 
 import { patientNameAtom } from "~/app";
 import { providerKeyAtom } from "~/app/_layout";
@@ -12,10 +12,15 @@ import { logOut } from "~/utils/atom-with-mmkv";
 
 const items = [
   {
-    icon: Receipt,
-    title: "Billing",
+    icon: Files,
+    title: "Billing Statements",
     onPress: () => router.push("/portal/(tabs)/account/billing"),
   },
+  {
+    icon: Receipt,
+    title: "Pay Bill",
+    onPress: () => router.push("/portal/(tabs)/account/pay-bill"),
+  },
 ];
 
 export default function Account() {
@@ -23,9 +28,8 @@ export default function Account() {
   const [patientName] = useAtom(patientNameAtom);
 
   // Construct initials from the first letters of the first and last names
-  const initials = `${patientName.firstName[0] ?? ""}${
-    patientName.lastName[0] ?? ""
-  }`;
+  const initials = `${patientName.firstName[0] ?? ""}${patientName.lastName[0] ?? ""
+    }`;
 
   return (
     <View className="flex-1 bg-gray-100">
diff --git a/apps/expo/src/app/portal/(tabs)/account/pay-bill.tsx b/apps/expo/src/app/portal/(tabs)/account/pay-bill.tsx
new file mode 100644
index 00000000..3939c1b8
--- /dev/null
+++ b/apps/expo/src/app/portal/(tabs)/account/pay-bill.tsx
@@ -0,0 +1,61 @@
+import { useAtom } from 'jotai';
+import { useState } from 'react';
+import { View } from 'react-native'
+import Toast from 'react-native-toast-message';
+import { patientIdAtom } from '~/app';
+import { TextInput } from '~/components/ui/forms/text-input';
+import { Button } from '~/components/ui/rn-ui/components/ui/button';
+import { api } from '~/utils/api';
+
+export default function PayBill() {
+  const [value, setValue] = useState("0");
+  const [patientId] = useAtom(patientIdAtom);
+
+  const createPayment = api.payment.createPayment.useMutation({
+    onSuccess: () => {
+      Toast.show({
+        type: "success",
+        text1: "Payment created successfully",
+      });
+    },
+    onError: (error) => {
+      Toast.show({
+        type: "error",
+        text1: "Payment failed",
+        text2: error.message,
+      });
+    },
+  });
+
+  const onCreatePayment = async (value: number) => {
+    await createPayment.mutateAsync({
+      body: {
+        request: {
+          reference: `Patient/${patientId}`,
+        },
+        amount: {
+          value,
+        },
+        payment: {},
+        recipient: {},
+        status: "active",
+      },
+    });
+  };
+
+  return (
+
+    <View className="p-4 flex flex-col gap-4">
+      <TextInput
+        onChangeText={setValue}
+        value={value}
+        placeholder="Enter amount"
+      />
+      <Button
+        onPress={async () => {
+          await onCreatePayment(parseInt(value));
+        }}
+      >Pay</Button>
+    </View>
+  )
+}

From a27d26ebe92b345f391273f67cba82f4197c3e01 Mon Sep 17 00:00:00 2001
From: Franklin <franklinjaradev@gmail.com>
Date: Fri, 29 Dec 2023 08:07:38 -0500
Subject: [PATCH 4/4] chore: clean up and update pay bill in account tab

---
 apps/expo/src/app/portal/(tabs)/account/_layout.tsx | 4 ++--
 apps/expo/src/app/portal/(tabs)/account/index.tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/expo/src/app/portal/(tabs)/account/_layout.tsx b/apps/expo/src/app/portal/(tabs)/account/_layout.tsx
index 752851c2..4d0829ad 100644
--- a/apps/expo/src/app/portal/(tabs)/account/_layout.tsx
+++ b/apps/expo/src/app/portal/(tabs)/account/_layout.tsx
@@ -17,7 +17,7 @@ export default function AccountLayout() {
       <Stack.Screen
         name="billing"
         options={{
-          title: "Billing",
+          title: "Billing Statements",
           headerStyle: {
             backgroundColor: "#fff",
           },
@@ -28,7 +28,7 @@ export default function AccountLayout() {
       <Stack.Screen
         name="pay-bill"
         options={{
-          title: "Pay Bill",
+          title: "Pay My Bill",
           headerStyle: {
             backgroundColor: "#fff",
           },
diff --git a/apps/expo/src/app/portal/(tabs)/account/index.tsx b/apps/expo/src/app/portal/(tabs)/account/index.tsx
index 807525de..e64162dd 100644
--- a/apps/expo/src/app/portal/(tabs)/account/index.tsx
+++ b/apps/expo/src/app/portal/(tabs)/account/index.tsx
@@ -18,7 +18,7 @@ const items = [
   },
   {
     icon: Receipt,
-    title: "Pay Bill",
+    title: "Pay My Bill",
     onPress: () => router.push("/portal/(tabs)/account/pay-bill"),
   },
 ];