Consent template selection

.changeset/large-rabbits-matter.md

@@ -0,0 +1,6 @@
+---
+"@lookit/templates": patch
+"@lookit/record": patch
+---
+
+Add ability to select specific video consent template.

packages/record/src/consentVideo.spec.ts

@@ -42,7 +42,10 @@ test("Trial", () => {
   const jsPsych = initJsPsych();
   const plugin = new VideoConsentPlugin(jsPsych);
   const display = document.createElement("div");
-  const trial = { locale: "en-us" } as unknown as TrialType<PluginInfo>;
+  const trial = {
+    locale: "en-us",
+    template: "consent-template-5",
+  } as unknown as TrialType<PluginInfo>;
 
   plugin["recordFeed"] = jest.fn();
   plugin["recordButton"] = jest.fn();
@@ -116,7 +119,10 @@ test("onEnded", () => {
   const play = document.createElement("button");
   const next = document.createElement("button");
   const record = document.createElement("button");
-  const trial = { locale: "en-us" } as unknown as TrialType<PluginInfo>;
+  const trial = {
+    locale: "en-us",
+    template: "consent-template-5",
+  } as unknown as TrialType<PluginInfo>;
 
   display.innerHTML = chsTemplates.consentVideo(trial);
   plugin["recordFeed"] = jest.fn();
@@ -152,7 +158,10 @@ test("getButton", () => {
   const jsPsych = initJsPsych();
   const plugin = new VideoConsentPlugin(jsPsych);
   const display = document.createElement("div");
-  const trial = { locale: "en-us" } as unknown as TrialType<PluginInfo>;
+  const trial = {
+    locale: "en-us",
+    template: "consent-template-5",
+  } as unknown as TrialType<PluginInfo>;
 
   display.innerHTML = chsTemplates.consentVideo(trial);
 
@@ -182,7 +191,10 @@ test("recordButton", async () => {
   const jsPsych = initJsPsych();
   const plugin = new VideoConsentPlugin(jsPsych);
   const display = document.createElement("div");
-  const trial = { locale: "en-us" } as unknown as TrialType<PluginInfo>;
+  const trial = {
+    locale: "en-us",
+    template: "consent-template-5",
+  } as unknown as TrialType<PluginInfo>;
 
   display.innerHTML = chsTemplates.consentVideo(trial);
 
@@ -228,7 +240,10 @@ test("playButton", () => {
   const jsPsych = initJsPsych();
   const plugin = new VideoConsentPlugin(jsPsych);
   const display = document.createElement("div");
-  const trial = { locale: "en-us" } as unknown as TrialType<PluginInfo>;
+  const trial = {
+    locale: "en-us",
+    template: "consent-template-5",
+  } as unknown as TrialType<PluginInfo>;
 
   plugin["playbackFeed"] = jest.fn();
 
@@ -249,7 +264,10 @@ test("stopButton", async () => {
   const jsPsych = initJsPsych();
   const plugin = new VideoConsentPlugin(jsPsych);
   const display = document.createElement("div");
-  const trial = { locale: "en-us" } as unknown as TrialType<PluginInfo>;
+  const trial = {
+    locale: "en-us",
+    template: "consent-template-5",
+  } as unknown as TrialType<PluginInfo>;
 
   display.innerHTML =
     chsTemplates.consentVideo(trial) + Handlebars.compile(recordFeed)({});
@@ -274,7 +292,10 @@ test("nextButton", () => {
   const jsPsych = initJsPsych();
   const plugin = new VideoConsentPlugin(jsPsych);
   const display = document.createElement("div");
-  const trial = { locale: "en-us" } as unknown as TrialType<PluginInfo>;
+  const trial = {
+    locale: "en-us",
+    template: "consent-template-5",
+  } as unknown as TrialType<PluginInfo>;
 
   display.innerHTML = chsTemplates.consentVideo(trial);
   plugin["endTrial"] = jest.fn();

packages/record/src/consentVideo.ts

@@ -16,7 +16,7 @@ const info = <const>{
   name: "consent-video",
   version,
   parameters: {
-    template: { type: ParameterType.STRING, default: "consent_005" },
+    template: { type: ParameterType.STRING, default: "consent-template-5" },
     locale: { type: ParameterType.STRING, default: "en-us" },
     additional_video_privacy_statement: {
       type: ParameterType.STRING,

packages/templates/package.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "@jspsych/config": "^2.0.0",
     "handlebars": "^4.7.8",
+    "rollup-plugin-dotenv": "^0.5.1",
     "rollup-plugin-polyfill-node": "^0.13.0"
   },
   "peerDependencies": {

packages/templates/rollup.config.mjs

@@ -1,3 +1,4 @@
+import dotenv from "rollup-plugin-dotenv";
 import nodePolyfills from "rollup-plugin-polyfill-node";
 import { importAsString } from "rollup-plugin-string-import";
 import { makeRollupConfig } from "../../rollup.mjs";
@@ -7,7 +8,8 @@ export default makeRollupConfig("chsTemplates").map((config) => {
     ...config,
     plugins: [
       ...config.plugins,
-
+      // Add support for .env files
+      dotenv(),
       // Add support to import yaml and handlebars files as strings
       importAsString({
         include: ["**/*.yaml", "**/*.hbs"],

packages/templates/src/consentVideo.ts → packages/templates/src/consentVideoTemplate.ts

@@ -1,9 +1,10 @@
 import { LookitWindow } from "@lookit/data/dist/types";
 import Handlebars from "handlebars";
 import { PluginInfo, TrialType } from "jspsych";
-import consentDocumentTemplate from "../hbs/consent-document.hbs";
+import consent_template_5 from "../hbs/consent-template-5.hbs";
 import consentVideoTrialTemplate from "../hbs/consent-video-trial.hbs";
-import { initI18nAndTemplates } from "./utils";
+import { ConsentTemplateNotFound } from "./errors";
+import { setLocale } from "./utils";
 
 declare const window: LookitWindow;
 
@@ -19,7 +20,9 @@ export const consentVideo = (trial: TrialType<PluginInfo>) => {
   const experiment = window.chs.study.attributes;
   const { PIName, PIContact } = trial;
 
-  initI18nAndTemplates(trial);
+  setLocale(trial);
+
+  const consentDocumentTemplate = consentDocument(trial);
 
   const consent = Handlebars.compile(consentDocumentTemplate)({
     ...trial,
@@ -34,3 +37,18 @@ export const consentVideo = (trial: TrialType<PluginInfo>) => {
     video_container_id,
   });
 };
+
+/**
+ * Get consent template by name.
+ *
+ * @param trial - Trial data including user supplied parameters.
+ * @returns Consent template
+ */
+const consentDocument = (trial: TrialType<PluginInfo>) => {
+  switch (trial.template) {
+    case "consent-template-5":
+      return consent_template_5;
+    default:
+      throw new ConsentTemplateNotFound(trial.template);
+  }
+};

packages/templates/src/environment.d.ts

@@ -0,0 +1,9 @@
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      DEBUG?: string;
+    }
+  }
+}
+
+export {};

packages/templates/src/errors.ts

@@ -1,11 +1,22 @@
-/** Error throw what specified language isn't found */
-export class TranslationNotFoundError extends Error {
+/** Error thrown when specified language isn't found */
+export class LocaleNotFoundError extends Error {
   /**
    * This will be thrown when attempting to init i18n
    *
    * @param baseName - Language a2code with region
    */
   public constructor(baseName: string) {
-    super(`"${baseName}" translation not found.`);
+    super(`"${baseName}" locale not found.`);
+  }
+}
+/** Error thrown when researcher selects template that isn't available. */
+export class ConsentTemplateNotFound extends Error {
+  /**
+   * This will let the researcher know that their template isn't found.
+   *
+   * @param template - Supplied name of consent template.
+   */
+  public constructor(template: string) {
+    super(`Consent template "${template}" not found.`);
   }
 }

packages/templates/src/index.spec.ts

@@ -1,11 +1,15 @@
 import { LookitWindow } from "@lookit/data/dist/types";
 import { PluginInfo, TrialType } from "jspsych";
+import { ConsentTemplateNotFound } from "./errors";
 import chsTemplate from "./index";
 
 declare const window: LookitWindow;
 
 test("consent video", () => {
-  const trial = { locale: "en-us" } as unknown as TrialType<PluginInfo>;
+  const trial = {
+    locale: "en-us",
+    template: "consent-template-5",
+  } as unknown as TrialType<PluginInfo>;
   const name = "some name";
   window.chs = {
     study: {
@@ -25,7 +29,10 @@ test("consent video", () => {
 });
 
 test("consent video in French", () => {
-  const trial = { locale: "fr" } as unknown as TrialType<PluginInfo>;
+  const trial = {
+    locale: "fr",
+    template: "consent-template-5",
+  } as unknown as TrialType<PluginInfo>;
   const name = "some name";
   window.chs = {
     study: {
@@ -43,3 +50,13 @@ test("consent video in French", () => {
     `Consentement à participer à la recherche:\n  ${name}`,
   );
 });
+
+test("consent video with unknown template", () => {
+  const trial = {
+    locale: "en-us",
+    template: "not a real template name",
+  } as unknown as TrialType<PluginInfo>;
+  expect(() => chsTemplate.consentVideo(trial)).toThrow(
+    ConsentTemplateNotFound,
+  );
+});

packages/templates/src/index.ts

@@ -1,3 +1,3 @@
-import { consentVideo } from "./consentVideo";
+import { consentVideo } from "./consentVideoTemplate";
 
 export default { consentVideo };

packages/templates/src/utils.spec.ts

@@ -1,15 +1,6 @@
-import Yaml from "js-yaml";
-import en_us from "../i18n/en-us.yaml";
-import eu from "../i18n/eu.yaml";
-import fr from "../i18n/fr.yaml";
-import hu from "../i18n/hu.yaml";
-import it from "../i18n/it.yaml";
-import ja from "../i18n/ja.yaml";
-import nl from "../i18n/nl.yaml";
-import pt_br from "../i18n/pt-br.yaml";
-import pt from "../i18n/pt.yaml";
-import { TranslationNotFoundError } from "./errors";
-import { expFormat, getTranslation } from "./utils";
+import { PluginInfo, TrialType } from "jspsych";
+import { LocaleNotFoundError } from "./errors";
+import { expFormat, setLocale } from "./utils";
 
 test("expFormat convert written text to format well in HTML", () => {
   expect(expFormat("abcdefg")).toStrictEqual("abcdefg");
@@ -30,26 +21,7 @@ test("expFormat convert written text to format well in HTML", () => {
   );
 });
 
-test("Get translation file for specified locale", () => {
-  const translations = {
-    ja,
-    pt,
-    eu,
-    fr,
-    hu,
-    it,
-    nl,
-    "en-us": en_us,
-    "pt-br": pt_br,
-  };
-
-  for (const [k, v] of Object.entries<string>(translations)) {
-    expect(getTranslation(new Intl.Locale(k))).toStrictEqual(Yaml.load(v));
-  }
-
-  expect(pt_br).not.toStrictEqual(pt);
-
-  expect(() => getTranslation(new Intl.Locale("not-a2code"))).toThrow(
-    TranslationNotFoundError,
-  );
+test("setLocale throw error with non-existing locale", () => {
+  const trial = { locale: "non-existing" } as unknown as TrialType<PluginInfo>;
+  expect(() => setLocale(trial)).toThrow(LocaleNotFoundError);
 });