feat: add pinned forms to suggested forms spot

domains/DataCollection/FormGallery/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  ScrollView, StyleSheet,
+  ScrollView,
   View
 } from 'react-native';
 import {
@@ -13,6 +13,7 @@ import ComingSoonSVG from '../../../assets/graphics/static/Adventurer.svg';
 import SmallCardsCarousel from '../../../components/Cards/SmallCardsCarousel';
 import I18n from '../../../modules/i18n';
 import { layout, theme } from '../../../modules/theme';
+import styles from './index.styles';
 
 const FormGallery = (props) => {
   const {
@@ -124,26 +125,4 @@ const FormGallery = (props) => {
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  cardContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: 20
-  },
-  textContainer: {
-    flexDirection: 'row',
-  },
-  text: {
-    flexShrink: 1,
-    textAlign: 'center',
-    color: theme.colors.primary,
-    fontWeight: 'bold',
-    marginVertical: 7,
-  },
-  header: {
-    fontSize: 20,
-    fontWeight: 'bold'
-  }
-});
 export default FormGallery;

domains/DataCollection/FormGallery/index.styles.js

@@ -0,0 +1,29 @@
+import {
+  StyleSheet
+} from 'react-native';
+
+import { theme } from '../../../modules/theme';
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 20
+  },
+  textContainer: {
+    flexDirection: 'row',
+  },
+  text: {
+    flexShrink: 1,
+    textAlign: 'center',
+    color: theme.colors.primary,
+    fontWeight: 'bold',
+    marginVertical: 7,
+  },
+  header: {
+    fontSize: 20,
+    fontWeight: 'bold'
+  }
+});
+
+export default styles;

domains/DataCollection/Forms/index.js

@@ -1,22 +1,24 @@
 import React, { useState } from 'react';
-import { Keyboard, TouchableWithoutFeedback, View } from 'react-native';
-import { Button, Text } from 'react-native-paper';
+import {
+  Keyboard, ScrollView, TouchableWithoutFeedback, View
+} from 'react-native';
+import { Button, Card, Text } from 'react-native-paper';
 
 import PostSubmissionSVG from '../../../assets/graphics/static/Submission-Page-Icon.svg';
-import SmallCardsCarousel from '../../../components/Cards/SmallCardsCarousel';
 import ResidentIdSearchbar from '../../../components/ResidentIdSearchbar';
 import I18n from '../../../modules/i18n';
 import { layout, theme } from '../../../modules/theme';
 import GdprCompliance from '../GdprCompliance';
 import IdentificationForm from './IdentificationForm';
+import styles from './index.styles';
 import SupplementaryForm from './SupplementaryForm';
 
 const Forms = (props) => {
   const {
-    navigation, navigateToGallery,
+    navigation, navigateToGallery, navigateToCustomForm,
     selectedForm, setSelectedForm, navigateToNewRecord,
     scrollViewScroll, setScrollViewScroll,
-    puenteForms,
+    pinnedForms,
     surveyingUser, surveyingOrganization,
     surveyee, setSurveyee,
     customForm, navigateToRoot
@@ -82,11 +84,33 @@ const Forms = (props) => {
           </View>
           <View style={layout.container}>
             <Text style={{ fontSize: 15, marginBottom: 5 }}>{I18n.t('forms.suggestedForms')}</Text>
-            <SmallCardsCarousel
-              puenteForms={puenteForms}
-              navigateToNewRecord={navigateToNewRecord}
-              setUser={false}
-            />
+            <ScrollView horizontal>
+              {pinnedForms && pinnedForms.map((form) => (
+                <Card
+                  key={form.objectId ?? form.tag}
+                  style={layout.cardSmallStyle}
+                  onPress={() => {
+                    if (!form.tag) return navigateToCustomForm(form);
+                    return navigateToNewRecord(form.tag);
+                  }}
+                >
+                  <View style={styles.cardContainer}>
+                    <View style={styles.textContainer}>
+                      <Text style={styles.text}>
+                        {form.name}
+                      </Text>
+                    </View>
+                  </View>
+                </Card>
+              ))}
+              {pinnedForms.length < 1 && (
+                <View style={layout.screenRow}>
+                  <Card>
+                    <Card.Title title={I18n.t('formsGallery.noPinnedForms')} />
+                  </Card>
+                </View>
+              )}
+            </ScrollView>
             <Button mode="contained" onPress={navigateToGallery}>
               <Text style={{ color: 'white' }}>{I18n.t('forms.viewGallery')}</Text>
             </Button>

domains/DataCollection/Forms/index.styles.js

@@ -0,0 +1,29 @@
+import {
+  StyleSheet
+} from 'react-native';
+
+import { theme } from '../../../modules/theme';
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 20
+  },
+  textContainer: {
+    flexDirection: 'row',
+  },
+  text: {
+    flexShrink: 1,
+    textAlign: 'center',
+    color: theme.colors.primary,
+    fontWeight: 'bold',
+    marginVertical: 7,
+  },
+  header: {
+    fontSize: 20,
+    fontWeight: 'bold'
+  }
+});
+
+export default styles;

domains/DataCollection/index.js

@@ -201,15 +201,16 @@ const DataCollection = ({ navigation }) => {
                 navigateToGallery={navigateToGallery}
                 navigateToNewRecord={navigateToNewRecord}
                 navigateToRoot={navigateToRoot}
+                navigateToCustomForm={navigateToCustomForm}
                 selectedForm={selectedForm}
                 setSelectedForm={setSelectedForm}
-                puenteForms={puenteForms}
                 surveyingUser={surveyingUser}
                 surveyingOrganization={surveyingOrganization}
                 surveyee={surveyee}
                 setSurveyee={setSurveyee}
                 customForm={customForm}
                 setView={setView}
+                pinnedForms={pinnedForms}
               />
             </View>
           )}