Fakultas Ilmu Komputer UI

index.tsx 2.96 KB
Newer Older
Wulan Mantiri's avatar
Wulan Mantiri committed
1
import React, { FC, useContext } from 'react';
2
import { View } from 'react-native';
3
4
5
import { Text, Button } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';

Wulan Mantiri's avatar
Wulan Mantiri committed
6
import { Loader, BigButton, Toast, EmptyDataPage } from 'components/core';
7
8
9
import { Section } from 'components/layout';
import * as ROUTES from 'constants/routes';
import { dietPrograms } from 'constants/dietelaProgram';
10
import { useApi } from 'hooks';
Wulan Mantiri's avatar
Wulan Mantiri committed
11
import { retrieveCartApi, payWithMidtransApi } from 'services/payment';
12
13
14
15
import { typographyStyles } from 'styles';

import { styles } from './styles';
import { CheckoutCard } from './components';
Wulan Mantiri's avatar
Wulan Mantiri committed
16
import { UserContext } from 'provider';
17
18
19

const Checkout: FC = () => {
  const navigation = useNavigation();
Wulan Mantiri's avatar
Wulan Mantiri committed
20
  const { user } = useContext(UserContext);
21

Wulan Mantiri's avatar
Wulan Mantiri committed
22
  const { isLoading, data } = useApi(() => retrieveCartApi(user.cart_id));
23

Wulan Mantiri's avatar
Wulan Mantiri committed
24
  const pay = async () => {
25
    const response = await payWithMidtransApi(data?.id);
Wulan Mantiri's avatar
Wulan Mantiri committed
26
    if (response.success && response.data) {
27
      navigation.navigate(ROUTES.payment, { url: response.data.redirect_url });
Wulan Mantiri's avatar
Wulan Mantiri committed
28
29
30
    } else {
      Toast.show({
        type: 'error',
31
32
33
        text1: 'Anda sudah membayar tagihan ini.',
        text2:
          'Mohon restart aplikasi Dietela untuk memulai perjalanan diet Anda.',
Wulan Mantiri's avatar
Wulan Mantiri committed
34
35
36
37
      });
    }
  };

38
39
40
  if (isLoading) {
    return <Loader />;
  }
41
42
43
  if (!data) {
    return <EmptyDataPage text="Anda belum memilih program diet" />;
  }
44
45
46
47
  return (
    <View style={styles.container}>
      <View>
        <CheckoutCard
48
          content={dietPrograms[data.program.unique_code].title}
49
50
51
          type="program"
          onReadMore={() =>
            navigation.navigate(ROUTES.programDetail, {
52
              id: data.program.unique_code,
53
54
55
56
            })
          }
        />
        <CheckoutCard
57
          content={data.nutritionist.full_name_and_degree}
58
59
60
          type="nutritionist"
          onReadMore={() =>
            navigation.navigate(ROUTES.nutritionistDetail, {
61
              ntr: data.nutritionist,
62
63
64
65
66
67
            })
          }
        />
      </View>
      <View style={styles.priceContainer}>
        <Text style={typographyStyles.headingMedium}>Harga:</Text>
68
69
70
71
72
73
        <View style={styles.currencyContainer}>
          <Text style={styles.currency}>Rp</Text>
          <Text style={styles.basePrice}>
            {dietPrograms[data.program.unique_code].price}
          </Text>
        </View>
74
75
76
77
78
      </View>
      <View>
        <Button
          title="ganti pilihan"
          type="outline"
Wulan Mantiri's avatar
Wulan Mantiri committed
79
80
81
82
83
84
          onPress={() =>
            navigation.reset({
              index: 0,
              routes: [{ name: ROUTES.choosePlan }],
            })
          }
85
86
87
88
          buttonStyle={styles.buttonStyle}
          titleStyle={[typographyStyles.overlineBig, styles.titleStyle]}
        />
        <Section>
Wulan Mantiri's avatar
Wulan Mantiri committed
89
90
91
          <BigButton
            title="bayar dengan midtrans"
            onPress={pay}
92
            disabled={!data.id}
Wulan Mantiri's avatar
Wulan Mantiri committed
93
          />
94
95
96
97
98
99
100
        </Section>
      </View>
    </View>
  );
};

export default Checkout;