Fakultas Ilmu Komputer UI

index.tsx 2.71 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
6
7
8
9
10
11

import { WizardContainer, Loader } from 'components/core';
import CACHE_KEYS from 'constants/cacheKeys';
import * as ROUTES from 'constants/routes';
import { useForm, useApi } from 'hooks';
import { dietPrograms } from 'constants/dietelaProgram';
import { retrieveNutritionistsApi } from 'services/nutritionists';
import { Nutritionist } from 'services/nutritionists/models';
12
import { ProgramRecommendations } from 'services/dietelaQuiz/quizResult';
13
import { layoutStyles } from 'styles';
14
import { setCache } from 'utils/cache';
15
16

import { PricingList } from './components';
17
import { initialValues, getRecommendedPrograms } from './schema';
18
19
20

const ChoosePlan: FC = () => {
  const navigation = useNavigation();
21
22
  const route = useRoute();
  const programs = route.params as ProgramRecommendations;
23
24
25
26
27

  const [currentStep, setCurrentStep] = useState(1);

  const { handleSubmit, getFormFieldProps } = useForm({
    initialValues,
28
29
30
    onSubmit: (values) => {
      setCache(CACHE_KEYS.selectedProgramId, values.program);
      setCache(CACHE_KEYS.selectedNutritionistId, values.nutritionist);
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
      navigation.navigate(ROUTES.cart);
    },
  });

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

  if (isLoading) {
    return <Loader />;
  }
  return (
    <WizardContainer
      currentStep={currentStep}
      setCurrentStep={setCurrentStep}
      components={[
        <ScrollView contentContainerStyle={layoutStyles}>
          <PricingList
            headerText="Pilih Rekomendasi Program Dietela"
50
            items={getRecommendedPrograms(programs).map((code) => ({
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
              ...dietPrograms[code],
              value: code,
              onReadMore: () =>
                navigation.navigate(ROUTES.programDetail, { id: code }),
            }))}
            {...getFormFieldProps('program')}
          />
        </ScrollView>,
        <ScrollView contentContainerStyle={layoutStyles}>
          <PricingList
            headerText="Pilih Nutrisionis Anda"
            items={nutritionists.map((nutritionist: Nutritionist) => ({
              title: nutritionist.full_name_and_degree,
              value: nutritionist.id,
              info: nutritionist.handled_age_group.split(','),
              onReadMore: () =>
                navigation.navigate(ROUTES.nutritionistDetail, {
                  id: nutritionist.id,
                }),
            }))}
            {...getFormFieldProps('nutritionist')}
          />
        </ScrollView>,
      ]}
      onFinish={handleSubmit}
      finishButtonLabel="Bayar"
    />
  );
};

export default ChoosePlan;