@wise/dynamic-flow-client 2.6.1 → 2.8.0

package/README.md

@@ -43,27 +43,56 @@ import '@wise/dynamic-flow-client/build/main.css';
 
 The `DynamicFlow` component must be wraped in a Neptune `Provider` to support localisation, a `ThemeProvider` to provide theming, and a `SnackbarProvider` to ensure snackbars display correctly. Translations should be imported from both components and dynamic flows, merged, and passed to the `Provider` component (as below).
 
+### For CRAB apps, use the `getLocalisedMessages(...)` function for translations
+
 ```js
 import {
   Provider,
   SnackbarProvider,
   translations as componentTranslations,
-  getLangFromLocale,
-  DEFAULT_LANG,
 } from '@transferwise/components';
-import { DynamicFlow, translations as dynamicFlowsTranslations } from '@wise/dynamic-flow-client/';
-
-const lang = getLangFromLocale(locale) || DEFAULT_LANG;
-const i18n = {
-  locale,
-  messages: {
-    ...componentTranslations[lang],
-    ...dynamicFlowsTranslations[lang],
-  },
-};
+import { getLocalisedMessages } from '@transferwise/crab/client';
+import {
+  DynamicFlow,
+  translations as dynamicFlowsTranslations,
+} from '@wise/dynamic-flow-client';
+
+const messages = getLocalisedMessages(locale, [componentTranslations, dynamicFlowsTranslations])
+
+return (
+  <Provider i18n={{ locale, messages }}>
+    <ThemeProvider theme={theme} screenMode={screenMode}>
+      <SnackbarProvider>
+        <DynamicFlow {...props} />
+      </SnackbarProvider>
+    </ThemeProvider>
+  </Provider>
+);
+```
+
+### For non-CRAB apps
+
+You'll need to merge the '@transferwise/components' translations with the '@wise/dynamic-flow-client' translations.  
+
+```js
+import {
+  Provider,
+  SnackbarProvider,
+  translations as componentTranslations,
+} from '@transferwise/components';
+import {
+  DynamicFlow,
+  translations as dynamicFlowsTranslations,
+} from '@wise/dynamic-flow-client';
+
+// create your messages object
+const messages: Record<string, string> = {
+  ...(componentTranslations[lang] || componentTranslations[lang.replace('-', '_')] || componentTranslations[lang.substring(0, 2)] || {}),
+  ...(translations[lang] || translations[lang.replace('-', '_')] || translations[lang.substring(0, 2)] || {}),
+}
 
 return (
-  <Provider i18n={i18n}>
+  <Provider i18n={{ locale, messages }}>
     <ThemeProvider theme={theme} screenMode={screenMode}>
       <SnackbarProvider>
         <DynamicFlow {...props} />

package/build/i18n/en.json

@@ -5,6 +5,9 @@
   "dynamicFlows.ArraySchema.maxItemsError": "Please add {maxItems} or fewer.",
   "dynamicFlows.ArraySchema.minItemsError": "Please add at least {minItems}.",
   "dynamicFlows.ArraySchema.removeItem": "Remove",
+  "dynamicFlows.CameraCapture.CameraConnectionIssue.action": "Try again",
+  "dynamicFlows.CameraCapture.CameraConnectionIssue.paragraph": "Please check if it is connected and try again.",
+  "dynamicFlows.CameraCapture.CameraConnectionIssue.title": "We can't access your camera",
   "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "The browser you're using doesn't have support for a camera. Try a different browser, device, or download our mobile app.",
   "dynamicFlows.CameraCapture.CameraNotSupported.title": "Camera not supported",
   "dynamicFlows.CameraCapture.NoCameraAccess.action": "Enable camera access",
@@ -24,6 +27,7 @@
   "dynamicFlows.ControlFeedback.patternDate": "Please enter a date in the corrrect format.",
   "dynamicFlows.ControlFeedback.required": "Please fill out this field.",
   "dynamicFlows.ControlFeedback.type": "Incorrect type",
+  "dynamicFlows.DefaultErrorMessages.required": "Please fill out this field.",
   "dynamicFlows.DynamicExternal.retryTitle": "Reopen window",
   "dynamicFlows.DynamicParagraph.copied": "Copied to clipboard",
   "dynamicFlows.DynamicParagraph.copy": "Copy",

package/build/i18n/pt.json

@@ -1,6 +1,6 @@
 {
   "dynamicFlows.ArraySchema.addItem": "Salvar",
-  "dynamicFlows.ArraySchema.addItemTitle": "Add Item",
+  "dynamicFlows.ArraySchema.addItemTitle": "Adicionar item",
   "dynamicFlows.ArraySchema.editItem": "Salvar",
   "dynamicFlows.ArraySchema.maxItemsError": "Adicione {maxItems} ou menos.",
   "dynamicFlows.ArraySchema.minItemsError": "Adicione pelo menos {minItems}.",
@@ -13,7 +13,7 @@
   "dynamicFlows.CameraCapture.reviewInstructions": "A sua foto está clara, legível e aparece por inteiro?",
   "dynamicFlows.CameraCapture.reviewRetry": "Não, tentar novamente",
   "dynamicFlows.CameraCapture.reviewSubmit": "Sim, enviar",
-  "dynamicFlows.CameraCapture.rotatePhone.text": "Rotate your phone to portrait view to take a photo",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "Gire o telefone para o modo retrato para tirar uma foto",
   "dynamicFlows.ControlFeedback.maxLength": "Por favor, insira {maxLength} caracteres ou menos.",
   "dynamicFlows.ControlFeedback.maximum": "Por favor, insira um número que seja {maximum} ou menos.",
   "dynamicFlows.ControlFeedback.maximumDate": "Por favor, insira uma data que seja em ou antes de {maximum}.",

package/build/i18n/zh_CN.json

@@ -1,21 +1,21 @@
 {
   "dynamicFlows.ArraySchema.addItem": "保存",
-  "dynamicFlows.ArraySchema.addItemTitle": "Add Item",
+  "dynamicFlows.ArraySchema.addItemTitle": "添加项目",
   "dynamicFlows.ArraySchema.editItem": "保存",
-  "dynamicFlows.ArraySchema.maxItemsError": "请添加 {maxItems} 个或更少。",
-  "dynamicFlows.ArraySchema.minItemsError": "请至少添加 {minItems}。",
-  "dynamicFlows.ArraySchema.removeItem": "删除",
-  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "The browser you're using doesn't have support for a camera. Try a different browser, device, or download our mobile app.",
+  "dynamicFlows.ArraySchema.maxItemsError": "请添加不超过 {maxItems} 项。",
+  "dynamicFlows.ArraySchema.minItemsError": "请至少添加 {minItems} 项。",
+  "dynamicFlows.ArraySchema.removeItem": "移除",
+  "dynamicFlows.CameraCapture.CameraNotSupported.paragraph": "您目前使用的浏览器不支持摄像头。请尝试其他浏览器、设备或下载我们的应用。",
   "dynamicFlows.CameraCapture.CameraNotSupported.title": "不支持摄像头",
-  "dynamicFlows.CameraCapture.NoCameraAccess.action": "Enable camera access",
-  "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "Enable camera access in your browser's settings to get going again.",
-  "dynamicFlows.CameraCapture.NoCameraAccess.title": "We can't access your camera",
+  "dynamicFlows.CameraCapture.NoCameraAccess.action": "允许访问摄像头",
+  "dynamicFlows.CameraCapture.NoCameraAccess.paragraph": "在浏览器设置中启用相机访问权限，再重新尝试。",
+  "dynamicFlows.CameraCapture.NoCameraAccess.title": "我们无法访问您的摄像头",
   "dynamicFlows.CameraCapture.reviewInstructions": "您的图片是否清晰、可读和完整？",
-  "dynamicFlows.CameraCapture.reviewRetry": "否，重试",
+  "dynamicFlows.CameraCapture.reviewRetry": "否，再试一次",
   "dynamicFlows.CameraCapture.reviewSubmit": "是，提交",
-  "dynamicFlows.CameraCapture.rotatePhone.text": "Rotate your phone to portrait view to take a photo",
-  "dynamicFlows.ControlFeedback.maxLength": "请输入 {maxLength} 个或更少字符",
-  "dynamicFlows.ControlFeedback.maximum": "请输入一个小于或等于 {maximum} 的数字",
+  "dynamicFlows.CameraCapture.rotatePhone.text": "将手机旋转到纵向视图以拍照",
+  "dynamicFlows.ControlFeedback.maxLength": "请输入不超过 {maxLength} 个字符。",
+  "dynamicFlows.ControlFeedback.maximum": "请输入一个小于或等于 {maximum} 的数字。",
   "dynamicFlows.ControlFeedback.maximumDate": "请输入 {maximum} 或之前的日期",
   "dynamicFlows.ControlFeedback.minLength": "请至少输入 {minLength} 个字符",
   "dynamicFlows.ControlFeedback.minimum": "请输入一个大于或等于 {minimum} 的数字",
@@ -23,21 +23,21 @@
   "dynamicFlows.ControlFeedback.pattern": "请以正确的格式输入",
   "dynamicFlows.ControlFeedback.patternDate": "请以正确的格式输入日期",
   "dynamicFlows.ControlFeedback.required": "请填写此字段。",
-  "dynamicFlows.ControlFeedback.type": "类型不正确",
+  "dynamicFlows.ControlFeedback.type": "类型错误",
   "dynamicFlows.DynamicExternal.retryTitle": "重新打开窗口",
   "dynamicFlows.DynamicParagraph.copied": "已复制到剪贴板",
   "dynamicFlows.DynamicParagraph.copy": "复制",
-  "dynamicFlows.ErrorBoundary.errorAlert": "糟糕。出问题了…",
+  "dynamicFlows.ErrorBoundary.errorAlert": "糟糕。出错了…",
   "dynamicFlows.ErrorBoundary.retry": "重试",
   "dynamicFlows.ExternalConfirmation.cancel": "取消",
-  "dynamicFlows.ExternalConfirmation.description": "Please confirm you want to open **{origin}** in a new browser tab.",
-  "dynamicFlows.ExternalConfirmation.open": "Open in new tab",
-  "dynamicFlows.ExternalConfirmation.title": "Please confirm",
+  "dynamicFlows.ExternalConfirmation.description": "请确认您是否要在新标签页中打开**{origin}**。",
+  "dynamicFlows.ExternalConfirmation.open": "在新标签页中打开",
+  "dynamicFlows.ExternalConfirmation.title": "请确认",
   "dynamicFlows.Help.ariaLabel": "点击此处获取更多信息。",
   "dynamicFlows.MultipleFileUploadSchema.maxFileSizeError": "抱歉，该文件太大。请上传一个更小的文件。",
-  "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "请上传 {maxItems} 个或更少的文件。",
-  "dynamicFlows.MultipleFileUploadSchema.minItemsError": "请至少上传 {minItems} 个文件。",
-  "dynamicFlows.PersistAsyncSchema.genericError": "出现一些问题，请稍后重试！",
+  "dynamicFlows.MultipleFileUploadSchema.maxItemsError": "请上传不超过 {maxItems} 个文件。",
+  "dynamicFlows.MultipleFileUploadSchema.minItemsError": "请上传至少 {minItems} 个文件。",
+  "dynamicFlows.PersistAsyncSchema.genericError": "出错了，请稍后再试！",
   "dynamicFlows.ReadOnlySchema.no": "否",
   "dynamicFlows.ReadOnlySchema.yes": "是"
 }

package/build/main.css

@@ -129,26 +129,6 @@
 .df-back-btn:active .tw-avatar__content {
   background-color: var(--color-background-neutral-active);
 }
-#camera-not-supported {
-  background-color: #fff;
-  height: 100%;
-  left: 0;
-  overflow: scroll;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 10000;
-}
-#no-camera-access {
-  background-color: #fff;
-  height: 100%;
-  left: 0;
-  overflow: scroll;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 10000;
-}
 .orientation-lock-overlay {
   display: none;
   position: fixed;