feat: confirm payment

apps/expo/src/app/(app)/(tabs)/listing.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { ActivityIndicator, Alert } from "react-native";
 import {
   AnimatedImage,
@@ -32,11 +32,10 @@ const schema = z.object({
 
 export default function UploadProductScreen() {
   const router = useRouter();
-  const [isUploading, setIsUploading] = useState(false);
   const { user } = useUser();
 
   const { data } = api.category.getCategories.useQuery({ partial: true });
-  const { mutate } = api.product.addProduct.useMutation();
+  const { mutate, isPending } = api.product.addProduct.useMutation();
 
   const { image, onSelectImage, onUpload, uploadProggres } = useSelectImage();
 
@@ -45,13 +44,11 @@ export default function UploadProductScreen() {
   });
   const { handleSubmit, reset } = methods;
   const onSubmit = handleSubmit(async (data) => {
-    setIsUploading(true);
     const filePath = `${user?.id}/${data.name}.png`;
 
     const { error } = await onUpload("products", filePath);
     if (error) {
       Alert.alert("Gagal mengupload gambar");
-      setIsUploading(false);
       return;
     }
 
@@ -64,7 +61,6 @@ export default function UploadProductScreen() {
       {
         onSuccess: () => {
           reset();
-          setIsUploading(false);
           router.push("/home");
         },
       },
@@ -98,7 +94,9 @@ export default function UploadProductScreen() {
                       />
                     }
                   />
-                  {isUploading && <AnimatedScanner progress={uploadProggres} />}
+                  {!!uploadProggres && (
+                    <AnimatedScanner progress={uploadProggres} />
+                  )}
                   <Button
                     onPress={onSelectImage}
                     label="Ganti Gambar"
@@ -166,7 +164,7 @@ export default function UploadProductScreen() {
           onPress={onSubmit}
           bg-primary
           br40
-          disabled={isUploading}
+          disabled={!!uploadProggres ?? isPending}
         />
       </KeyboardAwareScrollView>
     </View>

apps/expo/src/app/(app)/payment-confirm.tsx

@@ -1,63 +1,150 @@
 import React from "react";
-import { Button, View } from "react-native-ui-lib";
-import { useLocalSearchParams } from "expo-router";
+import { ActivityIndicator, Alert } from "react-native";
+import {
+  AnimatedImage,
+  AnimatedScanner,
+  BorderRadiuses,
+  Button,
+  KeyboardAwareScrollView,
+  Text,
+  View,
+} from "react-native-ui-lib";
+import { useLocalSearchParams, useRouter } from "expo-router";
 import Input from "@/components/forms/Input";
+import { useSelectImage } from "@/lib/hooks/useSelectImage";
 import { api } from "@/utils/api";
+import colors from "@/utils/colors";
+import { storageClient } from "@/utils/supabase";
+import { useUser } from "@clerk/clerk-expo";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
 const schema = z.object({
-  proof: z.string(),
   bankName: z.string(),
   bankAccount: z.string(),
   bankHolder: z.string(),
 });
 
 export default function PaymentConfirmScreen() {
+  const { user } = useUser();
+  const router = useRouter();
   const { orderId } = useLocalSearchParams<{ orderId: string }>();
 
+  const { image, onSelectImage, onUpload, uploadProggres } = useSelectImage();
+
   const { mutate, isPending } = api.order.confirmPayment.useMutation();
   const methods = useForm<z.infer<typeof schema>>({
     resolver: zodResolver(schema),
   });
   const { handleSubmit } = methods;
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = handleSubmit(async (data) => {
     if (!orderId) return;
 
-    mutate({
-      ...data,
-      orderId,
-    });
+    const filePath = `${user?.id}/${orderId}.png`;
+
+    const { error } = await onUpload("payment_proof", filePath);
+    if (error) {
+      Alert.alert("Gagal mengupload gambar");
+      return;
+    }
+
+    const imgUrl = storageClient.from("payment_proof").getPublicUrl(filePath);
+    mutate(
+      {
+        ...data,
+        orderId,
+        proof: imgUrl.data.publicUrl,
+      },
+      {
+        onSuccess: () => {
+          router.back();
+        },
+      },
+    );
   });
 
   return (
     <View bg-white br50 flex padding-s4 className="rounded-b-none">
-      <FormProvider {...methods}>
-        <Input
-          id="bankName"
-          label="Nama Bank"
-          placeholder="Masukan nama bank"
-        />
-        <Input
-          id="bankAccount"
-          label="Nomor Rekening"
-          placeholder="Masukan nomor rekening"
-          inputMode="numeric"
-        />
-        <Input
-          id="bankHolder"
-          label="Nama Pemilik Rekening"
-          placeholder="Masukan nama pemilik rekening"
+      <KeyboardAwareScrollView>
+        <FormProvider {...methods}>
+          <View
+            marginB-s4
+            br40
+            className="border-primary border bg-white"
+            padding-s4
+            flex
+          >
+            <Text text70 primary>
+              Upload Bukti Pembayaran
+            </Text>
+            <View flex center paddingV-s6 className="space-y-2">
+              {image?.assets ? (
+                <>
+                  <AnimatedImage
+                    source={{ uri: image.assets[0]?.uri }}
+                    style={{ width: 200, height: 200 }}
+                    loader={
+                      <ActivityIndicator
+                        color={colors.secondary}
+                        size="small"
+                      />
+                    }
+                  />
+                  {!!uploadProggres && (
+                    <AnimatedScanner progress={uploadProggres} />
+                  )}
+                  <Button
+                    onPress={onSelectImage}
+                    label="Ganti Gambar"
+                    bg-primary
+                  />
+                </>
+              ) : (
+                <Button
+                  onPress={onSelectImage}
+                  bg-primary
+                  outline
+                  outlineColor={colors.primary}
+                  borderRadius={BorderRadiuses.br40}
+                  padding-s2
+                  iconSource={() => (
+                    <MaterialCommunityIcons
+                      name="file-image-plus"
+                      size={40}
+                      color={colors.primary}
+                    />
+                  )}
+                />
+              )}
+            </View>
+          </View>
+          <Input
+            id="bankName"
+            label="Nama Bank"
+            placeholder="Masukan nama bank"
+          />
+          <Input
+            id="bankAccount"
+            label="Nomor Rekening"
+            placeholder="Masukan nomor rekening"
+            inputMode="numeric"
+          />
+          <Input
+            id="bankHolder"
+            label="Nama Pemilik Rekening"
+            placeholder="Masukan nama pemilik rekening"
+          />
+        </FormProvider>
+        <Button
+          label="Simpan"
+          onPress={onSubmit}
+          bg-primary
+          br40
+          disabled={!!uploadProggres || isPending}
         />
-      </FormProvider>
-      <Button
-        label="Simpan"
-        onPress={onSubmit}
-        bg-primary
-        br40
-        disabled={isPending}
-      />
+      </KeyboardAwareScrollView>
     </View>
   );
 }

apps/expo/src/app/(app)/payment.tsx

@@ -94,21 +94,29 @@ export default function PaymentScreen() {
           </Text>
         ))}
       </View>
-      <Link href="/payment-confirm" asChild>
-        <TouchableOpacity
-          row
-          spread
-          paddingV-s2
-          paddingH-s4
-          br40
-          className="border-primary mb-4 border"
+      {!orders?.paymentId && (
+        <Link
+          href={{
+            pathname: "/payment-confirm",
+            params: { orderId: orderId as string },
+          }}
+          asChild
         >
-          <Text text70 primary>
-            Unggah Bukti Pembayaran
-          </Text>
-          <Ionicons name="chevron-forward" size={24} color={colors.primary} />
-        </TouchableOpacity>
-      </Link>
+          <TouchableOpacity
+            row
+            spread
+            paddingV-s2
+            paddingH-s4
+            br40
+            className="border-primary mb-4 border"
+          >
+            <Text text70 primary>
+              Unggah Bukti Pembayaran
+            </Text>
+            <Ionicons name="chevron-forward" size={24} color={colors.primary} />
+          </TouchableOpacity>
+        </Link>
+      )}
     </View>
   );
 }

packages/api/src/router/orders.ts

@@ -39,14 +39,16 @@ export const orderRouter = createTRPCRouter({
     .input(createPaymentParams)
     .mutation(async ({ input, ctx }) => {
       return await ctx.db.transaction(async (db) => {
-        await db
-          .update(payments)
-          .set(input)
-          .where(eq(payments.orderId, input.orderId));
+        const paymentId = v4();
+        await db.insert(payments).values({
+          ...input,
+          id: paymentId,
+        });
         await db
           .update(orders)
           .set({
             status: "payment",
+            paymentId,
           })
           .where(eq(orders.id, input.orderId));
       });