feat(javascript): load translations from new space:opened event

FlatFilers · Jul 15, 2024 · 269a32a · 269a32a
1 parent d966c68
commit 269a32a
Show file tree

Hide file tree

Showing 17 changed files with 858 additions and 565 deletions.
diff --git a/.changeset/sharp-pears-teach.md b/.changeset/sharp-pears-teach.md
@@ -0,0 +1,5 @@
+---
+'@flatfile/javascript': minor
+---
+
+Add internationalization support with detected browser language or given override language.
diff --git a/apps/vanilla/config.js b/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,

diff --git a/apps/vanilla/index.html b/apps/vanilla/index.html
@@ -8,13 +8,75 @@
 
   <body>
     <!-- optional: initialize with button and a modal -->
-    <button onclick="initializePreloadedFlatfile('pk_123456')">
+    <button
+      onclick="initializePreloadedFlatfile(localStorage.getItem('override-publishable-key') ?? 'pk_123456')"
+    >
       Open "Preloaded" Flatfile
     </button>
 
-    <button onclick="initializeFlatfile('pk_123456')">
+    <button
+      onclick="initializeFlatfile(localStorage.getItem('override-publishable-key') ?? 'pk_123456')"
+    >
       Open "On Demand" Flatfile
     </button>
+
+    <br />
+    <br />
+
+    <label>Publishable Key:</label>
+    <select id="override-publishable-key">
+      <option selected value="default">pk_123456</option>
+      <option value="other">Enter Publishable Key...</option>
+    </select>
+
+    <br />
+    <br />
+
+    <label>API URL:</label>
+    <select id="override-api-url">
+      <option selected value="default">
+        https://platform.flatfile.com/api
+      </option>
+      <option value="http://localhost:3000">http://localhost:3000</option>
+      <option value="other">Enter API URL...</option>
+    </select>
+
+    <br />
+    <br />
+
+    <label>Space UI URL:</label>
+    <select id="override-space-url">
+      <option selected value="default">https://platform.flatfile.com/s</option>
+      <option value="http://localhost:6789">http://localhost:6789</option>
+      <option value="other">Enter Space URL...</option>
+    </select>
+
+    <br />
+    <br />
+
+    <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()

diff --git a/apps/vanilla/main.js b/apps/vanilla/main.js
@@ -2,6 +2,59 @@ import { createIframe, initializeFlatfile } from '@flatfile/javascript'
 
 import { config } from './config'
 import { listener } from './listener'
+
+const overrideLanguageSelect = document.getElementById('override-language')
+overrideLanguageSelect.addEventListener('change', () => {
+  localStorage.setItem('overrideLanguage', overrideLanguageSelect.value)
+})
+const overrideLanguage = localStorage.getItem('overrideLanguage')
+if (overrideLanguage) {
+  overrideLanguageSelect.value = overrideLanguage
+}
+
+function overrideByKey(key) {
+  const overrideSelect = document.getElementById(`override-${key}`)
+  function createAndSelectOption(newValue) {
+    overrideSelect.value = newValue
+    if (overrideSelect.value !== newValue) {
+      const newOption = document.createElement('option')
+      newOption.setAttribute('value', newValue)
+      newOption.textContent = newValue
+      overrideSelect.appendChild(newOption)
+      overrideSelect.value = newValue
+    }
+  }
+  overrideSelect.addEventListener('change', () => {
+    if (overrideSelect.value === 'other') {
+      const newValue = prompt(`Enter new value for ${key}:`)
+      if (typeof newValue === 'string' && newValue.length > 0) {
+        createAndSelectOption(newValue)
+      } else {
+        overrideSelect.value = 'default'
+      }
+    }
+    localStorage.setItem(`override-${key}`, overrideSelect.value)
+  })
+  const override = localStorage.getItem(`override-${key}`)
+  if (typeof override === 'string' && override.length > 0) {
+    createAndSelectOption(override)
+  }
+  return overrideSelect
+}
+
+const overrideApiUrlSelect = overrideByKey('api-url')
+const overrideSpaceUrlSelect = overrideByKey('space-url')
+overrideByKey('publishable-key')
+
+function getUrls() {
+  const apiUrl = overrideApiUrlSelect.value
+  const spaceUrl = overrideSpaceUrlSelect.value
+  return {
+    ...(apiUrl === 'default' ? {} : { apiUrl }),
+    ...(spaceUrl === 'default' ? {} : { spaceUrl }),
+  }
+}
+
 /*
 // ---Get a space to reuse it, load automatically
 const flatfile = new FlatfileClient({
@@ -33,12 +86,13 @@ getSpace()
 */
 
 const BASE_OPTIONS = {
+  languageOverride: overrideLanguageSelect.value,
   spaceBody: { name: 'Hello' },
   // listener,
   // Additional parameters...
   workbook: config,
-  exitPrimaryButtonText: 'CLOSE!',
-  exitSecondaryButtonText: 'KEEP IT!',
+  // exitPrimaryButtonText: 'CLOSE!',
+  // exitSecondaryButtonText: 'KEEP IT!',
   document: {
     title: 'my title',
     body: 'my body',
@@ -79,6 +133,7 @@ const BASE_OPTIONS = {
 window.initializeFlatfile = async (publishableKey) => {
   const flatfileOptions = {
     ...BASE_OPTIONS,
+    ...getUrls(),
     publishableKey,
     closeSpace: {
       operation: 'submitActionFg',
@@ -100,6 +155,7 @@ window.preloadFlatfile = () => {
   window.initializePreloadedFlatfile = async (publishableKey) => {
     const flatfileOptions = {
       ...BASE_OPTIONS,
+      ...getUrls(),
       publishableKey,
       mountElement: 'Flatfile_Preload_Iframe',
       closeSpace: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/embedded-utils/src/utils/handlePostMessage.ts b/packages/embedded-utils/src/utils/handlePostMessage.ts
@@ -4,14 +4,18 @@ import { ISpace } from '../types'
 export const handlePostMessage = (
   closeSpace: ISpace['closeSpace'],
   listener: FlatfileListener,
-  onClose?: () => void
+  onClose?: () => void,
+  onInit?: (data: { localTranslations: Record<string, any> }) => void
 ) => {
   return (message: MessageEvent<{ flatfileEvent: FlatfileEvent }>) => {
     const { flatfileEvent } = message.data
     if (!flatfileEvent) {
       return
     }
-    if (
+    if (flatfileEvent.topic === 'space:opened') {
+      const { localTranslations } = flatfileEvent.payload
+      onInit?.({ localTranslations })
+    } else if (
       flatfileEvent.topic === 'job:outcome-acknowledged' &&
       flatfileEvent.payload.status === 'complete' &&
       flatfileEvent.payload.operation === closeSpace?.operation &&