Implement the RS01 consent content

.storybook/main.js → .storybook/main.cjs

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-export default {
+module.exports = {
   "stories": [
     "../stories/**/*.stories.@(js|jsx|ts|tsx)"
   ],

public/locally-available-studies.json

@@ -13,12 +13,11 @@
     "version": "0.3.1",
     "addonId": "[email protected]",
     "downloadLink": "https://addons.mozilla.org/firefox/downloads/latest/ion-basic-study",
+    "endDate": "2022-04-04",
     "studyEnded": false,
     "studyPaused": false,
     "description": "Study purpose: Testing Rally.",
-    "privacyPolicyLink": "https://addons.mozilla.org/en-US/firefox/addon/ion-basic-study/",
-    "joinStudyConsent": "This study will send an encrypted ping, only when the toolbar icon is clicked.",
-    "leaveStudyConsent": "This study cannot be re-joined.",
+    "studyDetailsLink": "https://addons.mozilla.org/en-US/firefox/addon/ion-basic-study/",
     "dataCollectionDetails": ["The date and time"],
     "tags": ["misinformation", "social media", "demo"]
   }

public/studies-schema.json

@@ -1,97 +1,90 @@
 {
-    "type": "array",
-    "items": [
-        {
-            "type": "object",
-            "properties": {
-                "name": {
-                    "type": "string"
-                },
-                "icons": {
-                    "type": "object",
-                    "properties": {
-                        "32": {
-                            "type": "string"
-                        },
-                        "64": {
-                            "type": "string"
-                        },
-                        "128": {
-                            "type": "string"
-                        }
-                    },
-                    "required": [
-                        "32",
-                        "64",
-                        "128"
-                    ]
-                },
-                "authors": {
-                    "type": "object",
-                    "properties": {
-                        "url": {
-                            "type": "string"
-                        },
-                        "name": {
-                            "type": "string"
-                        }
-                    },
-                    "required": [
-                        "url",
-                        "name"
-                    ]
-                },
-                "version": {
-                    "type": "string"
-                },
-                "addonId": {
-                    "type": "string"
-                },
-                "downloadLink": {
-                    "type": "string"
-                },
-                "studyEnded": {
-                    "type": "boolean"
-                },
-                "studyPaused": {
-                    "type": "boolean"
-                },
-                "description": {
-                    "type": "string"
-                },
-                "privacyPolicyLink": {
-                    "type": "string"
-                },
-                "joinStudyConsent": {
-                    "type": "string"
-                },
-                "leaveStudyConsent": {
-                    "type": "string"
-                },
-                "dataCollectionDetails": {
-                    "type": "array",
-                    "items": [
-                        {
-                            "type": "string"
-                        }
-                    ]
-                }
+  "type": "array",
+  "items": [
+    {
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string"
+        },
+        "icons": {
+          "type": "object",
+          "properties": {
+            "32": {
+              "type": "string"
             },
-            "required": [
-                "name",
-                "icons",
-                "authors",
-                "version",
-                "addonId",
-                "downloadLink",
-                "studyEnded",
-                "studyPaused",
-                "description",
-                "privacyPolicyLink",
-                "joinStudyConsent",
-                "leaveStudyConsent",
-                "dataCollectionDetails"
-            ]
+            "64": {
+              "type": "string"
+            },
+            "128": {
+              "type": "string"
+            }
+          },
+          "required": ["32", "64", "128"]
+        },
+        "authors": {
+          "type": "object",
+          "properties": {
+            "url": {
+              "type": "string"
+            },
+            "name": {
+              "type": "string"
+            }
+          },
+          "required": ["url", "name"]
+        },
+        "version": {
+          "type": "string"
+        },
+        "addonId": {
+          "type": "string"
+        },
+        "downloadLink": {
+          "type": "string"
+        },
+        "studyEnded": {
+          "type": "boolean"
+        },
+        "studyPaused": {
+          "type": "boolean"
+        },
+        "description": {
+          "type": "string"
+        },
+        "privacyPolicyLink": {
+          "type": "string"
+        },
+        "joinStudyConsent": {
+          "type": "string"
+        },
+        "leaveStudyConsent": {
+          "type": "string"
+        },
+        "dataCollectionDetails": {
+          "type": "array",
+          "items": [
+            {
+              "type": "string"
+            }
+          ]
         }
-    ]
+      },
+      "required": [
+        "name",
+        "icons",
+        "authors",
+        "version",
+        "addonId",
+        "downloadLink",
+        "studyEnded",
+        "studyPaused",
+        "description",
+        "privacyPolicyLink",
+        "joinStudyConsent",
+        "leaveStudyConsent",
+        "dataCollectionDetails"
+      ]
+    }
+  ]
 }

src/components/study-card/StudyCard.svelte

@@ -18,7 +18,7 @@
   export let endDate;
   export let joined = false;
   export let joinedDate = undefined;
-  export let privacyPolicyLink = undefined;
+  export let studyDetailsLink = undefined;
   export let imageSrc;
   export let dataCollectionDetails = [];
   export let tags = [];
@@ -238,7 +238,7 @@
         </div>
 
         <div class="study-card-privacy-policy">
-          <a target="_blank" rel="noopener noreferrer" class="external-link" style="--spacing: 6px;" href={privacyPolicyLink}>View Full Study Details <ExternalLink /></a>
+          <a target="_blank" rel="noopener noreferrer" class="external-link" style="--spacing: 6px;" href={studyDetailsLink}>View Full Study Details <ExternalLink /></a>
         </div>
       </div>
     </div>

src/components/study-card/study-categories.js

@@ -26,4 +26,12 @@ export default {
         text: "var(--color-marketing-gray-100)",
         background: "#E0ECEC"
     },
+    "community insights": {
+        text: "var(--color-marketing-gray-100)",
+        background: "#D9BFFF"
+    },
+    "product discovery": {
+        text: "var(--color-marketing-gray-100)",
+        background: "#FFB4DC"
+    }
 }

src/routes/current-studies/Content.svelte

@@ -3,17 +3,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/*
--------------- Current Studies --------------
-
-Data points we'll need to support in the store to make this a reality:
-- study join date (study.joinedOn, added from the partner support library as soon as the study is successfully joined)
-- study end date (study.endDate, this should come from the partner)
-- study details link (study.detailsLink), which should be provided by partner
-- study details page name (study.detailsLinkName), which should be provided by partner
-
-*/
-
 import { createEventDispatcher } from 'svelte';
 import { fly } from 'svelte/transition';
 import StudyCard from './StudyCard.svelte';
@@ -31,6 +20,22 @@ function leaveStudy(studyID) {
     dispatch("leave-study", studyID);
 }
 
+function parseDateIfNeeded(date) {
+    if (date === undefined || (typeof date === 'object' && typeof date.getMonth === 'function')) return date;
+    try {
+        let endDate = date.split('-');
+        let day = +endDate[2];
+        let month = +endDate[1] - 1;
+        let year = +endDate[0];
+        return new Date(year, month, day);
+    } catch (err) {
+        console.error(err);
+        return undefined;
+    }
+}
+
+$: console.log(studies)
+
 </script>
 
 <style>
@@ -64,13 +69,12 @@ p {
         author={study.authors.name}
         joined={(!!study.studyJoined)}
         imageSrc={study.icons[64]}
-        endDate={study.endDate}
-        joinedDate={study.joinedOn}
+        addonId={study.addonId}
+        endDate={parseDateIfNeeded(study.endDate)}
+        joinedDate={parseDateIfNeeded(study.joinedOn)}
         description={study.description}
         dataCollectionDetails={study.dataCollectionDetails}
-        detailsDirectName={study.detailsDirectName}
-        detailsDirectLink={study.detailsDirectLink}
-        privacyPolicyLink={study.privacyPolicyLink}
+        studyDetailsLink={study.studyDetailsLink}
         tags={study.tags}
         {sidebarOffset}
         on:cta-clicked

src/routes/current-studies/StudyCard.svelte

@@ -17,20 +17,20 @@ import StudyCardHeader from '../../components/study-card/Header.svelte';
 import Button from '../../components/Button.svelte';
 import Dialog from '../../components/Dialog.svelte';
 import IRBWindow from '../irbs/IRBWindow.svelte';
+import GenericConsent from "../irbs/GenericConsent.svelte";
 import irb from "../irbs";
 
 export let joined = false;
 export let imageSrc;
 export let title = "Untitled Study";
 export let author = "Author Unknown";
 export let description = "no description.";
+export let addonId;
 export let endDate;
 export let joinedDate;
 export let dataCollectionDetails;
-export let privacyPolicyLink;
+export let studyDetailsLink;
 export let tags;
-export let detailsDirectName;
-export let detailsDirectLink;
 
 const dispatch = createEventDispatcher();
 
@@ -53,18 +53,12 @@ function triggerJoinEvent() {
     {dataCollectionDetails}
     {tags}
     {imageSrc}
-    {privacyPolicyLink}>
+    {studyDetailsLink}>
         <span slot="name">{title}</span>
         <span slot="author">{author}</span>
         <p slot="description">
         {description}
         </p>
-        <div slot="details" style="display: {(detailsDirectName !== undefined && detailsDirectLink !== undefined) ? 'auto' : 'none'};">
-        {#if detailsDirectName && detailsDirectLink}
-            Full study details can be found on the
-            <a href={detailsDirectLink}>{detailsDirectName}</a>
-        {/if}
-        </div>
 </StudyCard>
 
 {#if joinModal}
@@ -95,9 +89,13 @@ function triggerJoinEvent() {
             <!-- Bake in the Princeton IRB. Once we have more studies, we will key this
                  by the study id.
             -->
-            <IRBWindow>
-                <svelte:component this={irb['princeton-study']} />
-            </IRBWindow>
+                <IRBWindow>
+                    {#if addonId in irb}
+                        <svelte:component this={irb[addonId]} />
+                    {:else}
+                        <GenericConsent />
+                    {/if}
+                </IRBWindow>
         {:else}
                 <div style="width: 368px;">
                     <p style="padding-top: 20px;">

src/routes/demographics/Content.svelte

@@ -115,7 +115,9 @@
 
   <slot name="description">
     <p>
-      Each question is completely optional, and can be updated at any time by clicking Manage Profile. The answers you give will help us understand the composition and representivity of the Rally community.
+      Each question is completely optional, and can be updated at any time by clicking Manage Profile. 
+      The answers you give will help us understand the composition and representivity of the Rally community.
+      Additionally, collaborators will combine your answers with the data collected in the studies you join to enrich their findings and answer research questions.
     </p>
   </slot>