Help page per questionaire

package.json

@@ -22,11 +22,13 @@
     "@react-navigation/native-stack": "^6.5.2",
     "@types/react-native-vector-icons": "^6.4.10",
     "axios": "^0.26.1",
+    "lottie-react-native": "^5.1.3",
     "react": "17.0.2",
     "react-native": "0.67.3",
     "react-native-audio-recorder-player": "^3.4.0",
     "react-native-bootsplash": "^4.1.5",
     "react-native-config": "^1.4.5",
+    "react-native-fade-loading": "^0.1.3",
     "react-native-fast-image": "^8.5.11",
     "react-native-image-modal": "^2.0.4",
     "react-native-image-picker": "^4.7.3",

src/assets/accessibilityStrings.ts

@@ -12,22 +12,18 @@ const ACCESSIBILITY_STRINGS = {
   helpButtonHint: 'Naar de helppagina',
   helpTitle: 'Helppagina',
 
-  contactTitle: 'Contactgegevens',
   contactSubtitle: 'Bezoek- en postadres',
-  contactExtraInfo:
-    'Stichting Accessibility is gevestigd in het bedrijfsverzamelgebouw de Krammstate op een paar minuten lopen van Station Utrecht Overvecht.',
   contactExtraInfoLabel:
     'Extra informatie voor bezoek aan Stichting Accessibility: Stichting Accessibility is gevestigd in het bedrijfsverzamelgebouw de Krammstate op een paar minuten lopen van Station Utrecht Overvecht.',
   contactStreet: 'Christiaan Krammlaan 2',
   contactPostalCode: '3571 AX',
   contactCity: 'Utrecht',
   contactPhone: '+31 30 239 82 70',
   contactEmail: 'info@accessibility.nl',
-  contactSendEmail: 'Stuur een e-mail',
-  contactSendEmailHint:
+  contactSendEmailLabel:
     'Stuur een e-mail naar Stichting Accessibility via een beschikbare mail app',
-  contactCallPhone: 'Bellen',
-  contactCallPhoneHint: 'Bel naar het bedrijf',
+  contactCallPhoneLabel: 'Bel naar het bedrijf',
+  contactLogo: "Logo van Stichting Accessibility",
 
   backButton: 'Terug knop',
   backButtonHint: 'Terug naar',

src/assets/animations/loading.json

@@ -0,0 +1,213 @@
+{
+  "v": "5.8.1",
+  "fr": 30,
+  "ip": 0,
+  "op": 60,
+  "w": 300,
+  "h": 300,
+  "nm": "loading_6",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Shape Layer 2",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": [0.833], "y": [0.833] },
+              "o": { "x": [0.167], "y": [0.167] },
+              "t": 0,
+              "s": [0]
+            },
+            { "t": 60, "s": [360] }
+          ],
+          "ix": 10
+        },
+        "p": { "a": 0, "k": [150.00000000000003, 150.00000000000003, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [30.000000000000004, 30.000000000000004, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [300, 300], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "st",
+              "c": {
+                "a": 0,
+                "k": [0.22745098039215686, 0.6627450980392157, 0.8627450980392157, 1],
+                "ix": 3
+              },
+              "o": { "a": 0, "k": 100, "ix": 4 },
+              "w": { "a": 0, "k": 50, "ix": 5 },
+              "lc": 2,
+              "lj": 1,
+              "ml": 4,
+              "bm": 0,
+              "nm": "Stroke 1",
+              "mn": "ADBE Vector Graphic - Stroke",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        },
+        {
+          "ty": "tm",
+          "s": {
+            "a": 1,
+            "k": [
+              {
+                "i": { "x": [0.667], "y": [1] },
+                "o": { "x": [0.333], "y": [0] },
+                "t": 10,
+                "s": [0]
+              },
+              { "t": 60, "s": [99] }
+            ],
+            "ix": 1
+          },
+          "e": {
+            "a": 1,
+            "k": [
+              {
+                "i": { "x": [0.667], "y": [1] },
+                "o": { "x": [0.333], "y": [0] },
+                "t": 0,
+                "s": [1]
+              },
+              { "t": 50, "s": [100] }
+            ],
+            "ix": 2
+          },
+          "o": {
+            "a": 1,
+            "k": [
+              {
+                "i": { "x": [0.833], "y": [0.833] },
+                "o": { "x": [0.167], "y": [0.167] },
+                "t": 0,
+                "s": [0]
+              },
+              { "t": 60, "s": [3] }
+            ],
+            "ix": 3
+          },
+          "m": 1,
+          "ix": 2,
+          "nm": "Trim Paths 1",
+          "mn": "ADBE Vector Filter - Trim",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 300,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 4,
+      "nm": "Shape Layer 1",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 30, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": { "a": 0, "k": [150.00000000000003, 150.00000000000003, 0], "ix": 2, "l": 2 },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
+        "s": { "a": 0, "k": [30.000000000000004, 30.000000000000004, 100], "ix": 6, "l": 2 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [300, 300], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "st",
+              "c": {
+                "a": 0,
+                "k": [0.6666666666666666, 0.8431372549019608, 0.9215686274509803, 1],
+                "ix": 3
+              },
+              "o": { "a": 0, "k": 100, "ix": 4 },
+              "w": { "a": 0, "k": 50, "ix": 5 },
+              "lc": 1,
+              "lj": 1,
+              "ml": 4,
+              "bm": 0,
+              "nm": "Stroke 1",
+              "mn": "ADBE Vector Graphic - Stroke",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [0, 0], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 1",
+          "np": 3,
+          "cix": 2,
+          "bm": 0,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 300,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}

src/components/question/QuestionList.tsx

@@ -12,6 +12,7 @@ const QuestionList = (props: { questions: Question[] }) => {
   const questions: Question[] = props.questions;
   const navigation = useNavigation();
   const isFocused = useIsFocused();
+
   return (
     <>
       {questions?.length === 0 && (

src/components/utility/FetchQuestionnaire.tsx

@@ -18,6 +18,11 @@ export async function fetchQuestionnaire(code: string, navigation: any) {
           name: questionnaire.title,
         }),
       ]);
+
+      await ParticipantCode.setCurrentQuestionaireTitle(questionnaire.title);
+      await ParticipantCode.setCurrentQuestionaireHelp(
+        questionnaire.help ? questionnaire.help : ''
+      );
       // @ts-ignore next-line
       navigation.navigate('Questionnaire', {
         title: questionnaire.title,

src/data/localStorage/ParticipantCode.ts

@@ -11,7 +11,28 @@ class ParticipantCode {
   }
 
   public static async loadCurrentParticipantCodeFromLocalStorage() {
-    return await AsyncStorage.getItem('ParticipantCode');
+    return AsyncStorage.getItem('ParticipantCode');
+  }
+
+  public static async setCurrentQuestionaireHelp(help: string) {
+    await AsyncStorage.setItem('CurrentQuestionaireHelp', JSON.stringify(help));
+  }
+
+  public static async getCurrentQuestionaireHelp(): Promise<string | null> {
+    return AsyncStorage.getItem('CurrentQuestionaireHelp');
+  }
+
+  static async setCurrentQuestionaireTitle(title: string) {
+    await AsyncStorage.setItem('CurrentQuestionaireTitle', JSON.stringify(title));
+  }
+
+  static async getCurrentQuestionaireTitle(): Promise<string | null> {
+    return AsyncStorage.getItem('CurrentQuestionaireTitle');
+  }
+
+  public static async getCurrentQuestionaireExtraData() {
+    let q = await AsyncStorage.getItem('CurrentQuestionaire');
+    return typeof q === 'string' ? JSON.parse(q) : null;
   }
 
   private static questionnaireExists(questionnaires: QuestionnaireDisplay[], code: string) {

src/data/localStorage/Queue.ts

@@ -27,6 +27,10 @@ class TempStorage {
     return TempStorage.instance;
   }
 
+  public clearStorage() {
+    AsyncStorage.clear();
+  }
+
   private loadQueueFromLocalStorage() {
     AsyncStorage.getItem('Queue')
       .then((result: string | null) => {

src/models/Questionnaire.ts

@@ -7,6 +7,7 @@ export class Questionnaire {
   participantCode: string;
   description?: string;
   instructions?: string;
+  help?: string;
   teachableMachineLink?: string;
   sections?: Section[];
 
@@ -17,6 +18,7 @@ export class Questionnaire {
     participantCode: string,
     description?: string,
     instructions?: string,
+    help?: string,
     teachableMachineLink?: string,
     sections?: Section[]
   ) {
@@ -26,6 +28,7 @@ export class Questionnaire {
     this.participantCode = participantCode;
     this.description = description;
     this.instructions = instructions;
+    this.help = help;
     this.teachableMachineLink = teachableMachineLink;
     this.sections = sections;
   }