Fakultas Ilmu Komputer UI

index.tsx 3.11 KB
Newer Older
1
2
import React, { FC } from 'react';
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 } from 'components/core';
7
8
9
10
import { Section } from 'components/layout';
import CACHE_KEYS from 'constants/cacheKeys';
import * as ROUTES from 'constants/routes';
import { dietPrograms } from 'constants/dietelaProgram';
11
import { useApi } from 'hooks';
Wulan Mantiri's avatar
Wulan Mantiri committed
12
import { retrieveCartApi, payWithMidtransApi } from 'services/payment';
13
14
15
16
17
import { getCache } from 'utils/cache';
import { typographyStyles } from 'styles';

import { styles } from './styles';
import { CheckoutCard } from './components';
18
import EmptyDataPage from 'components/core/EmptyDataPage';
19
20
21
22

const Checkout: FC = () => {
  const navigation = useNavigation();

23
  const fetchCart = async () => {
Wulan Mantiri's avatar
Wulan Mantiri committed
24
25
    const cachedCartId = await getCache(CACHE_KEYS.cartId);
    return await retrieveCartApi(cachedCartId);
26
  };
27
28
29

  const { isLoading, data } = useApi(fetchCart);

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

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

export default Checkout;