Fakultas Ilmu Komputer UI

index.tsx 3.21 KB
Newer Older
Wulan Mantiri's avatar
Wulan Mantiri committed
1
2
import React, { FC, useCallback, useState } from 'react';
import { View, Linking } 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';
Wulan Mantiri's avatar
Wulan Mantiri committed
11
12
import { useApi, useLinkingEffect } from 'hooks';
import { retrieveCartApi, payWithMidtransApi } from 'services/payment';
13
14
15
16
17
18
19
20
21
import { getCache } from 'utils/cache';
import { typographyStyles } from 'styles';

import { styles } from './styles';
import { CheckoutCard } from './components';

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

Wulan Mantiri's avatar
Wulan Mantiri committed
22
23
  const [cartId, setCartId] = useState<string | null>(null);

24
  const fetchCart = useCallback(async () => {
Wulan Mantiri's avatar
Wulan Mantiri committed
25
26
27
28
    const cachedCartId = await getCache(CACHE_KEYS.cartId);
    setCartId(cachedCartId);
    return await retrieveCartApi(cachedCartId);
  }, [setCartId]);
29
30
31

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

Wulan Mantiri's avatar
Wulan Mantiri committed
32
33
34
35
36
37
38
39
40
41
42
43
44
45
  const pay = async () => {
    const response = await payWithMidtransApi(cartId);
    if (response.success && response.data) {
      await Linking.openURL(response.data.redirect_url);
    } else {
      Toast.show({
        type: 'error',
        text1: 'Gagal melakukan transaksi pembayaran.',
        text2: 'Terjadi kesalahan pada sisi kami. Silakan coba lagi',
      });
    }
  };

  useLinkingEffect();
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

  if (isLoading) {
    return <Loader />;
  }
  return (
    <View style={styles.container}>
      <View>
        <CheckoutCard
          content={data ? dietPrograms[data.program.unique_code].title : '-'}
          type="program"
          onReadMore={() =>
            navigation.navigate(ROUTES.programDetail, {
              id: data?.program.unique_code,
            })
          }
        />
        <CheckoutCard
          content={data ? data.nutritionist.full_name_and_degree : '-'}
          type="nutritionist"
          onReadMore={() =>
            navigation.navigate(ROUTES.nutritionistDetail, {
67
              ntr: data?.nutritionist,
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
            })
          }
        />
      </View>
      <View style={styles.priceContainer}>
        <Text style={typographyStyles.headingMedium}>Harga:</Text>
        {data ? (
          <View style={styles.currencyContainer}>
            <Text style={styles.currency}>Rp</Text>
            <Text style={styles.basePrice}>
              {dietPrograms[data.program.unique_code].price}
            </Text>
          </View>
        ) : (
          <Text>-</Text>
        )}
      </View>
      <View>
        <Button
          title="ganti pilihan"
          type="outline"
Wulan Mantiri's avatar
Wulan Mantiri committed
89
90
91
92
93
94
          onPress={() =>
            navigation.reset({
              index: 0,
              routes: [{ name: ROUTES.choosePlan }],
            })
          }
95
96
97
98
          buttonStyle={styles.buttonStyle}
          titleStyle={[typographyStyles.overlineBig, styles.titleStyle]}
        />
        <Section>
Wulan Mantiri's avatar
Wulan Mantiri committed
99
100
101
          <BigButton
            title="bayar dengan midtrans"
            onPress={pay}
102
            disabled={!cartId}
Wulan Mantiri's avatar
Wulan Mantiri committed
103
          />
104
105
106
107
108
109
110
        </Section>
      </View>
    </View>
  );
};

export default Checkout;