feat(expo): orders list

mrevanzak · Nov 29, 2023 · f4b0871 · f4b0871
1 parent a7721e0
commit f4b0871
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 67 deletions.
diff --git a/apps/expo/src/app/(app)/(tabs)/home.tsx b/apps/expo/src/app/(app)/(tabs)/home.tsx
@@ -63,7 +63,6 @@ export default function HomeScreen() {
                         <ActivityIndicator
                           color={colors.secondary}
                           size="large"
-                          className="mb-24"
                         />
                       }
                     />

diff --git a/apps/expo/src/app/(app)/(tabs)/profile.tsx b/apps/expo/src/app/(app)/(tabs)/profile.tsx
@@ -4,13 +4,14 @@ import {
   Button,
   Spacings,
   Text,
+  TouchableOpacity,
   View,
 } from "react-native-ui-lib";
 import { Link } from "expo-router";
 import { api } from "@/utils/api";
 import colors from "@/utils/colors";
 import { useAuth, useUser } from "@clerk/clerk-expo";
-import { MaterialIcons } from "@expo/vector-icons";
+import { FontAwesome, MaterialIcons } from "@expo/vector-icons";
 
 export default function ProfileScreen() {
   const { isLoaded, signOut, userId } = useAuth();
@@ -22,13 +23,8 @@ export default function ProfileScreen() {
   }
 
   return (
-    <View bg-white padding-s4 flex>
-      <View
-        br40
-        className="border-primary border bg-white"
-        padding-s4
-        marginB-s4
-      >
+    <View bg-white padding-s4 flex className="space-y-4">
+      <View br40 className="border-primary border bg-white" padding-s4>
         <View row spread>
           <View row centerV className="space-x-4">
             <Avatar
@@ -72,6 +68,16 @@ export default function ProfileScreen() {
           </View>
         </View>
       </View>
+      <View br40 className="border-primary border bg-white" padding-s4>
+        <Link asChild href="/order/">
+          <TouchableOpacity row centerV className="space-x-3">
+            <FontAwesome name="shopping-bag" size={20} color={colors.primary} />
+            <Text text70 primary>
+              Pembelian
+            </Text>
+          </TouchableOpacity>
+        </Link>
+      </View>
       <Button
         label="Keluar"
         outline

diff --git a/apps/expo/src/app/(app)/_layout.tsx b/apps/expo/src/app/(app)/_layout.tsx
@@ -33,7 +33,7 @@ export default function AuthLayout() {
         }}
       />
       <Stack.Screen
-        name="[productId]"
+        name="product/[productId]"
         options={{
           header: (props) => <Header {...props} hideSearch />,
           contentStyle: {
@@ -47,22 +47,16 @@ export default function AuthLayout() {
           headerTitle: "Pengiriman",
         }}
       />
-      <Stack.Screen
-        name="payment"
-        options={{
-          headerTitle: "Pembayaran",
-        }}
-      />
       <Stack.Screen
         name="payment-confirm"
         options={{
           headerTitle: "Konfirmasi Pembayaran",
         }}
       />
       <Stack.Screen
-        name="edit-product"
+        name="product/edit"
         options={{
-          headerTitle: "Ubah detil produk",
+          headerTitle: "Ubah Detail Produk",
         }}
       />
       <Stack.Screen
@@ -86,6 +80,18 @@ export default function AuthLayout() {
           headerTitleAlign: "center",
         }}
       />
+      <Stack.Screen
+        name="order/index"
+        options={{
+          headerTitle: "Pembelian",
+        }}
+      />
+      <Stack.Screen
+        name="order/[orderId]"
+        options={{
+          headerTitle: "Detail Pembelian",
+        }}
+      />
     </Stack>
   );
 }
diff --git a/apps/expo/src/app/(app)/checkout.tsx b/apps/expo/src/app/(app)/checkout.tsx
@@ -50,7 +50,7 @@ export default function CheckoutScreen() {
       {
         onSuccess: ({ orderId }) => {
           router.replace({
-            pathname: "/payment",
+            pathname: "/(app)/order/[orderId]",
             params: { orderId },
           });
         },

diff --git a/apps/expo/src/app/(app)/payment.tsx → apps/expo/src/app/(app)/order/[orderId].tsx b/apps/expo/src/app/(app)/payment.tsx → apps/expo/src/app/(app)/order/[orderId].tsx
@@ -27,7 +27,7 @@ const BANK_ACCOUNT = [
   },
 ];
 
-export default function PaymentScreen() {
+export default function OrderDetailScreen() {
   const { orderId } = useLocalSearchParams();
   const { data: orders } = api.order.showOrder.useQuery({
     id: orderId as string,
@@ -73,49 +73,55 @@ export default function PaymentScreen() {
           </Text>
         </View>
       </View>
-      <View
-        paddingV-s2
-        paddingH-s4
-        br40
-        className="border-primary mb-4 space-y-1 border"
-      >
-        <Text text80 primary marginB-s1>
-          Transfer ke Vivat Marketplace
-        </Text>
-        {BANK_ACCOUNT.map((bank) => (
-          <Text
-            key={bank.name}
-            onPress={async () => {
-              await Clipboard.setStringAsync(bank.number);
-              Alert.alert("Berhasil menyalin nomor rekening");
-            }}
-          >
-            {bank.name}: {bank.number} - Vivat Marketplace
-          </Text>
-        ))}
-      </View>
-      {!orders?.paymentId && (
-        <Link
-          href={{
-            pathname: "/payment-confirm",
-            params: { orderId: orderId as string },
-          }}
-          asChild
-        >
-          <TouchableOpacity
-            row
-            spread
+      {orders?.status === "pending" && (
+        <>
+          <View
             paddingV-s2
             paddingH-s4
             br40
-            className="border-primary mb-4 border"
+            className="border-primary mb-4 space-y-1 border"
           >
-            <Text text70 primary>
-              Unggah Bukti Pembayaran
+            <Text text80 primary marginB-s1>
+              Transfer ke Vivat Marketplace
             </Text>
-            <Ionicons name="chevron-forward" size={24} color={colors.primary} />
-          </TouchableOpacity>
-        </Link>
+            {BANK_ACCOUNT.map((bank) => (
+              <Text
+                key={bank.name}
+                onPress={async () => {
+                  await Clipboard.setStringAsync(bank.number);
+                  Alert.alert("Berhasil menyalin nomor rekening");
+                }}
+              >
+                {bank.name}: {bank.number} - Vivat Marketplace
+              </Text>
+            ))}
+          </View>
+          <Link
+            href={{
+              pathname: "/payment-confirm",
+              params: { orderId: orderId as string },
+            }}
+            asChild
+          >
+            <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>
   );

diff --git a/apps/expo/src/app/(app)/order/index.tsx b/apps/expo/src/app/(app)/order/index.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { ActivityIndicator } from "react-native";
+import {
+  AnimatedImage,
+  Avatar,
+  BorderRadiuses,
+  Card,
+  Text,
+  View,
+} from "react-native-ui-lib";
+import { Link } from "expo-router";
+import { api } from "@/utils/api";
+import colors from "@/utils/colors";
+import rupiahFormatter from "@/utils/rupiahFormatter";
+import { FlashList } from "@shopify/flash-list";
+
+export default function OrdersScreen() {
+  const { data, refetch, isFetching } = api.order.getOrders.useQuery();
+
+  const getStatus = (status: string) => {
+    switch (status) {
+      case "pending":
+        return "Menunggu pembayaran";
+      case "accepted":
+        return "Diproses";
+      case "cancelled":
+        return "Dibatalkan";
+      default:
+        return "Menunggu konfirmasi";
+    }
+  };
+
+  return (
+    <View bg-white br50 flex padding-s4 className="rounded-b-none">
+      <FlashList
+        data={data}
+        numColumns={1}
+        estimatedItemSize={200}
+        onRefresh={() => refetch()}
+        refreshing={isFetching}
+        ListEmptyComponent={
+          <Text text70BO center marginT-s6>
+            Tidak ada pembelian
+          </Text>
+        }
+        renderItem={({ item }) => {
+          return (
+            <Link
+              asChild
+              href={{
+                pathname: "/(app)/order/[orderId]",
+                params: {
+                  orderId: item.id,
+                },
+              }}
+            >
+              <Card
+                padding-s4
+                borderRadius={BorderRadiuses.br40}
+                className="border-primary mb-4 space-y-4 border"
+              >
+                <View className="border-primary border-b pb-4">
+                  <View row spread centerV>
+                    <View row className="space-x-2">
+                      <Avatar
+                        source={{
+                          uri: item.users?.imageUrl,
+                        }}
+                        animate
+                        name={item.users?.name}
+                        useAutoColors
+                        size={36}
+                      />
+                      <View>
+                        <Text text80>{item.users?.name}</Text>
+                        <Text text90R>{item.users.major}</Text>
+                      </View>
+                    </View>
+                    <View bg-secondary {...{ "bg-red30": item.status === "cancelled" }} padding-s1 br20>
+                      <Text text100BO white>
+                        {getStatus(item.status)}
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+                <View row centerV className="space-x-4">
+                  <AnimatedImage
+                    source={{ uri: item.products.image }}
+                    height={100}
+                    aspectRatio={1}
+                    borderRadius={BorderRadiuses.br60}
+                    loader={<ActivityIndicator color={colors.secondary} />}
+                    // style={{ flex: 1 }}
+                  />
+                  <View>
+                    <Text text70 primary>
+                      {item.products.name}
+                    </Text>
+                    <Text text80 primary>
+                      {rupiahFormatter(item.products.price)}
+                    </Text>
+                  </View>
+                </View>
+              </Card>
+            </Link>
+          );
+        }}
+      />
+    </View>
+  );
+}
diff --git a/apps/expo/src/app/(app)/payment-confirm.tsx b/apps/expo/src/app/(app)/payment-confirm.tsx
@@ -58,7 +58,7 @@ export default function PaymentConfirmScreen() {
         proof: imgUrl.data.publicUrl,
       },
       {
-        onSuccess: () => {
+        onSettled: () => {
           router.back();
         },
       },

diff --git a/apps/expo/src/app/(app)/[productId].tsx → ...xpo/src/app/(app)/product/[productId].tsx b/apps/expo/src/app/(app)/[productId].tsx → ...xpo/src/app/(app)/product/[productId].tsx
@@ -11,7 +11,7 @@ import {
   Text,
   View,
 } from "react-native-ui-lib";
-import { Link, usePathname } from "expo-router";
+import { Link, useLocalSearchParams } from "expo-router";
 import { api } from "@/utils/api";
 import colors from "@/utils/colors";
 import rupiahFormatter from "@/utils/rupiahFormatter";
@@ -20,10 +20,10 @@ import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
 
 export default function ProductDetailScreen() {
   const { user } = useUser();
-  const pathname = usePathname();
+  const { productId } = useLocalSearchParams<{ productId: string }>();
 
   const { data, isLoading, refetch } = api.product.showProduct.useQuery({
-    id: pathname.slice(1),
+    id: productId,
   });
 
   return (
@@ -121,12 +121,18 @@ export default function ProductDetailScreen() {
             {user?.id === data?.user.id ? (
               <Link
                 href={{
-                  pathname: "/edit-product",
+                  pathname: "/product/edit",
                   params: { productId: data?.id ?? "" },
                 }}
                 asChild
               >
-                <Button bg-secondary primary label="Ubah Detil Produk" br40 flex />
+                <Button
+                  bg-secondary
+                  primary
+                  label="Ubah Detail Produk"
+                  br40
+                  flex
+                />
               </Link>
             ) : (
               <Link

diff --git a/apps/expo/src/app/(app)/edit-product.tsx → apps/expo/src/app/(app)/product/edit.tsx b/apps/expo/src/app/(app)/edit-product.tsx → apps/expo/src/app/(app)/product/edit.tsx