Skip to content

Commit

Permalink
feat: order done
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrevanzak
mrevanzak committed Dec 1, 2023
1 parent 7db0445 commit c071eb4
Show file tree
Hide file tree
Showing 7 changed files with 218 additions and 155 deletions.
1 change: 1 addition & 0 deletions apps/expo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
"@types/babel__core": "^7.20.3",
"@types/react": "^18.2.33",
"@vivat/api": "^0.1.0",
"@vivat/db": "^0.1.0",
"@vivat/eslint-config": "^0.2.0",
"@vivat/prettier-config": "^0.1.0",
"@vivat/tailwind-config": "^0.1.0",
Expand Down
312 changes: 176 additions & 136 deletions apps/expo/src/app/(app)/order/[orderId].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ import moment from "moment";

import "moment/locale/id";

import { RefreshControl, ScrollView } from "react-native-gesture-handler";
import { SafeAreaView } from "react-native-safe-area-context";
import type { z } from "zod";

import type { schema } from "@vivat/db";

const BANK_ACCOUNT = [
{
name: "BNI",
Expand All @@ -40,10 +46,11 @@ const BANK_ACCOUNT = [

export default function OrderDetailScreen() {
const { orderId, isSeller } = useLocalSearchParams();
const { data: orders } = api.order.showOrder.useQuery({
id: orderId as string,
});
const { data: log } = api.order.getLogOrders.useQuery({
const {
data: orders,
isLoading,
refetch,
} = api.order.showOrder.useQuery({
id: orderId as string,
});

Expand All @@ -60,7 +67,19 @@ export default function OrderDetailScreen() {
);
};

const getStatus = (status: string) => {
const confirmDelivered = api.order.confirmDelivered.useMutation();
const onConfirmDelivered = () => {
confirmDelivered.mutate(
{
id: orderId as string,
},
{
onSuccess: () => void utils.order.invalidate(),
},
);
};

const getStatus = (status: z.infer<typeof schema.orderStatusEnum>) => {
switch (status) {
case "pending":
return "Pesanan dibuat";
Expand All @@ -70,12 +89,10 @@ export default function OrderDetailScreen() {
return "Pesanan dikonfirmasi";
case "shipped":
return "Pesanan dikirim";
case "accepted":
return "Diproses";
case "done":
return "Pesanan selesai";
case "cancelled":
return "Dibatalkan";
default:
return "Menunggu konfirmasi";
}
};

Expand All @@ -85,9 +102,9 @@ export default function OrderDetailScreen() {
<Button
label="Terima pesanan"
bg-secondary
primary
borderRadius={BorderRadiuses.br30}
onPress={onConfirmOrder}
labelStyle={{ marginLeft: Spacings.s1 }}
/>
);
}
Expand Down Expand Up @@ -120,150 +137,173 @@ export default function OrderDetailScreen() {
};

return (
<View bg-white br50 flex padding-s4 className="rounded-b-none">
<View
paddingV-s2
paddingH-s4
br40
className="border-primary mb-4 space-y-1 border"
>
<Text text80 primary marginB-s1>
Catatan Pembelian
</Text>
{log?.map((item) => (
<View key={item.id} row spread>
<View>
<Text primary text90R>
{moment(item.timestamp).format("HH:mm")}
</Text>
<ScrollView
style={{
backgroundColor: "white",
}}
contentContainerStyle={{
padding: Spacings.s4,
}}
refreshControl={
<RefreshControl refreshing={isLoading} onRefresh={() => refetch()} />
}
>
<SafeAreaView edges={["bottom"]}>
<View
paddingV-s2
paddingH-s4
br40
className="border-primary mb-4 space-y-1 border"
>
<Text text80 primary marginB-s1>
Catatan Pembelian
</Text>
{orders?.logOrders?.map((item) => (
<View key={item.id} row spread>
<View>
<Text primary text90R>
{moment(item.timestamp).format("HH:mm")}
</Text>
<Text primary text90R>
{moment(item.timestamp).locale("id").format("dddd, LL")}
</Text>
</View>
<Text primary text90R>
{moment(item.timestamp).locale("id").format("dddd, LL")}
{getStatus(item.status)}
</Text>
</View>
<Text primary text90R>
{getStatus(item.status)}
))}
</View>
<View
paddingV-s2
paddingH-s4
br40
className="border-primary mb-4 space-y-1 border"
>
<Text text80 primary marginB-s1>
Rincian Pembelian
</Text>
<Text text70BO primary>
{orders?.product.name}
</Text>
<Text primary>
Penerima:{" "}
<Text>
{orders?.address.recipient} - {orders?.address.phoneNumber}
</Text>
</View>
))}
</View>
<View
paddingV-s2
paddingH-s4
br40
className="border-primary mb-4 space-y-1 border"
>
<Text text80 primary marginB-s1>
Rincian Pembelian
</Text>
<Text text70BO primary>
{orders?.product.name}
</Text>
<Text primary>
Penerima:{" "}
<Text>
{orders?.address.recipient} - {orders?.address.phoneNumber}
</Text>
</Text>
<Text primary>
Alamat:{" "}
<Text>
{orders?.address.address} - {orders?.address.zipCode}
<Text primary>
Alamat:{" "}
<Text>
{orders?.address.address} - {orders?.address.zipCode}
</Text>
</Text>
<Text primary>
Catatan: <Text>{orders?.note ?? "-"}</Text>
</Text>
</Text>
<Text primary>
Catatan: <Text>{orders?.note ?? "-"}</Text>
</Text>
<Text primary>
Kurir: <Text>{orders?.courier}</Text>
</Text>
<View row spread center>
<Text primary>TOTAL:</Text>
<View flex height={1} bg-black marginH-s2></View>
<Text primary text70BO>
{rupiahFormatter(orders?.totalPrice)}
<Text primary>
Kurir: <Text>{orders?.courier}</Text>
</Text>
<View row spread center>
<Text primary>TOTAL:</Text>
<View flex height={1} bg-black marginH-s2></View>
<Text primary text70BO>
{rupiahFormatter(orders?.totalPrice)}
</Text>
</View>
</View>
</View>
{orders?.status === "pending" && (
<>
{orders?.status === "pending" && (
<>
<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>
<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>
</>
)}
{orders?.status === "shipped" && (
<View
paddingV-s2
paddingH-s4
br40
className="border-primary mb-4 space-y-1 border"
>
<Text text80 primary marginB-s1>
Transfer ke Vivat Marketplace
Nomer Resi Pengiriman
</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>
<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
primary
onPress={async () => {
orders.shipping &&
(await Clipboard.setStringAsync(orders.shipping?.courier));
Alert.alert("Berhasil menyalin nomor resi");
}}
>
<Text text70 primary>
Unggah Bukti Pembayaran
</Text>
<Ionicons
name="chevron-forward"
size={24}
color={colors.primary}
/>
</TouchableOpacity>
</Link>
</>
)}
{orders?.status === "shipped" && (
<View
paddingV-s2
paddingH-s4
br40
className="border-primary mb-4 space-y-1 border"
>
<Text text80 primary marginB-s1>
Nomer Resi Pengiriman
</Text>
<Text
{orders?.shipping?.courier}:{" "}
<Text>{orders?.shipping?.trackingNumber}</Text>
</Text>
<AnimatedImage
containerStyle={{ alignItems: "center" }}
source={{ uri: orders?.shipping?.proof }}
style={{ width: 200, height: 200 }}
loader={
<ActivityIndicator color={colors.secondary} size="small" />
}
/>
</View>
)}
{orders?.status === "shipped" && (
<Button
label="Konfirmasi pesanan diterima"
bg-secondary
primary
onPress={async () => {
orders.shipping &&
(await Clipboard.setStringAsync(orders.shipping?.courier));
Alert.alert("Berhasil menyalin nomor resi");
}}
>
{orders?.shipping?.courier}:{" "}
<Text>{orders?.shipping?.trackingNumber}</Text>
</Text>
<AnimatedImage
containerStyle={{ alignItems: "center" }}
source={{ uri: orders?.shipping?.proof }}
style={{ width: 200, height: 200 }}
loader={<ActivityIndicator color={colors.secondary} size="small" />}
borderRadius={BorderRadiuses.br30}
onPress={onConfirmDelivered}
/>
</View>
)}
{isSeller && renderSellerAction()}
</View>
)}
{isSeller && renderSellerAction()}
</SafeAreaView>
</ScrollView>
);
}
Loading

0 comments on commit c071eb4

Please sign in to comment.