Fakultas Ilmu Komputer UI

index.tsx 3.62 KB
Newer Older
1
2
import React, { FC, useState } from 'react';
import { ScrollView } from 'react-native';
3
import { useNavigation, useRoute } from '@react-navigation/native';
4

5
import { WizardContainer, Loader, Toast } from 'components/core';
6
7
import CACHE_KEYS from 'constants/cacheKeys';
import * as ROUTES from 'constants/routes';
8
9
10
11
12
import { useApi } from 'hooks';
import {
  dietPrograms,
  defaultProgramRecommendations,
} from 'constants/dietelaProgram';
13
14
import { retrieveNutritionistsApi } from 'services/nutritionists';
import { Nutritionist } from 'services/nutritionists/models';
15
import { ProgramRecommendations } from 'services/dietelaQuiz/quizResult';
16
import { createCartApi } from 'services/payment';
17
import { layoutStyles } from 'styles';
18
import { setCache } from 'utils/cache';
19
20

import { PricingList } from './components';
21
import { initialValues, getRecommendedPrograms } from './schema';
22
23
24

const ChoosePlan: FC = () => {
  const navigation = useNavigation();
25
  const route = useRoute();
26
27
  const programs = (route.params ??
    defaultProgramRecommendations) as ProgramRecommendations;
28

29
30
31
  const [currentPage, setCurrentPage] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [values, setValues] = useState(initialValues);
32

33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
  const handleSubmit = async () => {
    setIsSubmitting(true);
    const response = await createCartApi(values);
    setIsSubmitting(false);

    if (response.success) {
      await setCache(CACHE_KEYS.cartId, response.data?.id);
      navigation.navigate(ROUTES.cart, response.data);
    } else {
      Toast.show({
        type: 'error',
        text1: 'Gagal menyimpan data',
        text2: 'Terjadi kesalahan pada sisi kami. Silakan coba lagi',
      });
    }
  };

  const handleChange = (name: string, value: string) => {
    setValues({
      ...values,
      [name]: value,
    });
  };

  const isCurrentPageError = (): boolean => {
    const fieldName = currentPage === 1 ? 'program' : 'nutritionist';
    return values[fieldName] === null;
  };
61
62
63
64
65
66
67
68
69
70

  const { isLoading, data: nutritionists = [] } = useApi(
    retrieveNutritionistsApi,
  );

  if (isLoading) {
    return <Loader />;
  }
  return (
    <WizardContainer
71
72
73
74
75
76
      currentStep={currentPage}
      setCurrentStep={setCurrentPage}
      onFinish={handleSubmit}
      finishButtonLabel="Bayar"
      isNextDisabled={isCurrentPageError()}
      isLoading={isSubmitting}
77
78
79
80
      components={[
        <ScrollView contentContainerStyle={layoutStyles}>
          <PricingList
            headerText="Pilih Rekomendasi Program Dietela"
81
            items={getRecommendedPrograms(programs).map((code) => ({
82
83
84
85
86
              ...dietPrograms[code],
              value: code,
              onReadMore: () =>
                navigation.navigate(ROUTES.programDetail, { id: code }),
            }))}
87
88
            value={values.program}
            onChange={(v) => handleChange('program', v)}
89
90
91
92
93
94
95
96
          />
        </ScrollView>,
        <ScrollView contentContainerStyle={layoutStyles}>
          <PricingList
            headerText="Pilih Nutrisionis Anda"
            items={nutritionists.map((nutritionist: Nutritionist) => ({
              title: nutritionist.full_name_and_degree,
              value: nutritionist.id,
97
98
99
              info: nutritionist.mastered_nutritional_problems
                .split(';')
                .slice(0, 3),
100
101
102
103
104
              onReadMore: () =>
                navigation.navigate(ROUTES.nutritionistDetail, {
                  id: nutritionist.id,
                }),
            }))}
105
106
            value={values.nutritionist}
            onChange={(v) => handleChange('nutritionist', v)}
107
108
109
110
111
112
113
114
          />
        </ScrollView>,
      ]}
    />
  );
};

export default ChoosePlan;