feat: add a reference field in the registration flow

+ handle it in the backend & sync it to supabase

api/src/replication/onUsersPrivateWrite.js

@@ -18,7 +18,8 @@ module.exports = async ({ data: change }) => {
       'stripeCustomerId',
       'stripeSubscription',
       'createTime',
-      'updateTime'
+      'updateTime',
+      'reference'
     ]
   });
 };

api/src/user/createUser.js

@@ -92,9 +92,15 @@ exports.createUser = async ({ data, auth: authContext }) => {
         news: true
       },
       creationLanguage: data.communicationLanguage,
-      communicationLanguage: data.communicationLanguage
+      communicationLanguage: data.communicationLanguage,
       // NOTE: there are several other properties that don't have defaults, see
       // src/lib/models/Users.ts -> UserPrivate
+      // Optional reference field
+      ...(data.reference && typeof data.reference === 'string' && data.reference.length > 0
+        ? {
+            reference: data.reference
+          }
+        : {})
     });
 
     await db

src/lib/api/auth.ts

@@ -388,13 +388,18 @@ export const register = async ({
   password,
   firstName,
   lastName,
-  countryCode
+  countryCode,
+  reference
 }: {
   email: string;
   password: string;
   firstName: string;
   lastName: string;
   countryCode: string;
+  /**
+   * The answer to the question "How did you hear about WTMG?"
+   */
+  reference: string | null;
 }) => {
   isRegistering.set(true);
   await createUserWithEmailAndPassword(auth(), email, password);
@@ -413,7 +418,8 @@ export const register = async ({
     firstName,
     lastName,
     countryCode,
-    communicationLanguage: get(locale) ?? 'en'
+    communicationLanguage: get(locale) ?? 'en',
+    reference
   });
   trackEvent(PlausibleEvent.CREATE_ACCOUNT);
   await resolveOnUserLoaded();

src/lib/api/functions.ts

@@ -24,6 +24,7 @@ export type CreateUserRequest = {
   lastName: string;
   countryCode: string;
   communicationLanguage: string;
+  reference: string | null;
 };
 let createUserRef: HttpsCallable<CreateUserRequest> | null = null;
 export const createUser: HttpsCallable<CreateUserRequest> = wrapCallable(() => createUserRef);

src/locales/de.json

@@ -1066,13 +1066,15 @@
       "country": {
         "from-list": "Bitte wählen Sie ein Land aus der Liste. Dies hilft uns, die Karte darauf zu fokussieren, woher Sie kommen"
       },
-      "consent": "Sie müssen den Bedingungen von Welcome To My Garden zustimmen, wenn Sie die Plattform nutzen möchten."
+      "consent": "Sie müssen den Bedingungen von Welcome To My Garden zustimmen, wenn Sie die Plattform nutzen möchten.",
+      "reference": "Bitte achten Sie darauf, dass Ihr Antwort maximal 3000 Zeichen lang ist"
     },
     "notify": {
       "successful": "Ihr Konto wurde erfolgreich erstellt! Bitte überprüfen Sie Ihre E-Mail, um Ihr Konto zu bestätigen.",
       "in-use": "Diese E-Mail-Adresse ist bereits in Gebrauch.",
       "unexpected": "Ein unerwarteter Fehler ist aufgetreten. Wenn das Problem weiterhin besteht, wenden Sie sich bitte an {support}"
-    }
+    },
+    "reference": "Wie haben Sie von WTMG gehört? (optional)"
   },
   "chat": {
     "title": "Chat",

src/locales/en.json

@@ -1055,6 +1055,7 @@
     "policies": "I agree to the {cookiePolicy}, {privacyPolicy} and {termsOfUse}",
     "registering": "Signing you up...",
     "registred": "Already have an account? {signIn}",
+    "reference": "How did you hear about WTMG? (optional)",
     "validate": {
       "email": "Please add an email address, this is what you log in with",
       "password": {
@@ -1070,7 +1071,8 @@
       "country": {
         "from-list": "Please choose a country from the list. This helps us focus the map on where you're from"
       },
-      "consent": "You must consent to Welcome To My Garden's terms if you want to use the platform"
+      "consent": "You must consent to Welcome To My Garden's terms if you want to use the platform",
+      "reference": "Please make sure your answer is at most 100 characters long"
     },
     "notify": {
       "successful": "Your account was created successfully! Please check your email to verify your account.",

src/locales/es.json

@@ -1067,13 +1067,15 @@
       "country": {
         "from-list": "Por favor elige un país de la lista. Esto nos ayuda a centrar el mapa en tu lugar de origen."
       },
-      "consent": "Debes aceptar los términos de Welcome To My Garden si deseas utilizar la plataforma."
+      "consent": "Debes aceptar los términos de Welcome To My Garden si deseas utilizar la plataforma.",
+      "reference": "Asegúrate de que tu respuesta tenga como máximo 3000 caracteres"
     },
     "notify": {
       "successful": "¡Tu cuenta ha sido creada con éxito! Por favor revisa tu correo electrónico para verificar su cuenta.",
       "in-use": "Esta dirección de correo electrónico ya está en uso.",
       "unexpected": "Ocurrió un error inesperado. Si el problema persiste, contacta con {support}"
-    }
+    },
+    "reference": "¿Cómo ha conocido WTMG? (opcional)"
   },
   "chat": {
     "title": "Conversar",

src/locales/fr.json

@@ -1060,15 +1060,17 @@
       "last-name": "Veuillez saisir votre nom de famille. Celui-ci ne sera pas partagé avec d'autres utilisateurs",
       "country": {
         "from-list": "Veuillez choisir un pays dans la liste. Ceci nous aide à centrer la carte vers votre pays d'origine."
-      }
+      },
+      "reference": "Veillez à ce que votre réponse comporte au maximum 3000 caractères"
     },
     "title": "Inscription",
     "button": "S'inscrire",
     "registering": "Inscription en cours…",
     "last-name": "Nom",
     "policies": "J'accepte la {cookiePolicy}, la {privacyPolicy} et les {termsOfUse}",
     "first-name": "Prénom",
-    "country": "Pays"
+    "country": "Pays",
+    "reference": "Comment avez-vous entendu parler de WTMG ? (facultatif)"
   },
   "chat": {
     "all-conversations": "Toutes les conversations",

src/locales/nl.json

@@ -710,13 +710,15 @@
       "country": {
         "from-list": "Kies een land uit de lijst. Dit helpt ons om de kaart te focussen op waar je vandaan komt."
       },
-      "consent": "Je moet akkoord gaan met de voorwaarden van Welcome To My Garden als je gebruik wilt maken van het platform."
+      "consent": "Je moet akkoord gaan met de voorwaarden van Welcome To My Garden als je gebruik wilt maken van het platform.",
+      "reference": "Zorg ervoor dat jouw antwoord maximaal 3000 karakters lang is"
     },
     "notify": {
       "successful": "Jouw account is aangemaakt! Controleer jouw e-mail om jouw account te verifiëren.",
       "in-use": "Dit e-mailadres is al in gebruik.",
       "unexpected": "Er is een onverwachte fout opgetreden. Als het probleem aanhoudt, neem dan contact op met {support}"
-    }
+    },
+    "reference": "Hoe heb je van WTMG gehoord? (optioneel)"
   },
   "chat": {
     "title": "Chat",

src/routes/register/+page.svelte

@@ -48,7 +48,13 @@
   type RegistrationFields =
     // Text inputs
     {
-      [fieldName in 'email' | 'password' | 'firstName' | 'lastName' | 'country']: TextInputField;
+      [fieldName in
+        | 'email'
+        | 'password'
+        | 'firstName'
+        | 'lastName'
+        | 'country'
+        | 'reference']: TextInputField;
     } & { consent: CheckboxField }; // Checkbox fields
 
   /** Field definitions with initial values */
@@ -91,6 +97,17 @@
       validate: (v) => {
         if (!v) return $_('register.validate.consent');
       }
+    },
+    reference: {
+      validate: (v: any) => {
+        if (typeof v === 'string' && v.length > 3000) {
+          return $_('register.validate.reference');
+        }
+        if (typeof v !== 'string' && v != null) {
+          // Shouldn't happen
+          return 'Your answer must be text, or empty.';
+        }
+      }
     }
   };
 
@@ -131,7 +148,8 @@
         password: $formPasswordValue,
         firstName: fields.firstName.value as string,
         lastName: fields.lastName.value as string,
-        countryCode: fields.country.value as string
+        countryCode: fields.country.value as string,
+        reference: (fields.reference.value as string)?.trim() || null
       });
       notify.success($_('register.notify.successful'), 10000);
       goto(routes.MAP);
@@ -235,6 +253,21 @@
         {/each}
       </Select>
     </div>
+
+    <div class="reference">
+      <label for="reference">{$_('register.reference')}</label>
+      <TextInput
+        icon={null}
+        type="text"
+        name="reference"
+        id="reference"
+        maxLength={3000}
+        on:blur={() => (fields.reference.error = '')}
+        error={fields.reference.error}
+        bind:value={fields.reference.value}
+      />
+    </div>
+
     <div class="consent">
       <div class="checkbox">
         <input type="checkbox" id="terms" name="terms" bind:checked={fields.consent.value} />