Documented 5 functions across 1 file

.changeset/sharp-pears-teach.md

@@ -0,0 +1,5 @@
+---
+'@flatfile/javascript': minor
+---
+
+Add internationalization support with detected browser language or given override language.

apps/vanilla/config.js

@@ -3,6 +3,16 @@ export const config = {
   labels: ['pinned'],
   sheets: [
     {
+      actions: [
+        {
+          operation: 'customAction',
+          mode: 'foreground',
+          label: 'Custom Action',
+          icon: 'none',
+          description: 'Do something custom',
+          primary: true,
+        },
+      ],
       name: 'Contacts',
       slug: 'contacts',
       allowAdditionalFields: true,

apps/vanilla/index.html

@@ -15,6 +15,30 @@
     <button onclick="initializeFlatfile('pk_123456')">
       Open "On Demand" Flatfile
     </button>
+
+    <label>Override language:</label>
+    <select id="override-language">
+      <option selected value=""></option>
+      <option value="de">de</option>
+      <option value="en">en</option>
+      <option value="en-GB">en-GB</option>
+      <option value="en-CA">en-CA</option>
+      <option value="en-ZA">en-ZA</option>
+      <option value="es">es</option>
+      <option value="fr">fr</option>
+      <option value="fr-CA">fr-CA</option>
+      <option value="fr-FR">fr-FR</option>
+      <option value="id">id</option>
+      <option value="it">it</option>
+      <option value="jp">jp</option>
+      <option value="kr">kr</option>
+      <option value="pt">pt</option>
+      <option value="pt-BR">pt-BR</option>
+      <option value="tr">tr</option>
+      <option value="vi">vi</option>
+      <option value="zh">zh</option>
+    </select>
+
     <script>
       window.addEventListener('load', (event) => {
         preloadFlatfile()

apps/vanilla/main.js

@@ -2,6 +2,20 @@ import { createIframe, initializeFlatfile } from '@flatfile/javascript'
 
 import { config } from './config'
 import { listener } from './listener'
+
+const overrideLanguageSelect = document.getElementById('override-language')
+/**
+ * @description Sets a item in `localStorage` with key `'overrideLanguage'` and its
+ * value is the selected option from `<overrideLanguageSelect>`.
+ */
+overrideLanguageSelect.addEventListener('change', () => {
+  localStorage.setItem('overrideLanguage', overrideLanguageSelect.value)
+})
+const overrideLanguage = localStorage.getItem('overrideLanguage')
+if (overrideLanguage) {
+  overrideLanguageSelect.value = overrideLanguage
+}
+
 /*
 // ---Get a space to reuse it, load automatically
 const flatfile = new FlatfileClient({
@@ -33,6 +47,7 @@ getSpace()
 */
 
 const BASE_OPTIONS = {
+  languageOverride: overrideLanguageSelect.value,
   spaceBody: { name: 'Hello' },
   // listener,
   // Additional parameters...
@@ -76,12 +91,27 @@ const BASE_OPTIONS = {
   namespace: 'my-namespace',
 }
 // ---Create a new Space + Workbook and load an iFrame
+/**
+ * @description Sets up a Flatfile instance with the given `publishableKey`, and logs
+ * the resulting `space` object to the console.
+ * 
+ * @param {string} publishableKey - 256-bitlong identifier that identifies the Spot
+ * instance, which is utilized to submit an action and produce a close space occasion
+ * with further information on the occurrence.
+ */
 window.initializeFlatfile = async (publishableKey) => {
   const flatfileOptions = {
     ...BASE_OPTIONS,
     publishableKey,
     closeSpace: {
       operation: 'submitActionFg',
+      /**
+       * @description Consoles the JSON-formatted event payload upon receiving a close space
+       * event.
+       * 
+       * @param {object} event - space event to be logged and passed as a JSON string to
+       * the `console.log()` method.
+       */
       onClose: (event) => {
         console.log(
           `Close space event payload: ${JSON.stringify(event, null, 2)}`
@@ -95,6 +125,9 @@ window.initializeFlatfile = async (publishableKey) => {
 }
 
 // ---Pre-load iFrame by specific mountID for faster initial load-time
+/**
+ * @description Preloads a Flatfile application and sets up an iframe to display it.
+ */
 window.preloadFlatfile = () => {
   createIframe('Flatfile_Preload_Iframe', true)
   window.initializePreloadedFlatfile = async (publishableKey) => {
@@ -104,6 +137,13 @@ window.preloadFlatfile = () => {
       mountElement: 'Flatfile_Preload_Iframe',
       closeSpace: {
         operation: 'submitActionFg',
+        /**
+         * @description Logs a close event's JSON-formatted payload to the console.
+         * 
+         * @param {object} event - space event that is passed to the function as its sole
+         * argument and whose details are logged through the `console.log()` call using JSON
+         * stringifying.
+         */
         onClose: (event) => {
           console.log(
             `Close space event payload: ${JSON.stringify(event, null, 2)}`