Fakultas Ilmu Komputer UI

index.tsx 2.62 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { FC, useState } from 'react';
import { ScrollView } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import { useNavigation } from '@react-navigation/native';

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';
import { layoutStyles } from 'styles';

import { PricingList } from './components';
import { initialValues, sample } from './schema';

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

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

  const { handleSubmit, getFormFieldProps } = useForm({
    initialValues,
    onSubmit: async (values) => {
      await AsyncStorage.setItem(
        CACHE_KEYS.selectedProgramId,
        `${values.program}`,
      );
      await AsyncStorage.setItem(
        CACHE_KEYS.selectedNutritionistId,
        `${values.nutritionist}`,
      );
      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"
            items={sample.map((code) => ({
              ...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;