#322 Add PeriodicityModalScreen

app/components/ClickableTag/ClickableTag.styles.ts

@@ -8,6 +8,7 @@ export default StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 4,
     borderRadius: 6,
+    margin: 6,
     borderWidth: 1.5,
   },
   selected: {

app/components/ClickableTag/ClickableTag.tsx

@@ -9,12 +9,14 @@ type Props = {
   text: string;
   isSelected: boolean;
   onPress: () => void;
+  touchableStyle?: StyleProp<ViewStyle>;
 };
 
-const ClickableTag = ({ text, isSelected, onPress }: Props): ReactElement => {
+const ClickableTag = ({ text, isSelected, onPress, touchableStyle }: Props): ReactElement => {
   const containerStyle: StyleProp<ViewStyle> = [
     styles.default,
     isSelected ? styles.selected : styles.unselected,
+    touchableStyle,
   ];
 
   const textColor = { darkGray: !isSelected, green: isSelected };

app/components/ClickableTag/__tests__/__snapshots__/ClickableTag.test.tsx.snap

@@ -9,13 +9,15 @@ exports[`ClickableTag tests should render correctly 1`] = `
         "alignSelf": "center",
         "borderRadius": 6,
         "borderWidth": 1.5,
+        "margin": 6,
         "paddingHorizontal": 10,
         "paddingVertical": 4,
       },
       Object {
         "backgroundColor": "#F0F0F0",
         "borderColor": "#9CA6A0",
       },
+      undefined,
     ]
   }
 >

app/interfaces/emission/emission.interface.ts

@@ -45,4 +45,9 @@ interface Emission extends EmissionPayload {
   isMitigated: boolean;
 }
 
-export { Emission, EmissionPayload, EmissionType, EmissionModelType };
+enum PeriodicityType {
+  weekly = "weekly",
+  monthly = "monthly",
+}
+
+export { Emission, EmissionPayload, EmissionType, EmissionModelType, PeriodicityType };

app/interfaces/emission/index.ts

@@ -1,3 +1,9 @@
-import { Emission, EmissionType, EmissionPayload, EmissionModelType } from "./emission.interface";
+import {
+  Emission,
+  EmissionType,
+  EmissionPayload,
+  EmissionModelType,
+  PeriodicityType,
+} from "./emission.interface";
 
-export { Emission, EmissionType, EmissionPayload, EmissionModelType };
+export { Emission, EmissionType, EmissionPayload, EmissionModelType, PeriodicityType };

app/interfaces/index.ts

@@ -1,4 +1,17 @@
-import { Emission, EmissionType, EmissionPayload, EmissionModelType } from "./emission";
+import {
+  Emission,
+  EmissionType,
+  EmissionPayload,
+  EmissionModelType,
+  PeriodicityType,
+} from "./emission";
 import NavStatelessComponent from "./navigation";
 
-export { NavStatelessComponent, Emission, EmissionType, EmissionPayload, EmissionModelType };
+export {
+  NavStatelessComponent,
+  Emission,
+  EmissionType,
+  EmissionPayload,
+  EmissionModelType,
+  PeriodicityType,
+};

app/navigation/Navigator/AppNavigator.tsx

@@ -4,6 +4,7 @@ import { createStackNavigator } from "@react-navigation/stack";
 
 import ModalNavigator from "./ModalNavigator";
 import InfoModalNavigator from "./InfoModalNavigator";
+import PeriodicityModalNavigator from "./PeriodicityModalNavigator";
 import RootNavigator from "./RootNavigator";
 import ComingSoonScreen from "../../screens/ComingSoon";
 
@@ -28,6 +29,11 @@ const App = (): React.ReactElement => {
           options={{ headerShown: false }}
           component={InfoModalNavigator}
         />
+        <AppStack.Screen
+          name="PeriodicityModal"
+          options={{ headerShown: false }}
+          component={PeriodicityModalNavigator}
+        />
       </AppStack.Navigator>
     </NavigationContainer>
   );

app/navigation/Navigator/ModalNavigator.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 
 import ComingSoonScreen from "../../screens/ComingSoon";
+import PeriodicityModalScreen from "../../screens/Periodicity";
 
 const Stack = createStackNavigator();
 
@@ -12,6 +13,11 @@ const ModalNavigator = (): React.ReactElement => (
       options={ComingSoonScreen.navigationOptions}
       component={ComingSoonScreen}
     />
+    <Stack.Screen
+      name="PeriodicityModal"
+      options={PeriodicityModalScreen.navigationOptions}
+      component={PeriodicityModalScreen}
+    />
   </Stack.Navigator>
 );
 

app/navigation/Navigator/PeriodicityModalNavigator.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { createStackNavigator } from "@react-navigation/stack";
+
+import PeriodicityModalScreen from "../../screens/Periodicity";
+
+const Stack = createStackNavigator();
+
+const PeriodicityModalNavigator = (): React.ReactElement => (
+  <Stack.Navigator>
+    <Stack.Screen
+      name="PeriodicityModal"
+      options={PeriodicityModalScreen.navigationOptions}
+      component={PeriodicityModalScreen}
+    />
+  </Stack.Navigator>
+);
+
+export default PeriodicityModalNavigator;

app/navigation/navigate.ts

@@ -23,6 +23,10 @@ const openInfoModal = (navigation) => (props = {}) => {
   });
 };
 
+const openPeriodicityModal = (navigation) => (props = {}) => {
+  navigation.navigate("PeriodicityModal", { screen: "PeriodicityModal", params: props });
+};
+
 /* push */
 const openMontlyBudget = (navigation) => (props = {}) => {
   navigation.push("MonthlyBudget", props);
@@ -102,6 +106,7 @@ const navigate = (navigation) => ({
   openAddEmissionBarCode: navigateOneTime(openAddEmissionBarCode(navigation)),
   openComingSoon: navigateOneTime(openComingSoon(navigation)),
   openInfoModal: navigateOneTime(openInfoModal(navigation)),
+  openPeriodicityModal: navigateOneTime(openPeriodicityModal(navigation)),
   openBudget: navigateOneTime(openBudget(navigation)),
   openMontlyBudget: navigateOneTime(openMontlyBudget(navigation)),
   openAddEmission: navigateOneTime(openAddEmission(navigation)),

app/screens/Periodicity/PeriodicityModal.navigationOptions.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { StackNavigationOptions } from "@react-navigation/stack";
+
+import { Layout } from "constant";
+import { Text } from "components";
+import { platform, t } from "utils";
+import { Colors, ComponentsStyle } from "style";
+import { navigate } from "navigation";
+
+const iconStyle = { paddingRight: Layout.PADDING_HORIZONTAL };
+
+const navigationOptionsAndroid = (): StackNavigationOptions => ({
+  ...ComponentsStyle.transitionBetweenScreenPresets,
+  headerStyle: {
+    ...ComponentsStyle.header,
+  },
+  headerTitle: () => <Text.H1>{t("PERIODICITY_MODAL_SCREEN_TITLE")}</Text.H1>,
+  headerRight: () => null,
+});
+
+const navigationOptionsIOS = ({ navigation }): StackNavigationOptions => ({
+  headerStyle: {
+    ...ComponentsStyle.header,
+    borderBottomWidth: 0,
+  },
+  headerTitle: () => <Text.H1>{t("PERIODICITY_MODAL_SCREEN_TITLE")}</Text.H1>,
+  headerLeft: () => null,
+  headerRight: () => (
+    <View style={iconStyle}>
+      <Ionicons
+        name="md-close"
+        size={32}
+        color={Colors.grey100}
+        onPress={() => {
+          navigate(navigation).goBack();
+        }}
+      />
+    </View>
+  ),
+});
+
+const navigationOptions = platform.isAndroid ? navigationOptionsAndroid : navigationOptionsIOS;
+
+export default navigationOptions;

app/screens/Periodicity/PeriodicityModalScreen.styles.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from "react-native";
+
+import { Layout } from "style";
+
+export default StyleSheet.create({
+  container: Layout.containerWithPadding,
+  textView: {
+    marginTop: 22,
+    alignItems: "center",
+    flex: 1,
+  },
+  text: {
+    fontSize: 18,
+  },
+  tag: {
+    margin: 6,
+  },
+  tagSection: {
+    marginVertical: 5,
+  },
+  tagsContainer: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginVertical: 5,
+  },
+  confirmBtnContainer: {
+    marginTop: 20,
+  },
+});

app/screens/Periodicity/PeriodicityModalScreen.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+
+import { NavStatelessComponent, PeriodicityType } from "interfaces";
+import { Button, Text } from "components";
+import ClickableTag from "components/ClickableTag";
+import { TranslationKeys } from "utils/translations/resources";
+import { t } from "utils";
+
+import styles from "./PeriodicityModalScreen.styles";
+import navigationOptions from "./PeriodicityModal.navigationOptions";
+
+const PeriodicityModalScreen: NavStatelessComponent = () => {
+  const navigation = useNavigation();
+  const [periodType, setPeriodType] = useState<PeriodicityType | null>(null);
+  const [weekDays, setWeekdays] = useState<number[]>([]);
+  const [times, setTimes] = useState<number | null>();
+
+  function onWeekdaySelected(dayIndex: number) {
+    setWeekdays(
+      weekDays.includes(dayIndex) ? weekDays.filter((i) => i !== dayIndex) : [...weekDays, dayIndex]
+    );
+  }
+
+  function onConfirm() {
+    const periodicity = {
+      periodType,
+      periodWeekDays: periodType === PeriodicityType.weekly ? weekDays : null,
+      times,
+    };
+    navigation.navigate("AddEmission", {
+      periodicity,
+    });
+  }
+
+  const hideConfirm =
+    !periodType || !times || (periodType === PeriodicityType.weekly && weekDays.length === 0);
+
+  return (
+    <ScrollView style={styles.container}>
+      <View style={styles.tagSection}>
+        <Text.H3>{t("PERIODICITY_MODAL_SCREEN_OFTEN")}</Text.H3>
+        <View style={styles.tagsContainer}>
+          <ClickableTag
+            isSelected={periodType === PeriodicityType.monthly}
+            onPress={() => {
+              setPeriodType(PeriodicityType.monthly);
+            }}
+            text={t("PERIODICITY_MODAL_SCREEN_MONTHLY")}
+          />
+
+          <ClickableTag
+            isSelected={periodType === PeriodicityType.weekly}
+            onPress={() => {
+              setPeriodType(PeriodicityType.weekly);
+            }}
+            text={t("PERIODICITY_MODAL_SCREEN_WEEKLY")}
+          />
+        </View>
+      </View>
+      {periodType === PeriodicityType.weekly && (
+        <View style={styles.tagSection}>
+          <Text.H3>{t("PERIODICITY_MODAL_SCREEN_DAYS")}</Text.H3>
+          <View style={styles.tagsContainer}>
+            {WEEK_DAYS_LIST.map(({ dayIndex, nameKey }) => {
+              return (
+                <ClickableTag
+                  key={dayIndex}
+                  isSelected={weekDays.includes(dayIndex)}
+                  onPress={() => {
+                    onWeekdaySelected(dayIndex);
+                  }}
+                  text={t(nameKey)}
+                />
+              );
+            })}
+          </View>
+        </View>
+      )}
+      <View style={styles.tagSection}>
+        <Text.H3>{t("PERIODICITY_MODAL_SCREEN_OCCURRENCES")}</Text.H3>
+        <View style={styles.tagsContainer}>
+          {TIMES_LIST.map((_, index) => (
+            <ClickableTag
+              key={index}
+              isSelected={times === index + 1}
+              onPress={() => {
+                setTimes(index + 1);
+              }}
+              text={`${index + 1} ${
+                index > 0 ? t("PERIODICITY_MODAL_SCREEN_TIMES") : t("PERIODICITY_MODAL_SCREEN_TIME")
+              }`}
+            />
+          ))}
+        </View>
+      </View>
+
+      {!hideConfirm && (
+        <View style={styles.confirmBtnContainer}>
+          <Button.Primary fullWidth onPress={onConfirm} textType={"Primary"}>
+            <Text.Primary white center bold>
+              {t("ADD_EMISSION_SCREEN_PICKER_MODAL_CONFIRM")}
+            </Text.Primary>
+          </Button.Primary>
+        </View>
+      )}
+    </ScrollView>
+  );
+};
+
+const TIMES_LIST = new Array(3).fill(null);
+
+const WEEK_DAYS_LIST: {
+  dayIndex: number;
+  nameKey: keyof TranslationKeys;
+}[] = [
+  { dayIndex: 2, nameKey: "UI_MONDAY" },
+  { dayIndex: 3, nameKey: "UI_TUESDAY" },
+  { dayIndex: 4, nameKey: "UI_WEDNESDAY" },
+  { dayIndex: 5, nameKey: "UI_THURSDAY" },
+  { dayIndex: 6, nameKey: "UI_FRIDAY" },
+  { dayIndex: 0, nameKey: "UI_SATURDAY" },
+  { dayIndex: 1, nameKey: "UI_SUNDAY" },
+];
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+PeriodicityModalScreen.navigationOptions = navigationOptions;
+
+export default PeriodicityModalScreen;

app/screens/Periodicity/__test__/PriodicityModalScreen.test.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+import PeriodicityModalScreen from "../PeriodicityModalScreen";
+
+it("InfoModalScreen renders correctly", () => {
+  const tree = create(<PeriodicityModalScreen />).toJSON();
+  expect(tree).toMatchSnapshot();
+});