@wise/dynamic-flow-client-internal 3.0.0-next-9cca10.1 → 3.0.0

package/README.md

@@ -44,30 +44,56 @@ import '@wise/dynamic-flow-client-internal/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 { getLocalisedMessages } from '@transferwise/crab/client';
 import {
   DynamicFlow,
   translations as dynamicFlowsTranslations,
-} from '@wise/dynamic-flow-client-internal/';
-
-const lang = getLangFromLocale(locale) || DEFAULT_LANG;
-const i18n = {
-  locale,
-  messages: {
-    ...componentTranslations[lang],
-    ...dynamicFlowsTranslations[lang],
-  },
-};
+} from '@wise/dynamic-flow-client-internal';
+
+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-internal';
+
+// 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/main.css

@@ -129,25 +129,24 @@
 .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;
+.orientation-lock-overlay {
+  display: none;
   position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 10000;
+  inset: 0;
+  background-color: var(--color-dark);
+  color: var(--color-white);
+  font-size: var(--font-size-16);
+  font-weight: var(--font-weight-semi-bold);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 24px;
 }
-#no-camera-access {
-  background-color: #fff;
-  height: 100%;
-  left: 0;
-  overflow: scroll;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 10000;
+@media screen and (orientation: landscape) and (height <= 767px) {
+  .orientation-lock-overlay {
+    display: flex;
+  }
 }
 .df-image {
   display: flex;
@@ -172,7 +171,7 @@
   width: 300px;
 }
 /* wide screens */
-@media (min-width: 576px) {
+@media (width >= 576px) {
   .df-image.xs img {
     width: 100px;
   }